@ebrains/components 2.0.0 → 2.1.0

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

@@ -0,0 +1,73 @@
+.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);
+}

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

@@ -0,0 +1,163 @@
+import { h } from "@stencil/core";
+export class EdsNps {
+    constructor() {
+        this.min = 0;
+        this.max = 10;
+        this.question = undefined;
+        this.leftLabel = undefined;
+        this.rightLabel = undefined;
+        this.selectedValue = null;
+    }
+    handleClick(value) {
+        this.selectedValue = value;
+        this.nps.emit(value);
+    }
+    handleKeyNav(e) {
+        const radios = Array.from(this.el.shadowRoot.querySelectorAll('eds-button'));
+        const currentIndex = radios.findIndex((r) => r.tabIndex === 0);
+        switch (e.key) {
+            case 'ArrowRight':
+            case 'ArrowLeft': {
+                e.preventDefault();
+                const delta = e.key === 'ArrowRight' ? 1 : -1;
+                const nextIndex = Math.min(this.max, Math.max(0, currentIndex + delta));
+                this.activateRadio(radios, nextIndex);
+                break;
+            }
+            case 'Home': {
+                e.preventDefault();
+                this.activateRadio(radios, 0);
+                break;
+            }
+            case 'End': {
+                e.preventDefault();
+                this.activateRadio(radios, this.max);
+                break;
+            }
+            case 'Enter':
+            case ' ': {
+                e.preventDefault();
+                if (currentIndex >= 0) {
+                    this.handleClick(this.min + currentIndex);
+                }
+                break;
+            }
+            case 'Escape': {
+                e.preventDefault();
+                if (currentIndex >= 0) {
+                    radios[currentIndex].blur();
+                }
+                break;
+            }
+            default:
+                return;
+        }
+    }
+    activateRadio(radios, index) {
+        const target = radios[index];
+        const value = this.min + index;
+        this.handleClick(value);
+        target.focus();
+    }
+    render() {
+        const count = this.max - this.min + 1;
+        const fallback = 0;
+        return (h("div", { key: 'd675e1e4ecc306511c0324d0b76ee66237cb6738', class: "eds-nps" }, h("eds-input-label", { key: '2eede06f6ee166c36b0cf315a35435c89c3c0ba5', id: "nps-question", name: "nps-question", label: this.question }), h("div", { key: '16105649fe6b3b229127c9a741367a6381db774f', role: "group", id: "nps-buttons", "aria-labelledby": "nps-question", class: "grid grid-cols-11", onKeyDown: (e) => this.handleKeyNav(e) }, Array.from({ length: count }, (_, i) => {
+            const val = this.min + i;
+            const isSelected = val === this.selectedValue;
+            const tabIndex = this.selectedValue === null ? (i === fallback ? 0 : -1) : isSelected ? 0 : -1;
+            return (h("div", { class: "grid-col-span-1", key: val }, h("eds-button", { tabindex: tabIndex, label: `${val}`, "aria-label": `${val}`, intent: isSelected ? 'primary' : 'ghost', "extra-class": "!block !px-0 w-full", triggerClick: () => this.handleClick(val) })));
+        })), h("div", { key: 'e7bd70a4f1a8083d9c3e08fdf8de55999a27d92d', class: "flex justify-between mt-8" }, h("span", { key: 'ea3fbbac20a162e7cf5f2d5e3321c8bc9297014e', class: "f-ui-04 text-light ml-4" }, this.leftLabel), h("span", { key: '3ff59cde0c532587ead8b8a1eaaff6c630e7e7ac', class: "f-ui-04 text-light mr-4" }, this.rightLabel))));
+    }
+    static get is() { return "eds-nps"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["eds-nps.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["eds-nps.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "question": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The question prompt for the NPS scale."
+                },
+                "attribute": "question",
+                "reflect": false
+            },
+            "leftLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label displayed under the min value."
+                },
+                "attribute": "left-label",
+                "reflect": false
+            },
+            "rightLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label displayed under the max value."
+                },
+                "attribute": "right-label",
+                "reflect": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "selectedValue": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "nps",
+                "name": "nps",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when the NPS value changes."
+                },
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+}

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

