@riverty/web-components 6.0.0 → 6.2.0

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

@@ -9,26 +9,17 @@
   --r-pagination--width: 100%;
   --r-pagination--max-width: 664px;
   --r-pagination--margin: 0 auto;
-  --r-pagination--item--display: flex;
-  --r-pagination--item--align-items: center;
-  --r-pagination--item--justify-content: center;
-  --r-pagination--item--margin-right: -1px;
-  --r-pagination--item--color: var(--r-text-regular);
-  --r-pagination--item--background-color: transparent;
-  --r-pagination--item--width: 48px;
-  --r-pagination--item--height: 48px;
-  --r-pagination--item--border-width: 1px;
-  --r-pagination--item--border-style: solid;
-  --r-pagination--item--border-color: var(--r-border-softer);
-  --r-pagination--item--z-index: 0;
-  --r-pagination--item--font-family: inherit;
-  --r-pagination--button--width: 100%;
-  --r-pagination--button--height: 100%;
-  --r-pagination--button--color: var(--r-text-regular);
-  --r-pagination--button--background-color: transparent;
+  --r-pagination--items-list--display: flex;
+  --r-paginaition--items-list--justify-content: center;
+  --r-paginaition--items-list--align-items: center;
+  --r-paginaition--items-list--list-style-type: none;
+  --r-paginaition--items-list--padding: 0;
+  --r-paginaition--items-list--margin: 0;
+  --r-pagination--item--width: var(--r-spacing-300, 3rem);
+  --r-pagination--item--height: var(--r-spacing-300, 3rem);
+  --r-pagination--item--border-radius: 0;
   --r-pagination--button--border-width: 0;
   --r-pagination--button--padding: 0;
-  --r-pagination--button--font-size: var(--r-font-size-300);
   --r-pagination--header--display: flex;
   --r-pagination--header--align-items: center;
   --r-pagination--header--justify-content: space-between;
@@ -90,68 +81,38 @@
 .r-pagination--header label {
   font-size: var(--r-pagination--font-size);
 }
-.r-pagination--item:hover {
-  --r-pagination--item--background-color: var(--r-background-interactive-hovered);
-}
-.r-pagination--item:focus {
-  --r-pagination--item--outline-color: var(--r-border-focused);
-  --r-pagination--item--box-shadow: 0 0 0 3px var(--r-border-focused-outlined);
-  --r-pagination--item--z-index: 1;
-}
-.r-pagination--item:active {
-  --r-pagination--item--background-color: var(--r-background-interactive-pressed);
-}
-.r-pagination--item.stepper {
-  --r-pagination--item--background-color: transparent;
+.r-pagination--items-list {
+  display: var(--r-pagination--items-list--display);
+  justify-content: var(--r-paginaition--items-list--justify-content);
+  align-items: var(--r-paginaition--items-list--align-items);
+  list-style-type: var(--r-paginaition--items-list--list-style-type);
+  padding: var(--r-paginaition--items-list--padding);
+  margin: var(--r-paginaition--items-list--margin);
 }
 .r-pagination--item.active {
-  --r-pagination--item--color: var(--r-text-regular);
-  --r-pagination--item--background-color: var(--r-background-interactive-activated);
+  --r-button--color: var(--r-text-regular);
+  --r-button--background-color: var(--r-background-interactive-activated);
   font-weight: var(--r-font-weight-semibold);
 }
-.r-pagination--item.arrow.previous {
-  --r-pagination--item--margin-left: 0;
-  --r-pagination--item--margin-right: 16px;
-}
-.r-pagination--item.arrow.next {
-  --r-pagination--item--margin-left: 16px;
-  --r-pagination--item--margin-right: 0;
-}
-.r-pagination--item.arrow.first {
-  --r-pagination--item--margin-left: 0;
-  --r-pagination--item--margin-right: 8px;
-}
-.r-pagination--item.arrow.last {
-  --r-pagination--item--margin-left: 8px;
-  --r-pagination--item--margin-right: 0;
-}
-.r-pagination--item.disabled, .r-pagination--item.disabled:hover {
-  --r-pagination--item--opacity: 0.4;
-  --r-pagination--item--background-color: transparent;
-}
 .r-pagination--item.number {
   --r-button--font-size: 0.813rem;
 }
 .r-pagination--item {
-  --r-button--display: flex;
-  --r-button--width: var(--r-pagination--button--width);
-  --r-button--height: var(--r-pagination--button--height);
-  --r-button--color: var(--r-pagination--button--color);
-  --r-button--background-color: var(--r-pagination--button--background-color);
+  --r-icon-button--height: var(--r-pagination--item--height);
+  --r-icon-button--width: var(--r-pagination--item--width);
+  --r-icon-button--border-radius: var(--r-pagination--item--border-radius);
+  --r-button--width: var(--r-pagination--item--width);
+  --r-button--height: var(--r-pagination--item--height);
   --r-button--border-width: var(--r-pagination--button--border-width);
   --r-button--padding: var(--r-pagination--button--padding);
-  --r-button--icon--width: auto;
-  --r-button--icon--height: auto;
-  align-items: var(--r-pagination--item--align-items);
-  background-color: var(--r-pagination--item--background-color);
-  color: var(--r-pagination--item--color);
-  display: var(--r-pagination--item--display);
-  font-family: var(--r-pagination--item--font-family);
-  height: var(--r-pagination--item--height);
-  justify-content: var(--r-pagination--item--justify-content);
-  margin-left: var(--r-pagination--item--margin-left);
-  margin-right: var(--r-pagination--item--margin-right);
-  opacity: var(--r-pagination--item--opacity);
-  width: var(--r-pagination--item--width);
-  z-index: var(--r-pagination--item--z-index);
+}
+
+.visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  overflow: hidden;
+  white-space: nowrap;
 }

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

