@ebrains/components 2.4.1 → 3.1.0

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

@@ -12,15 +12,28 @@ import { h } from "@stencil/core";
  */
 export class EdsModal {
     constructor() {
+        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.
      *
@@ -31,8 +44,8 @@ export class EdsModal {
         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
@@ -42,7 +55,7 @@ export class EdsModal {
                     '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':
@@ -51,10 +64,9 @@ export class EdsModal {
             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',
@@ -64,12 +76,51 @@ export class EdsModal {
                 ].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,
@@ -84,6 +135,14 @@ export class EdsModal {
     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,
@@ -96,7 +155,12 @@ export class EdsModal {
      * 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.
@@ -111,19 +175,26 @@ export class EdsModal {
         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)))));
     }
     static get is() { return "eds-modal"; }
     static get encapsulation() { return "shadow"; }
@@ -161,19 +232,18 @@ export class EdsModal {
                 "type": "number",
                 "mutable": false,
                 "complexType": {
-                    "original": "1 | 2 | 3 | 4",
-                    "resolved": "1 | 2 | 3 | 4",
+                    "original": "0 | 1 | 2 | 3 | 4",
+                    "resolved": "0 | 1 | 2 | 3 | 4",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The number of lines to truncate the title to.\nDefault is 3 lines."
+                    "text": "The number of lines to truncate the title to.\nSet to 0 or undefined to disable truncation."
                 },
                 "attribute": "truncate",
-                "reflect": false,
-                "defaultValue": "1"
+                "reflect": false
             },
             "position": {
                 "type": "string",
@@ -193,6 +263,24 @@ export class EdsModal {
                 "reflect": false,
                 "defaultValue": "'middle'"
             },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'small' | 'medium' | 'large'",
+                    "resolved": "\"large\" | \"medium\" | \"small\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Size of the modal.\n- `\"small\"`: 500px max width\n- `\"medium\"` (default): 700px max width\n- `\"large\"`: 900px max width"
+                },
+                "attribute": "size",
+                "reflect": false,
+                "defaultValue": "'medium'"
+            },
             "inverseHeader": {
                 "type": "boolean",
                 "mutable": false,
@@ -228,6 +316,10 @@ export class EdsModal {
                         "Promise": {
                             "location": "global",
                             "id": "global::Promise"
+                        },
+                        "HTMLElement": {
+                            "location": "global",
+                            "id": "global::HTMLElement"
                         }
                     },
                     "return": "Promise<void>"

package/dist/collection/components/eds-modal/eds-modal.stories.js

@@ -26,9 +26,9 @@ export default {
     },
     args: {
         title: 'Default Modal Title',
-        position: 'middle',
+        position: 'top',
         truncate: 1,
-        inverseHeader: false
+        inverseHeader: true
     }
 };
 const Template = ({ title, position, truncate, inverseHeader }) => {
@@ -44,15 +44,15 @@ const Template = ({ title, position, truncate, inverseHeader }) => {
     </eds-modal>
 
     <!-- Button to control modal -->
-    <eds-button intent="primary" label="Open Modal" @click="${openModal}"></eds-button>
+    <eds-button intent="brand" size="large" label="Open Modal" pill="true" @click="${openModal}"></eds-button>
   `;
 };
 export const Default = Template.bind({});
 Default.args = {
     title: 'Default Modal Title',
-    position: 'middle',
+    position: 'top',
     truncate: 1,
-    inverseHeader: false
+    inverseHeader: true
 };
 const TemplateWithForm = ({ title, position, truncate, inverseHeader }) => {
     const openModal = () => {
@@ -74,7 +74,7 @@ const TemplateWithForm = ({ title, position, truncate, inverseHeader }) => {
 
     <!-- Button to control modal -->
     <eds-button
-      intent="primary"
+      intent="brand" size="large" pill="true"
       label="Open Modal with Form"
       @click="${openModal}"
       style="margin-right: 10px;"
@@ -84,6 +84,7 @@ const TemplateWithForm = ({ title, position, truncate, inverseHeader }) => {
 export const ModalWithForm = TemplateWithForm.bind({});
 ModalWithForm.args = {
     title: 'Extended Form Modal',
-    position: 'middle',
-    truncate: 1
+    position: 'top',
+    truncate: 1,
+    inverseHeader: true
 };

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

@@ -1,3 +1,35 @@
+/* Keep the pills compact (next to each other) and shrink the scale block to
+   their width, so the 0/10 labels (justify-between below) line up with the
+   first/last pill instead of the full container edge. */
+/* Breathing room above/below the 0…10 endpoint labels. */
+.eds-nps__labels {
+  padding-top: 0.75rem;
+  padding-bottom: 0.5rem;
+}
+
+.eds-nps__scale {
+  display: block;       /* own line, stacked under the question */
+  width: fit-content;   /* but shrink to the pills' width so labels align */
+  max-width: 100%;
+  padding-top: 0.5rem;  /* space between the question and the pills */
+}
+/* A bit more breathing room between the pills. */
+#nps-buttons {
+  gap: 0.6rem;
+}
+
+/* Non-color cue for the single selected value (not just light-green vs neon):
+   a brand-green-dark ring + slight scale make the pick unmistakable. Keeps
+   eds-button untouched. */
+.eds-nps__btn {
+  border-radius: 9999px;
+  transition: transform 0.15s ease-in-out;
+}
+.eds-nps__btn.is-selected {
+  /* Subtle scale only (no ring/border cue), like eds-rating. */
+  transform: scale(1.12);
+}
+
 .flex {
   display: flex;
 }
@@ -16,6 +48,12 @@
 .mr-4 {
   margin-right: 0.25rem;
 }
+.gap-2 {
+  gap: 0.125rem;
+}
+.gap-4 {
+  gap: 0.25rem;
+}
 .grid {
   display: grid;
 }
@@ -69,5 +107,8 @@
   letter-spacing: var(--f-ui-04-letterSpacing);
 }
 .text-light {
-  color: var(--grey-700);
+  color: var(--grey-dark);
+}
+.flex-wrap {
+  flex-wrap: wrap;
 }

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

@@ -5,9 +5,8 @@ export class EdsNps {
         this.max = 10;
         this.btnRefs = [];
         this.onSelect = (value) => {
-            this.selectedValue = value;
+            this.internalValue = value;
             this.nps.emit(value);
-            // Move focus to the selected button (like your rating component)
             requestAnimationFrame(() => {
                 var _a, _b;
                 const idx = value - this.min;
@@ -22,8 +21,7 @@ export class EdsNps {
             }
             e.preventDefault();
             const count = this.max - this.min + 1;
-            // Derive current index from selectedValue; if none, use 0 (first)
-            let currentIdx = this.selectedValue == null ? 0 : this.selectedValue - this.min;
+            let currentIdx = this.internalValue == null ? 0 : this.internalValue - this.min;
             switch (key) {
                 case 'ArrowRight':
                     currentIdx = Math.min(count - 1, currentIdx + 1);
@@ -50,14 +48,25 @@ export class EdsNps {
         this.leftLabel = undefined;
         this.rightLabel = undefined;
         this.selectedValue = null;
+        this.internalValue = null;
+    }
+    /**
+     * Watch for changes to the selectedValue prop and sync internal state.
+     */
+    handleSelectedValueChange(newValue) {
+        this.internalValue = newValue;
+    }
+    /**
+     * Initialize internal value from prop on component load.
+     */
+    componentWillLoad() {
+        this.internalValue = this.selectedValue;
     }
     /** Move visual highlight & roving tabindex; optionally commit selection */
     setActiveByIndex(index, commit = false) {
         var _a;
         const value = this.min + index;
-        // Update highlight so focus movement is visible (like your rating)
-        this.selectedValue = value;
-        // Focus the button host (ensure eds-button forwards focus to its inner <button>)
+        this.internalValue = value;
         const target = this.btnRefs[index];
         typeof (target === null || target === void 0 ? void 0 : target.focusInner) === 'function' ? target.focusInner() : (_a = target === null || target === void 0 ? void 0 : target.focus) === null || _a === void 0 ? void 0 : _a.call(target);
         if (commit) {
@@ -66,21 +75,14 @@ export class EdsNps {
     }
     render() {
         const count = this.max - this.min + 1;
-        return (h("div", { key: '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)))));
     }
     static get is() { return "eds-nps"; }
     static get encapsulation() { return "shadow"; }
@@ -146,12 +148,30 @@ export class EdsNps {
                 },
                 "attribute": "right-label",
                 "reflect": false
+            },
+            "selectedValue": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Current selected NPS value (controlled from parent)."
+                },
+                "attribute": "selected-value",
+                "reflect": false,
+                "defaultValue": "null"
             }
         };
     }
     static get states() {
         return {
-            "selectedValue": {}
+            "internalValue": {}
         };
     }
     static get events() {
@@ -163,7 +183,7 @@ export class EdsNps {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Event emitted when the NPS value changes."
+                    "text": ""
                 },
                 "complexType": {
                     "original": "number",
@@ -173,4 +193,10 @@ export class EdsNps {
             }];
     }
     static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "selectedValue",
+                "methodName": "handleSelectedValueChange"
+            }];
+    }
 }

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

@@ -248,7 +248,7 @@ export class EdsPagination {
     }
     render() {
         const navigableIndex = -1; // Track index for keyboard navigation
-        return (h("div", { key: '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);
                 }
@@ -257,7 +257,7 @@ export class EdsPagination {
                 : this.isFirstPage()
                     ? '#'
                     : this.generateLink(this.currentPage - 1).url, disabled: this.mode === 'navigator' ? !this.prevUrl : this.isFirstPage(), "aria-label": "Go to previous page", icon: "chevron-left", "icon-pos": "left", size: "small", "icon-small": "true", intent: "strong", "hide-label-on-small-screen": true, class: "!p-8 lg:!pr-12" }))), this.mode === 'default' &&
-            this.links.map((link, index) => (h("li", { key: index, class: "f-ui-02 flex h-36 items-center justify-center" }, typeof link === 'string' ? (h("span", { class: "flex items-center justify-center", "aria-hidden": "true" }, link)) : this.useButtons ? (h("div", { class: "pagination-button-wrapper", onFocus: () => this.handleItemFocus(navigableIndex) }, h("eds-button", { label: link.label, "aria-label": link.current ? `Current page, page ${link.label}` : `Go to page ${link.label}`, "aria-current": link.current ? 'page' : undefined, size: "small", "extra-class": "!p-8 pagination-button", intent: link.current ? 'secondary' : 'ghost', onClick: (event) => this.handlePageClick(event, parseInt(link.label)) }))) : (h("eds-link", { url: link.url, "aria-label": link.ariaLabel, label: link.label, current: link.current, "aria-current": link.current ? 'page' : undefined, size: "small", class: "!p-8", intent: link.current ? 'secondary' : 'ghost', onClick: (event) => this.handlePageClick(event, parseInt(link.label)) }))))), h("li", { class: "ml-auto" }, this.useButtons ? (h("div", { class: "pagination-button-wrapper", onFocus: () => this.handleItemFocus(navigableIndex) }, h("eds-button", { label: this.nextLabel, disabled: this.mode === 'navigator' ? !this.nextUrl : this.isLastPage(), "aria-label": "Go to next page", size: "small", "icon-small": "true", icon: "chevron-right", intent: "ghost", "extra-class": "!p-8 lg:!pl-12 pagination-button", onClick: (event) => {
+            this.links.map((link, index) => (h("li", { key: index, class: "f-ui-02 flex h-36 items-center justify-center" }, typeof link === 'string' ? (h("span", { class: "flex items-center justify-center", "aria-hidden": "true" }, link)) : this.useButtons ? (h("div", { class: "pagination-button-wrapper", onFocus: () => this.handleItemFocus(navigableIndex) }, h("eds-button", { label: link.label, "aria-label": link.current ? `Current page, page ${link.label}` : `Go to page ${link.label}`, "aria-current": link.current ? 'page' : undefined, size: "small", "extra-class": "!p-8 pagination-button", intent: link.current ? '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/collection/components/eds-progress-bar/eds-progress-bar.css

@@ -7,7 +7,7 @@
 }
 
 .bg-default {
-  background-color: var(--grey-200);
+  background-color: var(--grey-light);
 }
 
 .rounded-lg {
@@ -31,7 +31,7 @@
 }
 
 .bg-accent {
-  background-color: var(--green-500);
+  background-color: var(--brand-green);
 }
 
 .bg-\[\#0034CB\] {
@@ -62,19 +62,35 @@
 }
 
 .text-default {
-  color: var(--black);
+  color: var(--brand-black);
 }
 
 .text-inverse {
   color: var(--white);
 }
 
-.f-body-02 {
-  font-family: var(--f-body-02-fontFamily);
-  font-weight: var(--f-body-02-fontWeight);
-  font-size: var(--f-body-02-fontSize);
-  line-height: var(--f-body-02-lineHeight);
-  letter-spacing: var(--f-body-02-letterSpacing);
+.f-ui-01 {
+  font-family: var(--f-ui-01-fontFamily);
+  font-weight: var(--f-ui-01-fontWeight);
+  font-size: var(--f-ui-01-fontSize);
+  line-height: var(--f-ui-01-lineHeight);
+  letter-spacing: var(--f-ui-01-letterSpacing);
+}
+
+.f-ui-02 {
+  font-family: var(--f-ui-02-fontFamily);
+  font-weight: var(--f-ui-02-fontWeight);
+  font-size: var(--f-ui-02-fontSize);
+  line-height: var(--f-ui-02-lineHeight);
+  letter-spacing: var(--f-ui-02-letterSpacing);
+}
+
+.f-ui-03 {
+  font-family: var(--f-ui-03-fontFamily);
+  font-weight: var(--f-ui-03-fontWeight);
+  font-size: var(--f-ui-03-fontSize);
+  line-height: var(--f-ui-03-lineHeight);
+  letter-spacing: var(--f-ui-03-letterSpacing);
 }
 
 .absolute {
@@ -94,4 +110,62 @@
 }
 .pointer-events-none {
   pointer-events: none;
+}
+
+/* Brand variant utilities */
+.brand-gradient {
+  background: linear-gradient(90deg, var(--brand-green-dark) 0%, var(--brand-green) 100%);
+}
+
+.brand-glow {
+  box-shadow: 0 0 8px rgba(0, 255, 157, 0.5);
+}
+
+.transition-width {
+  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.h-10 {
+  height: 10px;
+}
+
+.mb-12 {
+  margin-bottom: 0.75rem;
+}
+
+.bg-inverse {
+  background-color: var(--white);
+}
+
+.bg-grey-light {
+  background-color: var(--grey-light);
+}
+
+.bg-brand-black {
+  background-color: var(--brand-black);
+}
+
+.text-brand-green-dark {
+  color: var(--brand-green-dark);
+}
+
+.justify-start {
+  justify-content: flex-start;
+}
+
+.px-48 {
+  padding-left: 3rem;
+  padding-right: 3rem;
+}
+
+.pt-16 {
+  padding-top: 1rem;
+}
+
+.pb-12 {
+  padding-bottom: 0.75rem;
+}
+
+.items-center {
+  align-items: center;
 }