@@ -37,6 +37,10 @@ menu {
   letter-spacing: var(--f-ui-02-light-letterSpacing);
 }
 
+.text-light {
+  color: var(--grey-700);
+}
+
 .text-lightest {
   color: var(--grey-500);
 }

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

@@ -6,22 +6,72 @@ import { h } from "@stencil/core";
  * - Supports two display modes: "default" (shows numbered page links) and "navigator" (shows Previous/Next buttons).
  * - Emits a `page` event when the page is changed in "default" mode.
  * - Automatically generates pagination links based on the `currentPage` and `lastPage`.
+ * - Full keyboard navigation support with arrow keys, Home, End
+ * - Proper ARIA labels and screen reader support
  *
  * This component is designed for flexible and accessible pagination controls, suitable for various display needs.
  */
 export class EdsPagination {
     constructor() {
+        /**
+         * Handles keyboard navigation within the pagination
+         */
+        this.handleKeyDown = (e) => {
+            if (this.mode !== 'default' || !this.useButtons) {
+                return;
+            }
+            const navigableItems = this.getNavigableItems();
+            if (e.key === 'ArrowRight' || e.key === 'ArrowLeft') {
+                e.preventDefault();
+                const increment = e.key === 'ArrowRight' ? 1 : -1;
+                let currentIndex = this.focusedIndex;
+                // If no item is focused, start from current page or first item
+                if (currentIndex === -1) {
+                    const currentPageIndex = navigableItems.findIndex((item) => item.type === 'page' && item.page === this.currentPage);
+                    currentIndex = currentPageIndex !== -1 ? currentPageIndex : 0;
+                }
+                let newIndex = currentIndex + increment;
+                // Wrap around navigation
+                if (newIndex >= navigableItems.length) {
+                    newIndex = 0;
+                }
+                else if (newIndex < 0) {
+                    newIndex = navigableItems.length - 1;
+                }
+                this.focusedIndex = newIndex;
+                this.focusPaginationItem(newIndex);
+            }
+            else if (e.key === 'Home') {
+                e.preventDefault();
+                this.focusedIndex = 0;
+                this.focusPaginationItem(0);
+            }
+            else if (e.key === 'End') {
+                e.preventDefault();
+                const lastIndex = navigableItems.length - 1;
+                this.focusedIndex = lastIndex;
+                this.focusPaginationItem(lastIndex);
+            }
+        };
+        /**
+         * Handles focus events for pagination items
+         */
+        this.handleItemFocus = (index) => {
+            this.focusedIndex = index;
+        };
         this.currentPage = undefined;
         this.lastPage = undefined;
         this.perPage = 10;
         this.total = 0;
         this.url = '';
         this.mode = 'default';
+        this.useButtons = true;
         this.prevLabel = 'Prev';
         this.nextLabel = 'Next';
         this.prevUrl = '';
         this.nextUrl = '';
         this.links = [];
+        this.focusedIndex = -1;
     }
     /** Lifecycle hook to generate pagination links on component load */
     componentWillLoad() {
@@ -30,24 +80,17 @@ export class EdsPagination {
         }
     }
     componentDidLoad() {
-        // Emit context for each eds-link element after the component is fully loaded
-        const links = this.hostEl.shadowRoot.querySelectorAll('eds-link');
-        links.forEach((lnk) => {
-            this.emitContext(lnk);
-        });
-        /*if (links.length > 0) {
-          // Emit context for the first link
-          this.emitContext(links[0]);
-    
-          // Emit context for the last link, if it's different from the first
-          if (links.length > 1) {
-            this.emitContext(links[links.length - 1]);
-          }
-        }*/
+        // Only emit context for links, not buttons
+        if (!this.useButtons) {
+            const links = this.hostEl.shadowRoot.querySelectorAll('eds-link');
+            links.forEach((lnk) => {
+                this.emitContext(lnk);
+            });
+        }
     }
     /**
      * Emits a custom event called `parentContext` for a given link element.
-     * This event provides context information about the breadcrumb component.
+     * This event provides context information about the pagination component.
      *
      * @param linkElement - The link element to which the event will be dispatched.
      */
@@ -65,6 +108,34 @@ export class EdsPagination {
             this.generateLinks();
         }
     }
