@riverty/web-components 5.8.0 → 6.1.0

package/dist/collection/components/select/select.js

@@ -9,19 +9,8 @@ import StyleObserver from "style-observer";
  */
 export class Select {
     constructor() {
-        /** Controls the visibility of validation indicators for the field. */
-        this.showValid = false;
         /** Define if select should render as a text item or a block */
         this.fullWidth = false;
-        /** _DEPRECATED_ (This property will be removed in November 2025 release. Use `leading slot` instead)
-         * Define size of an icon that serves as leading icon in select */
-        this.leadingIconSize = 's';
-        /** _DEPRECATED_ (This property will be removed in November 2025 release.)
-         * Defines the trailing icon defined by name for select, Default: 'andle-down' */
-        this.trailingIcon = 'angle-down';
-        /** _DEPRECATED_ (This property will be removed in November 2025 release.)
-         * Define size of an icon that serves as trailing icon in select */
-        this.tralingIconSize = 's';
         /** Define wether listbox appears on top or at the bottom of the select  */
         this.listboxPosition = 'bottom';
         /**
@@ -1025,11 +1014,8 @@ export class Select {
         var _a;
         return this.validityState !== 'valid' && ((_a = this.validityMessage) === null || _a === void 0 ? void 0 : _a.length) > 0;
     }
-    get hasValidationSuccess() {
-        return this.valid && this.validMessage && this.showValid;
-    }
     get hasMessage() {
-        return this.hasError || this.hasValidationError || this.hasValidationSuccess;
+        return this.hasError || this.hasValidationError;
     }
     get isInteractive() {
         return !this.disabled && !this.isReadonly;
@@ -1064,14 +1050,10 @@ export class Select {
     }
     render() {
         var _a;
-        const { uniqueId, disabled, isExpanded, fieldIndicator, invalid, placeholder, required, hint, label, internal, tooltip, tooltipIcon, tooltipIconColor } = this;
-        // DEPRECATED: will be removed in November 2025 release.
-        const tooltipAttrs = tooltip && !disabled ? {
-            tooltip,
-            'tooltip-icon': tooltipIcon,
-            'tooltip-icon-color': tooltipIconColor,
+        const { uniqueId, disabled, isExpanded, fieldIndicator, invalid, placeholder, required, hint, label, internal } = this;
+        const labelAttr = label ? {
+            fieldIndicator
         } : {};
-        const labelAttr = label ? Object.assign({ fieldIndicator }, tooltipAttrs) : {};
         const isRequired = this.isInteractive ? !!required : false;
         const comboboxAttrs = {
             id: `${uniqueId}-value`,
@@ -1098,8 +1080,8 @@ export class Select {
             disabled,
             required: isRequired
         };
-        return (h(Host, { key: '9c22bae93d955802f695b20f25d3ff5c79fcc7d8', "data-value": this.currentValue, expanded: !this.disabled && this.isExpanded, "data-listbox-position": this.listboxPositionState, "data-initial-value": this.initial['value'], "data-is-placeholder": `${!!this.isPlaceholder}`, "data-value-focused": `${!!this.isValueFocused}`, "data-option-focused": `${!!this.focusedOption}`, "data-validity-state": `${this.validityState || ''}`, "data-validity-message": `${this.validityMessage || ''}`, "data-readonly": `${!!this.isReadonly}`, "data-touched": `${this.touched}`, "data-dirty": `${this.dirty}` }, h("div", { key: '2e8de0d2041d00c4d90caf5aba2aeb50fcfc86e5', class: `r-select--label ${!internal ? 'r-select--label__margin-bottom' : ''}` }, h("div", { key: '273524030b099899861c93e9bba205c6c820d425', class: internal ? 'visually-hidden' : 'r-select--label-container' }, h("label", { key: 'f050500698aa5a48d6db101074129fae09899de3', id: `${uniqueId}-label`, onClick: this.isInteractive ? this.onValueClick : null }, h("r-label", Object.assign({ key: 'b5560ba5b8ee794eb775a555dec514f4d6e6546f' }, labelAttr), label)), h("slot", { key: 'bbbbe371702b95ac3d1636756eb673dc44c0dcb4', name: "popover" })), hint &&
-            h("r-hint", { key: '27585bacce2143f20bdb20a3e03b5700dbb87d9b', id: `${uniqueId}-hint`, class: "r-select--hint" }, hint)), h("div", { key: '92a69fbee0890d5ddab0353348cdb4d8eb772137', class: "r-select" }, h("select", Object.assign({ key: 'bc2de60d73dcebf750a99e7b88eacc701a8c0b85', class: "r-select--native", ref: el => this.nativeElement = el }, nativeAttrs)), h("div", { key: 'b561dee21bdf58abe51786564a18812a20a0e97f', class: "r-select--container" }, this.combobox ? this.renderCombobox(comboboxAttrs) : this.renderSelect(comboboxAttrs), h("div", Object.assign({ key: '06984ccf7f6740e2480ef61924676e99d40044d4', role: "listbox", tabindex: "-1", id: `${uniqueId}-list`, class: "r-select--options", ref: el => this.listboxElement = el }, listboxAttrs), (this.isNoResultsFound || !((_a = this.optionElements) === null || _a === void 0 ? void 0 : _a.length)) && h("r-select-option", { key: '67888a456006e44869081876d35cdceca754942d', "data-no-results": "true", value: "no_results" }, this.noResultsFound), h("slot", { key: '4f404790887ad37d488183d814bb69f33c262688', onSlotchange: this.handleSlotChange })))), h("div", { key: '0b223f242cfc90ce38a0cf83d38dc0c81348b36d', id: `${uniqueId}-message`, "aria-live": "polite", "aria-atomic": "true", ref: (el) => this.messageContainer = el, class: this.hasMessage && !internal ? 'r-select--message' : 'visually-hidden' }, this.hasMessage && h("r-hint", { key: '57336df2dd79b8f91be950f7a4ca05258ec26184', variant: this.invalid ? 'error' : 'success' }, this.hasError && this.error, this.hasValidationError && this.validityMessage, this.hasValidationSuccess && this.validMessage))));
+        return (h(Host, { key: '7f1fb8ee95b7da1cd7aad0d212d1efa9da744dc2', "data-value": this.currentValue, expanded: !this.disabled && this.isExpanded, "data-listbox-position": this.listboxPositionState, "data-initial-value": this.initial['value'], "data-is-placeholder": `${!!this.isPlaceholder}`, "data-value-focused": `${!!this.isValueFocused}`, "data-option-focused": `${!!this.focusedOption}`, "data-validity-state": `${this.validityState || ''}`, "data-validity-message": `${this.validityMessage || ''}`, "data-readonly": `${!!this.isReadonly}`, "data-touched": `${this.touched}`, "data-dirty": `${this.dirty}` }, h("div", { key: 'cb2a21da12f1f1c0dc298f42338d32b709f62375', class: `r-select--label ${!internal ? 'r-select--label__margin-bottom' : ''}` }, h("div", { key: 'd293ba41b9846d24ba4a2c44fb8fcb9895637c03', class: internal ? 'visually-hidden' : 'r-select--label-container' }, h("label", { key: 'b562d22174f435deed545a94d0fd7ce0233ba3de', id: `${uniqueId}-label`, onClick: this.isInteractive ? this.onValueClick : null }, h("r-label", Object.assign({ key: '2412f39f04b62a1fac018b588fb463efc9760ae0' }, labelAttr), label)), h("slot", { key: '99c5c78534118199fc1e99daac2737b78d55bc28', name: "popover" })), hint &&
+            h("r-hint", { key: '74f3cf98c25ba600e8faf8a1793d56ab14c01466', id: `${uniqueId}-hint`, class: "r-select--hint" }, hint)), h("div", { key: '1960780639c8896bc52d1b62269d9453645132ef', class: "r-select" }, h("select", Object.assign({ key: '2b9d75c37066bfeb8e06b4097ecc73bd96358702', class: "r-select--native", ref: el => this.nativeElement = el }, nativeAttrs)), h("div", { key: '3eff5f8f263a013e0ba7ba64eace1da6167b6d1f', class: "r-select--container" }, this.combobox ? this.renderCombobox(comboboxAttrs) : this.renderSelect(comboboxAttrs), h("div", Object.assign({ key: 'bbfb28e905d17feee0bd2693faac327d8ef97894', role: "listbox", tabindex: "-1", id: `${uniqueId}-list`, class: "r-select--options", ref: el => this.listboxElement = el }, listboxAttrs), (this.isNoResultsFound || !((_a = this.optionElements) === null || _a === void 0 ? void 0 : _a.length)) && h("r-select-option", { key: '319993c58f2133c271c2db357d22132497751958', "data-no-results": "true", value: "no_results" }, this.noResultsFound), h("slot", { key: 'bbb21659679bb22e3aeb9471a34e3e007ab835d8', onSlotchange: this.handleSlotChange })))), h("div", { key: '5971e5c4f3bbb453dcae9f3ecbdf2c2f14cf0293', id: `${uniqueId}-message`, "aria-live": "polite", "aria-atomic": "true", ref: (el) => this.messageContainer = el, class: this.hasMessage && !internal ? 'r-select--message' : 'visually-hidden' }, this.hasMessage && h("r-hint", { key: '1c1aba3c4f3baa93cd6ecab59dd40d99ad5bd0b2', variant: this.invalid ? 'error' : 'success' }, this.hasError && this.error, this.hasValidationError && this.validityMessage))));
     }
     static get is() { return "r-select"; }
     static get encapsulation() { return "shadow"; }
@@ -1229,69 +1211,6 @@ export class Select {
                 "setter": false,
                 "reflect": true
             },
-            "tooltip": {
-                "type": "string",
-                "attribute": "tooltip",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "_DEPRECATED_ (Use popover slot instead. This property will be removed in November 2025 release.)\nLabel tooltip text"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": true
-            },
-            "tooltipIcon": {
-                "type": "string",
-                "attribute": "tooltip-icon",
-                "mutable": false,
-                "complexType": {
-                    "original": "IconName",
-                    "resolved": "string",
-                    "references": {
-                        "IconName": {
-                            "location": "import",
-                            "path": "../icon/exports",
-                            "id": "src/components/icon/exports.ts::IconName"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "_DEPRECATED_ (Use popover slot instead. This property will be removed in November 2025 release.)\nLabel tooltip trigger icon"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false
-            },
-            "tooltipIconColor": {
-                "type": "string",
-                "attribute": "tooltip-icon-color",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "_DEPRECATED_ (Use popover slot instead. This property will be removed in November 2025 release.)\nChange color of an icon that triggers tooltip to one of the Riverty color tokens."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false
-            },
             "placeholder": {
                 "type": "string",
                 "attribute": "placeholder",
@@ -1349,31 +1268,6 @@ export class Select {
                 "setter": false,
                 "reflect": true
             },
-            "disabledIcon": {
-                "type": "string",
-                "attribute": "disabled-icon",
-                "mutable": false,
-                "complexType": {
-                    "original": "IconName",
-                    "resolved": "string",
-                    "references": {
-                        "IconName": {
-                            "location": "import",
-                            "path": "../icon/exports",
-                            "id": "src/components/icon/exports.ts::IconName"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "_DEPRECATED_ (This property will be removed in November 2025 release.)\nDefines the trailing icon for select in disabled state"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false
-            },
             "required": {
                 "type": "boolean",
                 "attribute": "required",
@@ -1412,64 +1306,6 @@ export class Select {
                 "setter": false,
                 "reflect": true
             },
-            "optional": {
-                "type": "boolean",
-                "attribute": "optional",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "_DEPRECATED_ (This property will be removed in November 2025 release. Use `fieldIndicator` instead) Marks the field as optional"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false
-            },
-            "optionalText": {
-                "type": "string",
-                "attribute": "optional-text",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "_DEPRECATED_ (This property will be removed in November 2025 release. Use `fieldIndicator` instead)\nDefine the optional marker text if the field is marked as optional"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": true
-            },
-            "showValid": {
-                "type": "boolean",
-                "attribute": "show-valid",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Controls the visibility of validation indicators for the field."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "defaultValue": "false"
-            },
             "valid": {
                 "type": "boolean",
                 "attribute": "valid",
@@ -1547,147 +1383,6 @@ export class Select {
                 "reflect": true,
                 "defaultValue": "false"
             },
-            "leadingIcon": {
-                "type": "string",
-                "attribute": "leading-icon",
-                "mutable": false,
-                "complexType": {
-                    "original": "IconName",
-                    "resolved": "string",
-                    "references": {
-                        "IconName": {
-                            "location": "import",
-                            "path": "../icon/exports",
-                            "id": "src/components/icon/exports.ts::IconName"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "_DEPRECATED_ (This property will be removed in November 2025 release. Use `leading slot` instead)\nAdds an icon defined by name that serves as leading icon in select"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false
-            },
-            "leadingIconSrc": {
-                "type": "string",
-                "attribute": "leading-icon-src",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "_DEPRECATED_ (This property will be removed in November 2025 release. Use `leading slot` instead)\nAdds an icon defined by file source that serves as leading icon in select"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false
-            },
-            "leadingIconSize": {
-                "type": "string",
-                "attribute": "leading-icon-size",
-                "mutable": false,
-                "complexType": {
-                    "original": "IconSize",
-                    "resolved": "\"l\" | \"m\" | \"s\"",
-                    "references": {
-                        "IconSize": {
-                            "location": "import",
-                            "path": "../icon/exports",
-                            "id": "src/components/icon/exports.ts::IconSize"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "_DEPRECATED_ (This property will be removed in November 2025 release. Use `leading slot` instead)\nDefine size of an icon that serves as leading icon in select"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "defaultValue": "'s'"
-            },
-            "trailingIcon": {
-                "type": "string",
-                "attribute": "trailing-icon",
-                "mutable": false,
-                "complexType": {
-                    "original": "IconName",
-                    "resolved": "string",
-                    "references": {
-                        "IconName": {
-                            "location": "import",
-                            "path": "../icon/exports",
-                            "id": "src/components/icon/exports.ts::IconName"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "_DEPRECATED_ (This property will be removed in November 2025 release.)\nDefines the trailing icon defined by name for select, Default: 'andle-down'"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "defaultValue": "'angle-down'"
-            },
-            "trailingIconSrc": {
-                "type": "string",
-                "attribute": "trailing-icon-src",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "_DEPRECATED_ (This property will be removed in November 2025 release.)\nDefines the trailing icon defined by source for select"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false
-            },
-            "tralingIconSize": {
-                "type": "string",
-                "attribute": "traling-icon-size",
-                "mutable": false,
-                "complexType": {
-                    "original": "IconSize",
-                    "resolved": "\"l\" | \"m\" | \"s\"",
-                    "references": {
-                        "IconSize": {
-                            "location": "import",
-                            "path": "../icon/exports",
-                            "id": "src/components/icon/exports.ts::IconSize"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "_DEPRECATED_ (This property will be removed in November 2025 release.)\nDefine size of an icon that serves as trailing icon in select"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "defaultValue": "'s'"
-            },
             "listboxPosition": {
                 "type": "string",
                 "attribute": "listbox-position",
@@ -1714,25 +1409,6 @@ export class Select {
                 "reflect": false,
                 "defaultValue": "'bottom'"
             },
-            "validMessage": {
-                "type": "string",
-                "attribute": "valid-message",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "_DEPRECATED_ (This property will be removed in November 2025 release.)\nSet custom message if the element meets all its validation constraints."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": true
-            },
             "valueMissingMessage": {
                 "type": "string",
                 "attribute": "value-missing-message",

package/dist/collection/components/select-option/select-option.js

@@ -128,7 +128,7 @@ export class SelectOption {
             size: iconSize,
             color: iconColor
         };
-        return (h(Host, { key: '1f3440961f3c606f5b2b1eef77ae3c53fc1ea4a0', id: uniqueId, role: "option", onClick: this.handleClick, onKeydown: this.handleKeydown, "aria-disabled": `${disabled}`, "aria-selected": `${this.isSelected}`, "data-value": this.definedValue, "data-focused": `${this.isFocused}` }, h("div", { key: '9a29dd16478d39c905f8cb54ca603e6982c3a24e', class: "r-select-option" }, icon && h("span", { key: 'fdcecb70781424749e0527f06eff5140a8a79ccc', class: "r-select-option--icon" }, h("r-icon", Object.assign({ key: '5a1906d39a27bc70729d26e93fd8f0d77e80e972' }, iconAttributes))), !icon && hasIconSlot && h("span", { key: '572b0e90b5695e0233505f28fb7c9b3dbc90a73f', class: "r-select-option--icon" }, h("slot", { key: 'bc04c317491e690281b0f4442aaff3f86a5ddb12', name: "icon" })), h("span", { key: '77bf634b415a36d8463212918cf200fda8647f85', class: "r-select-option--label" }, h("slot", { key: '83dd97fa580d18f4a9e27beca4835adf6c746240' })))));
+        return (h(Host, { key: 'd059d75cec11ef39ddea8c4ddc9ce8bc9d1a57e7', id: uniqueId, role: "option", onClick: this.handleClick, onKeydown: this.handleKeydown, "aria-disabled": `${disabled}`, "aria-selected": `${this.isSelected}`, "data-value": this.definedValue, "data-focused": `${this.isFocused}` }, h("div", { key: '70fa5c2fc9194d197b4124b6afad296d2849032c', class: "r-select-option" }, icon && h("span", { key: '07bdfeb2d8330c989e6b59c34ee85cac029135cb', class: "r-select-option--icon" }, h("r-icon", Object.assign({ key: '358748199ca580e8a9d397ed4f5642a722703441' }, iconAttributes))), !icon && hasIconSlot && h("span", { key: '60a4e6059188b27d0fbe6e9b0134882cea803d90', class: "r-select-option--icon" }, h("slot", { key: '08b11beec2c086b21ab92ad6cab080bae1cd0eac', name: "icon" })), h("span", { key: '4397696c7b8ec172098d9bd82e0c89c55781bb91', class: "r-select-option--label" }, h("slot", { key: 'b9dddec8b9c455f130ed38577c9321cb6aced0dd' })))));
     }
     static get is() { return "r-select-option"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/skip-link/skip-link.js

@@ -5,7 +5,7 @@ export class SkipLink {
         this.position = 'center';
     }
     render() {
-        return (h(Host, { key: '7ca2f29a347197be2951841e6b59807360e76f9d' }, h("slot", { key: '6d26f29f7dbec9d60e302de3cbbf0d8d2afd3009' })));
+        return (h(Host, { key: '5097cfa89ded56bcfb98dc24ca0b1e42c389e4ae' }, h("slot", { key: 'bba803efc4b82b0612e270665d5f80b740a786f1' })));
     }
     static get is() { return "r-skip-link"; }
     static get encapsulation() { return "shadow"; }

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/stepper.js

@@ -11,7 +11,7 @@ export class Stepper {
     }
     render() {
         const completed = this.completed || this.completeSteps;
-        return (h(Host, { key: 'd501495c36f83cfc14c706f46936d5acc925d6d2' }, h("div", { key: 'a2952de15ea74093ea41663438bc8fec866d428b', class: "r-stepper" }, !this.hasSteps && Array.from({ length: this.total }, (_, index) => (h("r-stepper-item", { number: index + 1, complete: completed > index, active: completed === index, key: index }))), h("slot", { key: '4834a5947ae40241607131dcbb3dfa56354fdc13' }))));
+        return (h(Host, { key: '196ddb8922499f7222418d19cd6ddc994c211119' }, h("div", { key: '2220fcb8ec2125a15db198ec7948780d8d331e50', class: "r-stepper" }, !this.hasSteps && Array.from({ length: this.total }, (_, index) => (h("r-stepper-item", { number: index + 1, complete: completed > index, active: completed === index, key: index }))), h("slot", { key: '69c7eb87d53b67b19efc6da0ab489debc7e6b06c' }))));
     }
     static get is() { return "r-stepper"; }
     static get encapsulation() { return "shadow"; }

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/stepper-item/stepper-item.js

@@ -11,8 +11,8 @@ export class StepperItem {
     }
     render() {
         const number = this.number || this.stepNumber;
-        return (h(Host, { key: 'a5004ade661b4abfacb920a256f6a12bbd32a6ea' }, h("div", { key: '1358044cc918c2988a2f32198b0a8260cf439ec0', class: "r-stepper-item" }, h("div", { key: 'ec2afea7c0b6d603ebce7dda25e93246fafb248a', class: "r-stepper-item--indicator" }, this.complete ? (h("r-icon", { name: "check", size: "s" })) : this.icon ? (h("r-icon", { name: this.icon, size: "s" })) : number !== undefined ? (h("span", { class: "r-stepper-item--indicator--step-number" }, number)) : null), this.hasText &&
-            h("div", { key: '6cf7607d13bdd0bd58885e5cc4c74c0068448dfc', class: "r-stepper-item--text" }, h("slot", { key: '8c47f057e435924f8c004be5f3112743127bf885' })))));
+        return (h(Host, { key: '3613c92e8ac7583bf5e3db7e90edca9a921fa475' }, h("div", { key: 'ca2c38443d9a855baea829e99ec9c642c279a3be', class: "r-stepper-item" }, h("div", { key: '513f01a9a3ac3a87c3622b14f051765121308241', class: "r-stepper-item--indicator" }, this.complete ? (h("r-icon", { name: "check", size: "s" })) : this.icon ? (h("r-icon", { name: this.icon, size: "s" })) : number !== undefined ? (h("span", { class: "r-stepper-item--indicator--step-number" }, number)) : null), this.hasText &&
+            h("div", { key: 'cec8659e5ff31608b05c6f62798a8a1048cd7539', class: "r-stepper-item--text" }, h("slot", { key: '6a9d581948decc8a15e66401275cb85bf52bb459' })))));
     }
     static get is() { return "r-stepper-item"; }
     static get encapsulation() { return "shadow"; }

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: '2e2b2d84376e097c80a84a1e7224c0f026c16277', onClick: this.handleClick, onKeyUp: this.handleKeyup, onKeyDown: this.handleKeydown }, hostAttrs), h("span", { key: 'c38098d413b17ba8b8ddd3436687879d1b37114f', class: "r-tab" }, h("span", { key: '3f7bfedd8a933da7ec52f34dd64f3a4e862cb836', class: "r-tab--slot" }, h("slot", { key: 'bc056a0d06188ddd1b47c3c062a4d51367e48393' })))));
+        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: '042aba1f5eebeafdff7035d8ad5afc9ec204eb8a', class: "r-typography" }, hostAttrs), h("div", { key: '0e9c72a859b07c1e4c2cb4a5d936fbadc07f23ca', class: "r-tab-panel" }, h("slot", { key: '2d588c5c67cfd26d7762a2be0c8400faa12a96c8' }))));
+        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"; }