@boostdev/design-system-components 2.5.1 → 2.7.0

package/dist/index.css

@@ -27,8 +27,8 @@
 }
 
 /* src/components/ui/Accordion/Accordion.module.css */
-@layer boostdev.bds251Accordion-component {
-  .bds251Accordion-accordion {
+@layer boostdev.bds270Accordion-component {
+  .bds270Accordion-accordion {
     display: flex;
     flex-direction: column;
     border: var(--accordion_border, none);
@@ -38,16 +38,16 @@
     box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color);
     overflow: hidden;
   }
-  .bds251Accordion-item {
+  .bds270Accordion-item {
     border-block-end: 1px solid var(--bds-color_bg--subtle);
   }
-  .bds251Accordion-item:last-child {
+  .bds270Accordion-item:last-child {
     border-block-end: none;
   }
-  .bds251Accordion-heading {
+  .bds270Accordion-heading {
     margin: 0;
   }
-  .bds251Accordion-trigger {
+  .bds270Accordion-trigger {
     all: unset;
     display: flex;
     align-items: center;
@@ -62,100 +62,100 @@
     transition: var(--bds-animation_transition);
     box-sizing: border-box;
   }
-  .bds251Accordion-trigger:disabled {
+  .bds270Accordion-trigger:disabled {
     opacity: 0.4;
     cursor: not-allowed;
   }
-  .bds251Accordion-trigger:focus-visible {
+  .bds270Accordion-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) {
-    .bds251Accordion-trigger:not(:disabled):hover {
+    .bds270Accordion-trigger:not(:disabled):hover {
       background-color: var(--accordion_trigger-bg--hover, var(--bds-color_bg--subtle));
     }
   }
-  .bds251Accordion-triggerLabel {
+  .bds270Accordion-triggerLabel {
     flex: 1;
     text-align: start;
   }
-  .bds251Accordion-chevron {
+  .bds270Accordion-chevron {
     inline-size: 1.25rem;
     block-size: 1.25rem;
     flex-shrink: 0;
     transition: transform var(--bds-animation_transition-duration) var(--bds-animation_easing);
   }
-  .bds251Accordion-item.bds251Accordion---open .bds251Accordion-chevron {
+  .bds270Accordion-item.bds270Accordion---open .bds270Accordion-chevron {
     transform: rotate(180deg);
   }
-  .bds251Accordion-panel {
+  .bds270Accordion-panel {
     overflow: hidden;
   }
-  .bds251Accordion-panelContent {
+  .bds270Accordion-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) {
-    .bds251Accordion-chevron {
+    .bds270Accordion-chevron {
       transition: none;
     }
   }
 }
 
 /* src/components/ui/Alert/Alert.module.css */
-@layer boostdev.bds251Alert-component {
-  .bds251Alert-alert {
+@layer boostdev.bds270Alert-component {
+  .bds270Alert-alert {
     display: flex;
     align-items: flex-start;
     gap: var(--bds-space_s);
     padding: var(--bds-space_m);
     border-radius: var(--bds-border_radius--s);
-    border-inline-start: var(--bds-space_s) solid var(--alert_border, var(--bds-color_blue));
-    background-color: var(--alert_bg, var(--bds-color_blue--subtle));
-    color: var(--alert_text, var(--bds-color_on-blue--subtle));
+    background-color: var(--alert_bg, var(--alert_bg--variant, var(--bds-color_blue--subtle)));
+    color: var(--alert_text, var(--alert_text--variant, var(--bds-color_on-blue--subtle)));
+    border-inline-start: var(--bds-space_s) solid var(--alert_border, var(--alert_border--variant, var(--bds-color_blue)));
     font-size: var(--bds-font_size--body);
     line-height: var(--bds-font_line-height--body);
   }
-  .bds251Alert---variant_info {
-    --alert_bg: var(--bds-color_blue--subtle);
-    --alert_text: var(--bds-color_on-blue--subtle);
-    --alert_border: var(--bds-color_blue);
+  .bds270Alert---variant_info {
+    --alert_bg--variant: var(--alert_bg--info, var(--bds-color_blue--subtle));
+    --alert_text--variant: var(--alert_text--info, var(--bds-color_on-blue--subtle));
+    --alert_border--variant: var(--alert_border--info, var(--bds-color_blue));
   }
-  .bds251Alert---variant_success {
-    --alert_bg: var(--bds-color_success--subtle);
-    --alert_text: var(--bds-color_on-success--subtle);
-    --alert_border: var(--bds-color_success);
+  .bds270Alert---variant_success {
+    --alert_bg--variant: var(--alert_bg--success, var(--bds-color_success--subtle));
+    --alert_text--variant: var(--alert_text--success, var(--bds-color_on-success--subtle));
+    --alert_border--variant: var(--alert_border--success, var(--bds-color_success));
   }
-  .bds251Alert---variant_warning {
-    --alert_bg: var(--bds-color_orange--subtle);
-    --alert_text: var(--bds-color_on-orange--subtle);
-    --alert_border: var(--bds-color_warning);
+  .bds270Alert---variant_warning {
+    --alert_bg--variant: var(--alert_bg--warning, var(--bds-color_orange--subtle));
+    --alert_text--variant: var(--alert_text--warning, var(--bds-color_on-orange--subtle));
+    --alert_border--variant: var(--alert_border--warning, var(--bds-color_warning));
   }
-  .bds251Alert---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);
+  .bds270Alert---variant_error {
+    --alert_bg--variant: var(--alert_bg--error, rgb(from var(--bds-color_error) r g b / 12%));
+    --alert_text--variant: var(--alert_text--error, var(--bds-color_on-bg));
+    --alert_border--variant: var(--alert_border--error, var(--bds-color_error));
   }
-  .bds251Alert-icon {
+  .bds270Alert-icon {
     display: flex;
     align-items: center;
     flex-shrink: 0;
     margin-block-start: 0.1em;
   }
-  .bds251Alert-content {
+  .bds270Alert-content {
     flex: 1;
     display: flex;
     flex-direction: column;
     gap: var(--bds-space_xxs);
   }
-  .bds251Alert-title {
+  .bds270Alert-title {
     font-weight: var(--bds-font_weight--semibold);
     font-size: var(--bds-font_size--body);
   }
-  .bds251Alert-dismiss {
+  .bds270Alert-dismiss {
     all: unset;
     display: flex;
     align-items: center;
@@ -169,24 +169,24 @@
     --bdc_color: currentcolor;
     box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color);
   }
-  .bds251Alert-dismiss svg {
+  .bds270Alert-dismiss svg {
     width: 1rem;
     height: 1rem;
   }
-  .bds251Alert-dismiss:focus-visible {
+  .bds270Alert-dismiss:focus-visible {
     outline: var(--bds-outline_default);
     outline-offset: var(--bds-outline_offset);
   }
   @media (hover: hover) and (pointer: fine) {
-    .bds251Alert-dismiss:hover {
+    .bds270Alert-dismiss:hover {
       opacity: var(--alert_dismiss-opacity--hover, 0.7);
     }
   }
 }
 
 /* src/components/ui/Avatar/Avatar.module.css */
-@layer boostdev.bds251Avatar-component {
-  .bds251Avatar-avatar {
+@layer boostdev.bds270Avatar-component {
+  .bds270Avatar-avatar {
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -196,42 +196,42 @@
     overflow: hidden;
     flex-shrink: 0;
   }
-  .bds251Avatar-avatar.bds251Avatar---fallback {
+  .bds270Avatar-avatar.bds270Avatar---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);
   }
-  .bds251Avatar-avatar.bds251Avatar---size_small {
+  .bds270Avatar-avatar.bds270Avatar---size_small {
     --avatar_size: 2em;
   }
-  .bds251Avatar-avatar.bds251Avatar---size_medium {
+  .bds270Avatar-avatar.bds270Avatar---size_medium {
     --avatar_size: 3em;
   }
-  .bds251Avatar-avatar.bds251Avatar---size_large {
+  .bds270Avatar-avatar.bds270Avatar---size_large {
     --avatar_size: 4.5em;
   }
-  .bds251Avatar-image {
+  .bds270Avatar-image {
     width: 100%;
     height: 100%;
     object-fit: cover;
     display: block;
   }
-  .bds251Avatar-initials {
+  .bds270Avatar-initials {
     line-height: 1;
     user-select: none;
     font-size: var(--bds-font_size--body);
   }
-  .bds251Avatar-avatar.bds251Avatar---size_small .bds251Avatar-initials {
+  .bds270Avatar-avatar.bds270Avatar---size_small .bds270Avatar-initials {
     font-size: var(--bds-font_size--body--s);
   }
-  .bds251Avatar-avatar.bds251Avatar---size_large .bds251Avatar-initials {
+  .bds270Avatar-avatar.bds270Avatar---size_large .bds270Avatar-initials {
     font-size: var(--bds-font_size--heading-3);
   }
 }
 
 /* src/components/ui/Badge/Badge.module.css */
-@layer boostdev.bds251Badge-component {
-  .bds251Badge-badge {
+@layer boostdev.bds270Badge-component {
+  .bds270Badge-badge {
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -241,37 +241,37 @@
     font-weight: var(--bds-font_weight--semibold);
     line-height: 1;
     white-space: nowrap;
-    background-color: var(--badge_bg, var(--bds-color_blue));
-    color: var(--badge_text, var(--bds-color_on-blue));
+    background-color: var(--badge_bg, var(--badge_bg--variant, var(--bds-color_blue)));
+    color: var(--badge_text, var(--badge_text--variant, var(--bds-color_on-blue)));
   }
-  .bds251Badge---variant_primary {
-    --badge_bg: var(--bds-color_interactive);
-    --badge_text: var(--bds-color_on-interactive);
+  .bds270Badge---variant_primary {
+    --badge_bg--variant: var(--badge_bg--primary, var(--bds-color_interactive));
+    --badge_text--variant: var(--badge_text--primary, var(--bds-color_on-interactive));
   }
-  .bds251Badge---variant_secondary {
-    --badge_bg: var(--bds-color_bg);
-    --badge_text: var(--bds-color_on-bg);
+  .bds270Badge---variant_secondary {
+    --badge_bg--variant: var(--badge_bg--secondary, var(--bds-color_bg));
+    --badge_text--variant: var(--badge_text--secondary, var(--bds-color_on-bg));
   }
-  .bds251Badge---variant_success {
-    --badge_bg: var(--bds-color_success);
-    --badge_text: var(--bds-color_on-success);
+  .bds270Badge---variant_success {
+    --badge_bg--variant: var(--badge_bg--success, var(--bds-color_success));
+    --badge_text--variant: var(--badge_text--success, var(--bds-color_on-success));
   }
-  .bds251Badge---variant_error {
-    --badge_bg: var(--bds-color_error);
-    --badge_text: var(--bds-color_on-error);
+  .bds270Badge---variant_error {
+    --badge_bg--variant: var(--badge_bg--error, var(--bds-color_error));
+    --badge_text--variant: var(--badge_text--error, var(--bds-color_on-error));
   }
-  .bds251Badge---variant_warning {
-    --badge_bg: var(--bds-color_warning);
-    --badge_text: var(--bds-color_on-warning);
+  .bds270Badge---variant_warning {
+    --badge_bg--variant: var(--badge_bg--warning, var(--bds-color_warning));
+    --badge_text--variant: var(--badge_text--warning, var(--bds-color_on-warning));
   }
 }
 
 /* src/components/ui/Breadcrumb/Breadcrumb.module.css */
-@layer boostdev.bds251Breadcrumb-component {
-  .bds251Breadcrumb-breadcrumb {
+@layer boostdev.bds270Breadcrumb-component {
+  .bds270Breadcrumb-breadcrumb {
     font-size: var(--bds-font_size--body--s);
   }
-  .bds251Breadcrumb-list {
+  .bds270Breadcrumb-list {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
@@ -280,45 +280,45 @@
     margin: 0;
     padding: 0;
   }
-  .bds251Breadcrumb-item {
+  .bds270Breadcrumb-item {
     display: flex;
     align-items: center;
     gap: var(--bds-space_xxs);
   }
-  .bds251Breadcrumb-link {
+  .bds270Breadcrumb-link {
     color: var(--bds-color_interactive_on-bg);
     text-decoration: none;
     transition: var(--bds-animation_transition);
   }
-  .bds251Breadcrumb-link:focus-visible {
+  .bds270Breadcrumb-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) {
-    .bds251Breadcrumb-link:hover {
+    .bds270Breadcrumb-link:hover {
       text-decoration: underline;
       text-underline-offset: 0.2em;
     }
   }
-  .bds251Breadcrumb-separator {
+  .bds270Breadcrumb-separator {
     color: var(--bds-color_on-bg--subtle);
     user-select: none;
   }
-  .bds251Breadcrumb-current {
+  .bds270Breadcrumb-current {
     color: var(--bds-color_on-bg--subtle);
     font-weight: var(--bds-font_weight--semibold);
   }
 }
 
 /* src/components/ui/Collapsible/Collapsible.module.css */
-@layer boostdev.bds251Collapsible-component {
-  .bds251Collapsible-collapsible {
+@layer boostdev.bds270Collapsible-component {
+  .bds270Collapsible-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;
   }
-  .bds251Collapsible-summary {
+  .bds270Collapsible-summary {
     list-style: none;
     display: flex;
     align-items: center;
@@ -333,25 +333,25 @@
     user-select: none;
     transition: var(--bds-animation_transition);
   }
-  .bds251Collapsible-summary::-webkit-details-marker {
+  .bds270Collapsible-summary::-webkit-details-marker {
     display: none;
   }
-  .bds251Collapsible-summary:focus-visible {
+  .bds270Collapsible-summary:focus-visible {
     outline: var(--bds-outline_default);
     outline-offset: calc(var(--bds-outline_offset) * -1);
   }
   @media (hover: hover) and (pointer: fine) {
-    .bds251Collapsible-summary:hover {
+    .bds270Collapsible-summary:hover {
       background-color: var(--collapsible_bg--hover, var(--bds-color_bg--subtle));
     }
   }
-  .bds251Collapsible-collapsible[open] > .bds251Collapsible-summary {
+  .bds270Collapsible-collapsible[open] > .bds270Collapsible-summary {
     border-block-end: var(--collapsible_border-width, 1px) solid var(--collapsible_border-color, var(--bds-color_bg--subtle));
   }
-  .bds251Collapsible-summaryContent {
+  .bds270Collapsible-summaryContent {
     flex: 1;
   }
-  .bds251Collapsible-icon {
+  .bds270Collapsible-icon {
     inline-size: 0.5rem;
     block-size: 0.5rem;
     border-inline-end: 2px solid currentcolor;
@@ -360,25 +360,25 @@
     flex-shrink: 0;
     transition: transform var(--bds-animation_transition-duration) var(--bds-animation_easing);
   }
-  .bds251Collapsible-collapsible[open] > .bds251Collapsible-summary .bds251Collapsible-icon {
+  .bds270Collapsible-collapsible[open] > .bds270Collapsible-summary .bds270Collapsible-icon {
     transform: rotate(-135deg);
   }
-  .bds251Collapsible-content {
+  .bds270Collapsible-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) {
-    .bds251Collapsible-icon {
+    .bds270Collapsible-icon {
       transition: none;
     }
   }
 }
 
 /* src/components/ui/Calendar/Calendar.module.css */
-@layer boostdev.bds251Calendar-component {
-  .bds251Calendar-calendar {
+@layer boostdev.bds270Calendar-component {
+  .bds270Calendar-calendar {
     display: inline-flex;
     flex-direction: column;
     gap: var(--bds-space_s);
@@ -391,17 +391,17 @@
     box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--calendar_shadow, var(--bds-shadow_s));
     inline-size: 20rem;
   }
-  .bds251Calendar-header {
+  .bds270Calendar-header {
     display: flex;
     align-items: center;
     justify-content: space-between;
   }
-  .bds251Calendar-monthYear {
+  .bds270Calendar-monthYear {
     font-size: var(--bds-font_size--body);
     font-weight: var(--bds-font_weight--semibold);
     color: var(--bds-color_on-bg);
   }
-  .bds251Calendar-navBtn {
+  .bds270Calendar-navBtn {
     all: unset;
     display: flex;
     align-items: center;
@@ -413,35 +413,35 @@
     color: var(--bds-color_on-bg);
     transition: var(--bds-animation_transition);
   }
-  .bds251Calendar-navBtn svg {
+  .bds270Calendar-navBtn svg {
     inline-size: 1rem;
     block-size: 1rem;
   }
-  .bds251Calendar-navBtn:focus-visible {
+  .bds270Calendar-navBtn:focus-visible {
     outline: var(--bds-outline_default);
     outline-offset: var(--bds-outline_offset);
   }
   @media (hover: hover) and (pointer: fine) {
-    .bds251Calendar-navBtn:hover {
+    .bds270Calendar-navBtn:hover {
       background-color: var(--calendar_navBtn-bg--hover, var(--bds-color_bg--subtle));
     }
   }
-  .bds251Calendar-grid {
+  .bds270Calendar-grid {
     border-collapse: collapse;
     inline-size: 100%;
     table-layout: fixed;
   }
-  .bds251Calendar-weekday {
+  .bds270Calendar-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);
   }
-  .bds251Calendar-empty {
+  .bds270Calendar-empty {
     padding: 0;
   }
-  .bds251Calendar-day {
+  .bds270Calendar-day {
     all: unset;
     display: flex;
     align-items: center;
@@ -455,46 +455,46 @@
     transition: var(--bds-animation_transition);
     box-sizing: border-box;
   }
-  .bds251Calendar-day:focus-visible {
+  .bds270Calendar-day:focus-visible {
     outline: var(--bds-outline_default);
     outline-offset: var(--bds-outline_offset);
   }
   @media (hover: hover) and (pointer: fine) {
-    .bds251Calendar-day:not(.bds251Calendar-disabled, .bds251Calendar-selected):hover {
+    .bds270Calendar-day:not(.bds270Calendar-disabled, .bds270Calendar-selected):hover {
       background-color: var(--calendar_day-bg--hover, var(--bds-color_bg--subtle));
     }
   }
-  .bds251Calendar-today {
+  .bds270Calendar-today {
     font-weight: var(--bds-font_weight--semibold);
     --bdc_color: var(--calendar_today-color, var(--bds-color_interactive));
     border: var(--calendar_today-border, none);
     box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color);
   }
-  .bds251Calendar-selected {
+  .bds270Calendar-selected {
     background-color: var(--calendar_day-bg--selected, var(--bds-color_interactive));
     color: var(--calendar_day-color--selected, var(--bds-color_on-interactive));
     font-weight: var(--bds-font_weight--semibold);
   }
-  .bds251Calendar-disabled {
+  .bds270Calendar-disabled {
     opacity: 0.35;
     cursor: not-allowed;
   }
   @media (prefers-reduced-motion: reduce) {
-    .bds251Calendar-day {
+    .bds270Calendar-day {
       transition: none;
     }
   }
 }
 
 /* src/components/ui/Carousel/Carousel.module.css */
-@layer boostdev.bds251Carousel-component {
-  .bds251Carousel-carousel {
+@layer boostdev.bds270Carousel-component {
+  .bds270Carousel-carousel {
     position: relative;
     display: flex;
     align-items: center;
     gap: var(--bds-space_xs);
   }
-  .bds251Carousel-track {
+  .bds270Carousel-track {
     display: flex;
     gap: var(--bds-space_m);
     overflow-inline: auto;
@@ -503,14 +503,14 @@
     flex: 1;
     scroll-behavior: smooth;
   }
-  .bds251Carousel-track::-webkit-scrollbar {
+  .bds270Carousel-track::-webkit-scrollbar {
     display: none;
   }
-  .bds251Carousel-slide {
+  .bds270Carousel-slide {
     scroll-snap-align: start;
     flex-shrink: 0;
   }
-  .bds251Carousel-navBtn {
+  .bds270Carousel-navBtn {
     all: unset;
     display: flex;
     align-items: center;
@@ -527,29 +527,29 @@
     flex-shrink: 0;
     transition: var(--bds-animation_transition);
   }
-  .bds251Carousel-navBtn svg {
+  .bds270Carousel-navBtn svg {
     inline-size: 1.25rem;
     block-size: 1.25rem;
   }
-  .bds251Carousel-navBtn:focus-visible {
+  .bds270Carousel-navBtn:focus-visible {
     outline: var(--bds-outline_default);
     outline-offset: var(--bds-outline_offset);
   }
   @media (hover: hover) and (pointer: fine) {
-    .bds251Carousel-navBtn:hover {
+    .bds270Carousel-navBtn:hover {
       background-color: var(--carousel_navBtn-bg--hover, var(--bds-color_bg--subtle));
     }
   }
   @media (prefers-reduced-motion: reduce) {
-    .bds251Carousel-track {
+    .bds270Carousel-track {
       scroll-behavior: auto;
     }
   }
 }
 
 /* src/components/ui/DescriptionList/DescriptionList.module.css */
-@layer boostdev.bds251DescriptionList-component {
-  .bds251DescriptionList-list {
+@layer boostdev.bds270DescriptionList-component {
+  .bds270DescriptionList-list {
     display: flex;
     flex-direction: column;
     gap: var(--bds-space_s);
@@ -558,63 +558,63 @@
     font-size: var(--bds-font_size--body);
     color: var(--bds-color_on-bg);
   }
-  .bds251DescriptionList-group {
+  .bds270DescriptionList-group {
     display: flex;
     flex-direction: column;
     gap: var(--bds-space_xxs);
   }
-  .bds251DescriptionList-term {
+  .bds270DescriptionList-term {
     font-weight: var(--bds-font_weight--semibold);
     color: var(--bds-color_on-bg);
   }
-  .bds251DescriptionList-details {
+  .bds270DescriptionList-details {
     margin: 0;
     color: var(--bds-color_on-bg);
   }
-  .bds251DescriptionList---layout_inline .bds251DescriptionList-group {
+  .bds270DescriptionList---layout_inline .bds270DescriptionList-group {
     display: grid;
     grid-template-columns: minmax(8rem, 1fr) 2fr;
     gap: var(--bds-space_xs);
     align-items: baseline;
   }
-  .bds251DescriptionList---layout_inline .bds251DescriptionList-term {
+  .bds270DescriptionList---layout_inline .bds270DescriptionList-term {
     grid-column: 1;
   }
-  .bds251DescriptionList---layout_inline .bds251DescriptionList-details {
+  .bds270DescriptionList---layout_inline .bds270DescriptionList-details {
     grid-column: 2;
   }
 }
 
 /* src/components/ui/Link/Link.module.css */
-@layer boostdev.bds251Link-component {
-  .bds251Link-link {
-    color: var(--link_color, var(--bds-color_interactive_on-bg));
+@layer boostdev.bds270Link-component {
+  .bds270Link-link {
+    color: var(--link_color, var(--link_color--variant, var(--bds-color_interactive_on-bg)));
     text-decoration: underline;
     text-underline-offset: 0.2em;
     transition: var(--bds-animation_transition);
     cursor: pointer;
   }
-  .bds251Link-link:focus-visible {
+  .bds270Link-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) {
-    .bds251Link-link:hover {
-      --link_color: var(--link_color-hover, var(--bds-color_blue--strong));
+    .bds270Link-link:hover {
+      color: var(--link_color-hover, var(--link_color-hover--variant, var(--bds-color_blue--strong)));
     }
   }
-  .bds251Link---variant_default {
-    --link_color: var(--bds-color_interactive_on-bg);
-    --link_color-hover: var(--bds-color_blue--strong);
+  .bds270Link---variant_default {
+    --link_color--variant: var(--link_color--default, var(--bds-color_interactive_on-bg));
+    --link_color-hover--variant: var(--link_color-hover--default, var(--bds-color_blue--strong));
   }
-  .bds251Link---variant_subtle {
-    --link_color: var(--bds-color_on-bg);
-    --link_color-hover: var(--bds-color_interactive_on-bg);
+  .bds270Link---variant_subtle {
+    --link_color--variant: var(--link_color--subtle, var(--bds-color_on-bg));
+    --link_color-hover--variant: var(--link_color-hover--subtle, var(--bds-color_interactive_on-bg));
   }
-  .bds251Link---variant_standalone {
-    --link_color: var(--bds-color_interactive_on-bg);
-    --link_color-hover: var(--bds-color_blue--strong);
+  .bds270Link---variant_standalone {
+    --link_color--variant: var(--link_color--standalone, var(--bds-color_interactive_on-bg));
+    --link_color-hover--variant: var(--link_color-hover--standalone, var(--bds-color_blue--strong));
     display: inline-flex;
     align-items: center;
     gap: var(--bds-space_xxs);
@@ -622,12 +622,12 @@
     text-decoration: none;
   }
   @media (hover: hover) and (pointer: fine) {
-    .bds251Link---variant_standalone:hover {
+    .bds270Link---variant_standalone:hover {
       text-decoration: underline;
       text-underline-offset: 0.2em;
     }
   }
-  .bds251Link-externalLabel {
+  .bds270Link-externalLabel {
     position: absolute;
     inline-size: 1px;
     block-size: 1px;
@@ -641,13 +641,13 @@
 }
 
 /* src/components/ui/Loading/Loading.module.css */
-@layer boostdev.bds251Loading-component {
-  .bds251Loading-loading {
+@layer boostdev.bds270Loading-component {
+  .bds270Loading-loading {
     display: flex;
     justify-content: center;
     align-items: center;
   }
-  .bds251Loading-spinner {
+  .bds270Loading-spinner {
     inline-size: 2.5em;
     block-size: 2.5em;
     border: 4px solid var(--bds-color_bg);
@@ -655,12 +655,12 @@
     border-radius: var(--loading_radius, var(--bds-border_radius--circle));
     animation: spin 1s linear infinite;
   }
-  .bds251Loading---size_small .bds251Loading-spinner {
+  .bds270Loading---size_small .bds270Loading-spinner {
     inline-size: 1.5em;
     block-size: 1.5em;
     border-width: 2px;
   }
-  .bds251Loading---size_large .bds251Loading-spinner {
+  .bds270Loading---size_large .bds270Loading-spinner {
     inline-size: 4em;
     block-size: 4em;
     border-width: 6px;
@@ -675,52 +675,52 @@
   }
 }
 @media (prefers-reduced-motion: reduce) {
-  .bds251Loading-spinner {
+  .bds270Loading-spinner {
     animation: none;
   }
 }
 
 /* src/components/ui/NotificationBanner/NotificationBanner.module.css */
-@layer boostdev.bds251NotificationBanner-component {
-  .bds251NotificationBanner-banner {
+@layer boostdev.bds270NotificationBanner-component {
+  .bds270NotificationBanner-banner {
     display: flex;
     align-items: center;
     gap: var(--bds-space_m);
     padding: var(--bds-space_s) var(--bds-space_m);
-    background-color: var(--banner_bg, var(--bds-color_blue--subtle));
-    color: var(--banner_text, var(--bds-color_on-blue--subtle));
-    border-block-end: 3px solid var(--banner_border, var(--bds-color_blue));
+    background-color: var(--banner_bg, var(--banner_bg--variant, var(--bds-color_blue--subtle)));
+    color: var(--banner_text, var(--banner_text--variant, var(--bds-color_on-blue--subtle)));
+    border-block-end: 3px solid var(--banner_border, var(--banner_border--variant, var(--bds-color_blue)));
     font-size: var(--bds-font_size--body);
     line-height: var(--bds-font_line-height--body);
     inline-size: 100%;
   }
-  .bds251NotificationBanner---variant_info {
-    --banner_bg: var(--bds-color_blue--subtle);
-    --banner_text: var(--bds-color_on-blue--subtle);
-    --banner_border: var(--bds-color_blue);
+  .bds270NotificationBanner---variant_info {
+    --banner_bg--variant: var(--banner_bg--info, var(--bds-color_blue--subtle));
+    --banner_text--variant: var(--banner_text--info, var(--bds-color_on-blue--subtle));
+    --banner_border--variant: var(--banner_border--info, var(--bds-color_blue));
   }
-  .bds251NotificationBanner---variant_success {
-    --banner_bg: var(--bds-color_success--subtle);
-    --banner_text: var(--bds-color_on-success--subtle);
-    --banner_border: var(--bds-color_success);
+  .bds270NotificationBanner---variant_success {
+    --banner_bg--variant: var(--banner_bg--success, var(--bds-color_success--subtle));
+    --banner_text--variant: var(--banner_text--success, var(--bds-color_on-success--subtle));
+    --banner_border--variant: var(--banner_border--success, var(--bds-color_success));
   }
-  .bds251NotificationBanner---variant_warning {
-    --banner_bg: var(--bds-color_orange--subtle);
-    --banner_text: var(--bds-color_on-orange--subtle);
-    --banner_border: var(--bds-color_warning);
+  .bds270NotificationBanner---variant_warning {
+    --banner_bg--variant: var(--banner_bg--warning, var(--bds-color_orange--subtle));
+    --banner_text--variant: var(--banner_text--warning, var(--bds-color_on-orange--subtle));
+    --banner_border--variant: var(--banner_border--warning, var(--bds-color_warning));
   }
-  .bds251NotificationBanner---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);
+  .bds270NotificationBanner---variant_error {
+    --banner_bg--variant: var(--banner_bg--error, rgb(from var(--bds-color_error) r g b / 12%));
+    --banner_text--variant: var(--banner_text--error, var(--bds-color_on-bg));
+    --banner_border--variant: var(--banner_border--error, var(--bds-color_error));
   }
-  .bds251NotificationBanner-content {
+  .bds270NotificationBanner-content {
     flex: 1;
   }
-  .bds251NotificationBanner-action {
+  .bds270NotificationBanner-action {
     flex-shrink: 0;
   }
-  .bds251NotificationBanner-dismiss {
+  .bds270NotificationBanner-dismiss {
     all: unset;
     display: flex;
     align-items: center;
@@ -734,28 +734,28 @@
     --bdc_color: currentcolor;
     box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color);
   }
-  .bds251NotificationBanner-dismiss svg {
+  .bds270NotificationBanner-dismiss svg {
     inline-size: 1rem;
     block-size: 1rem;
   }
-  .bds251NotificationBanner-dismiss:focus-visible {
+  .bds270NotificationBanner-dismiss:focus-visible {
     outline: var(--bds-outline_default);
     outline-offset: var(--bds-outline_offset);
   }
   @media (hover: hover) and (pointer: fine) {
-    .bds251NotificationBanner-dismiss:hover {
+    .bds270NotificationBanner-dismiss:hover {
       opacity: var(--banner_dismiss-opacity--hover, 0.7);
     }
   }
 }
 
 /* src/components/ui/Pagination/Pagination.module.css */
-@layer boostdev.bds251Pagination-component {
-  .bds251Pagination-pagination {
+@layer boostdev.bds270Pagination-component {
+  .bds270Pagination-pagination {
     display: flex;
     justify-content: center;
   }
-  .bds251Pagination-list {
+  .bds270Pagination-list {
     display: flex;
     align-items: center;
     gap: var(--bds-space_xxs);
@@ -763,10 +763,10 @@
     margin: 0;
     padding: 0;
   }
-  .bds251Pagination-list li {
+  .bds270Pagination-list li {
     list-style: none;
   }
-  .bds251Pagination-button {
+  .bds270Pagination-button {
     all: unset;
     display: inline-flex;
     align-items: center;
@@ -775,11 +775,11 @@
     block-size: 2.25rem;
     padding-inline: var(--bds-space_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));
+    background-color: var(--btn_bg, var(--btn_bg--state, transparent));
+    color: var(--btn_color, var(--btn_color--state, var(--bds-color_on-bg)));
+    --bdc_color: var(--btn_border, var(--btn_border--state, var(--bds-color_bg--subtle)));
     border: none;
     box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color);
-    color: var(--btn_color, var(--bds-color_on-bg));
     font-family: var(--bds-font_family--body);
     font-size: var(--bds-font_size--body);
     font-variant-numeric: tabular-nums;
@@ -787,30 +787,30 @@
     transition: var(--bds-animation_transition);
     box-sizing: border-box;
   }
-  .bds251Pagination-button:disabled {
+  .bds270Pagination-button:disabled {
     opacity: 0.4;
     cursor: not-allowed;
   }
-  .bds251Pagination-button:focus-visible {
+  .bds270Pagination-button:focus-visible {
     outline: var(--bds-outline_default);
     outline-offset: var(--bds-outline_offset);
   }
   @media (hover: hover) and (pointer: fine) {
-    .bds251Pagination-button:not(:disabled, .bds251Pagination---active):hover {
-      --btn_bg: var(--btn_bg--hover, var(--bds-color_bg--subtle));
-      --btn_color: var(--btn_color--hover, var(--bds-color_interactive_on-bg));
+    .bds270Pagination-button:not(:disabled, .bds270Pagination---active):hover {
+      --btn_bg--state: var(--btn_bg--hover, var(--bds-color_bg--subtle));
+      --btn_color--state: var(--btn_color--hover, var(--bds-color_interactive_on-bg));
     }
   }
-  .bds251Pagination-button.bds251Pagination---active {
-    --btn_bg: var(--btn_bg--active, var(--bds-color_interactive));
-    --btn_color: var(--btn_color--active, var(--bds-color_on-interactive));
-    --btn_border: var(--btn_border--active, var(--bds-color_interactive));
+  .bds270Pagination-button.bds270Pagination---active {
+    --btn_bg--state: var(--btn_bg--active, var(--bds-color_interactive));
+    --btn_color--state: var(--btn_color--active, var(--bds-color_on-interactive));
+    --btn_border--state: var(--btn_border--active, var(--bds-color_interactive));
   }
-  .bds251Pagination-button.bds251Pagination---nav svg {
+  .bds270Pagination-button.bds270Pagination---nav svg {
     inline-size: 1rem;
     block-size: 1rem;
   }
-  .bds251Pagination-ellipsis {
+  .bds270Pagination-ellipsis {
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -823,71 +823,71 @@
 }
 
 /* src/components/ui/Progress/Progress.module.css */
-@layer boostdev.bds251Progress-component {
-  .bds251Progress-container {
+@layer boostdev.bds270Progress-component {
+  .bds270Progress-container {
     display: flex;
     flex-direction: column;
     gap: var(--bds-space_xxs);
     inline-size: 100%;
   }
-  .bds251Progress-labelRow {
+  .bds270Progress-labelRow {
     display: flex;
     justify-content: space-between;
     align-items: baseline;
     font-size: var(--bds-font_size--body--s);
     color: var(--bds-color_on-bg);
   }
-  .bds251Progress-value {
+  .bds270Progress-value {
     font-variant-numeric: tabular-nums;
   }
-  .bds251Progress-track {
+  .bds270Progress-track {
     inline-size: 100%;
     block-size: var(--progress_height, var(--bds-space_xs));
     background-color: var(--bds-color_bg--subtle);
     border-radius: var(--progress_radius, var(--bds-border_radius--full));
     overflow: hidden;
   }
-  .bds251Progress-track.bds251Progress---size_small {
+  .bds270Progress-track.bds270Progress---size_small {
     --progress_height: var(--bds-space_xxs);
   }
-  .bds251Progress-track.bds251Progress---size_medium {
+  .bds270Progress-track.bds270Progress---size_medium {
     --progress_height: var(--bds-space_xs);
   }
-  .bds251Progress-track.bds251Progress---size_large {
+  .bds270Progress-track.bds270Progress---size_large {
     --progress_height: var(--bds-space_s);
   }
-  .bds251Progress-fill {
+  .bds270Progress-fill {
     block-size: 100%;
     background-color: var(--progress_color-active, var(--bdc-color_active));
     border-radius: var(--progress_radius, var(--bds-border_radius--full));
     transition: inline-size var(--bds-animation_transition-duration) var(--bds-animation_easing);
   }
   @media (prefers-reduced-motion: reduce) {
-    .bds251Progress-fill {
+    .bds270Progress-fill {
       transition: none;
     }
   }
 }
 
 /* src/components/ui/ProgressCircle/ProgressCircle.module.css */
-@layer boostdev.bds251ProgressCircle-component {
-  .bds251ProgressCircle-wrapper {
+@layer boostdev.bds270ProgressCircle-component {
+  .bds270ProgressCircle-wrapper {
     position: relative;
     display: inline-flex;
     align-items: center;
     justify-content: center;
   }
-  .bds251ProgressCircle-svg {
+  .bds270ProgressCircle-svg {
     display: block;
   }
-  .bds251ProgressCircle-track {
+  .bds270ProgressCircle-track {
     stroke: var(--bds-color_bg--subtle);
   }
-  .bds251ProgressCircle-fill {
+  .bds270ProgressCircle-fill {
     stroke: var(--progressCircle_color-active, var(--bdc-color_active));
     transition: stroke-dashoffset var(--bds-animation_transition-duration) var(--bds-animation_easing);
   }
-  .bds251ProgressCircle-value {
+  .bds270ProgressCircle-value {
     position: absolute;
     font-size: var(--bds-font_size--body--s);
     font-weight: var(--bds-font_weight--semibold);
@@ -895,34 +895,34 @@
     color: var(--bds-color_on-bg);
     line-height: 1;
   }
-  .bds251ProgressCircle---size_small .bds251ProgressCircle-value {
+  .bds270ProgressCircle---size_small .bds270ProgressCircle-value {
     font-size: 0.5rem;
   }
-  .bds251ProgressCircle---size_medium .bds251ProgressCircle-value {
+  .bds270ProgressCircle---size_medium .bds270ProgressCircle-value {
     font-size: var(--bds-font_size--body--s);
   }
-  .bds251ProgressCircle---size_large .bds251ProgressCircle-value {
+  .bds270ProgressCircle---size_large .bds270ProgressCircle-value {
     font-size: var(--bds-font_size--body);
   }
   @media (prefers-reduced-motion: reduce) {
-    .bds251ProgressCircle-fill {
+    .bds270ProgressCircle-fill {
       transition: none;
     }
   }
 }
 
 /* src/components/ui/Separator/Separator.module.css */
-@layer boostdev.bds251Separator-component {
-  .bds251Separator-separator {
+@layer boostdev.bds270Separator-component {
+  .bds270Separator-separator {
     border: none;
     background-color: var(--separator_color, var(--bds-color_on-bg));
   }
-  .bds251Separator-separator.bds251Separator---horizontal {
+  .bds270Separator-separator.bds270Separator---horizontal {
     display: block;
     inline-size: 100%;
     block-size: var(--separator_thickness, 1px);
   }
-  .bds251Separator-separator.bds251Separator---vertical {
+  .bds270Separator-separator.bds270Separator---vertical {
     display: inline-block;
     inline-size: var(--separator_thickness, 1px);
     align-self: stretch;
@@ -930,8 +930,8 @@
 }
 
 /* src/components/ui/Skeleton/Skeleton.module.css */
-@layer boostdev.bds251Skeleton-component {
-  .bds251Skeleton-skeleton {
+@layer boostdev.bds270Skeleton-component {
+  .bds270Skeleton-skeleton {
     background:
       linear-gradient(
         90deg,
@@ -954,8 +954,8 @@
 }
 
 /* src/components/ui/SkipLink/SkipLink.module.css */
-@layer boostdev.bds251SkipLink-component {
-  .bds251SkipLink-skipLink {
+@layer boostdev.bds270SkipLink-component {
+  .bds270SkipLink-skipLink {
     position: absolute;
     inset-block-start: var(--bds-space_s);
     inset-inline-start: var(--bds-space_s);
@@ -973,21 +973,21 @@
     transform: translateY(-200%);
     transition: transform var(--bds-animation_transition-duration) var(--bds-animation_easing);
   }
-  .bds251SkipLink-skipLink:focus-visible {
+  .bds270SkipLink-skipLink:focus-visible {
     transform: translateY(0);
     outline: var(--bds-outline_default);
     outline-offset: var(--bds-outline_offset);
   }
   @media (prefers-reduced-motion: reduce) {
-    .bds251SkipLink-skipLink {
+    .bds270SkipLink-skipLink {
       transition: none;
     }
   }
 }
 
 /* src/components/ui/Table/Table.module.css */
-@layer boostdev.bds251Table-component {
-  .bds251Table-wrapper {
+@layer boostdev.bds270Table-component {
+  .bds270Table-wrapper {
     inline-size: 100%;
     overflow-inline: auto;
     border: var(--table_border, none);
@@ -996,23 +996,23 @@
     border-radius: var(--table_radius, var(--bdc-outline_radius));
     box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color);
   }
-  .bds251Table-table {
+  .bds270Table-table {
     inline-size: 100%;
     border-collapse: collapse;
     font-size: var(--bds-font_size--body);
     font-family: var(--bds-font_family--body);
   }
-  .bds251Table-caption {
+  .bds270Table-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);
   }
-  .bds251Table-thead {
+  .bds270Table-thead {
     background-color: var(--bds-color_bg--subtle);
   }
-  .bds251Table-th {
+  .bds270Table-th {
     padding: var(--bds-space_s) var(--bds-space_m);
     text-align: start;
     font-weight: var(--bds-font_weight--semibold);
@@ -1021,10 +1021,10 @@
     white-space: nowrap;
     border-block-end: 1px solid var(--bds-color_bg--subtle);
   }
-  .bds251Table-th.bds251Table---sortable {
+  .bds270Table-th.bds270Table---sortable {
     padding: 0;
   }
-  .bds251Table-sortButton {
+  .bds270Table-sortButton {
     all: unset;
     display: flex;
     align-items: center;
@@ -1038,64 +1038,64 @@
     transition: var(--bds-animation_transition);
     box-sizing: border-box;
   }
-  .bds251Table-sortButton:focus-visible {
+  .bds270Table-sortButton:focus-visible {
     outline: var(--bds-outline_default);
     outline-offset: calc(var(--bds-outline_offset) * -1);
   }
   @media (hover: hover) and (pointer: fine) {
-    .bds251Table-sortButton:hover {
+    .bds270Table-sortButton:hover {
       color: var(--table_sortBtn-color--hover, var(--bds-color_on-bg));
     }
   }
-  .bds251Table-sortIcon {
+  .bds270Table-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);
   }
-  .bds251Table-sortIcon.bds251Table---sort-active {
+  .bds270Table-sortIcon.bds270Table---sort-active {
     opacity: 1;
     color: var(--bds-color_interactive);
   }
-  .bds251Table-sortIcon.bds251Table---sort-desc {
+  .bds270Table-sortIcon.bds270Table---sort-desc {
     transform: rotate(180deg);
   }
-  .bds251Table-tbody .bds251Table-tr {
+  .bds270Table-tbody .bds270Table-tr {
     border-block-end: 1px solid var(--bds-color_bg--subtle);
     transition: var(--bds-animation_transition);
   }
-  .bds251Table-tbody .bds251Table-tr:last-child {
+  .bds270Table-tbody .bds270Table-tr:last-child {
     border-block-end: none;
   }
   @media (hover: hover) and (pointer: fine) {
-    .bds251Table-tbody .bds251Table-tr:hover {
+    .bds270Table-tbody .bds270Table-tr:hover {
       background-color: var(--table_row-bg--hover, var(--bds-color_bg--subtle));
     }
   }
-  .bds251Table-td {
+  .bds270Table-td {
     padding: var(--bds-space_s) var(--bds-space_m);
     color: var(--bds-color_on-bg);
     vertical-align: middle;
   }
   @media (prefers-reduced-motion: reduce) {
-    .bds251Table-sortIcon {
+    .bds270Table-sortIcon {
       transition: none;
     }
   }
 }
 
 /* src/components/ui/Tabs/Tabs.module.css */
-@layer boostdev.bds251Tabs-component {
-  .bds251Tabs-tabs {
+@layer boostdev.bds270Tabs-component {
+  .bds270Tabs-tabs {
     display: flex;
     flex-direction: column;
   }
-  .bds251Tabs-tabList {
+  .bds270Tabs-tabList {
     display: flex;
     border-block-end: 1px solid var(--bds-color_bg--subtle);
     gap: var(--bds-space_xxs);
   }
-  .bds251Tabs-tab {
+  .bds270Tabs-tab {
     all: unset;
     display: inline-flex;
     align-items: center;
@@ -1103,47 +1103,47 @@
     font-family: var(--bds-font_family--body);
     font-size: var(--bds-font_size--body);
     font-weight: var(--bds-font_weight--semibold);
-    color: var(--tab_color, var(--bds-color_on-bg));
-    border-block-end: 2px solid var(--tab_border-color, transparent);
+    color: var(--tab_color, var(--tab_color--state, var(--bds-color_on-bg)));
+    border-block-end: 2px solid var(--tab_border-color, var(--tab_border-color--state, transparent));
     margin-block-end: -1px;
     cursor: pointer;
     transition: var(--bds-animation_transition);
   }
-  .bds251Tabs-tab.bds251Tabs---active {
-    --tab_color: var(--tab_color--active, var(--bds-color_interactive_on-bg));
-    --tab_border-color: var(--tab_border-color--active, var(--bds-color_interactive));
+  .bds270Tabs-tab.bds270Tabs---active {
+    --tab_color--state: var(--tab_color--active, var(--bds-color_interactive_on-bg));
+    --tab_border-color--state: var(--tab_border-color--active, var(--bds-color_interactive));
   }
-  .bds251Tabs-tab:disabled {
+  .bds270Tabs-tab:disabled {
     opacity: 0.4;
     cursor: not-allowed;
   }
-  .bds251Tabs-tab:focus-visible {
+  .bds270Tabs-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) {
-    .bds251Tabs-tab:not(:disabled, .bds251Tabs---active):hover {
-      --tab_color: var(--tab_color--hover, var(--bds-color_interactive_on-bg));
+    .bds270Tabs-tab:not(:disabled, .bds270Tabs---active):hover {
+      --tab_color--state: var(--tab_color--hover, var(--bds-color_interactive_on-bg));
     }
   }
-  .bds251Tabs-panel {
+  .bds270Tabs-panel {
     padding-block-start: var(--bds-space_m);
   }
-  .bds251Tabs-panel:focus-visible {
+  .bds270Tabs-panel:focus-visible {
     outline: var(--bds-outline_default);
     outline-offset: var(--bds-outline_offset);
   }
 }
 
 /* src/components/ui/Tooltip/Tooltip.module.css */
-@layer boostdev.bds251Tooltip-component {
-  .bds251Tooltip-wrapper {
+@layer boostdev.bds270Tooltip-component {
+  .bds270Tooltip-wrapper {
     position: relative;
     display: inline-flex;
     align-items: center;
   }
-  .bds251Tooltip-tooltip {
+  .bds270Tooltip-tooltip {
     position: absolute;
     z-index: var(--bds-z-index_popover);
     padding: var(--bds-space_xxs) var(--bds-space_xs);
@@ -1158,68 +1158,68 @@
     opacity: 0;
     transition: opacity var(--bds-animation_transition-duration) var(--bds-animation_easing);
   }
-  .bds251Tooltip-wrapper:hover .bds251Tooltip-tooltip,
-  .bds251Tooltip-wrapper:focus-within .bds251Tooltip-tooltip {
+  .bds270Tooltip-wrapper:hover .bds270Tooltip-tooltip,
+  .bds270Tooltip-wrapper:focus-within .bds270Tooltip-tooltip {
     visibility: visible;
     opacity: 1;
   }
-  .bds251Tooltip---placement_top {
+  .bds270Tooltip---placement_top {
     inset-block-end: calc(100% + var(--bds-space_xs));
     inset-inline-start: 50%;
     transform: translateX(-50%);
   }
-  .bds251Tooltip---placement_bottom {
+  .bds270Tooltip---placement_bottom {
     inset-block-start: calc(100% + var(--bds-space_xs));
     inset-inline-start: 50%;
     transform: translateX(-50%);
   }
-  .bds251Tooltip---placement_left {
+  .bds270Tooltip---placement_left {
     inset-inline-end: calc(100% + var(--bds-space_xs));
     inset-block-start: 50%;
     transform: translateY(-50%);
   }
-  .bds251Tooltip---placement_right {
+  .bds270Tooltip---placement_right {
     inset-inline-start: calc(100% + var(--bds-space_xs));
     inset-block-start: 50%;
     transform: translateY(-50%);
   }
   @media (prefers-reduced-motion: reduce) {
-    .bds251Tooltip-tooltip {
+    .bds270Tooltip-tooltip {
       transition: none;
     }
   }
 }
 
 /* src/components/ui/Typography/Typography.module.css */
-@layer boostdev.bds251Typography-component {
-  .bds251Typography-typography {
+@layer boostdev.bds270Typography-component {
+  .bds270Typography-typography {
     margin: 0;
     font-family: var(--bds-font_family--body);
     color: var(--typography_color, var(--bds-color_on-bg));
   }
-  .bds251Typography---h1 {
+  .bds270Typography---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);
   }
-  .bds251Typography---h2 {
+  .bds270Typography---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);
   }
-  .bds251Typography---h3 {
+  .bds270Typography---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);
   }
-  .bds251Typography---body {
+  .bds270Typography---body {
     font-size: var(--bds-font_size--body);
     line-height: var(--bds-font_line-height--body);
   }
-  .bds251Typography---body_s {
+  .bds270Typography---body_s {
     font-size: var(--bds-font_size--body--s);
     line-height: var(--bds-font_line-height--body);
   }
@@ -1250,9 +1250,9 @@
     box-shadow: 0 0 0 0 rgb(from var(--button_pulse-color, var(--button_color, var(--bds-color_interactive))) r g b / 0%);
   }
 }
-@layer boostdev.bds251Button-component {
-  .bds251Button-button,
-  .bds251Button-button[href] {
+@layer boostdev.bds270Button-component {
+  .bds270Button-button,
+  .bds270Button-button[href] {
     all: unset;
     position: relative;
     font: inherit;
@@ -1271,104 +1271,103 @@
     --button_color: var(--bds-color_interactive);
     --button_on-color: var(--bds-color_on-interactive);
     --button_color--on-bg: var(--bds-color_interactive_on-bg);
-    background-color: var(--button_bg, var(--button_color));
-    color: var(--button_text, var(--button_on-color));
-    border: var(--button_border, none);
-    --bdc_color: transparent;
+    background-color: var(--button_bg, var(--button_bg--variant, var(--button_color)));
+    color: var(--button_text, var(--button_text--variant, var(--button_on-color)));
+    --bdc_color: var(--button_border, var(--button_border--variant, transparent));
     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);
   }
-  .bds251Button-button.bds251Button---default {
+  .bds270Button-button.bds270Button---default {
   }
-  .bds251Button-button.bds251Button---outline,
-  .bds251Button-button.bds251Button---ghost {
-    --button_bg: transparent;
-    --button_text: var(--button_color--on-bg);
-    --bdc_color: var(--button_color--on-bg);
+  .bds270Button-button.bds270Button---outline,
+  .bds270Button-button.bds270Button---ghost {
+    --button_bg--variant: var(--button_bg--outline, transparent);
+    --button_text--variant: var(--button_text--outline, var(--button_color--on-bg));
+    --button_border--variant: var(--button_border--outline, var(--button_color--on-bg));
   }
-  .bds251Button-button.bds251Button---size_small {
+  .bds270Button-button.bds270Button---size_small {
     --button_height: 2.25em;
     --button_font-size: var(--bds-font_size--body--s);
     padding-inline: var(--bds-space_m);
   }
-  .bds251Button-button.bds251Button---size_medium {
+  .bds270Button-button.bds270Button---size_medium {
     --button_height: 3em;
     padding-inline: var(--bds-space_l);
   }
-  .bds251Button-button.bds251Button---size_large {
+  .bds270Button-button.bds270Button---size_large {
     --button_font-size: var(--bds-font_size--heading-3);
     padding-inline: var(--bds-space_xl);
   }
-  .bds251Button-button.bds251Button---hasPulse {
+  .bds270Button-button.bds270Button---hasPulse {
     animation: pulse 3s infinite;
   }
-  .bds251Button-button.bds251Button---iconOnly {
+  .bds270Button-button.bds270Button---iconOnly {
     aspect-ratio: 1;
     box-sizing: border-box;
     padding: var(--bds-space_xxs);
   }
-  .bds251Button-button.bds251Button---iconOnly > * {
+  .bds270Button-button.bds270Button---iconOnly > * {
     inline-size: 100%;
     block-size: 100%;
   }
-  .bds251Button-button[href] {
+  .bds270Button-button[href] {
     text-decoration: none;
   }
-  .bds251Button-button svg {
+  .bds270Button-button svg {
     --icon__stroke: currentcolor;
     fill: currentcolor;
     color: currentcolor;
     flex-shrink: 0;
   }
-  .bds251Button-iconStart {
+  .bds270Button-iconStart {
     display: flex;
     align-items: center;
     margin-inline-start: calc(var(--bds-space_s) * -1);
     transition: var(--bds-animation_transition);
   }
-  .bds251Button-iconEnd {
+  .bds270Button-iconEnd {
     display: flex;
     align-items: center;
     margin-inline-end: calc(var(--bds-space_s) * -1);
     transition: var(--bds-animation_transition);
   }
-  .bds251Button-button.bds251Button---iconOnly .bds251Button-iconStart,
-  .bds251Button-button.bds251Button---iconOnly .bds251Button-iconEnd {
+  .bds270Button-button.bds270Button---iconOnly .bds270Button-iconStart,
+  .bds270Button-button.bds270Button---iconOnly .bds270Button-iconEnd {
     margin-inline: 0;
   }
   @media (hover: hover) and (pointer: fine) {
-    .bds251Button-button:hover .bds251Button-iconStart svg {
+    .bds270Button-button:hover .bds270Button-iconStart svg {
       animation: fadeZoom 2s ease-out infinite;
     }
-    .bds251Button-button:hover .bds251Button-iconEnd svg {
+    .bds270Button-button:hover .bds270Button-iconEnd svg {
       animation: fadeZoom 2s ease-out infinite;
     }
   }
-  .bds251Button-button:focus-visible {
+  .bds270Button-button:focus-visible {
     outline: var(--bds-outline_default);
     outline-offset: var(--bds-outline_offset);
   }
   @media (hover: hover) and (pointer: fine) {
-    .bds251Button-button.bds251Button---default:hover {
-      --button_bg: var(--button_bg--hover, var(--bds-color_bg));
-      --button_text: var(--button_text--hover, var(--bds-color_interactive_on-bg));
+    .bds270Button-button.bds270Button---default:hover {
+      --button_bg--variant: var(--button_bg--hover, var(--bds-color_bg));
+      --button_text--variant: var(--button_text--hover, var(--bds-color_interactive_on-bg));
+      --button_border--variant: var(--button_border--hover, currentcolor);
       --button_pulse-color: var(--button_pulse-color--hover, var(--bds-color_interactive_on-bg));
-      --bdc_color: currentcolor;
     }
   }
   @media (hover: hover) and (pointer: fine) {
-    .bds251Button-button.bds251Button---outline:hover,
-    .bds251Button-button.bds251Button---ghost:hover {
-      --button_bg: var(--button_bg--outline-hover, var(--button_color));
-      --button_text: var(--button_text--outline-hover, var(--button_on-color));
-      --bdc_color: transparent;
+    .bds270Button-button.bds270Button---outline:hover,
+    .bds270Button-button.bds270Button---ghost:hover {
+      --button_bg--variant: var(--button_bg--outline-hover, var(--button_color));
+      --button_text--variant: var(--button_text--outline-hover, var(--button_on-color));
+      --button_border--variant: var(--button_border--outline-hover, transparent);
     }
   }
 }
 
 /* src/components/interaction/Command/Command.module.css */
-@layer boostdev.bds251Command-component {
-  .bds251Command-dialog {
+@layer boostdev.bds270Command-component {
+  .bds270Command-dialog {
     padding: 0;
     border: none;
     border-radius: var(--bds-border_radius--m);
@@ -1378,11 +1377,11 @@
     overflow: visible;
     margin-block-start: 10vh;
   }
-  .bds251Command-dialog::backdrop {
+  .bds270Command-dialog::backdrop {
     background-color: var(--color_backdrop, rgb(0 0 0 / 50%));
     backdrop-filter: blur(3px);
   }
-  .bds251Command-palette {
+  .bds270Command-palette {
     display: flex;
     flex-direction: column;
     background-color: var(--command_color, var(--bds-color_bg));
@@ -1395,7 +1394,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));
   }
-  .bds251Command-searchRow {
+  .bds270Command-searchRow {
     display: flex;
     align-items: center;
     gap: var(--bds-space_xs);
@@ -1403,13 +1402,13 @@
     border-block-end: 1px solid currentcolor;
     flex-shrink: 0;
   }
-  .bds251Command-searchIcon {
+  .bds270Command-searchIcon {
     inline-size: 1.25rem;
     block-size: 1.25rem;
     color: var(--bds-color_on-bg);
     flex-shrink: 0;
   }
-  .bds251Command-search {
+  .bds270Command-search {
     flex: 1;
     border: none;
     outline: none;
@@ -1419,10 +1418,10 @@
     background: transparent;
     min-inline-size: 0;
   }
-  .bds251Command-search::placeholder {
+  .bds270Command-search::placeholder {
     color: var(--bds-color_on-bg);
   }
-  .bds251Command-escHint {
+  .bds270Command-escHint {
     font-size: var(--bds-font_size--body--s);
     color: var(--bds-color_on-bg);
     border-radius: var(--bds-border_radius--xs);
@@ -1432,18 +1431,18 @@
     border: none;
     box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color);
   }
-  .bds251Command-list {
+  .bds270Command-list {
     overflow-block: auto;
     list-style: none;
     margin: 0;
     padding: var(--bds-space_xs) 0;
   }
-  .bds251Command-groupList {
+  .bds270Command-groupList {
     list-style: none;
     margin: 0;
     padding: 0;
   }
-  .bds251Command-group {
+  .bds270Command-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);
@@ -1451,7 +1450,7 @@
     text-transform: uppercase;
     letter-spacing: 0.05em;
   }
-  .bds251Command-item {
+  .bds270Command-item {
     display: flex;
     align-items: center;
     gap: var(--bds-space_s);
@@ -1459,19 +1458,19 @@
     cursor: pointer;
     transition: background-color var(--bds-animation_transition-duration) var(--bds-animation_easing);
   }
-  .bds251Command-itemActive {
+  .bds270Command-itemActive {
     background-color: var(--command_item-bg--active, var(--bds-color_bg--subtle));
   }
-  .bds251Command-itemLabel {
+  .bds270Command-itemLabel {
     flex: 1;
     font-size: var(--bds-font_size--body);
     color: var(--bds-color_on-bg);
   }
-  .bds251Command-itemDesc {
+  .bds270Command-itemDesc {
     font-size: var(--bds-font_size--body--s);
     color: var(--bds-color_on-bg);
   }
-  .bds251Command-shortcut {
+  .bds270Command-shortcut {
     font-size: var(--bds-font_size--body--s);
     color: var(--bds-color_on-bg);
     border-radius: var(--bds-border_radius--xs);
@@ -1480,7 +1479,7 @@
     border: none;
     box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color);
   }
-  .bds251Command-empty {
+  .bds270Command-empty {
     padding: var(--bds-space_l) var(--bds-space_m);
     text-align: center;
     color: var(--bds-color_on-bg);
@@ -1489,8 +1488,8 @@
 }
 
 /* src/components/interaction/Dialog/Dialog.module.css */
-@layer boostdev.bds251Dialog-component {
-  .bds251Dialog-dialog {
+@layer boostdev.bds270Dialog-component {
+  .bds270Dialog-dialog {
     font-size: var(--bds-font_size--body--s);
     border: var(--dialog_border, none);
     --bdc_color: currentcolor;
@@ -1504,14 +1503,14 @@
     max-block-size: 90svh;
     overflow: visible;
   }
-  .bds251Dialog-dialogContent {
+  .bds270Dialog-dialogContent {
     display: grid;
     gap: var(--bds-grid_gap);
     overflow-block: auto;
     min-block-size: 0;
     flex: 1;
   }
-  .bds251Dialog-closeButton {
+  .bds270Dialog-closeButton {
     all: unset;
     position: absolute;
     inset-block-start: -1em;
@@ -1529,23 +1528,23 @@
     box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color);
     cursor: pointer;
   }
-  .bds251Dialog-closeButton:focus-visible {
+  .bds270Dialog-closeButton:focus-visible {
     outline: var(--bds-outline_default);
     outline-offset: var(--bds-outline_offset);
   }
-  .bds251Dialog-closeButton svg {
+  .bds270Dialog-closeButton svg {
     inline-size: 1.25em;
     block-size: 1.25em;
   }
-  .bds251Dialog-dialog::backdrop {
+  .bds270Dialog-dialog::backdrop {
     background-color: var(--color_backdrop, rgb(0 0 0 / 50%));
     backdrop-filter: blur(3px);
   }
 }
 
 /* src/components/interaction/Drawer/Drawer.module.css */
-@layer boostdev.bds251Drawer-component {
-  .bds251Drawer-drawer {
+@layer boostdev.bds270Drawer-component {
+  .bds270Drawer-drawer {
     position: fixed;
     inset-block: 0;
     inset-inline: auto 0;
@@ -1568,22 +1567,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;
   }
-  .bds251Drawer---side_left.bds251Drawer-drawer {
+  .bds270Drawer---side_left.bds270Drawer-drawer {
     inset-inline: 0 auto;
     translate: -100% 0;
   }
-  .bds251Drawer-drawer[open] {
+  .bds270Drawer-drawer[open] {
     translate: 0 0;
   }
   @starting-style {
-    .bds251Drawer-drawer[open] {
+    .bds270Drawer-drawer[open] {
       translate: 100% 0;
     }
-    .bds251Drawer---side_left.bds251Drawer-drawer[open] {
+    .bds270Drawer---side_left.bds270Drawer-drawer[open] {
       translate: -100% 0;
     }
   }
-  .bds251Drawer-drawer::backdrop {
+  .bds270Drawer-drawer::backdrop {
     background-color: var(--color_backdrop, rgb(0 0 0 / 50%));
     backdrop-filter: blur(3px);
     opacity: 0;
@@ -1592,15 +1591,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;
   }
-  .bds251Drawer-drawer[open]::backdrop {
+  .bds270Drawer-drawer[open]::backdrop {
     opacity: 1;
   }
   @starting-style {
-    .bds251Drawer-drawer[open]::backdrop {
+    .bds270Drawer-drawer[open]::backdrop {
       opacity: 0;
     }
   }
-  .bds251Drawer-header {
+  .bds270Drawer-header {
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -1608,7 +1607,7 @@
     border-block-end: 1px solid currentcolor;
     flex-shrink: 0;
   }
-  .bds251Drawer-closeButton {
+  .bds270Drawer-closeButton {
     all: unset;
     display: flex;
     align-items: center;
@@ -1619,20 +1618,20 @@
     cursor: pointer;
     transition: var(--bds-animation_transition);
   }
-  .bds251Drawer-closeButton svg {
+  .bds270Drawer-closeButton svg {
     inline-size: 1.25rem;
     block-size: 1.25rem;
   }
-  .bds251Drawer-closeButton:focus-visible {
+  .bds270Drawer-closeButton:focus-visible {
     outline: var(--bds-outline_default);
     outline-offset: var(--bds-outline_offset);
   }
   @media (hover: hover) and (pointer: fine) {
-    .bds251Drawer-closeButton:hover {
+    .bds270Drawer-closeButton:hover {
       background-color: var(--drawer_close-bg--hover, var(--bds-color_bg--subtle));
     }
   }
-  .bds251Drawer-body {
+  .bds270Drawer-body {
     flex: 1;
     overflow-block: auto;
     padding: var(--bds-space_l);
@@ -1640,20 +1639,20 @@
     flex-direction: column;
   }
   @media (prefers-reduced-motion: reduce) {
-    .bds251Drawer-drawer,
-    .bds251Drawer-drawer::backdrop {
+    .bds270Drawer-drawer,
+    .bds270Drawer-drawer::backdrop {
       transition: none;
     }
   }
 }
 
 /* src/components/interaction/DropdownMenu/DropdownMenu.module.css */
-@layer boostdev.bds251DropdownMenu-component {
-  .bds251DropdownMenu-wrapper {
+@layer boostdev.bds270DropdownMenu-component {
+  .bds270DropdownMenu-wrapper {
     position: relative;
     display: inline-flex;
   }
-  .bds251DropdownMenu-menu {
+  .bds270DropdownMenu-menu {
     position: absolute;
     inset-block-start: calc(100% + var(--bds-space_xxs));
     z-index: var(--bds-z-index_dropdown);
@@ -1669,22 +1668,22 @@
     list-style: none;
     margin: 0;
   }
-  .bds251DropdownMenu-menu li {
+  .bds270DropdownMenu-menu li {
     list-style: none;
   }
-  .bds251DropdownMenu---placement_bottom-start {
+  .bds270DropdownMenu---placement_bottom-start {
     inset-inline-start: 0;
   }
-  .bds251DropdownMenu---placement_bottom-end {
+  .bds270DropdownMenu---placement_bottom-end {
     inset-inline-end: 0;
   }
-  .bds251DropdownMenu-separator {
+  .bds270DropdownMenu-separator {
     border: none;
     border-block-start: 1px solid currentcolor;
     margin: var(--bds-space_xxs) 0;
     opacity: 0.15;
   }
-  .bds251DropdownMenu-item {
+  .bds270DropdownMenu-item {
     all: unset;
     display: flex;
     align-items: center;
@@ -1698,22 +1697,22 @@
     box-sizing: border-box;
     transition: var(--bds-animation_transition);
   }
-  .bds251DropdownMenu-item:disabled {
+  .bds270DropdownMenu-item:disabled {
     opacity: 0.4;
     cursor: not-allowed;
   }
-  .bds251DropdownMenu-item:focus-visible {
+  .bds270DropdownMenu-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) {
-    .bds251DropdownMenu-item:not(:disabled):hover {
+    .bds270DropdownMenu-item:not(:disabled):hover {
       background-color: var(--dropdown_item-bg--hover, var(--bds-color_bg--subtle));
       color: var(--dropdown_item-color--hover, var(--bds-color_interactive_on-bg));
     }
   }
-  .bds251DropdownMenu-icon {
+  .bds270DropdownMenu-icon {
     display: flex;
     align-items: center;
     flex-shrink: 0;
@@ -1721,11 +1720,11 @@
 }
 
 /* src/components/interaction/Popover/Popover.module.css */
-@layer boostdev.bds251Popover-component {
-  .bds251Popover-wrapper {
+@layer boostdev.bds270Popover-component {
+  .bds270Popover-wrapper {
     display: inline-flex;
   }
-  .bds251Popover-panel {
+  .bds270Popover-panel {
     position: fixed;
     inset: unset;
     margin: 0;
@@ -1744,7 +1743,7 @@
     color: var(--popover_on-color, var(--bds-color_on-bg));
     font-size: var(--bds-font_size--body);
   }
-  .bds251Popover-panel[data-placement=bottom] {
+  .bds270Popover-panel[data-placement=bottom] {
     top: anchor(bottom);
     left: anchor(left);
     margin-block-start: var(--bds-space_xs, 8px);
@@ -1753,7 +1752,7 @@
       --popover-right,
       --popover-left;
   }
-  .bds251Popover-panel[data-placement=top] {
+  .bds270Popover-panel[data-placement=top] {
     bottom: anchor(top);
     left: anchor(left);
     margin-block-end: var(--bds-space_xs, 8px);
@@ -1762,7 +1761,7 @@
       --popover-right,
       --popover-left;
   }
-  .bds251Popover-panel[data-placement=right] {
+  .bds270Popover-panel[data-placement=right] {
     top: anchor(top);
     left: anchor(right);
     margin-inline-start: var(--bds-space_xs, 8px);
@@ -1771,7 +1770,7 @@
       --popover-bottom,
       --popover-top;
   }
-  .bds251Popover-panel[data-placement=left] {
+  .bds270Popover-panel[data-placement=left] {
     top: anchor(top);
     right: anchor(left);
     margin-inline-end: var(--bds-space_xs, 8px);
@@ -1829,10 +1828,10 @@
     margin-block-end: var(--bds-space_xs, 8px);
   }
   @media (width <= 420px) {
-    .bds251Popover-panel[data-placement=bottom],
-    .bds251Popover-panel[data-placement=top],
-    .bds251Popover-panel[data-placement=left],
-    .bds251Popover-panel[data-placement=right] {
+    .bds270Popover-panel[data-placement=bottom],
+    .bds270Popover-panel[data-placement=top],
+    .bds270Popover-panel[data-placement=left],
+    .bds270Popover-panel[data-placement=right] {
       left: var(--bds-space_xs, 8px);
       right: var(--bds-space_xs, 8px);
       inline-size: 100%;
@@ -1841,13 +1840,13 @@
     }
   }
   @media (aspect-ratio >= 2/1) {
-    .bds251Popover-panel[data-placement=bottom] {
+    .bds270Popover-panel[data-placement=bottom] {
       position-try-fallbacks:
         --popover-top,
         --popover-right,
         --popover-left;
     }
-    .bds251Popover-panel[data-placement=top] {
+    .bds270Popover-panel[data-placement=top] {
       position-try-fallbacks:
         --popover-bottom,
         --popover-right,
@@ -1857,24 +1856,24 @@
 }
 
 /* src/components/interaction/Rating/Rating.module.css */
-@layer boostdev.bds251Rating-component {
-  .bds251Rating-rating {
+@layer boostdev.bds270Rating-component {
+  .bds270Rating-rating {
     display: inline-flex;
     gap: var(--bds-space_xxxs);
     color: var(--rating_color, var(--bds-color_bg));
   }
-  .bds251Rating-star {
+  .bds270Rating-star {
     width: 1.5em;
     height: 1.5em;
   }
-  .bds251Rating---filled {
+  .bds270Rating---filled {
     color: var(--rating_color--filled, var(--bds-color_warning));
   }
 }
 
 /* src/components/interaction/Toast/Toast.module.css */
-@layer boostdev.bds251Toast-component {
-  .bds251Toast-toastContainer {
+@layer boostdev.bds270Toast-component {
+  .bds270Toast-toastContainer {
     position: fixed;
     inset: unset;
     inset-block-end: var(--bds-space_xl);
@@ -1886,10 +1885,10 @@
     padding: 0;
     background: transparent;
   }
-  .bds251Toast-toast {
+  .bds270Toast-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));
+    background-color: var(--toast_color, var(--toast_color--variant, var(--bds-color_bg)));
+    color: var(--toast_on-color, var(--toast_on-color--variant, var(--bds-color_on-bg)));
     border-radius: var(--bds-border_radius--s);
     box-shadow: var(--bds-shadow_s);
     display: flex;
@@ -1898,26 +1897,26 @@
     min-inline-size: 300px;
     animation: slideIn var(--bds-animation_duration--fast) var(--bds-animation_easing);
   }
-  .bds251Toast-toast.bds251Toast---variant_success {
-    --toast_color: var(--bds-color_success);
-    --toast_on-color: var(--bds-color_on-success);
+  .bds270Toast-toast.bds270Toast---variant_success {
+    --toast_color--variant: var(--toast_color--success, var(--bds-color_success));
+    --toast_on-color--variant: var(--toast_on-color--success, var(--bds-color_on-success));
   }
-  .bds251Toast-toast.bds251Toast---variant_warning {
-    --toast_color: var(--bds-color_warning);
-    --toast_on-color: var(--bds-color_on-warning);
+  .bds270Toast-toast.bds270Toast---variant_warning {
+    --toast_color--variant: var(--toast_color--warning, var(--bds-color_warning));
+    --toast_on-color--variant: var(--toast_on-color--warning, var(--bds-color_on-warning));
   }
-  .bds251Toast-toast.bds251Toast---variant_info {
-    --toast_color: var(--bds-color_bg--subtle);
-    --toast_on-color: var(--bds-color_on-bg--subtle);
+  .bds270Toast-toast.bds270Toast---variant_info {
+    --toast_color--variant: var(--toast_color--info, var(--bds-color_bg--subtle));
+    --toast_on-color--variant: var(--toast_on-color--info, var(--bds-color_on-bg--subtle));
   }
-  .bds251Toast-toast.bds251Toast---variant_error {
-    --toast_color: var(--bds-color_error);
-    --toast_on-color: var(--bds-color_on-error);
+  .bds270Toast-toast.bds270Toast---variant_error {
+    --toast_color--variant: var(--toast_color--error, var(--bds-color_error));
+    --toast_on-color--variant: var(--toast_on-color--error, var(--bds-color_on-error));
   }
-  .bds251Toast-message {
+  .bds270Toast-message {
     flex: 1;
   }
-  .bds251Toast-closeButton {
+  .bds270Toast-closeButton {
     display: flex;
     align-items: center;
     justify-content: center;
@@ -1930,7 +1929,7 @@
     cursor: pointer;
     color: var(--toast_on-color);
   }
-  .bds251Toast-closeButton svg {
+  .bds270Toast-closeButton svg {
     inline-size: 1rem;
     block-size: 1rem;
   }
@@ -1947,18 +1946,18 @@
 }
 
 /* src/components/interaction/form/Checkbox/Checkbox.module.css */
-@layer boostdev.bds251Checkbox-component {
-  .bds251Checkbox-checkboxGroup {
+@layer boostdev.bds270Checkbox-component {
+  .bds270Checkbox-checkboxGroup {
     --inputSize: calc(var(--bds-space_s) * 2);
     display: flex;
     flex-direction: column;
   }
-  .bds251Checkbox-inputWrapper {
+  .bds270Checkbox-inputWrapper {
     display: flex;
     align-items: stretch;
     gap: var(--bds-space_xs);
   }
-  .bds251Checkbox-checkbox {
+  .bds270Checkbox-checkbox {
     margin-block-start: 0.25em;
     inline-size: var(--inputSize);
     block-size: var(--inputSize);
@@ -1974,11 +1973,11 @@
     position: relative;
     transition: --bdc_color 0.3s ease, background-color 0.3s ease;
   }
-  .bds251Checkbox-checkbox:checked {
+  .bds270Checkbox-checkbox:checked {
     background-color: var(--checkbox_color-active, var(--bdc-color_active));
     --bdc_color: var(--checkbox_color-active, var(--bdc-color_active));
   }
-  .bds251Checkbox-checkbox:checked::after {
+  .bds270Checkbox-checkbox:checked::after {
     content: "";
     position: absolute;
     inset-inline-start: 0.6em;
@@ -1989,33 +1988,36 @@
     border-width: 0 2px 2px 0;
     transform: rotate(45deg);
   }
-  .bds251Checkbox-checkbox:focus {
+  .bds270Checkbox-checkbox:focus {
     --bdc_color: var(--bdc_color--focus);
   }
-  .bds251Checkbox-checkbox:focus-visible {
+  .bds270Checkbox-checkbox:focus-visible {
     outline: var(--bds-outline_default);
     outline-offset: var(--bds-outline_offset);
   }
-  .bds251Checkbox-checkboxError {
+  .bds270Checkbox-checkboxError {
     --bdc_color: var(--bdc_color--error);
   }
 }
 
 /* src/components/interaction/form/atoms/Message.module.css */
-@layer boostdev.bds251Message-component {
-  .bds251Message-error,
-  .bds251Message-hint {
+@layer boostdev.bds270Message-component {
+  .bds270Message-error,
+  .bds270Message-hint {
     font-size: var(--bds-font_size--body--s);
     margin-inline-start: var(--labelPosition);
   }
-  .bds251Message-error {
+  .bds270Message-error {
     color: var(--bds-color_error_on-bg);
   }
+  .bds270Message-hint {
+    font-style: italic;
+  }
 }
 
 /* src/components/interaction/form/atoms/Label.module.css */
-@layer boostdev.bds251Label-component {
-  .bds251Label-label {
+@layer boostdev.bds270Label-component {
+  .bds270Label-label {
     display: flex;
     align-items: center;
     font-family: var(--bds-font_family--body);
@@ -2025,8 +2027,8 @@
 }
 
 /* src/components/interaction/form/atoms/InputContainer.module.css */
-@layer boostdev.bds251InputContainer-component {
-  .bds251InputContainer-container {
+@layer boostdev.bds270InputContainer-component {
+  .bds270InputContainer-container {
     --labelPosition: calc(var(--inputSize) + var(--bds-space_m));
     display: flex;
     flex-direction: column;
@@ -2035,8 +2037,8 @@
 }
 
 /* src/components/interaction/form/CheckboxGroup/CheckboxGroup.module.css */
-@layer boostdev.bds251CheckboxGroup-component {
-  .bds251CheckboxGroup-group {
+@layer boostdev.bds270CheckboxGroup-component {
+  .bds270CheckboxGroup-group {
     border: none;
     padding: 0;
     margin: 0;
@@ -2044,7 +2046,7 @@
     flex-direction: column;
     gap: var(--bds-space_xs);
   }
-  .bds251CheckboxGroup-legend {
+  .bds270CheckboxGroup-legend {
     font-family: var(--bds-font_family--body);
     font-size: var(--bds-font_size--body--s);
     font-weight: var(--bds-font_weight--medium);
@@ -2052,10 +2054,10 @@
     padding: 0;
     margin-block-end: var(--bds-space_xs);
   }
-  .bds251CheckboxGroup-required {
+  .bds270CheckboxGroup-required {
     color: var(--bds-color_error);
   }
-  .bds251CheckboxGroup-items {
+  .bds270CheckboxGroup-items {
     display: flex;
     flex-direction: column;
     gap: var(--bds-space_xs);
@@ -2063,17 +2065,17 @@
 }
 
 /* src/components/interaction/form/Combobox/Combobox.module.css */
-@layer boostdev.bds251Combobox-component {
-  .bds251Combobox-formGroup {
+@layer boostdev.bds270Combobox-component {
+  .bds270Combobox-formGroup {
     display: flex;
     flex-direction: column;
   }
-  .bds251Combobox-inputWrapper {
+  .bds270Combobox-inputWrapper {
     position: relative;
     display: flex;
     align-items: center;
   }
-  .bds251Combobox-input {
+  .bds270Combobox-input {
     appearance: none;
     inline-size: 100%;
     font-family: var(--bds-font_family--body);
@@ -2089,21 +2091,21 @@
     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);
   }
-  .bds251Combobox-input:focus {
+  .bds270Combobox-input:focus {
     --bdc_color: var(--bdc_color--focus);
   }
-  .bds251Combobox-input:focus-visible {
+  .bds270Combobox-input:focus-visible {
     outline: var(--bds-outline_default);
     outline-offset: var(--bds-outline_offset);
   }
-  .bds251Combobox-input:disabled {
+  .bds270Combobox-input:disabled {
     opacity: 0.5;
     cursor: not-allowed;
   }
-  .bds251Combobox-inputError {
+  .bds270Combobox-inputError {
     --bdc_color: var(--bdc_color--error);
   }
-  .bds251Combobox-chevron {
+  .bds270Combobox-chevron {
     position: absolute;
     inset-inline-end: var(--bds-space_s);
     display: flex;
@@ -2111,11 +2113,11 @@
     pointer-events: none;
     color: var(--combobox_color, var(--bds-color_on-bg));
   }
-  .bds251Combobox-chevron svg {
+  .bds270Combobox-chevron svg {
     inline-size: 1rem;
     block-size: 1rem;
   }
-  .bds251Combobox-listbox {
+  .bds270Combobox-listbox {
     position: absolute;
     inset-block-start: calc(100% + var(--bds-space_xxs));
     inset-inline: 0;
@@ -2133,7 +2135,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));
   }
-  .bds251Combobox-option {
+  .bds270Combobox-option {
     display: flex;
     align-items: center;
     padding: var(--bds-space_xs) var(--bds-space_m);
@@ -2142,33 +2144,78 @@
     cursor: pointer;
     transition: var(--bds-animation_transition);
   }
-  .bds251Combobox-option.bds251Combobox---highlighted {
+  .bds270Combobox-option.bds270Combobox---highlighted {
     background-color: var(--combobox_option-bg--highlighted, var(--bds-color_bg--subtle));
     color: var(--combobox_option-color--highlighted, var(--bds-color_interactive_on-bg));
   }
-  .bds251Combobox-option.bds251Combobox---selected {
+  .bds270Combobox-option.bds270Combobox---selected {
     font-weight: var(--bds-font_weight--semibold);
   }
-  .bds251Combobox-option.bds251Combobox---disabled {
+  .bds270Combobox-option.bds270Combobox---disabled {
     opacity: 0.4;
     cursor: not-allowed;
   }
 }
 
+/* src/components/interaction/form/FieldGroup/FieldGroup.module.css */
+@layer boostdev.bds270FieldGroup-component {
+  .bds270FieldGroup-fieldGroup {
+    border: 0;
+    margin: 0;
+    padding: 0;
+    min-inline-size: 0;
+    container-type: inline-size;
+    container-name: field-group;
+    --fieldGroup_collapse-threshold: calc( var(--fieldGroup_field-count, 1) * var(--fieldGroup_min-field-width, 12rem) + (var(--fieldGroup_field-count, 1) - 1) * var(--fieldGroup_gap, var(--bds-space_m)) );
+  }
+  .bds270FieldGroup-legend {
+    inline-size: 100%;
+    padding-inline: 0;
+    padding-block: var(--fieldGroup_legend-padding-block, var(--bds-space_xs));
+    margin-block-end: var(--fieldGroup_legend-gap, var(--bds-space_m));
+    border-block-end: var(--fieldGroup_legend-border-block-end, 1px solid var(--bds-color_bg--subtle));
+    color: var(--fieldGroup_legend-color, var(--bds-color_on-bg));
+    font-family: var(--bds-font_family--body);
+    font-size: var(--fieldGroup_legend-font-size, var(--bds-font_size--heading-3));
+    font-weight: var(--fieldGroup_legend-font-weight, var(--bds-font_weight--semibold));
+    line-height: var(--fieldGroup_legend-line-height, var(--bds-font_line-height--heading));
+  }
+  .bds270FieldGroup-fields {
+    display: flex;
+    flex-direction: column;
+    gap: var(--fieldGroup_gap, var(--bds-space_m));
+  }
+  .bds270FieldGroup-fieldGroup.bds270FieldGroup---variant_horizontal .bds270FieldGroup-fields {
+    flex-flow: row wrap;
+  }
+  .bds270FieldGroup-fieldGroup.bds270FieldGroup---variant_horizontal .bds270FieldGroup-fields > * {
+    flex: 1 1 var(--fieldGroup_min-field-width, 12rem);
+    min-inline-size: 0;
+  }
+  @container field-group (max-inline-size: var(--fieldGroup_collapse-threshold)) {
+    .bds270FieldGroup-fieldGroup.bds270FieldGroup---variant_horizontal .bds270FieldGroup-fields {
+      flex-direction: column;
+    }
+    .bds270FieldGroup-fieldGroup.bds270FieldGroup---variant_horizontal .bds270FieldGroup-fields > * {
+      flex: 1 1 auto;
+    }
+  }
+}
+
 /* src/components/interaction/form/FileInput/FileInput.module.css */
-@layer boostdev.bds251FileInput-component {
-  .bds251FileInput-formGroup {
+@layer boostdev.bds270FileInput-component {
+  .bds270FileInput-formGroup {
     display: flex;
     flex-direction: column;
   }
-  .bds251FileInput-fieldLabel {
+  .bds270FileInput-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);
   }
-  .bds251FileInput-dropZone {
+  .bds270FileInput-dropZone {
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -2182,40 +2229,40 @@
     text-align: center;
     transition: var(--bds-animation_transition);
   }
-  .bds251FileInput-dropZone:focus-within {
+  .bds270FileInput-dropZone:focus-within {
     outline: var(--bds-outline_default);
     outline-offset: var(--bds-outline_offset);
     border-color: var(--fileInput_border-color, currentcolor);
   }
-  .bds251FileInput-isDragging {
+  .bds270FileInput-isDragging {
     border-color: currentcolor;
     background-color: rgb(from currentcolor r g b / 8%);
   }
-  .bds251FileInput-hasError {
+  .bds270FileInput-hasError {
     border-color: var(--bds-color_error);
   }
-  .bds251FileInput-isDisabled {
+  .bds270FileInput-isDisabled {
     opacity: 0.5;
     cursor: not-allowed;
   }
-  .bds251FileInput-icon {
+  .bds270FileInput-icon {
     inline-size: 2rem;
     block-size: 2rem;
     flex-shrink: 0;
   }
-  .bds251FileInput-prompt {
+  .bds270FileInput-prompt {
     font-size: var(--bds-font_size--body);
     color: var(--bds-color_on-bg);
   }
-  .bds251FileInput-prompt strong {
+  .bds270FileInput-prompt strong {
     color: var(--bds-color_interactive_on-bg);
     font-weight: var(--bds-font_weight--semibold);
   }
-  .bds251FileInput-acceptHint {
+  .bds270FileInput-acceptHint {
     font-size: var(--bds-font_size--body--s);
     color: var(--bds-color_on-bg);
   }
-  .bds251FileInput-hiddenInput {
+  .bds270FileInput-hiddenInput {
     position: absolute;
     inline-size: 1px;
     block-size: 1px;
@@ -2225,7 +2272,7 @@
     border: 0;
   }
   @media (hover: hover) and (pointer: fine) {
-    .bds251FileInput-dropZone:not(.bds251FileInput-isDisabled):hover {
+    .bds270FileInput-dropZone:not(.bds270FileInput-isDisabled):hover {
       border-color: var(--fileInput_border-color--hover, var(--bds-color_interactive));
       background-color: var(--fileInput_bg--hover, rgb(from var(--bds-color_interactive) r g b / 4%));
     }
@@ -2233,13 +2280,13 @@
 }
 
 /* src/components/interaction/form/FormInput/FormInput.module.css */
-@layer boostdev.bds251FormInput-component {
-  .bds251FormInput-formGroup {
+@layer boostdev.bds270FormInput-component {
+  .bds270FormInput-formGroup {
     --labelPosition: 0;
     display: flex;
     flex-direction: column;
   }
-  .bds251FormInput-input {
+  .bds270FormInput-input {
     font-family: var(--bds-font_family--body);
     font-size: var(--bds-font_size--body);
     padding: var(--bds-space_s);
@@ -2252,25 +2299,25 @@
     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);
   }
-  .bds251FormInput-input:focus {
+  .bds270FormInput-input:focus {
     --bdc_color: var(--bdc_color--focus);
   }
-  .bds251FormInput-input:focus-visible {
+  .bds270FormInput-input:focus-visible {
     outline: var(--bds-outline_default);
     outline-offset: var(--bds-outline_offset);
   }
-  .bds251FormInput-inputError {
+  .bds270FormInput-inputError {
     --bdc_color: var(--bdc_color--error);
   }
 }
 
 /* src/components/interaction/form/NumberInput/NumberInput.module.css */
-@layer boostdev.bds251NumberInput-component {
-  .bds251NumberInput-formGroup {
+@layer boostdev.bds270NumberInput-component {
+  .bds270NumberInput-formGroup {
     display: flex;
     flex-direction: column;
   }
-  .bds251NumberInput-inputRow {
+  .bds270NumberInput-inputRow {
     display: flex;
     align-items: stretch;
     border: var(--numberInput_border, none);
@@ -2282,14 +2329,14 @@
     overflow: hidden;
     transition: --bdc_color var(--bds-animation_transition-duration) var(--bds-animation_easing);
   }
-  .bds251NumberInput-inputRow:focus-within {
+  .bds270NumberInput-inputRow:focus-within {
     --bdc_color: var(--bdc_color--focus);
   }
-  .bds251NumberInput-inputRow:focus-within:has(:focus-visible) {
+  .bds270NumberInput-inputRow:focus-within:has(:focus-visible) {
     outline: var(--bds-outline_default);
     outline-offset: var(--bds-outline_offset);
   }
-  .bds251NumberInput-input {
+  .bds270NumberInput-input {
     flex: 1;
     border: none;
     outline: none;
@@ -2302,14 +2349,14 @@
     min-inline-size: 0;
     appearance: textfield;
   }
-  .bds251NumberInput-input::-webkit-inner-spin-button,
-  .bds251NumberInput-input::-webkit-outer-spin-button {
+  .bds270NumberInput-input::-webkit-inner-spin-button,
+  .bds270NumberInput-input::-webkit-outer-spin-button {
     appearance: none;
   }
-  .bds251NumberInput-inputError {
+  .bds270NumberInput-inputError {
     --bdc_color: var(--bdc_color--error);
   }
-  .bds251NumberInput-stepper {
+  .bds270NumberInput-stepper {
     all: unset;
     display: flex;
     align-items: center;
@@ -2322,25 +2369,25 @@
     transition: var(--bds-animation_transition);
     flex-shrink: 0;
   }
-  .bds251NumberInput-stepper svg {
+  .bds270NumberInput-stepper svg {
     width: 1rem;
     height: 1rem;
     color: var(--numberInput_stepper-color, var(--bds-color_interactive));
   }
-  .bds251NumberInput-stepper:first-child {
+  .bds270NumberInput-stepper:first-child {
     border-start-start-radius: var(--_radius);
     border-end-start-radius: var(--_radius);
   }
-  .bds251NumberInput-stepper:last-child {
+  .bds270NumberInput-stepper:last-child {
     border-start-end-radius: var(--_radius);
     border-end-end-radius: var(--_radius);
   }
-  .bds251NumberInput-stepper:disabled {
+  .bds270NumberInput-stepper:disabled {
     opacity: 0.4;
     cursor: not-allowed;
   }
   @media (hover: hover) and (pointer: fine) {
-    .bds251NumberInput-stepper:not(:disabled):hover {
+    .bds270NumberInput-stepper:not(:disabled):hover {
       background-color: var(--numberInput_stepper-bg--hover, var(--bds-color_bg--subtle));
       opacity: var(--numberInput_stepper-opacity--hover, 0.7);
     }
@@ -2348,30 +2395,30 @@
 }
 
 /* src/components/interaction/form/Radio/Radio.module.css */
-@layer boostdev.bds251Radio-component {
-  .bds251Radio-radioGroup {
+@layer boostdev.bds270Radio-component {
+  .bds270Radio-radioGroup {
     --inputSize: calc(var(--bds-space_s) * 2);
     --labelPosition: calc(var(--inputSize) + var(--bds-space_m));
     display: flex;
     flex-direction: column;
   }
-  .bds251Radio-inputWrapper {
+  .bds270Radio-inputWrapper {
     display: flex;
     align-items: flex-start;
     gap: var(--bds-space_xs);
   }
-  .bds251Radio-textWrapper {
+  .bds270Radio-textWrapper {
     display: flex;
     flex-direction: column;
     gap: var(--bds-space_xxxs);
     padding-block-start: var(--bds-space_xxxs);
   }
-  .bds251Radio-description {
+  .bds270Radio-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);
   }
-  .bds251Radio-radio {
+  .bds270Radio-radio {
     flex-shrink: 0;
     margin-block-start: 0.2em;
     inline-size: var(--inputSize);
@@ -2388,7 +2435,7 @@
     position: relative;
     transition: --bdc_color 0.2s ease, background-color 0.2s ease;
   }
-  .bds251Radio-radio:checked {
+  .bds270Radio-radio:checked {
     background:
       radial-gradient(
         circle,
@@ -2396,21 +2443,21 @@
         var(--radio_color_bg, var(--bds-color_bg)) 42%);
     --bdc_color: var(--radio_color-active, var(--bdc-color_active));
   }
-  .bds251Radio-radio:focus {
+  .bds270Radio-radio:focus {
     --bdc_color: var(--bdc_color--focus);
   }
-  .bds251Radio-radio:focus-visible {
+  .bds270Radio-radio:focus-visible {
     outline: var(--bds-outline_default);
     outline-offset: var(--bds-outline_offset);
   }
-  .bds251Radio-radioError {
+  .bds270Radio-radioError {
     --bdc_color: var(--bdc_color--error);
   }
 }
 
 /* src/components/interaction/form/RadioGroup/RadioGroup.module.css */
-@layer boostdev.bds251RadioGroup-component {
-  .bds251RadioGroup-group {
+@layer boostdev.bds270RadioGroup-component {
+  .bds270RadioGroup-group {
     border: none;
     padding: 0;
     margin: 0;
@@ -2418,7 +2465,7 @@
     flex-direction: column;
     gap: var(--bds-space_xs);
   }
-  .bds251RadioGroup-legend {
+  .bds270RadioGroup-legend {
     font-family: var(--bds-font_family--body);
     font-size: var(--bds-font_size--body--s);
     font-weight: var(--bds-font_weight--medium);
@@ -2426,10 +2473,10 @@
     padding: 0;
     margin-block-end: var(--bds-space_xs);
   }
-  .bds251RadioGroup-required {
+  .bds270RadioGroup-required {
     color: var(--bds-color_error);
   }
-  .bds251RadioGroup-items {
+  .bds270RadioGroup-items {
     display: flex;
     flex-direction: column;
     gap: var(--bds-space_xs);
@@ -2437,8 +2484,8 @@
 }
 
 /* src/components/interaction/form/SegmentedControl/SegmentedControl.module.css */
-@layer boostdev.bds251SegmentedControl-component {
-  .bds251SegmentedControl-control {
+@layer boostdev.bds270SegmentedControl-component {
+  .bds270SegmentedControl-control {
     position: relative;
     display: inline-grid;
     grid-auto-flow: column;
@@ -2448,7 +2495,7 @@
     border-radius: var(--control_radius, var(--bds-border_radius--full));
     gap: 0;
   }
-  .bds251SegmentedControl-thumb {
+  .bds270SegmentedControl-thumb {
     position: absolute;
     inset-block: var(--bds-space_xxxs);
     inset-inline-start: var(--bds-space_xxxs);
@@ -2460,7 +2507,7 @@
     transform: translateX(calc(var(--control_selected-index, 0) * 100%));
     transition: transform var(--bds-animation_transition-duration) var(--bds-animation_easing);
   }
-  .bds251SegmentedControl-indicator {
+  .bds270SegmentedControl-indicator {
     position: absolute;
     inset-block: var(--bds-space_xxxs);
     inset-inline-start: var(--bds-space_xxxs);
@@ -2472,7 +2519,7 @@
     transform: translateX(calc(var(--control_selected-index, 0) * 100%));
     transition: transform var(--bds-animation_transition-duration) var(--bds-animation_easing);
   }
-  .bds251SegmentedControl-item {
+  .bds270SegmentedControl-item {
     position: relative;
     z-index: 1;
     display: flex;
@@ -2493,69 +2540,69 @@
     border: none;
     outline: none;
   }
-  .bds251SegmentedControl-item:focus-visible {
+  .bds270SegmentedControl-item:focus-visible {
     outline: var(--bds-outline_default);
     outline-offset: calc(var(--bds-outline_offset) * -1);
     border-radius: var(--control_thumb-radius, var(--bds-border_radius--full));
   }
-  .bds251SegmentedControl-item.bds251SegmentedControl---active {
+  .bds270SegmentedControl-item.bds270SegmentedControl---active {
     color: var(--control_label-color--active, var(--bds-color_on-interactive));
   }
-  .bds251SegmentedControl-item.bds251SegmentedControl---disabled {
+  .bds270SegmentedControl-item.bds270SegmentedControl---disabled {
     opacity: 0.5;
     cursor: not-allowed;
     pointer-events: none;
   }
-  .bds251SegmentedControl-control.bds251SegmentedControl---size_small .bds251SegmentedControl-item {
+  .bds270SegmentedControl-control.bds270SegmentedControl---size_small .bds270SegmentedControl-item {
     padding: var(--bds-space_xxs) var(--bds-space_s);
     font-size: var(--bds-font_size--body--s);
   }
-  .bds251SegmentedControl-control.bds251SegmentedControl---size_large .bds251SegmentedControl-item {
+  .bds270SegmentedControl-control.bds270SegmentedControl---size_large .bds270SegmentedControl-item {
     padding: var(--bds-space_s) var(--bds-space_m);
     white-space: normal;
     text-align: center;
   }
-  .bds251SegmentedControl-control.bds251SegmentedControl---variant_outline {
+  .bds270SegmentedControl-control.bds270SegmentedControl---variant_outline {
     --control_label-color--active: var(--bds-color_interactive);
   }
-  .bds251SegmentedControl-control.bds251SegmentedControl---variant_outline .bds251SegmentedControl-thumb {
+  .bds270SegmentedControl-control.bds270SegmentedControl---variant_outline .bds270SegmentedControl-thumb {
     display: none;
   }
-  .bds251SegmentedControl-control.bds251SegmentedControl---variant_outline .bds251SegmentedControl-item {
+  .bds270SegmentedControl-control.bds270SegmentedControl---variant_outline .bds270SegmentedControl-item {
     background-color: var(--control_item-bg, transparent);
   }
-  .bds251SegmentedControl-control.bds251SegmentedControl---variant_outline .bds251SegmentedControl-item.bds251SegmentedControl---active {
+  .bds270SegmentedControl-control.bds270SegmentedControl---variant_outline .bds270SegmentedControl-item.bds270SegmentedControl---active {
     background-color: var(--control_item-bg--active, var(--bds-color_bg));
   }
-  .bds251SegmentedControl-control.bds251SegmentedControl---variant_outline .bds251SegmentedControl-indicator {
+  .bds270SegmentedControl-control.bds270SegmentedControl---variant_outline .bds270SegmentedControl-indicator {
     display: block;
     box-shadow: inset 0 0 0 2px var(--control_indicator-color, var(--bds-color_interactive));
   }
   @media (hover: hover) and (pointer: fine) {
-    .bds251SegmentedControl-item:not(.bds251SegmentedControl---active, .bds251SegmentedControl---disabled):hover {
+    .bds270SegmentedControl-item:not(.bds270SegmentedControl---active, .bds270SegmentedControl---disabled):hover {
       color: var(--control_label-color--hover, var(--bds-color_on-bg));
     }
   }
   @media (prefers-reduced-motion: reduce) {
-    .bds251SegmentedControl-thumb,
-    .bds251SegmentedControl-indicator {
+    .bds270SegmentedControl-thumb,
+    .bds270SegmentedControl-indicator {
       transition: none;
     }
   }
 }
 
 /* src/components/interaction/form/Select/Select.module.css */
-@layer boostdev.bds251Select-component {
-  .bds251Select-formGroup {
+@layer boostdev.bds270Select-component {
+  .bds270Select-formGroup {
     display: flex;
     flex-direction: column;
   }
-  .bds251Select-selectWrapper {
+  .bds270Select-selectWrapper {
     position: relative;
     display: flex;
     align-items: center;
   }
-  .bds251Select-select {
+  .bds270Select-select {
     appearance: none;
     inline-size: 100%;
     font-family: var(--bds-font_family--body);
@@ -2572,21 +2619,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);
   }
-  .bds251Select-select:focus {
+  .bds270Select-select:focus {
     --bdc_color: var(--bdc_color--focus);
   }
-  .bds251Select-select:focus-visible {
+  .bds270Select-select:focus-visible {
     outline: var(--bds-outline_default);
     outline-offset: var(--bds-outline_offset);
   }
-  .bds251Select-select:disabled {
+  .bds270Select-select:disabled {
     opacity: 0.5;
     cursor: not-allowed;
   }
-  .bds251Select-selectError {
+  .bds270Select-selectError {
     --bdc_color: var(--bdc_color--error);
   }
-  .bds251Select-chevron {
+  .bds270Select-chevron {
     position: absolute;
     inset-inline-end: var(--bds-space_s);
     display: flex;
@@ -2594,30 +2641,30 @@
     pointer-events: none;
     color: var(--select_chevron-color, var(--bds-color_interactive));
   }
-  .bds251Select-chevron svg {
+  .bds270Select-chevron svg {
     inline-size: 1rem;
     block-size: 1rem;
   }
 }
 
 /* src/components/interaction/form/Slider/Slider.module.css */
-@layer boostdev.bds251Slider-component {
-  .bds251Slider-formGroup {
+@layer boostdev.bds270Slider-component {
+  .bds270Slider-formGroup {
     display: flex;
     flex-direction: column;
     gap: var(--bds-space_xxs);
   }
-  .bds251Slider-labelRow {
+  .bds270Slider-labelRow {
     display: flex;
     justify-content: space-between;
     align-items: baseline;
   }
-  .bds251Slider-value {
+  .bds270Slider-value {
     font-size: var(--bds-font_size--body--s);
     font-variant-numeric: tabular-nums;
     color: var(--bds-color_on-bg--subtle);
   }
-  .bds251Slider-slider {
+  .bds270Slider-slider {
     --slider_fill: 0%;
     --slider_track-height: var(--bds-space_xxs);
     --slider_thumb-size: calc(var(--bds-space_s) * 2);
@@ -2636,16 +2683,16 @@
     cursor: pointer;
     transition: var(--bds-animation_transition);
   }
-  .bds251Slider-slider:focus-visible {
+  .bds270Slider-slider:focus-visible {
     outline: var(--bds-outline_default);
     outline-offset: var(--bds-outline_offset);
     border-radius: var(--slider_track-radius, var(--bds-border_radius--full));
   }
-  .bds251Slider-slider:disabled {
+  .bds270Slider-slider:disabled {
     opacity: 0.4;
     cursor: not-allowed;
   }
-  .bds251Slider-slider::-webkit-slider-thumb {
+  .bds270Slider-slider::-webkit-slider-thumb {
     appearance: none;
     inline-size: var(--slider_thumb-size);
     block-size: var(--slider_thumb-size);
@@ -2655,7 +2702,7 @@
     transition: var(--bds-animation_transition);
     cursor: pointer;
   }
-  .bds251Slider-slider::-moz-range-thumb {
+  .bds270Slider-slider::-moz-range-thumb {
     inline-size: var(--slider_thumb-size);
     block-size: var(--slider_thumb-size);
     border: none;
@@ -2664,7 +2711,7 @@
     box-shadow: var(--bds-shadow_s);
     cursor: pointer;
   }
-  .bds251Slider-sliderError {
+  .bds270Slider-sliderError {
     background:
       linear-gradient(
         to right,
@@ -2673,24 +2720,24 @@
         var(--slider_track-bg, var(--bds-color_bg--subtle)) var(--slider_fill),
         var(--slider_track-bg, var(--bds-color_bg--subtle)) 100%);
   }
-  .bds251Slider-sliderError::-webkit-slider-thumb {
+  .bds270Slider-sliderError::-webkit-slider-thumb {
     background-color: var(--slider_color--error, var(--bds-color_error));
   }
-  .bds251Slider-sliderError::-moz-range-thumb {
+  .bds270Slider-sliderError::-moz-range-thumb {
     background-color: var(--slider_color--error, var(--bds-color_error));
   }
   @media (prefers-reduced-motion: reduce) {
-    .bds251Slider-slider,
-    .bds251Slider-slider::-webkit-slider-thumb,
-    .bds251Slider-slider::-moz-range-thumb {
+    .bds270Slider-slider,
+    .bds270Slider-slider::-webkit-slider-thumb,
+    .bds270Slider-slider::-moz-range-thumb {
       transition: none;
     }
   }
 }
 
 /* src/components/interaction/form/Switch/Switch.module.css */
-@layer boostdev.bds251Switch-component {
-  .bds251Switch-switchGroup {
+@layer boostdev.bds270Switch-component {
+  .bds270Switch-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);
@@ -2699,21 +2746,21 @@
     display: flex;
     flex-direction: column;
   }
-  .bds251Switch-switchGroup.bds251Switch---size_small {
+  .bds270Switch-switchGroup.bds270Switch---size_small {
     --switch_thumb-size: 1em;
   }
-  .bds251Switch-switchGroup.bds251Switch---size_medium {
+  .bds270Switch-switchGroup.bds270Switch---size_medium {
     --switch_thumb-size: 1.25em;
   }
-  .bds251Switch-switchGroup.bds251Switch---size_large {
+  .bds270Switch-switchGroup.bds270Switch---size_large {
     --switch_thumb-size: 1.5em;
   }
-  .bds251Switch-inputWrapper {
+  .bds270Switch-inputWrapper {
     display: flex;
     align-items: center;
     gap: var(--bds-space_xs);
   }
-  .bds251Switch-trackWrapper {
+  .bds270Switch-trackWrapper {
     position: relative;
     display: inline-flex;
     align-items: center;
@@ -2721,7 +2768,7 @@
     inline-size: var(--switch_track-width);
     block-size: var(--switch_track-height);
   }
-  .bds251Switch-switch {
+  .bds270Switch-switch {
     position: absolute;
     inset: 0;
     appearance: none;
@@ -2732,10 +2779,10 @@
     cursor: pointer;
     z-index: 1;
   }
-  .bds251Switch-switch:disabled {
+  .bds270Switch-switch:disabled {
     cursor: not-allowed;
   }
-  .bds251Switch-track {
+  .bds270Switch-track {
     display: inline-flex;
     align-items: center;
     inline-size: var(--switch_track-width);
@@ -2751,7 +2798,7 @@
       transform var(--bds-animation_transition-duration) var(--bds-animation_easing);
     --bdc_color: var(--switch_thumb-bg, var(--bds-color_interactive));
   }
-  .bds251Switch-thumb {
+  .bds270Switch-thumb {
     display: block;
     inline-size: var(--switch_thumb-size);
     block-size: var(--switch_thumb-size);
@@ -2761,40 +2808,40 @@
     transition: var(--bds-animation_transition);
     transform: translateX(0);
   }
-  .bds251Switch-switch.bds251Switch-switchError + .bds251Switch-track {
+  .bds270Switch-switch.bds270Switch-switchError + .bds270Switch-track {
     --bdc_color: var(--switch_border-color--error, var(--bds-color_error));
   }
-  .bds251Switch-switch:checked + .bds251Switch-track {
+  .bds270Switch-switch:checked + .bds270Switch-track {
     background-color: var(--switch_track-bg--active, var(--bdc-color_active--subtle));
     --bdc_color: var(--switch_thumb-bg--active, var(--bds-color_interactive));
   }
-  .bds251Switch-switch:checked + .bds251Switch-track .bds251Switch-thumb {
+  .bds270Switch-switch:checked + .bds270Switch-track .bds270Switch-thumb {
     background-color: var(--switch_thumb-bg--active, var(--bds-color_interactive));
     transform: translateX(var(--switch_thumb-size));
   }
-  .bds251Switch-switch:focus-visible + .bds251Switch-track {
+  .bds270Switch-switch:focus-visible + .bds270Switch-track {
     outline: var(--bds-outline_default);
     outline-offset: var(--bds-outline_offset);
     border-radius: var(--switch_track-radius, var(--bds-border_radius--full));
   }
-  .bds251Switch-switch:disabled + .bds251Switch-track {
+  .bds270Switch-switch:disabled + .bds270Switch-track {
     opacity: 0.4;
   }
   @media (prefers-reduced-motion: reduce) {
-    .bds251Switch-track,
-    .bds251Switch-thumb {
+    .bds270Switch-track,
+    .bds270Switch-thumb {
       transition: none;
     }
   }
 }
 
 /* src/components/interaction/form/Textarea/Textarea.module.css */
-@layer boostdev.bds251Textarea-component {
-  .bds251Textarea-formGroup {
+@layer boostdev.bds270Textarea-component {
+  .bds270Textarea-formGroup {
     display: flex;
     flex-direction: column;
   }
-  .bds251Textarea-textarea {
+  .bds270Textarea-textarea {
     font-family: var(--bds-font_family--body);
     font-size: var(--bds-font_size--body);
     line-height: var(--bds-font_line-height--body);
@@ -2810,69 +2857,69 @@
     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);
   }
-  .bds251Textarea-textarea:focus {
+  .bds270Textarea-textarea:focus {
     --bdc_color: var(--bdc_color--focus);
   }
-  .bds251Textarea-textarea:focus-visible {
+  .bds270Textarea-textarea:focus-visible {
     outline: var(--bds-outline_default);
     outline-offset: var(--bds-outline_offset);
   }
-  .bds251Textarea-textarea:disabled {
+  .bds270Textarea-textarea:disabled {
     opacity: 0.5;
     cursor: not-allowed;
     resize: none;
   }
-  .bds251Textarea-textareaError {
+  .bds270Textarea-textareaError {
     --bdc_color: var(--bdc_color--error);
   }
 }
 
 /* src/components/layout/ButtonGroup/ButtonGroup.module.css */
-@layer boostdev.bds251ButtonGroup-component {
-  .bds251ButtonGroup-buttonGroup {
+@layer boostdev.bds270ButtonGroup-component {
+  .bds270ButtonGroup-buttonGroup {
     container-type: inline-size;
     container-name: button-group;
     grid-column: var(--bds-grid_span-100);
     inline-size: 100%;
   }
-  .bds251ButtonGroup-buttonGroup .bds251ButtonGroup-container {
+  .bds270ButtonGroup-buttonGroup .bds270ButtonGroup-container {
     position: relative;
     display: flex;
     flex-direction: column-reverse;
     gap: var(--bds-space_l);
     align-items: center;
   }
-  .bds251ButtonGroup-buttonGroup.bds251ButtonGroup---variant_card .bds251ButtonGroup-container {
+  .bds270ButtonGroup-buttonGroup.bds270ButtonGroup---variant_card .bds270ButtonGroup-container {
     align-items: stretch;
   }
-  .bds251ButtonGroup-buttonGroup.bds251ButtonGroup---variant_flow .bds251ButtonGroup-container,
-  .bds251ButtonGroup-buttonGroup.bds251ButtonGroup---variant_modal .bds251ButtonGroup-container {
+  .bds270ButtonGroup-buttonGroup.bds270ButtonGroup---variant_flow .bds270ButtonGroup-container,
+  .bds270ButtonGroup-buttonGroup.bds270ButtonGroup---variant_modal .bds270ButtonGroup-container {
     align-items: center;
   }
-  .bds251ButtonGroup-buttonGroup.bds251ButtonGroup---variant_content .bds251ButtonGroup-container {
+  .bds270ButtonGroup-buttonGroup.bds270ButtonGroup---variant_content .bds270ButtonGroup-container {
     align-items: flex-start;
   }
   @supports (contain: inline-size) {
     @container button-group (min-width: 30rem) {
-      .bds251ButtonGroup-buttonGroup .bds251ButtonGroup-container {
+      .bds270ButtonGroup-buttonGroup .bds270ButtonGroup-container {
         flex-direction: row;
         justify-content: space-between;
       }
-      .bds251ButtonGroup-buttonGroup.bds251ButtonGroup---variant_modal .bds251ButtonGroup-container > :first-child:last-child,
-      .bds251ButtonGroup-buttonGroup.bds251ButtonGroup---variant_flow .bds251ButtonGroup-container > :first-child:last-child {
+      .bds270ButtonGroup-buttonGroup.bds270ButtonGroup---variant_modal .bds270ButtonGroup-container > :first-child:last-child,
+      .bds270ButtonGroup-buttonGroup.bds270ButtonGroup---variant_flow .bds270ButtonGroup-container > :first-child:last-child {
         margin-inline-start: auto;
       }
-      .bds251ButtonGroup-buttonGroup.bds251ButtonGroup---variant_card .bds251ButtonGroup-container {
+      .bds270ButtonGroup-buttonGroup.bds270ButtonGroup---variant_card .bds270ButtonGroup-container {
         justify-content: center;
       }
-      .bds251ButtonGroup-buttonGroup.bds251ButtonGroup---variant_modal .bds251ButtonGroup-container {
+      .bds270ButtonGroup-buttonGroup.bds270ButtonGroup---variant_modal .bds270ButtonGroup-container {
         justify-content: flex-end;
       }
-      .bds251ButtonGroup-buttonGroup.bds251ButtonGroup---variant_content .bds251ButtonGroup-container {
+      .bds270ButtonGroup-buttonGroup.bds270ButtonGroup---variant_content .bds270ButtonGroup-container {
         justify-content: flex-start;
         align-items: center;
       }
-      .bds251ButtonGroup-buttonGroup.bds251ButtonGroup---variant_grid .bds251ButtonGroup-container {
+      .bds270ButtonGroup-buttonGroup.bds270ButtonGroup---variant_grid .bds270ButtonGroup-container {
         justify-content: center;
       }
     }
@@ -2880,183 +2927,183 @@
 }
 
 /* src/components/layout/Card/Card.module.css */
-@layer boostdev.bds251Card-component {
-  .bds251Card-card {
+@layer boostdev.bds270Card-component {
+  .bds270Card-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;
   }
-  .bds251Card-card.bds251Card---default {
-    box-shadow: var(--bds-shadow_s);
+  .bds270Card-card.bds270Card---default {
+    box-shadow: var(--card_shadow--default, var(--bds-shadow_s));
   }
-  .bds251Card-card.bds251Card---elevated {
-    box-shadow: var(--bds-shadow_m);
+  .bds270Card-card.bds270Card---elevated {
+    box-shadow: var(--card_shadow--elevated, var(--bds-shadow_m));
   }
-  .bds251Card-card.bds251Card---outlined {
+  .bds270Card-card.bds270Card---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);
+    box-shadow: var(--card_shadow--outlined, inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--bds-shadow_s));
   }
-  .bds251Card-card.bds251Card---clickable {
+  .bds270Card-card.bds270Card---clickable {
     cursor: pointer;
   }
-  .bds251Card-card.bds251Card---padding-none {
+  .bds270Card-card.bds270Card---padding-none {
     padding: var(--card_padding, 0);
   }
-  .bds251Card-card.bds251Card---padding-small {
+  .bds270Card-card.bds270Card---padding-small {
     padding: var(--card_padding, var(--bds-space_s));
   }
-  .bds251Card-card.bds251Card---padding-medium {
+  .bds270Card-card.bds270Card---padding-medium {
     padding: var(--card_padding, var(--bds-space_m));
   }
-  .bds251Card-card.bds251Card---padding-large {
+  .bds270Card-card.bds270Card---padding-large {
     padding: var(--card_padding, var(--bds-space_l));
   }
-  .bds251Card-card.bds251Card---padding-extra-large {
+  .bds270Card-card.bds270Card---padding-extra-large {
     padding: var(--card_padding, var(--bds-space_xl));
   }
-  .bds251Card-card.bds251Card---text-start {
+  .bds270Card-card.bds270Card---text-start {
     text-align: start;
   }
-  .bds251Card-card.bds251Card---text-center {
+  .bds270Card-card.bds270Card---text-center {
     text-align: center;
   }
-  .bds251Card-card.bds251Card---text-end {
+  .bds270Card-card.bds270Card---text-end {
     text-align: end;
   }
-  .bds251Card-card.bds251Card---clickable:focus-visible {
+  .bds270Card-card.bds270Card---clickable:focus-visible {
     outline: 2px solid var(--color_focus, currentcolor);
     outline-offset: 2px;
   }
-  .bds251Card-card.bds251Card---clickable:active {
+  .bds270Card-card.bds270Card---clickable:active {
     transform: translateY(0);
     box-shadow: var(--bds-shadow_s);
   }
   @media (hover: hover) and (pointer: fine) {
-    .bds251Card-card.bds251Card---clickable:hover {
+    .bds270Card-card.bds270Card---clickable:hover {
       transform: translateY(-2px);
       box-shadow: var(--card_shadow--clickable-hover, var(--bds-shadow_xl));
     }
-    .bds251Card-card.bds251Card---default:hover {
+    .bds270Card-card.bds270Card---default:hover {
       box-shadow: var(--card_shadow--default-hover, var(--bds-shadow_m));
     }
-    .bds251Card-card.bds251Card---elevated:hover {
+    .bds270Card-card.bds270Card---elevated:hover {
       box-shadow: var(--card_shadow--elevated-hover, var(--bds-shadow_2xl));
     }
-    .bds251Card-card.bds251Card---outlined:hover {
+    .bds270Card-card.bds270Card---outlined:hover {
       box-shadow: var(--card_shadow--outlined-hover, var(--bds-shadow_s));
     }
   }
 }
 
 /* src/components/layout/Grid/Grid.module.css */
-@layer boostdev.bds251Grid-component {
-  .bds251Grid-grid {
+@layer boostdev.bds270Grid-component {
+  .bds270Grid-grid {
     display: grid;
     gap: var(--grid_gap, var(--bds-grid_gap));
   }
-  .bds251Grid-grid.bds251Grid---main {
+  .bds270Grid-grid.bds270Grid---main {
     grid-template-columns: var(--bds-grid_template-columns);
   }
-  .bds251Grid-grid.bds251Grid---page {
+  .bds270Grid-grid.bds270Grid---page {
     grid-template-columns: 1fr;
     grid-column: 1 / -1;
   }
-  .bds251Grid-grid.bds251Grid---funnel {
+  .bds270Grid-grid.bds270Grid---funnel {
     grid-template-columns: var(--bds-grid_template-columns);
     max-inline-size: var(--bds-container_max-width--narrow);
     margin-inline: auto;
   }
-  .bds251Grid-grid.bds251Grid---custom {
+  .bds270Grid-grid.bds270Grid---custom {
     grid-template-columns: repeat(var(--grid_columns, 4), minmax(0, 1fr));
   }
-  .bds251Grid-grid.bds251Grid---centered {
+  .bds270Grid-grid.bds270Grid---centered {
     margin-inline: auto;
     max-inline-size: var(--bds-container_max-width);
     padding-inline: var(--bds-container_spacing-inline);
   }
-  .bds251Grid-item {
+  .bds270Grid-item {
     min-inline-size: 0;
   }
   @supports (grid-template-rows: masonry) {
-    .bds251Grid-grid.bds251Grid---masonry {
+    .bds270Grid-grid.bds270Grid---masonry {
       grid-template-rows: masonry;
     }
   }
   @supports (display: grid-lanes) {
-    .bds251Grid-grid.bds251Grid---masonry {
+    .bds270Grid-grid.bds270Grid---masonry {
       display: grid-lanes;
     }
   }
 }
 
 /* src/components/layout/SectionHeader/SectionHeader.module.css */
-@layer boostdev.bds251SectionHeader-component {
-  .bds251SectionHeader-sectionHeader {
+@layer boostdev.bds270SectionHeader-component {
+  .bds270SectionHeader-sectionHeader {
     display: flex;
     flex-direction: column;
     gap: var(--bds-space_m);
     grid-column: var(--bds-grid_span-100);
   }
-  .bds251SectionHeader-title {
+  .bds270SectionHeader-title {
     color: var(--sectionHeader-title-color, var(--bds-color_on-bg));
     margin: 0;
     font-family: var(--bds-font_family--body);
   }
-  .bds251SectionHeader-subtitle {
+  .bds270SectionHeader-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);
   }
-  .bds251SectionHeader-sectionHeader.bds251SectionHeader---start {
+  .bds270SectionHeader-sectionHeader.bds270SectionHeader---start {
     align-items: flex-start;
     text-align: start;
   }
-  .bds251SectionHeader-sectionHeader.bds251SectionHeader---center {
+  .bds270SectionHeader-sectionHeader.bds270SectionHeader---center {
     align-items: center;
     text-align: center;
   }
-  .bds251SectionHeader-sectionHeader.bds251SectionHeader---end {
+  .bds270SectionHeader-sectionHeader.bds270SectionHeader---end {
     align-items: flex-end;
     text-align: end;
   }
-  .bds251SectionHeader-sectionHeader.bds251SectionHeader---medium .bds251SectionHeader-title {
+  .bds270SectionHeader-sectionHeader.bds270SectionHeader---medium .bds270SectionHeader-title {
     font-size: var(--sectionHeader_title-size, var(--bds-font_size--display));
     line-height: var(--sectionHeader_title-line-height, var(--bds-font_line-height--display));
     font-weight: var(--sectionHeader_title-weight, var(--bds-font_weight--bold));
   }
-  .bds251SectionHeader-sectionHeader.bds251SectionHeader---medium .bds251SectionHeader-subtitle {
+  .bds270SectionHeader-sectionHeader.bds270SectionHeader---medium .bds270SectionHeader-subtitle {
     font-size: var(--sectionHeader_subtitle-size, var(--bds-font_size--heading-3));
     line-height: 1.3;
   }
-  .bds251SectionHeader-sectionHeader.bds251SectionHeader---xs .bds251SectionHeader-title {
+  .bds270SectionHeader-sectionHeader.bds270SectionHeader---xs .bds270SectionHeader-title {
     font-size: var(--sectionHeader_title-size, 1.5em);
     line-height: var(--sectionHeader_title-line-height, var(--bds-font_line-height--heading));
     font-weight: var(--sectionHeader_title-weight, var(--bds-font_weight--bold));
   }
-  .bds251SectionHeader-sectionHeader.bds251SectionHeader---xs .bds251SectionHeader-subtitle {
+  .bds270SectionHeader-sectionHeader.bds270SectionHeader---xs .bds270SectionHeader-subtitle {
     font-size: var(--sectionHeader_subtitle-size, var(--bds-font_size--body));
     line-height: 1.4;
   }
-  .bds251SectionHeader-sectionHeader.bds251SectionHeader---small .bds251SectionHeader-title {
+  .bds270SectionHeader-sectionHeader.bds270SectionHeader---small .bds270SectionHeader-title {
     font-size: var(--sectionHeader_title-size, var(--bds-font_size--heading-1));
     line-height: var(--sectionHeader_title-line-height, var(--bds-font_line-height--heading));
     font-weight: var(--sectionHeader_title-weight, var(--bds-font_weight--bold));
   }
-  .bds251SectionHeader-sectionHeader.bds251SectionHeader---small .bds251SectionHeader-subtitle {
+  .bds270SectionHeader-sectionHeader.bds270SectionHeader---small .bds270SectionHeader-subtitle {
     font-size: var(--sectionHeader_subtitle-size, var(--bds-font_size--body));
     line-height: 1.4;
   }
-  .bds251SectionHeader-sectionHeader.bds251SectionHeader---large .bds251SectionHeader-title {
+  .bds270SectionHeader-sectionHeader.bds270SectionHeader---large .bds270SectionHeader-title {
     font-size: var(--sectionHeader_title-size, var(--bds-font_size--display));
     line-height: var(--sectionHeader_title-line-height, var(--bds-font_line-height--display));
     font-weight: var(--sectionHeader_title-weight, var(--bds-font_weight--bold));
     letter-spacing: var(--bds-font_tracking--tight);
   }
-  .bds251SectionHeader-sectionHeader.bds251SectionHeader---large .bds251SectionHeader-subtitle {
+  .bds270SectionHeader-sectionHeader.bds270SectionHeader---large .bds270SectionHeader-subtitle {
     font-size: var(--sectionHeader_subtitle-size, var(--bds-font_size--heading-2));
     line-height: 1.3;
     font-weight: var(--bds-font_weight--medium);
@@ -3064,8 +3111,8 @@
 }
 
 /* src/components/layout/IconWrapper/IconWrapper.module.css */
-@layer boostdev.bds251IconWrapper-component {
-  .bds251IconWrapper-wrapper {
+@layer boostdev.bds270IconWrapper-component {
+  .bds270IconWrapper-wrapper {
     inline-size: 2em;
     block-size: 2em;
     font-size: 3em;
@@ -3080,7 +3127,7 @@
     position: relative;
     transition: var(--bds-animation_transition);
   }
-  .bds251IconWrapper-wrapper svg {
+  .bds270IconWrapper-wrapper svg {
     fill: currentcolor;
   }
 }