+    /**
+     * Gets all navigable pagination items for keyboard navigation
+     */
+    getNavigableItems() {
+        const items = [];
+        // Previous button
+        items.push({ type: 'prev', disabled: this.isFirstPage() });
+        // Page numbers
+        this.links.forEach((link) => {
+            if (typeof link === 'object') {
+                items.push({ type: 'page', page: parseInt(link.label), disabled: false });
+            }
+        });
+        // Next button
+        items.push({ type: 'next', disabled: this.isLastPage() });
+        return items.filter((item) => !item.disabled);
+    }
+    /**
+     * Focuses a specific pagination item by index
+     */
+    focusPaginationItem(index) {
+        var _a;
+        const buttons = (_a = this.hostEl.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.pagination-button');
+        const targetButton = buttons === null || buttons === void 0 ? void 0 : buttons[index];
+        if (targetButton) {
+            targetButton.focus();
+        }
+    }
     /**
      * Checks if the current page is the first page
      * @returns {boolean} - true if current page is the first page
@@ -87,7 +158,7 @@ export class EdsPagination {
     generateLink(page) {
         const urlHasQuery = this.url.includes('?');
         return {
-            ariaLabel: `Page ${page}`,
+            ariaLabel: `Go to page ${page}`,
             url: `${this.url}${urlHasQuery ? '&' : '?'}page=${page}`,
             label: page.toString(),
             current: this.currentPage === page,
@@ -107,7 +178,6 @@ export class EdsPagination {
      * Creates a pagination range based on delta, current, and total pages
      * @param {number} current - Current page number
      * @param {number} total - Total number of pages
-     * @param {number} delta - Range of pages to display around the current page
      * @returns {(number | string)[]} - Range of page numbers or ellipses
      */
     getPaginationGenerator(current, total) {
@@ -122,7 +192,7 @@ export class EdsPagination {
         else {
             // Always show the first page
             range.push(1);
-            // Add ellipsis if there’s a gap between the first page and the current range start
+            // Add ellipsis if there's a gap between the first page and the current range start
             if (current - delta > 2) {
                 range.push('...');
             }
@@ -130,7 +200,7 @@ export class EdsPagination {
             for (let i = Math.max(2, current - delta); i <= Math.min(total - 1, current + delta); i++) {
                 range.push(i);
             }
-            // Add ellipsis if there’s a gap between the current range end and the last page
+            // Add ellipsis if there's a gap between the current range end and the last page
             if (current + delta < total - 1) {
                 range.push('...');
             }
@@ -145,9 +215,11 @@ export class EdsPagination {
      */
     pageResults() {
         if (this.total > 0) {
+            const start = this.perPage * ((this.currentPage || 1) - 1) + 1;
+            const end = Math.min(this.perPage * (this.currentPage || 1), this.total);
             return this.total > this.perPage
-                ? `${this.perPage * ((this.currentPage || 1) - 1) + 1} - ${this.perPage * (this.currentPage || 1) >= this.total ? this.total : this.perPage * (this.currentPage || 1)} of ${this.total}`
-                : `${this.total}`;
+                ? `Showing ${start} to ${end} of ${this.total} results`
+                : `Showing ${this.total} result${this.total !== 1 ? 's' : ''}`;
         }
         return '';
     }
@@ -160,7 +232,9 @@ export class EdsPagination {
         if (this.mode === 'navigator') {
             return; // No page clicking logic for navigator mode
         }
-        event.preventDefault(); // Prevent default link navigation
+        if (this.useButtons) {
+            event.preventDefault(); // Prevent default for buttons
+        }
         if (newPage !== this.currentPage) {
             this.links = this.links.map((link) => typeof link === 'object' ? Object.assign(Object.assign({}, link), { current: parseInt(link.label) === newPage }) : link);
             const pageChangeEvent = new CustomEvent('page', {
@@ -173,38 +247,25 @@ export class EdsPagination {
         }
     }
     render() {
-        return (h("div", { key: '978896bd8c550afdc30281e1a8d9858022857551' }, this.total > 0 && this.mode === 'default' && (h("p", { key: '10781adbf2c4754580c31eecc180fc426b5e09a1', class: "f-ui-03 text-lightest mb-28 w-full text-center" }, h("span", { key: '29765740419772ac83736495c859d2d75097904c', class: "sr-only" }, "Results:"), this.pageResults())), this.mode === 'navigator' || (this.lastPage && this.lastPage > 1) ? (h("nav", { "aria-label": "Pagination" }, h("ul", { class: "flex items-center justify-center gap-x-8" }, h("li", { class: "mr-auto" }, h("eds-link", { label: this.prevLabel, url: this.mode === 'navigator'
-                ? this.prevUrl || '#' // Use prevUrl if provided, otherwise disable with '#'
+        const navigableIndex = -1; // Track index for keyboard navigation
+        return (h("div", { key: '753a7e573a09e7fcb66eac9e11e00f690c49543d' }, this.total > 0 && this.mode === 'default' && (h("p", { key: '6286d71622614a835d471812a55d5c6bef37a13e', class: "f-ui-03 text-light mb-28 w-full text-center", "aria-live": "polite", id: "pagination-info" }, h("span", { key: 'daa7bfa31e736a40c46641fed88653d51eeabc67', 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);
+                }
+            } }))) : (h("eds-link", { label: this.prevLabel, url: this.mode === 'navigator'
+                ? this.prevUrl || '#'
                 : this.isFirstPage()
                     ? '#'
-                    : this.generateLink(this.currentPage - 1).url, disabled: this.mode === 'navigator'
-                ? !this.prevUrl // Disable if prevUrl is not provided
-                : this.isFirstPage(), "aria-label": "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", onClick: (event) => {
-                if (this.mode === 'default') {
-                    if (this.isFirstPage()) {
-                        event.preventDefault(); // Prevent click if disabled
-                    }
-                    else {
-                        this.handlePageClick(event, (this.currentPage || 1) - 1);
-                    }
+                    : 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) => {
+                if (this.mode === 'default' && !this.isLastPage()) {
+                    this.handlePageClick(event, (this.currentPage || 1) + 1);
                 }
-            } })), 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" }, link)) : (h("eds-link", { url: link.url, "aria-label": link.ariaLabel, label: link.label, current: link.current, size: "small", class: "!p-8", intent: link.current ? 'secondary' : 'ghost', onClick: (event) => this.handlePageClick(event, parseInt(link.label)) }))))), h("li", { class: "ml-auto" }, h("eds-link", { label: this.nextLabel, url: this.mode === 'navigator'
-                ? this.nextUrl || '#' // Use nextUrl if provided, otherwise disable with '#'
+            } }))) : (h("eds-link", { label: this.nextLabel, url: this.mode === 'navigator'
+                ? this.nextUrl || '#'
                 : this.isLastPage()
                     ? '#'
-                    : this.generateLink(this.currentPage + 1).url, disabled: this.mode === 'navigator'
-                ? !this.nextUrl // Disable if nextUrl is not provided
-                : this.isLastPage(), "aria-label": "Next page", size: "small", "icon-small": "true", icon: "chevron-right", intent: "strong", "hide-label-on-small-screen": true, class: "!p-8 lg:!pl-12 flex items-center gap-1 py-4 transition-colors", onClick: (event) => {
-                if (this.mode === 'default') {
-                    if (this.isLastPage()) {
-                        event.preventDefault(); // Prevent click if disabled
-                    }
-                    else {
-                        this.handlePageClick(event, (this.currentPage || 1) + 1);
-                    }
-                }
-            } }))))) : null));
+                    : this.generateLink(this.currentPage + 1).url, disabled: this.mode === 'navigator' ? !this.nextUrl : this.isLastPage(), "aria-label": "Go to next page", size: "small", "icon-small": "true", icon: "chevron-right", intent: "strong", "hide-label-on-small-screen": true, class: "!p-8 lg:!pl-12 flex items-center gap-1 py-4 transition-colors" })))))) : null));
     }
     static get is() { return "eds-pagination"; }
     static get encapsulation() { return "shadow"; }