@@ -26,6 +26,20 @@ export class RPagination {
         this.selectText = 'page';
         /** Position of the list box */
         this.listBoxPosition = 'top';
+        /** Label for Previous Page button. Important to ensure accessibility for screen reader users. */
+        this.previousPageButtonLabel = 'Go to the previous page';
+        /** Label for Next Page button. Important to ensure accessibility for screen reader users.*/
+        this.nextPageButtonLabel = 'Go to the next page';
+        /** Label for First Page button. Important to ensure accessibility for screen reader users.*/
+        this.firstPageButtonLabel = 'Go to the first page';
+        /** Label for Last Page button. Important to ensure accessibility for screen reader users.*/
+        this.lastPageButtonLabel = 'Go to the last page';
+        /** Label for Page number buttons. Important to ensure accessibility for screen reader users.*/
+        this.pageLabel = 'Page';
+        /** Label for Ellipsis stepper. Important to ensure accessibility for screen reader users.*/
+        this.ellipsisLabel = 'Ellipsis indicating skipped pages';
+        /** Label for Items per page select. */
+        this.itemsPerPageLabel = 'Items per page';
         this.resizeObserver = null;
         this.handleItemsPerPageChange = (event) => {
             const newItemsPerPage = parseInt(event.detail.value, 10);
@@ -50,28 +64,17 @@ export class RPagination {
             });
         };
         this.handleItemChange = e => {
-            const isKeyup = e.type === 'keyup';
-            const isEnter = e.code === 'Enter';
-            const isSpace = e.code === 'Space';
-            if (isKeyup && !isEnter && !isSpace)
-                return;
-            const buttonElement = e.target.closest('r-button');
-            if (buttonElement === null)
-                return;
+            const buttonElement = e.target.closest('r-icon-button') || e.target.closest('r-button');
             const index = Number(buttonElement.getAttribute('data-index'));
             if (index === null)
                 return;
             this._activateStep(index);
             requestAnimationFrame(() => {
-                var _a;
-                const newActiveButton = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(`.r-pagination--item[data-index="${index}"]`);
-                if (newActiveButton) {
-                    newActiveButton.focus(); // Ensure focus is set correctly
-                }
+                const focusTarget = this.getFocusTargetAfterNavigation(buttonElement);
+                focusTarget === null || focusTarget === void 0 ? void 0 : focusTarget.setFocus();
             });
             if (buttonElement.classList.contains('number')) {
                 this.rNumberClick.emit(this.paginationState);
-                buttonElement.blur();
             }
             if (buttonElement.classList.contains('arrow')) {
                 const direction = buttonElement.classList.contains('next') ? 'next' : 'previous';
@@ -150,6 +153,35 @@ export class RPagination {
         // Emit updated pagination state
         this.rChange.emit(this.paginationState);
     }
+    /**
+     * Determines the appropriate focus target after navigation based on button states.
+     * Handles edge cases where navigation buttons become disabled.
+     */
+    getFocusTargetAfterNavigation(buttonElement) {
+        var _a, _b, _c, _d, _e;
+        const isArrowButton = buttonElement.classList.contains('arrow');
+        const isNextButton = buttonElement.classList.contains('next');
+        const isPrevButton = buttonElement.classList.contains('previous');
+        const isFirstButton = buttonElement.classList.contains('first');
+        const isLastButton = buttonElement.classList.contains('last');
+        const willNextBeDisabled = this.next === null;
+        const willPrevBeDisabled = this.previous === null;
+        const willLastBeDisabled = this.active === this.total;
+        const willFirstBeDisabled = this.first === null;
+        if (isNextButton && willNextBeDisabled) {
+            return (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(`.r-pagination--item.number[data-index="${this.total}"]`);
+        }
+        if (isPrevButton && willPrevBeDisabled) {
+            return (_b = this.el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector(`.r-pagination--item.number[data-index="1"]`);
+        }
+        if (isLastButton && willLastBeDisabled) {
+            return (_c = this.el.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector(`.r-pagination--item.number[data-index="${this.total}"]`);
+        }
+        if (isFirstButton && willFirstBeDisabled) {
+            return (_d = this.el.shadowRoot) === null || _d === void 0 ? void 0 : _d.querySelector('.r-pagination--item.number[data-index="1"]');
+        }
+        return isArrowButton ? buttonElement : (_e = this.el.shadowRoot) === null || _e === void 0 ? void 0 : _e.querySelector(`.r-pagination--item[data-index="${this.pageActive}"]`);
+    }
     componentWillLoad() {
         this.setPaginationState();
     }
@@ -168,13 +200,13 @@ export class RPagination {
         const { active, previous, next, first, itemsPerPage, itemsPerPageOptions, startText, middleText, endText, selectText, listBoxPosition } = this;
         const itemTemplate = (type, index) => {
             if (type === 'number') {
-                return (h("r-button", { class: "r-pagination--item number", "data-index": index, onClick: this.handleItemChange, onKeyUp: this.handleItemChange }, index));
+                return (h("li", null, h("r-button", { class: "r-pagination--item number", "data-index": index, variant: "secondary", onRClick: this.handleItemChange }, h("span", { class: "visually-hidden" }, this.pageLabel), " ", index)));
             }
             if (type === 'active') {
-                return (h("div", { class: "r-pagination--item number active", "aria-label": "active page" }, index));
+                return (h("li", null, h("r-button", { "data-index": index, class: "r-pagination--item number active", rAriaCurrent: "page" }, h("span", { class: "visually-hidden" }, this.pageLabel), " ", index)));
             }
             if (type === 'stepper') {
-                return (h("div", { class: "r-pagination--item stepper" }, "..."));
+                return (h("li", { "aria-label": this.ellipsisLabel, class: "r-pagination--item stepper" }, "..."));
             }
         };
         const renderNumbers = () => {
@@ -190,7 +222,7 @@ export class RPagination {
             };
             // Case: total pages are less than or equal to maxVisiblePages
             if (totalPages <= maxVisiblePages) {
-                return h(Fragment, null, [...Array(totalPages).keys()].map(_createItem));
+                return h("ul", { class: "r-pagination--items-list" }, [...Array(totalPages).keys()].map(_createItem));
             }
             // Always add startEdge
             items.push(itemTemplate(active === startEdge ? 'active' : 'number', startEdge));
@@ -249,47 +281,21 @@ export class RPagination {
                     }
                 }
             }
-            return h(Fragment, null, items);
+            return h("ul", { class: "r-pagination--items-list" }, items);
         };
         const renderHeader = () => {
             const startItem = Math.min((active - 1) * itemsPerPage + 1, this.totalResults);
             const endItem = Math.min(active * itemsPerPage, this.totalResults);
-            return (h(Fragment, null, h("div", { ref: el => (this.headerRef = el), class: "r-pagination--header" }, h("div", { class: "results-info", "aria-live": "polite" }, startText ? startText : 'Showing', " ", startItem, "\u2013", endItem, " ", middleText ? middleText : 'of', " ", this.totalResults, " ", endText ? endText : 'results'), h("div", null, h("r-select", { class: "r-pagination--header--select", value: this.itemsPerPage.toString(), id: "items-per-page", onRChange: this.handleItemsPerPageChange, label: "Items per page", "listbox-position": listBoxPosition }, itemsPerPageOptions.map(option => (h("r-select-option", { value: option.toString() }, option, "/", selectText ? selectText : 'page'))))))));
-        };
-        const getTagName = isNoPage => isNoPage ? 'div' : 'r-button';
-        const PrevTagName = getTagName(this.isNoPreviousPage);
-        const NextTagName = getTagName(this.isNoNextPage);
-        const FirstTagName = getTagName(this.isNotFirstPage);
-        const LastTagName = getTagName(this.isNotLastPage);
-        const prevArrowAttrs = {
-            class: `r-pagination--item arrow previous ${this.isNoPreviousPage ? 'disabled' : ''}`,
-            'data-index': previous,
-            'aria-label': `${PrevTagName === 'r-button' ? 'Previous Page' : ''}`
-        };
-        const nextArrowAttrs = {
-            class: `r-pagination--item arrow next ${this.isNoNextPage ? 'disabled' : ''}`,
-            'data-index': next,
-            'aria-label': `${NextTagName === 'r-button' ? 'Next Page' : ''}`
-        };
-        const firstArrowAttrs = {
-            class: `r-pagination--item arrow first ${first === null ? 'disabled' : ''}`,
-            'data-index': first,
-            'aria-label': `${first === null ? '' : 'First Page'}`
+            return (h(Fragment, null, h("div", { ref: el => (this.headerRef = el), class: "r-pagination--header" }, h("div", { class: "results-info", "aria-live": "polite" }, startText ? startText : 'Showing', " ", startItem, "\u2013", endItem, " ", middleText ? middleText : 'of', " ", this.totalResults, " ", endText ? endText : 'results'), h("div", null, h("r-select", { class: "r-pagination--header--select", value: this.itemsPerPage.toString(), id: "items-per-page", onRChange: this.handleItemsPerPageChange, label: this.itemsPerPageLabel, "listbox-position": listBoxPosition }, itemsPerPageOptions.map(option => (h("r-select-option", { value: option.toString() }, option, "/", selectText ? selectText : 'page'))))))));
         };
         const isLastPage = active === this.total;
-        const lastArrowAttrs = {
-            class: `r-pagination--item arrow last ${isLastPage ? 'disabled' : ''}`,
-            'data-index': isLastPage ? null : this.total,
-            'aria-label': isLastPage ? '' : 'Last Page',
-            tabindex: isLastPage ? '-1' : '0' // Make unfocusable when disabled
-        };
         const renderList = () => {
             if (this.variant === 'minimized') {
                 return (h(Fragment, null, h("div", { ref: el => (this.footerRef = el), class: "r-pagination--footer" }, renderNumbers())));
             }
-            return (h(Fragment, null, h("div", { ref: el => (this.footerRef = el), class: "r-pagination--footer" }, this.variant === 'maximized' && (h(FirstTagName, Object.assign({}, firstArrowAttrs, { onClick: this.handleItemChange, onKeyUp: this.handleItemChange }), h("r-icon", { name: "angle-left-with-vertical-line", size: "s" }))), h(PrevTagName, Object.assign({}, prevArrowAttrs, { onClick: this.handleItemChange, onKeyUp: this.handleItemChange }), h("r-icon", { name: "angle-left", size: "s" })), renderNumbers(), h(NextTagName, Object.assign({}, nextArrowAttrs, { onClick: this.handleItemChange, onKeyUp: this.handleItemChange }), h("r-icon", { name: "angle-right", size: "s" })), this.variant === 'maximized' && (h(LastTagName, Object.assign({}, lastArrowAttrs, { onClick: this.handleItemChange, onKeyUp: this.handleItemChange }), h("r-icon", { name: "angle-right-with-vertical-line", size: "s" }))))));
+            return (h(Fragment, null, h("div", { ref: el => (this.footerRef = el), class: "r-pagination--footer" }, this.variant === 'maximized' && (h("r-icon-button", { "data-index": first, name: "angle-left-with-vertical-line", size: "s", disabled: this.isNotFirstPage, label: this.firstPageButtonLabel, class: "r-pagination--item arrow first", onRClick: this.handleItemChange })), h("r-icon-button", { "data-index": previous, name: "angle-left", size: "s", disabled: this.isNoPreviousPage, label: this.previousPageButtonLabel, class: "r-pagination--item arrow previous", onRClick: this.handleItemChange }), renderNumbers(), h("r-icon-button", { "data-index": next, name: "angle-right", size: "s", disabled: this.isNoNextPage, label: this.nextPageButtonLabel, class: "r-pagination--item arrow next", onRClick: this.handleItemChange }), this.variant === 'maximized' && (h("r-icon-button", { "data-index": this.total, name: "angle-right-with-vertical-line", size: "s", disabled: isLastPage, label: this.lastPageButtonLabel, class: "r-pagination--item arrow last", onRClick: this.handleItemChange })))));
         };
-        return (h(Host, null, h("nav", { class: "r-pagination", "aria-label": "Pagination" }, this.resultsLine && renderHeader(), renderList())));
+        return (h(Host, { role: "navigation" }, h("div", { class: "r-pagination" }, this.resultsLine && renderHeader(), renderList())));
     }
     static get is() { return "r-pagination"; }
     static get encapsulation() { return "shadow"; }
@@ -561,6 +567,146 @@ export class RPagination {
                 "setter": false,
                 "reflect": false,
                 "defaultValue": "'top'"
+            },
+            "previousPageButtonLabel": {
+                "type": "string",
+                "attribute": "previous-page-button-label",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label for Previous Page button. Important to ensure accessibility for screen reader users."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'Go to the previous page'"
+            },
+            "nextPageButtonLabel": {
+                "type": "string",
+                "attribute": "next-page-button-label",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label for Next Page button. Important to ensure accessibility for screen reader users."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'Go to the next page'"
+            },
+            "firstPageButtonLabel": {
+                "type": "string",
+                "attribute": "first-page-button-label",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label for First Page button. Important to ensure accessibility for screen reader users."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'Go to the first page'"
+            },
+            "lastPageButtonLabel": {
+                "type": "string",
+                "attribute": "last-page-button-label",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label for Last Page button. Important to ensure accessibility for screen reader users."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'Go to the last page'"
+            },
+            "pageLabel": {
+                "type": "string",
+                "attribute": "page-label",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label for Page number buttons. Important to ensure accessibility for screen reader users."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'Page'"
+            },
+            "ellipsisLabel": {
+                "type": "string",
+                "attribute": "ellipsis-label",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label for Ellipsis stepper. Important to ensure accessibility for screen reader users."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'Ellipsis indicating skipped pages'"
+            },
+            "itemsPerPageLabel": {
+                "type": "string",
+                "attribute": "items-per-page-label",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label for Items per page select."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'Items per page'"
             }
         };
     }

package/dist/collection/components/panel/panel.css

@@ -1,13 +1,13 @@
 :host {
-  --r-panel--min-width: 300px;
+  --r-panel--min-width: 18.75rem;
   --r-panel--background-color: var(--r-background-soft, #F3F1F0);
   --r-panel--display: flex;
   --r-panel--flex-direction: column;
   --r-panel--position: fixed;
   --r-panel--align-items: flex-start;
   --r-panel--top: 0;
-  --r-panel--padding: var(--spacing-050, 8px) 0;
-  --r-panel--width: 300px;
+  --r-panel--padding: 8px 0;
+  --r-panel--width: 18.75rem;
   --r-panel--height: 100%;
   --r-panel--color: var(--r-text-regular, #282828);
   --r-panel--transition: all 250ms ease-in-out;
@@ -15,37 +15,41 @@
   --r-panel--font-family: var(--r-font-family-text);
   --r-panel--left: 0;
   --r-panel--header--display: flex;
-  --r-panel--header--padding: var(--spacing-075, 12px) var(--spacing-100, 16px) var(--spacing-075, 12px) var(--spacing-100, 16px);
+  --r-panel--header--padding: 12px 16px;
   --r-panel--header--justify-content: space-between;
   --r-panel--header--align-items: center;
   --r-panel--header--align-self: stretch;
   --r-panel--header--icon-rotate: none;
   --r-panel--header--flex-direction: row;
-  --r-panel--header--gap: 50px;
+  --r-panel--header--gap: 3.125rem;
   --r-panel--header--logo--img--width: 100%;
   --r-panel--header--logo--img--height: auto;
-  --r-panel--header--logo--img--expanded--width: 192px;
-  --r-panel--header--logo--img--collapsed--width: 30px;
+  --r-panel--header--logo--img--expanded--width: 12rem;
+  --r-panel--header--logo--img--collapsed--width: 1.875rem;
   --r-panel--header--height: unset;
   --r-panel--body--display: block;
   --r-panel--body--flex-grow: 1;
   --r-panel--body--align-self: stretch;
   --r-panel--body--overflow: auto;
-  --r-panel--body--padding: var(--r-spacing-025, 4px) var(--spacing-050, 8px) 0;
+  --r-panel--body--padding: 4px 8px 0;
   --r-panel--body-header--color: var(--r-text-soft, #686868);
-  --r-panel--body-header--padding: var(--spacing-100, 16px) 0 var(--spacing-100, 16px);
-  --r-panel--body-header--width: 268px;
+  --r-panel--body-header--font-size: var(--r-font-size-400, 1rem);
+  --r-panel--body-header--font-weight: var(--r-font-weight-regular, 400);
+  --r-panel--body-header--padding: 16px 0;
+  --r-panel--body-header--width: 16.75rem;
+  --r-panel--body-header--margin: 0px;
   --r-panel--footer--dispay: flex;
-  --r-panel--footer--padding: var(--spacing-100, 16px) var(--spacing-100, 16px) var(--spacing-150, 24px) var(--spacing-100, 16px);
+  --r-panel--footer--width: 100%;
+  --r-panel--footer--padding: 16px 16px 24px;
   --r-panel--footer--flex-direction: column;
   --r-panel--footer--justify-content: center;
-  --r-panel--footer-gap: var(--spacing-100, 16px);
+  --r-panel--footer-gap: var(--spacing-100, 1rem);
   --r-panel--footer--align-self: stretch;
   --r-panel--footer--text-align: center;
 }
 
 :host([variant=drawer]) r-button {
-  --r-button--padding: 10px;
+  --r-button--padding: 0.625rem;
   --r-button--background: var(--r-background-interactive-softer, #E7E4E2);
   --r-button--border-radius: 10%;
   --r-button--slot--position: relative;
@@ -53,13 +57,13 @@
 }
 
 :host([variant=drawer][collapsed]) {
-  --r-panel--width: 72px;
+  --r-panel--width: var(--r-spacing-450, 4.5rem);
   --r-panel--header--display: none;
   --r-panel--header--icon-rotate: rotate(180deg);
   --r-panel--header--logo--expaned--display: none;
   --r-panel--header--logo--collapsed--display: block;
   --r-panel--header--flex-direction: column;
-  --r-panel--header--gap: 12px;
+  --r-panel--header--gap: 0.625rem;
   --r-list-item--epxanded--background-color: rgba(40, 40, 40, 0.08);
 }
 :host([variant=drawer][collapsed]) r-button {
@@ -73,14 +77,15 @@
 
 :host([collapsed]:not([variant=modal])) {
   --r-panel--min-width: 0;
+  --r-list-item--sr-text--display: block;
   --r-list-item--text--display: none;
   --r-list-item--trailing--display: none;
 }
 
 :host([variant=drawer]:not([has-header]):not([collapsed])),
 :host([variant=drawer][has-header=false]:not([collapsed])) {
-  --r-panel--header--height: 24px;
-  --r-panel--header--padding: var(--spacing-075, 12px) var(--spacing-050, 8px) 0 var(--spacing-100, 16px);
+  --r-panel--header--height: var(--spacing-150, 1.5rem);
+  --r-panel--header--padding: 12px 8px 0 16px;
 }
 :host([variant=drawer]:not([has-header]):not([collapsed])) r-button,
 :host([variant=drawer][has-header=false]:not([collapsed])) r-button {
@@ -154,9 +159,15 @@
 }
 .r-panel--body ::slotted(.header) {
   color: var(--r-panel--body-header--color);
+  font-size: var(--r-panel--body-header--font-size);
+  font-weight: var(--r-panel--body-header--font-weight);
   padding: var(--r-panel--body-header--padding);
   display: var(--r-panel--header--display);
   width: var(--r-panel--body-header--width);
+  margin: var(--r-panel--body-header--margin);
+}
+.r-panel--footer {
+  width: var(--r-panel--footer--width);
 }
 .r-panel ::slotted([slot=footer]) {
   display: var(--r-panel--footer--dispay);
@@ -167,3 +178,15 @@
   align-self: var(--r-panel--footer--align-self);
   text-align: var(--r-panel--footer--text-align);
 }
+.r-panel ::slotted(ul) {
+  margin: var(--r-panel--item-list--margin, 0);
+  padding: var(--r-panel--item-list--padding, 0);
+  list-style-type: var(--r-panel--item-list--list-style-type, "");
+}
+
+@media (prefers-reduced-motion) {
+  .r-panel,
+  :host([variant=drawer][collapsed]) r-button {
+    transition: none;
+  }
+}

package/dist/collection/components/panel/panel.js

@@ -12,9 +12,9 @@ export class Panel {
         /** A boolean property that determines the collapsed state of the component. The default state is `false`. */
         this.collapsed = false;
         /** Aria-label text for collapse */
-        this.labelCollapse = 'collapse-panel';
+        this.labelCollapse = 'Collapse panel';
         /** Aria-label text for expand */
-        this.labelExpand = 'expand-panel';
+        this.labelExpand = 'Expand panel';
         this.isCollapsed = this.collapsed;
         // Pre-bound method for event listeners
         this.updateCurrentLocationBound = this.updateCurrentLocation.bind(this);
@@ -161,10 +161,10 @@ export class Panel {
         }
     }
     render() {
-        return (h(Host, { key: '4898806bfe378b36f5fc784a6a4ea4477f164d86', collapsed: this.isCollapsed }, h("div", { key: 'f0acaedbc5e440b20a49791d5a3544955bdcd1f7', class: "r-panel" }, h("div", { key: '390898c282414aecd4cfd75e4da80fb6b04e8ffa', class: "r-panel--header" }, this.hasHeader && (h("a", { key: '9358558193e8c7ec82d8bf40240b9fb8d00d902d', class: "logo-wrapper", href: this.logoLink }, this.isCollapsed ?
+        return (h(Host, { key: '0404a2c3acbba8414d7baffc8c0f861e512fe7cb', role: "navigation", collapsed: this.isCollapsed }, h("div", { key: 'b93d1555f060793b7137fd6aac0de2a1a1f35436', class: "r-panel" }, h("div", { key: 'b7dd2dee4c145a21a5a963750e8b26ab2d8b9bbe', class: "r-panel--header" }, this.hasHeader && (h("a", { key: 'dbb02cd6271fba2a5d4a783a20d5e6d9e34ee734', class: "logo-wrapper", href: this.logoLink }, this.isCollapsed ?
             h("slot", { name: "logo-collapsed" })
             :
-                h("slot", { name: "logo-expanded" }))), this.variant === 'modal' ? (h("r-button", { class: "r-panel--trigger", variant: "blank", title: `${this.labelCollapse}`, icon: "cross", "r-aria-label": `${this.labelCollapse}`, onClick: this.handleFullyCollapsedButtonClick })) : this.variant === 'drawer' ? (h("r-button", { class: "r-panel--trigger", variant: "blank", title: this.isCollapsed ? `${this.labelExpand}` : `${this.labelCollapse}`, icon: "angle-left", "r-aria-label": this.isCollapsed ? `${this.labelExpand}` : `${this.labelCollapse}`, onClick: this.handleSemiCollapsedButtonClick })) : this.variant === 'visible' ? (null) : null), h("div", { key: '070e63b95136c2cab2bf7a1a84390568c1341c47', class: "r-panel--body" }, h("slot", { key: 'e595b40da67e61bb23638d5ea1a615005d705a41' })), this.hasFooter && !this.isCollapsed && (h("div", { key: '7adb855c7aa805299abba58795aacb27ce4e6ba5', class: "r-panel--footer" }, h("slot", { key: '6e438b003d443bf62b2faad2bf180a4466190e77', name: "footer" }))))));
+                h("slot", { name: "logo-expanded" }))), this.variant === 'modal' ? (h("r-button", { class: "r-panel--trigger", variant: "blank", icon: "cross", rAriaLabel: `${this.labelCollapse}`, onClick: this.handleFullyCollapsedButtonClick })) : this.variant === 'drawer' ? (h("r-button", { class: "r-panel--trigger", variant: "blank", icon: "angle-left", rAriaLabel: this.isCollapsed ? `${this.labelExpand}` : `${this.labelCollapse}`, onClick: this.handleSemiCollapsedButtonClick })) : this.variant === 'visible' ? (null) : null), h("div", { key: 'bb3d86b7a4b0890709d4a4637eca033ddaec24a6', class: "r-panel--body" }, h("slot", { key: '201aa3f616d3d239fc7b0edc23565a6618304ce5' })), this.hasFooter && !this.isCollapsed && (h("div", { key: 'a15f34fbb86ad8b16c6d036b885c7c8b13655fc6', class: "r-panel--footer" }, h("slot", { key: '41de73edf832d3a5ca93e4f9a79a62780fdcd68b', name: "footer" }))))));
     }
     static get is() { return "r-panel"; }
     static get encapsulation() { return "shadow"; }
@@ -342,7 +342,7 @@ export class Panel {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "defaultValue": "'collapse-panel'"
+                "defaultValue": "'Collapse panel'"
             },
             "labelExpand": {
                 "type": "string",
@@ -362,7 +362,7 @@ export class Panel {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "defaultValue": "'expand-panel'"
+                "defaultValue": "'Expand panel'"
             }
         };
     }

package/dist/collection/components/popover/popover.css

@@ -1,7 +1,6 @@
 :host {
   position: relative;
   overflow: visible;
-  color: var(--r-text-inverse);
   font-family: var(--r-font-family-text, system-ui);
   font-weight: var(--r-font-weight-regular, 400);
   font-size: var(--r-font-size-400, 1rem);