@riverty/web-components 6.2.0 → 6.3.0

package/dist/cjs/r-pagination.cjs.entry.js

@@ -1,314 +0,0 @@
-'use strict';
-
-var index = require('./index-BnETQtSf.js');
-
-const paginationCss = ":host{--r-pagination--display:flex;--r-pagination--list-style:none;--r-pagination--align-items:center;--r-pagination--justify-content:center;--r-pagination--font-family:var(--r-font-family-text);--r-pagination--margin:0 auto;--r-pagination--flex-direction:column;--r-pagination--width:100%;--r-pagination--max-width:664px;--r-pagination--margin:0 auto;--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--header--display:flex;--r-pagination--header--align-items:center;--r-pagination--header--justify-content:space-between;--r-pagination--header--min-width:287px;--r-pagination--footer--display:flex;--r-pagination--footer--justify-content:center;--r-pagination--footer--width:100%;--r-pagination--item--disabled-text:none;--r-pagination--font-size:var(--r-font-size-200);display:block}:host([variant=minimized]){--r-pagination--max-width:440px}:host([variant=standard]){--r-pagination--max-width:560px}:host([variant=maximized]){--r-pagination--max-width:664px}.r-pagination r-select{--r-select--font-size:var(--r-pagination--font-size, 12px);--r-select-option--font-size:var(--r-pagination--font-size, 12px)}.r-pagination{align-items:var(--r-pagination--align-items);display:var(--r-pagination--display);flex-direction:var(--r-pagination--flex-direction);font-family:var(--r-pagination--font-family);font-size:var(--r-pagination--font-size);justify-content:var(--r-pagination--justify-content);list-style:var(--r-pagination--list-style);margin:var(--r-pagination--margin);max-width:var(--r-pagination--max-width);user-select:var(--r-pagination--item--disabled-text);width:var(--r-pagination--width)}.r-pagination--footer{align-items:var(--r-pagination--header--align-items);display:var(--r-pagination--footer--display);justify-content:var(--r-pagination--footer--justify-content)}.r-pagination--header{align-items:var(--r-pagination--header--align-items);display:var(--r-pagination--header--display);justify-content:var(--r-pagination--header--justify-content);font-family:var(--r-pagination--font-family);min-width:var(--r-pagination--header--min-width)}.r-pagination--header--select{min-width:auto;--width:unset !important}.r-pagination--header label{font-size:var(--r-pagination--font-size)}.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-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.number{--r-button--font-size:0.813rem}.r-pagination--item{--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)}.visually-hidden{position:absolute;width:1px;height:1px;clip:rect(0 0 0 0);clip-path:inset(50%);overflow:hidden;white-space:nowrap}";
-
-const RPagination = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.rChange = index.createEvent(this, "rChange");
-        this.rNumberClick = index.createEvent(this, "rNumberClick");
-        this.rArrowClick = index.createEvent(this, "rArrowClick");
-        this.rItemsPerPageChange = index.createEvent(this, "rItemsPerPageChange");
-        /** UI: Arrows present/absent */
-        this.arrows = true;
-        /** Total amount of pages to select from */
-        this.totalResults = 1;
-        /** Current page number */
-        this.pageActive = 1;
-        /** Amount of items to show per page */
-        this.itemsPerPage = 5;
-        /** Items per page options for dropdown */
-        this.itemsPerPageOptions = [5, 10, 15, 20, 25, 50, 100];
-        // @Prop() variant?: PaginationVariant;
-        /** Allows selection between different pagination styles: minimized, standard, maximized */
-        this.variant = 'standard';
-        /** UI: Result Line and select field present/absent */
-        this.resultsLine = false;
-        /** Text to show in beginning of resultLine */
-        this.startText = 'Showing';
-        /** Text to display between currently shown results and total amount of results */
-        this.middleText = 'of';
-        /** Text to display after total results */
-        this.endText = 'results';
-        /** Text to show in select */
-        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);
-            this.itemsPerPage = newItemsPerPage;
-            this.rItemsPerPageChange.emit(this.itemsPerPage);
-            this.setPaginationState();
-        };
-        this._activateStep = (index) => {
-            if (index < 1 || index > this.total || this.pageActive === index)
-                return; // Prevent invalid or redundant updates
-            this.pageActive = index;
-            requestAnimationFrame(() => {
-                this.setPaginationState(); // Ensure state updates correctly
-                requestAnimationFrame(() => {
-                    var _a;
-                    // Ensure the correct button is focused AFTER the state updates
-                    const newActiveButton = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(`.r-pagination--item[data-index="${this.pageActive}"]`);
-                    if (newActiveButton) {
-                        newActiveButton.focus();
-                    }
-                });
-            });
-        };
-        this.handleItemChange = e => {
-            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(() => {
-                const focusTarget = this.getFocusTargetAfterNavigation(buttonElement);
-                focusTarget === null || focusTarget === void 0 ? void 0 : focusTarget.setFocus();
-            });
-            if (buttonElement.classList.contains('number')) {
-                this.rNumberClick.emit(this.paginationState);
-            }
-            if (buttonElement.classList.contains('arrow')) {
-                const direction = buttonElement.classList.contains('next') ? 'next' : 'previous';
-                this.rArrowClick.emit(Object.assign(Object.assign({}, this.paginationState), { direction }));
-            }
-        };
-        this.syncHeaderWidth = () => {
-            requestAnimationFrame(() => {
-                if (this.headerRef && this.footerRef) {
-                    const footerWidth = this.footerRef.offsetWidth;
-                    this.headerRef.style.width = `${footerWidth}px`;
-                }
-            });
-        };
-    }
-    get isNoPreviousPage() {
-        return this.previous === null;
-    }
-    get isNoNextPage() {
-        return this.next === null;
-    }
-    get isNotFirstPage() {
-        return this.first === null;
-    }
-    get isNotLastPage() {
-        return this.last === null;
-    }
-    get paginationState() {
-        const { total, active, previous, next, first, last, arrows } = this;
-        return { total, active, previous, next, first, last, arrows };
-    }
-    // State recalculation
-    setPaginationState() {
-        // Correctly calculate total pages based on items per page
-        this.total = Math.ceil(this.totalResults / this.itemsPerPage);
-        // Ensure the active page does not exceed the total pages
-        if (this.pageActive > this.total) {
-            this.pageActive = this.total;
-        }
-        // Set the reveal value based on variant and screen size
-        switch (this.variant) {
-            case 'minimized':
-                {
-                    this.arrows = false;
-                    this.resultsLine = false;
-                    break;
-                }
-            case 'standard': {
-                this.arrows = true;
-                break;
-            }
-            case 'maximized': {
-                this.arrows = true;
-                break;
-            }
-            default: {
-                console.warn('No variant specified. Defaulting to "standard".');
-                this.variant = 'standard';
-                break;
-            }
-        }
-        // Update pagination-related state variables
-        this.active = this.pageActive;
-        this.previous = this.active - 1 > 0 ? this.active - 1 : null;
-        this.next = this.active + 1 > this.total ? null : this.active + 1;
-        this.first = this.variant === 'maximized' && this.active !== 1 ? 1 : null;
-        this.last = this.variant === 'maximized' && this.active !== this.total ? this.total : null;
-        if (typeof ResizeObserver !== 'undefined') {
-            this.resizeObserver = new ResizeObserver(() => {
-                this.syncHeaderWidth();
-            });
-            if (this.footerRef) {
-                this.resizeObserver.observe(this.footerRef);
-            }
-        }
-        // 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();
-    }
-    disconnectedCallback() {
-        if (this.resizeObserver) {
-            this.resizeObserver.disconnect();
-        }
-    }
-    componentDidRender() {
-        this.syncHeaderWidth();
-    }
-    componentDidUpdate() {
-        this.setPaginationState(); // Recalculate when props change
-    }
-    render() {
-        const { active, previous, next, first, itemsPerPage, itemsPerPageOptions, startText, middleText, endText, selectText, listBoxPosition } = this;
-        const itemTemplate = (type, index$1) => {
-            if (type === 'number') {
-                return (index.h("li", null, index.h("r-button", { class: "r-pagination--item number", "data-index": index$1, variant: "secondary", onRClick: this.handleItemChange }, index.h("span", { class: "visually-hidden" }, this.pageLabel), " ", index$1)));
-            }
-            if (type === 'active') {
-                return (index.h("li", null, index.h("r-button", { "data-index": index$1, class: "r-pagination--item number active", rAriaCurrent: "page" }, index.h("span", { class: "visually-hidden" }, this.pageLabel), " ", index$1)));
-            }
-            if (type === 'stepper') {
-                return (index.h("li", { "aria-label": this.ellipsisLabel, class: "r-pagination--item stepper" }, "..."));
-            }
-        };
-        const renderNumbers = () => {
-            const totalPages = Math.ceil(this.totalResults / itemsPerPage);
-            const maxVisiblePages = 10;
-            const items = [];
-            const startEdge = 1;
-            const endEdge = totalPages;
-            const _createItem = (value) => {
-                const item = value + 1; // Convert to 1-indexed
-                const type = item === active ? 'active' : 'number';
-                return itemTemplate(type, item);
-            };
-            // Case: total pages are less than or equal to maxVisiblePages
-            if (totalPages <= maxVisiblePages) {
-                return index.h("ul", { class: "r-pagination--items-list" }, [...Array(totalPages).keys()].map(_createItem));
-            }
-            // Always add startEdge
-            items.push(itemTemplate(active === startEdge ? 'active' : 'number', startEdge));
-            const showStartStepper = active > 5;
-            const showEndStepper = active < totalPages - 5;
-            // Case: active page is near the beginning
-            if (!showStartStepper) {
-                for (let i = 2; i <= 8; i++) {
-                    items.push(_createItem(i - 1)); // Convert to 0-indexed for _createItem
-                }
-                items.push(itemTemplate('stepper', null));
-            }
-            // Case: active page is near the end
-            else if (!showEndStepper) {
-                items.push(itemTemplate('stepper', null));
-                for (let i = totalPages - 7; i < totalPages; i++) {
-                    items.push(_createItem(i - 1)); // Convert to 0-indexed for _createItem
-                }
-            }
-            // Case: active page is in the middle
-            else {
-                items.push(itemTemplate('stepper', null));
-                for (let i = active - 2; i <= active + 2; i++) {
-                    items.push(_createItem(i - 1)); // Convert to 0-indexed for _createItem
-                }
-                items.push(itemTemplate('stepper', null));
-            }
-            // Always add endEdge
-            items.push(itemTemplate(active === endEdge ? 'active' : 'number', endEdge));
-            // Ensure the total number of items is 10
-            if (items.length > maxVisiblePages) {
-                items.splice(1, items.length - maxVisiblePages - 1); // Remove excess items while keeping steppers
-            }
-            else if (items.length < maxVisiblePages) {
-                // Add additional pages if the total number of items is less than 10
-                const additionalPages = maxVisiblePages - items.length;
-                if (showStartStepper && showEndStepper) {
-                    for (let i = active + 3; i <= active + 2 + additionalPages; i++) {
-                        if (i < totalPages) {
-                            items.splice(items.length - 2, 0, _createItem(i - 1)); // Convert to 0-indexed for _createItem
-                        }
-                    }
-                }
-                else if (showStartStepper) {
-                    for (let i = active + 3; i <= active + 2 + additionalPages; i++) {
-                        if (i < totalPages) {
-                            items.splice(items.length - 1, 0, _createItem(i - 1)); // Convert to 0-indexed for _createItem
-                        }
-                    }
-                }
-                else if (showEndStepper) {
-                    for (let i = active - 3; i >= active - 2 - additionalPages; i--) {
-                        if (i > 1) {
-                            items.splice(1, 0, _createItem(i - 1)); // Convert to 0-indexed for _createItem
-                        }
-                    }
-                }
-            }
-            return index.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 (index.h(index.Fragment, null, index.h("div", { ref: el => (this.headerRef = el), class: "r-pagination--header" }, index.h("div", { class: "results-info", "aria-live": "polite" }, startText ? startText : 'Showing', " ", startItem, "\u2013", endItem, " ", middleText ? middleText : 'of', " ", this.totalResults, " ", endText ? endText : 'results'), index.h("div", null, index.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 => (index.h("r-select-option", { value: option.toString() }, option, "/", selectText ? selectText : 'page'))))))));
-        };
-        const isLastPage = active === this.total;
-        const renderList = () => {
-            if (this.variant === 'minimized') {
-                return (index.h(index.Fragment, null, index.h("div", { ref: el => (this.footerRef = el), class: "r-pagination--footer" }, renderNumbers())));
-            }
-            return (index.h(index.Fragment, null, index.h("div", { ref: el => (this.footerRef = el), class: "r-pagination--footer" }, this.variant === 'maximized' && (index.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 })), index.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(), index.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' && (index.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 (index.h(index.Host, { role: "navigation" }, index.h("div", { class: "r-pagination" }, this.resultsLine && renderHeader(), renderList())));
-    }
-    get el() { return index.getElement(this); }
-};
-RPagination.style = paginationCss;
-
-exports.r_pagination = RPagination;

