@boostdev/design-system-components 1.2.2 → 1.2.4

package/dist/client.css

@@ -27,7 +27,7 @@
 
 /* src/components/ui/Accordion/Accordion.module.css */
 @layer component {
-  .bds122Accordion-accordion {
+  .bds124Accordion-accordion {
     display: flex;
     flex-direction: column;
     border: var(--accordion_border, none);
@@ -37,16 +37,16 @@
     box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color);
     overflow: hidden;
   }
-  .bds122Accordion-item {
+  .bds124Accordion-item {
     border-block-end: 1px solid var(--bds-color_bg--subtle);
   }
-  .bds122Accordion-item:last-child {
+  .bds124Accordion-item:last-child {
     border-block-end: none;
   }
-  .bds122Accordion-heading {
+  .bds124Accordion-heading {
     margin: 0;
   }
-  .bds122Accordion-trigger {
+  .bds124Accordion-trigger {
     all: unset;
     display: flex;
     align-items: center;
@@ -61,44 +61,44 @@
     transition: var(--bds-animation_transition);
     box-sizing: border-box;
   }
-  .bds122Accordion-trigger:disabled {
+  .bds124Accordion-trigger:disabled {
     opacity: 0.4;
     cursor: not-allowed;
   }
-  .bds122Accordion-trigger:focus-visible {
+  .bds124Accordion-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) {
-    .bds122Accordion-trigger:not(:disabled):hover {
+    .bds124Accordion-trigger:not(:disabled):hover {
       background-color: var(--bds-color_bg--subtle);
     }
   }
-  .bds122Accordion-triggerLabel {
+  .bds124Accordion-triggerLabel {
     flex: 1;
     text-align: start;
   }
-  .bds122Accordion-chevron {
+  .bds124Accordion-chevron {
     inline-size: 1.25rem;
     block-size: 1.25rem;
     flex-shrink: 0;
     transition: transform var(--bds-animation_transition-duration) var(--bds-animation_easing);
   }
-  .bds122Accordion-item.bds122Accordion---open .bds122Accordion-chevron {
+  .bds124Accordion-item.bds124Accordion---open .bds124Accordion-chevron {
     transform: rotate(180deg);
   }
-  .bds122Accordion-panel {
+  .bds124Accordion-panel {
     overflow: hidden;
   }
-  .bds122Accordion-panelContent {
+  .bds124Accordion-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) {
-    .bds122Accordion-chevron {
+    .bds124Accordion-chevron {
       transition: none;
     }
   }
@@ -106,7 +106,7 @@
 
 /* src/components/ui/Alert/Alert.module.css */
 @layer component {
-  .bds122Alert-alert {
+  .bds124Alert-alert {
     display: flex;
     align-items: flex-start;
     gap: var(--bds-space_s);
@@ -118,43 +118,43 @@
     font-size: var(--bds-font_size--body);
     line-height: var(--bds-font_line-height--body);
   }
-  .bds122Alert---variant_info {
+  .bds124Alert---variant_info {
     --alert_bg: var(--bds-color_blue--subtle);
     --alert_text: var(--bds-color_on-blue--subtle);
     --alert_border: var(--bds-color_blue);
   }
-  .bds122Alert---variant_success {
+  .bds124Alert---variant_success {
     --alert_bg: var(--bds-color_success--subtle);
     --alert_text: var(--bds-color_on-success--subtle);
     --alert_border: var(--bds-color_success);
   }
-  .bds122Alert---variant_warning {
+  .bds124Alert---variant_warning {
     --alert_bg: var(--bds-color_orange--subtle);
     --alert_text: var(--bds-color_on-orange--subtle);
     --alert_border: var(--bds-color_warning);
   }
-  .bds122Alert---variant_error {
+  .bds124Alert---variant_error {
     --alert_bg: rgb(from var(--bds-color_error) r g b / 12%);
     --alert_text: var(--bds-color_on-bg);
     --alert_border: var(--bds-color_error);
   }
-  .bds122Alert-icon {
+  .bds124Alert-icon {
     display: flex;
     align-items: center;
     flex-shrink: 0;
     margin-block-start: 0.1em;
   }
-  .bds122Alert-content {
+  .bds124Alert-content {
     flex: 1;
     display: flex;
     flex-direction: column;
     gap: var(--bds-space_xxs);
   }
-  .bds122Alert-title {
+  .bds124Alert-title {
     font-weight: var(--bds-font_weight--semibold);
     font-size: var(--bds-font_size--body);
   }
-  .bds122Alert-dismiss {
+  .bds124Alert-dismiss {
     all: unset;
     display: flex;
     align-items: center;
@@ -164,20 +164,20 @@
     color: currentcolor;
     transition: var(--bds-animation_transition);
     border: var(--alert_dismiss-border, none);
-    border-radius: 50%;
+    border-radius: var(--alert_dismiss-radius, var(--bds-border_radius--circle));
     --bdc_color: currentcolor;
     box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color);
   }
-  .bds122Alert-dismiss svg {
+  .bds124Alert-dismiss svg {
     width: 1rem;
     height: 1rem;
   }
-  .bds122Alert-dismiss:focus-visible {
+  .bds124Alert-dismiss:focus-visible {
     outline: var(--bds-outline_default);
     outline-offset: var(--bds-outline_offset);
   }
   @media (hover: hover) and (pointer: fine) {
-    .bds122Alert-dismiss:hover {
+    .bds124Alert-dismiss:hover {
       opacity: 0.7;
     }
   }
@@ -185,57 +185,57 @@
 
 /* src/components/ui/Avatar/Avatar.module.css */
 @layer component {
-  .bds122Avatar-avatar {
+  .bds124Avatar-avatar {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     width: var(--avatar_size, 3em);
     height: var(--avatar_size, 3em);
-    border-radius: 50%;
+    border-radius: var(--avatar_radius, var(--bds-border_radius--circle));
     overflow: hidden;
     flex-shrink: 0;
   }
-  .bds122Avatar-avatar.bds122Avatar---fallback {
+  .bds124Avatar-avatar.bds124Avatar---fallback {
     background-color: var(--avatar_bg, var(--bds-color_blue));
     color: var(--avatar_text, var(--bds-color_on-blue));
     font-weight: var(--bds-font_weight--semibold);
   }
-  .bds122Avatar-avatar.bds122Avatar---size_small {
+  .bds124Avatar-avatar.bds124Avatar---size_small {
     --avatar_size: 2em;
   }
-  .bds122Avatar-avatar.bds122Avatar---size_medium {
+  .bds124Avatar-avatar.bds124Avatar---size_medium {
     --avatar_size: 3em;
   }
-  .bds122Avatar-avatar.bds122Avatar---size_large {
+  .bds124Avatar-avatar.bds124Avatar---size_large {
     --avatar_size: 4.5em;
   }
-  .bds122Avatar-image {
+  .bds124Avatar-image {
     width: 100%;
     height: 100%;
     object-fit: cover;
     display: block;
   }
-  .bds122Avatar-initials {
+  .bds124Avatar-initials {
     line-height: 1;
     user-select: none;
     font-size: var(--bds-font_size--body);
   }
-  .bds122Avatar-avatar.bds122Avatar---size_small .bds122Avatar-initials {
+  .bds124Avatar-avatar.bds124Avatar---size_small .bds124Avatar-initials {
     font-size: var(--bds-font_size--body--s);
   }
-  .bds122Avatar-avatar.bds122Avatar---size_large .bds122Avatar-initials {
+  .bds124Avatar-avatar.bds124Avatar---size_large .bds124Avatar-initials {
     font-size: var(--bds-font_size--heading-3);
   }
 }
 
 /* src/components/ui/Badge/Badge.module.css */
 @layer component {
-  .bds122Badge-badge {
+  .bds124Badge-badge {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     padding: var(--bds-space_xxs) var(--bds-space_xs);
-    border-radius: var(--badge_radius, 2em);
+    border-radius: var(--badge_radius, var(--bds-border_radius--full));
     font-size: var(--badge_font-size, var(--bds-font_size--body--s));
     font-weight: var(--bds-font_weight--semibold);
     line-height: 1;
@@ -243,23 +243,23 @@
     background-color: var(--badge_bg, var(--bds-color_blue));
     color: var(--badge_text, var(--bds-color_on-blue));
   }
-  .bds122Badge---variant_primary {
+  .bds124Badge---variant_primary {
     --badge_bg: var(--bds-color_interactive);
     --badge_text: var(--bds-color_on-interactive);
   }
-  .bds122Badge---variant_secondary {
+  .bds124Badge---variant_secondary {
     --badge_bg: var(--bds-color_bg);
     --badge_text: var(--bds-color_on-bg);
   }
-  .bds122Badge---variant_success {
+  .bds124Badge---variant_success {
     --badge_bg: var(--bds-color_success);
     --badge_text: var(--bds-color_on-success);
   }
-  .bds122Badge---variant_error {
+  .bds124Badge---variant_error {
     --badge_bg: var(--bds-color_error);
     --badge_text: var(--bds-color_on-error);
   }
-  .bds122Badge---variant_warning {
+  .bds124Badge---variant_warning {
     --badge_bg: var(--bds-color_warning);
     --badge_text: var(--bds-color_on-warning);
   }
@@ -267,10 +267,10 @@
 
 /* src/components/ui/Breadcrumb/Breadcrumb.module.css */
 @layer component {
-  .bds122Breadcrumb-breadcrumb {
+  .bds124Breadcrumb-breadcrumb {
     font-size: var(--bds-font_size--body--s);
   }
-  .bds122Breadcrumb-list {
+  .bds124Breadcrumb-list {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
@@ -279,32 +279,32 @@
     margin: 0;
     padding: 0;
   }
-  .bds122Breadcrumb-item {
+  .bds124Breadcrumb-item {
     display: flex;
     align-items: center;
     gap: var(--bds-space_xxs);
   }
-  .bds122Breadcrumb-link {
+  .bds124Breadcrumb-link {
     color: var(--bds-color_interactive_on-bg);
     text-decoration: none;
     transition: var(--bds-animation_transition);
   }
-  .bds122Breadcrumb-link:focus-visible {
+  .bds124Breadcrumb-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) {
-    .bds122Breadcrumb-link:hover {
+    .bds124Breadcrumb-link:hover {
       text-decoration: underline;
       text-underline-offset: 0.2em;
     }
   }
-  .bds122Breadcrumb-separator {
+  .bds124Breadcrumb-separator {
     color: var(--bds-color_on-bg--subtle);
     user-select: none;
   }
-  .bds122Breadcrumb-current {
+  .bds124Breadcrumb-current {
     color: var(--bds-color_on-bg--subtle);
     font-weight: var(--bds-font_weight--semibold);
   }
@@ -312,12 +312,12 @@
 
 /* src/components/ui/Collapsible/Collapsible.module.css */
 @layer component {
-  .bds122Collapsible-collapsible {
+  .bds124Collapsible-collapsible {
     border: var(--collapsible_border-width, 1px) solid var(--collapsible_border-color, var(--bds-color_bg--subtle));
     border-radius: var(--collapsible_border-radius, var(--bds-border_radius--m));
     overflow: hidden;
   }
-  .bds122Collapsible-summary {
+  .bds124Collapsible-summary {
     list-style: none;
     display: flex;
     align-items: center;
@@ -332,25 +332,25 @@
     user-select: none;
     transition: var(--bds-animation_transition);
   }
-  .bds122Collapsible-summary::-webkit-details-marker {
+  .bds124Collapsible-summary::-webkit-details-marker {
     display: none;
   }
-  .bds122Collapsible-summary:focus-visible {
+  .bds124Collapsible-summary:focus-visible {
     outline: var(--bds-outline_default);
     outline-offset: calc(var(--bds-outline_offset) * -1);
   }
   @media (hover: hover) and (pointer: fine) {
-    .bds122Collapsible-summary:hover {
+    .bds124Collapsible-summary:hover {
       background-color: var(--collapsible_bg--hover, var(--bds-color_bg--subtle));
     }
   }
-  .bds122Collapsible-collapsible[open] > .bds122Collapsible-summary {
+  .bds124Collapsible-collapsible[open] > .bds124Collapsible-summary {
     border-block-end: var(--collapsible_border-width, 1px) solid var(--collapsible_border-color, var(--bds-color_bg--subtle));
   }
-  .bds122Collapsible-summaryContent {
+  .bds124Collapsible-summaryContent {
     flex: 1;
   }
-  .bds122Collapsible-icon {
+  .bds124Collapsible-icon {
     inline-size: 0.5rem;
     block-size: 0.5rem;
     border-inline-end: 2px solid currentcolor;
@@ -359,17 +359,17 @@
     flex-shrink: 0;
     transition: transform var(--bds-animation_transition-duration) var(--bds-animation_easing);
   }
-  .bds122Collapsible-collapsible[open] > .bds122Collapsible-summary .bds122Collapsible-icon {
+  .bds124Collapsible-collapsible[open] > .bds124Collapsible-summary .bds124Collapsible-icon {
     transform: rotate(-135deg);
   }
-  .bds122Collapsible-content {
+  .bds124Collapsible-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) {
-    .bds122Collapsible-icon {
+    .bds124Collapsible-icon {
       transition: none;
     }
   }
@@ -377,7 +377,7 @@
 
 /* src/components/ui/Calendar/Calendar.module.css */
 @layer component {
-  .bds122Calendar-calendar {
+  .bds124Calendar-calendar {
     display: inline-flex;
     flex-direction: column;
     gap: var(--bds-space_s);
@@ -390,96 +390,96 @@
     box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--calendar_shadow, var(--bds-shadow_s));
     inline-size: 20rem;
   }
-  .bds122Calendar-header {
+  .bds124Calendar-header {
     display: flex;
     align-items: center;
     justify-content: space-between;
   }
-  .bds122Calendar-monthYear {
+  .bds124Calendar-monthYear {
     font-size: var(--bds-font_size--body);
     font-weight: var(--bds-font_weight--semibold);
     color: var(--bds-color_on-bg);
   }
-  .bds122Calendar-navBtn {
+  .bds124Calendar-navBtn {
     all: unset;
     display: flex;
     align-items: center;
     justify-content: center;
     inline-size: 2rem;
     block-size: 2rem;
-    border-radius: 50%;
+    border-radius: var(--calendar_button-radius, var(--bds-border_radius--circle));
     cursor: pointer;
     color: var(--bds-color_on-bg);
     transition: var(--bds-animation_transition);
   }
-  .bds122Calendar-navBtn svg {
+  .bds124Calendar-navBtn svg {
     inline-size: 1rem;
     block-size: 1rem;
   }
-  .bds122Calendar-navBtn:focus-visible {
+  .bds124Calendar-navBtn:focus-visible {
     outline: var(--bds-outline_default);
     outline-offset: var(--bds-outline_offset);
   }
   @media (hover: hover) and (pointer: fine) {
-    .bds122Calendar-navBtn:hover {
+    .bds124Calendar-navBtn:hover {
       background-color: var(--bds-color_bg--subtle);
     }
   }
-  .bds122Calendar-grid {
+  .bds124Calendar-grid {
     border-collapse: collapse;
     inline-size: 100%;
     table-layout: fixed;
   }
-  .bds122Calendar-weekday {
+  .bds124Calendar-weekday {
     font-size: var(--bds-font_size--body--s);
     font-weight: var(--bds-font_weight--semibold);
     color: var(--bds-color_on-bg);
     text-align: center;
     padding-block-end: var(--bds-space_xs);
   }
-  .bds122Calendar-empty {
+  .bds124Calendar-empty {
     padding: 0;
   }
-  .bds122Calendar-day {
+  .bds124Calendar-day {
     all: unset;
     display: flex;
     align-items: center;
     justify-content: center;
     inline-size: 100%;
     aspect-ratio: 1;
-    border-radius: 50%;
+    border-radius: var(--calendar_button-radius, var(--bds-border_radius--circle));
     font-size: var(--bds-font_size--body--s);
     color: var(--bds-color_on-bg);
     cursor: pointer;
     transition: var(--bds-animation_transition);
     box-sizing: border-box;
   }
-  .bds122Calendar-day:focus-visible {
+  .bds124Calendar-day:focus-visible {
     outline: var(--bds-outline_default);
     outline-offset: var(--bds-outline_offset);
   }
   @media (hover: hover) and (pointer: fine) {
-    .bds122Calendar-day:not(.bds122Calendar-disabled, .bds122Calendar-selected):hover {
+    .bds124Calendar-day:not(.bds124Calendar-disabled, .bds124Calendar-selected):hover {
       background-color: var(--bds-color_bg--subtle);
     }
   }
-  .bds122Calendar-today {
+  .bds124Calendar-today {
     font-weight: var(--bds-font_weight--semibold);
     --bdc_color: var(--bds-color_interactive);
     border: var(--calendar_today-border, none);
     box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color);
   }
-  .bds122Calendar-selected {
+  .bds124Calendar-selected {
     background-color: var(--bds-color_interactive);
     color: var(--bds-color_on-interactive);
     font-weight: var(--bds-font_weight--semibold);
   }
-  .bds122Calendar-disabled {
+  .bds124Calendar-disabled {
     opacity: 0.35;
     cursor: not-allowed;
   }
   @media (prefers-reduced-motion: reduce) {
-    .bds122Calendar-day {
+    .bds124Calendar-day {
       transition: none;
     }
   }
@@ -487,13 +487,13 @@
 
 /* src/components/ui/Carousel/Carousel.module.css */
 @layer component {
-  .bds122Carousel-carousel {
+  .bds124Carousel-carousel {
     position: relative;
     display: flex;
     align-items: center;
     gap: var(--bds-space_xs);
   }
-  .bds122Carousel-track {
+  .bds124Carousel-track {
     display: flex;
     gap: var(--bds-space_m);
     overflow-inline: auto;
@@ -502,21 +502,21 @@
     flex: 1;
     scroll-behavior: smooth;
   }
-  .bds122Carousel-track::-webkit-scrollbar {
+  .bds124Carousel-track::-webkit-scrollbar {
     display: none;
   }
-  .bds122Carousel-slide {
+  .bds124Carousel-slide {
     scroll-snap-align: start;
     flex-shrink: 0;
   }
-  .bds122Carousel-navBtn {
+  .bds124Carousel-navBtn {
     all: unset;
     display: flex;
     align-items: center;
     justify-content: center;
     inline-size: 2.5rem;
     block-size: 2.5rem;
-    border-radius: 50%;
+    border-radius: var(--carousel_indicator-radius, var(--bds-border_radius--circle));
     background-color: var(--bds-color_bg);
     color: var(--bds-color_on-bg);
     --bdc_color: var(--bds-color_on-bg);
@@ -526,21 +526,21 @@
     flex-shrink: 0;
     transition: var(--bds-animation_transition);
   }
-  .bds122Carousel-navBtn svg {
+  .bds124Carousel-navBtn svg {
     inline-size: 1.25rem;
     block-size: 1.25rem;
   }
-  .bds122Carousel-navBtn:focus-visible {
+  .bds124Carousel-navBtn:focus-visible {
     outline: var(--bds-outline_default);
     outline-offset: var(--bds-outline_offset);
   }
   @media (hover: hover) and (pointer: fine) {
-    .bds122Carousel-navBtn:hover {
+    .bds124Carousel-navBtn:hover {
       background-color: var(--bds-color_bg--subtle);
     }
   }
   @media (prefers-reduced-motion: reduce) {
-    .bds122Carousel-track {
+    .bds124Carousel-track {
       scroll-behavior: auto;
     }
   }
@@ -548,7 +548,7 @@
 
 /* src/components/ui/DescriptionList/DescriptionList.module.css */
 @layer component {
-  .bds122DescriptionList-list {
+  .bds124DescriptionList-list {
     display: flex;
     flex-direction: column;
     gap: var(--bds-space_s);
@@ -557,61 +557,61 @@
     font-size: var(--bds-font_size--body);
     color: var(--bds-color_on-bg);
   }
-  .bds122DescriptionList-group {
+  .bds124DescriptionList-group {
     display: flex;
     flex-direction: column;
     gap: var(--bds-space_xxs);
   }
-  .bds122DescriptionList-term {
+  .bds124DescriptionList-term {
     font-weight: var(--bds-font_weight--semibold);
     color: var(--bds-color_on-bg);
   }
-  .bds122DescriptionList-details {
+  .bds124DescriptionList-details {
     margin: 0;
     color: var(--bds-color_on-bg);
   }
-  .bds122DescriptionList---layout_inline .bds122DescriptionList-group {
+  .bds124DescriptionList---layout_inline .bds124DescriptionList-group {
     display: grid;
     grid-template-columns: minmax(8rem, 1fr) 2fr;
     gap: var(--bds-space_xs);
     align-items: baseline;
   }
-  .bds122DescriptionList---layout_inline .bds122DescriptionList-term {
+  .bds124DescriptionList---layout_inline .bds124DescriptionList-term {
     grid-column: 1;
   }
-  .bds122DescriptionList---layout_inline .bds122DescriptionList-details {
+  .bds124DescriptionList---layout_inline .bds124DescriptionList-details {
     grid-column: 2;
   }
 }
 
 /* src/components/ui/Link/Link.module.css */
 @layer component {
-  .bds122Link-link {
+  .bds124Link-link {
     color: var(--link_color, var(--bds-color_interactive_on-bg));
     text-decoration: underline;
     text-underline-offset: 0.2em;
     transition: var(--bds-animation_transition);
     cursor: pointer;
   }
-  .bds122Link-link:focus-visible {
+  .bds124Link-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) {
-    .bds122Link-link:hover {
+    .bds124Link-link:hover {
       --link_color: var(--link_color-hover, var(--bds-color_blue--strong));
     }
   }
-  .bds122Link---variant_default {
+  .bds124Link---variant_default {
     --link_color: var(--bds-color_interactive_on-bg);
     --link_color-hover: var(--bds-color_blue--strong);
   }
-  .bds122Link---variant_subtle {
+  .bds124Link---variant_subtle {
     --link_color: var(--bds-color_on-bg);
     --link_color-hover: var(--bds-color_interactive_on-bg);
   }
-  .bds122Link---variant_standalone {
+  .bds124Link---variant_standalone {
     --link_color: var(--bds-color_interactive_on-bg);
     --link_color-hover: var(--bds-color_blue--strong);
     display: inline-flex;
@@ -621,12 +621,12 @@
     text-decoration: none;
   }
   @media (hover: hover) and (pointer: fine) {
-    .bds122Link---variant_standalone:hover {
+    .bds124Link---variant_standalone:hover {
       text-decoration: underline;
       text-underline-offset: 0.2em;
     }
   }
-  .bds122Link-externalLabel {
+  .bds124Link-externalLabel {
     position: absolute;
     inline-size: 1px;
     block-size: 1px;
@@ -641,25 +641,25 @@
 
 /* src/components/ui/Loading/Loading.module.css */
 @layer component {
-  .bds122Loading-loading {
+  .bds124Loading-loading {
     display: flex;
     justify-content: center;
     align-items: center;
   }
-  .bds122Loading-spinner {
+  .bds124Loading-spinner {
     inline-size: 2.5em;
     block-size: 2.5em;
     border: 4px solid var(--bds-color_bg);
     border-block-start: 4px solid var(--bds-color_interactive);
-    border-radius: 50%;
+    border-radius: var(--loading_radius, var(--bds-border_radius--circle));
     animation: spin 1s linear infinite;
   }
-  .bds122Loading---size_small .bds122Loading-spinner {
+  .bds124Loading---size_small .bds124Loading-spinner {
     inline-size: 1.5em;
     block-size: 1.5em;
     border-width: 2px;
   }
-  .bds122Loading---size_large .bds122Loading-spinner {
+  .bds124Loading---size_large .bds124Loading-spinner {
     inline-size: 4em;
     block-size: 4em;
     border-width: 6px;
@@ -674,14 +674,14 @@
   }
 }
 @media (prefers-reduced-motion: reduce) {
-  .bds122Loading-spinner {
+  .bds124Loading-spinner {
     animation: none;
   }
 }
 
 /* src/components/ui/NotificationBanner/NotificationBanner.module.css */
 @layer component {
-  .bds122NotificationBanner-banner {
+  .bds124NotificationBanner-banner {
     display: flex;
     align-items: center;
     gap: var(--bds-space_m);
@@ -693,33 +693,33 @@
     line-height: var(--bds-font_line-height--body);
     inline-size: 100%;
   }
-  .bds122NotificationBanner---variant_info {
+  .bds124NotificationBanner---variant_info {
     --banner_bg: var(--bds-color_blue--subtle);
     --banner_text: var(--bds-color_on-blue--subtle);
     --banner_border: var(--bds-color_blue);
   }
-  .bds122NotificationBanner---variant_success {
+  .bds124NotificationBanner---variant_success {
     --banner_bg: var(--bds-color_success--subtle);
     --banner_text: var(--bds-color_on-success--subtle);
     --banner_border: var(--bds-color_success);
   }
-  .bds122NotificationBanner---variant_warning {
+  .bds124NotificationBanner---variant_warning {
     --banner_bg: var(--bds-color_orange--subtle);
     --banner_text: var(--bds-color_on-orange--subtle);
     --banner_border: var(--bds-color_warning);
   }
-  .bds122NotificationBanner---variant_error {
+  .bds124NotificationBanner---variant_error {
     --banner_bg: rgb(from var(--bds-color_error) r g b / 12%);
     --banner_text: var(--bds-color_on-bg);
     --banner_border: var(--bds-color_error);
   }
-  .bds122NotificationBanner-content {
+  .bds124NotificationBanner-content {
     flex: 1;
   }
-  .bds122NotificationBanner-action {
+  .bds124NotificationBanner-action {
     flex-shrink: 0;
   }
-  .bds122NotificationBanner-dismiss {
+  .bds124NotificationBanner-dismiss {
     all: unset;
     display: flex;
     align-items: center;
@@ -727,22 +727,22 @@
     flex-shrink: 0;
     cursor: pointer;
     color: currentcolor;
-    border-radius: 50%;
+    border-radius: var(--banner_dismiss-radius, var(--bds-border_radius--circle));
     border: var(--banner_dismiss-border, none);
     transition: var(--bds-animation_transition);
     --bdc_color: currentcolor;
     box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color);
   }
-  .bds122NotificationBanner-dismiss svg {
+  .bds124NotificationBanner-dismiss svg {
     inline-size: 1rem;
     block-size: 1rem;
   }
-  .bds122NotificationBanner-dismiss:focus-visible {
+  .bds124NotificationBanner-dismiss:focus-visible {
     outline: var(--bds-outline_default);
     outline-offset: var(--bds-outline_offset);
   }
   @media (hover: hover) and (pointer: fine) {
-    .bds122NotificationBanner-dismiss:hover {
+    .bds124NotificationBanner-dismiss:hover {
       opacity: 0.7;
     }
   }
@@ -750,11 +750,11 @@
 
 /* src/components/ui/Pagination/Pagination.module.css */
 @layer component {
-  .bds122Pagination-pagination {
+  .bds124Pagination-pagination {
     display: flex;
     justify-content: center;
   }
-  .bds122Pagination-list {
+  .bds124Pagination-list {
     display: flex;
     align-items: center;
     gap: var(--bds-space_xxs);
@@ -762,7 +762,10 @@
     margin: 0;
     padding: 0;
   }
-  .bds122Pagination-button {
+  .bds124Pagination-list li {
+    list-style: none;
+  }
+  .bds124Pagination-button {
     all: unset;
     display: inline-flex;
     align-items: center;
@@ -770,7 +773,7 @@
     min-inline-size: 2.25rem;
     block-size: 2.25rem;
     padding-inline: var(--bds-space_xs);
-    border-radius: var(--bds-border_radius--xs);
+    border-radius: var(--pagination_radius, var(--bds-border_radius--full));
     background-color: var(--btn_bg, transparent);
     --bdc_color: var(--btn_border, var(--bds-color_bg--subtle));
     border: none;
@@ -783,30 +786,30 @@
     transition: var(--bds-animation_transition);
     box-sizing: border-box;
   }
-  .bds122Pagination-button:disabled {
+  .bds124Pagination-button:disabled {
     opacity: 0.4;
     cursor: not-allowed;
   }
-  .bds122Pagination-button:focus-visible {
+  .bds124Pagination-button:focus-visible {
     outline: var(--bds-outline_default);
     outline-offset: var(--bds-outline_offset);
   }
   @media (hover: hover) and (pointer: fine) {
-    .bds122Pagination-button:not(:disabled, .bds122Pagination---active):hover {
+    .bds124Pagination-button:not(:disabled, .bds124Pagination---active):hover {
       --btn_bg: var(--bds-color_bg--subtle);
       --btn_color: var(--bds-color_interactive_on-bg);
     }
   }
-  .bds122Pagination-button.bds122Pagination---active {
+  .bds124Pagination-button.bds124Pagination---active {
     --btn_bg: var(--bds-color_interactive);
     --btn_color: var(--bds-color_on-interactive);
     --btn_border: var(--bds-color_interactive);
   }
-  .bds122Pagination-button.bds122Pagination---nav svg {
+  .bds124Pagination-button.bds124Pagination---nav svg {
     inline-size: 1rem;
     block-size: 1rem;
   }
-  .bds122Pagination-ellipsis {
+  .bds124Pagination-ellipsis {
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -820,46 +823,46 @@
 
 /* src/components/ui/Progress/Progress.module.css */
 @layer component {
-  .bds122Progress-container {
+  .bds124Progress-container {
     display: flex;
     flex-direction: column;
     gap: var(--bds-space_xxs);
     inline-size: 100%;
   }
-  .bds122Progress-labelRow {
+  .bds124Progress-labelRow {
     display: flex;
     justify-content: space-between;
     align-items: baseline;
     font-size: var(--bds-font_size--body--s);
     color: var(--bds-color_on-bg);
   }
-  .bds122Progress-value {
+  .bds124Progress-value {
     font-variant-numeric: tabular-nums;
   }
-  .bds122Progress-track {
+  .bds124Progress-track {
     inline-size: 100%;
     block-size: var(--progress_height, var(--bds-space_xs));
     background-color: var(--bds-color_bg--subtle);
-    border-radius: 999px;
+    border-radius: var(--progress_radius, var(--bds-border_radius--full));
     overflow: hidden;
   }
-  .bds122Progress-track.bds122Progress---size_small {
+  .bds124Progress-track.bds124Progress---size_small {
     --progress_height: var(--bds-space_xxs);
   }
-  .bds122Progress-track.bds122Progress---size_medium {
+  .bds124Progress-track.bds124Progress---size_medium {
     --progress_height: var(--bds-space_xs);
   }
-  .bds122Progress-track.bds122Progress---size_large {
+  .bds124Progress-track.bds124Progress---size_large {
     --progress_height: var(--bds-space_s);
   }
-  .bds122Progress-fill {
+  .bds124Progress-fill {
     block-size: 100%;
     background-color: var(--progress_color-active, var(--bdc-color_active));
-    border-radius: 999px;
+    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) {
-    .bds122Progress-fill {
+    .bds124Progress-fill {
       transition: none;
     }
   }
@@ -867,23 +870,23 @@
 
 /* src/components/ui/ProgressCircle/ProgressCircle.module.css */
 @layer component {
-  .bds122ProgressCircle-wrapper {
+  .bds124ProgressCircle-wrapper {
     position: relative;
     display: inline-flex;
     align-items: center;
     justify-content: center;
   }
-  .bds122ProgressCircle-svg {
+  .bds124ProgressCircle-svg {
     display: block;
   }
-  .bds122ProgressCircle-track {
+  .bds124ProgressCircle-track {
     stroke: var(--bds-color_bg--subtle);
   }
-  .bds122ProgressCircle-fill {
+  .bds124ProgressCircle-fill {
     stroke: var(--progressCircle_color-active, var(--bdc-color_active));
     transition: stroke-dashoffset var(--bds-animation_transition-duration) var(--bds-animation_easing);
   }
-  .bds122ProgressCircle-value {
+  .bds124ProgressCircle-value {
     position: absolute;
     font-size: var(--bds-font_size--body--s);
     font-weight: var(--bds-font_weight--semibold);
@@ -891,17 +894,17 @@
     color: var(--bds-color_on-bg);
     line-height: 1;
   }
-  .bds122ProgressCircle---size_small .bds122ProgressCircle-value {
+  .bds124ProgressCircle---size_small .bds124ProgressCircle-value {
     font-size: 0.5rem;
   }
-  .bds122ProgressCircle---size_medium .bds122ProgressCircle-value {
+  .bds124ProgressCircle---size_medium .bds124ProgressCircle-value {
     font-size: var(--bds-font_size--body--s);
   }
-  .bds122ProgressCircle---size_large .bds122ProgressCircle-value {
+  .bds124ProgressCircle---size_large .bds124ProgressCircle-value {
     font-size: var(--bds-font_size--body);
   }
   @media (prefers-reduced-motion: reduce) {
-    .bds122ProgressCircle-fill {
+    .bds124ProgressCircle-fill {
       transition: none;
     }
   }
@@ -909,16 +912,16 @@
 
 /* src/components/ui/Separator/Separator.module.css */
 @layer component {
-  .bds122Separator-separator {
+  .bds124Separator-separator {
     border: none;
     background-color: var(--separator_color, var(--bds-color_on-bg));
   }
-  .bds122Separator-separator.bds122Separator---horizontal {
+  .bds124Separator-separator.bds124Separator---horizontal {
     display: block;
     inline-size: 100%;
     block-size: var(--separator_thickness, 1px);
   }
-  .bds122Separator-separator.bds122Separator---vertical {
+  .bds124Separator-separator.bds124Separator---vertical {
     display: inline-block;
     inline-size: var(--separator_thickness, 1px);
     align-self: stretch;
@@ -927,7 +930,7 @@
 
 /* src/components/ui/Skeleton/Skeleton.module.css */
 @layer component {
-  .bds122Skeleton-skeleton {
+  .bds124Skeleton-skeleton {
     background:
       linear-gradient(
         90deg,
@@ -951,7 +954,7 @@
 
 /* src/components/ui/SkipLink/SkipLink.module.css */
 @layer component {
-  .bds122SkipLink-skipLink {
+  .bds124SkipLink-skipLink {
     position: absolute;
     inset-block-start: var(--bds-space_s);
     inset-inline-start: var(--bds-space_s);
@@ -969,13 +972,13 @@
     transform: translateY(-200%);
     transition: transform var(--bds-animation_transition-duration) var(--bds-animation_easing);
   }
-  .bds122SkipLink-skipLink:focus-visible {
+  .bds124SkipLink-skipLink:focus-visible {
     transform: translateY(0);
     outline: var(--bds-outline_default);
     outline-offset: var(--bds-outline_offset);
   }
   @media (prefers-reduced-motion: reduce) {
-    .bds122SkipLink-skipLink {
+    .bds124SkipLink-skipLink {
       transition: none;
     }
   }
@@ -983,7 +986,7 @@
 
 /* src/components/ui/Table/Table.module.css */
 @layer component {
-  .bds122Table-wrapper {
+  .bds124Table-wrapper {
     inline-size: 100%;
     overflow-inline: auto;
     border: var(--table_border, none);
@@ -992,23 +995,23 @@
     border-radius: var(--table_radius, var(--bdc-outline_radius));
     box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color);
   }
-  .bds122Table-table {
+  .bds124Table-table {
     inline-size: 100%;
     border-collapse: collapse;
     font-size: var(--bds-font_size--body);
     font-family: var(--bds-font_family--body);
   }
-  .bds122Table-caption {
+  .bds124Table-caption {
     caption-side: top;
     text-align: start;
     padding: var(--bds-space_s) var(--bds-space_m);
     font-weight: var(--bds-font_weight--semibold);
     color: var(--bds-color_on-bg);
   }
-  .bds122Table-thead {
+  .bds124Table-thead {
     background-color: var(--bds-color_bg--subtle);
   }
-  .bds122Table-th {
+  .bds124Table-th {
     padding: var(--bds-space_s) var(--bds-space_m);
     text-align: start;
     font-weight: var(--bds-font_weight--semibold);
@@ -1017,10 +1020,10 @@
     white-space: nowrap;
     border-block-end: 1px solid var(--bds-color_bg--subtle);
   }
-  .bds122Table-th.bds122Table---sortable {
+  .bds124Table-th.bds124Table---sortable {
     padding: 0;
   }
-  .bds122Table-sortButton {
+  .bds124Table-sortButton {
     all: unset;
     display: flex;
     align-items: center;
@@ -1034,47 +1037,47 @@
     transition: var(--bds-animation_transition);
     box-sizing: border-box;
   }
-  .bds122Table-sortButton:focus-visible {
+  .bds124Table-sortButton:focus-visible {
     outline: var(--bds-outline_default);
     outline-offset: calc(var(--bds-outline_offset) * -1);
   }
   @media (hover: hover) and (pointer: fine) {
-    .bds122Table-sortButton:hover {
+    .bds124Table-sortButton:hover {
       color: var(--bds-color_on-bg);
     }
   }
-  .bds122Table-sortIcon {
+  .bds124Table-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);
   }
-  .bds122Table-sortIcon.bds122Table---sort-active {
+  .bds124Table-sortIcon.bds124Table---sort-active {
     opacity: 1;
     color: var(--bds-color_interactive);
   }
-  .bds122Table-sortIcon.bds122Table---sort-desc {
+  .bds124Table-sortIcon.bds124Table---sort-desc {
     transform: rotate(180deg);
   }
-  .bds122Table-tbody .bds122Table-tr {
+  .bds124Table-tbody .bds124Table-tr {
     border-block-end: 1px solid var(--bds-color_bg--subtle);
     transition: var(--bds-animation_transition);
   }
-  .bds122Table-tbody .bds122Table-tr:last-child {
+  .bds124Table-tbody .bds124Table-tr:last-child {
     border-block-end: none;
   }
   @media (hover: hover) and (pointer: fine) {
-    .bds122Table-tbody .bds122Table-tr:hover {
+    .bds124Table-tbody .bds124Table-tr:hover {
       background-color: var(--bds-color_bg--subtle);
     }
   }
-  .bds122Table-td {
+  .bds124Table-td {
     padding: var(--bds-space_s) var(--bds-space_m);
     color: var(--bds-color_on-bg);
     vertical-align: middle;
   }
   @media (prefers-reduced-motion: reduce) {
-    .bds122Table-sortIcon {
+    .bds124Table-sortIcon {
       transition: none;
     }
   }
@@ -1082,16 +1085,16 @@
 
 /* src/components/ui/Tabs/Tabs.module.css */
 @layer component {
-  .bds122Tabs-tabs {
+  .bds124Tabs-tabs {
     display: flex;
     flex-direction: column;
   }
-  .bds122Tabs-tabList {
+  .bds124Tabs-tabList {
     display: flex;
     border-block-end: 1px solid var(--bds-color_bg--subtle);
     gap: var(--bds-space_xxs);
   }
-  .bds122Tabs-tab {
+  .bds124Tabs-tab {
     all: unset;
     display: inline-flex;
     align-items: center;
@@ -1105,28 +1108,28 @@
     cursor: pointer;
     transition: var(--bds-animation_transition);
   }
-  .bds122Tabs-tab.bds122Tabs---active {
+  .bds124Tabs-tab.bds124Tabs---active {
     --tab_color: var(--bds-color_interactive_on-bg);
     --tab_border-color: var(--bds-color_interactive);
   }
-  .bds122Tabs-tab:disabled {
+  .bds124Tabs-tab:disabled {
     opacity: 0.4;
     cursor: not-allowed;
   }
-  .bds122Tabs-tab:focus-visible {
+  .bds124Tabs-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) {
-    .bds122Tabs-tab:not(:disabled, .bds122Tabs---active):hover {
+    .bds124Tabs-tab:not(:disabled, .bds124Tabs---active):hover {
       --tab_color: var(--bds-color_interactive_on-bg);
     }
   }
-  .bds122Tabs-panel {
+  .bds124Tabs-panel {
     padding-block-start: var(--bds-space_m);
   }
-  .bds122Tabs-panel:focus-visible {
+  .bds124Tabs-panel:focus-visible {
     outline: var(--bds-outline_default);
     outline-offset: var(--bds-outline_offset);
   }
@@ -1134,16 +1137,16 @@
 
 /* src/components/ui/Tooltip/Tooltip.module.css */
 @layer component {
-  .bds122Tooltip-wrapper {
+  .bds124Tooltip-wrapper {
     position: relative;
     display: inline-flex;
     align-items: center;
   }
-  .bds122Tooltip-tooltip {
+  .bds124Tooltip-tooltip {
     position: absolute;
     z-index: var(--bds-z-index_popover);
     padding: var(--bds-space_xxs) var(--bds-space_xs);
-    border-radius: var(--bds-border_radius--xs);
+    border-radius: var(--tooltip_radius, var(--bds-border_radius--full));
     background-color: var(--tooltip_bg, var(--bds-color_on-bg));
     color: var(--tooltip_text, var(--bds-color_bg));
     font-size: var(--bds-font_size--body--s);
@@ -1154,33 +1157,33 @@
     opacity: 0;
     transition: opacity var(--bds-animation_transition-duration) var(--bds-animation_easing);
   }
-  .bds122Tooltip-wrapper:hover .bds122Tooltip-tooltip,
-  .bds122Tooltip-wrapper:focus-within .bds122Tooltip-tooltip {
+  .bds124Tooltip-wrapper:hover .bds124Tooltip-tooltip,
+  .bds124Tooltip-wrapper:focus-within .bds124Tooltip-tooltip {
     visibility: visible;
     opacity: 1;
   }
-  .bds122Tooltip---placement_top {
+  .bds124Tooltip---placement_top {
     inset-block-end: calc(100% + var(--bds-space_xs));
     inset-inline-start: 50%;
     transform: translateX(-50%);
   }
-  .bds122Tooltip---placement_bottom {
+  .bds124Tooltip---placement_bottom {
     inset-block-start: calc(100% + var(--bds-space_xs));
     inset-inline-start: 50%;
     transform: translateX(-50%);
   }
-  .bds122Tooltip---placement_left {
+  .bds124Tooltip---placement_left {
     inset-inline-end: calc(100% + var(--bds-space_xs));
     inset-block-start: 50%;
     transform: translateY(-50%);
   }
-  .bds122Tooltip---placement_right {
+  .bds124Tooltip---placement_right {
     inset-inline-start: calc(100% + var(--bds-space_xs));
     inset-block-start: 50%;
     transform: translateY(-50%);
   }
   @media (prefers-reduced-motion: reduce) {
-    .bds122Tooltip-tooltip {
+    .bds124Tooltip-tooltip {
       transition: none;
     }
   }
@@ -1188,34 +1191,34 @@
 
 /* src/components/ui/Typography/Typography.module.css */
 @layer component {
-  .bds122Typography-typography {
+  .bds124Typography-typography {
     margin: 0;
     font-family: var(--bds-font_family--body);
     color: var(--typography_color, var(--bds-color_on-bg));
   }
-  .bds122Typography---h1 {
+  .bds124Typography---h1 {
     font-family: var(--bds-font_family--heading);
     font-size: var(--bds-font_size--heading-1);
     font-weight: var(--bds-font_weight--bold);
     line-height: var(--bds-font_line-height--heading);
   }
-  .bds122Typography---h2 {
+  .bds124Typography---h2 {
     font-family: var(--bds-font_family--heading);
     font-size: var(--bds-font_size--heading-2);
     font-weight: var(--bds-font_weight--semibold);
     line-height: var(--bds-font_line-height--heading);
   }
-  .bds122Typography---h3 {
+  .bds124Typography---h3 {
     font-family: var(--bds-font_family--heading);
     font-size: var(--bds-font_size--heading-3);
     font-weight: var(--bds-font_weight--semibold);
     line-height: var(--bds-font_line-height--heading);
   }
-  .bds122Typography---body {
+  .bds124Typography---body {
     font-size: var(--bds-font_size--body);
     line-height: var(--bds-font_line-height--body);
   }
-  .bds122Typography---body_s {
+  .bds124Typography---body_s {
     font-size: var(--bds-font_size--body--s);
     line-height: var(--bds-font_line-height--body);
   }
@@ -1247,15 +1250,15 @@
   }
 }
 @layer component {
-  .bds122Button-button,
-  .bds122Button-button[href] {
+  .bds124Button-button,
+  .bds124Button-button[href] {
     all: unset;
     position: relative;
     font: inherit;
     padding-inline: var(--bds-space_l);
     display: inline-flex;
     gap: var(--bds-space_xs);
-    border-radius: var(--button_border_radius--s, var(--bds-border_radius--s));
+    border-radius: var(--button_radius, var(--bds-border_radius--full));
     align-items: center;
     cursor: pointer;
     scroll-padding-block-end: var(--bds-space_l);
@@ -1274,68 +1277,65 @@
     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);
   }
-  .bds122Button-button.bds122Button---default {
+  .bds124Button-button.bds124Button---default {
   }
-  .bds122Button-button.bds122Button---outline,
-  .bds122Button-button.bds122Button---ghost {
+  .bds124Button-button.bds124Button---outline,
+  .bds124Button-button.bds124Button---ghost {
     --button_bg: transparent;
     --button_text: var(--button_color--on-bg);
     --bdc_color: var(--button_color--on-bg);
   }
-  .bds122Button-button.bds122Button---size_small {
+  .bds124Button-button.bds124Button---size_small {
     --button_height: 2.25em;
     --button_font-size: var(--bds-font_size--body--s);
-    --button_border_radius--s: var(--bds-border_radius--xs);
     padding-inline: var(--bds-space_m);
   }
-  .bds122Button-button.bds122Button---size_medium {
+  .bds124Button-button.bds124Button---size_medium {
     --button_height: 3em;
     padding-inline: var(--bds-space_l);
   }
-  .bds122Button-button.bds122Button---size_large {
+  .bds124Button-button.bds124Button---size_large {
     --button_font-size: var(--bds-font_size--heading-3);
-    --button_border_radius--s: var(--bds-border_radius--m);
     padding-inline: var(--bds-space_xl);
   }
-  .bds122Button-button.bds122Button---hasPulse {
+  .bds124Button-button.bds124Button---hasPulse {
     animation: pulse 3s infinite;
   }
-  .bds122Button-button[href] {
+  .bds124Button-button[href] {
     text-decoration: none;
   }
-  .bds122Button-button svg {
+  .bds124Button-button svg {
     --icon__stroke: currentcolor;
     fill: currentcolor;
     color: currentcolor;
     flex-shrink: 0;
   }
-  .bds122Button-iconStart {
+  .bds124Button-iconStart {
     display: flex;
     align-items: center;
     margin-inline-start: calc(var(--bds-space_s) * -1);
     transition: var(--bds-animation_transition);
   }
-  .bds122Button-iconEnd {
+  .bds124Button-iconEnd {
     display: flex;
     align-items: center;
     margin-inline-end: calc(var(--bds-space_s) * -1);
     transition: var(--bds-animation_transition);
   }
   @media (hover: hover) and (pointer: fine) {
-    .bds122Button-button:hover .bds122Button-iconStart svg {
+    .bds124Button-button:hover .bds124Button-iconStart svg {
       animation: fadeZoom 2s ease-out infinite;
     }
-    .bds122Button-button:hover .bds122Button-iconEnd svg {
+    .bds124Button-button:hover .bds124Button-iconEnd svg {
       animation: fadeZoom 2s ease-out infinite;
     }
   }
-  .bds122Button-button:focus-visible {
+  .bds124Button-button:focus-visible {
     outline: var(--bds-outline_default);
     outline-offset: var(--bds-outline_offset);
-    border-radius: var(--bds-border_radius--s);
   }
   @media (hover: hover) and (pointer: fine) {
-    .bds122Button-button.bds122Button---default:hover {
+    .bds124Button-button.bds124Button---default:hover {
       --button_bg: var(--bds-color_bg);
       --button_text: var(--bds-color_interactive_on-bg);
       --button_pulse-color: var(--bds-color_interactive_on-bg);
@@ -1343,8 +1343,8 @@
     }
   }
   @media (hover: hover) and (pointer: fine) {
-    .bds122Button-button.bds122Button---outline:hover,
-    .bds122Button-button.bds122Button---ghost:hover {
+    .bds124Button-button.bds124Button---outline:hover,
+    .bds124Button-button.bds124Button---ghost:hover {
       --button_bg: var(--button_color);
       --button_text: var(--button_on-color);
       --bdc_color: transparent;
@@ -1354,7 +1354,7 @@
 
 /* src/components/interaction/Command/Command.module.css */
 @layer component {
-  .bds122Command-dialog {
+  .bds124Command-dialog {
     padding: 0;
     border: none;
     border-radius: var(--bds-border_radius--m);
@@ -1364,11 +1364,11 @@
     overflow: visible;
     margin-block-start: 10vh;
   }
-  .bds122Command-dialog::backdrop {
+  .bds124Command-dialog::backdrop {
     background-color: var(--color_backdrop, rgb(0 0 0 / 50%));
     backdrop-filter: blur(3px);
   }
-  .bds122Command-palette {
+  .bds124Command-palette {
     display: flex;
     flex-direction: column;
     background-color: var(--command_color, var(--bds-color_bg));
@@ -1381,7 +1381,7 @@
     --bdc-outline_radius: var(--bds-border_radius--m);
     box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--command_shadow, var(--bds-shadow_xl));
   }
-  .bds122Command-searchRow {
+  .bds124Command-searchRow {
     display: flex;
     align-items: center;
     gap: var(--bds-space_xs);
@@ -1389,13 +1389,13 @@
     border-block-end: 1px solid currentcolor;
     flex-shrink: 0;
   }
-  .bds122Command-searchIcon {
+  .bds124Command-searchIcon {
     inline-size: 1.25rem;
     block-size: 1.25rem;
     color: var(--bds-color_on-bg);
     flex-shrink: 0;
   }
-  .bds122Command-search {
+  .bds124Command-search {
     flex: 1;
     border: none;
     outline: none;
@@ -1405,10 +1405,10 @@
     background: transparent;
     min-inline-size: 0;
   }
-  .bds122Command-search::placeholder {
+  .bds124Command-search::placeholder {
     color: var(--bds-color_on-bg);
   }
-  .bds122Command-escHint {
+  .bds124Command-escHint {
     font-size: var(--bds-font_size--body--s);
     color: var(--bds-color_on-bg);
     border-radius: var(--bds-border_radius--xs);
@@ -1418,18 +1418,18 @@
     border: none;
     box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color);
   }
-  .bds122Command-list {
+  .bds124Command-list {
     overflow-block: auto;
     list-style: none;
     margin: 0;
     padding: var(--bds-space_xs) 0;
   }
-  .bds122Command-groupList {
+  .bds124Command-groupList {
     list-style: none;
     margin: 0;
     padding: 0;
   }
-  .bds122Command-group {
+  .bds124Command-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);
@@ -1437,7 +1437,7 @@
     text-transform: uppercase;
     letter-spacing: 0.05em;
   }
-  .bds122Command-item {
+  .bds124Command-item {
     display: flex;
     align-items: center;
     gap: var(--bds-space_s);
@@ -1445,19 +1445,19 @@
     cursor: pointer;
     transition: background-color var(--bds-animation_transition-duration) var(--bds-animation_easing);
   }
-  .bds122Command-itemActive {
+  .bds124Command-itemActive {
     background-color: var(--bds-color_bg--subtle);
   }
-  .bds122Command-itemLabel {
+  .bds124Command-itemLabel {
     flex: 1;
     font-size: var(--bds-font_size--body);
     color: var(--bds-color_on-bg);
   }
-  .bds122Command-itemDesc {
+  .bds124Command-itemDesc {
     font-size: var(--bds-font_size--body--s);
     color: var(--bds-color_on-bg);
   }
-  .bds122Command-shortcut {
+  .bds124Command-shortcut {
     font-size: var(--bds-font_size--body--s);
     color: var(--bds-color_on-bg);
     border-radius: var(--bds-border_radius--xs);
@@ -1466,7 +1466,7 @@
     border: none;
     box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color);
   }
-  .bds122Command-empty {
+  .bds124Command-empty {
     padding: var(--bds-space_l) var(--bds-space_m);
     text-align: center;
     color: var(--bds-color_on-bg);
@@ -1476,7 +1476,7 @@
 
 /* src/components/interaction/Dialog/Dialog.module.css */
 @layer component {
-  .bds122Dialog-dialog {
+  .bds124Dialog-dialog {
     font-size: var(--bds-font_size--body--s);
     border: var(--dialog_border, none);
     --bdc_color: currentcolor;
@@ -1490,14 +1490,14 @@
     max-block-size: 90svh;
     overflow: visible;
   }
-  .bds122Dialog-dialogContent {
+  .bds124Dialog-dialogContent {
     display: grid;
     gap: var(--bds-grid_gap);
     overflow-block: auto;
     min-block-size: 0;
     flex: 1;
   }
-  .bds122Dialog-closeButton {
+  .bds124Dialog-closeButton {
     all: unset;
     position: absolute;
     inset-block-start: -1em;
@@ -1507,7 +1507,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    border-radius: 50%;
+    border-radius: var(--dialog_close-radius, var(--bds-border_radius--circle));
     background-color: var(--bds-color_bg);
     color: currentcolor;
     border: var(--dialog_close-border, none);
@@ -1515,15 +1515,15 @@
     box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color);
     cursor: pointer;
   }
-  .bds122Dialog-closeButton:focus-visible {
+  .bds124Dialog-closeButton:focus-visible {
     outline: var(--bds-outline_default);
     outline-offset: var(--bds-outline_offset);
   }
-  .bds122Dialog-closeButton svg {
+  .bds124Dialog-closeButton svg {
     inline-size: 1.25em;
     block-size: 1.25em;
   }
-  .bds122Dialog-dialog::backdrop {
+  .bds124Dialog-dialog::backdrop {
     background-color: var(--color_backdrop, rgb(0 0 0 / 50%));
     backdrop-filter: blur(3px);
   }
@@ -1531,7 +1531,7 @@
 
 /* src/components/interaction/Drawer/Drawer.module.css */
 @layer component {
-  .bds122Drawer-drawer {
+  .bds124Drawer-drawer {
     position: fixed;
     inset-block: 0;
     inset-inline: auto 0;
@@ -1554,22 +1554,22 @@
       display var(--bds-animation_transition-duration) var(--bds-animation_easing) allow-discrete,
       overlay var(--bds-animation_transition-duration) var(--bds-animation_easing) allow-discrete;
   }
-  .bds122Drawer---side_left.bds122Drawer-drawer {
+  .bds124Drawer---side_left.bds124Drawer-drawer {
     inset-inline: 0 auto;
     translate: -100% 0;
   }
-  .bds122Drawer-drawer[open] {
+  .bds124Drawer-drawer[open] {
     translate: 0 0;
   }
   @starting-style {
-    .bds122Drawer-drawer[open] {
+    .bds124Drawer-drawer[open] {
       translate: 100% 0;
     }
-    .bds122Drawer---side_left.bds122Drawer-drawer[open] {
+    .bds124Drawer---side_left.bds124Drawer-drawer[open] {
       translate: -100% 0;
     }
   }
-  .bds122Drawer-drawer::backdrop {
+  .bds124Drawer-drawer::backdrop {
     background-color: var(--color_backdrop, rgb(0 0 0 / 50%));
     backdrop-filter: blur(3px);
     opacity: 0;
@@ -1578,15 +1578,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;
   }
-  .bds122Drawer-drawer[open]::backdrop {
+  .bds124Drawer-drawer[open]::backdrop {
     opacity: 1;
   }
   @starting-style {
-    .bds122Drawer-drawer[open]::backdrop {
+    .bds124Drawer-drawer[open]::backdrop {
       opacity: 0;
     }
   }
-  .bds122Drawer-header {
+  .bds124Drawer-header {
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -1594,31 +1594,31 @@
     border-block-end: 1px solid currentcolor;
     flex-shrink: 0;
   }
-  .bds122Drawer-closeButton {
+  .bds124Drawer-closeButton {
     all: unset;
     display: flex;
     align-items: center;
     justify-content: center;
     inline-size: 2rem;
     block-size: 2rem;
-    border-radius: 50%;
+    border-radius: var(--drawer_close-radius, var(--bds-border_radius--circle));
     cursor: pointer;
     transition: var(--bds-animation_transition);
   }
-  .bds122Drawer-closeButton svg {
+  .bds124Drawer-closeButton svg {
     inline-size: 1.25rem;
     block-size: 1.25rem;
   }
-  .bds122Drawer-closeButton:focus-visible {
+  .bds124Drawer-closeButton:focus-visible {
     outline: var(--bds-outline_default);
     outline-offset: var(--bds-outline_offset);
   }
   @media (hover: hover) and (pointer: fine) {
-    .bds122Drawer-closeButton:hover {
+    .bds124Drawer-closeButton:hover {
       background-color: var(--bds-color_bg--subtle);
     }
   }
-  .bds122Drawer-body {
+  .bds124Drawer-body {
     flex: 1;
     overflow-block: auto;
     padding: var(--bds-space_l);
@@ -1626,8 +1626,8 @@
     flex-direction: column;
   }
   @media (prefers-reduced-motion: reduce) {
-    .bds122Drawer-drawer,
-    .bds122Drawer-drawer::backdrop {
+    .bds124Drawer-drawer,
+    .bds124Drawer-drawer::backdrop {
       transition: none;
     }
   }
@@ -1635,11 +1635,11 @@
 
 /* src/components/interaction/DropdownMenu/DropdownMenu.module.css */
 @layer component {
-  .bds122DropdownMenu-wrapper {
+  .bds124DropdownMenu-wrapper {
     position: relative;
     display: inline-flex;
   }
-  .bds122DropdownMenu-menu {
+  .bds124DropdownMenu-menu {
     position: absolute;
     inset-block-start: calc(100% + var(--bds-space_xxs));
     z-index: var(--bds-z-index_dropdown);
@@ -1655,19 +1655,22 @@
     list-style: none;
     margin: 0;
   }
-  .bds122DropdownMenu---placement_bottom-start {
+  .bds124DropdownMenu-menu li {
+    list-style: none;
+  }
+  .bds124DropdownMenu---placement_bottom-start {
     inset-inline-start: 0;
   }
-  .bds122DropdownMenu---placement_bottom-end {
+  .bds124DropdownMenu---placement_bottom-end {
     inset-inline-end: 0;
   }
-  .bds122DropdownMenu-separator {
+  .bds124DropdownMenu-separator {
     border: none;
     border-block-start: 1px solid currentcolor;
     margin: var(--bds-space_xxs) 0;
     opacity: 0.15;
   }
-  .bds122DropdownMenu-item {
+  .bds124DropdownMenu-item {
     all: unset;
     display: flex;
     align-items: center;
@@ -1681,22 +1684,22 @@
     box-sizing: border-box;
     transition: var(--bds-animation_transition);
   }
-  .bds122DropdownMenu-item:disabled {
+  .bds124DropdownMenu-item:disabled {
     opacity: 0.4;
     cursor: not-allowed;
   }
-  .bds122DropdownMenu-item:focus-visible {
+  .bds124DropdownMenu-item: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) {
-    .bds122DropdownMenu-item:not(:disabled):hover {
+    .bds124DropdownMenu-item:not(:disabled):hover {
       background-color: var(--bds-color_bg--subtle);
       color: var(--bds-color_interactive_on-bg);
     }
   }
-  .bds122DropdownMenu-icon {
+  .bds124DropdownMenu-icon {
     display: flex;
     align-items: center;
     flex-shrink: 0;
@@ -1705,10 +1708,10 @@
 
 /* src/components/interaction/Popover/Popover.module.css */
 @layer component {
-  .bds122Popover-wrapper {
+  .bds124Popover-wrapper {
     display: inline-flex;
   }
-  .bds122Popover-panel {
+  .bds124Popover-panel {
     position: fixed;
     inset: unset;
     margin: 0;
@@ -1727,7 +1730,7 @@
     color: var(--popover_on-color, var(--bds-color_on-bg));
     font-size: var(--bds-font_size--body);
   }
-  .bds122Popover-panel[data-placement=bottom] {
+  .bds124Popover-panel[data-placement=bottom] {
     top: anchor(bottom);
     left: anchor(left);
     margin-block-start: var(--bds-space_xs, 8px);
@@ -1736,7 +1739,7 @@
       --popover-right,
       --popover-left;
   }
-  .bds122Popover-panel[data-placement=top] {
+  .bds124Popover-panel[data-placement=top] {
     bottom: anchor(top);
     left: anchor(left);
     margin-block-end: var(--bds-space_xs, 8px);
@@ -1745,7 +1748,7 @@
       --popover-right,
       --popover-left;
   }
-  .bds122Popover-panel[data-placement=right] {
+  .bds124Popover-panel[data-placement=right] {
     top: anchor(top);
     left: anchor(right);
     margin-inline-start: var(--bds-space_xs, 8px);
@@ -1754,7 +1757,7 @@
       --popover-bottom,
       --popover-top;
   }
-  .bds122Popover-panel[data-placement=left] {
+  .bds124Popover-panel[data-placement=left] {
     top: anchor(top);
     right: anchor(left);
     margin-inline-end: var(--bds-space_xs, 8px);
@@ -1812,10 +1815,10 @@
     margin-block-end: var(--bds-space_xs, 8px);
   }
   @media (width <= 420px) {
-    .bds122Popover-panel[data-placement=bottom],
-    .bds122Popover-panel[data-placement=top],
-    .bds122Popover-panel[data-placement=left],
-    .bds122Popover-panel[data-placement=right] {
+    .bds124Popover-panel[data-placement=bottom],
+    .bds124Popover-panel[data-placement=top],
+    .bds124Popover-panel[data-placement=left],
+    .bds124Popover-panel[data-placement=right] {
       left: var(--bds-space_xs, 8px);
       right: var(--bds-space_xs, 8px);
       inline-size: 100%;
@@ -1824,13 +1827,13 @@
     }
   }
   @media (aspect-ratio >= 2/1) {
-    .bds122Popover-panel[data-placement=bottom] {
+    .bds124Popover-panel[data-placement=bottom] {
       position-try-fallbacks:
         --popover-top,
         --popover-right,
         --popover-left;
     }
-    .bds122Popover-panel[data-placement=top] {
+    .bds124Popover-panel[data-placement=top] {
       position-try-fallbacks:
         --popover-bottom,
         --popover-right,
@@ -1841,23 +1844,23 @@
 
 /* src/components/interaction/Rating/Rating.module.css */
 @layer component {
-  .bds122Rating-rating {
+  .bds124Rating-rating {
     display: inline-flex;
     gap: var(--bds-space_xxxs);
     color: var(--bds-color_bg);
   }
-  .bds122Rating-star {
+  .bds124Rating-star {
     width: 1.5em;
     height: 1.5em;
   }
-  .bds122Rating---filled {
+  .bds124Rating---filled {
     color: var(--bds-color_warning);
   }
 }
 
 /* src/components/interaction/Toast/Toast.module.css */
 @layer component {
-  .bds122Toast-toastContainer {
+  .bds124Toast-toastContainer {
     position: fixed;
     inset: unset;
     inset-block-end: var(--bds-space_xl);
@@ -1869,7 +1872,7 @@
     padding: 0;
     background: transparent;
   }
-  .bds122Toast-toast {
+  .bds124Toast-toast {
     padding: var(--bds-space_m) var(--bds-space_l);
     background-color: var(--toast_color, var(--bds-color_bg));
     color: var(--toast_on-color, var(--bds-color_on-bg));
@@ -1881,26 +1884,26 @@
     min-inline-size: 300px;
     animation: slideIn var(--bds-animation_duration--fast) var(--bds-animation_easing);
   }
-  .bds122Toast-toast.bds122Toast---variant_success {
+  .bds124Toast-toast.bds124Toast---variant_success {
     --toast_color: var(--bds-color_success);
     --toast_on-color: var(--bds-color_on-success);
   }
-  .bds122Toast-toast.bds122Toast---variant_warning {
+  .bds124Toast-toast.bds124Toast---variant_warning {
     --toast_color: var(--bds-color_warning);
     --toast_on-color: var(--bds-color_on-warning);
   }
-  .bds122Toast-toast.bds122Toast---variant_info {
+  .bds124Toast-toast.bds124Toast---variant_info {
     --toast_color: var(--bds-color_bg--subtle);
     --toast_on-color: var(--bds-color_on-bg--subtle);
   }
-  .bds122Toast-toast.bds122Toast---variant_error {
+  .bds124Toast-toast.bds124Toast---variant_error {
     --toast_color: var(--bds-color_error);
     --toast_on-color: var(--bds-color_on-error);
   }
-  .bds122Toast-message {
+  .bds124Toast-message {
     flex: 1;
   }
-  .bds122Toast-closeButton {
+  .bds124Toast-closeButton {
     display: flex;
     align-items: center;
     justify-content: center;
@@ -1913,7 +1916,7 @@
     cursor: pointer;
     color: var(--toast_on-color);
   }
-  .bds122Toast-closeButton svg {
+  .bds124Toast-closeButton svg {
     inline-size: 1rem;
     block-size: 1rem;
   }
@@ -1931,17 +1934,17 @@
 
 /* src/components/interaction/form/Checkbox/Checkbox.module.css */
 @layer component {
-  .bds122Checkbox-checkboxGroup {
+  .bds124Checkbox-checkboxGroup {
     --inputSize: calc(var(--bds-space_s) * 2);
     display: flex;
     flex-direction: column;
   }
-  .bds122Checkbox-inputWrapper {
+  .bds124Checkbox-inputWrapper {
     display: flex;
     align-items: stretch;
     gap: var(--bds-space_xs);
   }
-  .bds122Checkbox-checkbox {
+  .bds124Checkbox-checkbox {
     margin-block-start: 0.25em;
     inline-size: var(--inputSize);
     block-size: var(--inputSize);
@@ -1957,11 +1960,11 @@
     position: relative;
     transition: --bdc_color 0.3s ease, background-color 0.3s ease;
   }
-  .bds122Checkbox-checkbox:checked {
+  .bds124Checkbox-checkbox:checked {
     background-color: var(--checkbox_color-active, var(--bdc-color_active));
     --bdc_color: var(--checkbox_color-active, var(--bdc-color_active));
   }
-  .bds122Checkbox-checkbox:checked::after {
+  .bds124Checkbox-checkbox:checked::after {
     content: "";
     position: absolute;
     inset-inline-start: 0.6em;
@@ -1972,33 +1975,33 @@
     border-width: 0 2px 2px 0;
     transform: rotate(45deg);
   }
-  .bds122Checkbox-checkbox:focus {
+  .bds124Checkbox-checkbox:focus {
     --bdc_color: var(--bdc_color--focus);
   }
-  .bds122Checkbox-checkbox:focus-visible {
+  .bds124Checkbox-checkbox:focus-visible {
     outline: var(--bds-outline_default);
     outline-offset: var(--bds-outline_offset);
   }
-  .bds122Checkbox-checkboxError {
+  .bds124Checkbox-checkboxError {
     --bdc_color: var(--bdc_color--error);
   }
 }
 
 /* src/components/interaction/form/atoms/Message.module.css */
 @layer component {
-  .bds122Message-error,
-  .bds122Message-hint {
+  .bds124Message-error,
+  .bds124Message-hint {
     font-size: var(--bds-font_size--body--s);
     margin-inline-start: var(--labelPosition);
   }
-  .bds122Message-error {
+  .bds124Message-error {
     color: var(--bds-color_error_on-bg);
   }
 }
 
 /* src/components/interaction/form/atoms/Label.module.css */
 @layer component {
-  .bds122Label-label {
+  .bds124Label-label {
     display: flex;
     align-items: center;
     font-family: var(--bds-font_family--body);
@@ -2009,7 +2012,7 @@
 
 /* src/components/interaction/form/atoms/InputContainer.module.css */
 @layer component {
-  .bds122InputContainer-container {
+  .bds124InputContainer-container {
     --labelPosition: calc(var(--inputSize) + var(--bds-space_m));
     display: flex;
     flex-direction: column;
@@ -2019,7 +2022,7 @@
 
 /* src/components/interaction/form/CheckboxGroup/CheckboxGroup.module.css */
 @layer component {
-  .bds122CheckboxGroup-group {
+  .bds124CheckboxGroup-group {
     border: none;
     padding: 0;
     margin: 0;
@@ -2027,7 +2030,7 @@
     flex-direction: column;
     gap: var(--bds-space_xs);
   }
-  .bds122CheckboxGroup-legend {
+  .bds124CheckboxGroup-legend {
     font-family: var(--bds-font_family--body);
     font-size: var(--bds-font_size--body--s);
     font-weight: var(--bds-font_weight--medium);
@@ -2035,10 +2038,10 @@
     padding: 0;
     margin-block-end: var(--bds-space_xs);
   }
-  .bds122CheckboxGroup-required {
+  .bds124CheckboxGroup-required {
     color: var(--bds-color_error);
   }
-  .bds122CheckboxGroup-items {
+  .bds124CheckboxGroup-items {
     display: flex;
     flex-direction: column;
     gap: var(--bds-space_xs);
@@ -2047,16 +2050,16 @@
 
 /* src/components/interaction/form/Combobox/Combobox.module.css */
 @layer component {
-  .bds122Combobox-formGroup {
+  .bds124Combobox-formGroup {
     display: flex;
     flex-direction: column;
   }
-  .bds122Combobox-inputWrapper {
+  .bds124Combobox-inputWrapper {
     position: relative;
     display: flex;
     align-items: center;
   }
-  .bds122Combobox-input {
+  .bds124Combobox-input {
     appearance: none;
     inline-size: 100%;
     font-family: var(--bds-font_family--body);
@@ -2065,28 +2068,28 @@
     padding-inline-end: var(--bds-space_xxl);
     border: var(--combobox_border, none);
     --bdc_color: currentcolor;
-    --bdc-outline_radius: var(--bds-border_radius--xs);
+    --bdc-outline_radius: var(--bds-border_radius--full);
     border-radius: var(--combobox_radius, var(--bdc-outline_radius));
     box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--combobox_shadow, var(--bdc-outline_shadow));
     background-color: var(--combobox_color_bg, var(--bds-color_bg));
     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);
   }
-  .bds122Combobox-input:focus {
+  .bds124Combobox-input:focus {
     --bdc_color: var(--bdc_color--focus);
   }
-  .bds122Combobox-input:focus-visible {
+  .bds124Combobox-input:focus-visible {
     outline: var(--bds-outline_default);
     outline-offset: var(--bds-outline_offset);
   }
-  .bds122Combobox-input:disabled {
+  .bds124Combobox-input:disabled {
     opacity: 0.5;
     cursor: not-allowed;
   }
-  .bds122Combobox-inputError {
+  .bds124Combobox-inputError {
     --bdc_color: var(--bdc_color--error);
   }
-  .bds122Combobox-chevron {
+  .bds124Combobox-chevron {
     position: absolute;
     inset-inline-end: var(--bds-space_s);
     display: flex;
@@ -2094,11 +2097,11 @@
     pointer-events: none;
     color: var(--combobox_color, var(--bds-color_on-bg));
   }
-  .bds122Combobox-chevron svg {
+  .bds124Combobox-chevron svg {
     inline-size: 1rem;
     block-size: 1rem;
   }
-  .bds122Combobox-listbox {
+  .bds124Combobox-listbox {
     position: absolute;
     inset-block-start: calc(100% + var(--bds-space_xxs));
     inset-inline: 0;
@@ -2116,7 +2119,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));
   }
-  .bds122Combobox-option {
+  .bds124Combobox-option {
     display: flex;
     align-items: center;
     padding: var(--bds-space_xs) var(--bds-space_m);
@@ -2125,14 +2128,14 @@
     cursor: pointer;
     transition: var(--bds-animation_transition);
   }
-  .bds122Combobox-option.bds122Combobox---highlighted {
+  .bds124Combobox-option.bds124Combobox---highlighted {
     background-color: var(--bds-color_bg--subtle);
     color: var(--bds-color_interactive_on-bg);
   }
-  .bds122Combobox-option.bds122Combobox---selected {
+  .bds124Combobox-option.bds124Combobox---selected {
     font-weight: var(--bds-font_weight--semibold);
   }
-  .bds122Combobox-option.bds122Combobox---disabled {
+  .bds124Combobox-option.bds124Combobox---disabled {
     opacity: 0.4;
     cursor: not-allowed;
   }
@@ -2140,18 +2143,18 @@
 
 /* src/components/interaction/form/FileInput/FileInput.module.css */
 @layer component {
-  .bds122FileInput-formGroup {
+  .bds124FileInput-formGroup {
     display: flex;
     flex-direction: column;
   }
-  .bds122FileInput-fieldLabel {
+  .bds124FileInput-fieldLabel {
     display: flex;
     align-items: center;
     font-family: var(--bds-font_family--body);
     color: var(--bds-color_on-bg);
     margin-block-end: var(--bds-space_xs);
   }
-  .bds122FileInput-dropZone {
+  .bds124FileInput-dropZone {
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -2165,40 +2168,40 @@
     text-align: center;
     transition: var(--bds-animation_transition);
   }
-  .bds122FileInput-dropZone:focus-within {
+  .bds124FileInput-dropZone:focus-within {
     outline: var(--bds-outline_default);
     outline-offset: var(--bds-outline_offset);
     border-color: var(--fileInput_border-color, currentcolor);
   }
-  .bds122FileInput-isDragging {
+  .bds124FileInput-isDragging {
     border-color: currentcolor;
     background-color: rgb(from currentcolor r g b / 8%);
   }
-  .bds122FileInput-hasError {
+  .bds124FileInput-hasError {
     border-color: var(--bds-color_error);
   }
-  .bds122FileInput-isDisabled {
+  .bds124FileInput-isDisabled {
     opacity: 0.5;
     cursor: not-allowed;
   }
-  .bds122FileInput-icon {
+  .bds124FileInput-icon {
     inline-size: 2rem;
     block-size: 2rem;
     flex-shrink: 0;
   }
-  .bds122FileInput-prompt {
+  .bds124FileInput-prompt {
     font-size: var(--bds-font_size--body);
     color: var(--bds-color_on-bg);
   }
-  .bds122FileInput-prompt strong {
+  .bds124FileInput-prompt strong {
     color: var(--bds-color_interactive_on-bg);
     font-weight: var(--bds-font_weight--semibold);
   }
-  .bds122FileInput-acceptHint {
+  .bds124FileInput-acceptHint {
     font-size: var(--bds-font_size--body--s);
     color: var(--bds-color_on-bg);
   }
-  .bds122FileInput-hiddenInput {
+  .bds124FileInput-hiddenInput {
     position: absolute;
     inline-size: 1px;
     block-size: 1px;
@@ -2208,7 +2211,7 @@
     border: 0;
   }
   @media (hover: hover) and (pointer: fine) {
-    .bds122FileInput-dropZone:not(.bds122FileInput-isDisabled):hover {
+    .bds124FileInput-dropZone:not(.bds124FileInput-isDisabled):hover {
       border-color: var(--bds-color_interactive);
       background-color: rgb(from var(--bds-color_interactive) r g b / 4%);
     }
@@ -2217,62 +2220,62 @@
 
 /* src/components/interaction/form/FormInput/FormInput.module.css */
 @layer component {
-  .bds122FormInput-formGroup {
+  .bds124FormInput-formGroup {
     --labelPosition: 0;
     display: flex;
     flex-direction: column;
   }
-  .bds122FormInput-input {
+  .bds124FormInput-input {
     font-family: var(--bds-font_family--body);
     font-size: var(--bds-font_size--body);
     padding: var(--bds-space_s);
     border: var(--input_border, none);
     --bdc_color: currentcolor;
-    --bdc-outline_radius: var(--bds-border_radius--xs);
+    --bdc-outline_radius: var(--bds-border_radius--full);
     border-radius: var(--input_radius, var(--bdc-outline_radius));
     box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--input_shadow, var(--bdc-outline_shadow));
     color: var(--input_color, var(--bds-color_on-bg));
     background-color: 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);
   }
-  .bds122FormInput-input:focus {
+  .bds124FormInput-input:focus {
     --bdc_color: var(--bdc_color--focus);
   }
-  .bds122FormInput-input:focus-visible {
+  .bds124FormInput-input:focus-visible {
     outline: var(--bds-outline_default);
     outline-offset: var(--bds-outline_offset);
   }
-  .bds122FormInput-inputError {
+  .bds124FormInput-inputError {
     --bdc_color: var(--bdc_color--error);
   }
 }
 
 /* src/components/interaction/form/NumberInput/NumberInput.module.css */
 @layer component {
-  .bds122NumberInput-formGroup {
+  .bds124NumberInput-formGroup {
     display: flex;
     flex-direction: column;
   }
-  .bds122NumberInput-inputRow {
+  .bds124NumberInput-inputRow {
     display: flex;
     align-items: stretch;
     border: var(--numberInput_border, none);
     --bdc_color: currentcolor;
-    --bdc-outline_radius: var(--bds-border_radius--xs);
+    --bdc-outline_radius: var(--bds-border_radius--full);
     --_radius: var(--numberInput_radius, var(--bdc-outline_radius));
     border-radius: var(--_radius);
     box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--numberInput_shadow, var(--bdc-outline_shadow));
     overflow: hidden;
     transition: --bdc_color var(--bds-animation_transition-duration) var(--bds-animation_easing);
   }
-  .bds122NumberInput-inputRow:focus-within {
+  .bds124NumberInput-inputRow:focus-within {
     --bdc_color: var(--bdc_color--focus);
   }
-  .bds122NumberInput-inputRow:focus-within:has(:focus-visible) {
+  .bds124NumberInput-inputRow:focus-within:has(:focus-visible) {
     outline: var(--bds-outline_default);
     outline-offset: var(--bds-outline_offset);
   }
-  .bds122NumberInput-input {
+  .bds124NumberInput-input {
     flex: 1;
     border: none;
     outline: none;
@@ -2285,14 +2288,14 @@
     min-inline-size: 0;
     appearance: textfield;
   }
-  .bds122NumberInput-input::-webkit-inner-spin-button,
-  .bds122NumberInput-input::-webkit-outer-spin-button {
+  .bds124NumberInput-input::-webkit-inner-spin-button,
+  .bds124NumberInput-input::-webkit-outer-spin-button {
     appearance: none;
   }
-  .bds122NumberInput-inputError {
+  .bds124NumberInput-inputError {
     --bdc_color: var(--bdc_color--error);
   }
-  .bds122NumberInput-stepper {
+  .bds124NumberInput-stepper {
     all: unset;
     display: flex;
     align-items: center;
@@ -2305,25 +2308,25 @@
     transition: var(--bds-animation_transition);
     flex-shrink: 0;
   }
-  .bds122NumberInput-stepper svg {
+  .bds124NumberInput-stepper svg {
     width: 1rem;
     height: 1rem;
     color: var(--numberInput_stepper-color, var(--bds-color_interactive));
   }
-  .bds122NumberInput-stepper:first-child {
+  .bds124NumberInput-stepper:first-child {
     border-start-start-radius: var(--_radius);
     border-end-start-radius: var(--_radius);
   }
-  .bds122NumberInput-stepper:last-child {
+  .bds124NumberInput-stepper:last-child {
     border-start-end-radius: var(--_radius);
     border-end-end-radius: var(--_radius);
   }
-  .bds122NumberInput-stepper:disabled {
+  .bds124NumberInput-stepper:disabled {
     opacity: 0.4;
     cursor: not-allowed;
   }
   @media (hover: hover) and (pointer: fine) {
-    .bds122NumberInput-stepper:not(:disabled):hover {
+    .bds124NumberInput-stepper:not(:disabled):hover {
       background-color: var(--bds-color_bg--subtle);
       opacity: 0.7;
     }
@@ -2332,29 +2335,29 @@
 
 /* src/components/interaction/form/Radio/Radio.module.css */
 @layer component {
-  .bds122Radio-radioGroup {
+  .bds124Radio-radioGroup {
     --inputSize: calc(var(--bds-space_s) * 2);
     --labelPosition: calc(var(--inputSize) + var(--bds-space_m));
     display: flex;
     flex-direction: column;
   }
-  .bds122Radio-inputWrapper {
+  .bds124Radio-inputWrapper {
     display: flex;
     align-items: flex-start;
     gap: var(--bds-space_xs);
   }
-  .bds122Radio-textWrapper {
+  .bds124Radio-textWrapper {
     display: flex;
     flex-direction: column;
     gap: var(--bds-space_xxxs);
     padding-block-start: var(--bds-space_xxxs);
   }
-  .bds122Radio-description {
+  .bds124Radio-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);
   }
-  .bds122Radio-radio {
+  .bds124Radio-radio {
     flex-shrink: 0;
     margin-block-start: 0.2em;
     inline-size: var(--inputSize);
@@ -2371,7 +2374,7 @@
     position: relative;
     transition: --bdc_color 0.2s ease, background-color 0.2s ease;
   }
-  .bds122Radio-radio:checked {
+  .bds124Radio-radio:checked {
     background:
       radial-gradient(
         circle,
@@ -2379,21 +2382,21 @@
         var(--radio_color_bg, var(--bds-color_bg)) 42%);
     --bdc_color: var(--radio_color-active, var(--bdc-color_active));
   }
-  .bds122Radio-radio:focus {
+  .bds124Radio-radio:focus {
     --bdc_color: var(--bdc_color--focus);
   }
-  .bds122Radio-radio:focus-visible {
+  .bds124Radio-radio:focus-visible {
     outline: var(--bds-outline_default);
     outline-offset: var(--bds-outline_offset);
   }
-  .bds122Radio-radioError {
+  .bds124Radio-radioError {
     --bdc_color: var(--bdc_color--error);
   }
 }
 
 /* src/components/interaction/form/RadioGroup/RadioGroup.module.css */
 @layer component {
-  .bds122RadioGroup-group {
+  .bds124RadioGroup-group {
     border: none;
     padding: 0;
     margin: 0;
@@ -2401,7 +2404,7 @@
     flex-direction: column;
     gap: var(--bds-space_xs);
   }
-  .bds122RadioGroup-legend {
+  .bds124RadioGroup-legend {
     font-family: var(--bds-font_family--body);
     font-size: var(--bds-font_size--body--s);
     font-weight: var(--bds-font_weight--medium);
@@ -2409,10 +2412,10 @@
     padding: 0;
     margin-block-end: var(--bds-space_xs);
   }
-  .bds122RadioGroup-required {
+  .bds124RadioGroup-required {
     color: var(--bds-color_error);
   }
-  .bds122RadioGroup-items {
+  .bds124RadioGroup-items {
     display: flex;
     flex-direction: column;
     gap: var(--bds-space_xs);
@@ -2421,48 +2424,48 @@
 
 /* src/components/interaction/form/SegmentedControl/SegmentedControl.module.css */
 @layer component {
-  .bds122SegmentedControl-control {
+  .bds124SegmentedControl-control {
     position: relative;
     display: inline-grid;
     grid-auto-flow: column;
     grid-auto-columns: 1fr;
     padding: var(--bds-space_xxxs);
     background-color: var(--control_track-bg, var(--bds-color_bg--subtle));
-    border-radius: var(--control_radius, var(--bds-border_radius--m));
+    border-radius: var(--control_radius, var(--bds-border_radius--full));
     gap: 0;
   }
-  .bds122SegmentedControl-thumb {
+  .bds124SegmentedControl-thumb {
     position: absolute;
     inset-block: var(--bds-space_xxxs);
     inset-inline-start: var(--bds-space_xxxs);
     inline-size: calc((100% - 2 * var(--bds-space_xxxs)) / var(--control_count, 1));
-    border-radius: var(--control_thumb-radius, var(--bds-border_radius--s));
+    border-radius: var(--control_thumb-radius, var(--bds-border_radius--full));
     background-color: var(--control_thumb-bg, var(--bds-color_interactive));
     box-shadow: var(--bds-shadow_s);
     pointer-events: none;
     transform: translateX(calc(var(--control_selected-index, 0) * 100%));
     transition: transform var(--bds-animation_transition-duration) var(--bds-animation_easing);
   }
-  .bds122SegmentedControl-indicator {
+  .bds124SegmentedControl-indicator {
     position: absolute;
     inset-block: var(--bds-space_xxxs);
     inset-inline-start: var(--bds-space_xxxs);
     inline-size: calc((100% - 2 * var(--bds-space_xxxs)) / var(--control_count, 1));
-    border-radius: var(--control_thumb-radius, var(--bds-border_radius--s));
+    border-radius: var(--control_thumb-radius, var(--bds-border_radius--full));
     pointer-events: none;
     z-index: 2;
     display: none;
     transform: translateX(calc(var(--control_selected-index, 0) * 100%));
     transition: transform var(--bds-animation_transition-duration) var(--bds-animation_easing);
   }
-  .bds122SegmentedControl-item {
+  .bds124SegmentedControl-item {
     position: relative;
     z-index: 1;
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
-    border-radius: var(--control_thumb-radius, var(--bds-border_radius--s));
+    border-radius: var(--control_thumb-radius, var(--bds-border_radius--full));
     padding: var(--bds-space_xs) var(--bds-space_m);
     font-size: var(--bds-font_size--body);
     font-family: var(--bds-font_family--body);
@@ -2476,52 +2479,52 @@
     border: none;
     outline: none;
   }
-  .bds122SegmentedControl-item:focus-visible {
+  .bds124SegmentedControl-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--s));
+    border-radius: var(--control_thumb-radius, var(--bds-border_radius--full));
   }
-  .bds122SegmentedControl-item.bds122SegmentedControl---active {
+  .bds124SegmentedControl-item.bds124SegmentedControl---active {
     color: var(--control_label-color--active, var(--bds-color_on-interactive));
   }
-  .bds122SegmentedControl-item.bds122SegmentedControl---disabled {
+  .bds124SegmentedControl-item.bds124SegmentedControl---disabled {
     opacity: 0.5;
     cursor: not-allowed;
     pointer-events: none;
   }
-  .bds122SegmentedControl-control.bds122SegmentedControl---size_small .bds122SegmentedControl-item {
+  .bds124SegmentedControl-control.bds124SegmentedControl---size_small .bds124SegmentedControl-item {
     padding: var(--bds-space_xxs) var(--bds-space_s);
     font-size: var(--bds-font_size--body--s);
   }
-  .bds122SegmentedControl-control.bds122SegmentedControl---size_large .bds122SegmentedControl-item {
+  .bds124SegmentedControl-control.bds124SegmentedControl---size_large .bds124SegmentedControl-item {
     padding: var(--bds-space_s) var(--bds-space_m);
     white-space: normal;
     text-align: center;
   }
-  .bds122SegmentedControl-control.bds122SegmentedControl---variant_outline {
+  .bds124SegmentedControl-control.bds124SegmentedControl---variant_outline {
     --control_label-color--active: var(--bds-color_interactive);
   }
-  .bds122SegmentedControl-control.bds122SegmentedControl---variant_outline .bds122SegmentedControl-thumb {
+  .bds124SegmentedControl-control.bds124SegmentedControl---variant_outline .bds124SegmentedControl-thumb {
     display: none;
   }
-  .bds122SegmentedControl-control.bds122SegmentedControl---variant_outline .bds122SegmentedControl-item {
+  .bds124SegmentedControl-control.bds124SegmentedControl---variant_outline .bds124SegmentedControl-item {
     background-color: var(--control_item-bg, transparent);
   }
-  .bds122SegmentedControl-control.bds122SegmentedControl---variant_outline .bds122SegmentedControl-item.bds122SegmentedControl---active {
+  .bds124SegmentedControl-control.bds124SegmentedControl---variant_outline .bds124SegmentedControl-item.bds124SegmentedControl---active {
     background-color: var(--control_item-bg--active, var(--bds-color_bg));
   }
-  .bds122SegmentedControl-control.bds122SegmentedControl---variant_outline .bds122SegmentedControl-indicator {
+  .bds124SegmentedControl-control.bds124SegmentedControl---variant_outline .bds124SegmentedControl-indicator {
     display: block;
     box-shadow: inset 0 0 0 2px var(--bds-color_interactive);
   }
   @media (hover: hover) and (pointer: fine) {
-    .bds122SegmentedControl-item:not(.bds122SegmentedControl---active, .bds122SegmentedControl---disabled):hover {
+    .bds124SegmentedControl-item:not(.bds124SegmentedControl---active, .bds124SegmentedControl---disabled):hover {
       color: var(--control_label-color--hover, var(--bds-color_on-bg));
     }
   }
   @media (prefers-reduced-motion: reduce) {
-    .bds122SegmentedControl-thumb,
-    .bds122SegmentedControl-indicator {
+    .bds124SegmentedControl-thumb,
+    .bds124SegmentedControl-indicator {
       transition: none;
     }
   }
@@ -2529,16 +2532,16 @@
 
 /* src/components/interaction/form/Select/Select.module.css */
 @layer component {
-  .bds122Select-formGroup {
+  .bds124Select-formGroup {
     display: flex;
     flex-direction: column;
   }
-  .bds122Select-selectWrapper {
+  .bds124Select-selectWrapper {
     position: relative;
     display: flex;
     align-items: center;
   }
-  .bds122Select-select {
+  .bds124Select-select {
     appearance: none;
     inline-size: 100%;
     font-family: var(--bds-font_family--body);
@@ -2547,7 +2550,7 @@
     padding-inline-end: var(--bds-space_xxl);
     border: var(--select_border, none);
     --bdc_color: currentcolor;
-    --bdc-outline_radius: var(--bds-border_radius--xs);
+    --bdc-outline_radius: var(--bds-border_radius--full);
     border-radius: var(--select_radius, var(--bdc-outline_radius));
     box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--select_shadow, var(--bdc-outline_shadow));
     background-color: var(--select_color_bg, var(--bds-color_bg));
@@ -2555,21 +2558,21 @@
     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);
   }
-  .bds122Select-select:focus {
+  .bds124Select-select:focus {
     --bdc_color: var(--bdc_color--focus);
   }
-  .bds122Select-select:focus-visible {
+  .bds124Select-select:focus-visible {
     outline: var(--bds-outline_default);
     outline-offset: var(--bds-outline_offset);
   }
-  .bds122Select-select:disabled {
+  .bds124Select-select:disabled {
     opacity: 0.5;
     cursor: not-allowed;
   }
-  .bds122Select-selectError {
+  .bds124Select-selectError {
     --bdc_color: var(--bdc_color--error);
   }
-  .bds122Select-chevron {
+  .bds124Select-chevron {
     position: absolute;
     inset-inline-end: var(--bds-space_s);
     display: flex;
@@ -2577,7 +2580,7 @@
     pointer-events: none;
     color: var(--select_chevron-color, var(--bds-color_interactive));
   }
-  .bds122Select-chevron svg {
+  .bds124Select-chevron svg {
     inline-size: 1rem;
     block-size: 1rem;
   }
@@ -2585,22 +2588,22 @@
 
 /* src/components/interaction/form/Slider/Slider.module.css */
 @layer component {
-  .bds122Slider-formGroup {
+  .bds124Slider-formGroup {
     display: flex;
     flex-direction: column;
     gap: var(--bds-space_xxs);
   }
-  .bds122Slider-labelRow {
+  .bds124Slider-labelRow {
     display: flex;
     justify-content: space-between;
     align-items: baseline;
   }
-  .bds122Slider-value {
+  .bds124Slider-value {
     font-size: var(--bds-font_size--body--s);
     font-variant-numeric: tabular-nums;
     color: var(--bds-color_on-bg--subtle);
   }
-  .bds122Slider-slider {
+  .bds124Slider-slider {
     --slider_fill: 0%;
     --slider_track-height: var(--bds-space_xxs);
     --slider_thumb-size: calc(var(--bds-space_s) * 2);
@@ -2608,7 +2611,7 @@
     appearance: none;
     inline-size: 100%;
     block-size: var(--slider_track-height);
-    border-radius: 999px;
+    border-radius: var(--slider_track-radius, var(--bds-border_radius--full));
     background:
       linear-gradient(
         to right,
@@ -2619,35 +2622,35 @@
     cursor: pointer;
     transition: var(--bds-animation_transition);
   }
-  .bds122Slider-slider:focus-visible {
+  .bds124Slider-slider:focus-visible {
     outline: var(--bds-outline_default);
     outline-offset: var(--bds-outline_offset);
-    border-radius: 999px;
+    border-radius: var(--slider_track-radius, var(--bds-border_radius--full));
   }
-  .bds122Slider-slider:disabled {
+  .bds124Slider-slider:disabled {
     opacity: 0.4;
     cursor: not-allowed;
   }
-  .bds122Slider-slider::-webkit-slider-thumb {
+  .bds124Slider-slider::-webkit-slider-thumb {
     appearance: none;
     inline-size: var(--slider_thumb-size);
     block-size: var(--slider_thumb-size);
-    border-radius: 50%;
+    border-radius: var(--slider_thumb-radius, var(--bds-border_radius--circle));
     background-color: var(--slider_color-active, var(--bdc-color_active));
     box-shadow: var(--bds-shadow_s);
     transition: var(--bds-animation_transition);
     cursor: pointer;
   }
-  .bds122Slider-slider::-moz-range-thumb {
+  .bds124Slider-slider::-moz-range-thumb {
     inline-size: var(--slider_thumb-size);
     block-size: var(--slider_thumb-size);
     border: none;
-    border-radius: 50%;
+    border-radius: var(--slider_thumb-radius, var(--bds-border_radius--circle));
     background-color: var(--slider_color-active, var(--bdc-color_active));
     box-shadow: var(--bds-shadow_s);
     cursor: pointer;
   }
-  .bds122Slider-sliderError {
+  .bds124Slider-sliderError {
     background:
       linear-gradient(
         to right,
@@ -2656,16 +2659,16 @@
         var(--bds-color_bg--subtle) var(--slider_fill),
         var(--bds-color_bg--subtle) 100%);
   }
-  .bds122Slider-sliderError::-webkit-slider-thumb {
+  .bds124Slider-sliderError::-webkit-slider-thumb {
     background-color: var(--bds-color_error);
   }
-  .bds122Slider-sliderError::-moz-range-thumb {
+  .bds124Slider-sliderError::-moz-range-thumb {
     background-color: var(--bds-color_error);
   }
   @media (prefers-reduced-motion: reduce) {
-    .bds122Slider-slider,
-    .bds122Slider-slider::-webkit-slider-thumb,
-    .bds122Slider-slider::-moz-range-thumb {
+    .bds124Slider-slider,
+    .bds124Slider-slider::-webkit-slider-thumb,
+    .bds124Slider-slider::-moz-range-thumb {
       transition: none;
     }
   }
@@ -2673,7 +2676,7 @@
 
 /* src/components/interaction/form/Switch/Switch.module.css */
 @layer component {
-  .bds122Switch-switchGroup {
+  .bds124Switch-switchGroup {
     --switch_thumb-size: 1.25em;
     --switch_track-pad: var(--bds-space_xxxs);
     --switch_track-height: calc(var(--switch_thumb-size) + var(--switch_track-pad) * 2);
@@ -2682,21 +2685,21 @@
     display: flex;
     flex-direction: column;
   }
-  .bds122Switch-switchGroup.bds122Switch---size_small {
+  .bds124Switch-switchGroup.bds124Switch---size_small {
     --switch_thumb-size: 1em;
   }
-  .bds122Switch-switchGroup.bds122Switch---size_medium {
+  .bds124Switch-switchGroup.bds124Switch---size_medium {
     --switch_thumb-size: 1.25em;
   }
-  .bds122Switch-switchGroup.bds122Switch---size_large {
+  .bds124Switch-switchGroup.bds124Switch---size_large {
     --switch_thumb-size: 1.5em;
   }
-  .bds122Switch-inputWrapper {
+  .bds124Switch-inputWrapper {
     display: flex;
     align-items: center;
     gap: var(--bds-space_xs);
   }
-  .bds122Switch-trackWrapper {
+  .bds124Switch-trackWrapper {
     position: relative;
     display: inline-flex;
     align-items: center;
@@ -2704,7 +2707,7 @@
     inline-size: var(--switch_track-width);
     block-size: var(--switch_track-height);
   }
-  .bds122Switch-switch {
+  .bds124Switch-switch {
     position: absolute;
     inset: 0;
     appearance: none;
@@ -2715,15 +2718,15 @@
     cursor: pointer;
     z-index: 1;
   }
-  .bds122Switch-switch:disabled {
+  .bds124Switch-switch:disabled {
     cursor: not-allowed;
   }
-  .bds122Switch-track {
+  .bds124Switch-track {
     display: inline-flex;
     align-items: center;
     inline-size: var(--switch_track-width);
     block-size: var(--switch_track-height);
-    border-radius: 999px;
+    border-radius: var(--switch_track-radius, var(--bds-border_radius--full));
     background-color: var(--switch_track-bg, var(--bds-color_grey--subtle));
     padding-inline: var(--switch_track-pad);
     pointer-events: none;
@@ -2734,38 +2737,38 @@
       transform var(--bds-animation_transition-duration) var(--bds-animation_easing);
     --bdc_color: var(--switch_thumb-bg, var(--bds-color_interactive));
   }
-  .bds122Switch-thumb {
+  .bds124Switch-thumb {
     display: block;
     inline-size: var(--switch_thumb-size);
     block-size: var(--switch_thumb-size);
-    border-radius: 50%;
+    border-radius: var(--switch_thumb-radius, var(--bds-border_radius--circle));
     background-color: var(--switch_thumb-bg, var(--bds-color_interactive));
     box-shadow: var(--bds-shadow_s);
     transition: var(--bds-animation_transition);
     transform: translateX(0);
   }
-  .bds122Switch-switch.bds122Switch-switchError + .bds122Switch-track {
+  .bds124Switch-switch.bds124Switch-switchError + .bds124Switch-track {
     --bdc_color: var(--bds-color_error);
   }
-  .bds122Switch-switch:checked + .bds122Switch-track {
+  .bds124Switch-switch:checked + .bds124Switch-track {
     background-color: var(--switch_track-bg--active, var(--bdc-color_active--subtle));
     --bdc_color: var(--switch_thumb-bg--active, var(--bds-color_interactive));
   }
-  .bds122Switch-switch:checked + .bds122Switch-track .bds122Switch-thumb {
+  .bds124Switch-switch:checked + .bds124Switch-track .bds124Switch-thumb {
     background-color: var(--switch_thumb-bg--active, var(--bds-color_interactive));
     transform: translateX(var(--switch_thumb-size));
   }
-  .bds122Switch-switch:focus-visible + .bds122Switch-track {
+  .bds124Switch-switch:focus-visible + .bds124Switch-track {
     outline: var(--bds-outline_default);
     outline-offset: var(--bds-outline_offset);
-    border-radius: 999px;
+    border-radius: var(--switch_track-radius, var(--bds-border_radius--full));
   }
-  .bds122Switch-switch:disabled + .bds122Switch-track {
+  .bds124Switch-switch:disabled + .bds124Switch-track {
     opacity: 0.4;
   }
   @media (prefers-reduced-motion: reduce) {
-    .bds122Switch-track,
-    .bds122Switch-thumb {
+    .bds124Switch-track,
+    .bds124Switch-thumb {
       transition: none;
     }
   }
@@ -2773,11 +2776,11 @@
 
 /* src/components/interaction/form/Textarea/Textarea.module.css */
 @layer component {
-  .bds122Textarea-formGroup {
+  .bds124Textarea-formGroup {
     display: flex;
     flex-direction: column;
   }
-  .bds122Textarea-textarea {
+  .bds124Textarea-textarea {
     font-family: var(--bds-font_family--body);
     font-size: var(--bds-font_size--body);
     line-height: var(--bds-font_line-height--body);
@@ -2793,68 +2796,68 @@
     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);
   }
-  .bds122Textarea-textarea:focus {
+  .bds124Textarea-textarea:focus {
     --bdc_color: var(--bdc_color--focus);
   }
-  .bds122Textarea-textarea:focus-visible {
+  .bds124Textarea-textarea:focus-visible {
     outline: var(--bds-outline_default);
     outline-offset: var(--bds-outline_offset);
   }
-  .bds122Textarea-textarea:disabled {
+  .bds124Textarea-textarea:disabled {
     opacity: 0.5;
     cursor: not-allowed;
     resize: none;
   }
-  .bds122Textarea-textareaError {
+  .bds124Textarea-textareaError {
     --bdc_color: var(--bdc_color--error);
   }
 }
 
 /* src/components/layout/ButtonGroup/ButtonGroup.module.css */
 @layer component {
-  .bds122ButtonGroup-buttonGroup {
+  .bds124ButtonGroup-buttonGroup {
     container-type: inline-size;
     container-name: button-group;
     grid-column: var(--bds-grid_span-100);
   }
-  .bds122ButtonGroup-buttonGroup .bds122ButtonGroup-container {
+  .bds124ButtonGroup-buttonGroup .bds124ButtonGroup-container {
     position: relative;
     display: flex;
     flex-direction: column-reverse;
     gap: var(--bds-space_l);
     align-items: center;
   }
-  .bds122ButtonGroup-buttonGroup.bds122ButtonGroup---variant_card .bds122ButtonGroup-container {
+  .bds124ButtonGroup-buttonGroup.bds124ButtonGroup---variant_card .bds124ButtonGroup-container {
     align-items: stretch;
   }
-  .bds122ButtonGroup-buttonGroup.bds122ButtonGroup---variant_flow .bds122ButtonGroup-container,
-  .bds122ButtonGroup-buttonGroup.bds122ButtonGroup---variant_modal .bds122ButtonGroup-container {
+  .bds124ButtonGroup-buttonGroup.bds124ButtonGroup---variant_flow .bds124ButtonGroup-container,
+  .bds124ButtonGroup-buttonGroup.bds124ButtonGroup---variant_modal .bds124ButtonGroup-container {
     align-items: center;
   }
-  .bds122ButtonGroup-buttonGroup.bds122ButtonGroup---variant_content .bds122ButtonGroup-container {
+  .bds124ButtonGroup-buttonGroup.bds124ButtonGroup---variant_content .bds124ButtonGroup-container {
     align-items: flex-start;
   }
   @supports (contain: inline-size) {
     @container button-group (min-width: 30rem) {
-      .bds122ButtonGroup-buttonGroup .bds122ButtonGroup-container {
+      .bds124ButtonGroup-buttonGroup .bds124ButtonGroup-container {
         flex-direction: row;
         justify-content: space-between;
       }
-      .bds122ButtonGroup-buttonGroup.bds122ButtonGroup---variant_modal .bds122ButtonGroup-container > :first-child:last-child,
-      .bds122ButtonGroup-buttonGroup.bds122ButtonGroup---variant_flow .bds122ButtonGroup-container > :first-child:last-child {
+      .bds124ButtonGroup-buttonGroup.bds124ButtonGroup---variant_modal .bds124ButtonGroup-container > :first-child:last-child,
+      .bds124ButtonGroup-buttonGroup.bds124ButtonGroup---variant_flow .bds124ButtonGroup-container > :first-child:last-child {
         margin-inline-start: auto;
       }
-      .bds122ButtonGroup-buttonGroup.bds122ButtonGroup---variant_card .bds122ButtonGroup-container {
+      .bds124ButtonGroup-buttonGroup.bds124ButtonGroup---variant_card .bds124ButtonGroup-container {
         justify-content: center;
       }
-      .bds122ButtonGroup-buttonGroup.bds122ButtonGroup---variant_modal .bds122ButtonGroup-container {
+      .bds124ButtonGroup-buttonGroup.bds124ButtonGroup---variant_modal .bds124ButtonGroup-container {
         justify-content: flex-end;
       }
-      .bds122ButtonGroup-buttonGroup.bds122ButtonGroup---variant_content .bds122ButtonGroup-container {
+      .bds124ButtonGroup-buttonGroup.bds124ButtonGroup---variant_content .bds124ButtonGroup-container {
         justify-content: flex-start;
         align-items: center;
       }
-      .bds122ButtonGroup-buttonGroup.bds122ButtonGroup---variant_grid .bds122ButtonGroup-container {
+      .bds124ButtonGroup-buttonGroup.bds124ButtonGroup---variant_grid .bds124ButtonGroup-container {
         justify-content: center;
       }
     }
@@ -2863,68 +2866,68 @@
 
 /* src/components/layout/Card/Card.module.css */
 @layer component {
-  .bds122Card-card {
+  .bds124Card-card {
     background-color: var(--card_color, var(--bds-color_bg));
     color: var(--card_on-color, var(--bds-color_on-bg));
     border-radius: var(--bds-border_radius--m);
     transition: all 0.3s ease;
     position: relative;
   }
-  .bds122Card-card.bds122Card---default {
+  .bds124Card-card.bds124Card---default {
     box-shadow: var(--bds-shadow_s);
   }
-  .bds122Card-card.bds122Card---elevated {
+  .bds124Card-card.bds124Card---elevated {
     box-shadow: var(--bds-shadow_m);
   }
-  .bds122Card-card.bds122Card---outlined {
+  .bds124Card-card.bds124Card---outlined {
     border: var(--card_border, none);
     --bdc_color: currentcolor;
     box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--bds-shadow_s);
   }
-  .bds122Card-card.bds122Card---clickable {
+  .bds124Card-card.bds124Card---clickable {
     cursor: pointer;
   }
-  .bds122Card-card.bds122Card---padding-none {
+  .bds124Card-card.bds124Card---padding-none {
     padding: 0;
   }
-  .bds122Card-card.bds122Card---padding-small {
+  .bds124Card-card.bds124Card---padding-small {
     padding: var(--bds-space_s);
   }
-  .bds122Card-card.bds122Card---padding-medium {
+  .bds124Card-card.bds124Card---padding-medium {
     padding: var(--bds-space_m);
   }
-  .bds122Card-card.bds122Card---padding-large {
+  .bds124Card-card.bds124Card---padding-large {
     padding: var(--bds-space_l);
   }
-  .bds122Card-card.bds122Card---text-start {
+  .bds124Card-card.bds124Card---text-start {
     text-align: start;
   }
-  .bds122Card-card.bds122Card---text-center {
+  .bds124Card-card.bds124Card---text-center {
     text-align: center;
   }
-  .bds122Card-card.bds122Card---text-end {
+  .bds124Card-card.bds124Card---text-end {
     text-align: end;
   }
-  .bds122Card-card.bds122Card---clickable:focus-visible {
+  .bds124Card-card.bds124Card---clickable:focus-visible {
     outline: 2px solid var(--color_focus, currentcolor);
     outline-offset: 2px;
   }
-  .bds122Card-card.bds122Card---clickable:active {
+  .bds124Card-card.bds124Card---clickable:active {
     transform: translateY(0);
     box-shadow: var(--bds-shadow_s);
   }
   @media (hover: hover) and (pointer: fine) {
-    .bds122Card-card.bds122Card---clickable:hover {
+    .bds124Card-card.bds124Card---clickable:hover {
       transform: translateY(-2px);
       box-shadow: var(--bds-shadow_xl);
     }
-    .bds122Card-card.bds122Card---default:hover {
+    .bds124Card-card.bds124Card---default:hover {
       box-shadow: var(--bds-shadow_m);
     }
-    .bds122Card-card.bds122Card---elevated:hover {
+    .bds124Card-card.bds124Card---elevated:hover {
       box-shadow: var(--bds-shadow_2xl);
     }
-    .bds122Card-card.bds122Card---outlined:hover {
+    .bds124Card-card.bds124Card---outlined:hover {
       box-shadow: var(--bds-shadow_s);
     }
   }
@@ -2932,60 +2935,60 @@
 
 /* src/components/layout/SectionHeader/SectionHeader.module.css */
 @layer component {
-  .bds122SectionHeader-sectionHeader {
+  .bds124SectionHeader-sectionHeader {
     display: flex;
     flex-direction: column;
     gap: var(--bds-space_m);
     grid-column: var(--bds-grid_span-100);
   }
-  .bds122SectionHeader-title {
+  .bds124SectionHeader-title {
     color: var(--sectionHeader-title-color, var(--bds-color_on-bg));
     margin: 0;
     font-family: var(--bds-font_family--body);
   }
-  .bds122SectionHeader-subtitle {
+  .bds124SectionHeader-subtitle {
     color: var(--sectionHeader_subtitle-color, var(--bds-color_grey--strong));
     margin: 0;
     font-family: var(--bds-font_family--body);
     font-weight: var(--bds-font_weight--medium);
   }
-  .bds122SectionHeader-sectionHeader.bds122SectionHeader---start {
+  .bds124SectionHeader-sectionHeader.bds124SectionHeader---start {
     align-items: flex-start;
     text-align: start;
   }
-  .bds122SectionHeader-sectionHeader.bds122SectionHeader---center {
+  .bds124SectionHeader-sectionHeader.bds124SectionHeader---center {
     align-items: center;
     text-align: center;
   }
-  .bds122SectionHeader-sectionHeader.bds122SectionHeader---end {
+  .bds124SectionHeader-sectionHeader.bds124SectionHeader---end {
     align-items: flex-end;
     text-align: end;
   }
-  .bds122SectionHeader-sectionHeader.bds122SectionHeader---small .bds122SectionHeader-title {
+  .bds124SectionHeader-sectionHeader.bds124SectionHeader---small .bds124SectionHeader-title {
     font-size: var(--bds-font_size--heading-1);
     line-height: var(--bds-font_line-height--heading);
     font-weight: var(--bds-font_weight--bold);
   }
-  .bds122SectionHeader-sectionHeader.bds122SectionHeader---small .bds122SectionHeader-subtitle {
+  .bds124SectionHeader-sectionHeader.bds124SectionHeader---small .bds124SectionHeader-subtitle {
     font-size: var(--bds-font_size--body);
     line-height: 1.4;
   }
-  .bds122SectionHeader-sectionHeader.bds122SectionHeader---medium .bds122SectionHeader-title {
+  .bds124SectionHeader-sectionHeader.bds124SectionHeader---medium .bds124SectionHeader-title {
     font-size: var(--bds-font_size--display);
     line-height: var(--bds-font_line-height--display);
     font-weight: var(--bds-font_weight--bold);
   }
-  .bds122SectionHeader-sectionHeader.bds122SectionHeader---medium .bds122SectionHeader-subtitle {
+  .bds124SectionHeader-sectionHeader.bds124SectionHeader---medium .bds124SectionHeader-subtitle {
     font-size: var(--bds-font_size--heading-3);
     line-height: 1.3;
   }
-  .bds122SectionHeader-sectionHeader.bds122SectionHeader---large .bds122SectionHeader-title {
+  .bds124SectionHeader-sectionHeader.bds124SectionHeader---large .bds124SectionHeader-title {
     font-size: var(--bds-font_size--display);
     line-height: var(--bds-font_line-height--display);
     font-weight: var(--bds-font_weight--bold);
     letter-spacing: var(--bds-font_tracking--tight);
   }
-  .bds122SectionHeader-sectionHeader.bds122SectionHeader---large .bds122SectionHeader-subtitle {
+  .bds124SectionHeader-sectionHeader.bds124SectionHeader---large .bds124SectionHeader-subtitle {
     font-size: var(--bds-font_size--heading-2);
     line-height: 1.3;
     font-weight: var(--bds-font_weight--medium);
@@ -2994,11 +2997,11 @@
 
 /* src/components/layout/IconWrapper/IconWrapper.module.css */
 @layer component {
-  .bds122IconWrapper-wrapper {
+  .bds124IconWrapper-wrapper {
     inline-size: 2em;
     block-size: 2em;
     font-size: 3em;
-    border-radius: 50%;
+    border-radius: var(--icon-wrapper-radius, var(--bds-border_radius--circle));
     display: flex;
     align-items: center;
     justify-content: center;
@@ -3009,7 +3012,7 @@
     position: relative;
     transition: var(--bds-animation_transition);
   }
-  .bds122IconWrapper-wrapper svg {
+  .bds124IconWrapper-wrapper svg {
     fill: currentcolor;
   }
 }