@@ -326,6 +387,24 @@ export class EdsPagination {
                 "reflect": false,
                 "defaultValue": "'default'"
             },
+            "useButtons": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to use buttons (for JavaScript pagination) or links (for URL navigation)"
+                },
+                "attribute": "use-buttons",
+                "reflect": false,
+                "defaultValue": "true"
+            },
             "prevLabel": {
                 "type": "string",
                 "mutable": false,
@@ -402,7 +481,8 @@ export class EdsPagination {
     }
     static get states() {
         return {
-            "links": {}
+            "links": {},
+            "focusedIndex": {}
         };
     }
     static get elementRef() { return "hostEl"; }

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

@@ -39,7 +39,7 @@ export class EdsProgressBar {
         ]
             .filter(Boolean)
             .join(' ');
-        return (h("div", { key: '8406651d280d0a7f55ac627aa08fed80ff01028e', role: "progressbar", "aria-valuemin": "0", "aria-valuemax": "100", "aria-valuenow": progressValue, "aria-valuetext": `${progressValue}%`, class: outerClasses }, h("div", { key: '0b784248450d7766879be03a2e1f83484090da2c', class: fillClasses, style: { width: `${progressValue}%` } }), h("div", { key: '421253aa1f8dd3ea83936452607c4bcd49f47eb3', class: "absolute inset-0 flex items-center justify-center pointer-events-none z-10" }, h("span", { key: 'ae649fcb7ed22741f3fedd129f0c0cb41254b721', class: "text-default f-body-02" }, progressValue, "%"))));
+        return (h("div", { key: '2a620231eaa84ba7e89e05da48175624fdc92d31', role: "progressbar", "aria-valuemin": "0", "aria-valuemax": "100", "aria-valuenow": progressValue, "aria-valuetext": `${progressValue}%`, class: outerClasses }, h("div", { key: '660e2c84ad358c0de1d9548b730308505e79bcd6', class: fillClasses, style: { width: `${progressValue}%` } }), h("div", { key: '4d0fa2a209d315b658f80906b95a0bf255c82c78', class: "absolute inset-0 flex items-center justify-center pointer-events-none z-10" }, h("span", { key: '0d423e16659d84b2d050f7d60ced4aefeeef9022', class: "text-default f-body-02" }, progressValue, "%"))));
     }
     static get is() { return "eds-progress-bar"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,6 +1,7 @@
 import { h } from "@stencil/core";
 export class EdsRating {
     constructor() {
+        this.buttonRefs = [];
         this.ratingType = 'star';
         this.ratingCount = 5;
         this.selectedRating = 0;
@@ -34,16 +35,37 @@ export class EdsRating {
      * Handles the click event on a star.
      * @param rating - The selected rating value.
      */
-    handleClick(rating) {
+    onSelect(rating) {
         this.selectedRating = rating;
         this.rating.emit(rating);
+        setTimeout(() => {
+            const btn = this.buttonRefs[rating - 1];
+            btn === null || btn === void 0 ? void 0 : btn.focus();
+        }, 0);
+    }
+    handleKeyNav(e) {
+        const { key } = e;
+        if (!['ArrowRight', 'ArrowLeft', 'ArrowDown', 'ArrowUp'].includes(key)) {
+            return;
+        }
+        e.preventDefault();
+        const increment = key === 'ArrowRight' || key === 'ArrowDown' ? 1 : -1;
+        let next = (this.selectedRating || 1) + increment;
+        if (next > this.ratingCount) {
+            next = 1;
+        }
+        if (next < 1) {
+            next = this.ratingCount;
+        }
+        this.onSelect(next);
     }
     render() {
-        return (h("div", { key: '7f70d2d6691257ba0658ab9500ab7200af28366a', role: "radiogroup", class: "stars flex space-x-1 my-8" }, Array.from({ length: this.ratingCount }, (_, index) => {
+        return (h("div", { key: 'bd72970d86f2dbb21d58671fc85feea3011749b3', id: "rating-buttons", role: "radiogroup", "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;
             // Use the mapping text if available; otherwise, fall back to a generic label.
-            return (h("eds-button", { icon: this.ratingType, role: "radio", "aria-checked": isSelected ? 'true' : 'false', "aria-label": this.ratingType, onClick: () => this.handleClick(starRating), tabIndex: this.selectedRating === 0 && index === 0 ? 0 : isSelected ? 0 : -1, intent: isSelected ? 'primary' : 'ghost', size: "large", "extra-class": "p-2" // Optional padding or styling for the star button
+            const checked = this.selectedRating === starRating;
+            return (h("eds-button", { ref: (el) => (this.buttonRefs[index] = el), icon: this.ratingType, role: "radio", "aria-checked": checked, "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
             }));
         })));
     }

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

@@ -20,7 +20,7 @@ export class EdsSectionCore {
     }
     render() {
         const TagType = this.tag; // Set dynamic tag type (div or section)
-        return (h(TagType, { key: 'b3469cabf7e1a59c7908f5440b76d0c3bed0395d' }, h("eds-section-heading", { key: '38e11acb4b491579573bee449680776d3ec23de3', headingLevel: this.headingLevel, sectionTitle: this.sectionTitle }), h("slot", { key: '133fc1150fb7e300544388adc673c1446b36ac39' })));
+        return (h(TagType, { key: 'b77b5af1c6f3acbc2696a9608b55199ed4110d71' }, h("eds-section-heading", { key: '464dd4c67d69d1ef3ed1d932081c3195a2b51503', headingLevel: this.headingLevel, sectionTitle: this.sectionTitle }), h("slot", { key: 'b5dbd4f55aee2df3bcbc44e21a134544ffd733f7' })));
     }
     static get is() { return "eds-section-core"; }
     static get encapsulation() { return "shadow"; }

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

@@ -36,12 +36,12 @@ export class EdsSectionHeading {
     render() {
         const TagType = this.tag; // Dynamically set tag type for the container
         const HeadingTag = this.headingLevel; // Dynamically set heading level
-        return (h(TagType, { key: '1b819df75c9d61eebe7d11b9116dba7278a34d91', class: {
+        return (h(TagType, { key: '4ae69ea354156a0e35a8884a63d7556ead8ada24', class: {
                 'ui-section-header flex flex-wrap items-center justify-between gap-x-12 gap-y-8': true,
                 container: this.withContainer,
                 'pt-48': this.spacingLarge,
                 'pt-28': !this.spacingLarge
-            } }, h(HeadingTag, { key: '8f99c7c15982f9190117f8eb71725af66afd0741', class: this.getHeadingClass() }, this.sectionTitle)));
+            } }, h(HeadingTag, { key: 'a3549fb733687c3ff31f17bdc362275eb0b29e31', class: this.getHeadingClass() }, this.sectionTitle)));
     }
     static get is() { return "eds-section-heading"; }
     static get properties() {

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

@@ -71,7 +71,7 @@ export class EdsSpinner {
                 alignItems: 'center',
                 justifyContent: 'center'
             };
-        return (h(Host, { key: 'b2ba16cd90ebf036143f6ab52b996497464814c1' }, h("div", { key: 'f619fb03d0364ae7032931559d591fab6ad40123', class: "spinner-overlay", style: overlayStyle }, h("span", { key: '7c1e397ab319de1f67320e3836225e3733a483fd', class: "spinner", style: spinnerStyle }), this.message && h("p", { key: 'ddf6e08c8d2d00f114f815bab28b06c19a56cd6d', class: "f-body-01" }, this.message))));
+        return (h(Host, { key: 'cbf9cead7c7c6bc5314c074f7249c920eb60d326' }, h("div", { key: 'd22c71a76af3f53c649e547538e0f1627cd9ecd0', class: "spinner-overlay", style: overlayStyle }, h("span", { key: '83b42f7ee9ba4d356bd82097989b8be1db8a8ef9', class: "spinner", style: spinnerStyle }), this.message && h("p", { key: '0a2c4efe46b8f86a037d29de699534441bf7585e', class: "f-body-01" }, this.message))));
     }
     static get is() { return "eds-spinner"; }
     static get encapsulation() { return "shadow"; }