package/dist/cjs/r-panel.cjs.entry.js

@@ -1,184 +0,0 @@
-'use strict';
-
-var index = require('./index-BnETQtSf.js');
-
-const panelCss = ":host{--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: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;--r-panel--transform:none;--r-panel--font-family:var(--r-font-family-text);--r-panel--left:0;--r-panel--header--display:flex;--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:3.125rem;--r-panel--header--logo--img--width:100%;--r-panel--header--logo--img--height:auto;--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:4px 8px 0;--r-panel--body-header--color:var(--r-text-soft, #686868);--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--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, 1rem);--r-panel--footer--align-self:stretch;--r-panel--footer--text-align:center}:host([variant=drawer]) r-button{--r-button--padding:0.625rem;--r-button--background:var(--r-background-interactive-softer, #E7E4E2);--r-button--border-radius:10%;--r-button--slot--position:relative;--r-button--left:5%}:host([variant=drawer][collapsed]){--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:0.625rem;--r-list-item--epxanded--background-color:rgba(40, 40, 40, 0.08)}:host([variant=drawer][collapsed]) r-button{--r-button--slot--position:inherit;transition:transform 250ms ease-in-out}:host([variant=modal][collapsed]){--r-panel--transform:translate(-100%)}: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: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{--r-button--top:20%;--r-button--left:97%}:host([collapsed]){--r-list-item--active-parent--background-color:rgba(40, 40, 40, 0.08)}.r-panel{z-index:2;min-width:var(--r-panel--min-width);background-color:var(--r-panel--background-color);display:var(--r-panel--display);flex-direction:var(--r-panel--flex-direction);align-items:var(--r-panel--align-items);width:var(--r-panel--width);height:var(--r-panel--height);position:var(--r-panel--position);top:var(--r-panel--top);padding:var(--r-panel--padding);color:var(--r-panel--color);transition:var(--r-panel--transition);transform:var(--r-panel--transform);left:var(--r-panel--left);font-family:var(--r-panel--font-family);box-sizing:border-box}.r-panel .logo-wrapper .logo-expanded{width:var(--r-panel--header--logo--img--expanded--width)}.r-panel .logo-wrapper .logo-collapsed{width:var(--r-panel--header--logo--img--collapsed--width)}.r-panel .logo-wrapper img{width:var(--r-panel--header--logo--img--width);height:var(--r-panel--header--logo--img--height)}.r-panel .logo-wrapper:focus,.r-panel .logo-wrapper:focus-visible{box-shadow:0 0 0 6px var(--r-border-focused-outlined, #fff);outline:2px solid var(--r-border-focused, #0071e3);outline-offset:2px}.r-panel--header{display:flex;padding:var(--r-panel--header--padding);justify-content:var(--r-panel--header--justify-content);align-items:var(--r-panel--header--align-items);align-self:var(--r-panel--header--align-self);flex-direction:var(--r-panel--header--flex-direction);gap:var(--r-panel--header--gap);height:var(--r-panel--header--height)}.r-panel--header r-button{--r-button--padding:0;transform:var(--r-panel--header--icon-rotate);background:var(--r-button--background);position:var(--r-button--slot--position);left:var(--r-button--left);top:var(--r-button--top);border-radius:var(--r-button--border-radius)}.r-panel--body{flex-grow:var(--r-panel--body--flex-grow);align-self:var(--r-panel--body--align-self);display:var(--r-panel--body--display);overflow:var(--r-panel--body--overflow);padding:var(--r-panel--body--padding)}.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);padding:var(--r-panel--footer--padding);flex-direction:var(--r-panel--footer--flex-direction);justify-content:var(--r-panel--footer--justify-content);gap:var(--r-panel--footer-gap);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}}";
-
-const Panel = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.panelStateChanged = index.createEvent(this, "panelStateChanged");
-        /** A boolean property that indicates whether the component includes a header  */
-        this.hasHeader = false;
-        /** A boolean property that indicates whether the navitems are active of not */
-        this.active = false;
-        /** A boolean property that indicates whether the component includes a footer  */
-        this.hasFooter = false;
-        /** Presentational style */
-        this.variant = 'visible';
-        /** 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';
-        /** Aria-label text for expand */
-        this.labelExpand = 'Expand panel';
-        this.isCollapsed = this.collapsed;
-        // Pre-bound method for event listeners
-        this.updateCurrentLocationBound = this.updateCurrentLocation.bind(this);
-        this.handleSemiCollapsedButtonClick = () => {
-            this.togglePanel();
-            const parentPanels = document.querySelectorAll('r-list-item[expanded]');
-            if (this.isCollapsed) {
-                parentPanels.forEach(parentPanel => {
-                    parentPanel.removeAttribute('expanded');
-                });
-            }
-            else {
-                parentPanels.forEach(parentPanel => {
-                    parentPanel.setAttribute('expanded', '');
-                });
-            }
-        };
-        this.handleFullyCollapsedButtonClick = () => {
-            this.collapsePanel();
-        };
-    }
-    toggleSubItems(event) {
-        const target = event.target;
-        if (target.tagName === 'R-LIST-ITEM' && this.isCollapsed && this.variant) {
-            const hasSubItems = target.hasAttribute('has-sub-items');
-            if (hasSubItems) {
-                this.expandPanel();
-            }
-        }
-    }
-    /** Expand/Collapse Panel  */
-    async togglePanel() {
-        this.isCollapsed = !this.isCollapsed;
-    }
-    /** Expand Panel  */
-    async expandPanel() {
-        this.isCollapsed = false;
-    }
-    /** Collapse Panel */
-    async collapsePanel() {
-        this.isCollapsed = true;
-    }
-    handleCollapseChange(collapsed) {
-        this.isCollapsed = collapsed;
-        // Save the state to localStorage whenever it changes
-        if (this.variant === 'drawer' || this.variant === 'modal') {
-            localStorage.setItem('panelState', JSON.stringify(collapsed));
-            this.panelStateChanged.emit({ collapsed });
-        }
-    }
-    watchVariant(newVariant) {
-        this.isCollapsed = newVariant === 'modal';
-    }
-    handleDocumentClick(event) {
-        this.handleClickOutside(event);
-    }
-    getNavLinks() {
-        return document.querySelectorAll('r-list-item[href]');
-    }
-    get isVariantCollapsible() {
-        return this.variant === 'modal';
-    }
-    /*
-      * Collapse the panel when a click occurs outside of it (in mobile/when variant is 'modal'):
-      * Check if the clicked target is not an R-BUTTON element (that is the button[hamburger] that toggles the panel in mobile)
-      * Check if the click happened outside of the host element
-      * Ensure the variant is 'modal' and the panel is currently expanded
-    */
-    handleClickOutside(event) {
-        if (event.target.tagName !== 'R-BUTTON' &&
-            !this.host.contains(event.target) &&
-            this.isVariantCollapsible &&
-            !this.isCollapsed) {
-            this.collapsePanel();
-        }
-    }
-    componentWillLoad() {
-        this.isCollapsed = this.isVariantCollapsible;
-        if (this.variant === 'drawer') {
-            const savedState = localStorage.getItem('panelState');
-            this.isCollapsed = savedState ? JSON.parse(savedState) : this.isCollapsed;
-        }
-    }
-    componentWillRender() {
-        window.addEventListener('popstate', this.updateCurrentLocationBound);
-        window.addEventListener('hashchange', this.updateCurrentLocationBound);
-        this.highlightCurrentLink();
-    }
-    componentDidRender() {
-        this.highlightCurrentLink();
-    }
-    disconnectedCallback() {
-        window.removeEventListener('popstate', this.updateCurrentLocationBound);
-        window.removeEventListener('hashchange', this.updateCurrentLocationBound);
-    }
-    updateCurrentLocation() {
-        this.currentLocation = window.location.hash ? window.location.hash.slice(1) : window.location.href;
-        this.highlightCurrentLink();
-    }
-    // Highlight the current link based on the current URL
-    // Scroll the active link into view
-    highlightCurrentLink() {
-        const navLinks = this.getNavLinks();
-        navLinks.forEach((link) => {
-            if (link instanceof HTMLElement) {
-                const linkHref = link.getAttribute('href');
-                const isActive = linkHref === this.currentLocation || linkHref === window.location.pathname + window.location.hash;
-                this.updateLinkState(link, isActive);
-            }
-        });
-        const activeLink = document.querySelector('.active');
-        if (activeLink) {
-            activeLink.scrollIntoView({
-                behavior: 'smooth',
-                block: 'end'
-            });
-        }
-    }
-    // Update link attributes based on active state
-    updateLinkState(link, isActive) {
-        if (isActive) {
-            link.setAttribute('active', '');
-            link.classList.add('active');
-            this.expandParentMenus(link);
-            this.highlightParent(link);
-        }
-        else {
-            link.removeAttribute('active');
-            link.classList.remove('active');
-        }
-    }
-    highlightParent(link) {
-        const parentActive = link.parentElement;
-        if (parentActive && parentActive.tagName === 'R-LIST-ITEM') {
-            parentActive.setAttribute('active-parent', '');
-        }
-    }
-    expandParentMenus(link) {
-        var _a;
-        let parentPanel = link.closest('r-list-item[has-sub-items]');
-        while (parentPanel && !this.isCollapsed) {
-            parentPanel.setAttribute('expanded', '');
-            parentPanel = (_a = parentPanel.parentElement) === null || _a === void 0 ? void 0 : _a.closest('r-panel');
-        }
-    }
-    render() {
-        return (index.h(index.Host, { key: '0404a2c3acbba8414d7baffc8c0f861e512fe7cb', role: "navigation", collapsed: this.isCollapsed }, index.h("div", { key: 'b93d1555f060793b7137fd6aac0de2a1a1f35436', class: "r-panel" }, index.h("div", { key: 'b7dd2dee4c145a21a5a963750e8b26ab2d8b9bbe', class: "r-panel--header" }, this.hasHeader && (index.h("a", { key: 'dbb02cd6271fba2a5d4a783a20d5e6d9e34ee734', class: "logo-wrapper", href: this.logoLink }, this.isCollapsed ?
-            index.h("slot", { name: "logo-collapsed" })
-            :
-                index.h("slot", { name: "logo-expanded" }))), this.variant === 'modal' ? (index.h("r-button", { class: "r-panel--trigger", variant: "blank", icon: "cross", rAriaLabel: `${this.labelCollapse}`, onClick: this.handleFullyCollapsedButtonClick })) : this.variant === 'drawer' ? (index.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), index.h("div", { key: 'bb3d86b7a4b0890709d4a4637eca033ddaec24a6', class: "r-panel--body" }, index.h("slot", { key: '201aa3f616d3d239fc7b0edc23565a6618304ce5' })), this.hasFooter && !this.isCollapsed && (index.h("div", { key: 'a15f34fbb86ad8b16c6d036b885c7c8b13655fc6', class: "r-panel--footer" }, index.h("slot", { key: '41de73edf832d3a5ca93e4f9a79a62780fdcd68b', name: "footer" }))))));
-    }
-    get host() { return index.getElement(this); }
-    static get watchers() { return {
-        "isCollapsed": ["handleCollapseChange"],
-        "variant": ["watchVariant"]
-    }; }
-};
-Panel.style = panelCss;
-
-exports.r_panel = Panel;

