@ebrains/components 2.0.0 → 2.1.0

package/dist/components/eds-nps2.js

@@ -0,0 +1,120 @@
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { d as defineCustomElement$3 } from './eds-button2.js';
+import { d as defineCustomElement$2 } from './eds-icon-wrapper2.js';
+import { d as defineCustomElement$1 } from './eds-input-label2.js';
+
+const edsNpsCss = ".flex{display:flex}.justify-between{justify-content:space-between}.mt-4{margin-top:0.25rem}.mt-8{margin-top:0.5rem}.ml-4{margin-left:0.25rem}.mr-4{margin-right:0.25rem}.grid{display:grid}.grid-col-span-1{--container-grid-columns:1;grid-column:span 1 / span 1}.grid-cols-11{grid-template-columns:repeat(11, minmax(0, 1fr))}.grid-cols-11[class*=\"grid-line-x\"][class*=\"grid-line-x\"]>*:nth-child(n)::before{border-bottom-width:1px}.grid-cols-11[class*=\"grid-line-xfull\"]>*:nth-child(n)::before{inset-inline-start:calc(var(--inner-gutter) / -2);inset-inline-end:calc(var(--inner-gutter) / -2)}.grid-cols-11[class*=\"grid-line-x\"]>*:nth-child(11n+1)::before{inset-inline-start:0}.grid-cols-11[class*=\"grid-line-x\"]>*:nth-child(11n+11)::before{inset-inline-end:0}.grid-cols-11[class*=\"grid-line-x\"]>*:nth-child(11n+1):nth-last-child(-n+11)::before{border-bottom-width:0}.grid-cols-11[class*=\"grid-line-x\"]>*:nth-child(11n+1):nth-last-child(-n+11)~*::before{border-bottom-width:0}.grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"]>*:nth-child(n)::after{border-inline-end-width:1px}.grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"]>*:nth-child(11n+11)::after{border-inline-end-width:0}.grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"]>*:nth-child(-n+11)::after{top:0}.grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"]>*:nth-child(11n+1):nth-last-child(-n+11)::after{bottom:0}.grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"]>*:nth-child(11n+1):nth-last-child(-n+11)~li::after{bottom:0}.f-ui-04{font-family:var(--f-ui-04-fontFamily);font-weight:var(--f-ui-04-fontWeight);font-size:var(--f-ui-04-fontSize);line-height:var(--f-ui-04-lineHeight);letter-spacing:var(--f-ui-04-letterSpacing)}.text-light{color:var(--grey-700)}";
+const EdsNpsStyle0 = edsNpsCss;
+
+const EdsNps = /*@__PURE__*/ proxyCustomElement(class EdsNps extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.nps = createEvent(this, "nps", 7);
+        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))));
+    }
+    get el() { return this; }
+    static get style() { return EdsNpsStyle0; }
+}, [1, "eds-nps", {
+        "question": [1],
+        "leftLabel": [1, "left-label"],
+        "rightLabel": [1, "right-label"],
+        "selectedValue": [32]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["eds-nps", "eds-button", "eds-icon-wrapper", "eds-input-label"];
+    components.forEach(tagName => { switch (tagName) {
+        case "eds-nps":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, EdsNps);
+            }
+            break;
+        case "eds-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "eds-icon-wrapper":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "eds-input-label":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { EdsNps as E, defineCustomElement as d };

package/dist/components/eds-pagination2.js

@@ -1,8 +1,9 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+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-link2.js';
 
-const edsPaginationCss = "ul,menu{list-style:none;margin:0;padding:0}.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)}.f-ui-03-light{font-family:var(--f-ui-03-light-fontFamily);font-weight:var(--f-ui-03-light-fontWeight);font-size:var(--f-ui-03-light-fontSize);line-height:var(--f-ui-03-light-lineHeight);letter-spacing:var(--f-ui-03-light-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-02-light{font-family:var(--f-ui-02-light-fontFamily);font-weight:var(--f-ui-02-light-fontWeight);font-size:var(--f-ui-02-light-fontSize);line-height:var(--f-ui-02-light-lineHeight);letter-spacing:var(--f-ui-02-light-letterSpacing)}.text-lightest{color:var(--grey-500)}.mb-28{margin-bottom:1.75rem}.w-full{width:100%}.w-20{width:1.25rem}.h-20{height:1.25rem}.h-28{height:1.75rem}.h-32{height:2rem}.h-36{height:2.25rem}.text-center{text-align:center}.flex{display:flex}.inline-flex{display:inline-flex}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-x-8{-moz-column-gap:0.5rem;column-gap:0.5rem}.mr-auto{margin-right:auto}.ml-auto{margin-left:auto}.\\!p-8{padding:0.5rem !important}.ml-4{margin-left:0.25rem}.mr-4{margin-right:0.25rem}.hidden{display:none}.gap-1{gap:0.0625rem}.py-4{padding-top:0.25rem;padding-bottom:0.25rem}.transition-colors{transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}@media (min-width: 900px){.lg\\:\\!pr-12{padding-right:0.75rem !important}.lg\\:flex{display:flex}}";
+const edsPaginationCss = "ul,menu{list-style:none;margin:0;padding:0}.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)}.f-ui-03-light{font-family:var(--f-ui-03-light-fontFamily);font-weight:var(--f-ui-03-light-fontWeight);font-size:var(--f-ui-03-light-fontSize);line-height:var(--f-ui-03-light-lineHeight);letter-spacing:var(--f-ui-03-light-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-02-light{font-family:var(--f-ui-02-light-fontFamily);font-weight:var(--f-ui-02-light-fontWeight);font-size:var(--f-ui-02-light-fontSize);line-height:var(--f-ui-02-light-lineHeight);letter-spacing:var(--f-ui-02-light-letterSpacing)}.text-light{color:var(--grey-700)}.text-lightest{color:var(--grey-500)}.mb-28{margin-bottom:1.75rem}.w-full{width:100%}.w-20{width:1.25rem}.h-20{height:1.25rem}.h-28{height:1.75rem}.h-32{height:2rem}.h-36{height:2.25rem}.text-center{text-align:center}.flex{display:flex}.inline-flex{display:inline-flex}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-x-8{-moz-column-gap:0.5rem;column-gap:0.5rem}.mr-auto{margin-right:auto}.ml-auto{margin-left:auto}.\\!p-8{padding:0.5rem !important}.ml-4{margin-left:0.25rem}.mr-4{margin-right:0.25rem}.hidden{display:none}.gap-1{gap:0.0625rem}.py-4{padding-top:0.25rem;padding-bottom:0.25rem}.transition-colors{transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}@media (min-width: 900px){.lg\\:\\!pr-12{padding-right:0.75rem !important}.lg\\:flex{display:flex}}";
 const EdsPaginationStyle0 = edsPaginationCss;
 
 const EdsPagination = /*@__PURE__*/ proxyCustomElement(class EdsPagination extends HTMLElement {
@@ -10,17 +11,65 @@ const EdsPagination = /*@__PURE__*/ proxyCustomElement(class EdsPagination exten
         super();
         this.__registerHost();
         this.__attachShadow();
+        /**
+         * 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() {
@@ -29,24 +78,17 @@ const EdsPagination = /*@__PURE__*/ proxyCustomElement(class EdsPagination exten
         }
     }
     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.
      */
@@ -64,6 +106,34 @@ const EdsPagination = /*@__PURE__*/ proxyCustomElement(class EdsPagination exten
             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
@@ -86,7 +156,7 @@ const EdsPagination = /*@__PURE__*/ proxyCustomElement(class EdsPagination exten
     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,
@@ -106,7 +176,6 @@ const EdsPagination = /*@__PURE__*/ proxyCustomElement(class EdsPagination exten
      * 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) {
@@ -121,7 +190,7 @@ const EdsPagination = /*@__PURE__*/ proxyCustomElement(class EdsPagination exten
         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('...');
             }
@@ -129,7 +198,7 @@ const EdsPagination = /*@__PURE__*/ proxyCustomElement(class EdsPagination exten
             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('...');
             }
@@ -144,9 +213,11 @@ const EdsPagination = /*@__PURE__*/ proxyCustomElement(class EdsPagination exten
      */
     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 '';
     }
@@ -159,7 +230,9 @@ const EdsPagination = /*@__PURE__*/ proxyCustomElement(class EdsPagination exten
         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', {
@@ -172,38 +245,25 @@ const EdsPagination = /*@__PURE__*/ proxyCustomElement(class EdsPagination exten
         }
     }
     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));
     }
     get hostEl() { return this; }
     static get watchers() { return {
@@ -218,11 +278,13 @@ const EdsPagination = /*@__PURE__*/ proxyCustomElement(class EdsPagination exten
         "total": [2],
         "url": [1],
         "mode": [1],
+        "useButtons": [4, "use-buttons"],
         "prevLabel": [1, "prev-label"],
         "nextLabel": [1, "next-label"],
         "prevUrl": [1, "prev-url"],
         "nextUrl": [1, "next-url"],
-        "links": [32]
+        "links": [32],
+        "focusedIndex": [32]
     }, undefined, {
         "currentPage": ["onPageOrLastPageChange"],
         "lastPage": ["onPageOrLastPageChange"]
@@ -231,13 +293,18 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["eds-pagination", "eds-icon-wrapper", "eds-link"];
+    const components = ["eds-pagination", "eds-button", "eds-icon-wrapper", "eds-link"];
     components.forEach(tagName => { switch (tagName) {
         case "eds-pagination":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, EdsPagination);
             }
             break;
+        case "eds-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
         case "eds-icon-wrapper":
             if (!customElements.get(tagName)) {
                 defineCustomElement$2();

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

@@ -46,7 +46,7 @@ const EdsProgressBar = /*@__PURE__*/ proxyCustomElement(class EdsProgressBar ext
         ]
             .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 style() { return EdsProgressBarStyle0; }
 }, [1, "eds-progress-bar", {

package/dist/components/eds-rating2.js

@@ -11,6 +11,7 @@ const EdsRating = /*@__PURE__*/ proxyCustomElement(class EdsRating extends HTMLE
         this.__registerHost();
         this.__attachShadow();
         this.rating = createEvent(this, "rating", 7);
+        this.buttonRefs = [];
         this.ratingType = 'star';
         this.ratingCount = 5;
         this.selectedRating = 0;
@@ -44,16 +45,37 @@ const EdsRating = /*@__PURE__*/ proxyCustomElement(class EdsRating extends HTMLE
      * 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/components/eds-section-core2.js

@@ -15,7 +15,7 @@ const EdsSectionCore = /*@__PURE__*/ proxyCustomElement(class EdsSectionCore ext
     }
     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 style() { return EdsSectionCoreStyle0; }
 }, [1, "eds-section-core", {

package/dist/components/eds-section-heading2.js

@@ -26,12 +26,12 @@ const EdsSectionHeading = /*@__PURE__*/ proxyCustomElement(class EdsSectionHeadi
     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)));
     }
 }, [0, "eds-section-heading", {
         "sectionTitle": [1, "section-title"],

package/dist/components/eds-social-networks2.js

@@ -58,7 +58,7 @@ const EdsSocialNetworks = /*@__PURE__*/ proxyCustomElement(class EdsSocialNetwor
      * @returns {JSX.Element} The rendered JSX for the component.
      */
     render() {
-        return (h("div", { key: '7bd6202c426d23ded6af47b26e025f2d1b42904a' }, h("p", { key: '0c66f58474ff55cc06bd9f3f15f3deb251c9fb87', class: "f-ui-02" }, this.heading), h("ul", { key: '3e082ae50c77e2d8612b823aa3e474672d65d42f', class: "mt-12 flex gap-4" }, this.socialNetworks.map((network, index) => (h("li", { key: index }, h("eds-link", { "extra-class": "effect-color effect-focus text-lighter hover:text-default flex items-center justify-center rounded-sm", external: true, "aria-label": network.label, url: network.url, icon: network.icon, intent: "strong" })))))));
+        return (h("div", { key: '7241de6d0a20687523e17a4455dff1dfac59a191' }, h("p", { key: '8292c0dde1b3518ada53dddc2ea0134ff3035e83', class: "f-ui-02" }, this.heading), h("ul", { key: 'b30922e6d1f51a52300c889464824fafad775f74', class: "mt-12 flex gap-4" }, this.socialNetworks.map((network, index) => (h("li", { key: index }, h("eds-link", { "extra-class": "effect-color effect-focus text-lighter hover:text-default flex items-center justify-center rounded-sm", external: true, "aria-label": network.label, url: network.url, icon: network.icon, intent: "strong" })))))));
     }
     static get style() { return EdsSocialNetworksStyle0; }
 }, [1, "eds-social-networks", {

package/dist/components/eds-spinner2.js

@@ -78,7 +78,7 @@ const EdsSpinner = /*@__PURE__*/ proxyCustomElement(class EdsSpinner extends HTM
                 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 style() { return EdsSpinnerStyle0; }
 }, [1, "eds-spinner", {

package/dist/components/eds-switch.js

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { s as sendAnalytics } from './analytics.js';
 
-const edsSwitchCss = ":host{display:inline-block}.switch-container{display:inline-flex;align-items:center}.switch-label{font-family:var(--f-ui-02-light-fontFamily);font-weight:var(--f-ui-02-light-fontWeight);font-size:var(--f-ui-02-light-fontSize);line-height:var(--f-ui-02-light-lineHeight);letter-spacing:var(--f-ui-02-light-letterSpacing)}button.switch{position:relative;display:inline-flex;align-items:center;width:50px;height:26px;border:none;border-radius:13px;background-color:#ccc;padding:0;cursor:pointer;transition:background-color 0.2s}button.switch:focus{outline:none;box-shadow:0 0 0 2px #007aff}button.switch.switch--checked{background-color:var(--green-500)}button.switch.switch--disabled{opacity:0.6;cursor:not-allowed}.switch-handle{position:absolute;width:22px;height:22px;border-radius:50%;background-color:#fff;top:2px;left:2px;transition:transform 0.2s}button.switch.switch--checked .switch-handle{transform:translateX(24px)}.ml-8{margin-left:0.5rem}.mr-8{margin-right:0.5rem}";
+const edsSwitchCss = ":host{display:inline-block}.switch-container{display:inline-flex;align-items:center}.switch-label{font-family:var(--f-ui-02-light-fontFamily);font-weight:var(--f-ui-02-light-fontWeight);font-size:var(--f-ui-02-light-fontSize);line-height:var(--f-ui-02-light-lineHeight);letter-spacing:var(--f-ui-02-light-letterSpacing)}button.switch{position:relative;display:inline-flex;align-items:center;width:50px;height:26px;border:none;border-radius:13px;background-color:#ccc;padding:0;cursor:pointer;transition:background-color 0.2s}button.switch.switch--checked{background-color:var(--green-500)}button.switch.switch--disabled{opacity:0.6;cursor:not-allowed}.switch-handle{position:absolute;width:22px;height:22px;border-radius:50%;background-color:#fff;top:2px;left:2px;transition:transform 0.2s}button.switch.switch--checked .switch-handle{transform:translateX(24px)}.ml-8{margin-left:0.5rem}.mr-8{margin-right:0.5rem}.switch:focus{outline:2px solid #005fcc;outline-offset:2px}.switch:focus:not(:focus-visible){outline:none}.switch:focus-visible{outline-width:3px;outline-offset:2px;outline-color:var(--green-500)}";
 const EdsSwitchStyle0 = edsSwitchCss;
 
 const EdsSwitch$1 = /*@__PURE__*/ proxyCustomElement(class EdsSwitch extends HTMLElement {
@@ -23,19 +23,41 @@ const EdsSwitch$1 = /*@__PURE__*/ proxyCustomElement(class EdsSwitch extends HTM
                 action: 'checked'
             });
         };
+        this.handleKeyDown = (e) => {
+            if (this.disabled) {
+                return;
+            }
+            if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault();
+                this.toggleSwitch();
+            }
+        };
         this.checked = false;
         this.disabled = false;
         this.labelOn = '';
         this.labelOff = '';
     }
     render() {
-        // Compute an accessible name based on state.
-        const accessibleLabel = this.labelOn || this.labelOff ? (this.checked ? this.labelOn : this.labelOff) : 'Toggle switch';
-        return (h("div", { key: '1de6f7afd451f5d0276b62ef7bbf817f132e4440', class: "switch-container" }, this.labelOff && h("span", { key: 'd2d1017d7d26537eb2e65fa74b1f86453edc93d2', class: "switch-label switch-label--off mr-8" }, this.labelOff), h("button", { key: 'ade3ba909f5744a2b87238da52fcc33f600721cf', type: "button", role: "switch", "aria-checked": this.checked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": accessibleLabel, class: {
+        const switchId = `switch-${Math.random().toString(36).substr(2, 9)}`;
+        const labelledBy = [];
+        if (this.labelOff) {
+            labelledBy.push(`${switchId}-off`);
+        }
+        if (this.labelOn) {
+            labelledBy.push(`${switchId}-on`);
+        }
+        const accessibleLabel = labelledBy.length === 0
+            ? this.labelOn || this.labelOff
+                ? this.checked
+                    ? this.labelOn
+                    : this.labelOff
+                : 'Toggle switch'
+            : undefined;
+        return (h("div", { key: 'f4c99a2ec360af6030de11698bab82833b3f415f', class: "switch-container" }, this.labelOff && (h("span", { key: '8bb8d063e744c194c0d44a0c371ae8224f9611cb', id: `${switchId}-off`, class: "switch-label switch-label--off mr-8" }, this.labelOff)), h("button", { key: 'ccc49c8ac6f639707c90822e24f3ae3ab8f2c26c', id: switchId, tabindex: this.disabled ? '-1' : '0', type: "button", role: "switch", "aria-checked": this.checked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-labelledby": labelledBy.length > 0 ? labelledBy.join(' ') : undefined, "aria-label": accessibleLabel, class: {
                 switch: true,
                 'switch--checked': this.checked,
                 'switch--disabled': this.disabled
-            }, onClick: this.toggleSwitch, disabled: this.disabled }, h("span", { key: '64034f73021623f63523c7bb52ec5233ad291c55', class: "switch-handle" })), this.labelOn && h("span", { key: 'a96a35565ac28ed6a27855b90b180f15adb0e711', class: "switch-label switch-label--on ml-8" }, this.labelOn)));
+            }, onClick: this.toggleSwitch, onKeyDown: this.handleKeyDown, disabled: this.disabled }, h("span", { key: '2275930bc9909c0a95c6c10e28f715fe1afe9294', class: "switch-handle" })), this.labelOn && (h("span", { key: 'd789fd15943c1fadf1f87c55059261eaf5e05a8f', id: `${switchId}-on`, class: "switch-label switch-label--on ml-8" }, this.labelOn))));
     }
     get el() { return this; }
     static get style() { return EdsSwitchStyle0; }