@riverty/web-components 5.8.0 → 6.1.0

package/dist/collection/components/list-item/list-item/list-item.css

@@ -53,12 +53,6 @@
   --r-list-item--background-color: var(--r-background-interactive-pressed, rgba(40, 40, 40, 0.12));
 }
 
-:host(:focus-visible:not(:active)) .r-list-item {
-  --r-list-item--box-shadow: 0 0 0 6px var(--r-border-focused-outlined, #fff);
-  --r-list-item--outline: 2px solid var(--r-border-focused, #0071e3);
-  --r-list-item--outline-offset: 2px;
-}
-
 :host(:focus-within) .r-list-item[href] {
   --r-list-item--box-shadow: 0 0 0 6px var(--r-border-focused-outlined, #fff);
   --r-list-item--outline: 2px solid var(--r-border-focused, #0071e3);
@@ -92,9 +86,9 @@
   display: var(--r-list-item--display, flex);
   align-items: var(--r-list-item--align-items, center);
   justify-content: var(--r-list-item--justify-content, center);
-  gap: var(--r-list-item--gap, 16px);
+  gap: var(--r-list-item--gap, var(--r-spacing-100, 1rem));
   width: var(--r-list-item--width, inherit);
-  padding: var(--r-list-item--padding, 16px);
+  padding: var(--r-list-item--padding, var(--r-spacing-100, 1rem));
   margin-left: var(--r-list-item--margin-left, 0);
   opacity: var(--r-list-item--opacity, 1);
   color: var(--r-list-item--color, inherit);
@@ -102,15 +96,23 @@
   outline: var(--r-list-item--outline, none);
   outline-offset: var(--r-list-item--outline-offset, 0);
   text-decoration: var(--r-list-item--text-decoration, none);
+  text-align: var(--r-list-item--text-align, left);
   background-color: var(--r-list-item--background-color, transparent);
   border-style: var(--r-list-item--border-style, solid);
   border-width: var(--r-list-item--border-width, 0);
   border-color: var(--r-list-item--border-color, transparent);
   cursor: var(--r-list-item--cursor, inherit);
   font-weight: var(--r-list-item--font-weight, var(--r-font-weight-regular, 400));
-  outline: var(--r-list-item--outline, none);
+  font-family: var(--r-list-item--font-family, var(--r-font-family-text, system-ui));
+}
+.r-list-item:focus-visible {
+  --r-list-item--box-shadow: 0 0 0 6px var(--r-border-focused-outlined, #fff);
+  --r-list-item--outline: 2px solid var(--r-border-focused, #0071e3);
+  --r-list-item--outline-offset: 2px;
 }
 .r-list-item--leading {
+  display: var(--r-list-item--leading--display, flex);
+  align-items: var(--r-list-item--leading--align-items, center);
   color: var(--r-list-item--leading--color, var(--r-icon-soft, #686868));
 }
 .r-list-item--leading-icon {
@@ -119,7 +121,7 @@
 .r-list-item--trailing {
   display: var(--r-list-item--trailing--display, flex);
   align-self: var(--r-list-item--trailing--align-self, center);
-  gap: var(--r-list-item--trailing--gap, 8px);
+  gap: var(--r-list-item--trailing--gap, var(--r-spacing-050, 0.5rem));
   color: var(--r-list-item--trailing--color, inherit);
 }
 .r-list-item--trailing-icon {
@@ -133,33 +135,65 @@
 }
 .r-list-item--trailing ::slotted(*) {
   display: var(--r-list-item--trailing-slotted--display, flex);
-  gap: var(--r-list-item--trailing-slotted--display, 8px);
+  gap: var(--r-list-item--trailing-slotted--display, var(--r-spacing-050, 0.5rem));
 }
 .r-list-item--text {
   display: var(--r-list-item--text--display, flex);
   flex-grow: var(--r-list-item--text--flex-grow, 1);
   flex-direction: var(--r-list-item--text--flex-direction, column);
-  gap: var(--r-list-item--text--gap, 2px);
+  gap: var(--r-list-item--text--gap, 0.125rem);
   white-space: var(--r-list-item--text--white-space, normal);
   overflow: var(--r-list-item--text--overflow, hidden);
   text-overflow: var(--r-list-item--text--text-overflow, ellipsis);
   font-weight: var(--r-list-item--trailing-text--font-weight, inherit);
 }
+.r-list-item--sr-text {
+  display: var(--r-list-item--sr-text--display, none);
+}
 .r-list-item--headline {
   font-size: var(--r-list-item--headline--font-size, 1rem);
   font-weight: var(--r-list-item--headline--font-weight, 600);
   line-height: var(--r-list-item--headline--line-height, 1.5);
   color: var(--r-list-item--headline--color, inherit);
 }
-.r-list-item--subtext, .r-list-item--description {
-  font-size: var(--r-list-item--description--font-size, var(--r-list-item--subtext--font-size, 1rem));
-  font-weight: var(--r-list-item--description--font-weight, var(--r-list-item--subtext--font-weight, 400));
-  line-height: var(--r-list-item--description--line-height, var(--r-list-item--subtext--line-height, 1.5));
-  color: var(--r-list-item--description--color, var(--r-list-item--subtext--color, var(--r-text-regular, #282828)));
+.r-list-item--description {
+  font-size: var(--r-list-item--description--font-size, 1rem);
+  font-weight: var(--r-list-item--description--font-weight, 400);
+  line-height: var(--r-list-item--description--line-height, 1.5);
+  color: var(--r-list-item--description--color, var(--r-text-regular, #282828));
   white-space: var(--r-list-item--description--white-space, normal);
   overflow: var(--r-list-item--description--overflow, hidden);
   text-overflow: var(--r-list-item--description--text-overflow, ellipsis);
 }
-.r-list-item--subtext ::slotted(a), .r-list-item--description ::slotted(a) {
-  color: var(--r-list-item--description--color, var(--r-list-item--subtext--slotted--color, inherit));
+.r-list-item--description ::slotted(a) {
+  color: var(--r-list-item--description--color, inherit);
+}
+
+.r-list-item-wrapper {
+  width: var(--r-list-item-wrapper--width, 100%);
+}
+
+.sub-items {
+  margin: var(--r-sub-items--margin, 0);
+  padding: var(--r-sub-items--padding, 0);
+  list-style-type: var(--r-sub-items--list-style-type, "");
+}
+.sub-items[aria-hidden=true] {
+  display: none;
+}
+
+.visually-hidden {
+  position: absolute;
+  width: 0.0625rem;
+  height: 0.0625rem;
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+@media (prefers-reduced-motion) {
+  .r-list-item--trailing-icon {
+    transition: none;
+  }
 }

package/dist/collection/components/list-item/list-item/list-item.js

@@ -5,6 +5,8 @@ export class RListItem {
         this.variant = 'list-item';
         /** Determines whether the list item is expanded to show its subitems. It can be toggled programmatically or through user interaction. */
         this.expanded = false;
+        /** Unique id for each subItem list */
+        this.uniqueSubmitemsId = `r-list-item-subitems-${Date.now().toString(32)}${Math.random().toString(32)}`.replace(/\./g, '');
         this.isEl = (selector) => {
             return this.host.querySelector(selector) !== null;
         };
@@ -44,7 +46,11 @@ export class RListItem {
         return this.isEl('[slot="headline"]');
     }
     get isDescriptionSlot() {
-        return this.isEl('[slot="description"]') || this.isEl('[slot="subtext"]');
+        return this.isEl('[slot="description"]');
+    }
+    get headlineContent() {
+        var _a;
+        return ((_a = this.host.querySelector('[slot="headline"]')) === null || _a === void 0 ? void 0 : _a.textContent) || this.headline;
     }
     get hasSubitems() {
         return this.isEl('[variant="subitem"]');
@@ -53,20 +59,12 @@ export class RListItem {
         var _a;
         return (_a = this.host) === null || _a === void 0 ? void 0 : _a.querySelectorAll('[variant="subitem"]');
     }
-    handleKeyDown(event) {
-        if (event.key !== 'Enter' && event.key !== ' ')
-            return;
-        this.toggleSubitems();
-    }
-    /** Prevent the click from toggling the parent **/
-    handleSubitemClick(event) {
-        event.stopPropagation();
-    }
     /** Function to set tabindex for sub-items */
     setTabIndexOnSubItems() {
         if (this.hasSubitems) {
             this.subItems.forEach((element) => {
-                element.shadowRoot.querySelector('a.r-list-item').setAttribute('tabindex', this.disabled ? '-1' : '0');
+                var _a;
+                (_a = element.shadowRoot.querySelector('a.r-list-item')) === null || _a === void 0 ? void 0 : _a.setAttribute('tabindex', this.disabled ? '-1' : null);
             });
         }
     }
@@ -74,26 +72,29 @@ export class RListItem {
         this.setTabIndexOnSubItems();
     }
     get tagName() {
+        if (this.hasSubitems) {
+            return 'button';
+        }
         return this.href && !this.disabled ? 'a' : 'div';
     }
     render() {
-        const { leadingIcon, leadingIconSrc, trailingIcon, trailingIconSrc, headline, trailingText, subtext, description } = this;
+        const { leadingIcon, leadingIconSrc, trailingIcon, trailingIconSrc, headline, trailingText, description } = this;
         const TagName = this.tagName;
-        const itemAttrs = Object.assign({ href: TagName === 'a' ? this.href : null }, (this.disabled ? { role: 'link', 'aria-disabled': 'true' } : null));
-        const ListItemContent = (h(TagName, Object.assign({ class: "r-list-item" }, itemAttrs), this.isLeading &&
+        const itemAttrs = Object.assign(Object.assign(Object.assign({ href: TagName === 'a' ? this.href : null, 'aria-current': this.active && TagName === 'a' ? 'page' : null }, (this.disabled ? { role: 'link', 'aria-disabled': 'true' } : null)), (this.hasSubitems ? { 'aria-expanded': `${this.expanded}` } : null)), (this.hasSubitems ? { 'aria-controls': `${this.uniqueSubmitemsId}` } : null));
+        const ListItemContent = (h(TagName, Object.assign({ class: "r-list-item" }, itemAttrs, { onClick: () => this.hasSubitems && this.toggleSubitems() }), this.isLeading &&
             h("span", { class: "r-list-item--leading" }, h("slot", { name: "leading" }, this.isLeadingIcon && !this.hideLeadingIcon &&
                 h("r-icon", { class: "r-list-item--leading-icon", name: leadingIcon, src: leadingIconSrc }))), h("span", { class: "r-list-item--text" }, !this.isTextSlot ?
             h(Fragment, null, (this.isHeadlineSlot || headline) &&
-                h("span", { class: "r-list-item--headline" }, h("slot", { name: "headline" }, headline)), (description || this.isDescriptionSlot || subtext) &&
-                h("span", { class: "r-list-item--description" }, h("slot", { name: "subtext" }, subtext), h("slot", { name: "description" }, description)))
+                h("span", { class: "r-list-item--headline" }, h("slot", { name: "headline" }, headline)), (description || this.isDescriptionSlot) &&
+                h("span", { class: "r-list-item--description" }, h("slot", { name: "description" }, description)))
             :
-                h("slot", { name: "text" })), this.isTrailing &&
+                h("slot", { name: "text" })), h("span", { class: "r-list-item--sr-text visually-hidden" }, this.headlineContent), this.isTrailing &&
             h("span", { class: "r-list-item--trailing" }, h("slot", { name: "trailing" }, this.isTrailingIcon && !trailingText &&
                 h("r-icon", { class: "r-list-item--trailing-icon", name: trailingIcon, src: trailingIconSrc }), trailingText && !this.isTrailingIcon &&
                 h("span", { class: "r-list-item--trailing-text" }, trailingText)))));
         if (!this.hasSubitems)
             return h(Host, null, ListItemContent);
-        return (h(Host, { onKeyDown: this.handleKeyDown, onClick: this.toggleSubitems, tabindex: `${this.disabled ? "-1" : "0"}` }, h("div", { class: "r-list-item-wrapper" }, ListItemContent, this.expanded && (h("span", { class: "sub-items", onClick: this.handleSubitemClick }, h("slot", null))))));
+        return (h(Host, null, h("div", { class: "r-list-item-wrapper" }, ListItemContent, h("ul", { "aria-hidden": `${!this.expanded}`, id: this.uniqueSubmitemsId, class: "sub-items" }, h("slot", null)))));
     }
     static get is() { return "r-list-item"; }
     static get encapsulation() { return "shadow"; }
@@ -128,28 +129,6 @@ export class RListItem {
                 "setter": false,
                 "reflect": false
             },
-            "subtext": {
-                "type": "string",
-                "attribute": "subtext",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [{
-                            "name": "deprecated",
-                            "text": "Use `description` instead. Will be removed November 2025.\nSecondary text displayed below the headline (2nd slot), used for additional details or context."
-                        }],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false
-            },
             "description": {
                 "type": "string",
                 "attribute": "description",
@@ -441,6 +420,25 @@ export class RListItem {
                 "setter": false,
                 "reflect": true,
                 "defaultValue": "false"
+            },
+            "active": {
+                "type": "boolean",
+                "attribute": "active",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Indicates whether the list item is currently active (e.g., represents the current page)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true
             }
         };
     }

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: 'f57ca21d8a782d736984c091af8ad7bede50f81b', collapsed: this.isCollapsed }, h("div", { key: '138a6e18232630123667ad328c393c93e4908cf6', class: "r-panel" }, h("div", { key: '377662f16e8fca37a557adaf4fd8329e47828303', class: "r-panel--header" }, this.hasHeader && (h("a", { key: 'f183b59e3dff6ca76905b2b52902d2e6ec6f2709', class: "logo-wrapper", href: this.logoLink }, this.isCollapsed ?
+        return (h(Host, { key: 'aace877d6d376afd9cbac880bdc7d462ccee34e7', role: "navigation", collapsed: this.isCollapsed }, h("div", { key: 'c07a80d9fbefa984af49e105c37675585241dc96', class: "r-panel" }, h("div", { key: '6b16c3af37e340153a9449704bee1d9925309fd6', class: "r-panel--header" }, this.hasHeader && (h("a", { key: '56d04db007a0305db77010fc59b23467c4ab347a', 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: '0f239dc288b9c73f348341e99a06cce9e4499a0e', class: "r-panel--body" }, h("slot", { key: '6fd883065b4db924b1c245e7ea5bcf71229f0840' })), this.hasFooter && !this.isCollapsed && (h("div", { key: 'ce6a1f84358a505940d3ef04c5c218caa972b090', class: "r-panel--footer" }, h("slot", { key: 'e4422d8955e7e64babab3b3f04cfa06f32dad74a', 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: '4d88759343c8172d7b0c8f4750ba3bbb0d027586', class: "r-panel--body" }, h("slot", { key: '8a238430717fa44459b784a27b45f12dcb0b20d3' })), this.hasFooter && !this.isCollapsed && (h("div", { key: '74bc26fe68ea907ea844f1b36ab78be45ffd1540', class: "r-panel--footer" }, h("slot", { key: 'bd294360e84e060493088d42b6dd022e4d3058a9', 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/exports.js

@@ -1,4 +1,3 @@
 export const popoverDismissModeArray = ['auto', 'manual'];
-export const popoverSizeArray = ['s', 'l'];
 export const popoverHorizontalArray = ['left', 'center', 'right', 'cover'];
 export const popoverVerticalArray = ['top', 'middle', 'bottom', 'cover'];

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

@@ -20,14 +20,6 @@
   --pointer--spacer: 0.25rem;
 }
 
-:host([size=s]) {
-  --r-popover--board--max-width: 375px;
-}
-
-:host([size=l]) {
-  --r-popover--board--max-width: 500px;
-}
-
 :host([data-open=true]) {
   --r-popover--pointer--display: block;
   --r-popover--board--visibility: visible;
@@ -219,8 +211,8 @@
   left: var(--r-popover--board--left, -1000em);
   visibility: var(--r-popover--board--visibility, hidden);
   width: var(--r-popover--board--width, 100%);
-  min-width: var(--r-popover--board--max-width, var(--board--min-width));
-  max-width: var(--r-popover--board--max-width, var(--board--max-width));
+  min-width: var(--board--min-width);
+  max-width: var(--board--max-width);
   height: var(--r-popover--board--height, auto);
   max-height: var(--r-popover--board--max-height, var(--board--max-height));
   background-color: var(--r-popover--board--background-color, var(--r-background-inverse));

package/dist/collection/components/popover/popover.js

@@ -280,8 +280,8 @@ export class Popover {
         this.open ? this.show() : this.hide();
     }
     render() {
-        return (h(Host, { key: 'da45eae6a21cc01596344d33afc5def4da57967f', id: this.uniqueId, "data-position": this.positionState, "data-open": `${this.isOpen}`, open: this.isOpen }, h("div", { key: 'ad832de894e0af250cc93bdf3158032bc252740f', class: "r-popover" }, h("button", { key: '28c4938bb02cb7c4eaed074178dda00c2c39a0b7', class: "r-popover--trigger", "aria-label": this.triggerAriaLabel, ref: el => this.triggerElement = el, popoverTarget: `${this.uniqueId}-board`, popoverTargetAction: this.triggerAction }, h("slot", { key: '0a74ac9d6a7ecdba54771e733f8db5af1709e7fb', name: "trigger" })), h("div", { key: 'dbdb43df6a9823f5d8c954146347f40438bbf053', class: "r-popover--board", id: `${this.uniqueId}-board`, popover: this.dismissMode, ref: el => this.boardElement = el, onToggle: this.onToggle, onKeyDown: this.onKeyDown }, this.hasDismiss &&
-            h("r-icon-button", { key: '99cb4c1c050cdf197346ef84f7c610f5f6ed0b4c', ref: el => this.dismissElement = el, class: "r-popover--dismiss", name: "cross", onClick: this.onClickDismiss, label: this.dismissAriaLabel }), h("div", { key: 'fe7e18bd38a4f3879aada14169bfa50f84cd2eac', class: "r-popover--board-content" }, h("slot", { key: 'b5674f8f2f72340cf5af712f513a20bda9e04b47', name: "headline" }), h("slot", { key: '024ce9cc17f041df172d853176d09f4ec493df20', name: "content" }), h("slot", { key: '437ca7707856b7c6db59240d7b4378c74dc8fda8', name: "action" })), h("div", { key: '93184bd493520dbea03c7c63bbfe8c4ae788cde3', class: "r-popover--board-pointer", "aria-hidden": "true" }, h("svg", { key: '779d8b7df8f92ea14517ce9ce5099a73a4fdeac8', width: "16", height: "8", viewBox: "0 0 16 8", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '53b9fee3e6a34cf184d8818ac272122f04193ff6', d: "M8 8L0 0L16 0L8 8Z", fill: "currentColor" })))))));
+        return (h(Host, { key: '13318df823b3f54e05823c9fc9821839f56583b2', id: this.uniqueId, "data-position": this.positionState, "data-open": `${this.isOpen}`, open: this.isOpen }, h("div", { key: '3f750ac2a82236f6a4074fa419b44f0c42f2b7e6', class: "r-popover" }, h("button", { key: '46e4bb247c2eda0e0cc0c4774acac6daf8801bc4', class: "r-popover--trigger", "aria-label": this.triggerAriaLabel, ref: el => this.triggerElement = el, popoverTarget: `${this.uniqueId}-board`, popoverTargetAction: this.triggerAction }, h("slot", { key: 'fac2e6d0ee9ac8830df16d379a0ec5e873becd58', name: "trigger" })), h("div", { key: '636c2ee45476903dc8b812924081f3b45499b18a', class: "r-popover--board", id: `${this.uniqueId}-board`, popover: this.dismissMode, ref: el => this.boardElement = el, onToggle: this.onToggle, onKeyDown: this.onKeyDown }, this.hasDismiss &&
+            h("r-icon-button", { key: '4f6a1168587faf500cddb85981f0dd7209af4020', ref: el => this.dismissElement = el, class: "r-popover--dismiss", name: "cross", onClick: this.onClickDismiss, label: this.dismissAriaLabel }), h("div", { key: 'bfa17c2df8022a01192550c315ba32e3a5247e3f', class: "r-popover--board-content" }, h("slot", { key: '001d74737028aee0d413e9ed679ff853070d5559', name: "headline" }), h("slot", { key: '9a33119f2e2f6bf10f0005f83283a1e964332583', name: "content" }), h("slot", { key: '2ff477aed3ef83d6bfff4fb3fdaeb3501dfba7c7', name: "action" })), h("div", { key: '6c0b891bc2e9def0892f65fe8882deef565b2037', class: "r-popover--board-pointer", "aria-hidden": "true" }, h("svg", { key: 'e9da72e80bb395041f4a9cc269cf835b643a335c', width: "16", height: "8", viewBox: "0 0 16 8", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '44eb8e0fa2c3d294074787595097fcdf82311052', d: "M8 8L0 0L16 0L8 8Z", fill: "currentColor" })))))));
     }
     static get is() { return "r-popover"; }
     static get encapsulation() { return "shadow"; }
@@ -319,37 +319,6 @@ export class Popover {
                 "setter": false,
                 "reflect": true
             },
-            "size": {
-                "type": "string",
-                "attribute": "size",
-                "mutable": false,
-                "complexType": {
-                    "original": "PopoverSize",
-                    "resolved": "\"l\" | \"s\"",
-                    "references": {
-                        "PopoverSize": {
-                            "location": "import",
-                            "path": "./exports",
-                            "id": "src/components/popover/exports.ts::PopoverSize"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [{
-                            "name": "default",
-                            "text": "\"s\""
-                        }, {
-                            "name": "deprecated",
-                            "text": "This property will be removed in November 2025 release."
-                        }],
-                    "text": "_DEPRECATED_ (This property will be removed in November 2025 release.)\nSize of the Popover: `s` | `l`."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": true
-            },
             "dismissMode": {
                 "type": "string",
                 "attribute": "dismiss-mode",
@@ -446,28 +415,6 @@ export class Popover {
                 "setter": false,
                 "reflect": false
             },
-            "containerAriaLabel": {
-                "type": "string",
-                "attribute": "container-aria-label",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [{
-                            "name": "deprecated",
-                            "text": "This property will be removed in December 2025 release."
-                        }],
-                    "text": "Defines `aria-label` content for the popover container.\nUsed for accessibility to describe the popover content area."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false
-            },
             "vertical": {
                 "type": "string",
                 "attribute": "vertical",

package/dist/collection/components/popover-action/popover-action.js

@@ -64,7 +64,7 @@ export class PopoverAction {
         return focusableElements(this.host);
     }
     render() {
-        return (h(Host, { key: '573250bc4f9a1a8725e8808885854ca320b203bc', slot: "action" }, h("slot", { key: 'd753af20723fb9e2ae49f9977cda81fa1c3df8c6', onSlotchange: this.handleSlotChange })));
+        return (h(Host, { key: '898d4a649622403956b34ea5065ca5135e67c595', slot: "action" }, h("slot", { key: 'f61e085a1797778c33f07eaf3987cd743d56a662', onSlotchange: this.handleSlotChange })));
     }
     static get is() { return "r-popover-action"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/popover-content/popover-content.js

@@ -44,7 +44,7 @@ export class PopoverContent {
         return focusableElements(this.host);
     }
     render() {
-        return (h(Host, { key: 'ec778d5e0a294bcbe389039abc6f0b620b7bc69c', slot: "content", class: "r-typography" }, h("slot", { key: '40c27d279a1093be8a98731881ad83da147f5bbc' })));
+        return (h(Host, { key: 'b85780e40b627c6d859af763113bc88e21768f88', slot: "content", class: "r-typography" }, h("slot", { key: '7bd5e6152e29a4e20d837c21e1df7bff68a673da' })));
     }
     static get is() { return "r-popover-content"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/popover-headline/popover-headline.js

@@ -10,7 +10,7 @@ export class PopoverHeadline {
         stopInverseThemeAwareness(this.host, themeContextElement);
     }
     render() {
-        return (h(Host, { key: 'f878fb9ca3ffe1df00088bbd2fe1b6321130228a', slot: "headline" }, h("slot", { key: '1a477943ab993f8960f3e77dd90a72a276bf4200' })));
+        return (h(Host, { key: '6b604401e4e82c17a300f00d6af33902b38f493c', slot: "headline" }, h("slot", { key: '64c8c6ff661e0317ba3ae0d4f32f6424d91fccbe' })));
     }
     static get is() { return "r-popover-headline"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/popover-trigger/popover-trigger.js

@@ -53,7 +53,7 @@ export class PopoverTrigger {
         (_a = this.activeElement) === null || _a === void 0 ? void 0 : _a.blur();
     }
     render() {
-        return (h(Host, { key: '78536189423d25a1cf3ee3630512ad44b2dbd444', slot: "trigger", onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, h("slot", { key: 'e634da1b6053eb1c0df7f08f5486f9492c2bd4d0' })));
+        return (h(Host, { key: 'fe285ee3a91600ee0e0cebeb9f5818eb30d89f06', slot: "trigger", onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, h("slot", { key: '3782871f7aac634d3c1ccef2f516cdf00916b4f6' })));
     }
     static get is() { return "r-popover-trigger"; }
     static get encapsulation() { return "shadow"; }

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

@@ -11,7 +11,7 @@ export class ProgressBar {
             max: '100',
             'aria-label': rAriaLabel
         };
-        return (h(Host, { key: '81203123d2df8fb029855f39dc359b98991630ee' }, h("progress", Object.assign({ key: 'f766b44c2c4088ab67d69b57de074fee15be166c' }, progressBarAttrs, { class: "r-progress-bar" }))));
+        return (h(Host, { key: 'f79c73155a42eef63910abde1fc2cebd147b7129' }, h("progress", Object.assign({ key: 'ce94e9a20124fa8cd1561612e2797e17f0ebe19f' }, progressBarAttrs, { class: "r-progress-bar" }))));
     }
     static get is() { return "r-progress-bar"; }
     static get encapsulation() { return "shadow"; }