package/dist/cjs/r-popover-action.cjs.entry.js

@@ -1,80 +0,0 @@
-'use strict';
-
-var index = require('./index-BnETQtSf.js');
-var theming = require('./theming-NqxjhVJS.js');
-var focusable = require('./focusable-Oll_rmtP.js');
-require('./style-observer-D9zSP9wP.js');
-
-const popoverActionCss = ":host slot{display:contents}::slotted(r-button){--r-button--color:var(--r-text-regular);--r-button--border-width:0;--r-button--background-color:rgba(0,0,0,0);--r-button--slot--position:relative;--r-button--slot--text-decoration:underline;--r-button--padding:10px 2px 18px 2px;--r-button--slot--text-underline-offset:9px}::slotted(r-button:hover:not([disabled]):not([disabled=false])){--r-button--background-color:var(--r-background-interactive-hovered)}::slotted(r-button:active:not([disabled]):not([disabled=false])){--r-button--background-color:var(--r-background-interactive-pressed)}";
-
-const PopoverAction = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.handleSlotChange = () => {
-            this.setButtonDefaults();
-        };
-    }
-    connectedCallback() {
-        // Apply default properties to any buttons
-        this.setButtonDefaults();
-        const themeContextElement = this.host.closest('r-popover');
-        theming.setupInverseThemeAwareness(this.host, themeContextElement);
-    }
-    disconnectedCallback() {
-        const themeContextElement = this.host.closest('r-popover');
-        theming.stopInverseThemeAwareness(this.host, themeContextElement);
-    }
-    setButtonDefaults() {
-        const buttons = this.host.querySelectorAll('r-button');
-        // Set default attributes on each button
-        buttons.forEach(button => {
-            // Default size="small"
-            if (!button.hasAttribute('size')) {
-                button.setAttribute('size', 'small');
-            }
-            // Default variant="text-inline"
-            if (!button.hasAttribute('variant')) {
-                button.setAttribute('variant', 'text-inline');
-            }
-        });
-    }
-    /**
-     * Set focus on the first focusable element within the popover action
-     * @returns {Promise<HTMLElement | null>} The focused element or null if no element is found
-     */
-    async setFocus() {
-        if (!this.activeElement)
-            return;
-        if ('setFocus' in this.activeElement && typeof this.activeElement.setFocus === 'function') {
-            await this.activeElement.setFocus();
-            return;
-        }
-        this.activeElement.focus();
-        return this.activeElement;
-    }
-    /**
-     * Remove focus from the first focusable element within the popover action
-     * @returns {Promise<void>}
-     */
-    async setBlur() {
-        var _a;
-        (_a = this.activeElement) === null || _a === void 0 ? void 0 : _a.blur();
-    }
-    get activeElement() {
-        return this.getActiveElements[0] || null;
-    }
-    /**
-     * Get all focusable elements within the popover content
-     * @returns {Promise<HTMLElement[]>} Array of focusable elements
-     */
-    async getActiveElements() {
-        return focusable.focusableElements(this.host);
-    }
-    render() {
-        return (index.h(index.Host, { key: '8e0de158033b48c66aa49930911e1f383c2010ae', slot: "action" }, index.h("slot", { key: 'b9c762d2c1774600a29306559253125abc21cbcd', onSlotchange: this.handleSlotChange })));
-    }
-    get host() { return index.getElement(this); }
-};
-PopoverAction.style = popoverActionCss;
-
-exports.r_popover_action = PopoverAction;

