@boostdev/design-system-components 1.0.3 → 1.1.1

package/dist/client.css

@@ -10,6 +10,12 @@
     --bdc_color: currentcolor;
     --bdc_color--focus: var(--bds-color_interactive);
     --bdc_color--error: var(--bds-color_error);
+    --bdc-color_active: var(--bds-color_green);
+    --bdc-color_on-active: var(--bds-color_on-green);
+    --bdc-color_active--subtle: var(--bds-color_green--subtle);
+    --bdc-color_on-active--subtle: var(--bds-color_on-green--subtle);
+    --bdc-color_active--strong: var(--bds-color_green--strong);
+    --bdc-color_on-active--strong: var(--bds-color_on-green--strong);
     --bdc-outline_width: 1px;
     --bdc-outline_offset: -1px;
     --bdc-outline_radius: var(--bds-border_radius--xs);
@@ -19,7 +25,7 @@
 
 /* src/components/ui/Accordion/Accordion.module.css */
 @layer component {
-  .bds103Accordion-accordion {
+  .bds111Accordion-accordion {
     display: flex;
     flex-direction: column;
     border: var(--accordion_border, none);
@@ -30,21 +36,21 @@
     border-radius: var(--accordion_radius, var(--bdc-outline_radius));
     overflow: hidden;
   }
-  .bds103Accordion-item {
-    border-bottom: 1px solid var(--bds-color_bg--subtle);
+  .bds111Accordion-item {
+    border-block-end: 1px solid var(--bds-color_bg--subtle);
   }
-  .bds103Accordion-item:last-child {
-    border-bottom: none;
+  .bds111Accordion-item:last-child {
+    border-block-end: none;
   }
-  .bds103Accordion-heading {
+  .bds111Accordion-heading {
     margin: 0;
   }
-  .bds103Accordion-trigger {
+  .bds111Accordion-trigger {
     all: unset;
     display: flex;
     align-items: center;
     justify-content: space-between;
-    width: 100%;
+    inline-size: 100%;
     padding: var(--bds-space_m);
     font-family: var(--bds-font_family--body);
     font-size: var(--bds-font_size--body);
@@ -54,44 +60,44 @@
     transition: var(--bds-animation_transition);
     box-sizing: border-box;
   }
-  .bds103Accordion-trigger:disabled {
+  .bds111Accordion-trigger:disabled {
     opacity: 0.4;
     cursor: not-allowed;
   }
-  .bds103Accordion-trigger:focus-visible {
+  .bds111Accordion-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) {
-    .bds103Accordion-trigger:not(:disabled):hover {
+    .bds111Accordion-trigger:not(:disabled):hover {
       background-color: var(--bds-color_bg--subtle);
     }
   }
-  .bds103Accordion-triggerLabel {
+  .bds111Accordion-triggerLabel {
     flex: 1;
     text-align: start;
   }
-  .bds103Accordion-chevron {
-    width: 1.25rem;
-    height: 1.25rem;
+  .bds111Accordion-chevron {
+    inline-size: 1.25rem;
+    block-size: 1.25rem;
     flex-shrink: 0;
     transition: transform var(--bds-animation_transition-duration) var(--bds-animation_easing);
   }
-  .bds103Accordion-item.bds103Accordion---open .bds103Accordion-chevron {
+  .bds111Accordion-item.bds111Accordion---open .bds111Accordion-chevron {
     transform: rotate(180deg);
   }
-  .bds103Accordion-panel {
+  .bds111Accordion-panel {
     overflow: hidden;
   }
-  .bds103Accordion-panelContent {
+  .bds111Accordion-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) {
-    .bds103Accordion-chevron {
+    .bds111Accordion-chevron {
       transition: none;
     }
   }
@@ -99,7 +105,7 @@
 
 /* src/components/ui/Alert/Alert.module.css */
 @layer component {
-  .bds103Alert-alert {
+  .bds111Alert-alert {
     display: flex;
     align-items: flex-start;
     gap: var(--bds-space_s);
@@ -111,43 +117,43 @@
     font-size: var(--bds-font_size--body);
     line-height: var(--bds-font_line-height--body);
   }
-  .bds103Alert---variant_info {
+  .bds111Alert---variant_info {
     --alert_bg: var(--bds-color_blue--subtle);
     --alert_text: var(--bds-color_on-blue--subtle);
     --alert_border: var(--bds-color_blue);
   }
-  .bds103Alert---variant_success {
+  .bds111Alert---variant_success {
     --alert_bg: var(--bds-color_success--subtle);
     --alert_text: var(--bds-color_on-success--subtle);
     --alert_border: var(--bds-color_success);
   }
-  .bds103Alert---variant_warning {
+  .bds111Alert---variant_warning {
     --alert_bg: var(--bds-color_orange--subtle);
     --alert_text: var(--bds-color_on-orange--subtle);
     --alert_border: var(--bds-color_warning);
   }
-  .bds103Alert---variant_error {
+  .bds111Alert---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);
   }
-  .bds103Alert-icon {
+  .bds111Alert-icon {
     display: flex;
     align-items: center;
     flex-shrink: 0;
     margin-block-start: 0.1em;
   }
-  .bds103Alert-content {
+  .bds111Alert-content {
     flex: 1;
     display: flex;
     flex-direction: column;
     gap: var(--bds-space_xxs);
   }
-  .bds103Alert-title {
+  .bds111Alert-title {
     font-weight: var(--bds-font_weight--semibold);
     font-size: var(--bds-font_size--body);
   }
-  .bds103Alert-dismiss {
+  .bds111Alert-dismiss {
     all: unset;
     display: flex;
     align-items: center;
@@ -162,16 +168,16 @@
     outline: var(--bdc-outline_width) solid var(--bdc_color);
     outline-offset: var(--bdc-outline_offset);
   }
-  .bds103Alert-dismiss svg {
+  .bds111Alert-dismiss svg {
     width: 1rem;
     height: 1rem;
   }
-  .bds103Alert-dismiss:focus-visible {
+  .bds111Alert-dismiss:focus-visible {
     outline: var(--bds-outline_default);
     outline-offset: var(--bds-outline_offset);
   }
   @media (hover: hover) and (pointer: fine) {
-    .bds103Alert-dismiss:hover {
+    .bds111Alert-dismiss:hover {
       opacity: 0.7;
     }
   }
@@ -179,7 +185,7 @@
 
 /* src/components/ui/Avatar/Avatar.module.css */
 @layer component {
-  .bds103Avatar-avatar {
+  .bds111Avatar-avatar {
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -189,42 +195,42 @@
     overflow: hidden;
     flex-shrink: 0;
   }
-  .bds103Avatar-avatar.bds103Avatar---fallback {
+  .bds111Avatar-avatar.bds111Avatar---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);
   }
-  .bds103Avatar-avatar.bds103Avatar---size_small {
+  .bds111Avatar-avatar.bds111Avatar---size_small {
     --avatar_size: 2em;
   }
-  .bds103Avatar-avatar.bds103Avatar---size_medium {
+  .bds111Avatar-avatar.bds111Avatar---size_medium {
     --avatar_size: 3em;
   }
-  .bds103Avatar-avatar.bds103Avatar---size_large {
+  .bds111Avatar-avatar.bds111Avatar---size_large {
     --avatar_size: 4.5em;
   }
-  .bds103Avatar-image {
+  .bds111Avatar-image {
     width: 100%;
     height: 100%;
     object-fit: cover;
     display: block;
   }
-  .bds103Avatar-initials {
+  .bds111Avatar-initials {
     line-height: 1;
     user-select: none;
     font-size: var(--bds-font_size--body);
   }
-  .bds103Avatar-avatar.bds103Avatar---size_small .bds103Avatar-initials {
+  .bds111Avatar-avatar.bds111Avatar---size_small .bds111Avatar-initials {
     font-size: var(--bds-font_size--body--s);
   }
-  .bds103Avatar-avatar.bds103Avatar---size_large .bds103Avatar-initials {
+  .bds111Avatar-avatar.bds111Avatar---size_large .bds111Avatar-initials {
     font-size: var(--bds-font_size--heading-3);
   }
 }
 
 /* src/components/ui/Badge/Badge.module.css */
 @layer component {
-  .bds103Badge-badge {
+  .bds111Badge-badge {
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -237,23 +243,23 @@
     background-color: var(--badge_bg, var(--bds-color_blue));
     color: var(--badge_text, var(--bds-color_on-blue));
   }
-  .bds103Badge---variant_primary {
+  .bds111Badge---variant_primary {
     --badge_bg: var(--bds-color_interactive);
     --badge_text: var(--bds-color_on-interactive);
   }
-  .bds103Badge---variant_secondary {
+  .bds111Badge---variant_secondary {
     --badge_bg: var(--bds-color_bg);
     --badge_text: var(--bds-color_on-bg);
   }
-  .bds103Badge---variant_success {
+  .bds111Badge---variant_success {
     --badge_bg: var(--bds-color_success);
     --badge_text: var(--bds-color_on-success);
   }
-  .bds103Badge---variant_error {
+  .bds111Badge---variant_error {
     --badge_bg: var(--bds-color_error);
     --badge_text: var(--bds-color_on-error);
   }
-  .bds103Badge---variant_warning {
+  .bds111Badge---variant_warning {
     --badge_bg: var(--bds-color_warning);
     --badge_text: var(--bds-color_on-warning);
   }
@@ -261,10 +267,10 @@
 
 /* src/components/ui/Breadcrumb/Breadcrumb.module.css */
 @layer component {
-  .bds103Breadcrumb-breadcrumb {
+  .bds111Breadcrumb-breadcrumb {
     font-size: var(--bds-font_size--body--s);
   }
-  .bds103Breadcrumb-list {
+  .bds111Breadcrumb-list {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
@@ -273,32 +279,32 @@
     margin: 0;
     padding: 0;
   }
-  .bds103Breadcrumb-item {
+  .bds111Breadcrumb-item {
     display: flex;
     align-items: center;
     gap: var(--bds-space_xxs);
   }
-  .bds103Breadcrumb-link {
+  .bds111Breadcrumb-link {
     color: var(--bds-color_interactive_on-bg);
     text-decoration: none;
     transition: var(--bds-animation_transition);
   }
-  .bds103Breadcrumb-link:focus-visible {
+  .bds111Breadcrumb-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) {
-    .bds103Breadcrumb-link:hover {
+    .bds111Breadcrumb-link:hover {
       text-decoration: underline;
       text-underline-offset: 0.2em;
     }
   }
-  .bds103Breadcrumb-separator {
+  .bds111Breadcrumb-separator {
     color: var(--bds-color_on-bg--subtle);
     user-select: none;
   }
-  .bds103Breadcrumb-current {
+  .bds111Breadcrumb-current {
     color: var(--bds-color_on-bg--subtle);
     font-weight: var(--bds-font_weight--semibold);
   }
@@ -306,12 +312,12 @@
 
 /* src/components/ui/Collapsible/Collapsible.module.css */
 @layer component {
-  .bds103Collapsible-collapsible {
+  .bds111Collapsible-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;
   }
-  .bds103Collapsible-summary {
+  .bds111Collapsible-summary {
     list-style: none;
     display: flex;
     align-items: center;
@@ -326,44 +332,44 @@
     user-select: none;
     transition: var(--bds-animation_transition);
   }
-  .bds103Collapsible-summary::-webkit-details-marker {
+  .bds111Collapsible-summary::-webkit-details-marker {
     display: none;
   }
-  .bds103Collapsible-summary:focus-visible {
+  .bds111Collapsible-summary:focus-visible {
     outline: var(--bds-outline_default);
     outline-offset: calc(var(--bds-outline_offset) * -1);
   }
   @media (hover: hover) and (pointer: fine) {
-    .bds103Collapsible-summary:hover {
+    .bds111Collapsible-summary:hover {
       background-color: var(--collapsible_bg--hover, var(--bds-color_bg--subtle));
     }
   }
-  .bds103Collapsible-collapsible[open] > .bds103Collapsible-summary {
+  .bds111Collapsible-collapsible[open] > .bds111Collapsible-summary {
     border-block-end: var(--collapsible_border-width, 1px) solid var(--collapsible_border-color, var(--bds-color_bg--subtle));
   }
-  .bds103Collapsible-summaryContent {
+  .bds111Collapsible-summaryContent {
     flex: 1;
   }
-  .bds103Collapsible-icon {
-    width: 0.5rem;
-    height: 0.5rem;
-    border-right: 2px solid currentcolor;
-    border-bottom: 2px solid currentcolor;
+  .bds111Collapsible-icon {
+    inline-size: 0.5rem;
+    block-size: 0.5rem;
+    border-inline-end: 2px solid currentcolor;
+    border-block-end: 2px solid currentcolor;
     transform: rotate(45deg);
     flex-shrink: 0;
     transition: transform var(--bds-animation_transition-duration) var(--bds-animation_easing);
   }
-  .bds103Collapsible-collapsible[open] > .bds103Collapsible-summary .bds103Collapsible-icon {
+  .bds111Collapsible-collapsible[open] > .bds111Collapsible-summary .bds111Collapsible-icon {
     transform: rotate(-135deg);
   }
-  .bds103Collapsible-content {
+  .bds111Collapsible-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) {
-    .bds103Collapsible-icon {
+    .bds111Collapsible-icon {
       transition: none;
     }
   }
@@ -371,7 +377,7 @@
 
 /* src/components/ui/Calendar/Calendar.module.css */
 @layer component {
-  .bds103Calendar-calendar {
+  .bds111Calendar-calendar {
     display: inline-flex;
     flex-direction: column;
     gap: var(--bds-space_s);
@@ -384,64 +390,64 @@
     border-radius: var(--calendar_radius, var(--bdc-outline_radius));
     padding: var(--bds-space_m);
     box-shadow: var(--calendar_shadow, var(--bds-shadow_s));
-    width: 20rem;
+    inline-size: 20rem;
   }
-  .bds103Calendar-header {
+  .bds111Calendar-header {
     display: flex;
     align-items: center;
     justify-content: space-between;
   }
-  .bds103Calendar-monthYear {
+  .bds111Calendar-monthYear {
     font-size: var(--bds-font_size--body);
     font-weight: var(--bds-font_weight--semibold);
     color: var(--bds-color_on-bg);
   }
-  .bds103Calendar-navBtn {
+  .bds111Calendar-navBtn {
     all: unset;
     display: flex;
     align-items: center;
     justify-content: center;
-    width: 2rem;
-    height: 2rem;
+    inline-size: 2rem;
+    block-size: 2rem;
     border-radius: 50%;
     cursor: pointer;
     color: var(--bds-color_on-bg);
     transition: var(--bds-animation_transition);
   }
-  .bds103Calendar-navBtn svg {
-    width: 1rem;
-    height: 1rem;
+  .bds111Calendar-navBtn svg {
+    inline-size: 1rem;
+    block-size: 1rem;
   }
-  .bds103Calendar-navBtn:focus-visible {
+  .bds111Calendar-navBtn:focus-visible {
     outline: var(--bds-outline_default);
     outline-offset: var(--bds-outline_offset);
   }
   @media (hover: hover) and (pointer: fine) {
-    .bds103Calendar-navBtn:hover {
+    .bds111Calendar-navBtn:hover {
       background-color: var(--bds-color_bg--subtle);
     }
   }
-  .bds103Calendar-grid {
+  .bds111Calendar-grid {
     border-collapse: collapse;
-    width: 100%;
+    inline-size: 100%;
     table-layout: fixed;
   }
-  .bds103Calendar-weekday {
+  .bds111Calendar-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);
   }
-  .bds103Calendar-empty {
+  .bds111Calendar-empty {
     padding: 0;
   }
-  .bds103Calendar-day {
+  .bds111Calendar-day {
     all: unset;
     display: flex;
     align-items: center;
     justify-content: center;
-    width: 100%;
+    inline-size: 100%;
     aspect-ratio: 1;
     border-radius: 50%;
     font-size: var(--bds-font_size--body--s);
@@ -450,33 +456,33 @@
     transition: var(--bds-animation_transition);
     box-sizing: border-box;
   }
-  .bds103Calendar-day:focus-visible {
+  .bds111Calendar-day:focus-visible {
     outline: var(--bds-outline_default);
     outline-offset: var(--bds-outline_offset);
   }
   @media (hover: hover) and (pointer: fine) {
-    .bds103Calendar-day:not(.bds103Calendar-disabled, .bds103Calendar-selected):hover {
+    .bds111Calendar-day:not(.bds111Calendar-disabled, .bds111Calendar-selected):hover {
       background-color: var(--bds-color_bg--subtle);
     }
   }
-  .bds103Calendar-today {
+  .bds111Calendar-today {
     font-weight: var(--bds-font_weight--semibold);
     --bdc_color: var(--bds-color_interactive);
     border: var(--calendar_today-border, none);
     outline: var(--bdc-outline_width) solid var(--bdc_color);
     outline-offset: var(--bdc-outline_offset);
   }
-  .bds103Calendar-selected {
+  .bds111Calendar-selected {
     background-color: var(--bds-color_interactive);
     color: var(--bds-color_on-interactive);
     font-weight: var(--bds-font_weight--semibold);
   }
-  .bds103Calendar-disabled {
+  .bds111Calendar-disabled {
     opacity: 0.35;
     cursor: not-allowed;
   }
   @media (prefers-reduced-motion: reduce) {
-    .bds103Calendar-day {
+    .bds111Calendar-day {
       transition: none;
     }
   }
@@ -484,35 +490,35 @@
 
 /* src/components/ui/Carousel/Carousel.module.css */
 @layer component {
-  .bds103Carousel-carousel {
+  .bds111Carousel-carousel {
     position: relative;
     display: flex;
     align-items: center;
     gap: var(--bds-space_xs);
   }
-  .bds103Carousel-track {
+  .bds111Carousel-track {
     display: flex;
     gap: var(--bds-space_m);
-    overflow-x: auto;
+    overflow-inline: auto;
     scroll-snap-type: x mandatory;
     scrollbar-width: none;
     flex: 1;
     scroll-behavior: smooth;
   }
-  .bds103Carousel-track::-webkit-scrollbar {
+  .bds111Carousel-track::-webkit-scrollbar {
     display: none;
   }
-  .bds103Carousel-slide {
+  .bds111Carousel-slide {
     scroll-snap-align: start;
     flex-shrink: 0;
   }
-  .bds103Carousel-navBtn {
+  .bds111Carousel-navBtn {
     all: unset;
     display: flex;
     align-items: center;
     justify-content: center;
-    width: 2.5rem;
-    height: 2.5rem;
+    inline-size: 2.5rem;
+    block-size: 2.5rem;
     border-radius: 50%;
     background-color: var(--bds-color_bg);
     color: var(--bds-color_on-bg);
@@ -525,21 +531,21 @@
     transition: var(--bds-animation_transition);
     box-shadow: var(--bds-shadow_s);
   }
-  .bds103Carousel-navBtn svg {
-    width: 1.25rem;
-    height: 1.25rem;
+  .bds111Carousel-navBtn svg {
+    inline-size: 1.25rem;
+    block-size: 1.25rem;
   }
-  .bds103Carousel-navBtn:focus-visible {
+  .bds111Carousel-navBtn:focus-visible {
     outline: var(--bds-outline_default);
     outline-offset: var(--bds-outline_offset);
   }
   @media (hover: hover) and (pointer: fine) {
-    .bds103Carousel-navBtn:hover {
+    .bds111Carousel-navBtn:hover {
       background-color: var(--bds-color_bg--subtle);
     }
   }
   @media (prefers-reduced-motion: reduce) {
-    .bds103Carousel-track {
+    .bds111Carousel-track {
       scroll-behavior: auto;
     }
   }
@@ -547,7 +553,7 @@
 
 /* src/components/ui/DescriptionList/DescriptionList.module.css */
 @layer component {
-  .bds103DescriptionList-list {
+  .bds111DescriptionList-list {
     display: flex;
     flex-direction: column;
     gap: var(--bds-space_s);
@@ -556,61 +562,61 @@
     font-size: var(--bds-font_size--body);
     color: var(--bds-color_on-bg);
   }
-  .bds103DescriptionList-group {
+  .bds111DescriptionList-group {
     display: flex;
     flex-direction: column;
     gap: var(--bds-space_xxs);
   }
-  .bds103DescriptionList-term {
+  .bds111DescriptionList-term {
     font-weight: var(--bds-font_weight--semibold);
     color: var(--bds-color_on-bg);
   }
-  .bds103DescriptionList-details {
+  .bds111DescriptionList-details {
     margin: 0;
     color: var(--bds-color_on-bg);
   }
-  .bds103DescriptionList---layout_inline .bds103DescriptionList-group {
+  .bds111DescriptionList---layout_inline .bds111DescriptionList-group {
     display: grid;
     grid-template-columns: minmax(8rem, 1fr) 2fr;
     gap: var(--bds-space_xs);
     align-items: baseline;
   }
-  .bds103DescriptionList---layout_inline .bds103DescriptionList-term {
+  .bds111DescriptionList---layout_inline .bds111DescriptionList-term {
     grid-column: 1;
   }
-  .bds103DescriptionList---layout_inline .bds103DescriptionList-details {
+  .bds111DescriptionList---layout_inline .bds111DescriptionList-details {
     grid-column: 2;
   }
 }
 
 /* src/components/ui/Link/Link.module.css */
 @layer component {
-  .bds103Link-link {
+  .bds111Link-link {
     color: var(--link_color, var(--bds-color_interactive_on-bg));
     text-decoration: underline;
     text-underline-offset: 0.2em;
     transition: var(--bds-animation_transition);
     cursor: pointer;
   }
-  .bds103Link-link:focus-visible {
+  .bds111Link-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) {
-    .bds103Link-link:hover {
+    .bds111Link-link:hover {
       --link_color: var(--link_color-hover, var(--bds-color_blue--strong));
     }
   }
-  .bds103Link---variant_default {
+  .bds111Link---variant_default {
     --link_color: var(--bds-color_interactive_on-bg);
     --link_color-hover: var(--bds-color_blue--strong);
   }
-  .bds103Link---variant_subtle {
+  .bds111Link---variant_subtle {
     --link_color: var(--bds-color_on-bg);
     --link_color-hover: var(--bds-color_interactive_on-bg);
   }
-  .bds103Link---variant_standalone {
+  .bds111Link---variant_standalone {
     --link_color: var(--bds-color_interactive_on-bg);
     --link_color-hover: var(--bds-color_blue--strong);
     display: inline-flex;
@@ -620,15 +626,15 @@
     text-decoration: none;
   }
   @media (hover: hover) and (pointer: fine) {
-    .bds103Link---variant_standalone:hover {
+    .bds111Link---variant_standalone:hover {
       text-decoration: underline;
       text-underline-offset: 0.2em;
     }
   }
-  .bds103Link-externalLabel {
+  .bds111Link-externalLabel {
     position: absolute;
-    width: 1px;
-    height: 1px;
+    inline-size: 1px;
+    block-size: 1px;
     padding: 0;
     margin: -1px;
     overflow: hidden;
@@ -640,27 +646,27 @@
 
 /* src/components/ui/Loading/Loading.module.css */
 @layer component {
-  .bds103Loading-loading {
+  .bds111Loading-loading {
     display: flex;
     justify-content: center;
     align-items: center;
   }
-  .bds103Loading-spinner {
-    width: 2.5em;
-    height: 2.5em;
+  .bds111Loading-spinner {
+    inline-size: 2.5em;
+    block-size: 2.5em;
     border: 4px solid var(--bds-color_bg);
-    border-top: 4px solid var(--bds-color_interactive);
+    border-block-start: 4px solid var(--bds-color_interactive);
     border-radius: 50%;
     animation: spin 1s linear infinite;
   }
-  .bds103Loading---size_small .bds103Loading-spinner {
-    width: 1.5em;
-    height: 1.5em;
+  .bds111Loading---size_small .bds111Loading-spinner {
+    inline-size: 1.5em;
+    block-size: 1.5em;
     border-width: 2px;
   }
-  .bds103Loading---size_large .bds103Loading-spinner {
-    width: 4em;
-    height: 4em;
+  .bds111Loading---size_large .bds111Loading-spinner {
+    inline-size: 4em;
+    block-size: 4em;
     border-width: 6px;
   }
 }
@@ -673,14 +679,14 @@
   }
 }
 @media (prefers-reduced-motion: reduce) {
-  .bds103Loading-spinner {
+  .bds111Loading-spinner {
     animation: none;
   }
 }
 
 /* src/components/ui/NotificationBanner/NotificationBanner.module.css */
 @layer component {
-  .bds103NotificationBanner-banner {
+  .bds111NotificationBanner-banner {
     display: flex;
     align-items: center;
     gap: var(--bds-space_m);
@@ -690,35 +696,35 @@
     border-block-end: 3px solid var(--banner_border, var(--bds-color_blue));
     font-size: var(--bds-font_size--body);
     line-height: var(--bds-font_line-height--body);
-    width: 100%;
+    inline-size: 100%;
   }
-  .bds103NotificationBanner---variant_info {
+  .bds111NotificationBanner---variant_info {
     --banner_bg: var(--bds-color_blue--subtle);
     --banner_text: var(--bds-color_on-blue--subtle);
     --banner_border: var(--bds-color_blue);
   }
-  .bds103NotificationBanner---variant_success {
+  .bds111NotificationBanner---variant_success {
     --banner_bg: var(--bds-color_success--subtle);
     --banner_text: var(--bds-color_on-success--subtle);
     --banner_border: var(--bds-color_success);
   }
-  .bds103NotificationBanner---variant_warning {
+  .bds111NotificationBanner---variant_warning {
     --banner_bg: var(--bds-color_orange--subtle);
     --banner_text: var(--bds-color_on-orange--subtle);
     --banner_border: var(--bds-color_warning);
   }
-  .bds103NotificationBanner---variant_error {
+  .bds111NotificationBanner---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);
   }
-  .bds103NotificationBanner-content {
+  .bds111NotificationBanner-content {
     flex: 1;
   }
-  .bds103NotificationBanner-action {
+  .bds111NotificationBanner-action {
     flex-shrink: 0;
   }
-  .bds103NotificationBanner-dismiss {
+  .bds111NotificationBanner-dismiss {
     all: unset;
     display: flex;
     align-items: center;
@@ -733,16 +739,16 @@
     outline: var(--bdc-outline_width) solid var(--bdc_color);
     outline-offset: var(--bdc-outline_offset);
   }
-  .bds103NotificationBanner-dismiss svg {
-    width: 1rem;
-    height: 1rem;
+  .bds111NotificationBanner-dismiss svg {
+    inline-size: 1rem;
+    block-size: 1rem;
   }
-  .bds103NotificationBanner-dismiss:focus-visible {
+  .bds111NotificationBanner-dismiss:focus-visible {
     outline: var(--bds-outline_default);
     outline-offset: var(--bds-outline_offset);
   }
   @media (hover: hover) and (pointer: fine) {
-    .bds103NotificationBanner-dismiss:hover {
+    .bds111NotificationBanner-dismiss:hover {
       opacity: 0.7;
     }
   }
@@ -750,11 +756,11 @@
 
 /* src/components/ui/Pagination/Pagination.module.css */
 @layer component {
-  .bds103Pagination-pagination {
+  .bds111Pagination-pagination {
     display: flex;
     justify-content: center;
   }
-  .bds103Pagination-list {
+  .bds111Pagination-list {
     display: flex;
     align-items: center;
     gap: var(--bds-space_xxs);
@@ -762,13 +768,13 @@
     margin: 0;
     padding: 0;
   }
-  .bds103Pagination-button {
+  .bds111Pagination-button {
     all: unset;
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    min-width: 2.25rem;
-    height: 2.25rem;
+    min-inline-size: 2.25rem;
+    block-size: 2.25rem;
     padding-inline: var(--bds-space_xs);
     border-radius: var(--bds-border_radius--xs);
     background-color: var(--btn_bg, transparent);
@@ -784,35 +790,35 @@
     transition: var(--bds-animation_transition);
     box-sizing: border-box;
   }
-  .bds103Pagination-button:disabled {
+  .bds111Pagination-button:disabled {
     opacity: 0.4;
     cursor: not-allowed;
   }
-  .bds103Pagination-button:focus-visible {
+  .bds111Pagination-button:focus-visible {
     outline: var(--bds-outline_default);
     outline-offset: var(--bds-outline_offset);
   }
   @media (hover: hover) and (pointer: fine) {
-    .bds103Pagination-button:not(:disabled, .bds103Pagination---active):hover {
+    .bds111Pagination-button:not(:disabled, .bds111Pagination---active):hover {
       --btn_bg: var(--bds-color_bg--subtle);
-      --btn_color: var(--bds-color_interactive);
+      --btn_color: var(--bds-color_interactive_on-bg);
     }
   }
-  .bds103Pagination-button.bds103Pagination---active {
+  .bds111Pagination-button.bds111Pagination---active {
     --btn_bg: var(--bds-color_interactive);
     --btn_color: var(--bds-color_on-interactive);
     --btn_border: var(--bds-color_interactive);
   }
-  .bds103Pagination-button.bds103Pagination---nav svg {
-    width: 1rem;
-    height: 1rem;
+  .bds111Pagination-button.bds111Pagination---nav svg {
+    inline-size: 1rem;
+    block-size: 1rem;
   }
-  .bds103Pagination-ellipsis {
+  .bds111Pagination-ellipsis {
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    min-width: 2.25rem;
-    height: 2.25rem;
+    min-inline-size: 2.25rem;
+    block-size: 2.25rem;
     color: var(--bds-color_on-bg--subtle);
     font-size: var(--bds-font_size--body);
     user-select: none;
@@ -821,46 +827,46 @@
 
 /* src/components/ui/Progress/Progress.module.css */
 @layer component {
-  .bds103Progress-container {
+  .bds111Progress-container {
     display: flex;
     flex-direction: column;
     gap: var(--bds-space_xxs);
-    width: 100%;
+    inline-size: 100%;
   }
-  .bds103Progress-labelRow {
+  .bds111Progress-labelRow {
     display: flex;
     justify-content: space-between;
     align-items: baseline;
     font-size: var(--bds-font_size--body--s);
     color: var(--bds-color_on-bg);
   }
-  .bds103Progress-value {
+  .bds111Progress-value {
     font-variant-numeric: tabular-nums;
   }
-  .bds103Progress-track {
-    width: 100%;
-    height: var(--progress_height, var(--bds-space_xs));
+  .bds111Progress-track {
+    inline-size: 100%;
+    block-size: var(--progress_height, var(--bds-space_xs));
     background-color: var(--bds-color_bg--subtle);
     border-radius: 999px;
     overflow: hidden;
   }
-  .bds103Progress-track.bds103Progress---size_small {
+  .bds111Progress-track.bds111Progress---size_small {
     --progress_height: var(--bds-space_xxs);
   }
-  .bds103Progress-track.bds103Progress---size_medium {
+  .bds111Progress-track.bds111Progress---size_medium {
     --progress_height: var(--bds-space_xs);
   }
-  .bds103Progress-track.bds103Progress---size_large {
+  .bds111Progress-track.bds111Progress---size_large {
     --progress_height: var(--bds-space_s);
   }
-  .bds103Progress-fill {
-    height: 100%;
-    background-color: var(--progress_color-active, var(--bds-color_green));
+  .bds111Progress-fill {
+    block-size: 100%;
+    background-color: var(--progress_color-active, var(--bdc-color_active));
     border-radius: 999px;
-    transition: width var(--bds-animation_transition-duration) var(--bds-animation_easing);
+    transition: inline-size var(--bds-animation_transition-duration) var(--bds-animation_easing);
   }
   @media (prefers-reduced-motion: reduce) {
-    .bds103Progress-fill {
+    .bds111Progress-fill {
       transition: none;
     }
   }
@@ -868,23 +874,23 @@
 
 /* src/components/ui/ProgressCircle/ProgressCircle.module.css */
 @layer component {
-  .bds103ProgressCircle-wrapper {
+  .bds111ProgressCircle-wrapper {
     position: relative;
     display: inline-flex;
     align-items: center;
     justify-content: center;
   }
-  .bds103ProgressCircle-svg {
+  .bds111ProgressCircle-svg {
     display: block;
   }
-  .bds103ProgressCircle-track {
+  .bds111ProgressCircle-track {
     stroke: var(--bds-color_bg--subtle);
   }
-  .bds103ProgressCircle-fill {
-    stroke: var(--progressCircle_color-active, var(--bds-color_green));
+  .bds111ProgressCircle-fill {
+    stroke: var(--progressCircle_color-active, var(--bdc-color_active));
     transition: stroke-dashoffset var(--bds-animation_transition-duration) var(--bds-animation_easing);
   }
-  .bds103ProgressCircle-value {
+  .bds111ProgressCircle-value {
     position: absolute;
     font-size: var(--bds-font_size--body--s);
     font-weight: var(--bds-font_weight--semibold);
@@ -892,17 +898,17 @@
     color: var(--bds-color_on-bg);
     line-height: 1;
   }
-  .bds103ProgressCircle---size_small .bds103ProgressCircle-value {
+  .bds111ProgressCircle---size_small .bds111ProgressCircle-value {
     font-size: 0.5rem;
   }
-  .bds103ProgressCircle---size_medium .bds103ProgressCircle-value {
+  .bds111ProgressCircle---size_medium .bds111ProgressCircle-value {
     font-size: var(--bds-font_size--body--s);
   }
-  .bds103ProgressCircle---size_large .bds103ProgressCircle-value {
+  .bds111ProgressCircle---size_large .bds111ProgressCircle-value {
     font-size: var(--bds-font_size--body);
   }
   @media (prefers-reduced-motion: reduce) {
-    .bds103ProgressCircle-fill {
+    .bds111ProgressCircle-fill {
       transition: none;
     }
   }
@@ -910,25 +916,25 @@
 
 /* src/components/ui/Separator/Separator.module.css */
 @layer component {
-  .bds103Separator-separator {
+  .bds111Separator-separator {
     border: none;
     background-color: var(--separator_color, var(--bds-color_on-bg));
   }
-  .bds103Separator-separator.bds103Separator---horizontal {
+  .bds111Separator-separator.bds111Separator---horizontal {
     display: block;
-    width: 100%;
-    height: var(--separator_thickness, 1px);
+    inline-size: 100%;
+    block-size: var(--separator_thickness, 1px);
   }
-  .bds103Separator-separator.bds103Separator---vertical {
+  .bds111Separator-separator.bds111Separator---vertical {
     display: inline-block;
-    width: var(--separator_thickness, 1px);
+    inline-size: var(--separator_thickness, 1px);
     align-self: stretch;
   }
 }
 
 /* src/components/ui/Skeleton/Skeleton.module.css */
 @layer component {
-  .bds103Skeleton-skeleton {
+  .bds111Skeleton-skeleton {
     background:
       linear-gradient(
         90deg,
@@ -938,7 +944,7 @@
     background-size: 200% 100%;
     animation: shimmer 1.5s infinite;
     border-radius: var(--bds-border_radius--xs);
-    min-height: var(--bds-space_m);
+    min-block-size: var(--bds-space_m);
   }
 }
 @keyframes shimmer {
@@ -952,7 +958,7 @@
 
 /* src/components/ui/SkipLink/SkipLink.module.css */
 @layer component {
-  .bds103SkipLink-skipLink {
+  .bds111SkipLink-skipLink {
     position: absolute;
     inset-block-start: var(--bds-space_s);
     inset-inline-start: var(--bds-space_s);
@@ -971,13 +977,13 @@
     transform: translateY(-200%);
     transition: transform var(--bds-animation_transition-duration) var(--bds-animation_easing);
   }
-  .bds103SkipLink-skipLink:focus-visible {
+  .bds111SkipLink-skipLink:focus-visible {
     transform: translateY(0);
     outline: var(--bds-outline_default);
     outline-offset: var(--bds-outline_offset);
   }
   @media (prefers-reduced-motion: reduce) {
-    .bds103SkipLink-skipLink {
+    .bds111SkipLink-skipLink {
       transition: none;
     }
   }
@@ -985,9 +991,9 @@
 
 /* src/components/ui/Table/Table.module.css */
 @layer component {
-  .bds103Table-wrapper {
-    width: 100%;
-    overflow-x: auto;
+  .bds111Table-wrapper {
+    inline-size: 100%;
+    overflow-inline: auto;
     border: var(--table_border, none);
     --bdc_color: var(--bds-color_bg--subtle);
     --bdc-outline_radius: var(--bds-border_radius--s);
@@ -995,41 +1001,41 @@
     outline-offset: var(--bdc-outline_offset);
     border-radius: var(--table_radius, var(--bdc-outline_radius));
   }
-  .bds103Table-table {
-    width: 100%;
+  .bds111Table-table {
+    inline-size: 100%;
     border-collapse: collapse;
     font-size: var(--bds-font_size--body);
     font-family: var(--bds-font_family--body);
   }
-  .bds103Table-caption {
+  .bds111Table-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);
   }
-  .bds103Table-thead {
+  .bds111Table-thead {
     background-color: var(--bds-color_bg--subtle);
   }
-  .bds103Table-th {
+  .bds111Table-th {
     padding: var(--bds-space_s) var(--bds-space_m);
     text-align: start;
     font-weight: var(--bds-font_weight--semibold);
     font-size: var(--bds-font_size--body--s);
     color: var(--bds-color_on-bg--subtle);
     white-space: nowrap;
-    border-bottom: 1px solid var(--bds-color_bg--subtle);
+    border-block-end: 1px solid var(--bds-color_bg--subtle);
   }
-  .bds103Table-th.bds103Table---sortable {
+  .bds111Table-th.bds111Table---sortable {
     padding: 0;
   }
-  .bds103Table-sortButton {
+  .bds111Table-sortButton {
     all: unset;
     display: flex;
     align-items: center;
     gap: var(--bds-space_xxs);
     padding: var(--bds-space_s) var(--bds-space_m);
-    width: 100%;
+    inline-size: 100%;
     cursor: pointer;
     color: var(--bds-color_on-bg--subtle);
     font-weight: var(--bds-font_weight--semibold);
@@ -1037,47 +1043,47 @@
     transition: var(--bds-animation_transition);
     box-sizing: border-box;
   }
-  .bds103Table-sortButton:focus-visible {
+  .bds111Table-sortButton:focus-visible {
     outline: var(--bds-outline_default);
     outline-offset: calc(var(--bds-outline_offset) * -1);
   }
   @media (hover: hover) and (pointer: fine) {
-    .bds103Table-sortButton:hover {
+    .bds111Table-sortButton:hover {
       color: var(--bds-color_on-bg);
     }
   }
-  .bds103Table-sortIcon {
-    width: 1rem;
-    height: 1rem;
+  .bds111Table-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);
   }
-  .bds103Table-sortIcon.bds103Table---sort-active {
+  .bds111Table-sortIcon.bds111Table---sort-active {
     opacity: 1;
     color: var(--bds-color_interactive);
   }
-  .bds103Table-sortIcon.bds103Table---sort-desc {
+  .bds111Table-sortIcon.bds111Table---sort-desc {
     transform: rotate(180deg);
   }
-  .bds103Table-tbody .bds103Table-tr {
-    border-bottom: 1px solid var(--bds-color_bg--subtle);
+  .bds111Table-tbody .bds111Table-tr {
+    border-block-end: 1px solid var(--bds-color_bg--subtle);
     transition: var(--bds-animation_transition);
   }
-  .bds103Table-tbody .bds103Table-tr:last-child {
-    border-bottom: none;
+  .bds111Table-tbody .bds111Table-tr:last-child {
+    border-block-end: none;
   }
   @media (hover: hover) and (pointer: fine) {
-    .bds103Table-tbody .bds103Table-tr:hover {
+    .bds111Table-tbody .bds111Table-tr:hover {
       background-color: var(--bds-color_bg--subtle);
     }
   }
-  .bds103Table-td {
+  .bds111Table-td {
     padding: var(--bds-space_s) var(--bds-space_m);
     color: var(--bds-color_on-bg);
     vertical-align: middle;
   }
   @media (prefers-reduced-motion: reduce) {
-    .bds103Table-sortIcon {
+    .bds111Table-sortIcon {
       transition: none;
     }
   }
@@ -1085,16 +1091,16 @@
 
 /* src/components/ui/Tabs/Tabs.module.css */
 @layer component {
-  .bds103Tabs-tabs {
+  .bds111Tabs-tabs {
     display: flex;
     flex-direction: column;
   }
-  .bds103Tabs-tabList {
+  .bds111Tabs-tabList {
     display: flex;
-    border-bottom: 1px solid var(--bds-color_bg--subtle);
+    border-block-end: 1px solid var(--bds-color_bg--subtle);
     gap: var(--bds-space_xxs);
   }
-  .bds103Tabs-tab {
+  .bds111Tabs-tab {
     all: unset;
     display: inline-flex;
     align-items: center;
@@ -1103,33 +1109,33 @@
     font-size: var(--bds-font_size--body);
     font-weight: var(--bds-font_weight--semibold);
     color: var(--tab_color, var(--bds-color_on-bg));
-    border-bottom: 2px solid var(--tab_border-color, transparent);
-    margin-bottom: -1px;
+    border-block-end: 2px solid var(--tab_border-color, transparent);
+    margin-block-end: -1px;
     cursor: pointer;
     transition: var(--bds-animation_transition);
   }
-  .bds103Tabs-tab.bds103Tabs---active {
+  .bds111Tabs-tab.bds111Tabs---active {
     --tab_color: var(--bds-color_interactive_on-bg);
     --tab_border-color: var(--bds-color_interactive);
   }
-  .bds103Tabs-tab:disabled {
+  .bds111Tabs-tab:disabled {
     opacity: 0.4;
     cursor: not-allowed;
   }
-  .bds103Tabs-tab:focus-visible {
+  .bds111Tabs-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) {
-    .bds103Tabs-tab:not(:disabled, .bds103Tabs---active):hover {
+    .bds111Tabs-tab:not(:disabled, .bds111Tabs---active):hover {
       --tab_color: var(--bds-color_interactive_on-bg);
     }
   }
-  .bds103Tabs-panel {
+  .bds111Tabs-panel {
     padding-block-start: var(--bds-space_m);
   }
-  .bds103Tabs-panel:focus-visible {
+  .bds111Tabs-panel:focus-visible {
     outline: var(--bds-outline_default);
     outline-offset: var(--bds-outline_offset);
   }
@@ -1137,12 +1143,12 @@
 
 /* src/components/ui/Tooltip/Tooltip.module.css */
 @layer component {
-  .bds103Tooltip-wrapper {
+  .bds111Tooltip-wrapper {
     position: relative;
     display: inline-flex;
     align-items: center;
   }
-  .bds103Tooltip-tooltip {
+  .bds111Tooltip-tooltip {
     position: absolute;
     z-index: var(--bds-z-index_popover);
     padding: var(--bds-space_xxs) var(--bds-space_xs);
@@ -1157,33 +1163,33 @@
     opacity: 0;
     transition: opacity var(--bds-animation_transition-duration) var(--bds-animation_easing);
   }
-  .bds103Tooltip-wrapper:hover .bds103Tooltip-tooltip,
-  .bds103Tooltip-wrapper:focus-within .bds103Tooltip-tooltip {
+  .bds111Tooltip-wrapper:hover .bds111Tooltip-tooltip,
+  .bds111Tooltip-wrapper:focus-within .bds111Tooltip-tooltip {
     visibility: visible;
     opacity: 1;
   }
-  .bds103Tooltip---placement_top {
-    bottom: calc(100% + var(--bds-space_xs));
-    left: 50%;
+  .bds111Tooltip---placement_top {
+    inset-block-end: calc(100% + var(--bds-space_xs));
+    inset-inline-start: 50%;
     transform: translateX(-50%);
   }
-  .bds103Tooltip---placement_bottom {
-    top: calc(100% + var(--bds-space_xs));
-    left: 50%;
+  .bds111Tooltip---placement_bottom {
+    inset-block-start: calc(100% + var(--bds-space_xs));
+    inset-inline-start: 50%;
     transform: translateX(-50%);
   }
-  .bds103Tooltip---placement_left {
-    right: calc(100% + var(--bds-space_xs));
-    top: 50%;
+  .bds111Tooltip---placement_left {
+    inset-inline-end: calc(100% + var(--bds-space_xs));
+    inset-block-start: 50%;
     transform: translateY(-50%);
   }
-  .bds103Tooltip---placement_right {
-    left: calc(100% + var(--bds-space_xs));
-    top: 50%;
+  .bds111Tooltip---placement_right {
+    inset-inline-start: calc(100% + var(--bds-space_xs));
+    inset-block-start: 50%;
     transform: translateY(-50%);
   }
   @media (prefers-reduced-motion: reduce) {
-    .bds103Tooltip-tooltip {
+    .bds111Tooltip-tooltip {
       transition: none;
     }
   }
@@ -1191,34 +1197,34 @@
 
 /* src/components/ui/Typography/Typography.module.css */
 @layer component {
-  .bds103Typography-typography {
+  .bds111Typography-typography {
     margin: 0;
     font-family: var(--bds-font_family--body);
     color: var(--typography_color, var(--bds-color_on-bg));
   }
-  .bds103Typography---h1 {
+  .bds111Typography---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);
   }
-  .bds103Typography---h2 {
+  .bds111Typography---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);
   }
-  .bds103Typography---h3 {
+  .bds111Typography---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);
   }
-  .bds103Typography---body {
+  .bds111Typography---body {
     font-size: var(--bds-font_size--body);
     line-height: var(--bds-font_line-height--body);
   }
-  .bds103Typography---body_s {
+  .bds111Typography---body_s {
     font-size: var(--bds-font_size--body--s);
     line-height: var(--bds-font_line-height--body);
   }
@@ -1250,8 +1256,8 @@
   }
 }
 @layer component {
-  .bds103Button-button,
-  .bds103Button-button[href] {
+  .bds111Button-button,
+  .bds111Button-button[href] {
     all: unset;
     position: relative;
     font: inherit;
@@ -1263,12 +1269,13 @@
     cursor: pointer;
     scroll-padding-block-end: var(--bds-space_l);
     justify-content: center;
-    height: var(--button_height, 3em);
+    block-size: var(--button_height, 3em);
     font-size: var(--button_font-size, inherit);
     white-space: nowrap;
     line-height: 1;
     --button_color: var(--bds-color_green);
     --button_on-color: var(--bds-color_on-green);
+    --button_color--on-bg: var(--bds-color_green--strong);
     background-color: var(--button_bg, var(--button_color));
     color: var(--button_text, var(--button_on-color));
     border: var(--button_border, none);
@@ -1277,75 +1284,75 @@
     outline-offset: var(--bdc-outline_offset);
     transition: var(--bds-animation_transition), --bdc_color var(--bds-animation_transition-duration) var(--bds-animation_easing);
   }
-  .bds103Button-button.bds103Button---default {
+  .bds111Button-button.bds111Button---default {
   }
-  .bds103Button-button.bds103Button---ghost {
+  .bds111Button-button.bds111Button---ghost {
     --button_bg: transparent;
-    --button_text: var(--button_color);
-    --bdc_color: var(--button_color);
+    --button_text: var(--button_color--on-bg);
+    --bdc_color: var(--button_color--on-bg);
   }
-  .bds103Button-button.bds103Button---size_small {
+  .bds111Button-button.bds111Button---size_small {
     --button_height: 2.25em;
     --button_font-size: var(--bds-font_size--body--s);
     --button_border_radius--s: var(--bds-border_radius--xs);
     padding-inline: var(--bds-space_m);
   }
-  .bds103Button-button.bds103Button---size_medium {
+  .bds111Button-button.bds111Button---size_medium {
     --button_height: 3em;
     padding-inline: var(--bds-space_l);
   }
-  .bds103Button-button.bds103Button---size_large {
+  .bds111Button-button.bds111Button---size_large {
     --button_font-size: var(--bds-font_size--heading-3);
     --button_border_radius--s: var(--bds-border_radius--m);
     padding-inline: var(--bds-space_xl);
   }
-  .bds103Button-button.bds103Button---hasPulse {
+  .bds111Button-button.bds111Button---hasPulse {
     animation: pulse 3s infinite;
   }
-  .bds103Button-button[href] {
+  .bds111Button-button[href] {
     text-decoration: none;
   }
-  .bds103Button-button svg {
+  .bds111Button-button svg {
     --icon__stroke: currentcolor;
     fill: currentcolor;
     color: currentcolor;
     flex-shrink: 0;
   }
-  .bds103Button-iconStart {
+  .bds111Button-iconStart {
     display: flex;
     align-items: center;
     margin-inline-start: calc(var(--bds-space_s) * -1);
     transition: var(--bds-animation_transition);
   }
-  .bds103Button-iconEnd {
+  .bds111Button-iconEnd {
     display: flex;
     align-items: center;
     margin-inline-end: calc(var(--bds-space_s) * -1);
     transition: var(--bds-animation_transition);
   }
   @media (hover: hover) and (pointer: fine) {
-    .bds103Button-button:hover .bds103Button-iconStart svg {
+    .bds111Button-button:hover .bds111Button-iconStart svg {
       animation: fadeZoom 2s ease-out infinite;
     }
-    .bds103Button-button:hover .bds103Button-iconEnd svg {
+    .bds111Button-button:hover .bds111Button-iconEnd svg {
       animation: fadeZoom 2s ease-out infinite;
     }
   }
-  .bds103Button-button:focus-visible {
+  .bds111Button-button:focus-visible {
     outline: var(--bds-outline_default);
     outline-offset: var(--bds-outline_offset);
     border-radius: var(--bds-border_radius--s);
   }
   @media (hover: hover) and (pointer: fine) {
-    .bds103Button-button.bds103Button---default:hover {
+    .bds111Button-button.bds111Button---default:hover {
       --button_bg: var(--bds-color_bg);
-      --button_text: var(--bds-color_interactive);
-      --button_pulse-color: var(--bds-color_interactive);
+      --button_text: var(--bds-color_interactive_on-bg);
+      --button_pulse-color: var(--bds-color_interactive_on-bg);
       --bdc_color: currentcolor;
     }
   }
   @media (hover: hover) and (pointer: fine) {
-    .bds103Button-button.bds103Button---ghost:hover {
+    .bds111Button-button.bds111Button---ghost:hover {
       --button_bg: var(--button_color);
       --button_text: var(--button_on-color);
       --bdc_color: transparent;
@@ -1355,21 +1362,21 @@
 
 /* src/components/interaction/Command/Command.module.css */
 @layer component {
-  .bds103Command-dialog {
+  .bds111Command-dialog {
     padding: 0;
     border: none;
     border-radius: var(--bds-border_radius--m);
     background: transparent;
-    width: min(40rem, 90vw);
-    max-height: 70vh;
+    inline-size: min(40rem, 90vw);
+    max-block-size: 70vh;
     overflow: visible;
     margin-block-start: 10vh;
   }
-  .bds103Command-dialog::backdrop {
+  .bds111Command-dialog::backdrop {
     background-color: var(--color_backdrop, rgb(0 0 0 / 50%));
     backdrop-filter: blur(3px);
   }
-  .bds103Command-palette {
+  .bds111Command-palette {
     display: flex;
     flex-direction: column;
     background-color: var(--command_color, var(--bds-color_bg));
@@ -1377,14 +1384,14 @@
     border-radius: var(--bds-border_radius--m);
     box-shadow: var(--command_shadow, var(--bds-shadow_xl));
     overflow: hidden;
-    max-height: 70vh;
+    max-block-size: 70vh;
     border: var(--command_border, none);
     --bdc_color: currentcolor;
     --bdc-outline_radius: var(--bds-border_radius--m);
     outline: var(--bdc-outline_width) solid var(--bdc_color);
     outline-offset: var(--bdc-outline_offset);
   }
-  .bds103Command-searchRow {
+  .bds111Command-searchRow {
     display: flex;
     align-items: center;
     gap: var(--bds-space_xs);
@@ -1392,13 +1399,13 @@
     border-block-end: 1px solid currentcolor;
     flex-shrink: 0;
   }
-  .bds103Command-searchIcon {
-    width: 1.25rem;
-    height: 1.25rem;
+  .bds111Command-searchIcon {
+    inline-size: 1.25rem;
+    block-size: 1.25rem;
     color: var(--bds-color_on-bg);
     flex-shrink: 0;
   }
-  .bds103Command-search {
+  .bds111Command-search {
     flex: 1;
     border: none;
     outline: none;
@@ -1406,12 +1413,12 @@
     font-size: var(--bds-font_size--body);
     color: var(--bds-color_on-bg);
     background: transparent;
-    min-width: 0;
+    min-inline-size: 0;
   }
-  .bds103Command-search::placeholder {
+  .bds111Command-search::placeholder {
     color: var(--bds-color_on-bg);
   }
-  .bds103Command-escHint {
+  .bds111Command-escHint {
     font-size: var(--bds-font_size--body--s);
     color: var(--bds-color_on-bg);
     border-radius: var(--bds-border_radius--xs);
@@ -1422,18 +1429,18 @@
     outline: var(--bdc-outline_width) solid var(--bdc_color);
     outline-offset: var(--bdc-outline_offset);
   }
-  .bds103Command-list {
-    overflow-y: auto;
+  .bds111Command-list {
+    overflow-block: auto;
     list-style: none;
     margin: 0;
     padding: var(--bds-space_xs) 0;
   }
-  .bds103Command-groupList {
+  .bds111Command-groupList {
     list-style: none;
     margin: 0;
     padding: 0;
   }
-  .bds103Command-group {
+  .bds111Command-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);
@@ -1441,7 +1448,7 @@
     text-transform: uppercase;
     letter-spacing: 0.05em;
   }
-  .bds103Command-item {
+  .bds111Command-item {
     display: flex;
     align-items: center;
     gap: var(--bds-space_s);
@@ -1449,19 +1456,19 @@
     cursor: pointer;
     transition: background-color var(--bds-animation_transition-duration) var(--bds-animation_easing);
   }
-  .bds103Command-itemActive {
+  .bds111Command-itemActive {
     background-color: var(--bds-color_bg--subtle);
   }
-  .bds103Command-itemLabel {
+  .bds111Command-itemLabel {
     flex: 1;
     font-size: var(--bds-font_size--body);
     color: var(--bds-color_on-bg);
   }
-  .bds103Command-itemDesc {
+  .bds111Command-itemDesc {
     font-size: var(--bds-font_size--body--s);
     color: var(--bds-color_on-bg);
   }
-  .bds103Command-shortcut {
+  .bds111Command-shortcut {
     font-size: var(--bds-font_size--body--s);
     color: var(--bds-color_on-bg);
     border-radius: var(--bds-border_radius--xs);
@@ -1471,7 +1478,7 @@
     outline: var(--bdc-outline_width) solid var(--bdc_color);
     outline-offset: var(--bdc-outline_offset);
   }
-  .bds103Command-empty {
+  .bds111Command-empty {
     padding: var(--bds-space_l) var(--bds-space_m);
     text-align: center;
     color: var(--bds-color_on-bg);
@@ -1481,7 +1488,7 @@
 
 /* src/components/interaction/Dialog/Dialog.module.css */
 @layer component {
-  .bds103Dialog-dialog {
+  .bds111Dialog-dialog {
     font-size: var(--bds-font_size--body--s);
     border: var(--dialog_border, none);
     --bdc_color: currentcolor;
@@ -1493,26 +1500,24 @@
     background-color: var(--dialog_color ,var(--bds-color_grey--subtle));
     color: var(--dialog_on-color, var(--bds-color_on-grey--subtle));
     padding: var(--bds-space_l);
-    max-width: 90svw;
-    max-height: 90svh;
+    max-inline-size: 90svw;
+    max-block-size: 90svh;
     overflow: visible;
   }
-  .bds103Dialog-dialogContent {
+  .bds111Dialog-dialogContent {
     display: grid;
     gap: var(--bds-grid_gap);
-    overflow-y: auto;
-    min-height: 0;
+    overflow-block: auto;
+    min-block-size: 0;
     flex: 1;
   }
-  .bds103Dialog-closeForm {
+  .bds111Dialog-closeButton {
+    all: unset;
     position: absolute;
     inset-block-start: -1em;
     inset-inline-end: -1em;
-  }
-  .bds103Dialog-closeButton {
-    all: unset;
-    width: 2em;
-    height: 2em;
+    inline-size: 2em;
+    block-size: 2em;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -1525,11 +1530,11 @@
     outline-offset: var(--bdc-outline_offset);
     cursor: pointer;
   }
-  .bds103Dialog-closeButton svg {
-    width: 1.25em;
-    height: 1.25em;
+  .bds111Dialog-closeButton svg {
+    inline-size: 1.25em;
+    block-size: 1.25em;
   }
-  .bds103Dialog-dialog::backdrop {
+  .bds111Dialog-dialog::backdrop {
     background-color: var(--color_backdrop, rgb(0 0 0 / 50%));
     backdrop-filter: blur(3px);
   }
@@ -1537,43 +1542,43 @@
 
 /* src/components/interaction/Drawer/Drawer.module.css */
 @layer component {
-  .bds103Drawer-drawer {
+  .bds111Drawer-drawer {
     position: fixed;
     inset: 0;
     margin: 0;
     padding: 0;
-    width: 100%;
-    max-width: 100%;
-    height: 100%;
-    max-height: 100%;
+    inline-size: 100%;
+    max-inline-size: 100%;
+    block-size: 100%;
+    max-block-size: 100%;
     border: none;
     background: transparent;
     overflow: hidden;
   }
-  .bds103Drawer-drawer::backdrop {
+  .bds111Drawer-drawer::backdrop {
     background-color: var(--color_backdrop, rgb(0 0 0 / 50%));
     backdrop-filter: blur(3px);
   }
-  .bds103Drawer-panel {
+  .bds111Drawer-panel {
     position: absolute;
     inset-block: 0;
     display: flex;
     flex-direction: column;
-    width: min(28rem, 90vw);
-    height: 100%;
+    inline-size: min(28rem, 90vw);
+    block-size: 100%;
     background-color: var(--drawer_color, var(--bds-color_bg));
     color: var(--drawer_on-color, var(--bds-color_on-bg));
     box-shadow: var(--bds-shadow_xl);
     overflow: hidden;
     transition: var(--bds-animation_transition);
   }
-  .bds103Drawer---side_right .bds103Drawer-panel {
+  .bds111Drawer---side_right .bds111Drawer-panel {
     inset-inline-end: 0;
   }
-  .bds103Drawer---side_left .bds103Drawer-panel {
+  .bds111Drawer---side_left .bds111Drawer-panel {
     inset-inline-start: 0;
   }
-  .bds103Drawer-header {
+  .bds111Drawer-header {
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -1581,39 +1586,39 @@
     border-block-end: 1px solid currentcolor;
     flex-shrink: 0;
   }
-  .bds103Drawer-closeButton {
+  .bds111Drawer-closeButton {
     all: unset;
     display: flex;
     align-items: center;
     justify-content: center;
-    width: 2rem;
-    height: 2rem;
+    inline-size: 2rem;
+    block-size: 2rem;
     border-radius: 50%;
     cursor: pointer;
     transition: var(--bds-animation_transition);
   }
-  .bds103Drawer-closeButton svg {
-    width: 1.25rem;
-    height: 1.25rem;
+  .bds111Drawer-closeButton svg {
+    inline-size: 1.25rem;
+    block-size: 1.25rem;
   }
-  .bds103Drawer-closeButton:focus-visible {
+  .bds111Drawer-closeButton:focus-visible {
     outline: var(--bds-outline_default);
     outline-offset: var(--bds-outline_offset);
   }
   @media (hover: hover) and (pointer: fine) {
-    .bds103Drawer-closeButton:hover {
+    .bds111Drawer-closeButton:hover {
       background-color: var(--bds-color_bg--subtle);
     }
   }
-  .bds103Drawer-body {
+  .bds111Drawer-body {
     flex: 1;
-    overflow-y: auto;
+    overflow-block: auto;
     padding: var(--bds-space_l);
     display: flex;
     flex-direction: column;
   }
   @media (prefers-reduced-motion: reduce) {
-    .bds103Drawer-panel {
+    .bds111Drawer-panel {
       transition: none;
     }
   }
@@ -1621,15 +1626,15 @@
 
 /* src/components/interaction/DropdownMenu/DropdownMenu.module.css */
 @layer component {
-  .bds103DropdownMenu-wrapper {
+  .bds111DropdownMenu-wrapper {
     position: relative;
     display: inline-flex;
   }
-  .bds103DropdownMenu-menu {
+  .bds111DropdownMenu-menu {
     position: absolute;
-    top: calc(100% + var(--bds-space_xxs));
+    inset-block-start: calc(100% + var(--bds-space_xxs));
     z-index: var(--bds-z-index_dropdown);
-    min-width: 10rem;
+    min-inline-size: 10rem;
     padding: var(--bds-space_xxs) 0;
     border: var(--dropdown_border, none);
     --bdc_color: currentcolor;
@@ -1643,24 +1648,24 @@
     list-style: none;
     margin: 0;
   }
-  .bds103DropdownMenu---placement_bottom-start {
-    left: 0;
+  .bds111DropdownMenu---placement_bottom-start {
+    inset-inline-start: 0;
   }
-  .bds103DropdownMenu---placement_bottom-end {
-    right: 0;
+  .bds111DropdownMenu---placement_bottom-end {
+    inset-inline-end: 0;
   }
-  .bds103DropdownMenu-separator {
+  .bds111DropdownMenu-separator {
     border: none;
-    border-top: 1px solid currentcolor;
+    border-block-start: 1px solid currentcolor;
     margin: var(--bds-space_xxs) 0;
     opacity: 0.15;
   }
-  .bds103DropdownMenu-item {
+  .bds111DropdownMenu-item {
     all: unset;
     display: flex;
     align-items: center;
     gap: var(--bds-space_xs);
-    width: 100%;
+    inline-size: 100%;
     padding: var(--bds-space_xs) var(--bds-space_m);
     font-family: var(--bds-font_family--body);
     font-size: var(--bds-font_size--body);
@@ -1669,22 +1674,22 @@
     box-sizing: border-box;
     transition: var(--bds-animation_transition);
   }
-  .bds103DropdownMenu-item:disabled {
+  .bds111DropdownMenu-item:disabled {
     opacity: 0.4;
     cursor: not-allowed;
   }
-  .bds103DropdownMenu-item:focus-visible {
+  .bds111DropdownMenu-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) {
-    .bds103DropdownMenu-item:not(:disabled):hover {
+    .bds111DropdownMenu-item:not(:disabled):hover {
       background-color: var(--bds-color_bg--subtle);
       color: var(--bds-color_interactive_on-bg);
     }
   }
-  .bds103DropdownMenu-icon {
+  .bds111DropdownMenu-icon {
     display: flex;
     align-items: center;
     flex-shrink: 0;
@@ -1693,14 +1698,18 @@
 
 /* src/components/interaction/Popover/Popover.module.css */
 @layer component {
-  .bds103Popover-wrapper {
-    position: relative;
+  .bds111Popover-wrapper {
     display: inline-flex;
   }
-  .bds103Popover-panel {
-    position: absolute;
-    z-index: var(--bds-z-index_popover);
-    min-width: 12rem;
+  .bds111Popover-panel {
+    position: fixed;
+    inset: unset;
+    margin: 0;
+    overflow-block: auto;
+    z-index: var(--popover_z-index, 100);
+    min-inline-size: 12rem;
+    max-inline-size: var(--popover_max-width, 20rem);
+    max-block-size: var(--popover_max-height, 80dvh);
     padding: var(--bds-space_m);
     border: var(--popover_border, none);
     --bdc_color: currentcolor;
@@ -1713,52 +1722,149 @@
     color: var(--popover_on-color, var(--bds-color_on-bg));
     font-size: var(--bds-font_size--body);
   }
-  .bds103Popover---placement_bottom {
-    top: calc(100% + var(--bds-space_xs));
-    left: 0;
+  .bds111Popover-panel[data-placement=bottom] {
+    top: anchor(bottom);
+    left: anchor(left);
+    margin-block-start: var(--bds-space_xs, 8px);
+    position-try-fallbacks:
+      --popover-top,
+      --popover-right,
+      --popover-left;
+  }
+  .bds111Popover-panel[data-placement=top] {
+    bottom: anchor(top);
+    left: anchor(left);
+    margin-block-end: var(--bds-space_xs, 8px);
+    position-try-fallbacks:
+      --popover-bottom,
+      --popover-right,
+      --popover-left;
+  }
+  .bds111Popover-panel[data-placement=right] {
+    top: anchor(top);
+    left: anchor(right);
+    margin-inline-start: var(--bds-space_xs, 8px);
+    position-try-fallbacks:
+      --popover-left,
+      --popover-bottom,
+      --popover-top;
+  }
+  .bds111Popover-panel[data-placement=left] {
+    top: anchor(top);
+    right: anchor(left);
+    margin-inline-end: var(--bds-space_xs, 8px);
+    position-try-fallbacks:
+      --popover-right,
+      --popover-bottom,
+      --popover-top;
+  }
+  @position-try --popover-bottom {
+    top: anchor(bottom);
+    right: unset;
+    bottom: unset;
+    left: anchor(left);
+    margin: 0;
+    margin-block-start: var(--bds-space_xs, 8px);
+  }
+  @position-try --popover-top {
+    top: unset;
+    right: unset;
+    bottom: anchor(top);
+    left: anchor(left);
+    margin: 0;
+    margin-block-end: var(--bds-space_xs, 8px);
+  }
+  @position-try --popover-right {
+    top: anchor(top);
+    right: unset;
+    bottom: unset;
+    left: anchor(right);
+    margin: 0;
+    margin-inline-start: var(--bds-space_xs, 8px);
+  }
+  @position-try --popover-left {
+    top: anchor(top);
+    right: anchor(left);
+    bottom: unset;
+    left: unset;
+    margin: 0;
+    margin-inline-end: var(--bds-space_xs, 8px);
   }
-  .bds103Popover---placement_top {
-    bottom: calc(100% + var(--bds-space_xs));
-    left: 0;
+  @position-try --popover-bottom-fullwidth {
+    top: anchor(bottom);
+    right: var(--bds-space_xs, 8px);
+    bottom: unset;
+    left: var(--bds-space_xs, 8px);
+    margin: 0;
+    margin-block-start: var(--bds-space_xs, 8px);
   }
-  .bds103Popover---placement_right {
-    left: calc(100% + var(--bds-space_xs));
-    top: 0;
+  @position-try --popover-top-fullwidth {
+    top: unset;
+    right: var(--bds-space_xs, 8px);
+    bottom: anchor(top);
+    left: var(--bds-space_xs, 8px);
+    margin: 0;
+    margin-block-end: var(--bds-space_xs, 8px);
+  }
+  @media (width <= 420px) {
+    .bds111Popover-panel[data-placement=bottom],
+    .bds111Popover-panel[data-placement=top],
+    .bds111Popover-panel[data-placement=left],
+    .bds111Popover-panel[data-placement=right] {
+      left: var(--bds-space_xs, 8px);
+      right: var(--bds-space_xs, 8px);
+      inline-size: 100%;
+      max-inline-size: calc(100svw - 2 * var(--bds-space_xs, 8px));
+      position-try-fallbacks: --popover-top-fullwidth, --popover-bottom-fullwidth;
+    }
   }
-  .bds103Popover---placement_left {
-    right: calc(100% + var(--bds-space_xs));
-    top: 0;
+  @media (aspect-ratio >= 2/1) {
+    .bds111Popover-panel[data-placement=bottom] {
+      position-try-fallbacks:
+        --popover-top,
+        --popover-right,
+        --popover-left;
+    }
+    .bds111Popover-panel[data-placement=top] {
+      position-try-fallbacks:
+        --popover-bottom,
+        --popover-right,
+        --popover-left;
+    }
   }
 }
 
 /* src/components/interaction/Rating/Rating.module.css */
 @layer component {
-  .bds103Rating-rating {
+  .bds111Rating-rating {
     display: inline-flex;
     gap: var(--bds-space_xxxs);
     color: var(--bds-color_bg);
   }
-  .bds103Rating-star {
+  .bds111Rating-star {
     width: 1.5em;
     height: 1.5em;
   }
-  .bds103Rating---filled {
+  .bds111Rating---filled {
     color: var(--bds-color_warning);
   }
 }
 
 /* src/components/interaction/Toast/Toast.module.css */
 @layer component {
-  .bds103Toast-toastContainer {
+  .bds111Toast-toastContainer {
     position: fixed;
-    bottom: var(--bds-space_xl);
-    right: var(--bds-space_xl);
+    inset: unset;
+    inset-block-end: var(--bds-space_xl);
+    inset-inline-end: var(--bds-space_xl);
     display: flex;
     flex-direction: column;
     gap: var(--bds-space_m);
-    z-index: var(--bds-z-index_toast);
+    border: none;
+    padding: 0;
+    background: transparent;
   }
-  .bds103Toast-toast {
+  .bds111Toast-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));
@@ -1767,44 +1873,44 @@
     display: flex;
     align-items: center;
     gap: var(--bds-space_m);
-    min-width: 300px;
+    min-inline-size: 300px;
     animation: slideIn var(--bds-animation_duration--fast) var(--bds-animation_easing);
   }
-  .bds103Toast-toast.bds103Toast---variant_success {
+  .bds111Toast-toast.bds111Toast---variant_success {
     --toast_color: var(--bds-color_success);
     --toast_on-color: var(--bds-color_on-success);
   }
-  .bds103Toast-toast.bds103Toast---variant_warning {
+  .bds111Toast-toast.bds111Toast---variant_warning {
     --toast_color: var(--bds-color_warning);
     --toast_on-color: var(--bds-color_on-warning);
   }
-  .bds103Toast-toast.bds103Toast---variant_info {
+  .bds111Toast-toast.bds111Toast---variant_info {
     --toast_color: var(--bds-color_bg--subtle);
     --toast_on-color: var(--bds-color_on-bg--subtle);
   }
-  .bds103Toast-toast.bds103Toast---variant_error {
+  .bds111Toast-toast.bds111Toast---variant_error {
     --toast_color: var(--bds-color_error);
     --toast_on-color: var(--bds-color_on-error);
   }
-  .bds103Toast-message {
+  .bds111Toast-message {
     flex: 1;
   }
-  .bds103Toast-closeButton {
+  .bds111Toast-closeButton {
     display: flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
-    width: 1.25rem;
-    height: 1.25rem;
+    inline-size: 1.25rem;
+    block-size: 1.25rem;
     padding: 0;
     background: none;
     border: none;
     cursor: pointer;
     color: var(--toast_on-color);
   }
-  .bds103Toast-closeButton svg {
-    width: 1rem;
-    height: 1rem;
+  .bds111Toast-closeButton svg {
+    inline-size: 1rem;
+    block-size: 1rem;
   }
 }
 @keyframes slideIn {
@@ -1820,20 +1926,20 @@
 
 /* src/components/interaction/form/Checkbox/Checkbox.module.css */
 @layer component {
-  .bds103Checkbox-checkboxGroup {
+  .bds111Checkbox-checkboxGroup {
     --inputSize: calc(var(--bds-space_s) * 2);
     display: flex;
     flex-direction: column;
   }
-  .bds103Checkbox-inputWrapper {
+  .bds111Checkbox-inputWrapper {
     display: flex;
     align-items: stretch;
     gap: var(--bds-space_xs);
   }
-  .bds103Checkbox-checkbox {
+  .bds111Checkbox-checkbox {
     margin-block-start: 0.25em;
-    width: var(--inputSize);
-    height: var(--inputSize);
+    inline-size: var(--inputSize);
+    block-size: var(--inputSize);
     color: var(--checkbox_color, var(--bds-color_on-bg));
     border: var(--checkbox_border, none);
     --bdc_color: currentcolor;
@@ -1848,48 +1954,48 @@
     position: relative;
     transition: --bdc_color 0.3s ease, background-color 0.3s ease;
   }
-  .bds103Checkbox-checkbox:checked {
-    background-color: var(--checkbox_color-active, var(--bds-color_green));
-    --bdc_color: var(--checkbox_color-active, var(--bds-color_green));
+  .bds111Checkbox-checkbox:checked {
+    background-color: var(--checkbox_color-active, var(--bdc-color_active));
+    --bdc_color: var(--checkbox_color-active, var(--bdc-color_active));
   }
-  .bds103Checkbox-checkbox:checked::after {
+  .bds111Checkbox-checkbox:checked::after {
     content: "";
     position: absolute;
-    left: 0.6em;
-    top: 0.2em;
-    width: 0.5em;
-    height: 1em;
-    border: solid var(--checkbox_color-on-active, var(--bds-color_on-green));
+    inset-inline-start: 0.6em;
+    inset-block-start: 0.2em;
+    inline-size: 0.5em;
+    block-size: 1em;
+    border: solid var(--checkbox_color-on-active, var(--bdc-color_on-active));
     border-width: 0 2px 2px 0;
     transform: rotate(45deg);
   }
-  .bds103Checkbox-checkbox:focus {
+  .bds111Checkbox-checkbox:focus {
     --bdc_color: var(--bdc_color--focus);
   }
-  .bds103Checkbox-checkbox:focus-visible {
+  .bds111Checkbox-checkbox:focus-visible {
     outline: var(--bds-outline_default);
     outline-offset: var(--bds-outline_offset);
   }
-  .bds103Checkbox-checkboxError {
+  .bds111Checkbox-checkboxError {
     --bdc_color: var(--bdc_color--error);
   }
 }
 
 /* src/components/interaction/form/atoms/Message.module.css */
 @layer component {
-  .bds103Message-error,
-  .bds103Message-hint {
+  .bds111Message-error,
+  .bds111Message-hint {
     font-size: var(--bds-font_size--body--s);
     margin-inline-start: var(--labelPosition);
   }
-  .bds103Message-error {
+  .bds111Message-error {
     color: var(--bds-color_error_on-bg);
   }
 }
 
 /* src/components/interaction/form/atoms/Label.module.css */
 @layer component {
-  .bds103Label-label {
+  .bds111Label-label {
     display: flex;
     align-items: center;
     font-family: var(--bds-font_family--body);
@@ -1900,7 +2006,7 @@
 
 /* src/components/interaction/form/atoms/InputContainer.module.css */
 @layer component {
-  .bds103InputContainer-container {
+  .bds111InputContainer-container {
     --labelPosition: calc(var(--inputSize) + var(--bds-space_m));
     display: flex;
     flex-direction: column;
@@ -1910,7 +2016,7 @@
 
 /* src/components/interaction/form/CheckboxGroup/CheckboxGroup.module.css */
 @layer component {
-  .bds103CheckboxGroup-group {
+  .bds111CheckboxGroup-group {
     border: none;
     padding: 0;
     margin: 0;
@@ -1918,7 +2024,7 @@
     flex-direction: column;
     gap: var(--bds-space_xs);
   }
-  .bds103CheckboxGroup-legend {
+  .bds111CheckboxGroup-legend {
     font-family: var(--bds-font_family--body);
     font-size: var(--bds-font_size--body--s);
     font-weight: var(--bds-font_weight--medium);
@@ -1926,10 +2032,10 @@
     padding: 0;
     margin-block-end: var(--bds-space_xs);
   }
-  .bds103CheckboxGroup-required {
+  .bds111CheckboxGroup-required {
     color: var(--bds-color_error);
   }
-  .bds103CheckboxGroup-items {
+  .bds111CheckboxGroup-items {
     display: flex;
     flex-direction: column;
     gap: var(--bds-space_xs);
@@ -1938,18 +2044,18 @@
 
 /* src/components/interaction/form/Combobox/Combobox.module.css */
 @layer component {
-  .bds103Combobox-formGroup {
+  .bds111Combobox-formGroup {
     display: flex;
     flex-direction: column;
   }
-  .bds103Combobox-inputWrapper {
+  .bds111Combobox-inputWrapper {
     position: relative;
     display: flex;
     align-items: center;
   }
-  .bds103Combobox-input {
+  .bds111Combobox-input {
     appearance: none;
-    width: 100%;
+    inline-size: 100%;
     font-family: var(--bds-font_family--body);
     font-size: var(--bds-font_size--body);
     padding: var(--bds-space_s);
@@ -1965,21 +2071,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);
   }
-  .bds103Combobox-input:focus {
+  .bds111Combobox-input:focus {
     --bdc_color: var(--bdc_color--focus);
   }
-  .bds103Combobox-input:focus-visible {
+  .bds111Combobox-input:focus-visible {
     outline: var(--bds-outline_default);
     outline-offset: var(--bds-outline_offset);
   }
-  .bds103Combobox-input:disabled {
+  .bds111Combobox-input:disabled {
     opacity: 0.5;
     cursor: not-allowed;
   }
-  .bds103Combobox-inputError {
+  .bds111Combobox-inputError {
     --bdc_color: var(--bdc_color--error);
   }
-  .bds103Combobox-chevron {
+  .bds111Combobox-chevron {
     position: absolute;
     inset-inline-end: var(--bds-space_s);
     display: flex;
@@ -1987,18 +2093,17 @@
     pointer-events: none;
     color: var(--combobox_color, var(--bds-color_on-bg));
   }
-  .bds103Combobox-chevron svg {
-    width: 1rem;
-    height: 1rem;
+  .bds111Combobox-chevron svg {
+    inline-size: 1rem;
+    block-size: 1rem;
   }
-  .bds103Combobox-listbox {
+  .bds111Combobox-listbox {
     position: absolute;
-    top: calc(100% + var(--bds-space_xxs));
-    left: 0;
-    right: 0;
+    inset-block-start: calc(100% + var(--bds-space_xxs));
+    inset-inline: 0;
     z-index: var(--bds-z-index_dropdown);
-    max-height: 15rem;
-    overflow-y: auto;
+    max-block-size: 15rem;
+    overflow-block: auto;
     list-style: none;
     margin: 0;
     padding: var(--bds-space_xxs) 0;
@@ -2012,7 +2117,7 @@
     color: var(--combobox_on-color, var(--bds-color_on-bg));
     box-shadow: var(--combobox_listbox-shadow, var(--bds-shadow_m));
   }
-  .bds103Combobox-option {
+  .bds111Combobox-option {
     display: flex;
     align-items: center;
     padding: var(--bds-space_xs) var(--bds-space_m);
@@ -2021,14 +2126,14 @@
     cursor: pointer;
     transition: var(--bds-animation_transition);
   }
-  .bds103Combobox-option.bds103Combobox---highlighted {
+  .bds111Combobox-option.bds111Combobox---highlighted {
     background-color: var(--bds-color_bg--subtle);
-    color: var(--bds-color_interactive);
+    color: var(--bds-color_interactive_on-bg);
   }
-  .bds103Combobox-option.bds103Combobox---selected {
+  .bds111Combobox-option.bds111Combobox---selected {
     font-weight: var(--bds-font_weight--semibold);
   }
-  .bds103Combobox-option.bds103Combobox---disabled {
+  .bds111Combobox-option.bds111Combobox---disabled {
     opacity: 0.4;
     cursor: not-allowed;
   }
@@ -2036,18 +2141,18 @@
 
 /* src/components/interaction/form/FileInput/FileInput.module.css */
 @layer component {
-  .bds103FileInput-formGroup {
+  .bds111FileInput-formGroup {
     display: flex;
     flex-direction: column;
   }
-  .bds103FileInput-fieldLabel {
+  .bds111FileInput-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);
   }
-  .bds103FileInput-dropZone {
+  .bds111FileInput-dropZone {
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -2061,50 +2166,50 @@
     text-align: center;
     transition: var(--bds-animation_transition);
   }
-  .bds103FileInput-dropZone:focus-within {
+  .bds111FileInput-dropZone:focus-within {
     outline: var(--bds-outline_default);
     outline-offset: var(--bds-outline_offset);
     border-color: var(--fileInput_border-color, currentcolor);
   }
-  .bds103FileInput-isDragging {
+  .bds111FileInput-isDragging {
     border-color: currentcolor;
     background-color: rgb(from currentcolor r g b / 8%);
   }
-  .bds103FileInput-hasError {
+  .bds111FileInput-hasError {
     border-color: var(--bds-color_error);
   }
-  .bds103FileInput-isDisabled {
+  .bds111FileInput-isDisabled {
     opacity: 0.5;
     cursor: not-allowed;
   }
-  .bds103FileInput-icon {
-    width: 2rem;
-    height: 2rem;
+  .bds111FileInput-icon {
+    inline-size: 2rem;
+    block-size: 2rem;
     flex-shrink: 0;
   }
-  .bds103FileInput-prompt {
+  .bds111FileInput-prompt {
     font-size: var(--bds-font_size--body);
     color: var(--bds-color_on-bg);
   }
-  .bds103FileInput-prompt strong {
-    color: var(--bds-color_interactive);
+  .bds111FileInput-prompt strong {
+    color: var(--bds-color_interactive_on-bg);
     font-weight: var(--bds-font_weight--semibold);
   }
-  .bds103FileInput-acceptHint {
+  .bds111FileInput-acceptHint {
     font-size: var(--bds-font_size--body--s);
     color: var(--bds-color_on-bg);
   }
-  .bds103FileInput-hiddenInput {
+  .bds111FileInput-hiddenInput {
     position: absolute;
-    width: 1px;
-    height: 1px;
+    inline-size: 1px;
+    block-size: 1px;
     overflow: hidden;
     clip: rect(0, 0, 0, 0);
     white-space: nowrap;
     border: 0;
   }
   @media (hover: hover) and (pointer: fine) {
-    .bds103FileInput-dropZone:not(.bds103FileInput-isDisabled):hover {
+    .bds111FileInput-dropZone:not(.bds111FileInput-isDisabled):hover {
       border-color: var(--bds-color_interactive);
       background-color: rgb(from var(--bds-color_interactive) r g b / 4%);
     }
@@ -2113,12 +2218,12 @@
 
 /* src/components/interaction/form/FormInput/FormInput.module.css */
 @layer component {
-  .bds103FormInput-formGroup {
+  .bds111FormInput-formGroup {
     --labelPosition: 0;
     display: flex;
     flex-direction: column;
   }
-  .bds103FormInput-input {
+  .bds111FormInput-input {
     font-family: var(--bds-font_family--body);
     font-size: var(--bds-font_size--body);
     padding: var(--bds-space_s);
@@ -2133,25 +2238,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);
   }
-  .bds103FormInput-input:focus {
+  .bds111FormInput-input:focus {
     --bdc_color: var(--bdc_color--focus);
   }
-  .bds103FormInput-input:focus-visible {
+  .bds111FormInput-input:focus-visible {
     outline: var(--bds-outline_default);
     outline-offset: var(--bds-outline_offset);
   }
-  .bds103FormInput-inputError {
+  .bds111FormInput-inputError {
     --bdc_color: var(--bdc_color--error);
   }
 }
 
 /* src/components/interaction/form/NumberInput/NumberInput.module.css */
 @layer component {
-  .bds103NumberInput-formGroup {
+  .bds111NumberInput-formGroup {
     display: flex;
     flex-direction: column;
   }
-  .bds103NumberInput-inputRow {
+  .bds111NumberInput-inputRow {
     display: flex;
     align-items: stretch;
     border: var(--numberInput_border, none);
@@ -2164,14 +2269,14 @@
     overflow: hidden;
     transition: --bdc_color var(--bds-animation_transition-duration) var(--bds-animation_easing);
   }
-  .bds103NumberInput-inputRow:focus-within {
+  .bds111NumberInput-inputRow:focus-within {
     --bdc_color: var(--bdc_color--focus);
   }
-  .bds103NumberInput-inputRow:focus-within:has(:focus-visible) {
+  .bds111NumberInput-inputRow:focus-within:has(:focus-visible) {
     outline: var(--bds-outline_default);
     outline-offset: var(--bds-outline_offset);
   }
-  .bds103NumberInput-input {
+  .bds111NumberInput-input {
     flex: 1;
     border: none;
     outline: none;
@@ -2181,17 +2286,17 @@
     padding: var(--bds-space_s);
     background: transparent;
     color: var(--numberInput_color, var(--bds-color_on-bg));
-    min-width: 0;
+    min-inline-size: 0;
     appearance: textfield;
   }
-  .bds103NumberInput-input::-webkit-inner-spin-button,
-  .bds103NumberInput-input::-webkit-outer-spin-button {
+  .bds111NumberInput-input::-webkit-inner-spin-button,
+  .bds111NumberInput-input::-webkit-outer-spin-button {
     appearance: none;
   }
-  .bds103NumberInput-inputError {
+  .bds111NumberInput-inputError {
     --bdc_color: var(--bdc_color--error);
   }
-  .bds103NumberInput-stepper {
+  .bds111NumberInput-stepper {
     all: unset;
     display: flex;
     align-items: center;
@@ -2203,16 +2308,16 @@
     transition: var(--bds-animation_transition);
     flex-shrink: 0;
   }
-  .bds103NumberInput-stepper svg {
+  .bds111NumberInput-stepper svg {
     width: 1rem;
     height: 1rem;
   }
-  .bds103NumberInput-stepper:disabled {
+  .bds111NumberInput-stepper:disabled {
     opacity: 0.4;
     cursor: not-allowed;
   }
   @media (hover: hover) and (pointer: fine) {
-    .bds103NumberInput-stepper:not(:disabled):hover {
+    .bds111NumberInput-stepper:not(:disabled):hover {
       background-color: var(--bds-color_bg--subtle);
       opacity: 0.7;
     }
@@ -2221,33 +2326,33 @@
 
 /* src/components/interaction/form/Radio/Radio.module.css */
 @layer component {
-  .bds103Radio-radioGroup {
+  .bds111Radio-radioGroup {
     --inputSize: calc(var(--bds-space_s) * 2);
     --labelPosition: calc(var(--inputSize) + var(--bds-space_m));
     display: flex;
     flex-direction: column;
   }
-  .bds103Radio-inputWrapper {
+  .bds111Radio-inputWrapper {
     display: flex;
     align-items: flex-start;
     gap: var(--bds-space_xs);
   }
-  .bds103Radio-textWrapper {
+  .bds111Radio-textWrapper {
     display: flex;
     flex-direction: column;
     gap: var(--bds-space_xxxs);
     padding-block-start: var(--bds-space_xxxs);
   }
-  .bds103Radio-description {
+  .bds111Radio-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);
   }
-  .bds103Radio-radio {
+  .bds111Radio-radio {
     flex-shrink: 0;
     margin-block-start: 0.2em;
-    width: var(--inputSize);
-    height: var(--inputSize);
+    inline-size: var(--inputSize);
+    block-size: var(--inputSize);
     color: var(--radio_color, var(--bds-color_on-bg));
     border: var(--radio_border, none);
     --bdc_color: currentcolor;
@@ -2262,36 +2367,36 @@
     position: relative;
     transition: --bdc_color 0.2s ease, background-color 0.2s ease;
   }
-  .bds103Radio-radio:checked {
-    background-color: var(--radio_color-active, var(--bds-color_green));
-    --bdc_color: var(--radio_color-active, var(--bds-color_green));
+  .bds111Radio-radio:checked {
+    background-color: var(--radio_color-active, var(--bdc-color_active));
+    --bdc_color: var(--radio_color-active, var(--bdc-color_active));
   }
-  .bds103Radio-radio:checked::after {
+  .bds111Radio-radio:checked::after {
     content: "";
     position: absolute;
-    left: 50%;
-    top: 50%;
+    inset-inline-start: 50%;
+    inset-block-start: 50%;
     transform: translate(-50%, -50%);
-    width: 0.4em;
-    height: 0.4em;
+    inline-size: 0.4em;
+    block-size: 0.4em;
     border-radius: 50%;
-    background-color: var(--radio_color-on-active, var(--bds-color_on-green));
+    background-color: var(--radio_color-on-active, var(--bdc-color_on-active));
   }
-  .bds103Radio-radio:focus {
+  .bds111Radio-radio:focus {
     --bdc_color: var(--bdc_color--focus);
   }
-  .bds103Radio-radio:focus-visible {
+  .bds111Radio-radio:focus-visible {
     outline: var(--bds-outline_default);
     outline-offset: var(--bds-outline_offset);
   }
-  .bds103Radio-radioError {
+  .bds111Radio-radioError {
     --bdc_color: var(--bdc_color--error);
   }
 }
 
 /* src/components/interaction/form/RadioGroup/RadioGroup.module.css */
 @layer component {
-  .bds103RadioGroup-group {
+  .bds111RadioGroup-group {
     border: none;
     padding: 0;
     margin: 0;
@@ -2299,7 +2404,7 @@
     flex-direction: column;
     gap: var(--bds-space_xs);
   }
-  .bds103RadioGroup-legend {
+  .bds111RadioGroup-legend {
     font-family: var(--bds-font_family--body);
     font-size: var(--bds-font_size--body--s);
     font-weight: var(--bds-font_weight--medium);
@@ -2307,10 +2412,10 @@
     padding: 0;
     margin-block-end: var(--bds-space_xs);
   }
-  .bds103RadioGroup-required {
+  .bds111RadioGroup-required {
     color: var(--bds-color_error);
   }
-  .bds103RadioGroup-items {
+  .bds111RadioGroup-items {
     display: flex;
     flex-direction: column;
     gap: var(--bds-space_xs);
@@ -2319,7 +2424,7 @@
 
 /* src/components/interaction/form/SegmentedControl/SegmentedControl.module.css */
 @layer component {
-  .bds103SegmentedControl-control {
+  .bds111SegmentedControl-control {
     position: relative;
     display: inline-grid;
     grid-auto-flow: column;
@@ -2329,12 +2434,11 @@
     border-radius: var(--bds-border_radius--m);
     gap: 0;
   }
-  .bds103SegmentedControl-thumb {
+  .bds111SegmentedControl-thumb {
     position: absolute;
-    top: var(--bds-space_xxxs);
-    bottom: var(--bds-space_xxxs);
-    left: var(--bds-space_xxxs);
-    width: calc((100% - 2 * var(--bds-space_xxxs)) / var(--control_count, 1));
+    inset-block: var(--bds-space_xxxs);
+    inset-inline-start: var(--bds-space_xxxs);
+    inline-size: calc((100% - 2 * var(--bds-space_xxxs)) / var(--control_count, 1));
     border-radius: var(--bds-border_radius--s);
     background-color: var(--control_thumb-bg, var(--bds-color_bg));
     box-shadow: var(--bds-shadow_s);
@@ -2342,7 +2446,7 @@
     transform: translateX(calc(var(--control_selected-index, 0) * 100%));
     transition: transform var(--bds-animation_transition-duration) var(--bds-animation_easing);
   }
-  .bds103SegmentedControl-item {
+  .bds111SegmentedControl-item {
     position: relative;
     z-index: 1;
     display: flex;
@@ -2352,18 +2456,18 @@
     border-radius: var(--bds-border_radius--s);
     transition: var(--bds-animation_transition);
   }
-  .bds103SegmentedControl-item.bds103SegmentedControl---disabled {
+  .bds111SegmentedControl-item.bds111SegmentedControl---disabled {
     opacity: 0.5;
     cursor: not-allowed;
   }
-  .bds103SegmentedControl-radio {
+  .bds111SegmentedControl-radio {
     position: absolute;
     opacity: 0;
-    width: 0;
-    height: 0;
+    inline-size: 0;
+    block-size: 0;
     margin: 0;
   }
-  .bds103SegmentedControl-label {
+  .bds111SegmentedControl-label {
     display: block;
     padding: var(--bds-space_xs) var(--bds-space_m);
     white-space: nowrap;
@@ -2374,33 +2478,33 @@
     pointer-events: none;
     user-select: none;
   }
-  .bds103SegmentedControl-control.bds103SegmentedControl---size_small .bds103SegmentedControl-label {
+  .bds111SegmentedControl-control.bds111SegmentedControl---size_small .bds111SegmentedControl-label {
     padding: var(--bds-space_xxs) var(--bds-space_s);
     font-size: var(--bds-font_size--body--s);
   }
-  .bds103SegmentedControl-control.bds103SegmentedControl---size_large .bds103SegmentedControl-label {
+  .bds111SegmentedControl-control.bds111SegmentedControl---size_large .bds111SegmentedControl-label {
     padding: var(--bds-space_s) var(--bds-space_m);
     white-space: normal;
     text-align: center;
   }
-  .bds103SegmentedControl-item.bds103SegmentedControl---active .bds103SegmentedControl-label {
+  .bds111SegmentedControl-item.bds111SegmentedControl---active .bds111SegmentedControl-label {
     color: var(--control_label-color--active, var(--bds-color_on-bg));
   }
-  .bds103SegmentedControl-radio:focus-visible ~ .bds103SegmentedControl-label {
+  .bds111SegmentedControl-radio:focus-visible ~ .bds111SegmentedControl-label {
     outline: var(--bds-outline_default);
     outline-offset: calc(var(--bds-outline_offset) * -1);
     border-radius: var(--bds-border_radius--s);
   }
   @media (hover: hover) and (pointer: fine) {
-    .bds103SegmentedControl-item:not(.bds103SegmentedControl---active, .bds103SegmentedControl---disabled):hover .bds103SegmentedControl-label {
+    .bds111SegmentedControl-item:not(.bds111SegmentedControl---active, .bds111SegmentedControl---disabled):hover .bds111SegmentedControl-label {
       color: var(--control_label-color--hover, var(--bds-color_on-bg));
     }
   }
   @media (prefers-reduced-motion: reduce) {
-    .bds103SegmentedControl-thumb {
+    .bds111SegmentedControl-thumb {
       transition: none;
     }
-    .bds103SegmentedControl-label {
+    .bds111SegmentedControl-label {
       transition: none;
     }
   }
@@ -2408,18 +2512,18 @@
 
 /* src/components/interaction/form/Select/Select.module.css */
 @layer component {
-  .bds103Select-formGroup {
+  .bds111Select-formGroup {
     display: flex;
     flex-direction: column;
   }
-  .bds103Select-selectWrapper {
+  .bds111Select-selectWrapper {
     position: relative;
     display: flex;
     align-items: center;
   }
-  .bds103Select-select {
+  .bds111Select-select {
     appearance: none;
-    width: 100%;
+    inline-size: 100%;
     font-family: var(--bds-font_family--body);
     font-size: var(--bds-font_size--body);
     padding: var(--bds-space_s);
@@ -2436,21 +2540,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);
   }
-  .bds103Select-select:focus {
+  .bds111Select-select:focus {
     --bdc_color: var(--bdc_color--focus);
   }
-  .bds103Select-select:focus-visible {
+  .bds111Select-select:focus-visible {
     outline: var(--bds-outline_default);
     outline-offset: var(--bds-outline_offset);
   }
-  .bds103Select-select:disabled {
+  .bds111Select-select:disabled {
     opacity: 0.5;
     cursor: not-allowed;
   }
-  .bds103Select-selectError {
+  .bds111Select-selectError {
     --bdc_color: var(--bdc_color--error);
   }
-  .bds103Select-chevron {
+  .bds111Select-chevron {
     position: absolute;
     inset-inline-end: var(--bds-space_s);
     display: flex;
@@ -2458,77 +2562,77 @@
     pointer-events: none;
     color: var(--select_color, var(--bds-color_on-bg));
   }
-  .bds103Select-chevron svg {
-    width: 1rem;
-    height: 1rem;
+  .bds111Select-chevron svg {
+    inline-size: 1rem;
+    block-size: 1rem;
   }
 }
 
 /* src/components/interaction/form/Slider/Slider.module.css */
 @layer component {
-  .bds103Slider-formGroup {
+  .bds111Slider-formGroup {
     display: flex;
     flex-direction: column;
     gap: var(--bds-space_xxs);
   }
-  .bds103Slider-labelRow {
+  .bds111Slider-labelRow {
     display: flex;
     justify-content: space-between;
     align-items: baseline;
   }
-  .bds103Slider-value {
+  .bds111Slider-value {
     font-size: var(--bds-font_size--body--s);
     font-variant-numeric: tabular-nums;
     color: var(--bds-color_on-bg--subtle);
   }
-  .bds103Slider-slider {
+  .bds111Slider-slider {
     --slider_fill: 0%;
     --slider_track-height: var(--bds-space_xxs);
     --slider_thumb-size: calc(var(--bds-space_s) * 2);
     color: var(--slider_color, var(--bds-color_on-bg));
     appearance: none;
-    width: 100%;
-    height: var(--slider_track-height);
+    inline-size: 100%;
+    block-size: var(--slider_track-height);
     border-radius: 999px;
     background:
       linear-gradient(
         to right,
-        var(--slider_color-active, var(--bds-color_green)) 0%,
-        var(--slider_color-active, var(--bds-color_green)) var(--slider_fill),
+        var(--slider_color-active, var(--bdc-color_active)) 0%,
+        var(--slider_color-active, var(--bdc-color_active)) var(--slider_fill),
         var(--bds-color_bg--subtle) var(--slider_fill),
         var(--bds-color_bg--subtle) 100%);
     cursor: pointer;
     transition: var(--bds-animation_transition);
   }
-  .bds103Slider-slider:focus-visible {
+  .bds111Slider-slider:focus-visible {
     outline: var(--bds-outline_default);
     outline-offset: var(--bds-outline_offset);
     border-radius: 999px;
   }
-  .bds103Slider-slider:disabled {
+  .bds111Slider-slider:disabled {
     opacity: 0.4;
     cursor: not-allowed;
   }
-  .bds103Slider-slider::-webkit-slider-thumb {
+  .bds111Slider-slider::-webkit-slider-thumb {
     appearance: none;
-    width: var(--slider_thumb-size);
-    height: var(--slider_thumb-size);
+    inline-size: var(--slider_thumb-size);
+    block-size: var(--slider_thumb-size);
     border-radius: 50%;
-    background-color: var(--slider_color-active, var(--bds-color_green));
+    background-color: var(--slider_color-active, var(--bdc-color_active));
     box-shadow: var(--bds-shadow_s);
     transition: var(--bds-animation_transition);
     cursor: pointer;
   }
-  .bds103Slider-slider::-moz-range-thumb {
-    width: var(--slider_thumb-size);
-    height: var(--slider_thumb-size);
+  .bds111Slider-slider::-moz-range-thumb {
+    inline-size: var(--slider_thumb-size);
+    block-size: var(--slider_thumb-size);
     border: none;
     border-radius: 50%;
-    background-color: var(--slider_color-active, var(--bds-color_green));
+    background-color: var(--slider_color-active, var(--bdc-color_active));
     box-shadow: var(--bds-shadow_s);
     cursor: pointer;
   }
-  .bds103Slider-sliderError {
+  .bds111Slider-sliderError {
     background:
       linear-gradient(
         to right,
@@ -2537,16 +2641,16 @@
         var(--bds-color_bg--subtle) var(--slider_fill),
         var(--bds-color_bg--subtle) 100%);
   }
-  .bds103Slider-sliderError::-webkit-slider-thumb {
+  .bds111Slider-sliderError::-webkit-slider-thumb {
     background-color: var(--bds-color_error);
   }
-  .bds103Slider-sliderError::-moz-range-thumb {
+  .bds111Slider-sliderError::-moz-range-thumb {
     background-color: var(--bds-color_error);
   }
   @media (prefers-reduced-motion: reduce) {
-    .bds103Slider-slider,
-    .bds103Slider-slider::-webkit-slider-thumb,
-    .bds103Slider-slider::-moz-range-thumb {
+    .bds111Slider-slider,
+    .bds111Slider-slider::-webkit-slider-thumb,
+    .bds111Slider-slider::-moz-range-thumb {
       transition: none;
     }
   }
@@ -2554,7 +2658,7 @@
 
 /* src/components/interaction/form/Switch/Switch.module.css */
 @layer component {
-  .bds103Switch-switchGroup {
+  .bds111Switch-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);
@@ -2563,47 +2667,47 @@
     display: flex;
     flex-direction: column;
   }
-  .bds103Switch-switchGroup.bds103Switch---size_small {
+  .bds111Switch-switchGroup.bds111Switch---size_small {
     --switch_thumb-size: 1em;
   }
-  .bds103Switch-switchGroup.bds103Switch---size_medium {
+  .bds111Switch-switchGroup.bds111Switch---size_medium {
     --switch_thumb-size: 1.25em;
   }
-  .bds103Switch-switchGroup.bds103Switch---size_large {
+  .bds111Switch-switchGroup.bds111Switch---size_large {
     --switch_thumb-size: 1.5em;
   }
-  .bds103Switch-inputWrapper {
+  .bds111Switch-inputWrapper {
     display: flex;
     align-items: center;
     gap: var(--bds-space_xs);
   }
-  .bds103Switch-trackWrapper {
+  .bds111Switch-trackWrapper {
     position: relative;
     display: inline-flex;
     align-items: center;
     flex-shrink: 0;
-    width: var(--switch_track-width);
-    height: var(--switch_track-height);
+    inline-size: var(--switch_track-width);
+    block-size: var(--switch_track-height);
   }
-  .bds103Switch-switch {
+  .bds111Switch-switch {
     position: absolute;
     inset: 0;
     appearance: none;
     opacity: 0;
-    width: 100%;
-    height: 100%;
+    inline-size: 100%;
+    block-size: 100%;
     margin: 0;
     cursor: pointer;
     z-index: 1;
   }
-  .bds103Switch-switch:disabled {
+  .bds111Switch-switch:disabled {
     cursor: not-allowed;
   }
-  .bds103Switch-track {
+  .bds111Switch-track {
     display: inline-flex;
     align-items: center;
-    width: var(--switch_track-width);
-    height: var(--switch_track-height);
+    inline-size: var(--switch_track-width);
+    block-size: var(--switch_track-height);
     border-radius: 999px;
     background-color: var(--switch_track-bg, var(--bds-color_grey--subtle));
     padding-inline: var(--switch_track-pad);
@@ -2617,38 +2721,38 @@
       transform var(--bds-animation_transition-duration) var(--bds-animation_easing);
     --bdc_color: var(--switch_thumb-bg, var(--bds-color_grey));
   }
-  .bds103Switch-thumb {
+  .bds111Switch-thumb {
     display: block;
-    width: var(--switch_thumb-size);
-    height: var(--switch_thumb-size);
+    inline-size: var(--switch_thumb-size);
+    block-size: var(--switch_thumb-size);
     border-radius: 50%;
     background-color: var(--switch_thumb-bg, var(--bds-color_grey));
     box-shadow: var(--bds-shadow_s);
     transition: var(--bds-animation_transition);
     transform: translateX(0);
   }
-  .bds103Switch-switch.bds103Switch-switchError + .bds103Switch-track {
+  .bds111Switch-switch.bds111Switch-switchError + .bds111Switch-track {
     --bdc_color: var(--bds-color_error);
   }
-  .bds103Switch-switch:checked + .bds103Switch-track {
-    background-color: var(--switch_track-bg--active, var(--bds-color_green--subtle));
-    --bdc_color: var(--switch_thumb-bg--active, var(--bds-color_green--strong));
+  .bds111Switch-switch:checked + .bds111Switch-track {
+    background-color: var(--switch_track-bg--active, var(--bdc-color_active--subtle));
+    --bdc_color: var(--switch_thumb-bg--active, var(--bdc-color_active--strong));
   }
-  .bds103Switch-switch:checked + .bds103Switch-track .bds103Switch-thumb {
-    background-color: var(--switch_thumb-bg--active, var(--bds-color_green--strong));
+  .bds111Switch-switch:checked + .bds111Switch-track .bds111Switch-thumb {
+    background-color: var(--switch_thumb-bg--active, var(--bdc-color_active--strong));
     transform: translateX(var(--switch_thumb-size));
   }
-  .bds103Switch-switch:focus-visible + .bds103Switch-track {
+  .bds111Switch-switch:focus-visible + .bds111Switch-track {
     outline: var(--bds-outline_default);
     outline-offset: var(--bds-outline_offset);
     border-radius: 999px;
   }
-  .bds103Switch-switch:disabled + .bds103Switch-track {
+  .bds111Switch-switch:disabled + .bds111Switch-track {
     opacity: 0.4;
   }
   @media (prefers-reduced-motion: reduce) {
-    .bds103Switch-track,
-    .bds103Switch-thumb {
+    .bds111Switch-track,
+    .bds111Switch-thumb {
       transition: none;
     }
   }
@@ -2656,11 +2760,11 @@
 
 /* src/components/interaction/form/Textarea/Textarea.module.css */
 @layer component {
-  .bds103Textarea-formGroup {
+  .bds111Textarea-formGroup {
     display: flex;
     flex-direction: column;
   }
-  .bds103Textarea-textarea {
+  .bds111Textarea-textarea {
     font-family: var(--bds-font_family--body);
     font-size: var(--bds-font_size--body);
     line-height: var(--bds-font_line-height--body);
@@ -2675,71 +2779,71 @@
     background-color: var(--textarea_color_bg, var(--bds-color_bg));
     color: var(--textarea_color, var(--bds-color_on-bg));
     resize: vertical;
-    min-height: calc(var(--bds-space_m) * 5);
+    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);
   }
-  .bds103Textarea-textarea:focus {
+  .bds111Textarea-textarea:focus {
     --bdc_color: var(--bdc_color--focus);
   }
-  .bds103Textarea-textarea:focus-visible {
+  .bds111Textarea-textarea:focus-visible {
     outline: var(--bds-outline_default);
     outline-offset: var(--bds-outline_offset);
   }
-  .bds103Textarea-textarea:disabled {
+  .bds111Textarea-textarea:disabled {
     opacity: 0.5;
     cursor: not-allowed;
     resize: none;
   }
-  .bds103Textarea-textareaError {
+  .bds111Textarea-textareaError {
     --bdc_color: var(--bdc_color--error);
   }
 }
 
 /* src/components/layout/ButtonGroup/ButtonGroup.module.css */
 @layer component {
-  .bds103ButtonGroup-buttonGroup {
+  .bds111ButtonGroup-buttonGroup {
     container-type: inline-size;
     container-name: button-group;
     grid-column: var(--bds-grid_span-100);
   }
-  .bds103ButtonGroup-buttonGroup .bds103ButtonGroup-container {
+  .bds111ButtonGroup-buttonGroup .bds111ButtonGroup-container {
     position: relative;
     display: flex;
     flex-direction: column-reverse;
     gap: var(--bds-space_l);
     align-items: center;
   }
-  .bds103ButtonGroup-buttonGroup.bds103ButtonGroup---variant_card .bds103ButtonGroup-container {
+  .bds111ButtonGroup-buttonGroup.bds111ButtonGroup---variant_card .bds111ButtonGroup-container {
     align-items: stretch;
   }
-  .bds103ButtonGroup-buttonGroup.bds103ButtonGroup---variant_flow .bds103ButtonGroup-container,
-  .bds103ButtonGroup-buttonGroup.bds103ButtonGroup---variant_modal .bds103ButtonGroup-container {
+  .bds111ButtonGroup-buttonGroup.bds111ButtonGroup---variant_flow .bds111ButtonGroup-container,
+  .bds111ButtonGroup-buttonGroup.bds111ButtonGroup---variant_modal .bds111ButtonGroup-container {
     align-items: center;
   }
-  .bds103ButtonGroup-buttonGroup.bds103ButtonGroup---variant_content .bds103ButtonGroup-container {
+  .bds111ButtonGroup-buttonGroup.bds111ButtonGroup---variant_content .bds111ButtonGroup-container {
     align-items: flex-start;
   }
   @supports (contain: inline-size) {
     @container button-group (min-width: 30rem) {
-      .bds103ButtonGroup-buttonGroup .bds103ButtonGroup-container {
+      .bds111ButtonGroup-buttonGroup .bds111ButtonGroup-container {
         flex-direction: row;
         justify-content: space-between;
       }
-      .bds103ButtonGroup-buttonGroup.bds103ButtonGroup---variant_modal .bds103ButtonGroup-container > :first-child:last-child,
-      .bds103ButtonGroup-buttonGroup.bds103ButtonGroup---variant_flow .bds103ButtonGroup-container > :first-child:last-child {
+      .bds111ButtonGroup-buttonGroup.bds111ButtonGroup---variant_modal .bds111ButtonGroup-container > :first-child:last-child,
+      .bds111ButtonGroup-buttonGroup.bds111ButtonGroup---variant_flow .bds111ButtonGroup-container > :first-child:last-child {
         margin-inline-start: auto;
       }
-      .bds103ButtonGroup-buttonGroup.bds103ButtonGroup---variant_card .bds103ButtonGroup-container {
+      .bds111ButtonGroup-buttonGroup.bds111ButtonGroup---variant_card .bds111ButtonGroup-container {
         justify-content: center;
       }
-      .bds103ButtonGroup-buttonGroup.bds103ButtonGroup---variant_modal .bds103ButtonGroup-container {
+      .bds111ButtonGroup-buttonGroup.bds111ButtonGroup---variant_modal .bds111ButtonGroup-container {
         justify-content: flex-end;
       }
-      .bds103ButtonGroup-buttonGroup.bds103ButtonGroup---variant_content .bds103ButtonGroup-container {
+      .bds111ButtonGroup-buttonGroup.bds111ButtonGroup---variant_content .bds111ButtonGroup-container {
         justify-content: flex-start;
         align-items: center;
       }
-      .bds103ButtonGroup-buttonGroup.bds103ButtonGroup---variant_grid .bds103ButtonGroup-container {
+      .bds111ButtonGroup-buttonGroup.bds111ButtonGroup---variant_grid .bds111ButtonGroup-container {
         justify-content: center;
       }
     }
@@ -2748,70 +2852,70 @@
 
 /* src/components/layout/Card/Card.module.css */
 @layer component {
-  .bds103Card-card {
+  .bds111Card-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;
   }
-  .bds103Card-card.bds103Card---default {
+  .bds111Card-card.bds111Card---default {
     box-shadow: var(--bds-shadow_s);
   }
-  .bds103Card-card.bds103Card---elevated {
+  .bds111Card-card.bds111Card---elevated {
     box-shadow: var(--bds-shadow_m);
   }
-  .bds103Card-card.bds103Card---outlined {
+  .bds111Card-card.bds111Card---outlined {
     border: var(--card_border, none);
     --bdc_color: currentcolor;
     outline: var(--bdc-outline_width) solid var(--bdc_color);
     outline-offset: var(--bdc-outline_offset);
     box-shadow: var(--bds-shadow_s);
   }
-  .bds103Card-card.bds103Card---clickable {
+  .bds111Card-card.bds111Card---clickable {
     cursor: pointer;
   }
-  .bds103Card-card.bds103Card---padding-none {
+  .bds111Card-card.bds111Card---padding-none {
     padding: 0;
   }
-  .bds103Card-card.bds103Card---padding-small {
+  .bds111Card-card.bds111Card---padding-small {
     padding: var(--bds-space_s);
   }
-  .bds103Card-card.bds103Card---padding-medium {
+  .bds111Card-card.bds111Card---padding-medium {
     padding: var(--bds-space_m);
   }
-  .bds103Card-card.bds103Card---padding-large {
+  .bds111Card-card.bds111Card---padding-large {
     padding: var(--bds-space_l);
   }
-  .bds103Card-card.bds103Card---text-start {
+  .bds111Card-card.bds111Card---text-start {
     text-align: start;
   }
-  .bds103Card-card.bds103Card---text-center {
+  .bds111Card-card.bds111Card---text-center {
     text-align: center;
   }
-  .bds103Card-card.bds103Card---text-end {
+  .bds111Card-card.bds111Card---text-end {
     text-align: end;
   }
-  .bds103Card-card.bds103Card---clickable:focus-visible {
+  .bds111Card-card.bds111Card---clickable:focus-visible {
     outline: 2px solid var(--color_focus, currentcolor);
     outline-offset: 2px;
   }
-  .bds103Card-card.bds103Card---clickable:active {
+  .bds111Card-card.bds111Card---clickable:active {
     transform: translateY(0);
     box-shadow: var(--bds-shadow_s);
   }
   @media (hover: hover) and (pointer: fine) {
-    .bds103Card-card.bds103Card---clickable:hover {
+    .bds111Card-card.bds111Card---clickable:hover {
       transform: translateY(-2px);
       box-shadow: var(--bds-shadow_xl);
     }
-    .bds103Card-card.bds103Card---default:hover {
+    .bds111Card-card.bds111Card---default:hover {
       box-shadow: var(--bds-shadow_m);
     }
-    .bds103Card-card.bds103Card---elevated:hover {
+    .bds111Card-card.bds111Card---elevated:hover {
       box-shadow: var(--bds-shadow_2xl);
     }
-    .bds103Card-card.bds103Card---outlined:hover {
+    .bds111Card-card.bds111Card---outlined:hover {
       box-shadow: var(--bds-shadow_s);
     }
   }
@@ -2819,60 +2923,60 @@
 
 /* src/components/layout/SectionHeader/SectionHeader.module.css */
 @layer component {
-  .bds103SectionHeader-sectionHeader {
+  .bds111SectionHeader-sectionHeader {
     display: flex;
     flex-direction: column;
     gap: var(--bds-space_m);
     grid-column: var(--bds-grid_span-100);
   }
-  .bds103SectionHeader-title {
+  .bds111SectionHeader-title {
     color: var(--sectionHeader-title-color, var(--bds-color_on-bg));
     margin: 0;
     font-family: var(--bds-font_family--body);
   }
-  .bds103SectionHeader-subtitle {
+  .bds111SectionHeader-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);
   }
-  .bds103SectionHeader-sectionHeader.bds103SectionHeader---start {
+  .bds111SectionHeader-sectionHeader.bds111SectionHeader---start {
     align-items: flex-start;
     text-align: start;
   }
-  .bds103SectionHeader-sectionHeader.bds103SectionHeader---center {
+  .bds111SectionHeader-sectionHeader.bds111SectionHeader---center {
     align-items: center;
     text-align: center;
   }
-  .bds103SectionHeader-sectionHeader.bds103SectionHeader---end {
+  .bds111SectionHeader-sectionHeader.bds111SectionHeader---end {
     align-items: flex-end;
     text-align: end;
   }
-  .bds103SectionHeader-sectionHeader.bds103SectionHeader---small .bds103SectionHeader-title {
+  .bds111SectionHeader-sectionHeader.bds111SectionHeader---small .bds111SectionHeader-title {
     font-size: var(--bds-font_size--heading-1);
     line-height: var(--bds-font_line-height--heading);
     font-weight: var(--bds-font_weight--bold);
   }
-  .bds103SectionHeader-sectionHeader.bds103SectionHeader---small .bds103SectionHeader-subtitle {
+  .bds111SectionHeader-sectionHeader.bds111SectionHeader---small .bds111SectionHeader-subtitle {
     font-size: var(--bds-font_size--body);
     line-height: 1.4;
   }
-  .bds103SectionHeader-sectionHeader.bds103SectionHeader---medium .bds103SectionHeader-title {
+  .bds111SectionHeader-sectionHeader.bds111SectionHeader---medium .bds111SectionHeader-title {
     font-size: var(--bds-font_size--display);
     line-height: var(--bds-font_line-height--display);
     font-weight: var(--bds-font_weight--bold);
   }
-  .bds103SectionHeader-sectionHeader.bds103SectionHeader---medium .bds103SectionHeader-subtitle {
+  .bds111SectionHeader-sectionHeader.bds111SectionHeader---medium .bds111SectionHeader-subtitle {
     font-size: var(--bds-font_size--heading-3);
     line-height: 1.3;
   }
-  .bds103SectionHeader-sectionHeader.bds103SectionHeader---large .bds103SectionHeader-title {
+  .bds111SectionHeader-sectionHeader.bds111SectionHeader---large .bds111SectionHeader-title {
     font-size: var(--bds-font_size--display);
     line-height: var(--bds-font_line-height--display);
     font-weight: var(--bds-font_weight--bold);
     letter-spacing: var(--bds-font_tracking--tight);
   }
-  .bds103SectionHeader-sectionHeader.bds103SectionHeader---large .bds103SectionHeader-subtitle {
+  .bds111SectionHeader-sectionHeader.bds111SectionHeader---large .bds111SectionHeader-subtitle {
     font-size: var(--bds-font_size--heading-2);
     line-height: 1.3;
     font-weight: var(--bds-font_weight--medium);
@@ -2881,9 +2985,9 @@
 
 /* src/components/layout/IconWrapper/IconWrapper.module.css */
 @layer component {
-  .bds103IconWrapper-wrapper {
-    width: 2em;
-    height: 2em;
+  .bds111IconWrapper-wrapper {
+    inline-size: 2em;
+    block-size: 2em;
     font-size: 3em;
     border-radius: 50%;
     display: flex;
@@ -2896,7 +3000,7 @@
     position: relative;
     transition: var(--bds-animation_transition);
   }
-  .bds103IconWrapper-wrapper svg {
+  .bds111IconWrapper-wrapper svg {
     fill: currentcolor;
   }
 }