@boostdev/design-system-components 2.15.0 → 2.17.0

package/dist/client.css

@@ -1,10 +1,10 @@
 /* src/css/bdc.css */
 @property --bdc_color { syntax: "<color>"; inherits: false; initial-value: currentcolor; }
-@property --bdc-outline_width { syntax: "<length>"; inherits: false; initial-value: 1px; }
+@property --bdc-outline_width { syntax: "<length>"; inherits: true; initial-value: 1px; }
 @property --bdc-outline_offset { syntax: "<length>"; inherits: false; initial-value: -1px; }
 @property --bdc-outline_radius { syntax: "<length-percentage>"; inherits: false; initial-value: 0; }
 @property --bdc-outline_shadow { syntax: "*"; inherits: false; initial-value: 0 0 0 0 transparent; }
-@layer boostdev.component {
+@layer boostdev.tokens.semantic {
   :root {
     --bdc-outline_border: none;
     --bdc_color: currentcolor;
@@ -17,6 +17,7 @@
     --bdc-color_active--strong: var(--bds-color_interactive_on-bg);
     --bdc-color_on-active--strong: var(--bds-color_on-blue--strong);
     --bdc-outline_width: 1px;
+    --bdc-outline_width--error: 2px;
     --bdc-outline_offset: -1px;
     --bdc-outline_radius: var(--bds-border_radius--xs);
     --bdc-outline_radius--l: 1.5em;
@@ -27,8 +28,8 @@
 }
 
 /* src/components/ui/Accordion/Accordion.module.css */
-@layer boostdev.bds2150Accordion-component {
-  .bds2150Accordion-accordion {
+@layer boostdev.bds2170Accordion-component {
+  .bds2170Accordion-accordion {
     display: flex;
     flex-direction: column;
     border: var(--accordion_border, none);
@@ -38,16 +39,16 @@
     box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--accordion_shadow, var(--bdc-outline_shadow));
     overflow: hidden;
   }
-  .bds2150Accordion-item {
+  .bds2170Accordion-item {
     border-block-end: 1px solid var(--accordion_divider-color, var(--bds-color_on-bg--as-surface, var(--bds-color_on-bg--border, var(--bds-color_bg--subtle))));
   }
-  .bds2150Accordion-item:last-child {
+  .bds2170Accordion-item:last-child {
     border-block-end: none;
   }
-  .bds2150Accordion-heading {
+  .bds2170Accordion-heading {
     margin: 0;
   }
-  .bds2150Accordion-trigger {
+  .bds2170Accordion-trigger {
     all: unset;
     display: flex;
     align-items: center;
@@ -62,52 +63,52 @@
     transition: var(--bds-animation_transition);
     box-sizing: border-box;
   }
-  .bds2150Accordion-trigger:disabled {
+  .bds2170Accordion-trigger:disabled {
     opacity: 0.4;
     cursor: not-allowed;
   }
-  .bds2150Accordion-trigger:focus-visible {
+  .bds2170Accordion-trigger:focus-visible {
     outline: var(--bds-outline_default);
     outline-offset: calc(var(--bds-outline_offset) * -1);
     border-radius: var(--bds-border_radius--xs);
   }
   @media (hover: hover) and (pointer: fine) {
-    .bds2150Accordion-trigger:not(:disabled):hover {
+    .bds2170Accordion-trigger:not(:disabled):hover {
       background-color: var(--accordion_trigger-bg--hover, var(--bds-color_bg--subtle));
     }
   }
-  .bds2150Accordion-triggerLabel {
+  .bds2170Accordion-triggerLabel {
     flex: 1;
     text-align: start;
   }
-  .bds2150Accordion-chevron {
+  .bds2170Accordion-chevron {
     inline-size: 1.25rem;
     block-size: 1.25rem;
     flex-shrink: 0;
     transition: transform var(--bds-animation_transition-duration) var(--bds-animation_easing);
   }
-  .bds2150Accordion-item.bds2150Accordion---open .bds2150Accordion-chevron {
+  .bds2170Accordion-item.bds2170Accordion---open .bds2170Accordion-chevron {
     transform: rotate(180deg);
   }
-  .bds2150Accordion-panel {
+  .bds2170Accordion-panel {
     overflow: hidden;
   }
-  .bds2150Accordion-panelContent {
+  .bds2170Accordion-panelContent {
     padding: 0 var(--bds-space_m) var(--bds-space_m);
     color: var(--bds-color_on-bg);
     font-size: var(--bds-font_size--body);
     line-height: var(--bds-font_line-height--body);
   }
   @media (prefers-reduced-motion: reduce) {
-    .bds2150Accordion-chevron {
+    .bds2170Accordion-chevron {
       transition: none;
     }
   }
 }
 
 /* src/components/ui/Alert/Alert.module.css */
-@layer boostdev.bds2150Alert-component {
-  .bds2150Alert-alert {
+@layer boostdev.bds2170Alert-component {
+  .bds2170Alert-alert {
     display: flex;
     align-items: flex-start;
     gap: var(--bds-space_s);
@@ -115,47 +116,65 @@
     border-radius: var(--alert_radius, var(--bds-border_radius--s));
     background-color: var(--alert_bg, var(--alert_bg--variant, var(--bds-color_blue--subtle)));
     color: var(--alert_text, var(--alert_text--variant, var(--bds-color_on-blue--subtle)));
-    border-inline-start: var(--bds-space_s) solid var(--alert_border, var(--alert_border--variant, var(--bds-color_blue)));
+    border-inline-start: var(--alert_border-width, var(--alert_border-width--variant, var(--bds-space_s))) solid var(--alert_border, var(--alert_border--variant, var(--bds-color_blue)));
     font-size: var(--bds-font_size--body);
     line-height: var(--bds-font_line-height--body);
+    --alert_border-width--variant: initial;
   }
-  .bds2150Alert---variant_info {
+  .bds2170Alert---variant_info {
     --alert_bg--variant: var(--alert_bg--info, var(--bds-color_blue--subtle));
     --alert_text--variant: var(--alert_text--info, var(--bds-color_on-blue--subtle));
     --alert_border--variant: var(--alert_border--info, var(--bds-color_blue));
   }
-  .bds2150Alert---variant_success {
+  .bds2170Alert---variant_success {
     --alert_bg--variant: var(--alert_bg--success, var(--bds-color_success--subtle));
     --alert_text--variant: var(--alert_text--success, var(--bds-color_on-success--subtle));
     --alert_border--variant: var(--alert_border--success, var(--bds-color_success));
   }
-  .bds2150Alert---variant_warning {
+  .bds2170Alert---variant_warning {
     --alert_bg--variant: var(--alert_bg--warning, var(--bds-color_orange--subtle));
     --alert_text--variant: var(--alert_text--warning, var(--bds-color_on-orange--subtle));
     --alert_border--variant: var(--alert_border--warning, var(--bds-color_warning));
   }
-  .bds2150Alert---variant_error {
-    --alert_bg--variant: var(--alert_bg--error, rgb(from var(--bds-color_error) r g b / 12%));
-    --alert_text--variant: var(--alert_text--error, var(--bds-color_on-bg));
+  .bds2170Alert---variant_error {
+    --alert_bg--variant: var(--alert_bg--error, var(--bds-color_error--subtle));
+    --alert_text--variant: var(--alert_text--error, var(--bds-color_on-error--subtle));
     --alert_border--variant: var(--alert_border--error, var(--bds-color_error));
   }
-  .bds2150Alert-icon {
+  .bds2170Alert---appearance_gradient {
+    --alert_border-width--variant: 3px;
+    background-image: var(--alert_gradient, linear-gradient(100deg, transparent 35%, var(--bds-color_bg--strong, var(--bds-color_bg)) 100%));
+    box-shadow: var(--alert_shadow, var(--bds-shadow_s));
+  }
+  .bds2170Alert---appearance_gradient.bds2170Alert---variant_info {
+    --alert_border--variant: var(--alert_border--info, var(--alert_accent--info, var(--bds-color_on-blue--subtle)));
+  }
+  .bds2170Alert---appearance_gradient.bds2170Alert---variant_success {
+    --alert_border--variant: var(--alert_border--success, var(--alert_accent--success, var(--bds-color_on-success--subtle)));
+  }
+  .bds2170Alert---appearance_gradient.bds2170Alert---variant_warning {
+    --alert_border--variant: var(--alert_border--warning, var(--alert_accent--warning, var(--bds-color_warning)));
+  }
+  .bds2170Alert---appearance_gradient.bds2170Alert---variant_error {
+    --alert_border--variant: var(--alert_border--error, var(--alert_accent--error, var(--bds-color_error)));
+  }
+  .bds2170Alert-icon {
     display: flex;
     align-items: center;
     flex-shrink: 0;
     margin-block-start: 0.1em;
   }
-  .bds2150Alert-content {
+  .bds2170Alert-content {
     flex: 1;
     display: flex;
     flex-direction: column;
     gap: var(--bds-space_xxs);
   }
-  .bds2150Alert-title {
+  .bds2170Alert-title {
     font-weight: var(--bds-font_weight--semibold);
     font-size: var(--bds-font_size--body);
   }
-  .bds2150Alert-dismiss {
+  .bds2170Alert-dismiss {
     all: unset;
     display: flex;
     align-items: center;
@@ -171,24 +190,24 @@
     min-block-size: var(--alert_dismiss-size, 2.75rem);
     box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--alert_dismiss-shadow, var(--bdc-outline_shadow));
   }
-  .bds2150Alert-dismiss svg {
+  .bds2170Alert-dismiss svg {
     inline-size: 1rem;
     block-size: 1rem;
   }
-  .bds2150Alert-dismiss:focus-visible {
+  .bds2170Alert-dismiss:focus-visible {
     outline: var(--bds-outline_default);
     outline-offset: var(--bds-outline_offset);
   }
   @media (hover: hover) and (pointer: fine) {
-    .bds2150Alert-dismiss:hover {
+    .bds2170Alert-dismiss:hover {
       opacity: var(--alert_dismiss-opacity--hover, 0.7);
     }
   }
 }
 
 /* src/components/ui/Avatar/Avatar.module.css */
-@layer boostdev.bds2150Avatar-component {
-  .bds2150Avatar-avatar {
+@layer boostdev.bds2170Avatar-component {
+  .bds2170Avatar-avatar {
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -198,42 +217,62 @@
     border-radius: var(--avatar_radius, var(--bds-border_radius--circle));
     overflow: hidden;
   }
-  .bds2150Avatar-avatar.bds2150Avatar---fallback {
-    background-color: var(--avatar_bg, var(--bds-color_blue));
-    color: var(--avatar_text, var(--bds-color_on-blue));
+  .bds2170Avatar-avatar.bds2170Avatar---fallback {
+    background-color: var(--avatar_bg, var(--avatar_bg--variant));
+    color: var(--avatar_text, var(--avatar_text--variant));
     font-weight: var(--bds-font_weight--semibold);
   }
-  .bds2150Avatar-avatar.bds2150Avatar---size_small {
+  .bds2170Avatar-avatar.bds2170Avatar---tone_primary {
+    --avatar_bg--variant: var(--avatar_bg--primary, var(--bds-color_primary--subtle, var(--bds-color_blue--subtle)));
+    --avatar_text--variant: var(--avatar_text--primary, var(--bds-color_on-primary--subtle, var(--bds-color_on-blue--subtle)));
+  }
+  .bds2170Avatar-avatar.bds2170Avatar---tone_secondary {
+    --avatar_bg--variant: var(--avatar_bg--secondary, var(--bds-color_secondary--subtle, var(--bds-color_blue--subtle)));
+    --avatar_text--variant: var(--avatar_text--secondary, var(--bds-color_on-secondary--subtle, var(--bds-color_on-blue--subtle)));
+  }
+  .bds2170Avatar-avatar.bds2170Avatar---tone_accent-1 {
+    --avatar_bg--variant: var(--avatar_bg--accent-1, var(--bds-color_accent-1--subtle, var(--bds-color_green--subtle)));
+    --avatar_text--variant: var(--avatar_text--accent-1, var(--bds-color_on-accent-1--subtle, var(--bds-color_on-green--subtle)));
+  }
+  .bds2170Avatar-avatar.bds2170Avatar---tone_accent-2 {
+    --avatar_bg--variant: var(--avatar_bg--accent-2, var(--bds-color_accent-2--subtle, var(--bds-color_orange--subtle)));
+    --avatar_text--variant: var(--avatar_text--accent-2, var(--bds-color_on-accent-2--subtle, var(--bds-color_on-orange--subtle)));
+  }
+  .bds2170Avatar-avatar.bds2170Avatar---tone_accent-3 {
+    --avatar_bg--variant: var(--avatar_bg--accent-3, var(--bds-color_accent-3--subtle, var(--bds-color_blue--subtle)));
+    --avatar_text--variant: var(--avatar_text--accent-3, var(--bds-color_on-accent-3--subtle, var(--bds-color_on-blue--subtle)));
+  }
+  .bds2170Avatar-avatar.bds2170Avatar---size_small {
     --avatar_size--variant: 2em;
   }
-  .bds2150Avatar-avatar.bds2150Avatar---size_medium {
+  .bds2170Avatar-avatar.bds2170Avatar---size_medium {
     --avatar_size--variant: 3em;
   }
-  .bds2150Avatar-avatar.bds2150Avatar---size_large {
+  .bds2170Avatar-avatar.bds2170Avatar---size_large {
     --avatar_size--variant: 4.5em;
   }
-  .bds2150Avatar-image {
+  .bds2170Avatar-image {
     inline-size: 100%;
     block-size: 100%;
     object-fit: cover;
     display: block;
   }
-  .bds2150Avatar-initials {
+  .bds2170Avatar-initials {
     line-height: 1;
     user-select: none;
     font-size: var(--bds-font_size--body);
   }
-  .bds2150Avatar-avatar.bds2150Avatar---size_small .bds2150Avatar-initials {
+  .bds2170Avatar-avatar.bds2170Avatar---size_small .bds2170Avatar-initials {
     font-size: var(--bds-font_size--body--s);
   }
-  .bds2150Avatar-avatar.bds2150Avatar---size_large .bds2150Avatar-initials {
+  .bds2170Avatar-avatar.bds2170Avatar---size_large .bds2170Avatar-initials {
     font-size: var(--bds-font_size--heading-3);
   }
 }
 
 /* src/components/ui/Badge/Badge.module.css */
-@layer boostdev.bds2150Badge-component {
-  .bds2150Badge-badge {
+@layer boostdev.bds2170Badge-component {
+  .bds2170Badge-badge {
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -246,34 +285,34 @@
     background-color: var(--badge_bg, var(--badge_bg--variant, var(--bds-color_blue)));
     color: var(--badge_text, var(--badge_text--variant, var(--bds-color_on-blue)));
   }
-  .bds2150Badge---variant_primary {
+  .bds2170Badge---variant_primary {
     --badge_bg--variant: var(--badge_bg--primary, var(--bds-color_interactive));
     --badge_text--variant: var(--badge_text--primary, var(--bds-color_on-interactive));
   }
-  .bds2150Badge---variant_secondary {
-    --badge_bg--variant: var(--badge_bg--secondary, var(--bds-color_bg));
-    --badge_text--variant: var(--badge_text--secondary, var(--bds-color_on-bg));
+  .bds2170Badge---variant_secondary {
+    --badge_bg--variant: var(--badge_bg--secondary, var(--bds-color_grey));
+    --badge_text--variant: var(--badge_text--secondary, var(--bds-color_on-grey));
   }
-  .bds2150Badge---variant_success {
+  .bds2170Badge---variant_success {
     --badge_bg--variant: var(--badge_bg--success, var(--bds-color_success));
     --badge_text--variant: var(--badge_text--success, var(--bds-color_on-success));
   }
-  .bds2150Badge---variant_error {
+  .bds2170Badge---variant_error {
     --badge_bg--variant: var(--badge_bg--error, var(--bds-color_error));
     --badge_text--variant: var(--badge_text--error, var(--bds-color_on-error));
   }
-  .bds2150Badge---variant_warning {
+  .bds2170Badge---variant_warning {
     --badge_bg--variant: var(--badge_bg--warning, var(--bds-color_warning));
     --badge_text--variant: var(--badge_text--warning, var(--bds-color_on-warning));
   }
 }
 
 /* src/components/ui/Breadcrumb/Breadcrumb.module.css */
-@layer boostdev.bds2150Breadcrumb-component {
-  .bds2150Breadcrumb-breadcrumb {
+@layer boostdev.bds2170Breadcrumb-component {
+  .bds2170Breadcrumb-breadcrumb {
     font-size: var(--bds-font_size--body--s);
   }
-  .bds2150Breadcrumb-list {
+  .bds2170Breadcrumb-list {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
@@ -282,52 +321,51 @@
     margin: 0;
     padding: 0;
   }
-  .bds2150Breadcrumb-item {
+  .bds2170Breadcrumb-item {
     display: flex;
     align-items: center;
     gap: var(--bds-space_xxs);
   }
-  .bds2150Breadcrumb-link {
+  .bds2170Breadcrumb-link {
     color: var(--bds-color_interactive_on-bg);
     text-decoration: none;
     transition: var(--bds-animation_transition);
   }
-  .bds2150Breadcrumb-link:focus-visible {
+  .bds2170Breadcrumb-link:focus-visible {
     outline: var(--bds-outline_default);
     outline-offset: var(--bds-outline_offset);
     border-radius: var(--bds-border_radius--xs);
   }
   @media (hover: hover) and (pointer: fine) {
-    .bds2150Breadcrumb-link:hover {
+    .bds2170Breadcrumb-link:hover {
       text-decoration: underline;
       text-underline-offset: 0.2em;
     }
   }
-  .bds2150Breadcrumb-separator {
+  .bds2170Breadcrumb-separator {
     color: var(--bds-color_on-bg--subtle);
     user-select: none;
   }
-  .bds2150Breadcrumb-text {
+  .bds2170Breadcrumb-text {
     color: var(--bds-color_on-bg--subtle);
   }
-  .bds2150Breadcrumb-current {
+  .bds2170Breadcrumb-current {
     color: var(--bds-color_on-bg--subtle);
     font-weight: var(--bds-font_weight--semibold);
   }
 }
 
 /* src/components/ui/Collapsible/Collapsible.module.css */
-@layer boostdev.bds2150Collapsible-component {
-  .bds2150Collapsible-collapsible {
+@layer boostdev.bds2170Collapsible-component {
+  .bds2170Collapsible-collapsible {
     border: var(--collapsible_border, none);
     --bdc_color: var(--collapsible_border-color, var(--bds-color_bg--subtle));
-    --bdc-outline_width: var(--collapsible_border-width, 1px);
     --bdc-outline_radius: var(--collapsible_border-radius, var(--bds-border_radius--m));
     border-radius: var(--bdc-outline_radius);
-    box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color);
+    box-shadow: inset 0 0 0 var(--collapsible_border-width, var(--bdc-outline_width)) var(--bdc_color);
     overflow: hidden;
   }
-  .bds2150Collapsible-summary {
+  .bds2170Collapsible-summary {
     list-style: none;
     display: flex;
     align-items: center;
@@ -342,25 +380,25 @@
     user-select: none;
     transition: var(--bds-animation_transition);
   }
-  .bds2150Collapsible-summary::-webkit-details-marker {
+  .bds2170Collapsible-summary::-webkit-details-marker {
     display: none;
   }
-  .bds2150Collapsible-summary:focus-visible {
+  .bds2170Collapsible-summary:focus-visible {
     outline: var(--bds-outline_default);
     outline-offset: calc(var(--bds-outline_offset) * -1);
   }
   @media (hover: hover) and (pointer: fine) {
-    .bds2150Collapsible-summary:hover {
+    .bds2170Collapsible-summary:hover {
       background-color: var(--collapsible_bg--hover, var(--bds-color_bg--subtle));
     }
   }
-  .bds2150Collapsible-collapsible[open] > .bds2150Collapsible-summary {
+  .bds2170Collapsible-collapsible[open] > .bds2170Collapsible-summary {
     border-block-end: var(--collapsible_border-width, 1px) solid var(--collapsible_border-color, var(--bds-color_bg--subtle));
   }
-  .bds2150Collapsible-summaryContent {
+  .bds2170Collapsible-summaryContent {
     flex: 1;
   }
-  .bds2150Collapsible-icon {
+  .bds2170Collapsible-icon {
     inline-size: 0.5rem;
     block-size: 0.5rem;
     border-inline-end: 2px solid currentcolor;
@@ -369,25 +407,25 @@
     flex-shrink: 0;
     transition: transform var(--bds-animation_transition-duration) var(--bds-animation_easing);
   }
-  .bds2150Collapsible-collapsible[open] > .bds2150Collapsible-summary .bds2150Collapsible-icon {
+  .bds2170Collapsible-collapsible[open] > .bds2170Collapsible-summary .bds2170Collapsible-icon {
     transform: rotate(-135deg);
   }
-  .bds2150Collapsible-content {
+  .bds2170Collapsible-content {
     padding: var(--bds-space_m);
     color: var(--collapsible_on-color, var(--bds-color_on-bg));
     font-size: var(--bds-font_size--body);
     line-height: var(--bds-font_line-height--body);
   }
   @media (prefers-reduced-motion: reduce) {
-    .bds2150Collapsible-icon {
+    .bds2170Collapsible-icon {
       transition: none;
     }
   }
 }
 
 /* src/components/ui/Calendar/Calendar.module.css */
-@layer boostdev.bds2150Calendar-component {
-  .bds2150Calendar-calendar {
+@layer boostdev.bds2170Calendar-component {
+  .bds2170Calendar-calendar {
     display: inline-block;
     inline-size: fit-content;
     max-inline-size: 100%;
@@ -399,36 +437,36 @@
     padding: var(--bds-space_m);
     box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--calendar_shadow, var(--bds-shadow_s));
   }
-  .bds2150Calendar-months {
+  .bds2170Calendar-months {
     display: flex;
     flex-wrap: wrap;
     gap: var(--bds-space_l);
   }
-  .bds2150Calendar-month {
+  .bds2170Calendar-month {
     display: flex;
     flex-direction: column;
     gap: var(--bds-space_s);
     inline-size: var(--calendar_size, 17rem);
     max-inline-size: 100%;
   }
-  .bds2150Calendar-monthHeader {
+  .bds2170Calendar-monthHeader {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: var(--bds-space_xs);
   }
-  .bds2150Calendar-navSlot {
+  .bds2170Calendar-navSlot {
     display: inline-flex;
     inline-size: 2.75rem;
     block-size: 2.75rem;
     flex: none;
   }
-  .bds2150Calendar-monthYear {
+  .bds2170Calendar-monthYear {
     font-size: var(--bds-font_size--body);
     font-weight: var(--bds-font_weight--semibold);
     color: var(--bds-color_on-bg);
   }
-  .bds2150Calendar-navBtn {
+  .bds2170Calendar-navBtn {
     all: unset;
     display: flex;
     align-items: center;
@@ -440,28 +478,28 @@
     color: var(--bds-color_on-bg);
     transition: var(--bds-animation_transition);
   }
-  .bds2150Calendar-navBtn svg {
+  .bds2170Calendar-navBtn svg {
     inline-size: 1rem;
     block-size: 1rem;
   }
-  .bds2150Calendar-navBtn:focus-visible {
+  .bds2170Calendar-navBtn:focus-visible {
     outline: var(--bds-outline_default);
     outline-offset: var(--bds-outline_offset);
   }
   @media (hover: hover) and (pointer: fine) {
-    .bds2150Calendar-navBtn:hover {
+    .bds2170Calendar-navBtn:hover {
       background-color: var(--calendar_navBtn-bg--hover, var(--bds-color_bg--subtle));
     }
   }
-  .bds2150Calendar-grid {
+  .bds2170Calendar-grid {
     display: grid;
     grid-template-columns: repeat(7, 1fr);
     gap: var(--bds-space_xxxs);
   }
-  .bds2150Calendar-row {
+  .bds2170Calendar-row {
     display: contents;
   }
-  .bds2150Calendar-weekday {
+  .bds2170Calendar-weekday {
     display: flex;
     align-items: center;
     justify-content: center;
@@ -471,11 +509,11 @@
     color: var(--bds-color_on-bg--subtle);
     user-select: none;
   }
-  .bds2150Calendar-cell {
+  .bds2170Calendar-cell {
     display: flex;
     aspect-ratio: 1;
   }
-  .bds2150Calendar-day {
+  .bds2170Calendar-day {
     all: unset;
     box-sizing: border-box;
     display: flex;
@@ -489,60 +527,60 @@
     cursor: pointer;
     transition: var(--bds-animation_transition);
   }
-  .bds2150Calendar-day:focus-visible {
+  .bds2170Calendar-day:focus-visible {
     outline: var(--bds-outline_default);
     outline-offset: var(--bds-outline_offset);
   }
   @media (hover: hover) and (pointer: fine) {
-    .bds2150Calendar-day:not(.bds2150Calendar-disabled, .bds2150Calendar-selected, .bds2150Calendar-rangeStart, .bds2150Calendar-rangeEnd):hover {
+    .bds2170Calendar-day:not(.bds2170Calendar-disabled, .bds2170Calendar-selected, .bds2170Calendar-rangeStart, .bds2170Calendar-rangeEnd):hover {
       background-color: var(--calendar_day-bg--hover, var(--bds-color_bg--subtle));
     }
   }
-  .bds2150Calendar-outside {
+  .bds2170Calendar-outside {
     color: var(--bds-color_on-bg--subtle);
     opacity: 0.4;
   }
-  .bds2150Calendar-today {
+  .bds2170Calendar-today {
     font-weight: var(--bds-font_weight--semibold);
     --bdc_color: var(--calendar_today-color, var(--bds-color_interactive));
     border: var(--calendar_today-border, none);
     box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--calendar_today-shadow, var(--bdc-outline_shadow));
   }
-  .bds2150Calendar-selected {
+  .bds2170Calendar-selected {
     background-color: var(--calendar_day-bg--selected, var(--bds-color_interactive));
     color: var(--calendar_day-color--selected, var(--bds-color_on-interactive));
     font-weight: var(--bds-font_weight--semibold);
   }
-  .bds2150Calendar-inRange {
+  .bds2170Calendar-inRange {
     background-color: var(--calendar_day-bg--in-range, var(--bds-color_blue--subtle));
     border-radius: 0;
   }
-  .bds2150Calendar-rangeStart,
-  .bds2150Calendar-rangeEnd {
+  .bds2170Calendar-rangeStart,
+  .bds2170Calendar-rangeEnd {
     background-color: var(--calendar_day-bg--selected, var(--bds-color_interactive));
     color: var(--calendar_day-color--selected, var(--bds-color_on-interactive));
     font-weight: var(--bds-font_weight--semibold);
   }
-  .bds2150Calendar-disabled {
+  .bds2170Calendar-disabled {
     opacity: 0.35;
     cursor: not-allowed;
   }
   @media (prefers-reduced-motion: reduce) {
-    .bds2150Calendar-day {
+    .bds2170Calendar-day {
       transition: none;
     }
   }
 }
 
 /* src/components/ui/Carousel/Carousel.module.css */
-@layer boostdev.bds2150Carousel-component {
-  .bds2150Carousel-carousel {
+@layer boostdev.bds2170Carousel-component {
+  .bds2170Carousel-carousel {
     position: relative;
     display: flex;
     align-items: center;
     gap: var(--bds-space_xs);
   }
-  .bds2150Carousel-track {
+  .bds2170Carousel-track {
     display: flex;
     gap: var(--bds-space_m);
     overflow-inline: auto;
@@ -551,14 +589,14 @@
     flex: 1;
     scroll-behavior: smooth;
   }
-  .bds2150Carousel-track::-webkit-scrollbar {
+  .bds2170Carousel-track::-webkit-scrollbar {
     display: none;
   }
-  .bds2150Carousel-slide {
+  .bds2170Carousel-slide {
     scroll-snap-align: start;
     flex-shrink: 0;
   }
-  .bds2150Carousel-navBtn {
+  .bds2170Carousel-navBtn {
     all: unset;
     display: flex;
     align-items: center;
@@ -575,29 +613,29 @@
     flex-shrink: 0;
     transition: var(--bds-animation_transition);
   }
-  .bds2150Carousel-navBtn svg {
+  .bds2170Carousel-navBtn svg {
     inline-size: 1.25rem;
     block-size: 1.25rem;
   }
-  .bds2150Carousel-navBtn:focus-visible {
+  .bds2170Carousel-navBtn:focus-visible {
     outline: var(--bds-outline_default);
     outline-offset: var(--bds-outline_offset);
   }
   @media (hover: hover) and (pointer: fine) {
-    .bds2150Carousel-navBtn:hover {
+    .bds2170Carousel-navBtn:hover {
       background-color: var(--carousel_navBtn-bg--hover, var(--bds-color_bg--subtle));
     }
   }
   @media (prefers-reduced-motion: reduce) {
-    .bds2150Carousel-track {
+    .bds2170Carousel-track {
       scroll-behavior: auto;
     }
   }
 }
 
 /* src/components/ui/DescriptionList/DescriptionList.module.css */
-@layer boostdev.bds2150DescriptionList-component {
-  .bds2150DescriptionList-list {
+@layer boostdev.bds2170DescriptionList-component {
+  .bds2170DescriptionList-list {
     display: flex;
     flex-direction: column;
     gap: var(--bds-space_s);
@@ -606,61 +644,61 @@
     font-size: var(--bds-font_size--body);
     color: var(--bds-color_on-bg);
   }
-  .bds2150DescriptionList-group {
+  .bds2170DescriptionList-group {
     display: flex;
     flex-direction: column;
     gap: var(--bds-space_xxs);
   }
-  .bds2150DescriptionList-term {
+  .bds2170DescriptionList-term {
     font-weight: var(--bds-font_weight--semibold);
     color: var(--bds-color_on-bg);
   }
-  .bds2150DescriptionList-details {
+  .bds2170DescriptionList-details {
     margin: 0;
     color: var(--bds-color_on-bg);
   }
-  .bds2150DescriptionList---layout_inline .bds2150DescriptionList-group {
+  .bds2170DescriptionList---layout_inline .bds2170DescriptionList-group {
     display: grid;
     grid-template-columns: minmax(8rem, 1fr) 2fr;
     gap: var(--bds-space_xs);
     align-items: baseline;
   }
-  .bds2150DescriptionList---layout_inline .bds2150DescriptionList-term {
+  .bds2170DescriptionList---layout_inline .bds2170DescriptionList-term {
     grid-column: 1;
   }
-  .bds2150DescriptionList---layout_inline .bds2150DescriptionList-details {
+  .bds2170DescriptionList---layout_inline .bds2170DescriptionList-details {
     grid-column: 2;
   }
 }
 
 /* src/components/ui/Link/Link.module.css */
-@layer boostdev.bds2150Link-component {
-  .bds2150Link-link {
+@layer boostdev.bds2170Link-component {
+  .bds2170Link-link {
     color: var(--link_color, var(--link_color--variant, var(--bds-color_interactive_on-bg)));
     text-decoration: underline;
     text-underline-offset: 0.2em;
     transition: var(--bds-animation_transition);
     cursor: pointer;
   }
-  .bds2150Link-link:focus-visible {
+  .bds2170Link-link:focus-visible {
     outline: var(--bds-outline_default);
     outline-offset: var(--bds-outline_offset);
     border-radius: var(--bds-border_radius--xs);
   }
   @media (hover: hover) and (pointer: fine) {
-    .bds2150Link-link:hover {
+    .bds2170Link-link:hover {
       color: var(--link_color-hover, var(--link_color-hover--variant, var(--bds-color_blue--strong)));
     }
   }
-  .bds2150Link---variant_default {
+  .bds2170Link---variant_default {
     --link_color--variant: var(--link_color--default, var(--bds-color_interactive_on-bg));
     --link_color-hover--variant: var(--link_color-hover--default, var(--bds-color_blue--strong));
   }
-  .bds2150Link---variant_subtle {
+  .bds2170Link---variant_subtle {
     --link_color--variant: var(--link_color--subtle, var(--bds-color_on-bg));
     --link_color-hover--variant: var(--link_color-hover--subtle, var(--bds-color_interactive_on-bg));
   }
-  .bds2150Link---variant_standalone {
+  .bds2170Link---variant_standalone {
     --link_color--variant: var(--link_color--standalone, var(--bds-color_interactive_on-bg));
     --link_color-hover--variant: var(--link_color-hover--standalone, var(--bds-color_blue--strong));
     display: inline-flex;
@@ -670,12 +708,12 @@
     text-decoration: none;
   }
   @media (hover: hover) and (pointer: fine) {
-    .bds2150Link---variant_standalone:hover {
+    .bds2170Link---variant_standalone:hover {
       text-decoration: underline;
       text-underline-offset: 0.2em;
     }
   }
-  .bds2150Link-externalLabel {
+  .bds2170Link-externalLabel {
     position: absolute;
     inline-size: 1px;
     block-size: 1px;
@@ -689,13 +727,13 @@
 }
 
 /* src/components/ui/Loading/Loading.module.css */
-@layer boostdev.bds2150Loading-component {
-  .bds2150Loading-loading {
+@layer boostdev.bds2170Loading-component {
+  .bds2170Loading-loading {
     display: flex;
     justify-content: center;
     align-items: center;
   }
-  .bds2150Loading-spinner {
+  .bds2170Loading-spinner {
     inline-size: 2.5em;
     block-size: 2.5em;
     border: 4px solid var(--bds-color_bg);
@@ -703,18 +741,18 @@
     border-radius: var(--loading_radius, var(--bds-border_radius--circle));
     animation: spin 1s linear infinite;
   }
-  .bds2150Loading---size_small .bds2150Loading-spinner {
+  .bds2170Loading---size_small .bds2170Loading-spinner {
     inline-size: 1.5em;
     block-size: 1.5em;
     border-width: 2px;
   }
-  .bds2150Loading---size_large .bds2150Loading-spinner {
+  .bds2170Loading---size_large .bds2170Loading-spinner {
     inline-size: 4em;
     block-size: 4em;
     border-width: 6px;
   }
   @media (prefers-reduced-motion: reduce) {
-    .bds2150Loading-spinner {
+    .bds2170Loading-spinner {
       animation: none;
     }
   }
@@ -729,46 +767,67 @@
 }
 
 /* src/components/ui/NotificationBanner/NotificationBanner.module.css */
-@layer boostdev.bds2150NotificationBanner-component {
-  .bds2150NotificationBanner-banner {
+@layer boostdev.bds2170NotificationBanner-component {
+  .bds2170NotificationBanner-banner {
     display: flex;
     align-items: center;
     gap: var(--bds-space_m);
     padding: var(--bds-space_s) var(--bds-space_m);
     background-color: var(--banner_bg, var(--banner_bg--variant, var(--bds-color_blue--subtle)));
     color: var(--banner_text, var(--banner_text--variant, var(--bds-color_on-blue--subtle)));
-    border-block-end: 3px solid var(--banner_border, var(--banner_border--variant, var(--bds-color_blue)));
+    border-block-end: var(--banner_border-width, 3px) solid var(--banner_border, var(--banner_border--variant, var(--bds-color_blue)));
     font-size: var(--bds-font_size--body);
     line-height: var(--bds-font_line-height--body);
     inline-size: 100%;
   }
-  .bds2150NotificationBanner---variant_info {
+  .bds2170NotificationBanner---variant_info {
     --banner_bg--variant: var(--banner_bg--info, var(--bds-color_blue--subtle));
     --banner_text--variant: var(--banner_text--info, var(--bds-color_on-blue--subtle));
     --banner_border--variant: var(--banner_border--info, var(--bds-color_blue));
   }
-  .bds2150NotificationBanner---variant_success {
+  .bds2170NotificationBanner---variant_success {
     --banner_bg--variant: var(--banner_bg--success, var(--bds-color_success--subtle));
     --banner_text--variant: var(--banner_text--success, var(--bds-color_on-success--subtle));
     --banner_border--variant: var(--banner_border--success, var(--bds-color_success));
   }
-  .bds2150NotificationBanner---variant_warning {
+  .bds2170NotificationBanner---variant_warning {
     --banner_bg--variant: var(--banner_bg--warning, var(--bds-color_orange--subtle));
     --banner_text--variant: var(--banner_text--warning, var(--bds-color_on-orange--subtle));
     --banner_border--variant: var(--banner_border--warning, var(--bds-color_warning));
   }
-  .bds2150NotificationBanner---variant_error {
-    --banner_bg--variant: var(--banner_bg--error, rgb(from var(--bds-color_error) r g b / 12%));
-    --banner_text--variant: var(--banner_text--error, var(--bds-color_on-bg));
+  .bds2170NotificationBanner---variant_error {
+    --banner_bg--variant: var(--banner_bg--error, var(--bds-color_error--subtle));
+    --banner_text--variant: var(--banner_text--error, var(--bds-color_on-error--subtle));
     --banner_border--variant: var(--banner_border--error, var(--bds-color_error));
   }
-  .bds2150NotificationBanner-content {
+  .bds2170NotificationBanner---appearance_gradient {
+    background-image: var(--banner_gradient, linear-gradient(100deg, transparent 35%, var(--bds-color_bg--strong, var(--bds-color_bg)) 100%));
+    box-shadow: var(--banner_shadow, var(--bds-shadow_s));
+  }
+  .bds2170NotificationBanner---appearance_gradient.bds2170NotificationBanner---variant_info {
+    --banner_border--variant: var(--banner_border--info, var(--banner_accent--info, var(--bds-color_on-blue--subtle)));
+  }
+  .bds2170NotificationBanner---appearance_gradient.bds2170NotificationBanner---variant_success {
+    --banner_border--variant: var(--banner_border--success, var(--banner_accent--success, var(--bds-color_on-success--subtle)));
+  }
+  .bds2170NotificationBanner---appearance_gradient.bds2170NotificationBanner---variant_warning {
+    --banner_border--variant: var(--banner_border--warning, var(--banner_accent--warning, var(--bds-color_warning)));
+  }
+  .bds2170NotificationBanner---appearance_gradient.bds2170NotificationBanner---variant_error {
+    --banner_border--variant: var(--banner_border--error, var(--banner_accent--error, var(--bds-color_error)));
+  }
+  .bds2170NotificationBanner-icon {
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+  }
+  .bds2170NotificationBanner-content {
     flex: 1;
   }
-  .bds2150NotificationBanner-action {
+  .bds2170NotificationBanner-action {
     flex-shrink: 0;
   }
-  .bds2150NotificationBanner-dismiss {
+  .bds2170NotificationBanner-dismiss {
     all: unset;
     display: flex;
     align-items: center;
@@ -784,28 +843,28 @@
     --bdc_color: currentcolor;
     box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color);
   }
-  .bds2150NotificationBanner-dismiss svg {
+  .bds2170NotificationBanner-dismiss svg {
     inline-size: 1rem;
     block-size: 1rem;
   }
-  .bds2150NotificationBanner-dismiss:focus-visible {
+  .bds2170NotificationBanner-dismiss:focus-visible {
     outline: var(--bds-outline_default);
     outline-offset: var(--bds-outline_offset);
   }
   @media (hover: hover) and (pointer: fine) {
-    .bds2150NotificationBanner-dismiss:hover {
+    .bds2170NotificationBanner-dismiss:hover {
       opacity: var(--banner_dismiss-opacity--hover, 0.7);
     }
   }
 }
 
 /* src/components/ui/Pagination/Pagination.module.css */
-@layer boostdev.bds2150Pagination-component {
-  .bds2150Pagination-pagination {
+@layer boostdev.bds2170Pagination-component {
+  .bds2170Pagination-pagination {
     display: flex;
     justify-content: center;
   }
-  .bds2150Pagination-list {
+  .bds2170Pagination-list {
     display: flex;
     align-items: center;
     gap: var(--bds-space_xxs);
@@ -813,10 +872,10 @@
     margin: 0;
     padding: 0;
   }
-  .bds2150Pagination-list li {
+  .bds2170Pagination-list li {
     list-style: none;
   }
-  .bds2150Pagination-button {
+  .bds2170Pagination-button {
     all: unset;
     display: inline-flex;
     align-items: center;
@@ -837,30 +896,30 @@
     transition: var(--bds-animation_transition);
     box-sizing: border-box;
   }
-  .bds2150Pagination-button:disabled {
+  .bds2170Pagination-button:disabled {
     opacity: 0.4;
     cursor: not-allowed;
   }
-  .bds2150Pagination-button:focus-visible {
+  .bds2170Pagination-button:focus-visible {
     outline: var(--bds-outline_default);
     outline-offset: var(--bds-outline_offset);
   }
   @media (hover: hover) and (pointer: fine) {
-    .bds2150Pagination-button:not(:disabled, .bds2150Pagination---active):hover {
+    .bds2170Pagination-button:not(:disabled, .bds2170Pagination---active):hover {
       --btn_bg--state: var(--pagination_item-bg--hover, var(--btn_bg--hover, var(--bds-color_bg--subtle)));
       --btn_color--state: var(--pagination_item-color--hover, var(--btn_color--hover, var(--bds-color_interactive_on-bg)));
     }
   }
-  .bds2150Pagination-button.bds2150Pagination---active {
+  .bds2170Pagination-button.bds2170Pagination---active {
     --btn_bg--state: var(--pagination_item-bg--active, var(--btn_bg--active, var(--bdc-color_active)));
     --btn_color--state: var(--pagination_item-color--active, var(--btn_color--active, var(--bdc-color_on-active)));
     --btn_border--state: var(--pagination_item-border--active, var(--btn_border--active, var(--bdc-color_active)));
   }
-  .bds2150Pagination-button.bds2150Pagination---nav svg {
+  .bds2170Pagination-button.bds2170Pagination---nav svg {
     inline-size: 1rem;
     block-size: 1rem;
   }
-  .bds2150Pagination-ellipsis {
+  .bds2170Pagination-ellipsis {
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -873,71 +932,71 @@
 }
 
 /* src/components/ui/Progress/Progress.module.css */
-@layer boostdev.bds2150Progress-component {
-  .bds2150Progress-container {
+@layer boostdev.bds2170Progress-component {
+  .bds2170Progress-container {
     display: flex;
     flex-direction: column;
     gap: var(--bds-space_xxs);
     inline-size: 100%;
   }
-  .bds2150Progress-labelRow {
+  .bds2170Progress-labelRow {
     display: flex;
     justify-content: space-between;
     align-items: baseline;
     font-size: var(--bds-font_size--body--s);
     color: var(--bds-color_on-bg);
   }
-  .bds2150Progress-value {
+  .bds2170Progress-value {
     font-variant-numeric: tabular-nums;
   }
-  .bds2150Progress-track {
+  .bds2170Progress-track {
     inline-size: 100%;
     block-size: var(--progress_height, var(--bds-space_xs));
     background-color: var(--progress_color-track, var(--bds-color_bg--subtle));
     border-radius: var(--progress_radius, var(--bds-border_radius--full));
     overflow: hidden;
   }
-  .bds2150Progress-track.bds2150Progress---size_small {
+  .bds2170Progress-track.bds2170Progress---size_small {
     --progress_height: var(--bds-space_xxs);
   }
-  .bds2150Progress-track.bds2150Progress---size_medium {
+  .bds2170Progress-track.bds2170Progress---size_medium {
     --progress_height: var(--bds-space_xs);
   }
-  .bds2150Progress-track.bds2150Progress---size_large {
+  .bds2170Progress-track.bds2170Progress---size_large {
     --progress_height: var(--bds-space_s);
   }
-  .bds2150Progress-fill {
+  .bds2170Progress-fill {
     block-size: 100%;
     background-color: var(--progress_color-active, var(--bdc-color_active));
     border-radius: var(--progress_radius, var(--bds-border_radius--full));
     transition: inline-size var(--bds-animation_transition-duration) var(--bds-animation_easing);
   }
   @media (prefers-reduced-motion: reduce) {
-    .bds2150Progress-fill {
+    .bds2170Progress-fill {
       transition: none;
     }
   }
 }
 
 /* src/components/ui/ProgressCircle/ProgressCircle.module.css */
-@layer boostdev.bds2150ProgressCircle-component {
-  .bds2150ProgressCircle-wrapper {
+@layer boostdev.bds2170ProgressCircle-component {
+  .bds2170ProgressCircle-wrapper {
     position: relative;
     display: inline-flex;
     align-items: center;
     justify-content: center;
   }
-  .bds2150ProgressCircle-svg {
+  .bds2170ProgressCircle-svg {
     display: block;
   }
-  .bds2150ProgressCircle-track {
+  .bds2170ProgressCircle-track {
     stroke: var(--progressCircle_color-track, var(--bds-color_bg--subtle));
   }
-  .bds2150ProgressCircle-fill {
+  .bds2170ProgressCircle-fill {
     stroke: var(--progressCircle_color-active, var(--bdc-color_active));
     transition: stroke-dashoffset var(--bds-animation_transition-duration) var(--bds-animation_easing);
   }
-  .bds2150ProgressCircle-value {
+  .bds2170ProgressCircle-value {
     position: absolute;
     font-size: var(--bds-font_size--body--s);
     font-weight: var(--bds-font_weight--semibold);
@@ -945,44 +1004,50 @@
     color: var(--bds-color_on-bg);
     line-height: 1;
   }
-  .bds2150ProgressCircle---size_small .bds2150ProgressCircle-value {
+  .bds2170ProgressCircle---size_small .bds2170ProgressCircle-value {
     font-size: var(--progressCircle_font-size--small, var(--bds-font_size--body--s));
   }
-  .bds2150ProgressCircle---size_medium .bds2150ProgressCircle-value {
+  .bds2170ProgressCircle---size_medium .bds2170ProgressCircle-value {
     font-size: var(--bds-font_size--body--s);
   }
-  .bds2150ProgressCircle---size_large .bds2150ProgressCircle-value {
+  .bds2170ProgressCircle---size_large .bds2170ProgressCircle-value {
     font-size: var(--bds-font_size--body);
   }
   @media (prefers-reduced-motion: reduce) {
-    .bds2150ProgressCircle-fill {
+    .bds2170ProgressCircle-fill {
       transition: none;
     }
   }
 }
 
 /* src/components/ui/Separator/Separator.module.css */
-@layer boostdev.bds2150Separator-component {
-  .bds2150Separator-separator {
+@layer boostdev.bds2170Separator-component {
+  .bds2170Separator-separator {
     border: none;
     background-color: var(--separator_color, var(--bds-color_on-bg--as-surface, var(--bds-color_on-bg--border, var(--bds-color_on-bg))));
   }
-  .bds2150Separator-separator.bds2150Separator---horizontal {
+  .bds2170Separator-separator.bds2170Separator---horizontal {
     display: block;
     inline-size: 100%;
     block-size: var(--separator_thickness, 1px);
+    box-sizing: content-box;
+    padding-block: var(--separator_spacing, 0);
+    background-clip: content-box;
   }
-  .bds2150Separator-separator.bds2150Separator---vertical {
+  .bds2170Separator-separator.bds2170Separator---vertical {
     display: inline-block;
     inline-size: var(--separator_thickness, 1px);
     min-block-size: var(--separator_length, 1em);
     align-self: stretch;
+    box-sizing: content-box;
+    padding-inline: var(--separator_spacing, var(--bds-space_s));
+    background-clip: content-box;
   }
 }
 
 /* src/components/ui/Skeleton/Skeleton.module.css */
-@layer boostdev.bds2150Skeleton-component {
-  .bds2150Skeleton-skeleton {
+@layer boostdev.bds2170Skeleton-component {
+  .bds2170Skeleton-skeleton {
     background:
       linear-gradient(
         90deg,
@@ -995,7 +1060,7 @@
     min-block-size: var(--skeleton_min-block-size, var(--bds-space_m));
   }
   @media (prefers-reduced-motion: reduce) {
-    .bds2150Skeleton-skeleton {
+    .bds2170Skeleton-skeleton {
       animation: none;
       background: var(--skeleton_color-base, var(--bds-color_grey--subtle));
     }
@@ -1011,8 +1076,8 @@
 }
 
 /* src/components/ui/SkipLink/SkipLink.module.css */
-@layer boostdev.bds2150SkipLink-component {
-  .bds2150SkipLink-skipLink {
+@layer boostdev.bds2170SkipLink-component {
+  .bds2170SkipLink-skipLink {
     position: absolute;
     inset-block-start: var(--skip-link_inset, var(--bds-space_s));
     inset-inline-start: var(--skip-link_inset, var(--bds-space_s));
@@ -1030,21 +1095,21 @@
     transform: translateY(-200%);
     transition: transform var(--bds-animation_transition-duration) var(--bds-animation_easing);
   }
-  .bds2150SkipLink-skipLink:focus-visible {
+  .bds2170SkipLink-skipLink:focus-visible {
     transform: translateY(0);
     outline: var(--bds-outline_default);
     outline-offset: var(--bds-outline_offset);
   }
   @media (prefers-reduced-motion: reduce) {
-    .bds2150SkipLink-skipLink {
+    .bds2170SkipLink-skipLink {
       transition: none;
     }
   }
 }
 
 /* src/components/ui/Table/Table.module.css */
-@layer boostdev.bds2150Table-component {
-  .bds2150Table-wrapper {
+@layer boostdev.bds2170Table-component {
+  .bds2170Table-wrapper {
     inline-size: 100%;
     overflow-inline: auto;
     border: var(--table_border, none);
@@ -1053,39 +1118,39 @@
     border-radius: var(--table_radius, var(--bdc-outline_radius));
     box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--table_shadow, var(--bdc-outline_shadow));
   }
-  .bds2150Table-wrapper:focus-visible {
+  .bds2170Table-wrapper:focus-visible {
     outline: var(--bds-outline_default);
     outline-offset: calc(var(--bds-outline_offset) * -1);
   }
-  .bds2150Table-table {
+  .bds2170Table-table {
     inline-size: 100%;
     border-collapse: collapse;
     font-size: var(--table_font-size, var(--bds-font_size--body));
     font-family: var(--bds-font_family--body);
   }
-  .bds2150Table-caption {
+  .bds2170Table-caption {
     caption-side: top;
     text-align: start;
     padding: var(--table_cell-padding, var(--bds-space_s) var(--bds-space_m));
     font-weight: var(--bds-font_weight--semibold);
     color: var(--bds-color_on-bg);
   }
-  .bds2150Table-thead {
-    background-color: var(--bds-color_bg--subtle);
+  .bds2170Table-thead {
+    background-color: var(--table_header-bg, var(--bds-color_bg--subtle));
   }
-  .bds2150Table-th {
+  .bds2170Table-th {
     padding: var(--table_cell-padding, var(--bds-space_s) var(--bds-space_m));
     text-align: start;
-    font-weight: var(--bds-font_weight--semibold);
-    font-size: var(--table_header-font-size, var(--bds-font_size--body--s));
-    color: var(--bds-color_on-bg--subtle);
+    font-weight: var(--table_header-font-weight, var(--bds-font_weight--bold));
+    font-size: var(--table_header-font-size, var(--bds-font_size--body));
+    color: var(--table_header-color, var(--bds-color_on-bg--subtle));
     white-space: nowrap;
     border-block-end: 1px solid var(--table_divider-color, var(--bds-color_on-bg--as-surface, var(--bds-color_on-bg--border, var(--bds-color_bg--subtle))));
   }
-  .bds2150Table-th.bds2150Table---sortable {
+  .bds2170Table-th.bds2170Table---sortable {
     padding: 0;
   }
-  .bds2150Table-sortButton {
+  .bds2170Table-sortButton {
     all: unset;
     display: flex;
     align-items: center;
@@ -1093,127 +1158,141 @@
     padding: var(--table_cell-padding, var(--bds-space_s) var(--bds-space_m));
     inline-size: 100%;
     cursor: pointer;
-    color: var(--bds-color_on-bg--subtle);
-    font-weight: var(--bds-font_weight--semibold);
-    font-size: var(--table_header-font-size, var(--bds-font_size--body--s));
+    color: var(--table_header-color, var(--bds-color_on-bg--subtle));
+    font-weight: var(--table_header-font-weight, var(--bds-font_weight--bold));
+    font-size: var(--table_header-font-size, var(--bds-font_size--body));
     transition: var(--bds-animation_transition);
     box-sizing: border-box;
   }
-  .bds2150Table-sortButton:focus-visible {
+  .bds2170Table-sortButton:focus-visible {
     outline: var(--bds-outline_default);
     outline-offset: calc(var(--bds-outline_offset) * -1);
   }
   @media (hover: hover) and (pointer: fine) {
-    .bds2150Table-sortButton:hover {
+    .bds2170Table-sortButton:hover {
       color: var(--table_sortBtn-color--hover, var(--bds-color_on-bg));
     }
   }
-  .bds2150Table-sortIcon {
+  .bds2170Table-sortIcon {
     inline-size: 1rem;
     block-size: 1rem;
     opacity: 0.4;
     transition: transform var(--bds-animation_transition-duration) var(--bds-animation_easing), opacity var(--bds-animation_transition-duration) var(--bds-animation_easing);
   }
-  .bds2150Table-sortIcon.bds2150Table---sort-active {
+  .bds2170Table-sortIcon.bds2170Table---sort-active {
     opacity: 1;
     color: var(--bds-color_interactive);
   }
-  .bds2150Table-sortIcon.bds2150Table---sort-desc {
+  .bds2170Table-sortIcon.bds2170Table---sort-desc {
     transform: rotate(180deg);
   }
-  .bds2150Table-tbody .bds2150Table-tr {
+  .bds2170Table-tbody .bds2170Table-tr {
     border-block-end: 1px solid var(--table_divider-color, var(--bds-color_on-bg--as-surface, var(--bds-color_on-bg--border, var(--bds-color_bg--subtle))));
     transition: var(--bds-animation_transition);
   }
-  .bds2150Table-tbody .bds2150Table-tr:last-child {
+  .bds2170Table-tbody .bds2170Table-tr:last-child {
     border-block-end: none;
   }
   @media (hover: hover) and (pointer: fine) {
-    .bds2150Table-tbody .bds2150Table-tr:hover {
+    .bds2170Table-tbody .bds2170Table-tr:hover {
       background-color: var(--table_row-bg--hover, var(--bds-color_bg--subtle));
     }
   }
-  .bds2150Table-td {
+  .bds2170Table-td {
     padding: var(--table_cell-padding, var(--bds-space_s) var(--bds-space_m));
     color: var(--bds-color_on-bg);
     vertical-align: middle;
   }
   @media (prefers-reduced-motion: reduce) {
-    .bds2150Table-sortIcon {
+    .bds2170Table-sortIcon {
       transition: none;
     }
   }
 }
 
 /* src/components/ui/Tabs/Tabs.module.css */
-@layer boostdev.bds2150Tabs-component {
-  .bds2150Tabs-tabs {
+@layer boostdev.bds2170Tabs-component {
+  .bds2170Tabs-tabs {
     display: flex;
     flex-direction: column;
   }
-  .bds2150Tabs-tabList {
+  .bds2170Tabs-tabList {
     display: flex;
     border-block-end: 1px solid var(--tabs_divider-color, var(--bds-color_on-bg--as-surface, var(--bds-color_on-bg--border, var(--bds-color_bg--subtle))));
     gap: var(--tabs_gap, var(--bds-space_xxs));
   }
-  .bds2150Tabs-tab {
+  .bds2170Tabs-tab {
     all: unset;
     display: inline-flex;
     align-items: center;
     padding: var(--tab_padding, var(--bds-space_s) var(--bds-space_m));
     font-family: var(--bds-font_family--body);
     font-size: var(--bds-font_size--body);
-    font-weight: var(--bds-font_weight--semibold);
-    color: var(--tab_color, var(--tab_color--state, var(--bds-color_on-bg)));
-    border-block-end: 2px solid var(--tab_border-color, var(--tab_border-color--state, transparent));
+    font-weight: var(--tab_font-weight, var(--tab_font-weight--state, var(--tab_font-weight--inactive, var(--bds-font_weight--medium))));
+    color: var(--tab_color, var(--tab_color--state, var(--tab_color--inactive, var(--bds-color_on-bg--muted, var(--bds-color_on-bg)))));
+    border-block-end: var(--tab_indicator-width, 3px) solid var(--tab_border-color, var(--tab_border-color--state, transparent));
     margin-block-end: -1px;
     cursor: pointer;
     transition: var(--bds-animation_transition);
   }
-  .bds2150Tabs-tab.bds2150Tabs---active {
-    --tab_color--state: var(--tab_color--active, var(--bds-color_interactive_on-bg));
+  .bds2170Tabs-label {
+    display: inline-grid;
+  }
+  .bds2170Tabs-label::after {
+    content: attr(data-label);
+    grid-area: 1 / 1;
+    font-weight: var(--tab_font-weight, var(--tab_font-weight--active, var(--bds-font_weight--bold)));
+    visibility: hidden;
+    pointer-events: none;
+    block-size: 0;
+    overflow: hidden;
+  }
+  .bds2170Tabs-tab.bds2170Tabs---active {
+    --tab_color--state: var(--tab_color--active, var(--bds-color_on-bg));
+    --tab_font-weight--state: var(--tab_font-weight--active, var(--bds-font_weight--bold));
     --tab_border-color--state: var(--tab_border-color--active, var(--bds-color_interactive));
   }
-  .bds2150Tabs-tab:disabled {
+  .bds2170Tabs-tab:disabled {
     opacity: 0.4;
     cursor: not-allowed;
   }
-  .bds2150Tabs-tab:focus-visible {
+  .bds2170Tabs-tab:focus-visible {
     outline: var(--bds-outline_default);
     outline-offset: var(--bds-outline_offset);
     border-radius: var(--bds-border_radius--xs);
   }
   @media (hover: hover) and (pointer: fine) {
-    .bds2150Tabs-tab:not(:disabled, .bds2150Tabs---active):hover {
-      --tab_color--state: var(--tab_color--hover, var(--bds-color_interactive_on-bg));
+    .bds2170Tabs-tab:not(:disabled, .bds2170Tabs---active):hover {
+      --tab_color--state: var(--tab_color--hover, var(--bds-color_on-bg));
     }
   }
-  .bds2150Tabs-panel {
+  .bds2170Tabs-panel {
     padding-block-start: var(--tabs_panel-padding, var(--bds-space_m));
   }
-  .bds2150Tabs-panel:focus-visible {
+  .bds2170Tabs-panel:focus-visible {
     outline: var(--bds-outline_default);
     outline-offset: var(--bds-outline_offset);
   }
 }
 
 /* src/components/ui/Tooltip/Tooltip.module.css */
-@layer boostdev.bds2150Tooltip-component {
-  .bds2150Tooltip-wrapper {
+@layer boostdev.bds2170Tooltip-component {
+  .bds2170Tooltip-wrapper {
     position: relative;
     display: inline-flex;
     align-items: center;
   }
-  .bds2150Tooltip-tooltip {
+  .bds2170Tooltip-tooltip {
     display: block;
     position: absolute;
     z-index: var(--bds-z-index_popover);
-    padding: var(--tooltip_padding, var(--bds-space_xxs) var(--bds-space_xs));
-    border-radius: var(--tooltip_radius, var(--bds-border_radius--full));
+    padding: var(--tooltip_padding, var(--bds-space_xxs) var(--bds-space_s));
+    border-radius: var(--tooltip_radius, var(--bds-border_radius--xs));
     background-color: var(--tooltip_bg, var(--bds-color_on-bg));
     color: var(--tooltip_text, var(--bds-color_bg));
     font-size: var(--tooltip_font-size, var(--bds-font_size--body--s));
     line-height: var(--bds-font_line-height--body);
+    inline-size: max-content;
     max-inline-size: var(--tooltip_max-inline-size, 20rem);
     white-space: normal;
     pointer-events: none;
@@ -1222,72 +1301,72 @@
     opacity: 0;
     transition: opacity var(--bds-animation_transition-duration) var(--bds-animation_easing);
   }
-  [dir=rtl] .bds2150Tooltip-tooltip,
-  .bds2150Tooltip-tooltip[dir=rtl] {
+  [dir=rtl] .bds2170Tooltip-tooltip,
+  .bds2170Tooltip-tooltip[dir=rtl] {
     --tooltip_dir: -1;
   }
-  .bds2150Tooltip---visible {
+  .bds2170Tooltip---visible {
     visibility: visible;
     opacity: 1;
     pointer-events: auto;
   }
-  .bds2150Tooltip---placement_top {
+  .bds2170Tooltip---placement_top {
     inset-block-end: calc(100% + var(--tooltip_offset, var(--bds-space_xs)));
     inset-inline-start: 50%;
     transform: translateX(calc(-50% * var(--tooltip_dir, 1)));
   }
-  .bds2150Tooltip---placement_bottom {
+  .bds2170Tooltip---placement_bottom {
     inset-block-start: calc(100% + var(--tooltip_offset, var(--bds-space_xs)));
     inset-inline-start: 50%;
     transform: translateX(calc(-50% * var(--tooltip_dir, 1)));
   }
-  .bds2150Tooltip---placement_left {
+  .bds2170Tooltip---placement_left {
     inset-inline-end: calc(100% + var(--tooltip_offset, var(--bds-space_xs)));
     inset-block-start: 50%;
     transform: translateY(-50%);
   }
-  .bds2150Tooltip---placement_right {
+  .bds2170Tooltip---placement_right {
     inset-inline-start: calc(100% + var(--tooltip_offset, var(--bds-space_xs)));
     inset-block-start: 50%;
     transform: translateY(-50%);
   }
   @media (prefers-reduced-motion: reduce) {
-    .bds2150Tooltip-tooltip {
+    .bds2170Tooltip-tooltip {
       transition: none;
     }
   }
 }
 
 /* src/components/ui/Typography/Typography.module.css */
-@layer boostdev.bds2150Typography-component {
-  .bds2150Typography-typography {
+@layer boostdev.bds2170Typography-component {
+  .bds2170Typography-typography {
     margin: 0;
     font-family: var(--bds-font_family--body);
     color: var(--typography_color, var(--bds-color_on-bg));
   }
-  .bds2150Typography---h1 {
+  .bds2170Typography---h1 {
     font-family: var(--bds-font_family--heading);
     font-size: var(--typography_font-size--h1, var(--bds-font_size--heading-1));
     font-weight: var(--bds-font_weight--bold);
     line-height: var(--bds-font_line-height--heading);
   }
-  .bds2150Typography---h2 {
+  .bds2170Typography---h2 {
     font-family: var(--bds-font_family--heading);
     font-size: var(--typography_font-size--h2, var(--bds-font_size--heading-2));
     font-weight: var(--bds-font_weight--semibold);
     line-height: var(--bds-font_line-height--heading);
   }
-  .bds2150Typography---h3 {
+  .bds2170Typography---h3 {
     font-family: var(--bds-font_family--heading);
     font-size: var(--typography_font-size--h3, var(--bds-font_size--heading-3));
     font-weight: var(--bds-font_weight--semibold);
     line-height: var(--bds-font_line-height--heading);
   }
-  .bds2150Typography---body {
+  .bds2170Typography---body {
     font-size: var(--typography_font-size--body, var(--bds-font_size--body));
     line-height: var(--bds-font_line-height--body);
   }
-  .bds2150Typography---body_s {
+  .bds2170Typography---body_s {
     font-size: var(--typography_font-size--body_s, var(--bds-font_size--body--s));
     line-height: var(--bds-font_line-height--body);
   }
@@ -1318,9 +1397,9 @@
     box-shadow: 0 0 0 0 rgb(from var(--button_pulse-color, var(--button_color, var(--bds-color_interactive))) r g b / 0%);
   }
 }
-@layer boostdev.bds2150Button-component {
-  .bds2150Button-button,
-  .bds2150Button-button[href] {
+@layer boostdev.bds2170Button-component {
+  .bds2170Button-button,
+  .bds2170Button-button[href] {
     all: unset;
     position: relative;
     font: inherit;
@@ -1343,78 +1422,78 @@
     box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color);
     transition: var(--bds-animation_transition), --bdc_color var(--bds-animation_transition-duration) var(--bds-animation_easing);
   }
-  .bds2150Button-button.bds2150Button---default {
+  .bds2170Button-button.bds2170Button---default {
   }
-  .bds2150Button-button.bds2150Button---outline,
-  .bds2150Button-button.bds2150Button---ghost {
+  .bds2170Button-button.bds2170Button---outline,
+  .bds2170Button-button.bds2170Button---ghost {
     --button_bg--variant: var(--button_bg--outline, transparent);
     --button_text--variant: var(--button_text--outline, var(--button_color--on-bg, var(--bds-color_interactive_on-bg)));
     --button_border--variant: var(--button_border--outline, var(--button_color--on-bg, var(--bds-color_interactive_on-bg)));
   }
-  .bds2150Button-button.bds2150Button---size_small {
+  .bds2170Button-button.bds2170Button---size_small {
     --button_height: 2.25em;
     --button_font-size: var(--bds-font_size--body--s);
     --button_padding-inline--size: var(--bds-space_m);
   }
-  .bds2150Button-button.bds2150Button---size_medium {
+  .bds2170Button-button.bds2170Button---size_medium {
     --button_height: 3em;
     --button_padding-inline--size: var(--bds-space_l);
   }
-  .bds2150Button-button.bds2150Button---size_large {
+  .bds2170Button-button.bds2170Button---size_large {
     --button_font-size: var(--bds-font_size--heading-3);
     --button_padding-inline--size: var(--bds-space_xl);
   }
-  .bds2150Button-button.bds2150Button---hasPulse {
+  .bds2170Button-button.bds2170Button---hasPulse {
     animation: pulse 3s infinite;
   }
-  .bds2150Button-button.bds2150Button---iconOnly {
+  .bds2170Button-button.bds2170Button---iconOnly {
     aspect-ratio: 1;
     box-sizing: border-box;
     padding: var(--bds-space_xxs);
   }
-  .bds2150Button-button.bds2150Button---iconOnly > * {
+  .bds2170Button-button.bds2170Button---iconOnly > * {
     inline-size: 100%;
     block-size: 100%;
   }
-  .bds2150Button-button[href] {
+  .bds2170Button-button[href] {
     text-decoration: none;
   }
-  .bds2150Button-button svg {
+  .bds2170Button-button svg {
     --icon__stroke: currentcolor;
     fill: currentcolor;
     color: currentcolor;
     flex-shrink: 0;
   }
-  .bds2150Button-iconStart {
+  .bds2170Button-iconStart {
     display: flex;
     align-items: center;
     margin-inline-start: calc(var(--button_icon-offset, calc(var(--button_padding-inline--size) / 2)) * -1);
     transition: var(--bds-animation_transition);
   }
-  .bds2150Button-iconEnd {
+  .bds2170Button-iconEnd {
     display: flex;
     align-items: center;
     margin-inline-end: calc(var(--button_icon-offset, calc(var(--button_padding-inline--size) / 2)) * -1);
     transition: var(--bds-animation_transition);
   }
-  .bds2150Button-button.bds2150Button---iconOnly .bds2150Button-iconStart,
-  .bds2150Button-button.bds2150Button---iconOnly .bds2150Button-iconEnd {
+  .bds2170Button-button.bds2170Button---iconOnly .bds2170Button-iconStart,
+  .bds2170Button-button.bds2170Button---iconOnly .bds2170Button-iconEnd {
     margin-inline: 0;
   }
   @media (hover: hover) and (pointer: fine) {
-    .bds2150Button-button:hover .bds2150Button-iconStart svg {
+    .bds2170Button-button:hover .bds2170Button-iconStart svg {
       animation: fadeZoom 2s ease-out infinite;
     }
-    .bds2150Button-button:hover .bds2150Button-iconEnd svg {
+    .bds2170Button-button:hover .bds2170Button-iconEnd svg {
       animation: fadeZoom 2s ease-out infinite;
     }
   }
-  .bds2150Button-button:focus-visible {
+  .bds2170Button-button:focus-visible {
     outline: var(--bds-outline_default);
     outline-offset: var(--bds-outline_offset);
   }
   @media (hover: hover) and (pointer: fine) {
-    .bds2150Button-button.bds2150Button---default:hover {
+    .bds2170Button-button.bds2170Button---default:hover {
       --button_bg--variant: var(--button_bg--hover, var(--bds-color_bg));
       --button_text--variant: var(--button_text--hover, var(--bds-color_interactive_on-bg));
       --button_border--variant: var(--button_border--hover, currentcolor);
@@ -1422,25 +1501,25 @@
     }
   }
   @media (hover: hover) and (pointer: fine) {
-    .bds2150Button-button.bds2150Button---outline:hover,
-    .bds2150Button-button.bds2150Button---ghost:hover {
+    .bds2170Button-button.bds2170Button---outline:hover,
+    .bds2170Button-button.bds2170Button---ghost:hover {
       --button_bg--variant: var(--button_bg--outline-hover, var(--button_color, var(--bds-color_interactive)));
       --button_text--variant: var(--button_text--outline-hover, var(--button_on-color, var(--bds-color_on-interactive)));
       --button_border--variant: var(--button_border--outline-hover, transparent);
     }
   }
   @media (prefers-reduced-motion: reduce) {
-    .bds2150Button-button.bds2150Button---hasPulse,
-    .bds2150Button-button:hover .bds2150Button-iconStart svg,
-    .bds2150Button-button:hover .bds2150Button-iconEnd svg {
+    .bds2170Button-button.bds2170Button---hasPulse,
+    .bds2170Button-button:hover .bds2170Button-iconStart svg,
+    .bds2170Button-button:hover .bds2170Button-iconEnd svg {
       animation: none;
     }
   }
 }
 
 /* src/components/interaction/Command/Command.module.css */
-@layer boostdev.bds2150Command-component {
-  .bds2150Command-dialog {
+@layer boostdev.bds2170Command-component {
+  .bds2170Command-dialog {
     padding: 0;
     border: none;
     border-radius: var(--command_radius, var(--bds-border_radius--m));
@@ -1450,11 +1529,11 @@
     overflow: visible;
     margin-block-start: 10vh;
   }
-  .bds2150Command-dialog::backdrop {
+  .bds2170Command-dialog::backdrop {
     background-color: var(--color_backdrop, rgb(0 0 0 / 50%));
     backdrop-filter: blur(3px);
   }
-  .bds2150Command-palette {
+  .bds2170Command-palette {
     display: flex;
     flex-direction: column;
     background-color: var(--command_color, var(--bds-color_bg--strong, var(--bds-color_bg)));
@@ -1467,7 +1546,7 @@
     border-radius: var(--command_radius, var(--bdc-outline_radius));
     box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--command_shadow, var(--bds-shadow_xl));
   }
-  .bds2150Command-searchRow {
+  .bds2170Command-searchRow {
     display: flex;
     align-items: center;
     gap: var(--bds-space_xs);
@@ -1475,13 +1554,13 @@
     border-block-end: 1px solid currentcolor;
     flex-shrink: 0;
   }
-  .bds2150Command-searchIcon {
+  .bds2170Command-searchIcon {
     inline-size: 1.25rem;
     block-size: 1.25rem;
     color: var(--bds-color_on-bg);
     flex-shrink: 0;
   }
-  .bds2150Command-search {
+  .bds2170Command-search {
     flex: 1;
     border: none;
     font-family: var(--bds-font_family--body);
@@ -1490,14 +1569,14 @@
     background: transparent;
     min-inline-size: 0;
   }
-  .bds2150Command-search:focus-visible {
+  .bds2170Command-search:focus-visible {
     outline: var(--bds-outline_default);
     outline-offset: var(--bds-outline_offset);
   }
-  .bds2150Command-search::placeholder {
+  .bds2170Command-search::placeholder {
     color: var(--bds-color_on-bg);
   }
-  .bds2150Command-escHint {
+  .bds2170Command-escHint {
     font-size: var(--bds-font_size--body--s);
     color: var(--bds-color_on-bg);
     border-radius: var(--command_kbd-radius, var(--bds-border_radius--xs));
@@ -1507,18 +1586,18 @@
     border: none;
     box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color);
   }
-  .bds2150Command-list {
+  .bds2170Command-list {
     overflow-block: auto;
     list-style: none;
     margin: 0;
     padding: var(--bds-space_xs) 0;
   }
-  .bds2150Command-groupList {
+  .bds2170Command-groupList {
     list-style: none;
     margin: 0;
     padding: 0;
   }
-  .bds2150Command-group {
+  .bds2170Command-group {
     padding: var(--bds-space_xs) var(--bds-space_m);
     font-size: var(--bds-font_size--body--s);
     font-weight: var(--bds-font_weight--semibold);
@@ -1526,7 +1605,7 @@
     text-transform: uppercase;
     letter-spacing: 0.05em;
   }
-  .bds2150Command-item {
+  .bds2170Command-item {
     display: flex;
     align-items: center;
     gap: var(--bds-space_s);
@@ -1534,19 +1613,19 @@
     cursor: pointer;
     transition: background-color var(--bds-animation_transition-duration) var(--bds-animation_easing);
   }
-  .bds2150Command-itemActive {
+  .bds2170Command-itemActive {
     background-color: var(--command_item-bg--active, var(--bds-color_bg--subtle));
   }
-  .bds2150Command-itemLabel {
+  .bds2170Command-itemLabel {
     flex: 1;
     font-size: var(--bds-font_size--body);
     color: var(--bds-color_on-bg);
   }
-  .bds2150Command-itemDesc {
+  .bds2170Command-itemDesc {
     font-size: var(--bds-font_size--body--s);
     color: var(--bds-color_on-bg);
   }
-  .bds2150Command-shortcut {
+  .bds2170Command-shortcut {
     font-size: var(--bds-font_size--body--s);
     color: var(--bds-color_on-bg);
     border-radius: var(--command_kbd-radius, var(--bds-border_radius--xs));
@@ -1555,13 +1634,13 @@
     border: none;
     box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color);
   }
-  .bds2150Command-empty {
+  .bds2170Command-empty {
     padding: var(--bds-space_l) var(--bds-space_m);
     text-align: center;
     color: var(--bds-color_on-bg);
     font-size: var(--bds-font_size--body);
   }
-  .bds2150Command-srOnly {
+  .bds2170Command-srOnly {
     position: absolute;
     inline-size: 1px;
     block-size: 1px;
@@ -1573,8 +1652,8 @@
 }
 
 /* src/components/interaction/Dialog/Dialog.module.css */
-@layer boostdev.bds2150Dialog-component {
-  .bds2150Dialog-dialog {
+@layer boostdev.bds2170Dialog-component {
+  .bds2170Dialog-dialog {
     font-size: var(--bds-font_size--body--s);
     border: var(--dialog_border, none);
     --bdc_color: currentcolor;
@@ -1590,17 +1669,17 @@
     max-block-size: 90svh;
     overflow: visible;
   }
-  .bds2150Dialog-dialog:not([open]) {
+  .bds2170Dialog-dialog:not([open]) {
     display: none;
   }
-  .bds2150Dialog-dialogContent {
+  .bds2170Dialog-dialogContent {
     display: grid;
     gap: var(--bds-grid_gap);
     overflow-block: auto;
     min-block-size: 0;
     flex: 1;
   }
-  .bds2150Dialog-closeButton {
+  .bds2170Dialog-closeButton {
     all: unset;
     position: absolute;
     inset-block-start: -1em;
@@ -1618,29 +1697,29 @@
     box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color);
     cursor: pointer;
   }
-  .bds2150Dialog-closeButton::after {
+  .bds2170Dialog-closeButton::after {
     content: "";
     position: absolute;
     inset-block: -0.5rem;
     inset-inline: -0.5rem;
   }
-  .bds2150Dialog-closeButton:focus-visible {
+  .bds2170Dialog-closeButton:focus-visible {
     outline: var(--bds-outline_default);
     outline-offset: var(--bds-outline_offset);
   }
-  .bds2150Dialog-closeButton svg {
+  .bds2170Dialog-closeButton svg {
     inline-size: 1.25em;
     block-size: 1.25em;
   }
-  .bds2150Dialog-dialog::backdrop {
+  .bds2170Dialog-dialog::backdrop {
     background-color: var(--color_backdrop, rgb(0 0 0 / 50%));
     backdrop-filter: blur(3px);
   }
 }
 
 /* src/components/interaction/Drawer/Drawer.module.css */
-@layer boostdev.bds2150Drawer-component {
-  .bds2150Drawer-drawer {
+@layer boostdev.bds2170Drawer-component {
+  .bds2170Drawer-drawer {
     position: fixed;
     inset-block: 0;
     inset-inline: auto 0;
@@ -1663,37 +1742,37 @@
       display var(--bds-animation_transition-duration) var(--bds-animation_easing) allow-discrete,
       overlay var(--bds-animation_transition-duration) var(--bds-animation_easing) allow-discrete;
   }
-  .bds2150Drawer-drawer:not([open]) {
+  .bds2170Drawer-drawer:not([open]) {
     display: none;
   }
-  .bds2150Drawer-drawer:dir(rtl) {
+  .bds2170Drawer-drawer:dir(rtl) {
     translate: -100% 0;
   }
-  .bds2150Drawer---side_left.bds2150Drawer-drawer {
+  .bds2170Drawer---side_left.bds2170Drawer-drawer {
     inset-inline: 0 auto;
     translate: -100% 0;
   }
-  .bds2150Drawer---side_left.bds2150Drawer-drawer:dir(rtl) {
+  .bds2170Drawer---side_left.bds2170Drawer-drawer:dir(rtl) {
     translate: 100% 0;
   }
-  .bds2150Drawer-drawer[open] {
+  .bds2170Drawer-drawer[open] {
     translate: 0 0;
   }
   @starting-style {
-    .bds2150Drawer-drawer[open] {
+    .bds2170Drawer-drawer[open] {
       translate: 100% 0;
     }
-    .bds2150Drawer-drawer[open]:dir(rtl) {
+    .bds2170Drawer-drawer[open]:dir(rtl) {
       translate: -100% 0;
     }
-    .bds2150Drawer---side_left.bds2150Drawer-drawer[open] {
+    .bds2170Drawer---side_left.bds2170Drawer-drawer[open] {
       translate: -100% 0;
     }
-    .bds2150Drawer---side_left.bds2150Drawer-drawer[open]:dir(rtl) {
+    .bds2170Drawer---side_left.bds2170Drawer-drawer[open]:dir(rtl) {
       translate: 100% 0;
     }
   }
-  .bds2150Drawer-drawer::backdrop {
+  .bds2170Drawer-drawer::backdrop {
     background-color: var(--color_backdrop, rgb(0 0 0 / 50%));
     backdrop-filter: blur(3px);
     opacity: 0;
@@ -1702,15 +1781,15 @@
       display var(--bds-animation_transition-duration) var(--bds-animation_easing) allow-discrete,
       overlay var(--bds-animation_transition-duration) var(--bds-animation_easing) allow-discrete;
   }
-  .bds2150Drawer-drawer[open]::backdrop {
+  .bds2170Drawer-drawer[open]::backdrop {
     opacity: 1;
   }
   @starting-style {
-    .bds2150Drawer-drawer[open]::backdrop {
+    .bds2170Drawer-drawer[open]::backdrop {
       opacity: 0;
     }
   }
-  .bds2150Drawer-header {
+  .bds2170Drawer-header {
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -1718,7 +1797,7 @@
     border-block-end: 1px solid var(--drawer_border-color, var(--bds-color_on-bg--as-surface, var(--bds-color_on-bg--border, var(--bds-color_on-bg))));
     flex-shrink: 0;
   }
-  .bds2150Drawer-closeButton {
+  .bds2170Drawer-closeButton {
     all: unset;
     display: flex;
     align-items: center;
@@ -1729,20 +1808,20 @@
     cursor: pointer;
     transition: var(--bds-animation_transition);
   }
-  .bds2150Drawer-closeButton svg {
+  .bds2170Drawer-closeButton svg {
     inline-size: 1.25rem;
     block-size: 1.25rem;
   }
-  .bds2150Drawer-closeButton:focus-visible {
+  .bds2170Drawer-closeButton:focus-visible {
     outline: var(--bds-outline_default);
     outline-offset: var(--bds-outline_offset);
   }
   @media (hover: hover) and (pointer: fine) {
-    .bds2150Drawer-closeButton:hover {
+    .bds2170Drawer-closeButton:hover {
       background-color: var(--drawer_close-bg--hover, var(--bds-color_bg--subtle));
     }
   }
-  .bds2150Drawer-body {
+  .bds2170Drawer-body {
     flex: 1;
     overflow-block: auto;
     padding: var(--bds-space_l);
@@ -1750,79 +1829,118 @@
     flex-direction: column;
   }
   @media (prefers-reduced-motion: reduce) {
-    .bds2150Drawer-drawer,
-    .bds2150Drawer-drawer::backdrop {
+    .bds2170Drawer-drawer,
+    .bds2170Drawer-drawer::backdrop {
       transition: none;
     }
   }
 }
 
 /* src/components/interaction/DropdownMenu/DropdownMenu.module.css */
-@layer boostdev.bds2150DropdownMenu-component {
-  .bds2150DropdownMenu-wrapper {
+@layer boostdev.bds2170DropdownMenu-component {
+  .bds2170DropdownMenu-wrapper {
     position: relative;
     display: inline-flex;
   }
-  .bds2150DropdownMenu-menu {
+  .bds2170DropdownMenu-menu {
     position: absolute;
     inset-block-start: calc(100% + var(--bds-space_xxs));
     z-index: var(--bds-z-index_dropdown);
     min-inline-size: 10rem;
-    padding: var(--bds-space_xxs) 0;
+    padding: var(--dropdown_padding, var(--bds-space_xxs));
     border: var(--dropdown_border, none);
-    --bdc_color: currentcolor;
+    --bdc_color: var(--dropdown_border-color, var(--bds-color_on-bg--as-surface, var(--bds-color_on-bg--border, var(--bds-color_on-bg))));
     --bdc-outline_radius: var(--bds-border_radius--s);
     border-radius: var(--dropdown_radius, var(--bdc-outline_radius));
     background-color: var(--dropdown_color, var(--bds-color_bg--strong, var(--bds-color_bg)));
     color: var(--dropdown_on-color, var(--bds-color_on-bg));
-    box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--dropdown_shadow, var(--bds-shadow_m));
+    box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--dropdown_shadow, var(--bds-shadow_l));
     list-style: none;
     margin: 0;
   }
-  .bds2150DropdownMenu-menu li {
+  .bds2170DropdownMenu-menu li {
     list-style: none;
   }
-  .bds2150DropdownMenu---placement_bottom-start {
+  .bds2170DropdownMenu---placement_bottom-start {
     inset-inline-start: 0;
   }
-  .bds2150DropdownMenu---placement_bottom-end {
+  .bds2170DropdownMenu---placement_bottom-end {
     inset-inline-end: 0;
   }
-  .bds2150DropdownMenu-separator {
+  .bds2170DropdownMenu-separatorRow {
+    padding-block: var(--bds-space_xxs);
+  }
+  .bds2170DropdownMenu-separator {
     border: none;
     border-block-start: 1px solid var(--dropdown_separator-color, var(--bds-color_on-bg--as-surface, var(--bds-color_on-bg--border, var(--bds-color_on-bg))));
-    margin: var(--bds-space_xxs) 0;
+    margin: 0;
+  }
+  .bds2170DropdownMenu-group {
+    margin: 0;
+    padding: 0;
+    list-style: none;
   }
-  .bds2150DropdownMenu-item {
+  .bds2170DropdownMenu-groupLabel {
+    display: block;
+    padding: var(--dropdown_group-label-padding, var(--bds-space_xs) var(--bds-space_s) var(--bds-space_xxs));
+    font-family: var(--bds-font_family--body);
+    font-size: var(--dropdown_group-label-font-size, var(--bds-font_size--body--s));
+    font-weight: var(--dropdown_group-label-font-weight, var(--bds-font_weight--bold));
+    color: var(--dropdown_group-label-color, var(--bds-color_on-bg--muted, var(--bds-color_on-bg)));
+  }
+  .bds2170DropdownMenu-item {
     all: unset;
     display: flex;
     align-items: center;
     gap: var(--bds-space_xs);
     inline-size: 100%;
-    padding: var(--bds-space_xs) var(--bds-space_m);
+    padding: var(--dropdown_item-padding, var(--bds-space_xs) var(--bds-space_s));
+    border-radius: var(--dropdown_item-radius, var(--bds-border_radius--xs));
     font-family: var(--bds-font_family--body);
-    font-size: var(--bds-font_size--body);
+    font-size: var(--dropdown_item-font-size, var(--bds-font_size--body));
     color: currentcolor;
     cursor: pointer;
     box-sizing: border-box;
     transition: var(--bds-animation_transition);
   }
-  .bds2150DropdownMenu-item:disabled {
-    opacity: 0.4;
+  .bds2170DropdownMenu-item:disabled {
+    opacity: var(--dropdown_item-opacity--disabled, 0.4);
     cursor: not-allowed;
   }
-  .bds2150DropdownMenu-item:focus-visible {
+  .bds2170DropdownMenu-item:focus-visible {
     outline: var(--bds-outline_default);
     outline-offset: calc(var(--bds-outline_offset) * -1);
-    border-radius: var(--bds-border_radius--xs);
+  }
+  .bds2170DropdownMenu-item:not(:disabled):focus-visible {
+    background-color: var(--dropdown_item-bg--hover, var(--bds-color_primary--subtle, var(--bds-color_blue--subtle)));
+    color: var(--dropdown_item-color--hover, var(--bds-color_on-primary--subtle, var(--bds-color_on-blue--subtle)));
+  }
+  .bds2170DropdownMenu---destructive {
+    color: var(--dropdown_item-color--destructive, var(--bds-color_error_on-bg));
+  }
+  .bds2170DropdownMenu---destructive:not(:disabled):focus-visible {
+    background-color: var(--dropdown_item-bg--destructive-hover, var(--bds-color_error--subtle));
+    color: var(--dropdown_item-color--destructive-hover, var(--bds-color_on-error--subtle));
   }
   @media (hover: hover) and (pointer: fine) {
-    .bds2150DropdownMenu-item:not(:disabled):hover {
-      background-color: var(--dropdown_item-bg--hover, var(--bds-color_bg--subtle));
-      color: var(--dropdown_item-color--hover, var(--bds-color_interactive_on-bg));
+    .bds2170DropdownMenu-item:not(:disabled):hover {
+      background-color: var(--dropdown_item-bg--hover, var(--bds-color_primary--subtle, var(--bds-color_blue--subtle)));
+      color: var(--dropdown_item-color--hover, var(--bds-color_on-primary--subtle, var(--bds-color_on-blue--subtle)));
     }
+    .bds2170DropdownMenu---destructive:not(:disabled):hover {
+      background-color: var(--dropdown_item-bg--destructive-hover, var(--bds-color_error--subtle));
+      color: var(--dropdown_item-color--destructive-hover, var(--bds-color_on-error--subtle));
+    }
+  }
+  .bds2170DropdownMenu-label {
+    flex: 1;
+  }
+  .bds2170DropdownMenu-shortcut {
+    flex-shrink: 0;
+    color: var(--dropdown_shortcut-color, var(--bds-color_on-bg--muted, var(--bds-color_on-bg)));
+    font-size: var(--dropdown_shortcut-font-size, var(--bds-font_size--body--s));
   }
-  .bds2150DropdownMenu-icon {
+  .bds2170DropdownMenu-icon {
     display: flex;
     align-items: center;
     flex-shrink: 0;
@@ -1830,11 +1948,11 @@
 }
 
 /* src/components/interaction/Popover/Popover.module.css */
-@layer boostdev.bds2150Popover-component {
-  .bds2150Popover-wrapper {
+@layer boostdev.bds2170Popover-component {
+  .bds2170Popover-wrapper {
     display: inline-flex;
   }
-  .bds2150Popover-panel {
+  .bds2170Popover-panel {
     position: fixed;
     inset: unset;
     margin: 0;
@@ -1853,7 +1971,7 @@
     color: var(--popover_on-color, var(--bds-color_on-bg));
     font-size: var(--bds-font_size--body);
   }
-  .bds2150Popover-panel[data-placement=bottom] {
+  .bds2170Popover-panel[data-placement=bottom] {
     top: anchor(bottom);
     left: anchor(left);
     margin-block-start: var(--bds-space_xs);
@@ -1862,7 +1980,7 @@
       --popover-right,
       --popover-left;
   }
-  .bds2150Popover-panel[data-placement=top] {
+  .bds2170Popover-panel[data-placement=top] {
     bottom: anchor(top);
     left: anchor(left);
     margin-block-end: var(--bds-space_xs);
@@ -1871,7 +1989,7 @@
       --popover-right,
       --popover-left;
   }
-  .bds2150Popover-panel[data-placement=right] {
+  .bds2170Popover-panel[data-placement=right] {
     top: anchor(top);
     left: anchor(right);
     margin-inline-start: var(--bds-space_xs);
@@ -1880,7 +1998,7 @@
       --popover-bottom,
       --popover-top;
   }
-  .bds2150Popover-panel[data-placement=left] {
+  .bds2170Popover-panel[data-placement=left] {
     top: anchor(top);
     right: anchor(left);
     margin-inline-end: var(--bds-space_xs);
@@ -1938,10 +2056,10 @@
     margin-block-end: var(--bds-space_xs);
   }
   @media (width <= 420px) {
-    .bds2150Popover-panel[data-placement=bottom],
-    .bds2150Popover-panel[data-placement=top],
-    .bds2150Popover-panel[data-placement=left],
-    .bds2150Popover-panel[data-placement=right] {
+    .bds2170Popover-panel[data-placement=bottom],
+    .bds2170Popover-panel[data-placement=top],
+    .bds2170Popover-panel[data-placement=left],
+    .bds2170Popover-panel[data-placement=right] {
       inset-inline: var(--bds-space_xs);
       inline-size: 100%;
       max-inline-size: calc(100svw - 2 * var(--bds-space_xs));
@@ -1949,13 +2067,13 @@
     }
   }
   @media (aspect-ratio >= 2/1) {
-    .bds2150Popover-panel[data-placement=bottom] {
+    .bds2170Popover-panel[data-placement=bottom] {
       position-try-fallbacks:
         --popover-top,
         --popover-right,
         --popover-left;
     }
-    .bds2150Popover-panel[data-placement=top] {
+    .bds2170Popover-panel[data-placement=top] {
       position-try-fallbacks:
         --popover-bottom,
         --popover-right,
@@ -1965,24 +2083,28 @@
 }
 
 /* src/components/interaction/Rating/Rating.module.css */
-@layer boostdev.bds2150Rating-component {
-  .bds2150Rating-rating {
+@layer boostdev.bds2170Rating-component {
+  .bds2170Rating-rating {
     display: inline-flex;
     gap: var(--bds-space_xxxs);
     color: var(--rating_color, var(--bds-color_bg));
   }
-  .bds2150Rating-star {
+  .bds2170Rating-star {
     inline-size: 1.5em;
     block-size: 1.5em;
+    stroke: var(--rating_stroke-color, var(--bds-color_on-bg--as-surface, var(--bds-color_on-bg--border, var(--bds-color_on-bg))));
+    stroke-width: var(--rating_stroke-width, var(--bdc-outline_width));
+    stroke-linejoin: round;
   }
-  .bds2150Rating---filled {
+  .bds2170Rating---filled {
     color: var(--rating_color--filled, var(--bds-color_warning));
+    stroke: var(--rating_stroke-color--filled, currentcolor);
   }
 }
 
 /* src/components/interaction/Toast/Toast.module.css */
-@layer boostdev.bds2150Toast-component {
-  .bds2150Toast-toastContainer {
+@layer boostdev.bds2170Toast-component {
+  .bds2170Toast-toastContainer {
     position: fixed;
     inset: unset;
     inset-block-end: var(--bds-space_xl);
@@ -1994,7 +2116,7 @@
     padding: 0;
     background: transparent;
   }
-  .bds2150Toast-toast {
+  .bds2170Toast-toast {
     padding: var(--bds-space_m) var(--bds-space_l);
     background-color: var(--toast_color, var(--toast_color--variant, var(--bds-color_bg--strong, var(--bds-color_bg))));
     color: var(--toast_on-color, var(--toast_on-color--variant, var(--bds-color_on-bg)));
@@ -2006,29 +2128,29 @@
     min-inline-size: min(300px, calc(100svw - 2 * var(--bds-space_xl)));
     animation: slideIn var(--bds-animation_duration--fast) var(--bds-animation_easing);
   }
-  .bds2150Toast-toast:dir(rtl) {
+  .bds2170Toast-toast:dir(rtl) {
     --toast_slide-offset: -100%;
   }
-  .bds2150Toast-toast.bds2150Toast---variant_success {
+  .bds2170Toast-toast.bds2170Toast---variant_success {
     --toast_color--variant: var(--toast_color--success, var(--bds-color_success));
     --toast_on-color--variant: var(--toast_on-color--success, var(--bds-color_on-success));
   }
-  .bds2150Toast-toast.bds2150Toast---variant_warning {
+  .bds2170Toast-toast.bds2170Toast---variant_warning {
     --toast_color--variant: var(--toast_color--warning, var(--bds-color_warning));
     --toast_on-color--variant: var(--toast_on-color--warning, var(--bds-color_on-warning));
   }
-  .bds2150Toast-toast.bds2150Toast---variant_info {
+  .bds2170Toast-toast.bds2170Toast---variant_info {
     --toast_color--variant: var(--toast_color--info, var(--bds-color_bg--subtle));
     --toast_on-color--variant: var(--toast_on-color--info, var(--bds-color_on-bg--subtle));
   }
-  .bds2150Toast-toast.bds2150Toast---variant_error {
+  .bds2170Toast-toast.bds2170Toast---variant_error {
     --toast_color--variant: var(--toast_color--error, var(--bds-color_error));
     --toast_on-color--variant: var(--toast_on-color--error, var(--bds-color_on-error));
   }
-  .bds2150Toast-message {
+  .bds2170Toast-message {
     flex: 1;
   }
-  .bds2150Toast-closeButton {
+  .bds2170Toast-closeButton {
     position: relative;
     display: flex;
     align-items: center;
@@ -2042,16 +2164,16 @@
     cursor: pointer;
     color: currentcolor;
   }
-  .bds2150Toast-closeButton::after {
+  .bds2170Toast-closeButton::after {
     content: "";
     position: absolute;
     inset: -0.75rem;
   }
-  .bds2150Toast-closeButton:focus-visible {
+  .bds2170Toast-closeButton:focus-visible {
     outline: var(--bds-outline_default);
     outline-offset: var(--bds-outline_offset);
   }
-  .bds2150Toast-closeButton svg {
+  .bds2170Toast-closeButton svg {
     inline-size: 1rem;
     block-size: 1rem;
   }
@@ -2067,25 +2189,25 @@
   }
 }
 @media (prefers-reduced-motion: reduce) {
-  .bds2150Toast-toast {
+  .bds2170Toast-toast {
     animation: none;
   }
 }
 
 /* src/components/interaction/form/Checkbox/Checkbox.module.css */
-@layer boostdev.bds2150Checkbox-component {
-  .bds2150Checkbox-checkboxGroup {
+@layer boostdev.bds2170Checkbox-component {
+  .bds2170Checkbox-checkboxGroup {
     --checkbox_size: calc(var(--bds-space_s) * 2);
     --inputSize: var(--checkbox_size);
     display: flex;
     flex-direction: column;
   }
-  .bds2150Checkbox-inputWrapper {
+  .bds2170Checkbox-inputWrapper {
     display: flex;
     align-items: stretch;
     gap: var(--checkbox_gap, var(--bds-space_m));
   }
-  .bds2150Checkbox-checkbox {
+  .bds2170Checkbox-checkbox {
     margin-block-start: var(--checkbox_offset, 0.25em);
     inline-size: var(--checkbox_size);
     block-size: var(--checkbox_size);
@@ -2101,11 +2223,11 @@
     position: relative;
     transition: --bdc_color var(--bds-animation_transition-duration) var(--bds-animation_easing), background-color var(--bds-animation_transition-duration) var(--bds-animation_easing);
   }
-  .bds2150Checkbox-checkbox:checked {
+  .bds2170Checkbox-checkbox:checked {
     background-color: var(--checkbox_color-active, var(--bdc-color_active));
     --bdc_color: var(--checkbox_color-active, var(--bdc-color_active));
   }
-  .bds2150Checkbox-checkbox:checked::after {
+  .bds2170Checkbox-checkbox:checked::after {
     content: "";
     position: absolute;
     inset-inline-start: 0.6em;
@@ -2116,40 +2238,51 @@
     border-width: 0 2px 2px 0;
     transform: rotate(45deg);
   }
-  .bds2150Checkbox-checkbox:focus {
+  .bds2170Checkbox-checkbox:focus {
     --bdc_color: var(--bdc_color--focus);
   }
-  .bds2150Checkbox-checkbox:focus-visible {
+  .bds2170Checkbox-checkbox:focus-visible {
     outline: var(--bds-outline_default);
     outline-offset: var(--bds-outline_offset);
   }
-  .bds2150Checkbox-checkbox:disabled {
+  .bds2170Checkbox-checkbox:disabled {
     opacity: 0.5;
     cursor: not-allowed;
   }
-  .bds2150Checkbox-checkboxError {
+  .bds2170Checkbox-checkboxError {
     --bdc_color: var(--bdc_color--error);
+    --bdc-outline_width: var(--bdc-outline_width--error, 2px);
   }
 }
 
 /* src/components/interaction/form/atoms/Message.module.css */
-@layer boostdev.bds2150Message-component {
-  .bds2150Message-error,
-  .bds2150Message-hint {
-    font-size: var(--bds-font_size--body--s);
+@layer boostdev.bds2170Message-component {
+  .bds2170Message-error,
+  .bds2170Message-hint {
+    font-size: var(--formMessage_font-size, var(--bds-font_size--body--s));
     margin-inline-start: var(--labelPosition, 0);
   }
-  .bds2150Message-error {
-    color: var(--bds-color_error_on-bg);
+  .bds2170Message-error {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--formMessage_gap, var(--bds-space_xxs));
+    color: var(--formMessage_color--error, var(--bds-color_error_on-bg));
+    font-weight: var(--formMessage_font-weight--error, var(--bds-font_weight--semibold));
   }
-  .bds2150Message-hint {
-    font-style: italic;
+  .bds2170Message-hint {
+    color: var(--formMessage_color--hint, inherit);
+    font-style: var(--formMessage_font-style--hint, italic);
+  }
+  .bds2170Message-icon {
+    inline-size: var(--formMessage_icon-size, 1.15em);
+    block-size: var(--formMessage_icon-size, 1.15em);
+    flex-shrink: 0;
   }
 }
 
 /* src/components/interaction/form/atoms/Label.module.css */
-@layer boostdev.bds2150Label-component {
-  .bds2150Label-label {
+@layer boostdev.bds2170Label-component {
+  .bds2170Label-label {
     display: flex;
     align-items: center;
     font-family: var(--bds-font_family--body);
@@ -2159,8 +2292,8 @@
 }
 
 /* src/components/interaction/form/atoms/InputContainer.module.css */
-@layer boostdev.bds2150InputContainer-component {
-  .bds2150InputContainer-container {
+@layer boostdev.bds2170InputContainer-component {
+  .bds2170InputContainer-container {
     --labelPosition: calc(var(--inputSize) + var(--bds-space_m));
     display: flex;
     flex-direction: column;
@@ -2169,8 +2302,8 @@
 }
 
 /* src/components/interaction/form/CheckboxGroup/CheckboxGroup.module.css */
-@layer boostdev.bds2150CheckboxGroup-component {
-  .bds2150CheckboxGroup-group {
+@layer boostdev.bds2170CheckboxGroup-component {
+  .bds2170CheckboxGroup-group {
     border: none;
     padding: 0;
     margin: 0;
@@ -2178,18 +2311,18 @@
     flex-direction: column;
     gap: var(--checkboxGroup_gap, var(--bds-space_xs));
   }
-  .bds2150CheckboxGroup-legend {
+  .bds2170CheckboxGroup-legend {
     font-family: var(--checkboxGroup_legend-font-family, var(--bds-font_family--body));
-    font-size: var(--checkboxGroup_legend-font-size, var(--bds-font_size--body--s));
+    font-size: var(--checkboxGroup_legend-font-size, var(--bds-font_size--body));
     font-weight: var(--checkboxGroup_legend-font-weight, var(--bds-font_weight--medium));
     color: var(--checkboxGroup_legend-color, var(--bds-color_on-bg));
     padding: 0;
     margin-block-end: var(--checkboxGroup_legend-gap, var(--bds-space_xs));
   }
-  .bds2150CheckboxGroup-required {
+  .bds2170CheckboxGroup-required {
     color: var(--checkboxGroup_required-color, var(--bds-color_error));
   }
-  .bds2150CheckboxGroup-requiredLabel {
+  .bds2170CheckboxGroup-requiredLabel {
     position: absolute;
     inline-size: 1px;
     block-size: 1px;
@@ -2200,25 +2333,29 @@
     white-space: nowrap;
     border-width: 0;
   }
-  .bds2150CheckboxGroup-items {
+  .bds2170CheckboxGroup-items {
     display: flex;
     flex-direction: column;
     gap: var(--checkboxGroup_items-gap, var(--bds-space_xs));
   }
+  .bds2170CheckboxGroup-groupError input {
+    --bdc_color: var(--bdc_color--error);
+    --bdc-outline_width: var(--bdc-outline_width--error, 2px);
+  }
 }
 
 /* src/components/interaction/form/Combobox/Combobox.module.css */
-@layer boostdev.bds2150Combobox-component {
-  .bds2150Combobox-formGroup {
+@layer boostdev.bds2170Combobox-component {
+  .bds2170Combobox-formGroup {
     display: flex;
     flex-direction: column;
   }
-  .bds2150Combobox-inputWrapper {
+  .bds2170Combobox-inputWrapper {
     position: relative;
     display: flex;
     align-items: center;
   }
-  .bds2150Combobox-input {
+  .bds2170Combobox-input {
     appearance: none;
     inline-size: 100%;
     font-family: var(--bds-font_family--body);
@@ -2234,21 +2371,22 @@
     color: var(--combobox_color, var(--bds-color_on-bg));
     transition: --bdc_color var(--bds-animation_transition-duration) var(--bds-animation_easing), background-color var(--bds-animation_transition-duration) var(--bds-animation_easing);
   }
-  .bds2150Combobox-input:focus {
+  .bds2170Combobox-input:focus {
     --bdc_color: var(--bdc_color--focus);
   }
-  .bds2150Combobox-input:focus-visible {
+  .bds2170Combobox-input:focus-visible {
     outline: var(--bds-outline_default);
     outline-offset: var(--bds-outline_offset);
   }
-  .bds2150Combobox-input:disabled {
+  .bds2170Combobox-input:disabled {
     opacity: 0.5;
     cursor: not-allowed;
   }
-  .bds2150Combobox-inputError {
+  .bds2170Combobox-inputError {
     --bdc_color: var(--bdc_color--error);
+    --bdc-outline_width: var(--bdc-outline_width--error, 2px);
   }
-  .bds2150Combobox-chevron {
+  .bds2170Combobox-chevron {
     position: absolute;
     inset-inline-end: var(--bds-space_s);
     display: flex;
@@ -2256,11 +2394,11 @@
     pointer-events: none;
     color: var(--combobox_color, var(--bds-color_on-bg));
   }
-  .bds2150Combobox-chevron svg {
+  .bds2170Combobox-chevron svg {
     inline-size: 1rem;
     block-size: 1rem;
   }
-  .bds2150Combobox-listbox {
+  .bds2170Combobox-listbox {
     position: absolute;
     inset-block-start: calc(100% + var(--bds-space_xxs));
     inset-inline: 0;
@@ -2278,7 +2416,7 @@
     color: var(--combobox_on-color, var(--bds-color_on-bg));
     box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--combobox_listbox-shadow, var(--bds-shadow_m));
   }
-  .bds2150Combobox-option {
+  .bds2170Combobox-option {
     display: flex;
     align-items: center;
     padding: var(--combobox_option-padding-block, var(--bds-space_xs)) var(--combobox_option-padding-inline, var(--bds-space_m));
@@ -2287,29 +2425,29 @@
     cursor: pointer;
     transition: var(--bds-animation_transition);
   }
-  .bds2150Combobox-option.bds2150Combobox---highlighted {
+  .bds2170Combobox-option.bds2170Combobox---highlighted {
     background-color: var(--combobox_option-bg--highlighted, var(--bds-color_bg--subtle));
     color: var(--combobox_option-color--highlighted, var(--bds-color_interactive_on-bg));
   }
-  .bds2150Combobox-option.bds2150Combobox---selected {
+  .bds2170Combobox-option.bds2170Combobox---selected {
     font-weight: var(--bds-font_weight--semibold);
   }
-  .bds2150Combobox-option.bds2150Combobox---disabled {
+  .bds2170Combobox-option.bds2170Combobox---disabled {
     opacity: 0.4;
     cursor: not-allowed;
   }
 }
 
 /* src/components/interaction/form/FieldGroup/FieldGroup.module.css */
-@layer boostdev.bds2150FieldGroup-component {
-  .bds2150FieldGroup-fieldGroup {
+@layer boostdev.bds2170FieldGroup-component {
+  .bds2170FieldGroup-fieldGroup {
     border: 0;
     margin: 0;
     padding: 0;
     min-inline-size: 0;
     --fieldGroup_collapse-threshold: calc( var(--fieldGroup_field-count, 1) * var(--fieldGroup_min-field-width, 12rem) + (var(--fieldGroup_field-count, 1) - 1) * var(--fieldGroup_gap, var(--bds-space_m)) );
   }
-  .bds2150FieldGroup-legend {
+  .bds2170FieldGroup-legend {
     inline-size: 100%;
     padding-inline: 0;
     padding-block: var(--fieldGroup_legend-padding-block, var(--bds-space_xs));
@@ -2321,28 +2459,28 @@
     font-weight: var(--fieldGroup_legend-font-weight, var(--bds-font_weight--semibold));
     line-height: var(--fieldGroup_legend-line-height, var(--bds-font_line-height--heading));
   }
-  .bds2150FieldGroup-fieldGroup:disabled .bds2150FieldGroup-legend {
+  .bds2170FieldGroup-fieldGroup:disabled .bds2170FieldGroup-legend {
     opacity: 0.5;
   }
-  .bds2150FieldGroup-fields {
+  .bds2170FieldGroup-fields {
     display: flex;
     flex-direction: column;
     gap: var(--fieldGroup_gap, var(--bds-space_m));
   }
-  .bds2150FieldGroup-fieldGroup.bds2150FieldGroup---variant_horizontal .bds2150FieldGroup-fields {
+  .bds2170FieldGroup-fieldGroup.bds2170FieldGroup---variant_horizontal .bds2170FieldGroup-fields {
     flex-flow: row wrap;
   }
-  .bds2150FieldGroup-fieldGroup.bds2150FieldGroup---variant_horizontal .bds2150FieldGroup-fields > * {
+  .bds2170FieldGroup-fieldGroup.bds2170FieldGroup---variant_horizontal .bds2170FieldGroup-fields > * {
     flex: 1 1 var(--fieldGroup_min-field-width, 12rem);
     min-inline-size: 0;
   }
-  .bds2150FieldGroup-probeContainer {
+  .bds2170FieldGroup-probeContainer {
     position: relative;
     inline-size: 0;
     block-size: 0;
     overflow: hidden;
   }
-  .bds2150FieldGroup-probe {
+  .bds2170FieldGroup-probe {
     position: absolute;
     inset-block-start: 0;
     inset-inline-start: 0;
@@ -2350,28 +2488,28 @@
     inline-size: var(--fieldGroup_collapse-threshold);
     visibility: hidden;
   }
-  .bds2150FieldGroup-fieldGroup.bds2150FieldGroup---variant_horizontal[data-collapsed=true] .bds2150FieldGroup-fields {
+  .bds2170FieldGroup-fieldGroup.bds2170FieldGroup---variant_horizontal[data-collapsed=true] .bds2170FieldGroup-fields {
     flex-direction: column;
   }
-  .bds2150FieldGroup-fieldGroup.bds2150FieldGroup---variant_horizontal[data-collapsed=true] .bds2150FieldGroup-fields > * {
+  .bds2170FieldGroup-fieldGroup.bds2170FieldGroup---variant_horizontal[data-collapsed=true] .bds2170FieldGroup-fields > * {
     flex: 1 1 auto;
   }
 }
 
 /* src/components/interaction/form/FileInput/FileInput.module.css */
-@layer boostdev.bds2150FileInput-component {
-  .bds2150FileInput-formGroup {
+@layer boostdev.bds2170FileInput-component {
+  .bds2170FileInput-formGroup {
     display: flex;
     flex-direction: column;
   }
-  .bds2150FileInput-fieldLabel {
+  .bds2170FileInput-fieldLabel {
     display: flex;
     align-items: center;
     font-family: var(--bds-font_family--body);
     color: var(--bds-color_on-bg);
     margin-block-end: var(--fileInput_label-margin, var(--bds-space_xs));
   }
-  .bds2150FileInput-dropZone {
+  .bds2170FileInput-dropZone {
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -2385,40 +2523,40 @@
     text-align: center;
     transition: var(--bds-animation_transition);
   }
-  .bds2150FileInput-dropZone:focus-within {
+  .bds2170FileInput-dropZone:focus-within {
     outline: var(--bds-outline_default);
     outline-offset: var(--bds-outline_offset);
     border-color: var(--fileInput_border-color, currentcolor);
   }
-  .bds2150FileInput-isDragging {
+  .bds2170FileInput-isDragging {
     border-color: currentcolor;
     background-color: var(--fileInput_bg--dragging, rgb(from currentcolor r g b / 8%));
   }
-  .bds2150FileInput-hasError {
+  .bds2170FileInput-hasError {
     border-color: var(--bds-color_error);
   }
-  .bds2150FileInput-isDisabled {
+  .bds2170FileInput-isDisabled {
     opacity: 0.5;
     cursor: not-allowed;
   }
-  .bds2150FileInput-icon {
+  .bds2170FileInput-icon {
     inline-size: 2rem;
     block-size: 2rem;
     flex-shrink: 0;
   }
-  .bds2150FileInput-prompt {
+  .bds2170FileInput-prompt {
     font-size: var(--fileInput_font-size, var(--bds-font_size--body));
     color: var(--bds-color_on-bg);
   }
-  .bds2150FileInput-prompt strong {
+  .bds2170FileInput-prompt strong {
     color: var(--bds-color_interactive_on-bg);
     font-weight: var(--bds-font_weight--semibold);
   }
-  .bds2150FileInput-acceptHint {
+  .bds2170FileInput-acceptHint {
     font-size: var(--fileInput_font-size--hint, var(--bds-font_size--body--s));
     color: var(--bds-color_on-bg);
   }
-  .bds2150FileInput-hiddenInput {
+  .bds2170FileInput-hiddenInput {
     position: absolute;
     inline-size: 1px;
     block-size: 1px;
@@ -2428,7 +2566,7 @@
     border: 0;
   }
   @media (hover: hover) and (pointer: fine) {
-    .bds2150FileInput-dropZone:not(.bds2150FileInput-isDisabled):hover {
+    .bds2170FileInput-dropZone:not(.bds2170FileInput-isDisabled):hover {
       border-color: var(--fileInput_border-color--hover, var(--bds-color_interactive));
       background-color: var(--fileInput_bg--hover, rgb(from var(--bds-color_interactive) r g b / 4%));
     }
@@ -2436,13 +2574,13 @@
 }
 
 /* src/components/interaction/form/FormInput/FormInput.module.css */
-@layer boostdev.bds2150FormInput-component {
-  .bds2150FormInput-formGroup {
+@layer boostdev.bds2170FormInput-component {
+  .bds2170FormInput-formGroup {
     --labelPosition: 0;
     display: flex;
     flex-direction: column;
   }
-  .bds2150FormInput-input {
+  .bds2170FormInput-input {
     font-family: var(--formInput_font-family, var(--bds-font_family--body));
     font-size: var(--formInput_font-size, var(--bds-font_size--body));
     padding: var(--formInput_padding, var(--bds-space_s));
@@ -2455,29 +2593,30 @@
     background-color: var(--formInput_color_bg, var(--input_color_bg, var(--bds-color_bg)));
     transition: --bdc_color var(--bds-animation_transition-duration) var(--bds-animation_easing), background-color var(--bds-animation_transition-duration) var(--bds-animation_easing);
   }
-  .bds2150FormInput-input:focus {
+  .bds2170FormInput-input:focus {
     --bdc_color: var(--bdc_color--focus);
   }
-  .bds2150FormInput-input:focus-visible {
+  .bds2170FormInput-input:focus-visible {
     outline: var(--bds-outline_default);
     outline-offset: var(--bds-outline_offset);
   }
-  .bds2150FormInput-input:disabled {
+  .bds2170FormInput-input:disabled {
     cursor: not-allowed;
     opacity: 0.5;
   }
-  .bds2150FormInput-inputError {
+  .bds2170FormInput-inputError {
     --bdc_color: var(--bdc_color--error);
+    --bdc-outline_width: var(--bdc-outline_width--error, 2px);
   }
 }
 
 /* src/components/interaction/form/NumberInput/NumberInput.module.css */
-@layer boostdev.bds2150NumberInput-component {
-  .bds2150NumberInput-formGroup {
+@layer boostdev.bds2170NumberInput-component {
+  .bds2170NumberInput-formGroup {
     display: flex;
     flex-direction: column;
   }
-  .bds2150NumberInput-inputRow {
+  .bds2170NumberInput-inputRow {
     display: flex;
     align-items: stretch;
     border: var(--numberInput_border, none);
@@ -2489,14 +2628,14 @@
     overflow: hidden;
     transition: --bdc_color var(--bds-animation_transition-duration) var(--bds-animation_easing);
   }
-  .bds2150NumberInput-inputRow:focus-within {
+  .bds2170NumberInput-inputRow:focus-within {
     --bdc_color: var(--bdc_color--focus);
   }
-  .bds2150NumberInput-inputRow:focus-within:has(:focus-visible) {
+  .bds2170NumberInput-inputRow:focus-within:has(:focus-visible) {
     outline: var(--bds-outline_default);
     outline-offset: var(--bds-outline_offset);
   }
-  .bds2150NumberInput-input {
+  .bds2170NumberInput-input {
     flex: 1;
     border: none;
     outline: none;
@@ -2509,14 +2648,15 @@
     min-inline-size: 0;
     appearance: textfield;
   }
-  .bds2150NumberInput-input::-webkit-inner-spin-button,
-  .bds2150NumberInput-input::-webkit-outer-spin-button {
+  .bds2170NumberInput-input::-webkit-inner-spin-button,
+  .bds2170NumberInput-input::-webkit-outer-spin-button {
     appearance: none;
   }
-  .bds2150NumberInput-inputError {
+  .bds2170NumberInput-inputError {
     --bdc_color: var(--bdc_color--error);
+    --bdc-outline_width: var(--bdc-outline_width--error, 2px);
   }
-  .bds2150NumberInput-stepper {
+  .bds2170NumberInput-stepper {
     all: unset;
     display: flex;
     align-items: center;
@@ -2529,25 +2669,25 @@
     transition: var(--bds-animation_transition);
     flex-shrink: 0;
   }
-  .bds2150NumberInput-stepper svg {
+  .bds2170NumberInput-stepper svg {
     inline-size: 1rem;
     block-size: 1rem;
     color: var(--numberInput_stepper-color, var(--bds-color_interactive));
   }
-  .bds2150NumberInput-stepper:first-child {
+  .bds2170NumberInput-stepper:first-child {
     border-start-start-radius: var(--_radius);
     border-end-start-radius: var(--_radius);
   }
-  .bds2150NumberInput-stepper:last-child {
+  .bds2170NumberInput-stepper:last-child {
     border-start-end-radius: var(--_radius);
     border-end-end-radius: var(--_radius);
   }
-  .bds2150NumberInput-stepper:disabled {
+  .bds2170NumberInput-stepper:disabled {
     opacity: 0.4;
     cursor: not-allowed;
   }
   @media (hover: hover) and (pointer: fine) {
-    .bds2150NumberInput-stepper:not(:disabled):hover {
+    .bds2170NumberInput-stepper:not(:disabled):hover {
       background-color: var(--numberInput_stepper-bg--hover, var(--bds-color_bg--subtle));
       opacity: var(--numberInput_stepper-opacity--hover, 0.7);
     }
@@ -2555,30 +2695,30 @@
 }
 
 /* src/components/interaction/form/Radio/Radio.module.css */
-@layer boostdev.bds2150Radio-component {
-  .bds2150Radio-radioGroup {
+@layer boostdev.bds2170Radio-component {
+  .bds2170Radio-radioGroup {
     --radio_size: calc(var(--bds-space_s) * 2);
     --inputSize: var(--radio_size);
     display: flex;
     flex-direction: column;
   }
-  .bds2150Radio-inputWrapper {
+  .bds2170Radio-inputWrapper {
     display: flex;
     align-items: flex-start;
     gap: var(--bds-space_xs);
   }
-  .bds2150Radio-textWrapper {
+  .bds2170Radio-textWrapper {
     display: flex;
     flex-direction: column;
     gap: var(--bds-space_xxxs);
     padding-block-start: var(--bds-space_xxxs);
   }
-  .bds2150Radio-description {
+  .bds2170Radio-description {
     font-size: var(--bds-font_size--body--s);
     color: var(--radio_description-color, var(--bds-color_on-bg--subtle));
     line-height: var(--bds-font_line-height--body);
   }
-  .bds2150Radio-radio {
+  .bds2170Radio-radio {
     flex-shrink: 0;
     margin-block-start: var(--radio_offset, 0.2em);
     inline-size: var(--radio_size);
@@ -2595,7 +2735,7 @@
     position: relative;
     transition: --bdc_color var(--bds-animation_transition-duration) var(--bds-animation_easing), background-color var(--bds-animation_transition-duration) var(--bds-animation_easing);
   }
-  .bds2150Radio-radio:checked {
+  .bds2170Radio-radio:checked {
     background:
       radial-gradient(
         circle,
@@ -2603,29 +2743,30 @@
         var(--radio_color_bg, var(--bds-color_bg)) 42%);
     --bdc_color: var(--radio_color-active, var(--bdc-color_active));
   }
-  .bds2150Radio-radio:focus {
+  .bds2170Radio-radio:focus {
     --bdc_color: var(--bdc_color--focus);
   }
-  .bds2150Radio-radio:focus-visible {
+  .bds2170Radio-radio:focus-visible {
     outline: var(--bds-outline_default);
     outline-offset: var(--bds-outline_offset);
   }
-  .bds2150Radio-radio:disabled {
+  .bds2170Radio-radio:disabled {
     cursor: not-allowed;
     opacity: 0.5;
   }
-  .bds2150Radio-radio:disabled ~ .bds2150Radio-textWrapper {
+  .bds2170Radio-radio:disabled ~ .bds2170Radio-textWrapper {
     opacity: 0.5;
     cursor: not-allowed;
   }
-  .bds2150Radio-radioError {
+  .bds2170Radio-radioError {
     --bdc_color: var(--bdc_color--error);
+    --bdc-outline_width: var(--bdc-outline_width--error, 2px);
   }
 }
 
 /* src/components/interaction/form/RadioGroup/RadioGroup.module.css */
-@layer boostdev.bds2150RadioGroup-component {
-  .bds2150RadioGroup-group {
+@layer boostdev.bds2170RadioGroup-component {
+  .bds2170RadioGroup-group {
     border: none;
     padding: 0;
     margin: 0;
@@ -2633,18 +2774,18 @@
     flex-direction: column;
     gap: var(--radioGroup_gap, var(--bds-space_xs));
   }
-  .bds2150RadioGroup-legend {
+  .bds2170RadioGroup-legend {
     font-family: var(--radioGroup_legend-font-family, var(--bds-font_family--body));
-    font-size: var(--radioGroup_legend-font-size, var(--bds-font_size--body--s));
+    font-size: var(--radioGroup_legend-font-size, var(--bds-font_size--body));
     font-weight: var(--radioGroup_legend-font-weight, var(--bds-font_weight--medium));
     color: var(--radioGroup_legend-color, var(--bds-color_on-bg));
     padding: 0;
     margin-block-end: var(--radioGroup_legend-gap, var(--bds-space_xs));
   }
-  .bds2150RadioGroup-required {
+  .bds2170RadioGroup-required {
     color: var(--radioGroup_required-color, var(--bds-color_error));
   }
-  .bds2150RadioGroup-requiredLabel {
+  .bds2170RadioGroup-requiredLabel {
     position: absolute;
     inline-size: 1px;
     block-size: 1px;
@@ -2655,16 +2796,20 @@
     white-space: nowrap;
     border-width: 0;
   }
-  .bds2150RadioGroup-items {
+  .bds2170RadioGroup-items {
     display: flex;
     flex-direction: column;
     gap: var(--radioGroup_items-gap, var(--bds-space_xs));
   }
+  .bds2170RadioGroup-groupError input {
+    --bdc_color: var(--bdc_color--error);
+    --bdc-outline_width: var(--bdc-outline_width--error, 2px);
+  }
 }
 
 /* src/components/interaction/form/SegmentedControl/SegmentedControl.module.css */
-@layer boostdev.bds2150SegmentedControl-component {
-  .bds2150SegmentedControl-control {
+@layer boostdev.bds2170SegmentedControl-component {
+  .bds2170SegmentedControl-control {
     position: relative;
     display: inline-grid;
     grid-auto-flow: column;
@@ -2675,11 +2820,11 @@
     gap: 0;
     --control_dir: 1;
   }
-  [dir=rtl] .bds2150SegmentedControl-control,
-  .bds2150SegmentedControl-control[dir=rtl] {
+  [dir=rtl] .bds2170SegmentedControl-control,
+  .bds2170SegmentedControl-control[dir=rtl] {
     --control_dir: -1;
   }
-  .bds2150SegmentedControl-thumb {
+  .bds2170SegmentedControl-thumb {
     position: absolute;
     inset-block: var(--control_track-pad, var(--bds-space_xxs));
     inset-inline-start: var(--control_track-pad, var(--bds-space_xxs));
@@ -2691,7 +2836,7 @@
     transform: translateX(calc(var(--control_selected-index, 0) * var(--control_dir, 1) * 100%));
     transition: transform var(--bds-animation_transition-duration) var(--bds-animation_easing);
   }
-  .bds2150SegmentedControl-indicator {
+  .bds2170SegmentedControl-indicator {
     position: absolute;
     inset-block: var(--control_track-pad, var(--bds-space_xxs));
     inset-inline-start: var(--control_track-pad, var(--bds-space_xxs));
@@ -2703,7 +2848,7 @@
     transform: translateX(calc(var(--control_selected-index, 0) * var(--control_dir, 1) * 100%));
     transition: transform var(--bds-animation_transition-duration) var(--bds-animation_easing);
   }
-  .bds2150SegmentedControl-item {
+  .bds2170SegmentedControl-item {
     position: relative;
     z-index: 1;
     display: flex;
@@ -2724,73 +2869,73 @@
     border: none;
     outline: none;
   }
-  .bds2150SegmentedControl-item:focus-visible {
+  .bds2170SegmentedControl-item:focus-visible {
     outline: var(--bds-outline_default);
     outline-offset: calc(var(--bds-outline_offset) * -1);
     border-radius: var(--control_thumb-radius, var(--bds-border_radius--full));
   }
-  .bds2150SegmentedControl-item.bds2150SegmentedControl---active {
+  .bds2170SegmentedControl-item.bds2170SegmentedControl---active {
     color: var(--control_label-color--active, var(--bds-color_on-interactive));
   }
-  .bds2150SegmentedControl-item.bds2150SegmentedControl---disabled {
+  .bds2170SegmentedControl-item.bds2170SegmentedControl---disabled {
     opacity: 0.5;
     cursor: not-allowed;
     pointer-events: none;
   }
-  .bds2150SegmentedControl-control.bds2150SegmentedControl---size_small .bds2150SegmentedControl-item {
+  .bds2170SegmentedControl-control.bds2170SegmentedControl---size_small .bds2170SegmentedControl-item {
     padding: var(--bds-space_xxs) var(--bds-space_s);
     font-size: var(--bds-font_size--body--s);
   }
-  .bds2150SegmentedControl-control.bds2150SegmentedControl---size_large .bds2150SegmentedControl-item {
+  .bds2170SegmentedControl-control.bds2170SegmentedControl---size_large .bds2170SegmentedControl-item {
     padding: var(--bds-space_s) var(--bds-space_m);
     white-space: normal;
     text-align: center;
   }
-  .bds2150SegmentedControl-control.bds2150SegmentedControl---variant_outline {
+  .bds2170SegmentedControl-control.bds2170SegmentedControl---variant_outline {
     --control_label-color--active: var(--bds-color_interactive);
   }
-  .bds2150SegmentedControl-control.bds2150SegmentedControl---variant_outline .bds2150SegmentedControl-thumb {
+  .bds2170SegmentedControl-control.bds2170SegmentedControl---variant_outline .bds2170SegmentedControl-thumb {
     display: none;
   }
-  .bds2150SegmentedControl-control.bds2150SegmentedControl---variant_outline .bds2150SegmentedControl-item {
+  .bds2170SegmentedControl-control.bds2170SegmentedControl---variant_outline .bds2170SegmentedControl-item {
     background-color: var(--control_item-bg, transparent);
   }
-  .bds2150SegmentedControl-control.bds2150SegmentedControl---variant_outline .bds2150SegmentedControl-item.bds2150SegmentedControl---active {
+  .bds2170SegmentedControl-control.bds2170SegmentedControl---variant_outline .bds2170SegmentedControl-item.bds2170SegmentedControl---active {
     background-color: var(--control_item-bg--active, var(--bds-color_bg));
   }
-  .bds2150SegmentedControl-control.bds2150SegmentedControl---variant_outline .bds2150SegmentedControl-indicator {
+  .bds2170SegmentedControl-control.bds2170SegmentedControl---variant_outline .bds2170SegmentedControl-indicator {
     display: block;
     box-shadow: inset 0 0 0 var(--control_indicator-width, 2px) var(--control_indicator-color, var(--bds-color_interactive));
   }
-  .bds2150SegmentedControl-control.bds2150SegmentedControl---no-selection .bds2150SegmentedControl-thumb,
-  .bds2150SegmentedControl-control.bds2150SegmentedControl---no-selection .bds2150SegmentedControl-indicator {
+  .bds2170SegmentedControl-control.bds2170SegmentedControl---no-selection .bds2170SegmentedControl-thumb,
+  .bds2170SegmentedControl-control.bds2170SegmentedControl---no-selection .bds2170SegmentedControl-indicator {
     display: none;
   }
   @media (hover: hover) and (pointer: fine) {
-    .bds2150SegmentedControl-item:not(.bds2150SegmentedControl---active, .bds2150SegmentedControl---disabled):hover {
+    .bds2170SegmentedControl-item:not(.bds2170SegmentedControl---active, .bds2170SegmentedControl---disabled):hover {
       color: var(--control_label-color--hover, var(--bds-color_on-bg));
     }
   }
   @media (prefers-reduced-motion: reduce) {
-    .bds2150SegmentedControl-thumb,
-    .bds2150SegmentedControl-indicator {
+    .bds2170SegmentedControl-thumb,
+    .bds2170SegmentedControl-indicator {
       transition: none;
     }
   }
 }
 
 /* src/components/interaction/form/Select/Select.module.css */
-@layer boostdev.bds2150Select-component {
-  .bds2150Select-formGroup {
+@layer boostdev.bds2170Select-component {
+  .bds2170Select-formGroup {
     display: flex;
     flex-direction: column;
   }
-  .bds2150Select-selectWrapper {
+  .bds2170Select-selectWrapper {
     position: relative;
     display: flex;
     align-items: center;
   }
-  .bds2150Select-select {
+  .bds2170Select-select {
     appearance: none;
     inline-size: 100%;
     font-family: var(--bds-font_family--body);
@@ -2807,21 +2952,22 @@
     cursor: pointer;
     transition: --bdc_color var(--bds-animation_transition-duration) var(--bds-animation_easing), background-color var(--bds-animation_transition-duration) var(--bds-animation_easing);
   }
-  .bds2150Select-select:focus {
+  .bds2170Select-select:focus {
     --bdc_color: var(--bdc_color--focus);
   }
-  .bds2150Select-select:focus-visible {
+  .bds2170Select-select:focus-visible {
     outline: var(--bds-outline_default);
     outline-offset: var(--bds-outline_offset);
   }
-  .bds2150Select-select:disabled {
+  .bds2170Select-select:disabled {
     opacity: 0.5;
     cursor: not-allowed;
   }
-  .bds2150Select-selectError {
+  .bds2170Select-selectError {
     --bdc_color: var(--bdc_color--error);
+    --bdc-outline_width: var(--bdc-outline_width--error, 2px);
   }
-  .bds2150Select-chevron {
+  .bds2170Select-chevron {
     position: absolute;
     inset-inline-end: var(--bds-space_s);
     display: flex;
@@ -2829,30 +2975,30 @@
     pointer-events: none;
     color: var(--select_chevron-color, var(--bds-color_interactive));
   }
-  .bds2150Select-chevron svg {
+  .bds2170Select-chevron svg {
     inline-size: var(--select_chevron-size, 1rem);
     block-size: var(--select_chevron-size, 1rem);
   }
 }
 
 /* src/components/interaction/form/Slider/Slider.module.css */
-@layer boostdev.bds2150Slider-component {
-  .bds2150Slider-formGroup {
+@layer boostdev.bds2170Slider-component {
+  .bds2170Slider-formGroup {
     display: flex;
     flex-direction: column;
     gap: var(--bds-space_xxs);
   }
-  .bds2150Slider-labelRow {
+  .bds2170Slider-labelRow {
     display: flex;
     justify-content: space-between;
     align-items: baseline;
   }
-  .bds2150Slider-value {
+  .bds2170Slider-value {
     font-size: var(--bds-font_size--body--s);
     font-variant-numeric: tabular-nums;
     color: var(--bds-color_on-bg--subtle);
   }
-  .bds2150Slider-slider {
+  .bds2170Slider-slider {
     --slider_fill: 0%;
     color: var(--slider_color, var(--bds-color_on-bg));
     appearance: none;
@@ -2869,7 +3015,7 @@
     cursor: pointer;
     transition: var(--bds-animation_transition);
   }
-  .bds2150Slider-slider:dir(rtl) {
+  .bds2170Slider-slider:dir(rtl) {
     background:
       linear-gradient(
         to left,
@@ -2878,16 +3024,16 @@
         var(--slider_track-bg, var(--bds-color_bg--subtle)) var(--slider_fill),
         var(--slider_track-bg, var(--bds-color_bg--subtle)) 100%);
   }
-  .bds2150Slider-slider:focus-visible {
+  .bds2170Slider-slider:focus-visible {
     outline: var(--bds-outline_default);
     outline-offset: var(--bds-outline_offset);
     border-radius: var(--slider_track-radius, var(--bds-border_radius--full));
   }
-  .bds2150Slider-slider:disabled {
+  .bds2170Slider-slider:disabled {
     opacity: 0.4;
     cursor: not-allowed;
   }
-  .bds2150Slider-slider::-webkit-slider-thumb {
+  .bds2170Slider-slider::-webkit-slider-thumb {
     appearance: none;
     inline-size: var(--slider_thumb-size, calc(var(--bds-space_s) * 2));
     block-size: var(--slider_thumb-size, calc(var(--bds-space_s) * 2));
@@ -2897,7 +3043,7 @@
     transition: var(--bds-animation_transition);
     cursor: pointer;
   }
-  .bds2150Slider-slider::-moz-range-thumb {
+  .bds2170Slider-slider::-moz-range-thumb {
     inline-size: var(--slider_thumb-size, calc(var(--bds-space_s) * 2));
     block-size: var(--slider_thumb-size, calc(var(--bds-space_s) * 2));
     border: none;
@@ -2906,7 +3052,7 @@
     box-shadow: var(--bds-shadow_s);
     cursor: pointer;
   }
-  .bds2150Slider-sliderError {
+  .bds2170Slider-sliderError {
     background:
       linear-gradient(
         to right,
@@ -2915,7 +3061,7 @@
         var(--slider_track-bg, var(--bds-color_bg--subtle)) var(--slider_fill),
         var(--slider_track-bg, var(--bds-color_bg--subtle)) 100%);
   }
-  .bds2150Slider-sliderError:dir(rtl) {
+  .bds2170Slider-sliderError:dir(rtl) {
     background:
       linear-gradient(
         to left,
@@ -2924,43 +3070,43 @@
         var(--slider_track-bg, var(--bds-color_bg--subtle)) var(--slider_fill),
         var(--slider_track-bg, var(--bds-color_bg--subtle)) 100%);
   }
-  .bds2150Slider-sliderError::-webkit-slider-thumb {
+  .bds2170Slider-sliderError::-webkit-slider-thumb {
     background-color: var(--slider_color--error, var(--bds-color_error));
   }
-  .bds2150Slider-sliderError::-moz-range-thumb {
+  .bds2170Slider-sliderError::-moz-range-thumb {
     background-color: var(--slider_color--error, var(--bds-color_error));
   }
   @media (prefers-reduced-motion: reduce) {
-    .bds2150Slider-slider,
-    .bds2150Slider-slider::-webkit-slider-thumb,
-    .bds2150Slider-slider::-moz-range-thumb {
+    .bds2170Slider-slider,
+    .bds2170Slider-slider::-webkit-slider-thumb,
+    .bds2170Slider-slider::-moz-range-thumb {
       transition: none;
     }
   }
 }
 
 /* src/components/interaction/form/Switch/Switch.module.css */
-@layer boostdev.bds2150Switch-component {
-  .bds2150Switch-switchGroup {
+@layer boostdev.bds2170Switch-component {
+  .bds2170Switch-switchGroup {
     color: var(--switch_color, var(--bds-color_on-bg));
     display: flex;
     flex-direction: column;
   }
-  .bds2150Switch-switchGroup.bds2150Switch---size_small {
+  .bds2170Switch-switchGroup.bds2170Switch---size_small {
     --switch_thumb-size: 1em;
   }
-  .bds2150Switch-switchGroup.bds2150Switch---size_medium {
+  .bds2170Switch-switchGroup.bds2170Switch---size_medium {
     --switch_thumb-size: 1.25em;
   }
-  .bds2150Switch-switchGroup.bds2150Switch---size_large {
+  .bds2170Switch-switchGroup.bds2170Switch---size_large {
     --switch_thumb-size: 1.5em;
   }
-  .bds2150Switch-inputWrapper {
+  .bds2170Switch-inputWrapper {
     display: flex;
     align-items: center;
     gap: var(--bds-space_xs);
   }
-  .bds2150Switch-trackWrapper {
+  .bds2170Switch-trackWrapper {
     position: relative;
     display: inline-flex;
     align-items: center;
@@ -2968,7 +3114,7 @@
     inline-size: calc(var(--switch_thumb-size, 1.25em) * 2 + var(--switch_track-pad, var(--bds-space_xxxs)) * 2);
     block-size: calc(var(--switch_thumb-size, 1.25em) + var(--switch_track-pad, var(--bds-space_xxxs)) * 2);
   }
-  .bds2150Switch-switch {
+  .bds2170Switch-switch {
     position: absolute;
     inset: 0;
     appearance: none;
@@ -2979,10 +3125,10 @@
     cursor: pointer;
     z-index: 1;
   }
-  .bds2150Switch-switch:disabled {
+  .bds2170Switch-switch:disabled {
     cursor: not-allowed;
   }
-  .bds2150Switch-track {
+  .bds2170Switch-track {
     display: inline-flex;
     align-items: center;
     inline-size: calc(var(--switch_thumb-size, 1.25em) * 2 + var(--switch_track-pad, var(--bds-space_xxxs)) * 2);
@@ -2998,7 +3144,7 @@
       transform var(--bds-animation_transition-duration) var(--bds-animation_easing);
     --bdc_color: var(--switch_thumb-bg, var(--bds-color_interactive));
   }
-  .bds2150Switch-thumb {
+  .bds2170Switch-thumb {
     display: block;
     inline-size: var(--switch_thumb-size, 1.25em);
     block-size: var(--switch_thumb-size, 1.25em);
@@ -3008,43 +3154,44 @@
     transition: var(--bds-animation_transition);
     transform: translateX(0);
   }
-  .bds2150Switch-switch.bds2150Switch-switchError + .bds2150Switch-track {
+  .bds2170Switch-switch.bds2170Switch-switchError + .bds2170Switch-track {
     --bdc_color: var(--switch_border-color--error, var(--bds-color_error));
+    --bdc-outline_width: var(--bdc-outline_width--error, 2px);
   }
-  .bds2150Switch-switch:checked + .bds2150Switch-track {
+  .bds2170Switch-switch:checked + .bds2170Switch-track {
     background-color: var(--switch_track-bg--active, var(--bdc-color_active--subtle));
     --bdc_color: var(--switch_thumb-bg--active, var(--bds-color_interactive));
   }
-  .bds2150Switch-switch:checked + .bds2150Switch-track .bds2150Switch-thumb {
+  .bds2170Switch-switch:checked + .bds2170Switch-track .bds2170Switch-thumb {
     background-color: var(--switch_thumb-bg--active, var(--bds-color_interactive));
     transform: translateX(var(--switch_thumb-size, 1.25em));
   }
-  [dir=rtl] .bds2150Switch-switch:checked + .bds2150Switch-track .bds2150Switch-thumb {
+  [dir=rtl] .bds2170Switch-switch:checked + .bds2170Switch-track .bds2170Switch-thumb {
     transform: translateX(calc(var(--switch_thumb-size, 1.25em) * -1));
   }
-  .bds2150Switch-switch:focus-visible + .bds2150Switch-track {
+  .bds2170Switch-switch:focus-visible + .bds2170Switch-track {
     outline: var(--bds-outline_default);
     outline-offset: var(--bds-outline_offset);
     border-radius: var(--switch_track-radius, var(--bds-border_radius--full));
   }
-  .bds2150Switch-switch:disabled + .bds2150Switch-track {
+  .bds2170Switch-switch:disabled + .bds2170Switch-track {
     opacity: 0.4;
   }
   @media (prefers-reduced-motion: reduce) {
-    .bds2150Switch-track,
-    .bds2150Switch-thumb {
+    .bds2170Switch-track,
+    .bds2170Switch-thumb {
       transition: none;
     }
   }
 }
 
 /* src/components/interaction/form/Textarea/Textarea.module.css */
-@layer boostdev.bds2150Textarea-component {
-  .bds2150Textarea-formGroup {
+@layer boostdev.bds2170Textarea-component {
+  .bds2170Textarea-formGroup {
     display: flex;
     flex-direction: column;
   }
-  .bds2150Textarea-textarea {
+  .bds2170Textarea-textarea {
     font-family: var(--textarea_font-family, var(--bds-font_family--body));
     font-size: var(--textarea_font-size, var(--bds-font_size--body));
     line-height: var(--textarea_line-height, var(--bds-font_line-height--body));
@@ -3060,65 +3207,66 @@
     min-block-size: var(--textarea_min-block-size, calc(var(--bds-space_m) * 5));
     transition: --bdc_color var(--bds-animation_transition-duration) var(--bds-animation_easing), background-color var(--bds-animation_transition-duration) var(--bds-animation_easing);
   }
-  .bds2150Textarea-textarea:focus {
+  .bds2170Textarea-textarea:focus {
     --bdc_color: var(--bdc_color--focus);
   }
-  .bds2150Textarea-textarea:focus-visible {
+  .bds2170Textarea-textarea:focus-visible {
     outline: var(--bds-outline_default);
     outline-offset: var(--bds-outline_offset);
   }
-  .bds2150Textarea-textarea:disabled {
+  .bds2170Textarea-textarea:disabled {
     opacity: 0.5;
     cursor: not-allowed;
     resize: none;
   }
-  .bds2150Textarea-textareaError {
+  .bds2170Textarea-textareaError {
     --bdc_color: var(--bdc_color--error);
+    --bdc-outline_width: var(--bdc-outline_width--error, 2px);
   }
 }
 
 /* src/components/layout/ButtonGroup/ButtonGroup.module.css */
-@layer boostdev.bds2150ButtonGroup-component {
-  .bds2150ButtonGroup-buttonGroup {
+@layer boostdev.bds2170ButtonGroup-component {
+  .bds2170ButtonGroup-buttonGroup {
     container-type: inline-size;
     container-name: button-group;
     grid-column: var(--bds-grid_span-100);
     inline-size: 100%;
   }
-  .bds2150ButtonGroup-buttonGroup .bds2150ButtonGroup-container {
+  .bds2170ButtonGroup-buttonGroup .bds2170ButtonGroup-container {
     position: relative;
     display: flex;
     flex-direction: column-reverse;
     gap: var(--buttonGroup_gap, var(--bds-space_l));
     align-items: center;
   }
-  .bds2150ButtonGroup-buttonGroup.bds2150ButtonGroup---variant_card .bds2150ButtonGroup-container {
+  .bds2170ButtonGroup-buttonGroup.bds2170ButtonGroup---variant_card .bds2170ButtonGroup-container {
     align-items: stretch;
   }
-  .bds2150ButtonGroup-buttonGroup.bds2150ButtonGroup---variant_flow .bds2150ButtonGroup-container,
-  .bds2150ButtonGroup-buttonGroup.bds2150ButtonGroup---variant_modal .bds2150ButtonGroup-container {
+  .bds2170ButtonGroup-buttonGroup.bds2170ButtonGroup---variant_flow .bds2170ButtonGroup-container,
+  .bds2170ButtonGroup-buttonGroup.bds2170ButtonGroup---variant_modal .bds2170ButtonGroup-container {
     align-items: center;
   }
-  .bds2150ButtonGroup-buttonGroup.bds2150ButtonGroup---variant_content .bds2150ButtonGroup-container {
+  .bds2170ButtonGroup-buttonGroup.bds2170ButtonGroup---variant_content .bds2170ButtonGroup-container {
     align-items: flex-start;
   }
   @supports (contain: inline-size) {
     @container button-group (min-width: 30rem) {
-      .bds2150ButtonGroup-buttonGroup .bds2150ButtonGroup-container {
+      .bds2170ButtonGroup-buttonGroup .bds2170ButtonGroup-container {
         flex-direction: row;
         justify-content: space-between;
       }
-      .bds2150ButtonGroup-buttonGroup.bds2150ButtonGroup---variant_modal .bds2150ButtonGroup-container > :first-child:last-child,
-      .bds2150ButtonGroup-buttonGroup.bds2150ButtonGroup---variant_flow .bds2150ButtonGroup-container > :first-child:last-child {
+      .bds2170ButtonGroup-buttonGroup.bds2170ButtonGroup---variant_modal .bds2170ButtonGroup-container > :first-child:last-child,
+      .bds2170ButtonGroup-buttonGroup.bds2170ButtonGroup---variant_flow .bds2170ButtonGroup-container > :first-child:last-child {
         margin-inline-start: auto;
       }
-      .bds2150ButtonGroup-buttonGroup.bds2150ButtonGroup---variant_card .bds2150ButtonGroup-container {
+      .bds2170ButtonGroup-buttonGroup.bds2170ButtonGroup---variant_card .bds2170ButtonGroup-container {
         justify-content: center;
       }
-      .bds2150ButtonGroup-buttonGroup.bds2150ButtonGroup---variant_modal .bds2150ButtonGroup-container {
+      .bds2170ButtonGroup-buttonGroup.bds2170ButtonGroup---variant_modal .bds2170ButtonGroup-container {
         justify-content: flex-end;
       }
-      .bds2150ButtonGroup-buttonGroup.bds2150ButtonGroup---variant_content .bds2150ButtonGroup-container {
+      .bds2170ButtonGroup-buttonGroup.bds2170ButtonGroup---variant_content .bds2170ButtonGroup-container {
         justify-content: flex-start;
         align-items: center;
       }
@@ -3127,208 +3275,223 @@
 }
 
 /* src/components/layout/Card/Card.module.css */
-@layer boostdev.bds2150Card-component {
-  .bds2150Card-card {
+@layer boostdev.bds2170Card-component {
+  .bds2170Card-card {
     background-color: var(--card_color, var(--bds-color_bg--strong, var(--bds-color_bg)));
     color: var(--card_on-color, var(--bds-color_on-bg));
     border-radius: var(--card_radius, var(--bds-border_radius--m));
     transition: var(--card_transition, var(--bds-animation_transition));
     position: relative;
   }
-  .bds2150Card-card:is(button) {
+  .bds2170Card-card:is(button) {
     border: none;
     font: inherit;
     text-align: inherit;
     display: block;
     inline-size: 100%;
   }
-  .bds2150Card-card.bds2150Card---default {
+  .bds2170Card-card.bds2170Card---default {
     box-shadow: var(--card_shadow--default, var(--bds-shadow_s));
   }
-  .bds2150Card-card.bds2150Card---elevated {
+  .bds2170Card-card.bds2170Card---elevated {
     box-shadow: var(--card_shadow--elevated, var(--bds-shadow_m));
   }
-  .bds2150Card-card.bds2150Card---outlined {
+  .bds2170Card-card.bds2170Card---outlined {
     border: var(--card_border, none);
     --bdc_color: currentcolor;
     box-shadow: var(--card_shadow--outlined, inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--bds-shadow_s));
   }
-  .bds2150Card-card.bds2150Card---clickable {
+  .bds2170Card-card.bds2170Card---clickable {
     cursor: pointer;
   }
-  .bds2150Card-card.bds2150Card---padding-none {
+  .bds2170Card-card.bds2170Card---padding-none {
     padding: var(--card_padding, 0);
   }
-  .bds2150Card-card.bds2150Card---padding-small {
+  .bds2170Card-card.bds2170Card---padding-small {
     padding: var(--card_padding, var(--bds-space_s));
   }
-  .bds2150Card-card.bds2150Card---padding-medium {
+  .bds2170Card-card.bds2170Card---padding-medium {
     padding: var(--card_padding, var(--bds-space_m));
   }
-  .bds2150Card-card.bds2150Card---padding-large {
+  .bds2170Card-card.bds2170Card---padding-large {
     padding: var(--card_padding, var(--bds-space_l));
   }
-  .bds2150Card-card.bds2150Card---padding-extra-large {
+  .bds2170Card-card.bds2170Card---padding-extra-large {
     padding: var(--card_padding, var(--bds-space_xl));
   }
-  .bds2150Card-card.bds2150Card---text-start {
+  .bds2170Card-card.bds2170Card---text-start {
     text-align: start;
   }
-  .bds2150Card-card.bds2150Card---text-center {
+  .bds2170Card-card.bds2170Card---text-center {
     text-align: center;
   }
-  .bds2150Card-card.bds2150Card---text-end {
+  .bds2170Card-card.bds2170Card---text-end {
     text-align: end;
   }
-  .bds2150Card-card.bds2150Card---clickable:focus-visible {
+  .bds2170Card-card.bds2170Card---clickable:focus-visible {
     outline: var(--bds-outline_default);
     outline-offset: var(--bds-outline_offset);
   }
-  .bds2150Card-card.bds2150Card---clickable:active {
+  .bds2170Card-card.bds2170Card---clickable:active {
     transform: translateY(0);
     box-shadow: var(--card_shadow--active, var(--bds-shadow_s));
   }
   @media (hover: hover) and (pointer: fine) {
-    .bds2150Card-card.bds2150Card---clickable:hover {
+    .bds2170Card-card.bds2170Card---clickable:hover {
       transform: translateY(-2px);
       box-shadow: var(--card_shadow--clickable-hover, var(--bds-shadow_xl));
     }
-    .bds2150Card-card.bds2150Card---default:hover {
+    .bds2170Card-card.bds2170Card---default:hover {
       box-shadow: var(--card_shadow--default-hover, var(--bds-shadow_m));
     }
-    .bds2150Card-card.bds2150Card---elevated:hover {
+    .bds2170Card-card.bds2170Card---elevated:hover {
       box-shadow: var(--card_shadow--elevated-hover, var(--bds-shadow_2xl));
     }
-    .bds2150Card-card.bds2150Card---outlined:hover {
+    .bds2170Card-card.bds2170Card---outlined:hover {
       box-shadow: var(--card_shadow--outlined-hover, var(--bds-shadow_s));
     }
   }
   @media (prefers-reduced-motion: reduce) {
-    .bds2150Card-card {
+    .bds2170Card-card {
       transition: none;
     }
-    .bds2150Card-card.bds2150Card---clickable:hover,
-    .bds2150Card-card.bds2150Card---clickable:active {
+    .bds2170Card-card.bds2170Card---clickable:hover,
+    .bds2170Card-card.bds2170Card---clickable:active {
       transform: none;
     }
   }
 }
 
 /* src/components/layout/Grid/Grid.module.css */
-@layer boostdev.bds2150Grid-component {
-  .bds2150Grid-grid {
+@layer boostdev.bds2170Grid-component {
+  .bds2170Grid-grid {
     display: grid;
     gap: var(--grid_gap, var(--bds-grid_gap));
   }
-  .bds2150Grid-grid.bds2150Grid---main {
+  .bds2170Grid-grid.bds2170Grid---main {
     grid-template-columns: var(--bds-grid_template-columns);
   }
-  .bds2150Grid-grid.bds2150Grid---page {
+  .bds2170Grid-grid.bds2170Grid---page {
     grid-template-columns: 1fr;
     grid-column: 1 / -1;
   }
-  .bds2150Grid-grid.bds2150Grid---funnel {
+  .bds2170Grid-grid.bds2170Grid---funnel {
     grid-template-columns: var(--bds-grid_template-columns);
     max-inline-size: var(--bds-container_max-width--narrow);
     margin-inline: auto;
   }
-  .bds2150Grid-grid.bds2150Grid---custom {
+  .bds2170Grid-grid.bds2170Grid---custom {
     grid-template-columns: repeat(var(--grid_columns, 4), minmax(0, 1fr));
   }
-  .bds2150Grid-grid.bds2150Grid---centered {
+  .bds2170Grid-grid.bds2170Grid---centered {
     margin-inline: auto;
     max-inline-size: var(--bds-container_max-width);
     padding-inline: var(--bds-container_spacing-inline);
   }
-  .bds2150Grid-item {
+  .bds2170Grid-item {
     min-inline-size: 0;
   }
   @supports (grid-template-rows: masonry) {
-    .bds2150Grid-grid.bds2150Grid---masonry {
+    .bds2170Grid-grid.bds2170Grid---masonry {
       grid-template-rows: masonry;
     }
   }
   @supports (display: grid-lanes) {
-    .bds2150Grid-grid.bds2150Grid---masonry {
+    .bds2170Grid-grid.bds2170Grid---masonry {
       display: grid-lanes;
     }
   }
 }
 
 /* src/components/layout/SectionHeader/SectionHeader.module.css */
-@layer boostdev.bds2150SectionHeader-component {
-  .bds2150SectionHeader-sectionHeader {
+@layer boostdev.bds2170SectionHeader-component {
+  .bds2170SectionHeader-sectionHeader {
     display: flex;
     flex-direction: column;
     gap: var(--sectionHeader_gap, var(--bds-space_m));
     grid-column: var(--bds-grid_span-100);
   }
-  .bds2150SectionHeader-title {
+  .bds2170SectionHeader-title {
     color: var(--sectionHeader_title-color, var(--sectionHeader-title-color, var(--bds-color_on-bg)));
     margin: 0;
-    font-family: var(--bds-font_family--body);
+    font-family: var(--sectionHeader_title-font-family, var(--bds-font_family--heading));
   }
-  .bds2150SectionHeader-subtitle {
-    color: var(--sectionHeader_subtitle-color, var(--bds-color_grey--strong));
+  .bds2170SectionHeader-subtitle {
+    color: var(--sectionHeader_subtitle-color, var(--bds-color_on-bg--muted, var(--bds-color_grey--strong)));
     margin: 0;
     font-family: var(--bds-font_family--body);
     font-weight: var(--bds-font_weight--medium);
   }
-  .bds2150SectionHeader-sectionHeader.bds2150SectionHeader---start {
+  .bds2170SectionHeader-sectionHeader.bds2170SectionHeader---start {
     align-items: flex-start;
     text-align: start;
   }
-  .bds2150SectionHeader-sectionHeader.bds2150SectionHeader---center {
+  .bds2170SectionHeader-sectionHeader.bds2170SectionHeader---center {
     align-items: center;
     text-align: center;
   }
-  .bds2150SectionHeader-sectionHeader.bds2150SectionHeader---end {
+  .bds2170SectionHeader-sectionHeader.bds2170SectionHeader---end {
     align-items: flex-end;
     text-align: end;
   }
-  .bds2150SectionHeader-sectionHeader.bds2150SectionHeader---medium .bds2150SectionHeader-title {
-    font-size: var(--sectionHeader_title-size, var(--bds-font_size--heading-1));
+  .bds2170SectionHeader-sectionHeader.bds2170SectionHeader---medium .bds2170SectionHeader-title {
+    font-size: var(--sectionHeader_title-size, var(--bds-font_size--heading-2));
     line-height: var(--sectionHeader_title-line-height, var(--bds-font_line-height--heading));
-    font-weight: var(--sectionHeader_title-weight, var(--bds-font_weight--bold));
+    font-weight: var(--sectionHeader_title-weight, var(--bds-font_weight--heading, var(--bds-font_weight--bold)));
   }
-  .bds2150SectionHeader-sectionHeader.bds2150SectionHeader---medium .bds2150SectionHeader-subtitle {
-    font-size: var(--sectionHeader_subtitle-size, var(--bds-font_size--heading-3));
+  .bds2170SectionHeader-sectionHeader.bds2170SectionHeader---medium .bds2170SectionHeader-subtitle {
+    font-size: var(--sectionHeader_subtitle-size, var(--bds-font_size--body));
     line-height: var(--sectionHeader_subtitle-line-height, 1.3);
   }
-  .bds2150SectionHeader-sectionHeader.bds2150SectionHeader---xs .bds2150SectionHeader-title {
-    font-size: var(--sectionHeader_title-size, var(--bds-font_size--heading-2));
+  .bds2170SectionHeader-sectionHeader.bds2170SectionHeader---xs .bds2170SectionHeader-title {
+    font-size: var(--sectionHeader_title-size, var(--bds-font_size--body));
     line-height: var(--sectionHeader_title-line-height, var(--bds-font_line-height--heading));
-    font-weight: var(--sectionHeader_title-weight, var(--bds-font_weight--bold));
+    font-weight: var(--sectionHeader_title-weight, var(--bds-font_weight--heading, var(--bds-font_weight--bold)));
   }
-  .bds2150SectionHeader-sectionHeader.bds2150SectionHeader---xs .bds2150SectionHeader-subtitle {
-    font-size: var(--sectionHeader_subtitle-size, var(--bds-font_size--body));
+  .bds2170SectionHeader-sectionHeader.bds2170SectionHeader---xs .bds2170SectionHeader-subtitle {
+    font-size: var(--sectionHeader_subtitle-size, var(--bds-font_size--body--s));
     line-height: var(--sectionHeader_subtitle-line-height, 1.4);
   }
-  .bds2150SectionHeader-sectionHeader.bds2150SectionHeader---small .bds2150SectionHeader-title {
-    font-size: var(--sectionHeader_title-size, var(--bds-font_size--heading-1));
+  .bds2170SectionHeader-sectionHeader.bds2170SectionHeader---small .bds2170SectionHeader-title {
+    font-size: var(--sectionHeader_title-size, var(--bds-font_size--heading-3));
     line-height: var(--sectionHeader_title-line-height, var(--bds-font_line-height--heading));
-    font-weight: var(--sectionHeader_title-weight, var(--bds-font_weight--bold));
+    font-weight: var(--sectionHeader_title-weight, var(--bds-font_weight--heading, var(--bds-font_weight--bold)));
   }
-  .bds2150SectionHeader-sectionHeader.bds2150SectionHeader---small .bds2150SectionHeader-subtitle {
+  .bds2170SectionHeader-sectionHeader.bds2170SectionHeader---small .bds2170SectionHeader-subtitle {
     font-size: var(--sectionHeader_subtitle-size, var(--bds-font_size--body));
     line-height: var(--sectionHeader_subtitle-line-height, 1.4);
   }
-  .bds2150SectionHeader-sectionHeader.bds2150SectionHeader---large .bds2150SectionHeader-title {
-    font-size: var(--sectionHeader_title-size, var(--bds-font_size--display));
-    line-height: var(--sectionHeader_title-line-height, var(--bds-font_line-height--display));
-    font-weight: var(--sectionHeader_title-weight, var(--bds-font_weight--bold));
+  .bds2170SectionHeader-sectionHeader.bds2170SectionHeader---large .bds2170SectionHeader-title {
+    font-size: var(--sectionHeader_title-size, var(--bds-font_size--heading-1));
+    line-height: var(--sectionHeader_title-line-height, var(--bds-font_line-height--heading));
+    font-weight: var(--sectionHeader_title-weight, var(--bds-font_weight--heading, var(--bds-font_weight--bold)));
     letter-spacing: var(--bds-font_tracking--tight);
   }
-  .bds2150SectionHeader-sectionHeader.bds2150SectionHeader---large .bds2150SectionHeader-subtitle {
-    font-size: var(--sectionHeader_subtitle-size, var(--bds-font_size--heading-2));
+  .bds2170SectionHeader-sectionHeader.bds2170SectionHeader---large .bds2170SectionHeader-subtitle {
+    font-size: var(--sectionHeader_subtitle-size, var(--bds-font_size--heading-3));
     line-height: var(--sectionHeader_subtitle-line-height, 1.3);
     font-weight: var(--bds-font_weight--medium);
   }
+  @supports (background-clip: text) {
+    .bds2170SectionHeader-sectionHeader.bds2170SectionHeader---gradient .bds2170SectionHeader-title {
+      inline-size: fit-content;
+      max-inline-size: 100%;
+      background-image: var(--sectionHeader_title-gradient, linear-gradient(90deg, var(--bds-color_primary--strong, var(--bds-color_blue--strong)), var(--bds-color_accent-3--strong, var(--bds-color_blue--strong))));
+      background-clip: text;
+      color: transparent;
+    }
+  }
+  @media (forced-colors: active) {
+    .bds2170SectionHeader-sectionHeader.bds2170SectionHeader---gradient .bds2170SectionHeader-title {
+      background-image: none;
+      color: CanvasText;
+    }
+  }
 }
 
 /* src/components/layout/IconWrapper/IconWrapper.module.css */
-@layer boostdev.bds2150IconWrapper-component {
-  .bds2150IconWrapper-wrapper {
+@layer boostdev.bds2170IconWrapper-component {
+  .bds2170IconWrapper-wrapper {
     inline-size: 2em;
     block-size: 2em;
     font-size: var(--icon-wrapper_size, 3em);
@@ -3344,7 +3507,7 @@
     position: relative;
     transition: var(--bds-animation_transition);
   }
-  .bds2150IconWrapper-wrapper svg {
+  .bds2170IconWrapper-wrapper svg {
     fill: currentcolor;
   }
 }