@riverty/web-components 6.0.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,18 +135,21 @@
 }
 .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);
@@ -163,3 +168,32 @@
 .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;
         };
@@ -46,6 +48,10 @@ export class RListItem {
     get isDescriptionSlot() {
         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, 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) &&
                 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"; }
@@ -419,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: '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: '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: '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: '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/stepper/stepper.css

@@ -18,5 +18,5 @@
   width: var(--r-stepper-divider--width, 100%);
   height: var(--r-stepper-divider--height, 1px);
   top: var(--r-stepper-divider--top, 10px);
-  background-color: var(--r-stepper-divider--background-color, var(--r-border-soft, #686868));
+  background-color: var(--r-stepper-divider--background-color, var(--r-text-regular, #282828));
 }

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

@@ -18,7 +18,7 @@
   align-items: var(--r-stepper-item--align-items, center);
   justify-content: var(--r-stepper-item--justify-content, center);
   font-size: var(--r-stepper-item--font-size, var(--r-font-size-200, 13px));
-  color: var(--r-stepper-item--color, var(--r-text-soft, #686868));
+  color: var(--r-stepper-item--color, var(--r-text-regular, #282828));
   font-family: var(--r-stepper-item--font-family, var(--r-font-family-text, system-ui));
   width: var(--r-stepper-item--width, 36px);
   white-space: var(--r-stepper-item--white-space, nowrap);
@@ -35,7 +35,7 @@
   align-items: var(--r-stepper-item--indicator--align-items, center);
   border-width: var(--r-stepper-item--indicator--border-width, 1px);
   border-style: var(--r-stepper-item--indicator--border-style, solid);
-  border-color: var(--r-stepper-item--indicator--border-color, var(--r-border-soft, #686868));
+  border-color: var(--r-stepper-item--indicator--border-color, var(--r-text-regular, #282828));
   margin-left: var(--r-stepper-item--indicator--margin-left, 8px);
   margin-right: var(--r-stepper-item--indicator--margin-right, 8px);
 }
@@ -44,6 +44,6 @@
 }
 .r-stepper-item--text {
   font-size: var(--r-stepper-item--text--font-size, var(--r-font-size-200, 13px));
-  color: var(--r-stepper-item--text--color, var(--r-text-soft, #686868));
+  color: var(--r-stepper-item--text--color, var(--r-text-regular, #282828));
   text-align: var(--r-stepper-item--text--text-align, center);
 }

package/dist/collection/components/tab/tab.css

@@ -6,42 +6,30 @@
 }
 
 :host(:hover:not([disabled]:not([disabled=false]))) {
-  --r-tab--color: var(--r-text-strong);
-  --r-tab--marker--height: 5px;
-  --r-tab--marker--background-color: var(--r-border-softer, #c9c9c9);
-  --r-tab--marker--visibility: visible;
+  --r-tab--background: var(--r-background-interactive-hovered, rgba(40, 40, 40, 0.04));
 }
 
 :host(:active:not([disabled]:not([disabled=false]))) {
-  --r-tab--background-color: var(--r-background-interactive-pressed, rgba(40,40,40,0.12));
+  --r-tab--background: var(--r-background-interactive-pressed, rgba(40,40,40,0.12));
 }
 
 :host(:focus-visible) {
-  --r-tab--marker--visibility: visible;
-  --r-tab--marker--height: 5px;
-  --r-tab--marker--background-color: var(--r-background-interactive-pressed, rgba(40,40,40,0.12));
-  --r-tab--slot--box-shadow: 0 0 0 6px var(--r-border-focused-outlined, #fff);
-  --r-tab--slot--outline: 2px solid var(--r-border-focused, #0071e3);
-  --r-tab--slot--outline-offset: 2px;
+  --r-tab--box-shadow: 0 0 0 6px var(--r-border-focused-outlined, #fff);
+  --r-tab--outline: 2px solid var(--r-border-focused, #0071e3);
+  --r-tab--outline-offset: 2px;
 }
 
 :host([active]:not([active=false])) {
   cursor: default;
   --r-tab--font-weight: var(--r-font-weight-semibold, 600);
-  --r-tab--color: var(--r-text-strong, #000);
-  --r-tab--padding-left: 0.5625rem;
-  --r-tab--padding-right: 0.5625rem;
-  --r-tab--marker--background-color: var(--r-border-regular, #282828);
   --r-tab--marker--visibility: visible;
-  --r-tab--marker--height: 3px;
 }
 
 :host([disabled]:not([disabled=false])) {
-  opacity: 0.4;
   cursor: not-allowed;
   --r-tab--pointer-events: none;
-  --r-tab--marker--visibility: hidden;
-  --r-tab--slot--box-shadow: none;
+  --r-tab--color: var(--r-text-soft, #686868);
+  --r-tab--marker--background-color: var(--r-border-soft, #686868) ;
 }
 
 .r-tab {
@@ -49,19 +37,26 @@
   font-family: var(--r-tab--font-family, var(--r-font-family-text, system-ui));
   font-weight: var(--r-tab--font-weight, var(--r-font-weight-regular, 400));
   font-size: var(--r-tab--font-size, var(--r-font-size-400, 1rem));
-  line-height: var(--r-tab--line-height, 1);
+  line-height: var(--r-tab--line-height, var(--r-line-height-m, 1.5));
   cursor: var(--r-tab--cursor, inherit);
   pointer-events: var(--r-tab--pointer-events, initial);
-  padding-top: var(--r-tab--padding-top, 0);
-  padding-right: var(--r-tab--padding-right, 0.625rem);
-  padding-bottom: var(--r-tab--padding-bottom, 1.25rem);
-  padding-left: var(--r-tab--padding-left, 0.625rem);
+  display: var(--r-tab--display, flex);
+  align-items: var(--r-tab--align-items, center);
+  justify-content: var(--r-tab--justify-content, center);
+  gap: var(--r-tab--gap, var(--r-spacing-050, 0.5rem));
+  width: var(--r-tab--width, auto);
+  padding-top: var(--r-tab--padding-top, var(--r-spacing-025, 0.25rem));
+  padding-right: var(--r-tab--padding-right, var(--r-spacing-050, 0.5rem));
+  padding-bottom: var(--r-tab--padding-bottom, var(--r-spacing-100, 1rem));
+  padding-left: var(--r-tab--padding-left, var(--r-spacing-050, 0.5rem));
+  margin-bottom: var(--r-tab--margin-bottom, -1px);
   opacity: var(--r-tab--opacity, 1);
   background: var(--r-tab--background, none);
   color: var(--r-tab--color, var(--r-text-regular, #282828));
   border: var(--r-tab--border, none);
   box-shadow: var(--r-tab--box-shadow, none);
   outline: var(--r-tab--outline, none);
+  outline-offset: var(--r-tab--outline-offset, 0);
 }
 .r-tab::after {
   content: var(--r-tab--marker--content, "");
@@ -71,11 +66,16 @@
   bottom: var(--r-tab--marker--bottom, 0);
   left: var(--r-tab--marker--left, 0);
   visibility: var(--r-tab--marker--visibility, hidden);
-  background-color: var(--r-tab--marker--background-color, rgba(0, 0, 0, 0));
+  background-color: var(--r-tab--marker--background-color, var(--r-border-regular, #282828));
   transition: var(--r-tab--marker--transition, all 0.1s ease-in);
 }
-.r-tab--slot {
-  box-shadow: var(--r-tab--slot--box-shadow, none);
-  outline: var(--r-tab--slot--outline, none);
-  outline-offset: var(--r-tab--slot--outline-offset, 0);
+.r-tab--disabled-icon,
+.r-tab ::slotted([slot=icon]) {
+  color: var(--r-tab--icon--color, var(--r-icon-soft, #686868));
+}
+
+@media (prefers-reduced-motion) {
+  .r-tab::after {
+    transition: none;
+  }
 }

package/dist/collection/components/tab/tab.js

@@ -22,6 +22,8 @@ export class RTab {
             if (this.disabled)
                 return;
             switch (event.code) {
+                case 'ArrowLeft':
+                case 'ArrowRight':
                 case 'Space':
                 case 'Home':
                 case 'End':
@@ -41,7 +43,9 @@ export class RTab {
             'aria-selected': `${active}`,
             'aria-disabled': `${disabled}`
         };
-        return (h(Host, Object.assign({ key: '04af619a56c41414b02e942d9d5bba11ef5eb1a0', onClick: this.handleClick, onKeyUp: this.handleKeyup, onKeyDown: this.handleKeydown }, hostAttrs), h("span", { key: 'e3fcc9b084de339aafcf98d8c5ca06f0e9615916', class: "r-tab" }, h("span", { key: 'bb52bf58758c2404a61b595706ecb3e3f71942ee', class: "r-tab--slot" }, h("slot", { key: '939a0e9618875e4909dbb763290f5f439122e312' })))));
+        return (h(Host, Object.assign({ key: '619d576a8efdfa1f941be9760312d7254a922f10', onClick: this.handleClick, onKeyUp: this.handleKeyup, onKeyDown: this.handleKeydown }, hostAttrs), h("span", { key: '15d69c67544bdb845df4b10411ff3e55fb5671a2', class: "r-tab" }, disabled ?
+            h("r-icon", { class: "r-tab--disabled-icon", size: "s", name: "circle-slash" })
+            : h("slot", { name: "icon" }), h("slot", { key: '59e5f0740a92f1cfeb71ab9709db2f2a13152fb4' }))));
     }
     static get is() { return "r-tab"; }
     static get encapsulation() { return "shadow"; }

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

@@ -12,7 +12,7 @@ export class RTabPanel {
             active,
             'aria-labelledby': tabId
         };
-        return (h(Host, Object.assign({ key: 'de50044bd0be5598615c2f84e66f5a552edb4ab9', class: "r-typography" }, hostAttrs), h("div", { key: 'e4db4fd5b115c96474f31d9d16881f496b8f4fd2', class: "r-tab-panel" }, h("slot", { key: 'd2ad80745f97933fb173f6ecd3635829d3c890ac' }))));
+        return (h(Host, Object.assign({ key: 'db95a245a8aa8900e1cea5af71ac488352954299', class: "r-typography" }, hostAttrs), h("div", { key: '0e720978d72a9d9ba9da367794ac96c49737d854', class: "r-tab-panel" }, h("slot", { key: 'f16a0da6c7d3d2c1e0c57778837bdb47879468b4' }))));
     }
     static get is() { return "r-tab-panel"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/tabs/tabs.js

@@ -180,23 +180,51 @@ export class RTabs {
         history.pushState({ tabId, tabsGroup }, '', url.toString());
     }
     _changeFocusTab(tab, keycode) {
-        var _a, _b, _c, _d;
         const tabs = Array.from(this.tabElements).filter(element => !element.disabled);
         const index = tabs.indexOf(tab);
+        let nextTab;
         switch (keycode) {
             case 'ArrowLeft':
-                index === 0 ? (_a = tabs[tabs.length - 1]) === null || _a === void 0 ? void 0 : _a.focus() : tabs[index - 1].focus();
+                nextTab = index === 0 ? tabs[tabs.length - 1] : tabs[index - 1];
                 break;
             case 'ArrowRight':
-                index === tabs.length - 1 ? (_b = tabs[0]) === null || _b === void 0 ? void 0 : _b.focus() : tabs[index + 1].focus();
+                nextTab = index === tabs.length - 1 ? tabs[0] : tabs[index + 1];
                 break;
             case 'Home':
-                (_c = tabs[0]) === null || _c === void 0 ? void 0 : _c.focus();
+                nextTab = tabs[0];
                 break;
             case 'End':
-                (_d = tabs[tabs.length - 1]) === null || _d === void 0 ? void 0 : _d.focus();
+                nextTab = tabs[tabs.length - 1];
                 break;
         }
+        if (nextTab) {
+            nextTab.focus();
+            this.scrollTabIntoView(nextTab);
+        }
+    }
+    scrollTabIntoView(tab) {
+        var _a;
+        const tabsList = this.host.querySelector('r-tabs-list');
+        if (!tabsList)
+            return;
+        const container = (_a = tabsList.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.r-tabs-list--tabs-container');
+        if (!container)
+            return;
+        const containerRect = container.getBoundingClientRect();
+        const tabRect = tab.getBoundingClientRect();
+        // Check if tab is fully visible
+        const isFullyVisible = tabRect.left >= containerRect.left - 1 &&
+            tabRect.right <= containerRect.right + 1;
+        if (isFullyVisible)
+            return;
+        // Calculate scroll offset to center the tab
+        const centerOffset = (tabRect.left - containerRect.left) -
+            (containerRect.width / 2) +
+            (tabRect.width / 2);
+        container.scrollBy({
+            left: centerOffset,
+            behavior: 'smooth'
+        });
     }
     /** Listen for "click" event on `<r-tab>` */
     tabChangeAction(event) {
@@ -233,7 +261,7 @@ export class RTabs {
         this._changeFocusTab(e.target, e.detail.keycode);
     }
     render() {
-        return (h(Host, { key: '4c86b16a8af456854579e7141ff2b3d2b60627e5', class: "r-tabs" }, h("slot", { key: '589b8ae9f3f51df095ed28b896714e1407fd9d87' })));
+        return (h(Host, { key: 'b058fd461951dad54e7eb73f7dc5df838c864ebd', class: "r-tabs" }, h("slot", { key: '8e93fded06f0f01dc326e8368aac200d36613753' })));
     }
     static get is() { return "r-tabs"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/tabs-list/exports.js

@@ -0,0 +1,2 @@
+export const TabListVariantArray = ['expanded', 'compact'];
+export const ActiveTabBorderArray = ['standard', 'branded'];