@ebrains/components 3.0.0 → 3.2.0

package/dist/components/eds-kg-web-services-select2.js

@@ -1,13 +1,12 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { d as defineCustomElement$b } from './eds-icon-wrapper2.js';
-import { d as defineCustomElement$a } from './eds-input2.js';
-import { d as defineCustomElement$9 } from './eds-input-dropzone2.js';
-import { d as defineCustomElement$8 } from './eds-input-field2.js';
-import { d as defineCustomElement$7 } from './eds-input-file2.js';
-import { d as defineCustomElement$6 } from './eds-input-footer2.js';
-import { d as defineCustomElement$5 } from './eds-input-label2.js';
-import { d as defineCustomElement$4 } from './eds-input-range2.js';
-import { d as defineCustomElement$3 } from './eds-input-search2.js';
+import { d as defineCustomElement$a } from './eds-icon-wrapper2.js';
+import { d as defineCustomElement$9 } from './eds-input2.js';
+import { d as defineCustomElement$8 } from './eds-input-dropzone2.js';
+import { d as defineCustomElement$7 } from './eds-input-field2.js';
+import { d as defineCustomElement$6 } from './eds-input-file2.js';
+import { d as defineCustomElement$5 } from './eds-input-footer2.js';
+import { d as defineCustomElement$4 } from './eds-input-label2.js';
+import { d as defineCustomElement$3 } from './eds-input-range2.js';
 import { d as defineCustomElement$2 } from './eds-input-select2.js';
 import { d as defineCustomElement$1 } from './eds-link2.js';
 
@@ -52,7 +51,7 @@ const EdsKgWebServicesSelect = /*@__PURE__*/ proxyCustomElement(class EdsKgWebSe
             // Check cache first
             const cachedEntry = webServicesCache.get(cacheKey);
             const now = Date.now();
-            if (cachedEntry && (now - cachedEntry.timestamp) < CACHE_DURATION) {
+            if (cachedEntry && now - cachedEntry.timestamp < CACHE_DURATION) {
                 // Use cached data
                 this.webServices = cachedEntry.data;
             }
@@ -71,7 +70,7 @@ const EdsKgWebServicesSelect = /*@__PURE__*/ proxyCustomElement(class EdsKgWebSe
                 });
             }
             // Format options for eds-input-field: "Localizoom (ebrains-localizoom)"