package/dist/cjs/r-popover-content.cjs.entry.js

@@ -1,62 +0,0 @@
-'use strict';
-
-var index = require('./index-BnETQtSf.js');
-var theming = require('./theming-NqxjhVJS.js');
-var focusable = require('./focusable-Oll_rmtP.js');
-require('./style-observer-D9zSP9wP.js');
-
-const popoverContentCss = "::slotted(*:first-child){margin-top:0;padding-top:0}::slotted(*:last-child){margin-bottom:0;padding-bottom:0}";
-
-const PopoverContent = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-    }
-    connectedCallback() {
-        const themeContextElement = this.host.closest('r-popover');
-        theming.setupInverseThemeAwareness(this.host, themeContextElement);
-    }
-    disconnectedCallback() {
-        const themeContextElement = this.host.closest('r-popover');
-        theming.stopInverseThemeAwareness(this.host, themeContextElement);
-    }
-    /**
-     * Set focus on the first focusable element within the popover content
-     * @returns {Promise<HTMLElement | null>} The focused element or null if no element is found
-     */
-    async setFocus() {
-        var _a;
-        if (!this.activeElement)
-            return Promise.resolve(null);
-        if ('setFocus' in this.activeElement && typeof this.activeElement.setFocus === 'function') {
-            await this.activeElement.setFocus();
-            return Promise.resolve(this.activeElement);
-        }
-        (_a = this.activeElement) === null || _a === void 0 ? void 0 : _a.focus();
-        return Promise.resolve(this.activeElement);
-    }
-    /**
-     * Remove focus from the first focusable element within the popover content
-     * @returns {Promise<void>}
-     */
-    async setBlur() {
-        var _a;
-        (_a = this.activeElement) === null || _a === void 0 ? void 0 : _a.blur();
-    }
-    get activeElement() {
-        return this.getActiveElements[0] || null;
-    }
-    /**
-     * Get all focusable elements within the popover content
-     * @returns {Promise<HTMLElement[]>} Array of focusable elements
-     */
-    async getActiveElements() {
-        return focusable.focusableElements(this.host);
-    }
-    render() {
-        return (index.h(index.Host, { key: 'f05a31b3948094f5f7ca657f4bd81474af2fcb6e', slot: "content", class: "r-typography" }, index.h("slot", { key: '0ecbe8de6c0ec200499aead61fc883804c4c4dd7' })));
-    }
-    get host() { return index.getElement(this); }
-};
-PopoverContent.style = popoverContentCss;
-
-exports.r_popover_content = PopoverContent;