-            this.selectOptions = this.webServices.map(service => ({
+            this.selectOptions = this.webServices.map((service) => ({
                 label: `${service.name} (${service.short_name})`,
                 value: service.short_name
             }));
@@ -124,7 +123,7 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["eds-kg-web-services-select", "eds-icon-wrapper", "eds-input", "eds-input-dropzone", "eds-input-field", "eds-input-file", "eds-input-footer", "eds-input-label", "eds-input-range", "eds-input-search", "eds-input-select", "eds-link"];
+    const components = ["eds-kg-web-services-select", "eds-icon-wrapper", "eds-input", "eds-input-dropzone", "eds-input-field", "eds-input-file", "eds-input-footer", "eds-input-label", "eds-input-range", "eds-input-select", "eds-link"];
     components.forEach(tagName => { switch (tagName) {
         case "eds-kg-web-services-select":
             if (!customElements.get(tagName)) {
@@ -132,46 +131,41 @@ function defineCustomElement() {
             }
             break;
         case "eds-icon-wrapper":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$b();
-            }
-            break;
-        case "eds-input":
             if (!customElements.get(tagName)) {
                 defineCustomElement$a();
             }
             break;
-        case "eds-input-dropzone":
+        case "eds-input":
             if (!customElements.get(tagName)) {
                 defineCustomElement$9();
             }
             break;
-        case "eds-input-field":
+        case "eds-input-dropzone":
             if (!customElements.get(tagName)) {
                 defineCustomElement$8();
             }
             break;
-        case "eds-input-file":
+        case "eds-input-field":
             if (!customElements.get(tagName)) {
                 defineCustomElement$7();
             }
             break;
-        case "eds-input-footer":
+        case "eds-input-file":
             if (!customElements.get(tagName)) {
                 defineCustomElement$6();
             }
             break;
-        case "eds-input-label":
+        case "eds-input-footer":
             if (!customElements.get(tagName)) {
                 defineCustomElement$5();
             }
             break;
-        case "eds-input-range":
+        case "eds-input-label":
             if (!customElements.get(tagName)) {
                 defineCustomElement$4();
             }
             break;
-        case "eds-input-search":
+        case "eds-input-range":
             if (!customElements.get(tagName)) {
                 defineCustomElement$3();
             }

package/dist/components/eds-link2.js

@@ -60,12 +60,8 @@ const linkStyles = cva([
                 'rounded-full',
                 'aria-disabled:bg-dark aria-disabled:text-lightest'
             ],
-            cta: [
-                'cta-link !px-0 !py-0 !min-h-0 !h-auto'
-            ],
-            'cta-brand': [
-                'cta-link-brand !px-0 !py-0 !min-h-0 !h-auto'
-            ]
+            cta: ['cta-link !px-0 !py-0 !min-h-0 !h-auto'],
+            'cta-brand': ['cta-link-brand !px-0 !py-0 !min-h-0 !h-auto']
         },
         iconSmall: {
             true: '',
@@ -287,7 +283,7 @@ const EdsLink = /*@__PURE__*/ proxyCustomElement(class EdsLink extends HTMLEleme
         const labelClasses = this.hideLabelOnSmallScreen
             ? 'hidden lg:flex' // Tailwind example: hidden on small screens, visible on larger
             : '';
-        return (h("a", { key: 'b604585e484db17a87cba4fb492ef17014c0c88a', class: `${classes || ''}`, href: isInteractive ? safeUrl : undefined, target: this.external && isInteractive ? '_blank' : undefined, rel: this.external && isInteractive ? 'noopener noreferrer' : undefined, tabIndex: isInteractive ? 0 : -1, "aria-label": isIconOnly ? this.ariaLabel || 'Link' : undefined, "aria-disabled": this.disabled ? 'true' : undefined, "aria-current": this.current ? 'page' : undefined, role: this.disabled ? 'link' : undefined, download: this.download ? '' : undefined, onClick: (event) => this.handleClick(event), onKeyDown: (event) => this.handleKeyDown(event) }, h("span", { key: 'c3d5d62b4740ecb9f4fa6330147bb1f23afe22e0', class: "z-1 relative inline-flex items-center justify-center" }, this.renderLeftIcon(), this.label && (h("span", { key: 'c4340d032516895b8ad9a01170998605875a5774', class: `${labelClasses} ${this.icon ? (this.iconPos === 'right' ? (this.size === 'large' ? 'pr-4' : 'pr-2') : (this.size === 'large' ? 'pl-4' : 'pl-2')) : ''}` }, this.label)), this.renderRightIcon())));
+        return (h("a", { key: 'a447ffc8ba377ceb4fe0dc199ad7225e222d4cf3', class: `${classes || ''}`, href: isInteractive ? safeUrl : undefined, target: this.external && isInteractive ? '_blank' : undefined, rel: this.external && isInteractive ? 'noopener noreferrer' : undefined, tabIndex: isInteractive ? 0 : -1, "aria-label": isIconOnly ? this.ariaLabel || 'Link' : undefined, "aria-disabled": this.disabled ? 'true' : undefined, "aria-current": this.current ? 'page' : undefined, role: this.disabled ? 'link' : undefined, download: this.download ? '' : undefined, onClick: (event) => this.handleClick(event), onKeyDown: (event) => this.handleKeyDown(event) }, h("span", { key: '72d84592cfd7e48e983e281d8e8f1d8a2b739e26', class: "z-1 relative inline-flex items-center justify-center" }, this.renderLeftIcon(), this.label && (h("span", { key: 'a101036d3206e7f610c04dfc9d0a4dcd5c1a2b4f', class: `${labelClasses} ${this.icon ? (this.iconPos === 'right' ? (this.size === 'large' ? 'pr-4' : 'pr-2') : this.size === 'large' ? 'pl-4' : 'pl-2') : ''}` }, this.label)), this.renderRightIcon())));
     }
     get el() { return this; }
     static get style() { return EdsLinkStyle0; }

package/dist/components/eds-logo2.js

@@ -12,17 +12,10 @@ const EdsLogo = /*@__PURE__*/ proxyCustomElement(class EdsLogo extends HTMLEleme
         this.__registerHost();
         this.__attachShadow();
         this.href = '/';
-        this.orientation = 'horizontal';
         this.variant = 'positive';
-        this.label = 'Home';
     }
     /**
-     * Handles the click event on the logo link.
-     * Emits a `matomoEvent` for analytics tracking with details about the interaction.
-     * - `category`: Component type (e.g., "ui-component").
-     * - `tag`: The HTML tag name of the component.
-     * - `name`: Event name, set as "logo".
-     * - `action`: The action, set as "click".
+     * Emits an analytics event when the logo link is clicked.
      */
     handleClick() {
         sendAnalytics({
@@ -32,26 +25,15 @@ const EdsLogo = /*@__PURE__*/ proxyCustomElement(class EdsLogo extends HTMLEleme
             action: 'click'
         });
     }
-    /**
-     * Determines the appropriate SVG content based on the `orientation` and `type` props.
-     */
-    getLogo() {
-        if (this.variant == 'negative') {
-            return logoNegative;
-        }
-        return logoPositive;
-    }
     render() {
-        const logoContent = this.getLogo();
-        return (h("a", { key: '06321ecfcf456f1870cd080043203258306a2451', href: this.href, onClick: () => this.handleClick(), class: "eds-logo-wrapper", "aria-label": this.label }, h("div", { key: '0e9da2f98700553f4898d0f60935f1c5cbd97cbc', innerHTML: logoContent })));
+        const logoContent = this.variant === 'negative' ? logoNegative : logoPositive;
+        return (h("a", { key: '3576feaa13063508c317d8b31817165de79ced77', href: this.href, onClick: () => this.handleClick(), class: "eds-logo-wrapper", "aria-label": "Home" }, h("div", { key: 'b43ef52813a59ba47e4a07c3d410b007a27ca186', innerHTML: logoContent })));
     }
     get el() { return this; }
     static get style() { return EdsLogoStyle0; }
 }, [1, "eds-logo", {
         "href": [1],
-        "orientation": [1],
-        "variant": [1, "type"],
-        "label": [1]
+        "variant": [1, "type"]
     }]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {

package/dist/components/eds-matomo-notice2.js

@@ -4,7 +4,7 @@ import { d as defineCustomElement$3 } from './eds-accordion2.js';
 import { d as defineCustomElement$2 } from './eds-button2.js';
 import { d as defineCustomElement$1 } from './eds-icon-wrapper2.js';
 
-const edsMatomoNoticeCss = ".fixed{position:fixed}.absolute{position:absolute}.w-full{width:100%}.bottom-0{bottom:0rem}.bottom-4{bottom:0.25rem}.p-4{padding:0.25rem}.p-6{padding:0.375rem}.p-8{padding:0.5rem}.z-10{z-index:10}.z-\\[999999\\]{z-index:999999}.left-0{left:0rem}.left-1\\/2{left:50%}.grow{flex-grow:1}.-translate-x-1\\/2{--tw-translate-x:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-y-1\\/2{--tw-translate-y:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.flex{display:flex}.gap-12{gap:0.75rem}.gap-20{gap:1.25rem}.gap-4{gap:0.25rem}.gap-8{gap:0.5rem}@media (min-width: 750px){.md\\:left-1\\/2{left:50%}.md\\:flex{display:flex}.md\\:hidden{display:none}.md\\:-translate-x-1\\/2{--tw-translate-x:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.md\\:-translate-y-1\\/2{--tw-translate-y:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}}";
+const edsMatomoNoticeCss = ":host{display:block;background-color:var(--white, #FFFFFF);border-radius:16px;box-shadow:0 8px 24px rgba(0, 0, 0, 0.12);overflow:hidden}.flex{display:flex}.items-center{align-items:center}.gap-8{gap:0.5rem}";
 const EdsMatomoNoticeStyle0 = edsMatomoNoticeCss;
 
 const EdsMatomoNotice = /*@__PURE__*/ proxyCustomElement(class EdsMatomoNotice extends HTMLElement {
@@ -117,7 +117,13 @@ const EdsMatomoNotice = /*@__PURE__*/ proxyCustomElement(class EdsMatomoNotice e
         if (!this.showNotice) {
             return null;
         }
-        return (h("div", { class: "p-8" }, h("eds-accordion", { title: this.heading, description: this.hasCookieConsent() ? this.optOutMessage : this.description, switchBg: true, expanded: true }, this.hasCookieConsent() ? (h("div", { class: "flex items-center gap-8" }, this.optedOut() ? (h("eds-button", { intent: "brand", label: "Opt me in again", pill: true, "aria-label": "Opt me in again", onClick: () => this.optInAnalytics() })) : (h("eds-button", { intent: "brand", label: "Keep Me In", pill: true, "aria-label": "Keep Me In", onClick: () => this.keepMeIn() })), h("eds-button", { intent: "ghost", label: "Opt-out", pill: true, "aria-label": "Opt-out from analytics", onClick: () => this.optOutAnalytics() }))) : (h("div", { class: "flex items-center gap-8" }, h("eds-button", { intent: "brand", pill: true, label: "I agree", "aria-label": "Opt-in for analytics", onClick: () => this.optInAnalytics() }), h("eds-button", { intent: "ghost", pill: true, label: "No, thanks", "aria-label": "Opt-out from analytics", onClick: () => this.noThanks() }))))));
+        return (
+        // Content-only render — no positioning, no overlay, no sizing.
+        // The host application wraps this component in whatever positioned
+        // container makes sense (fixed bottom banner, modal, sidebar slot,
+        // etc.). See packages/shared-hugo/layouts/_default/baseof.html for
+        // the bottom-centered card wrapper used by handbook/eds-docs.
+        h("div", null, h("eds-accordion", { title: this.heading, description: this.hasCookieConsent() ? this.optOutMessage : this.description, switchBg: true, expanded: true }, this.hasCookieConsent() ? (h("div", { class: "flex items-center gap-8" }, this.optedOut() ? (h("eds-button", { intent: "brand", label: "Opt me in again", pill: true, "aria-label": "Opt me in again", onClick: () => this.optInAnalytics() })) : (h("eds-button", { intent: "brand", label: "Keep Me In", pill: true, "aria-label": "Keep Me In", onClick: () => this.keepMeIn() })), h("eds-button", { intent: "ghost", label: "Opt-out", pill: true, "aria-label": "Opt-out from analytics", onClick: () => this.optOutAnalytics() }))) : (h("div", { class: "flex items-center gap-8" }, h("eds-button", { intent: "brand", pill: true, label: "I agree", "aria-label": "Opt-in for analytics", onClick: () => this.optInAnalytics() }), h("eds-button", { intent: "ghost", pill: true, label: "No, thanks", "aria-label": "Opt-out from analytics", onClick: () => this.noThanks() }))))));
     }
     get el() { return this; }
     static get style() { return EdsMatomoNoticeStyle0; }

package/dist/components/eds-modal.js

@@ -54,7 +54,15 @@ const EdsModal$1 = /*@__PURE__*/ proxyCustomElement(class EdsModal extends HTMLE
                     'md:top-20'
                 ].join(' ');
             case 'bottom':
-                return ['bottom-16', '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':
@@ -77,11 +85,13 @@ const EdsModal$1 = /*@__PURE__*/ proxyCustomElement(class EdsModal extends HTMLE
     }
     trapFocus(event) {
         var _a;
-        if (event.key !== 'Tab')
+        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)
+        if (!focusableElements || focusableElements.length === 0) {
             return;
+        }
         const firstElement = focusableElements[0];
         const lastElement = focusableElements[focusableElements.length - 1];
         if (event.shiftKey) {
@@ -90,11 +100,9 @@ const EdsModal$1 = /*@__PURE__*/ proxyCustomElement(class EdsModal extends HTMLE
                 event.preventDefault();
             }
         }
-        else {
-            if (document.activeElement === lastElement) {
-                firstElement.focus();
-                event.preventDefault();
-            }
+        else if (document.activeElement === lastElement) {
+            firstElement.focus();
+            event.preventDefault();
         }
     }
     lockBodyScroll() {
@@ -177,8 +185,9 @@ const EdsModal$1 = /*@__PURE__*/ proxyCustomElement(class EdsModal extends HTMLE
      * Closes the modal when the Escape key is pressed and handles focus trapping on Tab.
      */
     handleKeyDown(event) {
-        if (!this.isOpen)
+        if (!this.isOpen) {
             return;
+        }
         if (event.key === 'Escape') {
             this.close();
         }

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}.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 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 {
@@ -86,14 +86,14 @@ const EdsNps = /*@__PURE__*/ proxyCustomElement(class EdsNps extends HTMLElement
     }
     render() {
         const count = this.max - this.min + 1;
-        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) => {
+        return (h("div", { key: 'edbeca6a946c3b355161d09707d6732dd5a79e67', class: "eds-nps" }, h("eds-input-label", { key: 'cf2b345b98407ee204a914e50183f5f895698adb', id: "nps-question", name: "nps-question", label: this.question }), h("div", { key: '423d0d8b676c8d3a72efd71f092a6b041a42c007', class: "eds-nps__scale" }, h("div", { key: 'b93fdd4168213fd5835a1253c5731c8dfa860572', 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.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: () => {
+            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: '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))));
+        })), h("div", { key: '035bf1b3da3c481084201b1edb76a4d3e900a878', class: "flex justify-between eds-nps__labels" }, h("span", { key: '218622e6374ffa7b137b38dde7654e7b671cea6a', class: "f-ui-04 text-light ml-4" }, this.leftLabel), h("span", { key: '66d04e813fa6eee2fb52b7f48540b647016e0fe7', class: "f-ui-04 text-light mr-4" }, this.rightLabel)))));
     }
     get el() { return this; }
     static get watchers() { return {

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: '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) => {
+        return (h("div", { key: '7968465b6c55f17657aa5bd3271448a9d780bec7' }, this.total > 0 && this.mode === 'default' && (h("p", { key: 'e266baaf3b45095b1e0d90c493d254405fa317b7', class: "f-ui-03 text-light mb-28 w-full text-center", "aria-live": "polite", id: "pagination-info" }, h("span", { key: '2acbccf0cb69248fb36b2479eb925d5cb728a3b5', 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 ? '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) => {
+            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

@@ -93,7 +93,7 @@ EdsPie$1.PALETTES = {
         '#d8d8d8', // grey-400
         '#9dffb4', // green-300
         '#e6e6e6', // grey-300
-        '#d3ffdc', // green-200
+        '#d3ffdc' // green-200
     ],
     mono: [
         '#666666', // grey-700
@@ -104,7 +104,7 @@ EdsPie$1.PALETTES = {
         '#6e6e6e', // grey-600
         '#d8d8d8', // grey-400
         '#f2f2f2', // grey-200
-        '#242424', // grey-900
+        '#242424' // grey-900
     ]
 };
 function defineCustomElement$1() {

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

@@ -45,14 +45,7 @@ const EdsProgressBar$1 = /*@__PURE__*/ proxyCustomElement(class EdsProgressBar e
         ]
             .filter(Boolean)
             .join(' ');
-        const fillClasses = [
-            'inner',
-            'h-full',
-            'transition-all',
-            'duration-300',
-            'bg-accent',
-            'z-0'
-        ]
+        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, "%"))));

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(--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 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 {
@@ -83,12 +83,12 @@ const EdsRating = /*@__PURE__*/ proxyCustomElement(class EdsRating extends HTMLE
         this.onSelect(next);
     }
     render() {
-        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) => {
+        return (h("div", { key: '57a4d7bc36daac45ba1b2a6924a6976919614c99', 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.internalRating;
             // Use the mapping text if available; otherwise, fall back to a generic label.
             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" }));
+            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; }

package/dist/components/eds-search-select.d.ts

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

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 };