@boostdev/design-system-components 0.1.18 → 1.0.1

package/dist/client.css

@@ -1,74 +1,78 @@
 /* src/components/ui/Accordion/Accordion.module.css */
 @layer component {
-  .bds0118Accordion-accordion {
+  .bds101Accordion-accordion {
     display: flex;
     flex-direction: column;
-    border: 1px solid var(--color_bg--subtle);
-    border-radius: var(--border_radius--s);
+    border: var(--accordion_border, none);
+    --bdc_color: var(--bds-bg--subtle);
+    --bdc-outline_radius: var(--bds-border_radius--s);
+    outline: var(--bdc-outline_width) solid var(--bdc_color);
+    outline-offset: var(--bdc-outline_offset);
+    border-radius: var(--accordion_radius, var(--bdc-outline_radius));
     overflow: hidden;
   }
-  .bds0118Accordion-item {
-    border-bottom: 1px solid var(--color_bg--subtle);
+  .bds101Accordion-item {
+    border-bottom: 1px solid var(--bds-bg--subtle);
   }
-  .bds0118Accordion-item:last-child {
+  .bds101Accordion-item:last-child {
     border-bottom: none;
   }
-  .bds0118Accordion-heading {
+  .bds101Accordion-heading {
     margin: 0;
   }
-  .bds0118Accordion-trigger {
+  .bds101Accordion-trigger {
     all: unset;
     display: flex;
     align-items: center;
     justify-content: space-between;
     width: 100%;
-    padding: var(--space_m);
-    font-family: var(--font_family--body);
-    font-size: var(--font_size--body);
-    font-weight: var(--font_weight--semibold);
-    color: var(--color_on-bg);
+    padding: var(--bds-space_m);
+    font-family: var(--bds-font_family--body);
+    font-size: var(--bds-font_size--body);
+    font-weight: var(--bds-font_weight--semibold);
+    color: var(--bds-on-bg);
     cursor: pointer;
-    transition: var(--animation_transition);
+    transition: var(--bds-animation_transition);
     box-sizing: border-box;
   }
-  .bds0118Accordion-trigger:disabled {
+  .bds101Accordion-trigger:disabled {
     opacity: 0.4;
     cursor: not-allowed;
   }
-  .bds0118Accordion-trigger:focus-visible {
-    outline: var(--outline_default);
-    outline-offset: calc(var(--outline_offset) * -1);
-    border-radius: var(--border_radius--xs);
+  .bds101Accordion-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) {
-    .bds0118Accordion-trigger:not(:disabled):hover {
-      background-color: var(--color_bg--subtle);
+    .bds101Accordion-trigger:not(:disabled):hover {
+      background-color: var(--bds-bg--subtle);
     }
   }
-  .bds0118Accordion-triggerLabel {
+  .bds101Accordion-triggerLabel {
     flex: 1;
     text-align: start;
   }
-  .bds0118Accordion-chevron {
+  .bds101Accordion-chevron {
     width: 1.25rem;
     height: 1.25rem;
     flex-shrink: 0;
-    transition: transform var(--animation_transition-duration) var(--animation_easing);
+    transition: transform var(--bds-animation_transition-duration) var(--bds-animation_easing);
   }
-  .bds0118Accordion-item.bds0118Accordion---open .bds0118Accordion-chevron {
+  .bds101Accordion-item.bds101Accordion---open .bds101Accordion-chevron {
     transform: rotate(180deg);
   }
-  .bds0118Accordion-panel {
+  .bds101Accordion-panel {
     overflow: hidden;
   }
-  .bds0118Accordion-panelContent {
-    padding: 0 var(--space_m) var(--space_m);
-    color: var(--color_on-bg);
-    font-size: var(--font_size--body);
-    line-height: var(--font_line-height--body);
+  .bds101Accordion-panelContent {
+    padding: 0 var(--bds-space_m) var(--bds-space_m);
+    color: var(--bds-on-bg);
+    font-size: var(--bds-font_size--body);
+    line-height: var(--bds-font_line-height--body);
   }
   @media (prefers-reduced-motion: reduce) {
-    .bds0118Accordion-chevron {
+    .bds101Accordion-chevron {
       transition: none;
     }
   }
@@ -76,55 +80,55 @@
 
 /* src/components/ui/Alert/Alert.module.css */
 @layer component {
-  .bds0118Alert-alert {
+  .bds101Alert-alert {
     display: flex;
     align-items: flex-start;
-    gap: var(--space_s);
-    padding: var(--space_m);
-    border-radius: var(--border_radius--s);
-    border-inline-start: var(--space_s) solid var(--alert_border, var(--color_blue));
-    background-color: var(--alert_bg, var(--color_blue--subtle));
-    color: var(--alert_text, var(--color_on-blue--subtle));
-    font-size: var(--font_size--body);
-    line-height: var(--font_line-height--body);
-  }
-  .bds0118Alert---variant_info {
-    --alert_bg: var(--color_blue--subtle);
-    --alert_text: var(--color_on-blue--subtle);
-    --alert_border: var(--color_blue);
-  }
-  .bds0118Alert---variant_success {
-    --alert_bg: var(--color_success--subtle);
-    --alert_text: var(--color_on-success--subtle);
-    --alert_border: var(--color_success);
-  }
-  .bds0118Alert---variant_warning {
-    --alert_bg: var(--color_orange--subtle);
-    --alert_text: var(--color_on-orange--subtle);
-    --alert_border: var(--color_warning);
-  }
-  .bds0118Alert---variant_error {
-    --alert_bg: rgb(from var(--color_error) r g b / 12%);
-    --alert_text: var(--color_on-bg);
-    --alert_border: var(--color_error);
-  }
-  .bds0118Alert-icon {
+    gap: var(--bds-space_s);
+    padding: var(--bds-space_m);
+    border-radius: var(--bds-border_radius--s);
+    border-inline-start: var(--bds-space_s) solid var(--alert_border, var(--bds-blue));
+    background-color: var(--alert_bg, var(--bds-blue--subtle));
+    color: var(--alert_text, var(--bds-on-blue--subtle));
+    font-size: var(--bds-font_size--body);
+    line-height: var(--bds-font_line-height--body);
+  }
+  .bds101Alert---variant_info {
+    --alert_bg: var(--bds-blue--subtle);
+    --alert_text: var(--bds-on-blue--subtle);
+    --alert_border: var(--bds-blue);
+  }
+  .bds101Alert---variant_success {
+    --alert_bg: var(--bds-success--subtle);
+    --alert_text: var(--bds-on-success--subtle);
+    --alert_border: var(--bds-success);
+  }
+  .bds101Alert---variant_warning {
+    --alert_bg: var(--bds-orange--subtle);
+    --alert_text: var(--bds-on-orange--subtle);
+    --alert_border: var(--bds-warning);
+  }
+  .bds101Alert---variant_error {
+    --alert_bg: rgb(from var(--bds-error) r g b / 12%);
+    --alert_text: var(--bds-on-bg);
+    --alert_border: var(--bds-error);
+  }
+  .bds101Alert-icon {
     display: flex;
     align-items: center;
     flex-shrink: 0;
     margin-block-start: 0.1em;
   }
-  .bds0118Alert-content {
+  .bds101Alert-content {
     flex: 1;
     display: flex;
     flex-direction: column;
-    gap: var(--space_xxs);
+    gap: var(--bds-space_xxs);
   }
-  .bds0118Alert-title {
-    font-weight: var(--font_weight--semibold);
-    font-size: var(--font_size--body);
+  .bds101Alert-title {
+    font-weight: var(--bds-font_weight--semibold);
+    font-size: var(--bds-font_size--body);
   }
-  .bds0118Alert-dismiss {
+  .bds101Alert-dismiss {
     all: unset;
     display: flex;
     align-items: center;
@@ -132,20 +136,23 @@
     flex-shrink: 0;
     cursor: pointer;
     color: currentcolor;
-    transition: var(--animation_transition);
-    border: 1px solid currentcolor;
+    transition: var(--bds-animation_transition);
+    border: var(--alert_dismiss-border, none);
     border-radius: 50%;
+    --bdc_color: currentcolor;
+    outline: var(--bdc-outline_width) solid var(--bdc_color);
+    outline-offset: var(--bdc-outline_offset);
   }
-  .bds0118Alert-dismiss svg {
+  .bds101Alert-dismiss svg {
     width: 1rem;
     height: 1rem;
   }
-  .bds0118Alert-dismiss:focus-visible {
-    outline: var(--outline_default);
-    outline-offset: var(--outline_offset);
+  .bds101Alert-dismiss:focus-visible {
+    outline: var(--bds-outline_default);
+    outline-offset: var(--bds-outline_offset);
   }
   @media (hover: hover) and (pointer: fine) {
-    .bds0118Alert-dismiss:hover {
+    .bds101Alert-dismiss:hover {
       opacity: 0.7;
     }
   }
@@ -153,7 +160,7 @@
 
 /* src/components/ui/Avatar/Avatar.module.css */
 @layer component {
-  .bds0118Avatar-avatar {
+  .bds101Avatar-avatar {
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -163,181 +170,181 @@
     overflow: hidden;
     flex-shrink: 0;
   }
-  .bds0118Avatar-avatar.bds0118Avatar---fallback {
-    background-color: var(--avatar_bg, var(--color_blue));
-    color: var(--avatar_text, var(--color_on-blue));
-    font-weight: var(--font_weight--semibold);
+  .bds101Avatar-avatar.bds101Avatar---fallback {
+    background-color: var(--avatar_bg, var(--bds-blue));
+    color: var(--avatar_text, var(--bds-on-blue));
+    font-weight: var(--bds-font_weight--semibold);
   }
-  .bds0118Avatar-avatar.bds0118Avatar---size_small {
+  .bds101Avatar-avatar.bds101Avatar---size_small {
     --avatar_size: 2em;
   }
-  .bds0118Avatar-avatar.bds0118Avatar---size_medium {
+  .bds101Avatar-avatar.bds101Avatar---size_medium {
     --avatar_size: 3em;
   }
-  .bds0118Avatar-avatar.bds0118Avatar---size_large {
+  .bds101Avatar-avatar.bds101Avatar---size_large {
     --avatar_size: 4.5em;
   }
-  .bds0118Avatar-image {
+  .bds101Avatar-image {
     width: 100%;
     height: 100%;
     object-fit: cover;
     display: block;
   }
-  .bds0118Avatar-initials {
+  .bds101Avatar-initials {
     line-height: 1;
     user-select: none;
-    font-size: var(--font_size--body);
+    font-size: var(--bds-font_size--body);
   }
-  .bds0118Avatar-avatar.bds0118Avatar---size_small .bds0118Avatar-initials {
-    font-size: var(--font_size--body--s);
+  .bds101Avatar-avatar.bds101Avatar---size_small .bds101Avatar-initials {
+    font-size: var(--bds-font_size--body--s);
   }
-  .bds0118Avatar-avatar.bds0118Avatar---size_large .bds0118Avatar-initials {
-    font-size: var(--font_size--heading-3);
+  .bds101Avatar-avatar.bds101Avatar---size_large .bds101Avatar-initials {
+    font-size: var(--bds-font_size--heading-3);
   }
 }
 
 /* src/components/ui/Badge/Badge.module.css */
 @layer component {
-  .bds0118Badge-badge {
+  .bds101Badge-badge {
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    padding: var(--space_xxs) var(--space_xs);
+    padding: var(--bds-space_xxs) var(--bds-space_xs);
     border-radius: var(--badge_radius, 2em);
-    font-size: var(--badge_font-size, var(--font_size--body--s));
-    font-weight: var(--font_weight--semibold);
+    font-size: var(--badge_font-size, var(--bds-font_size--body--s));
+    font-weight: var(--bds-font_weight--semibold);
     line-height: 1;
     white-space: nowrap;
-    background-color: var(--badge_bg, var(--color_blue));
-    color: var(--badge_text, var(--color_on-blue));
+    background-color: var(--badge_bg, var(--bds-blue));
+    color: var(--badge_text, var(--bds-on-blue));
   }
-  .bds0118Badge---variant_primary {
-    --badge_bg: var(--color_interactive);
-    --badge_text: var(--color_on-interactive);
+  .bds101Badge---variant_primary {
+    --badge_bg: var(--bds-interactive);
+    --badge_text: var(--bds-on-interactive);
   }
-  .bds0118Badge---variant_secondary {
-    --badge_bg: var(--color_bg);
-    --badge_text: var(--color_on-bg);
+  .bds101Badge---variant_secondary {
+    --badge_bg: var(--bds-bg);
+    --badge_text: var(--bds-on-bg);
   }
-  .bds0118Badge---variant_success {
-    --badge_bg: var(--color_success);
-    --badge_text: var(--color_on-success);
+  .bds101Badge---variant_success {
+    --badge_bg: var(--bds-success);
+    --badge_text: var(--bds-on-success);
   }
-  .bds0118Badge---variant_error {
-    --badge_bg: var(--color_error);
-    --badge_text: var(--color_on-error);
+  .bds101Badge---variant_error {
+    --badge_bg: var(--bds-error);
+    --badge_text: var(--bds-on-error);
   }
-  .bds0118Badge---variant_warning {
-    --badge_bg: var(--color_warning);
-    --badge_text: var(--color_on-warning);
+  .bds101Badge---variant_warning {
+    --badge_bg: var(--bds-warning);
+    --badge_text: var(--bds-on-warning);
   }
 }
 
 /* src/components/ui/Breadcrumb/Breadcrumb.module.css */
 @layer component {
-  .bds0118Breadcrumb-breadcrumb {
-    font-size: var(--font_size--body--s);
+  .bds101Breadcrumb-breadcrumb {
+    font-size: var(--bds-font_size--body--s);
   }
-  .bds0118Breadcrumb-list {
+  .bds101Breadcrumb-list {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
-    gap: var(--space_xxs);
+    gap: var(--bds-space_xxs);
     list-style: none;
     margin: 0;
     padding: 0;
   }
-  .bds0118Breadcrumb-item {
+  .bds101Breadcrumb-item {
     display: flex;
     align-items: center;
-    gap: var(--space_xxs);
+    gap: var(--bds-space_xxs);
   }
-  .bds0118Breadcrumb-link {
-    color: var(--color_interactive);
+  .bds101Breadcrumb-link {
+    color: var(--bds-interactive);
     text-decoration: none;
-    transition: var(--animation_transition);
+    transition: var(--bds-animation_transition);
   }
-  .bds0118Breadcrumb-link:focus-visible {
-    outline: var(--outline_default);
-    outline-offset: var(--outline_offset);
-    border-radius: var(--border_radius--xs);
+  .bds101Breadcrumb-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) {
-    .bds0118Breadcrumb-link:hover {
+    .bds101Breadcrumb-link:hover {
       text-decoration: underline;
       text-underline-offset: 0.2em;
     }
   }
-  .bds0118Breadcrumb-separator {
-    color: var(--color_on-bg--subtle);
+  .bds101Breadcrumb-separator {
+    color: var(--bds-on-bg--subtle);
     user-select: none;
   }
-  .bds0118Breadcrumb-current {
-    color: var(--color_on-bg--subtle);
-    font-weight: var(--font_weight--semibold);
+  .bds101Breadcrumb-current {
+    color: var(--bds-on-bg--subtle);
+    font-weight: var(--bds-font_weight--semibold);
   }
 }
 
 /* src/components/ui/Collapsible/Collapsible.module.css */
 @layer component {
-  .bds0118Collapsible-collapsible {
-    border: var(--collapsible_border-width, 1px) solid var(--collapsible_border-color, var(--color_bg--subtle));
-    border-radius: var(--collapsible_border-radius, var(--border_radius--m));
+  .bds101Collapsible-collapsible {
+    border: var(--collapsible_border-width, 1px) solid var(--collapsible_border-color, var(--bds-bg--subtle));
+    border-radius: var(--collapsible_border-radius, var(--bds-border_radius--m));
     overflow: hidden;
   }
-  .bds0118Collapsible-summary {
+  .bds101Collapsible-summary {
     list-style: none;
     display: flex;
     align-items: center;
     justify-content: space-between;
-    gap: var(--space_m);
-    padding: var(--space_m);
+    gap: var(--bds-space_m);
+    padding: var(--bds-space_m);
     cursor: pointer;
-    font-weight: var(--font_weight--semibold);
-    font-size: var(--font_size--body);
-    color: var(--collapsible_color, var(--color_on-bg));
-    background-color: var(--collapsible_bg, var(--color_bg));
+    font-weight: var(--bds-font_weight--semibold);
+    font-size: var(--bds-font_size--body);
+    color: var(--collapsible_color, var(--bds-on-bg));
+    background-color: var(--collapsible_bg, var(--bds-bg));
     user-select: none;
-    transition: var(--animation_transition);
+    transition: var(--bds-animation_transition);
   }
-  .bds0118Collapsible-summary::-webkit-details-marker {
+  .bds101Collapsible-summary::-webkit-details-marker {
     display: none;
   }
-  .bds0118Collapsible-summary:focus-visible {
-    outline: var(--outline_default);
-    outline-offset: calc(var(--outline_offset) * -1);
+  .bds101Collapsible-summary:focus-visible {
+    outline: var(--bds-outline_default);
+    outline-offset: calc(var(--bds-outline_offset) * -1);
   }
   @media (hover: hover) and (pointer: fine) {
-    .bds0118Collapsible-summary:hover {
-      background-color: var(--collapsible_bg--hover, var(--color_bg--subtle));
+    .bds101Collapsible-summary:hover {
+      background-color: var(--collapsible_bg--hover, var(--bds-bg--subtle));
     }
   }
-  .bds0118Collapsible-collapsible[open] > .bds0118Collapsible-summary {
-    border-block-end: var(--collapsible_border-width, 1px) solid var(--collapsible_border-color, var(--color_bg--subtle));
+  .bds101Collapsible-collapsible[open] > .bds101Collapsible-summary {
+    border-block-end: var(--collapsible_border-width, 1px) solid var(--collapsible_border-color, var(--bds-bg--subtle));
   }
-  .bds0118Collapsible-summaryContent {
+  .bds101Collapsible-summaryContent {
     flex: 1;
   }
-  .bds0118Collapsible-icon {
+  .bds101Collapsible-icon {
     width: 0.5rem;
     height: 0.5rem;
     border-right: 2px solid currentcolor;
     border-bottom: 2px solid currentcolor;
     transform: rotate(45deg);
     flex-shrink: 0;
-    transition: transform var(--animation_transition-duration) var(--animation_easing);
+    transition: transform var(--bds-animation_transition-duration) var(--bds-animation_easing);
   }
-  .bds0118Collapsible-collapsible[open] > .bds0118Collapsible-summary .bds0118Collapsible-icon {
+  .bds101Collapsible-collapsible[open] > .bds101Collapsible-summary .bds101Collapsible-icon {
     transform: rotate(-135deg);
   }
-  .bds0118Collapsible-content {
-    padding: var(--space_m);
-    color: var(--collapsible_on-color, var(--color_on-bg));
-    font-size: var(--font_size--body);
-    line-height: var(--font_line-height--body);
+  .bds101Collapsible-content {
+    padding: var(--bds-space_m);
+    color: var(--collapsible_on-color, var(--bds-on-bg));
+    font-size: var(--bds-font_size--body);
+    line-height: var(--bds-font_line-height--body);
   }
   @media (prefers-reduced-motion: reduce) {
-    .bds0118Collapsible-icon {
+    .bds101Collapsible-icon {
       transition: none;
     }
   }
@@ -345,28 +352,32 @@
 
 /* src/components/ui/Calendar/Calendar.module.css */
 @layer component {
-  .bds0118Calendar-calendar {
+  .bds101Calendar-calendar {
     display: inline-flex;
     flex-direction: column;
-    gap: var(--space_s);
-    background-color: var(--color_bg);
-    border: 1px solid var(--color_bg--subtle);
-    border-radius: var(--border_radius--m);
-    padding: var(--space_m);
-    box-shadow: var(--shadow_s);
+    gap: var(--bds-space_s);
+    background-color: var(--bds-bg);
+    border: var(--calendar_border, none);
+    --bdc_color: var(--bds-bg--subtle);
+    --bdc-outline_radius: var(--bds-border_radius--m);
+    outline: var(--bdc-outline_width) solid var(--bdc_color);
+    outline-offset: var(--bdc-outline_offset);
+    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;
   }
-  .bds0118Calendar-header {
+  .bds101Calendar-header {
     display: flex;
     align-items: center;
     justify-content: space-between;
   }
-  .bds0118Calendar-monthYear {
-    font-size: var(--font_size--body);
-    font-weight: var(--font_weight--semibold);
-    color: var(--color_on-bg);
+  .bds101Calendar-monthYear {
+    font-size: var(--bds-font_size--body);
+    font-weight: var(--bds-font_weight--semibold);
+    color: var(--bds-on-bg);
   }
-  .bds0118Calendar-navBtn {
+  .bds101Calendar-navBtn {
     all: unset;
     display: flex;
     align-items: center;
@@ -375,38 +386,38 @@
     height: 2rem;
     border-radius: 50%;
     cursor: pointer;
-    color: var(--color_on-bg);
-    transition: var(--animation_transition);
+    color: var(--bds-on-bg);
+    transition: var(--bds-animation_transition);
   }
-  .bds0118Calendar-navBtn svg {
+  .bds101Calendar-navBtn svg {
     width: 1rem;
     height: 1rem;
   }
-  .bds0118Calendar-navBtn:focus-visible {
-    outline: var(--outline_default);
-    outline-offset: var(--outline_offset);
+  .bds101Calendar-navBtn:focus-visible {
+    outline: var(--bds-outline_default);
+    outline-offset: var(--bds-outline_offset);
   }
   @media (hover: hover) and (pointer: fine) {
-    .bds0118Calendar-navBtn:hover {
-      background-color: var(--color_bg--subtle);
+    .bds101Calendar-navBtn:hover {
+      background-color: var(--bds-bg--subtle);
     }
   }
-  .bds0118Calendar-grid {
+  .bds101Calendar-grid {
     border-collapse: collapse;
     width: 100%;
     table-layout: fixed;
   }
-  .bds0118Calendar-weekday {
-    font-size: var(--font_size--body--s);
-    font-weight: var(--font_weight--semibold);
-    color: var(--color_on-bg--muted);
+  .bds101Calendar-weekday {
+    font-size: var(--bds-font_size--body--s);
+    font-weight: var(--bds-font_weight--semibold);
+    color: var(--bds-on-bg);
     text-align: center;
-    padding-block-end: var(--space_xs);
+    padding-block-end: var(--bds-space_xs);
   }
-  .bds0118Calendar-empty {
+  .bds101Calendar-empty {
     padding: 0;
   }
-  .bds0118Calendar-day {
+  .bds101Calendar-day {
     all: unset;
     display: flex;
     align-items: center;
@@ -414,36 +425,39 @@
     width: 100%;
     aspect-ratio: 1;
     border-radius: 50%;
-    font-size: var(--font_size--body--s);
-    color: var(--color_on-bg);
+    font-size: var(--bds-font_size--body--s);
+    color: var(--bds-on-bg);
     cursor: pointer;
-    transition: var(--animation_transition);
+    transition: var(--bds-animation_transition);
     box-sizing: border-box;
   }
-  .bds0118Calendar-day:focus-visible {
-    outline: var(--outline_default);
-    outline-offset: var(--outline_offset);
+  .bds101Calendar-day:focus-visible {
+    outline: var(--bds-outline_default);
+    outline-offset: var(--bds-outline_offset);
   }
   @media (hover: hover) and (pointer: fine) {
-    .bds0118Calendar-day:not(.bds0118Calendar-disabled, .bds0118Calendar-selected):hover {
-      background-color: var(--color_bg--subtle);
+    .bds101Calendar-day:not(.bds101Calendar-disabled, .bds101Calendar-selected):hover {
+      background-color: var(--bds-bg--subtle);
     }
   }
-  .bds0118Calendar-today {
-    border: 2px solid var(--color_interactive);
-    font-weight: var(--font_weight--semibold);
+  .bds101Calendar-today {
+    font-weight: var(--bds-font_weight--semibold);
+    --bdc_color: var(--bds-interactive);
+    border: var(--calendar_today-border, none);
+    outline: var(--bdc-outline_width) solid var(--bdc_color);
+    outline-offset: var(--bdc-outline_offset);
   }
-  .bds0118Calendar-selected {
-    background-color: var(--color_interactive);
-    color: var(--color_on-interactive);
-    font-weight: var(--font_weight--semibold);
+  .bds101Calendar-selected {
+    background-color: var(--bds-interactive);
+    color: var(--bds-on-interactive);
+    font-weight: var(--bds-font_weight--semibold);
   }
-  .bds0118Calendar-disabled {
+  .bds101Calendar-disabled {
     opacity: 0.35;
     cursor: not-allowed;
   }
   @media (prefers-reduced-motion: reduce) {
-    .bds0118Calendar-day {
+    .bds101Calendar-day {
       transition: none;
     }
   }
@@ -451,29 +465,29 @@
 
 /* src/components/ui/Carousel/Carousel.module.css */
 @layer component {
-  .bds0118Carousel-carousel {
+  .bds101Carousel-carousel {
     position: relative;
     display: flex;
     align-items: center;
-    gap: var(--space_xs);
+    gap: var(--bds-space_xs);
   }
-  .bds0118Carousel-track {
+  .bds101Carousel-track {
     display: flex;
-    gap: var(--space_m);
+    gap: var(--bds-space_m);
     overflow-x: auto;
     scroll-snap-type: x mandatory;
     scrollbar-width: none;
     flex: 1;
     scroll-behavior: smooth;
   }
-  .bds0118Carousel-track::-webkit-scrollbar {
+  .bds101Carousel-track::-webkit-scrollbar {
     display: none;
   }
-  .bds0118Carousel-slide {
+  .bds101Carousel-slide {
     scroll-snap-align: start;
     flex-shrink: 0;
   }
-  .bds0118Carousel-navBtn {
+  .bds101Carousel-navBtn {
     all: unset;
     display: flex;
     align-items: center;
@@ -481,29 +495,32 @@
     width: 2.5rem;
     height: 2.5rem;
     border-radius: 50%;
-    background-color: var(--color_bg);
-    border: 1px solid var(--color_on-bg);
-    color: var(--color_on-bg);
+    background-color: var(--bds-bg);
+    color: var(--bds-on-bg);
+    --bdc_color: var(--bds-on-bg);
+    border: none;
+    outline: var(--bdc-outline_width) solid var(--bdc_color);
+    outline-offset: var(--bdc-outline_offset);
     cursor: pointer;
     flex-shrink: 0;
-    transition: var(--animation_transition);
-    box-shadow: var(--shadow_s);
+    transition: var(--bds-animation_transition);
+    box-shadow: var(--bds-shadow_s);
   }
-  .bds0118Carousel-navBtn svg {
+  .bds101Carousel-navBtn svg {
     width: 1.25rem;
     height: 1.25rem;
   }
-  .bds0118Carousel-navBtn:focus-visible {
-    outline: var(--outline_default);
-    outline-offset: var(--outline_offset);
+  .bds101Carousel-navBtn:focus-visible {
+    outline: var(--bds-outline_default);
+    outline-offset: var(--bds-outline_offset);
   }
   @media (hover: hover) and (pointer: fine) {
-    .bds0118Carousel-navBtn:hover {
-      background-color: var(--color_bg--subtle);
+    .bds101Carousel-navBtn:hover {
+      background-color: var(--bds-bg--subtle);
     }
   }
   @media (prefers-reduced-motion: reduce) {
-    .bds0118Carousel-track {
+    .bds101Carousel-track {
       scroll-behavior: auto;
     }
   }
@@ -511,85 +528,85 @@
 
 /* src/components/ui/DescriptionList/DescriptionList.module.css */
 @layer component {
-  .bds0118DescriptionList-list {
+  .bds101DescriptionList-list {
     display: flex;
     flex-direction: column;
-    gap: var(--space_s);
+    gap: var(--bds-space_s);
     margin: 0;
     padding: 0;
-    font-size: var(--font_size--body);
-    color: var(--color_on-bg);
+    font-size: var(--bds-font_size--body);
+    color: var(--bds-on-bg);
   }
-  .bds0118DescriptionList-group {
+  .bds101DescriptionList-group {
     display: flex;
     flex-direction: column;
-    gap: var(--space_xxs);
+    gap: var(--bds-space_xxs);
   }
-  .bds0118DescriptionList-term {
-    font-weight: var(--font_weight--semibold);
-    color: var(--color_on-bg);
+  .bds101DescriptionList-term {
+    font-weight: var(--bds-font_weight--semibold);
+    color: var(--bds-on-bg);
   }
-  .bds0118DescriptionList-details {
+  .bds101DescriptionList-details {
     margin: 0;
-    color: var(--color_on-bg--muted);
+    color: var(--bds-on-bg);
   }
-  .bds0118DescriptionList---layout_inline .bds0118DescriptionList-group {
+  .bds101DescriptionList---layout_inline .bds101DescriptionList-group {
     display: grid;
     grid-template-columns: minmax(8rem, 1fr) 2fr;
-    gap: var(--space_xs);
+    gap: var(--bds-space_xs);
     align-items: baseline;
   }
-  .bds0118DescriptionList---layout_inline .bds0118DescriptionList-term {
+  .bds101DescriptionList---layout_inline .bds101DescriptionList-term {
     grid-column: 1;
   }
-  .bds0118DescriptionList---layout_inline .bds0118DescriptionList-details {
+  .bds101DescriptionList---layout_inline .bds101DescriptionList-details {
     grid-column: 2;
   }
 }
 
 /* src/components/ui/Link/Link.module.css */
 @layer component {
-  .bds0118Link-link {
-    color: var(--link_color, var(--color_interactive));
+  .bds101Link-link {
+    color: var(--link_color, var(--bds-interactive));
     text-decoration: underline;
     text-underline-offset: 0.2em;
-    transition: var(--animation_transition);
+    transition: var(--bds-animation_transition);
     cursor: pointer;
   }
-  .bds0118Link-link:focus-visible {
-    outline: var(--outline_default);
-    outline-offset: var(--outline_offset);
-    border-radius: var(--border_radius--xs);
+  .bds101Link-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) {
-    .bds0118Link-link:hover {
-      --link_color: var(--link_color-hover, var(--color_blue--strong));
+    .bds101Link-link:hover {
+      --link_color: var(--link_color-hover, var(--bds-blue--strong));
     }
   }
-  .bds0118Link---variant_default {
-    --link_color: var(--color_interactive);
-    --link_color-hover: var(--color_blue--strong);
+  .bds101Link---variant_default {
+    --link_color: var(--bds-interactive);
+    --link_color-hover: var(--bds-blue--strong);
   }
-  .bds0118Link---variant_subtle {
-    --link_color: var(--color_on-bg);
-    --link_color-hover: var(--color_interactive);
+  .bds101Link---variant_subtle {
+    --link_color: var(--bds-on-bg);
+    --link_color-hover: var(--bds-interactive);
   }
-  .bds0118Link---variant_standalone {
-    --link_color: var(--color_interactive);
-    --link_color-hover: var(--color_blue--strong);
+  .bds101Link---variant_standalone {
+    --link_color: var(--bds-interactive);
+    --link_color-hover: var(--bds-blue--strong);
     display: inline-flex;
     align-items: center;
-    gap: var(--space_xxs);
-    font-weight: var(--font_weight--semibold);
+    gap: var(--bds-space_xxs);
+    font-weight: var(--bds-font_weight--semibold);
     text-decoration: none;
   }
   @media (hover: hover) and (pointer: fine) {
-    .bds0118Link---variant_standalone:hover {
+    .bds101Link---variant_standalone:hover {
       text-decoration: underline;
       text-underline-offset: 0.2em;
     }
   }
-  .bds0118Link-externalLabel {
+  .bds101Link-externalLabel {
     position: absolute;
     width: 1px;
     height: 1px;
@@ -604,25 +621,25 @@
 
 /* src/components/ui/Loading/Loading.module.css */
 @layer component {
-  .bds0118Loading-loading {
+  .bds101Loading-loading {
     display: flex;
     justify-content: center;
     align-items: center;
   }
-  .bds0118Loading-spinner {
+  .bds101Loading-spinner {
     width: 2.5em;
     height: 2.5em;
-    border: 4px solid var(--color_bg);
-    border-top: 4px solid var(--color_interactive);
+    border: 4px solid var(--bds-bg);
+    border-top: 4px solid var(--bds-interactive);
     border-radius: 50%;
     animation: spin 1s linear infinite;
   }
-  .bds0118Loading---size_small .bds0118Loading-spinner {
+  .bds101Loading---size_small .bds101Loading-spinner {
     width: 1.5em;
     height: 1.5em;
     border-width: 2px;
   }
-  .bds0118Loading---size_large .bds0118Loading-spinner {
+  .bds101Loading---size_large .bds101Loading-spinner {
     width: 4em;
     height: 4em;
     border-width: 6px;
@@ -636,48 +653,53 @@
     transform: rotate(360deg);
   }
 }
+@media (prefers-reduced-motion: reduce) {
+  .bds101Loading-spinner {
+    animation: none;
+  }
+}
 
 /* src/components/ui/NotificationBanner/NotificationBanner.module.css */
 @layer component {
-  .bds0118NotificationBanner-banner {
+  .bds101NotificationBanner-banner {
     display: flex;
     align-items: center;
-    gap: var(--space_m);
-    padding: var(--space_s) var(--space_m);
-    background-color: var(--banner_bg, var(--color_blue--subtle));
-    color: var(--banner_text, var(--color_on-blue--subtle));
-    border-block-end: 3px solid var(--banner_border, var(--color_blue));
-    font-size: var(--font_size--body);
-    line-height: var(--font_line-height--body);
+    gap: var(--bds-space_m);
+    padding: var(--bds-space_s) var(--bds-space_m);
+    background-color: var(--banner_bg, var(--bds-blue--subtle));
+    color: var(--banner_text, var(--bds-on-blue--subtle));
+    border-block-end: 3px solid var(--banner_border, var(--bds-blue));
+    font-size: var(--bds-font_size--body);
+    line-height: var(--bds-font_line-height--body);
     width: 100%;
   }
-  .bds0118NotificationBanner---variant_info {
-    --banner_bg: var(--color_blue--subtle);
-    --banner_text: var(--color_on-blue--subtle);
-    --banner_border: var(--color_blue);
+  .bds101NotificationBanner---variant_info {
+    --banner_bg: var(--bds-blue--subtle);
+    --banner_text: var(--bds-on-blue--subtle);
+    --banner_border: var(--bds-blue);
   }
-  .bds0118NotificationBanner---variant_success {
-    --banner_bg: var(--color_success--subtle);
-    --banner_text: var(--color_on-success--subtle);
-    --banner_border: var(--color_success);
+  .bds101NotificationBanner---variant_success {
+    --banner_bg: var(--bds-success--subtle);
+    --banner_text: var(--bds-on-success--subtle);
+    --banner_border: var(--bds-success);
   }
-  .bds0118NotificationBanner---variant_warning {
-    --banner_bg: var(--color_orange--subtle);
-    --banner_text: var(--color_on-orange--subtle);
-    --banner_border: var(--color_warning);
+  .bds101NotificationBanner---variant_warning {
+    --banner_bg: var(--bds-orange--subtle);
+    --banner_text: var(--bds-on-orange--subtle);
+    --banner_border: var(--bds-warning);
   }
-  .bds0118NotificationBanner---variant_error {
-    --banner_bg: rgb(from var(--color_error) r g b / 12%);
-    --banner_text: var(--color_on-bg);
-    --banner_border: var(--color_error);
+  .bds101NotificationBanner---variant_error {
+    --banner_bg: rgb(from var(--bds-error) r g b / 12%);
+    --banner_text: var(--bds-on-bg);
+    --banner_border: var(--bds-error);
   }
-  .bds0118NotificationBanner-content {
+  .bds101NotificationBanner-content {
     flex: 1;
   }
-  .bds0118NotificationBanner-action {
+  .bds101NotificationBanner-action {
     flex-shrink: 0;
   }
-  .bds0118NotificationBanner-dismiss {
+  .bds101NotificationBanner-dismiss {
     all: unset;
     display: flex;
     align-items: center;
@@ -686,19 +708,22 @@
     cursor: pointer;
     color: currentcolor;
     border-radius: 50%;
-    border: 1px solid currentcolor;
-    transition: var(--animation_transition);
+    border: var(--banner_dismiss-border, none);
+    transition: var(--bds-animation_transition);
+    --bdc_color: currentcolor;
+    outline: var(--bdc-outline_width) solid var(--bdc_color);
+    outline-offset: var(--bdc-outline_offset);
   }
-  .bds0118NotificationBanner-dismiss svg {
+  .bds101NotificationBanner-dismiss svg {
     width: 1rem;
     height: 1rem;
   }
-  .bds0118NotificationBanner-dismiss:focus-visible {
-    outline: var(--outline_default);
-    outline-offset: var(--outline_offset);
+  .bds101NotificationBanner-dismiss:focus-visible {
+    outline: var(--bds-outline_default);
+    outline-offset: var(--bds-outline_offset);
   }
   @media (hover: hover) and (pointer: fine) {
-    .bds0118NotificationBanner-dismiss:hover {
+    .bds101NotificationBanner-dismiss:hover {
       opacity: 0.7;
     }
   }
@@ -706,114 +731,117 @@
 
 /* src/components/ui/Pagination/Pagination.module.css */
 @layer component {
-  .bds0118Pagination-pagination {
+  .bds101Pagination-pagination {
     display: flex;
     justify-content: center;
   }
-  .bds0118Pagination-list {
+  .bds101Pagination-list {
     display: flex;
     align-items: center;
-    gap: var(--space_xxs);
+    gap: var(--bds-space_xxs);
     list-style: none;
     margin: 0;
     padding: 0;
   }
-  .bds0118Pagination-button {
+  .bds101Pagination-button {
     all: unset;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     min-width: 2.25rem;
     height: 2.25rem;
-    padding-inline: var(--space_xs);
-    border-radius: var(--border_radius--xs);
-    border: 1px solid var(--btn_border, var(--color_bg--subtle));
+    padding-inline: var(--bds-space_xs);
+    border-radius: var(--bds-border_radius--xs);
     background-color: var(--btn_bg, transparent);
-    color: var(--btn_color, var(--color_on-bg));
-    font-family: var(--font_family--body);
-    font-size: var(--font_size--body);
+    --bdc_color: var(--btn_border, var(--bds-bg--subtle));
+    border: none;
+    outline: var(--bdc-outline_width) solid var(--bdc_color);
+    outline-offset: var(--bdc-outline_offset);
+    color: var(--btn_color, var(--bds-on-bg));
+    font-family: var(--bds-font_family--body);
+    font-size: var(--bds-font_size--body);
     font-variant-numeric: tabular-nums;
     cursor: pointer;
-    transition: var(--animation_transition);
+    transition: var(--bds-animation_transition);
     box-sizing: border-box;
   }
-  .bds0118Pagination-button:disabled {
+  .bds101Pagination-button:disabled {
     opacity: 0.4;
     cursor: not-allowed;
   }
-  .bds0118Pagination-button:focus-visible {
-    outline: var(--outline_default);
-    outline-offset: var(--outline_offset);
+  .bds101Pagination-button:focus-visible {
+    outline: var(--bds-outline_default);
+    outline-offset: var(--bds-outline_offset);
   }
   @media (hover: hover) and (pointer: fine) {
-    .bds0118Pagination-button:not(:disabled, .bds0118Pagination---active):hover {
-      --btn_bg: var(--color_bg--subtle);
-      --btn_color: var(--color_interactive);
+    .bds101Pagination-button:not(:disabled, .bds101Pagination---active):hover {
+      --btn_bg: var(--bds-bg--subtle);
+      --btn_color: var(--bds-interactive);
     }
   }
-  .bds0118Pagination-button.bds0118Pagination---active {
-    --btn_bg: var(--color_interactive);
-    --btn_color: var(--color_on-interactive);
-    --btn_border: var(--color_interactive);
+  .bds101Pagination-button.bds101Pagination---active {
+    --btn_bg: var(--bds-interactive);
+    --btn_color: var(--bds-on-interactive);
+    --btn_border: var(--bds-interactive);
   }
-  .bds0118Pagination-button.bds0118Pagination---nav svg {
+  .bds101Pagination-button.bds101Pagination---nav svg {
     width: 1rem;
     height: 1rem;
   }
-  .bds0118Pagination-ellipsis {
+  .bds101Pagination-ellipsis {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     min-width: 2.25rem;
     height: 2.25rem;
-    color: var(--color_on-bg--subtle);
-    font-size: var(--font_size--body);
+    color: var(--bds-on-bg--subtle);
+    font-size: var(--bds-font_size--body);
     user-select: none;
   }
 }
 
 /* src/components/ui/Progress/Progress.module.css */
 @layer component {
-  .bds0118Progress-container {
+  .bds101Progress-container {
     display: flex;
     flex-direction: column;
-    gap: var(--space_xxs);
+    gap: var(--bds-space_xxs);
     width: 100%;
   }
-  .bds0118Progress-labelRow {
+  .bds101Progress-labelRow {
     display: flex;
     justify-content: space-between;
     align-items: baseline;
-    font-size: var(--font_size--body--s);
-    color: var(--color_on-bg);
+    font-size: var(--bds-font_size--body--s);
+    color: var(--bds-on-bg);
   }
-  .bds0118Progress-value {
+  .bds101Progress-value {
     font-variant-numeric: tabular-nums;
   }
-  .bds0118Progress-track {
+  .bds101Progress-track {
     width: 100%;
-    height: var(--progress_height, var(--space_xs));
-    background-color: var(--color_bg--subtle);
+    height: var(--progress_height, var(--bds-space_xs));
+    background-color: var(--bds-bg--subtle);
     border-radius: 999px;
     overflow: hidden;
   }
-  .bds0118Progress-track.bds0118Progress---size_small {
-    --progress_height: var(--space_xxs);
+  .bds101Progress-track.bds101Progress---size_small {
+    --progress_height: var(--bds-space_xxs);
   }
-  .bds0118Progress-track.bds0118Progress---size_medium {
-    --progress_height: var(--space_xs);
+  .bds101Progress-track.bds101Progress---size_medium {
+    --progress_height: var(--bds-space_xs);
   }
-  .bds0118Progress-track.bds0118Progress---size_large {
-    --progress_height: var(--space_s);
+  .bds101Progress-track.bds101Progress---size_large {
+    --progress_height: var(--bds-space_s);
   }
-  .bds0118Progress-fill {
+  .bds101Progress-fill {
     height: 100%;
-    background-color: var(--progress_color-active, var(--color_active));
+    background-color: var(--progress_color-active, var(--bds-active));
     border-radius: 999px;
-    transition: width var(--animation_transition-duration) var(--animation_easing);
+    transition: width var(--bds-animation_transition-duration) var(--bds-animation_easing);
   }
   @media (prefers-reduced-motion: reduce) {
-    .bds0118Progress-fill {
+    .bds101Progress-fill {
       transition: none;
     }
   }
@@ -821,41 +849,41 @@
 
 /* src/components/ui/ProgressCircle/ProgressCircle.module.css */
 @layer component {
-  .bds0118ProgressCircle-wrapper {
+  .bds101ProgressCircle-wrapper {
     position: relative;
     display: inline-flex;
     align-items: center;
     justify-content: center;
   }
-  .bds0118ProgressCircle-svg {
+  .bds101ProgressCircle-svg {
     display: block;
   }
-  .bds0118ProgressCircle-track {
-    stroke: var(--color_bg--subtle);
+  .bds101ProgressCircle-track {
+    stroke: var(--bds-bg--subtle);
   }
-  .bds0118ProgressCircle-fill {
-    stroke: var(--progressCircle_color-active, var(--color_active));
-    transition: stroke-dashoffset var(--animation_transition-duration) var(--animation_easing);
+  .bds101ProgressCircle-fill {
+    stroke: var(--progressCircle_color-active, var(--bds-active));
+    transition: stroke-dashoffset var(--bds-animation_transition-duration) var(--bds-animation_easing);
   }
-  .bds0118ProgressCircle-value {
+  .bds101ProgressCircle-value {
     position: absolute;
-    font-size: var(--font_size--body--s);
-    font-weight: var(--font_weight--semibold);
+    font-size: var(--bds-font_size--body--s);
+    font-weight: var(--bds-font_weight--semibold);
     font-variant-numeric: tabular-nums;
-    color: var(--color_on-bg);
+    color: var(--bds-on-bg);
     line-height: 1;
   }
-  .bds0118ProgressCircle---size_small .bds0118ProgressCircle-value {
+  .bds101ProgressCircle---size_small .bds101ProgressCircle-value {
     font-size: 0.5rem;
   }
-  .bds0118ProgressCircle---size_medium .bds0118ProgressCircle-value {
-    font-size: var(--font_size--body--s);
+  .bds101ProgressCircle---size_medium .bds101ProgressCircle-value {
+    font-size: var(--bds-font_size--body--s);
   }
-  .bds0118ProgressCircle---size_large .bds0118ProgressCircle-value {
-    font-size: var(--font_size--body);
+  .bds101ProgressCircle---size_large .bds101ProgressCircle-value {
+    font-size: var(--bds-font_size--body);
   }
   @media (prefers-reduced-motion: reduce) {
-    .bds0118ProgressCircle-fill {
+    .bds101ProgressCircle-fill {
       transition: none;
     }
   }
@@ -863,16 +891,16 @@
 
 /* src/components/ui/Separator/Separator.module.css */
 @layer component {
-  .bds0118Separator-separator {
+  .bds101Separator-separator {
     border: none;
-    background-color: var(--separator_color, var(--color_on-bg));
+    background-color: var(--separator_color, var(--bds-on-bg));
   }
-  .bds0118Separator-separator.bds0118Separator---horizontal {
+  .bds101Separator-separator.bds101Separator---horizontal {
     display: block;
     width: 100%;
     height: var(--separator_thickness, 1px);
   }
-  .bds0118Separator-separator.bds0118Separator---vertical {
+  .bds101Separator-separator.bds101Separator---vertical {
     display: inline-block;
     width: var(--separator_thickness, 1px);
     align-self: stretch;
@@ -881,17 +909,17 @@
 
 /* src/components/ui/Skeleton/Skeleton.module.css */
 @layer component {
-  .bds0118Skeleton-skeleton {
+  .bds101Skeleton-skeleton {
     background:
       linear-gradient(
         90deg,
-        var(--color_grey--subtle) 25%,
-        var(--color_bg) 50%,
-        var(--color_grey--subtle) 75%);
+        var(--bds-grey--subtle) 25%,
+        var(--bds-bg) 50%,
+        var(--bds-grey--subtle) 75%);
     background-size: 200% 100%;
     animation: shimmer 1.5s infinite;
-    border-radius: var(--border_radius--xs);
-    min-height: var(--space_m);
+    border-radius: var(--bds-border_radius--xs);
+    min-height: var(--bds-space_m);
   }
 }
 @keyframes shimmer {
@@ -905,29 +933,32 @@
 
 /* src/components/ui/SkipLink/SkipLink.module.css */
 @layer component {
-  .bds0118SkipLink-skipLink {
+  .bds101SkipLink-skipLink {
     position: absolute;
-    inset-block-start: var(--space_s);
-    inset-inline-start: var(--space_s);
+    inset-block-start: var(--bds-space_s);
+    inset-inline-start: var(--bds-space_s);
     z-index: var(--z_overlay);
-    padding: var(--space_xs) var(--space_m);
-    background-color: var(--color_bg);
-    color: var(--color_on-bg);
-    font-size: var(--font_size--body);
-    font-weight: var(--font_weight--semibold);
-    border-radius: var(--border_radius--s);
-    border: 2px solid var(--color_focus);
+    padding: var(--bds-space_xs) var(--bds-space_m);
+    background-color: var(--bds-bg);
+    color: var(--bds-on-bg);
+    font-size: var(--bds-font_size--body);
+    font-weight: var(--bds-font_weight--semibold);
+    border-radius: var(--bds-border_radius--s);
     text-decoration: none;
+    --bdc_color: var(--color_focus, var(--bds-interactive));
+    border: var(--skip-link_border, none);
+    outline: var(--bdc-outline_width) solid var(--bdc_color);
+    outline-offset: var(--bdc-outline_offset);
     transform: translateY(-200%);
-    transition: transform var(--animation_transition-duration) var(--animation_easing);
+    transition: transform var(--bds-animation_transition-duration) var(--bds-animation_easing);
   }
-  .bds0118SkipLink-skipLink:focus-visible {
+  .bds101SkipLink-skipLink:focus-visible {
     transform: translateY(0);
-    outline: var(--outline_default);
-    outline-offset: var(--outline_offset);
+    outline: var(--bds-outline_default);
+    outline-offset: var(--bds-outline_offset);
   }
   @media (prefers-reduced-motion: reduce) {
-    .bds0118SkipLink-skipLink {
+    .bds101SkipLink-skipLink {
       transition: none;
     }
   }
@@ -935,95 +966,99 @@
 
 /* src/components/ui/Table/Table.module.css */
 @layer component {
-  .bds0118Table-wrapper {
+  .bds101Table-wrapper {
     width: 100%;
     overflow-x: auto;
-    border-radius: var(--border_radius--s);
-    border: 1px solid var(--color_bg--subtle);
-  }
-  .bds0118Table-table {
+    border: var(--table_border, none);
+    --bdc_color: var(--bds-bg--subtle);
+    --bdc-outline_radius: var(--bds-border_radius--s);
+    outline: var(--bdc-outline_width) solid var(--bdc_color);
+    outline-offset: var(--bdc-outline_offset);
+    border-radius: var(--table_radius, var(--bdc-outline_radius));
+  }
+  .bds101Table-table {
     width: 100%;
     border-collapse: collapse;
-    font-size: var(--font_size--body);
-    font-family: var(--font_family--body);
+    font-size: var(--bds-font_size--body);
+    font-family: var(--bds-font_family--body);
   }
-  .bds0118Table-caption {
+  .bds101Table-caption {
     caption-side: top;
     text-align: start;
-    padding: var(--space_s) var(--space_m);
-    font-weight: var(--font_weight--semibold);
-    color: var(--color_on-bg);
+    padding: var(--bds-space_s) var(--bds-space_m);
+    font-weight: var(--bds-font_weight--semibold);
+    color: var(--bds-on-bg);
   }
-  .bds0118Table-thead {
-    background-color: var(--color_bg--subtle);
+  .bds101Table-thead {
+    background-color: var(--bds-bg--subtle);
   }
-  .bds0118Table-th {
-    padding: var(--space_s) var(--space_m);
+  .bds101Table-th {
+    padding: var(--bds-space_s) var(--bds-space_m);
     text-align: start;
-    font-weight: var(--font_weight--semibold);
-    font-size: var(--font_size--body--s);
-    color: var(--color_on-bg--subtle);
+    font-weight: var(--bds-font_weight--semibold);
+    font-size: var(--bds-font_size--body--s);
+    color: var(--bds-on-bg--subtle);
     white-space: nowrap;
-    border-bottom: 1px solid var(--color_bg--subtle);
+    border-bottom: 1px solid var(--bds-bg--subtle);
   }
-  .bds0118Table-th.bds0118Table---sortable {
+  .bds101Table-th.bds101Table---sortable {
     padding: 0;
   }
-  .bds0118Table-sortButton {
+  .bds101Table-sortButton {
     all: unset;
     display: flex;
     align-items: center;
-    gap: var(--space_xxs);
-    padding: var(--space_s) var(--space_m);
+    gap: var(--bds-space_xxs);
+    padding: var(--bds-space_s) var(--bds-space_m);
     width: 100%;
     cursor: pointer;
-    color: var(--color_on-bg--subtle);
-    font-weight: var(--font_weight--semibold);
-    font-size: var(--font_size--body--s);
-    transition: var(--animation_transition);
+    color: var(--bds-on-bg--subtle);
+    font-weight: var(--bds-font_weight--semibold);
+    font-size: var(--bds-font_size--body--s);
+    transition: var(--bds-animation_transition);
     box-sizing: border-box;
   }
-  .bds0118Table-sortButton:focus-visible {
-    outline: var(--outline_default);
-    outline-offset: calc(var(--outline_offset) * -1);
+  .bds101Table-sortButton:focus-visible {
+    outline: var(--bds-outline_default);
+    outline-offset: calc(var(--bds-outline_offset) * -1);
   }
   @media (hover: hover) and (pointer: fine) {
-    .bds0118Table-sortButton:hover {
-      color: var(--color_on-bg);
+    .bds101Table-sortButton:hover {
+      color: var(--bds-on-bg);
     }
   }
-  .bds0118Table-sortIcon {
+  .bds101Table-sortIcon {
     width: 1rem;
     height: 1rem;
     opacity: 0.4;
-    transition: transform var(--animation_transition-duration) var(--animation_easing), opacity var(--animation_transition-duration) var(--animation_easing);
+    transition: transform var(--bds-animation_transition-duration) var(--bds-animation_easing), opacity var(--bds-animation_transition-duration) var(--bds-animation_easing);
   }
-  .bds0118Table-sortIcon.bds0118Table---sort-active {
+  .bds101Table-sortIcon.bds101Table---sort-active {
     opacity: 1;
-    color: var(--color_interactive);
+    color: var(--bds-interactive);
   }
-  .bds0118Table-sortIcon.bds0118Table---sort-desc {
+  .bds101Table-sortIcon.bds101Table---sort-desc {
     transform: rotate(180deg);
   }
-  .bds0118Table-tbody .bds0118Table-tr {
-    border-bottom: 1px solid var(--color_bg--subtle);
-    transition: var(--animation_transition);
+  .bds101Table-tbody .bds101Table-tr {
+    border-bottom: 1px solid var(--bds-bg--subtle);
+    transition: var(--bds-animation_transition);
   }
-  .bds0118Table-tbody .bds0118Table-tr:last-child {
+  .bds101Table-tbody .bds101Table-tr:last-child {
     border-bottom: none;
   }
   @media (hover: hover) and (pointer: fine) {
-    .bds0118Table-tbody .bds0118Table-tr:hover {
-      background-color: var(--color_bg--subtle);
+    .bds101Table-tbody .bds101Table-tr:hover {
+      background-color: var(--bds-bg--subtle);
     }
   }
-  .bds0118Table-td {
-    padding: var(--space_s) var(--space_m);
-    color: var(--color_on-bg);
+  .bds101Table-td {
+    padding: var(--bds-space_s) var(--bds-space_m);
+    color: var(--bds-on-bg);
     vertical-align: middle;
   }
   @media (prefers-reduced-motion: reduce) {
-    .bds0118Table-sortIcon {
+    .bds101Table-sortIcon {
       transition: none;
     }
   }
@@ -1031,105 +1066,105 @@
 
 /* src/components/ui/Tabs/Tabs.module.css */
 @layer component {
-  .bds0118Tabs-tabs {
+  .bds101Tabs-tabs {
     display: flex;
     flex-direction: column;
   }
-  .bds0118Tabs-tabList {
+  .bds101Tabs-tabList {
     display: flex;
-    border-bottom: 1px solid var(--color_bg--subtle);
-    gap: var(--space_xxs);
+    border-bottom: 1px solid var(--bds-bg--subtle);
+    gap: var(--bds-space_xxs);
   }
-  .bds0118Tabs-tab {
+  .bds101Tabs-tab {
     all: unset;
     display: inline-flex;
     align-items: center;
-    padding: var(--space_s) var(--space_m);
-    font-family: var(--font_family--body);
-    font-size: var(--font_size--body);
-    font-weight: var(--font_weight--semibold);
-    color: var(--tab_color, var(--color_on-bg));
+    padding: var(--bds-space_s) var(--bds-space_m);
+    font-family: var(--bds-font_family--body);
+    font-size: var(--bds-font_size--body);
+    font-weight: var(--bds-font_weight--semibold);
+    color: var(--tab_color, var(--bds-on-bg));
     border-bottom: 2px solid var(--tab_border-color, transparent);
     margin-bottom: -1px;
     cursor: pointer;
-    transition: var(--animation_transition);
+    transition: var(--bds-animation_transition);
   }
-  .bds0118Tabs-tab.bds0118Tabs---active {
-    --tab_color: var(--color_interactive);
-    --tab_border-color: var(--color_interactive);
+  .bds101Tabs-tab.bds101Tabs---active {
+    --tab_color: var(--bds-interactive);
+    --tab_border-color: var(--bds-interactive);
   }
-  .bds0118Tabs-tab:disabled {
+  .bds101Tabs-tab:disabled {
     opacity: 0.4;
     cursor: not-allowed;
   }
-  .bds0118Tabs-tab:focus-visible {
-    outline: var(--outline_default);
-    outline-offset: var(--outline_offset);
-    border-radius: var(--border_radius--xs);
+  .bds101Tabs-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) {
-    .bds0118Tabs-tab:not(:disabled, .bds0118Tabs---active):hover {
-      --tab_color: var(--color_interactive);
+    .bds101Tabs-tab:not(:disabled, .bds101Tabs---active):hover {
+      --tab_color: var(--bds-interactive);
     }
   }
-  .bds0118Tabs-panel {
-    padding-block-start: var(--space_m);
+  .bds101Tabs-panel {
+    padding-block-start: var(--bds-space_m);
   }
-  .bds0118Tabs-panel:focus-visible {
-    outline: var(--outline_default);
-    outline-offset: var(--outline_offset);
+  .bds101Tabs-panel:focus-visible {
+    outline: var(--bds-outline_default);
+    outline-offset: var(--bds-outline_offset);
   }
 }
 
 /* src/components/ui/Tooltip/Tooltip.module.css */
 @layer component {
-  .bds0118Tooltip-wrapper {
+  .bds101Tooltip-wrapper {
     position: relative;
     display: inline-flex;
     align-items: center;
   }
-  .bds0118Tooltip-tooltip {
+  .bds101Tooltip-tooltip {
     position: absolute;
-    z-index: var(--z-index_popover);
-    padding: var(--space_xxs) var(--space_xs);
-    border-radius: var(--border_radius--xs);
-    background-color: var(--tooltip_bg, var(--color_on-bg));
-    color: var(--tooltip_text, var(--color_bg));
-    font-size: var(--font_size--body--s);
-    line-height: var(--font_line-height--body);
+    z-index: var(--bds-z-index_popover);
+    padding: var(--bds-space_xxs) var(--bds-space_xs);
+    border-radius: var(--bds-border_radius--xs);
+    background-color: var(--tooltip_bg, var(--bds-on-bg));
+    color: var(--tooltip_text, var(--bds-bg));
+    font-size: var(--bds-font_size--body--s);
+    line-height: var(--bds-font_line-height--body);
     white-space: nowrap;
     pointer-events: none;
     visibility: hidden;
     opacity: 0;
-    transition: opacity var(--animation_transition-duration) var(--animation_easing);
+    transition: opacity var(--bds-animation_transition-duration) var(--bds-animation_easing);
   }
-  .bds0118Tooltip-wrapper:hover .bds0118Tooltip-tooltip,
-  .bds0118Tooltip-wrapper:focus-within .bds0118Tooltip-tooltip {
+  .bds101Tooltip-wrapper:hover .bds101Tooltip-tooltip,
+  .bds101Tooltip-wrapper:focus-within .bds101Tooltip-tooltip {
     visibility: visible;
     opacity: 1;
   }
-  .bds0118Tooltip---placement_top {
-    bottom: calc(100% + var(--space_xs));
+  .bds101Tooltip---placement_top {
+    bottom: calc(100% + var(--bds-space_xs));
     left: 50%;
     transform: translateX(-50%);
   }
-  .bds0118Tooltip---placement_bottom {
-    top: calc(100% + var(--space_xs));
+  .bds101Tooltip---placement_bottom {
+    top: calc(100% + var(--bds-space_xs));
     left: 50%;
     transform: translateX(-50%);
   }
-  .bds0118Tooltip---placement_left {
-    right: calc(100% + var(--space_xs));
+  .bds101Tooltip---placement_left {
+    right: calc(100% + var(--bds-space_xs));
     top: 50%;
     transform: translateY(-50%);
   }
-  .bds0118Tooltip---placement_right {
-    left: calc(100% + var(--space_xs));
+  .bds101Tooltip---placement_right {
+    left: calc(100% + var(--bds-space_xs));
     top: 50%;
     transform: translateY(-50%);
   }
   @media (prefers-reduced-motion: reduce) {
-    .bds0118Tooltip-tooltip {
+    .bds101Tooltip-tooltip {
       transition: none;
     }
   }
@@ -1137,289 +1172,325 @@
 
 /* src/components/ui/Typography/Typography.module.css */
 @layer component {
-  .bds0118Typography-typography {
+  .bds101Typography-typography {
     margin: 0;
-    font-family: var(--font_family--body);
-    color: var(--typography_color, var(--color_on-bg));
-  }
-  .bds0118Typography---h1 {
-    font-family: var(--font_family--heading);
-    font-size: var(--font_size--heading-1);
-    font-weight: var(--font_weight--bold);
-    line-height: var(--font_line-height--heading);
-  }
-  .bds0118Typography---h2 {
-    font-family: var(--font_family--heading);
-    font-size: var(--font_size--heading-2);
-    font-weight: var(--font_weight--semibold);
-    line-height: var(--font_line-height--heading);
-  }
-  .bds0118Typography---h3 {
-    font-family: var(--font_family--heading);
-    font-size: var(--font_size--heading-3);
-    font-weight: var(--font_weight--semibold);
-    line-height: var(--font_line-height--heading);
-  }
-  .bds0118Typography---body {
-    font-size: var(--font_size--body);
-    line-height: var(--font_line-height--body);
-  }
-  .bds0118Typography---body_s {
-    font-size: var(--font_size--body--s);
-    line-height: var(--font_line-height--body);
+    font-family: var(--bds-font_family--body);
+    color: var(--typography_color, var(--bds-on-bg));
+  }
+  .bds101Typography---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);
+  }
+  .bds101Typography---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);
+  }
+  .bds101Typography---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);
+  }
+  .bds101Typography---body {
+    font-size: var(--bds-font_size--body);
+    line-height: var(--bds-font_line-height--body);
+  }
+  .bds101Typography---body_s {
+    font-size: var(--bds-font_size--body--s);
+    line-height: var(--bds-font_line-height--body);
   }
 }
 
 /* src/components/interaction/Button/Button.module.css */
+@keyframes fadeZoom {
+  0%, 100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 0.75;
+    transform: scale(1.15);
+  }
+}
 @keyframes pulse {
   0% {
     transform: scale(1);
-    box-shadow: 0 0 0 0 rgb(from var(--button_pulse-color, var(--color_cta)) r g b / 50%);
+    box-shadow: 0 0 0 0 rgb(from var(--button_pulse-color, var(--button_color, var(--bds-cta))) r g b / 50%);
   }
   70% {
     transform: scale(1.01);
-    box-shadow: 0 0 0 var(--space_m) rgb(from var(--button_pulse-color, var(--color_cta)) r g b / 0%);
+    box-shadow: 0 0 0 var(--bds-space_m) rgb(from var(--button_pulse-color, var(--button_color, var(--bds-cta))) r g b / 0%);
   }
   100% {
     transform: scale(1);
-    box-shadow: 0 0 0 0 rgb(from var(--button_pulse-color, var(--color_cta)) r g b / 0%);
+    box-shadow: 0 0 0 0 rgb(from var(--button_pulse-color, var(--button_color, var(--bds-cta))) r g b / 0%);
   }
 }
 @layer component {
-  .bds0118Button-button,
-  .bds0118Button-button[href] {
+  .bds101Button-button,
+  .bds101Button-button[href] {
     all: unset;
     position: relative;
     font: inherit;
-    padding-inline: var(--space_l);
+    padding-inline: var(--bds-space_l);
     display: inline-flex;
-    gap: var(--space_xs);
-    border-radius: var(--button_border_radius--s, var(--border_radius--s));
+    gap: var(--bds-space_xs);
+    border-radius: var(--button_border_radius--s, var(--bds-border_radius--s));
     align-items: center;
     cursor: pointer;
-    scroll-padding-block-end: var(--space_l);
+    scroll-padding-block-end: var(--bds-space_l);
     justify-content: center;
     height: var(--button_height, 3em);
     font-size: var(--button_font-size, inherit);
     white-space: nowrap;
     line-height: 1;
-    background-color: var(--button_bg, var(--color_cta));
-    color: var(--button_text, var(--color_on-cta));
-    border: 2px solid var(--button_border-color, var(--color_cta));
-    transition: var(--animation_transition);
-  }
-  .bds0118Button-button.bds0118Button---primary {
-    --button_border-color: transparent;
-  }
-  .bds0118Button-button.bds0118Button---secondary {
-    --button_bg: var(--color_bg);
-    --button_text: var(--color_on-bg);
-    --button_border-color: var(--button_text);
-  }
-  .bds0118Button-button.bds0118Button---size_small {
+    --button_color: var(--bds-cta);
+    --button_on-color: var(--bds-on-cta);
+    background-color: var(--button_bg, var(--button_color));
+    color: var(--button_text, var(--button_on-color));
+    border: var(--button_border, none);
+    --bdc_color: transparent;
+    outline: var(--bdc-outline_width) solid var(--bdc_color);
+    outline-offset: var(--bdc-outline_offset);
+    transition: var(--bds-animation_transition), --bdc_color var(--bds-animation_transition-duration) var(--bds-animation_easing);
+  }
+  .bds101Button-button.bds101Button---default {
+  }
+  .bds101Button-button.bds101Button---ghost {
+    --button_bg: transparent;
+    --button_text: var(--button_color);
+    --bdc_color: var(--button_color);
+  }
+  .bds101Button-button.bds101Button---size_small {
     --button_height: 2.25em;
-    --button_font-size: var(--font_size--body--s);
-    --button_border_radius--s: var(--border_radius--xs);
-    padding-inline: var(--space_m);
+    --button_font-size: var(--bds-font_size--body--s);
+    --button_border_radius--s: var(--bds-border_radius--xs);
+    padding-inline: var(--bds-space_m);
   }
-  .bds0118Button-button.bds0118Button---size_medium {
+  .bds101Button-button.bds101Button---size_medium {
     --button_height: 3em;
-    padding-inline: var(--space_l);
+    padding-inline: var(--bds-space_l);
   }
-  .bds0118Button-button.bds0118Button---size_large {
-    --button_font-size: var(--font_size--heading-3);
-    padding-inline: var(--space_xl);
-    --button_border_radius--s: var(--border_radius--m);
+  .bds101Button-button.bds101Button---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);
   }
-  .bds0118Button-button.bds0118Button---hasPulse {
+  .bds101Button-button.bds101Button---hasPulse {
     animation: pulse 3s infinite;
   }
-  .bds0118Button-button[href] {
+  .bds101Button-button[href] {
     text-decoration: none;
   }
-  .bds0118Button-button svg {
+  .bds101Button-button svg {
     --icon__stroke: currentcolor;
     fill: currentcolor;
     color: currentcolor;
     flex-shrink: 0;
   }
-  .bds0118Button-prefix {
+  .bds101Button-iconStart {
     display: flex;
     align-items: center;
-    margin-inline-start: calc(var(--space_s) * -1);
-    transition: var(--animation_transition);
+    margin-inline-start: calc(var(--bds-space_s) * -1);
+    transition: var(--bds-animation_transition);
   }
-  .bds0118Button-suffix {
+  .bds101Button-iconEnd {
     display: flex;
     align-items: center;
-    margin-inline-end: calc(var(--space_s) * -1);
-    transition: var(--animation_transition);
+    margin-inline-end: calc(var(--bds-space_s) * -1);
+    transition: var(--bds-animation_transition);
   }
   @media (hover: hover) and (pointer: fine) {
-    .bds0118Button-button:hover .bds0118Button-prefix svg {
-      animation: 2s infinite fadeZoom ease-out;
+    .bds101Button-button:hover .bds101Button-iconStart svg {
+      animation: fadeZoom 2s ease-out infinite;
     }
-    .bds0118Button-button:hover .bds0118Button-suffix svg {
-      animation: 2s infinite fadeZoom ease-out;
+    .bds101Button-button:hover .bds101Button-iconEnd svg {
+      animation: fadeZoom 2s ease-out infinite;
     }
   }
-  .bds0118Button-button:focus-visible {
-    outline-offset: var(--outline_offset);
-    outline: var(--outline_default);
-    border-radius: var(--border_radius--s);
+  .bds101Button-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) {
+    .bds101Button-button.bds101Button---default:hover {
+      --button_bg: var(--bds-bg);
+      --button_text: var(--bds-interactive);
+      --button_pulse-color: var(--bds-interactive);
+      --bdc_color: currentcolor;
+    }
   }
   @media (hover: hover) and (pointer: fine) {
-    .bds0118Button-button:hover {
-      --button_bg: var(--color_bg);
-      --button_text: var(--color_interactive);
-      --button_pulse-color: var(--color_interactive);
-      --button_border-color: currentcolor;
+    .bds101Button-button.bds101Button---ghost:hover {
+      --button_bg: var(--button_color);
+      --button_text: var(--button_on-color);
+      --bdc_color: transparent;
     }
   }
 }
 
 /* src/components/interaction/Command/Command.module.css */
 @layer component {
-  .bds0118Command-dialog {
+  .bds101Command-dialog {
     padding: 0;
     border: none;
-    border-radius: var(--border_radius--m);
+    border-radius: var(--bds-border_radius--m);
     background: transparent;
     width: min(40rem, 90vw);
     max-height: 70vh;
     overflow: visible;
     margin-block-start: 10vh;
   }
-  .bds0118Command-dialog::backdrop {
-    background-color: var(--command_backdrop-color, rgb(0 0 0 / 50%));
+  .bds101Command-dialog::backdrop {
+    background-color: var(--color_backdrop, rgb(0 0 0 / 50%));
     backdrop-filter: blur(3px);
   }
-  .bds0118Command-palette {
+  .bds101Command-palette {
     display: flex;
     flex-direction: column;
-    background-color: var(--command_color, var(--color_bg));
-    color: var(--command_on-color, var(--color_on-bg));
-    border-radius: var(--border_radius--m);
-    box-shadow: var(--shadow_xl);
+    background-color: var(--command_color, var(--bds-bg));
+    color: var(--command_on-color, var(--bds-on-bg));
+    border-radius: var(--bds-border_radius--m);
+    box-shadow: var(--command_shadow, var(--bds-shadow_xl));
     overflow: hidden;
     max-height: 70vh;
-    border: 1px solid currentcolor;
+    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);
   }
-  .bds0118Command-searchRow {
+  .bds101Command-searchRow {
     display: flex;
     align-items: center;
-    gap: var(--space_xs);
-    padding: var(--space_s) var(--space_m);
+    gap: var(--bds-space_xs);
+    padding: var(--bds-space_s) var(--bds-space_m);
     border-block-end: 1px solid currentcolor;
     flex-shrink: 0;
   }
-  .bds0118Command-searchIcon {
+  .bds101Command-searchIcon {
     width: 1.25rem;
     height: 1.25rem;
-    color: var(--color_on-bg--muted);
+    color: var(--bds-on-bg);
     flex-shrink: 0;
   }
-  .bds0118Command-search {
+  .bds101Command-search {
     flex: 1;
     border: none;
     outline: none;
-    font-family: var(--font_family--body);
-    font-size: var(--font_size--body);
-    color: var(--color_on-bg);
+    font-family: var(--bds-font_family--body);
+    font-size: var(--bds-font_size--body);
+    color: var(--bds-on-bg);
     background: transparent;
     min-width: 0;
   }
-  .bds0118Command-search::placeholder {
-    color: var(--color_on-bg--muted);
+  .bds101Command-search::placeholder {
+    color: var(--bds-on-bg);
   }
-  .bds0118Command-escHint {
-    font-size: var(--font_size--body--s);
-    color: var(--color_on-bg--muted);
-    border: 1px solid currentcolor;
-    border-radius: var(--border_radius--xs);
+  .bds101Command-escHint {
+    font-size: var(--bds-font_size--body--s);
+    color: var(--bds-on-bg);
+    border-radius: var(--bds-border_radius--xs);
     padding: 0.1em 0.4em;
     flex-shrink: 0;
+    --bdc_color: currentcolor;
+    border: none;
+    outline: var(--bdc-outline_width) solid var(--bdc_color);
+    outline-offset: var(--bdc-outline_offset);
   }
-  .bds0118Command-list {
+  .bds101Command-list {
     overflow-y: auto;
     list-style: none;
     margin: 0;
-    padding: var(--space_xs) 0;
+    padding: var(--bds-space_xs) 0;
   }
-  .bds0118Command-groupList {
+  .bds101Command-groupList {
     list-style: none;
     margin: 0;
     padding: 0;
   }
-  .bds0118Command-group {
-    padding: var(--space_xs) var(--space_m);
-    font-size: var(--font_size--body--s);
-    font-weight: var(--font_weight--semibold);
-    color: var(--color_on-bg--muted);
+  .bds101Command-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);
+    color: var(--bds-on-bg);
     text-transform: uppercase;
     letter-spacing: 0.05em;
   }
-  .bds0118Command-item {
+  .bds101Command-item {
     display: flex;
     align-items: center;
-    gap: var(--space_s);
-    padding: var(--space_s) var(--space_m);
+    gap: var(--bds-space_s);
+    padding: var(--bds-space_s) var(--bds-space_m);
     cursor: pointer;
-    transition: background-color var(--animation_transition-duration) var(--animation_easing);
+    transition: background-color var(--bds-animation_transition-duration) var(--bds-animation_easing);
   }
-  .bds0118Command-itemActive {
-    background-color: var(--color_bg--subtle);
+  .bds101Command-itemActive {
+    background-color: var(--bds-bg--subtle);
   }
-  .bds0118Command-itemLabel {
+  .bds101Command-itemLabel {
     flex: 1;
-    font-size: var(--font_size--body);
-    color: var(--color_on-bg);
-  }
-  .bds0118Command-itemDesc {
-    font-size: var(--font_size--body--s);
-    color: var(--color_on-bg--muted);
-  }
-  .bds0118Command-shortcut {
-    font-size: var(--font_size--body--s);
-    color: var(--color_on-bg--muted);
-    border: 1px solid currentcolor;
-    border-radius: var(--border_radius--xs);
+    font-size: var(--bds-font_size--body);
+    color: var(--bds-on-bg);
+  }
+  .bds101Command-itemDesc {
+    font-size: var(--bds-font_size--body--s);
+    color: var(--bds-on-bg);
+  }
+  .bds101Command-shortcut {
+    font-size: var(--bds-font_size--body--s);
+    color: var(--bds-on-bg);
+    border-radius: var(--bds-border_radius--xs);
     padding: 0.1em 0.4em;
+    --bdc_color: currentcolor;
+    border: none;
+    outline: var(--bdc-outline_width) solid var(--bdc_color);
+    outline-offset: var(--bdc-outline_offset);
   }
-  .bds0118Command-empty {
-    padding: var(--space_l) var(--space_m);
+  .bds101Command-empty {
+    padding: var(--bds-space_l) var(--bds-space_m);
     text-align: center;
-    color: var(--color_on-bg--muted);
-    font-size: var(--font_size--body);
+    color: var(--bds-on-bg);
+    font-size: var(--bds-font_size--body);
   }
 }
 
 /* src/components/interaction/Dialog/Dialog.module.css */
 @layer component {
-  .bds0118Dialog-dialog {
-    font-size: var(--font_size--body--s);
-    border: 2px solid currentcolor;
-    background-color: var(--dialog_color ,var(--color_grey--subtle));
-    color: var(--dialog_on-color, var(--color_on-grey--subtle));
-    border-radius: var(--border_radius--m);
-    padding: var(--space_l);
+  .bds101Dialog-dialog {
+    font-size: var(--bds-font_size--body--s);
+    border: var(--dialog_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);
+    border-radius: var(--dialog_radius, var(--bdc-outline_radius));
+    box-shadow: var(--dialog_shadow, var(--bdc-outline_shadow));
+    background-color: var(--dialog_color ,var(--bds-grey--subtle));
+    color: var(--dialog_on-color, var(--bds-on-grey--subtle));
+    padding: var(--bds-space_l);
     max-width: 90svw;
     max-height: 90svh;
     overflow: visible;
   }
-  .bds0118Dialog-dialogContent {
+  .bds101Dialog-dialogContent {
     display: grid;
-    gap: var(--grid_gap);
+    gap: var(--bds-grid_gap);
     overflow-y: auto;
     min-height: 0;
     flex: 1;
   }
-  .bds0118Dialog-closeForm {
+  .bds101Dialog-closeForm {
     position: absolute;
     inset-block-start: -1em;
     inset-inline-end: -1em;
   }
-  .bds0118Dialog-closeButton {
+  .bds101Dialog-closeButton {
     all: unset;
     width: 2em;
     height: 2em;
@@ -1427,24 +1498,27 @@
     align-items: center;
     justify-content: center;
     border-radius: 50%;
-    background-color: var(--color_bg);
+    background-color: var(--bds-bg);
     color: currentcolor;
-    border: 2px solid currentcolor;
+    border: var(--dialog_close-border, none);
+    --bdc_color: currentcolor;
+    outline: var(--bdc-outline_width) solid var(--bdc_color);
+    outline-offset: var(--bdc-outline_offset);
     cursor: pointer;
   }
-  .bds0118Dialog-closeButton svg {
+  .bds101Dialog-closeButton svg {
     width: 1.25em;
     height: 1.25em;
   }
-  .bds0118Dialog-dialog::backdrop {
-    background-color: var(--dialog_backdrop-color, rgb(0 0 0 / 50%));
+  .bds101Dialog-dialog::backdrop {
+    background-color: var(--color_backdrop, rgb(0 0 0 / 50%));
     backdrop-filter: blur(3px);
   }
 }
 
 /* src/components/interaction/Drawer/Drawer.module.css */
 @layer component {
-  .bds0118Drawer-drawer {
+  .bds101Drawer-drawer {
     position: fixed;
     inset: 0;
     margin: 0;
@@ -1457,38 +1531,38 @@
     background: transparent;
     overflow: hidden;
   }
-  .bds0118Drawer-drawer::backdrop {
-    background-color: var(--drawer_backdrop-color, rgb(0 0 0 / 50%));
+  .bds101Drawer-drawer::backdrop {
+    background-color: var(--color_backdrop, rgb(0 0 0 / 50%));
     backdrop-filter: blur(3px);
   }
-  .bds0118Drawer-panel {
+  .bds101Drawer-panel {
     position: absolute;
     inset-block: 0;
     display: flex;
     flex-direction: column;
     width: min(28rem, 90vw);
     height: 100%;
-    background-color: var(--drawer_color, var(--color_bg));
-    color: var(--drawer_on-color, var(--color_on-bg));
-    box-shadow: var(--shadow_xl);
+    background-color: var(--drawer_color, var(--bds-bg));
+    color: var(--drawer_on-color, var(--bds-on-bg));
+    box-shadow: var(--bds-shadow_xl);
     overflow: hidden;
-    transition: var(--animation_transition);
+    transition: var(--bds-animation_transition);
   }
-  .bds0118Drawer---side_right .bds0118Drawer-panel {
+  .bds101Drawer---side_right .bds101Drawer-panel {
     inset-inline-end: 0;
   }
-  .bds0118Drawer---side_left .bds0118Drawer-panel {
+  .bds101Drawer---side_left .bds101Drawer-panel {
     inset-inline-start: 0;
   }
-  .bds0118Drawer-header {
+  .bds101Drawer-header {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: var(--space_m) var(--space_l);
+    padding: var(--bds-space_m) var(--bds-space_l);
     border-block-end: 1px solid currentcolor;
     flex-shrink: 0;
   }
-  .bds0118Drawer-closeButton {
+  .bds101Drawer-closeButton {
     all: unset;
     display: flex;
     align-items: center;
@@ -1497,30 +1571,30 @@
     height: 2rem;
     border-radius: 50%;
     cursor: pointer;
-    transition: var(--animation_transition);
+    transition: var(--bds-animation_transition);
   }
-  .bds0118Drawer-closeButton svg {
+  .bds101Drawer-closeButton svg {
     width: 1.25rem;
     height: 1.25rem;
   }
-  .bds0118Drawer-closeButton:focus-visible {
-    outline: var(--outline_default);
-    outline-offset: var(--outline_offset);
+  .bds101Drawer-closeButton:focus-visible {
+    outline: var(--bds-outline_default);
+    outline-offset: var(--bds-outline_offset);
   }
   @media (hover: hover) and (pointer: fine) {
-    .bds0118Drawer-closeButton:hover {
-      background-color: var(--color_bg--subtle);
+    .bds101Drawer-closeButton:hover {
+      background-color: var(--bds-bg--subtle);
     }
   }
-  .bds0118Drawer-body {
+  .bds101Drawer-body {
     flex: 1;
     overflow-y: auto;
-    padding: var(--space_l);
+    padding: var(--bds-space_l);
     display: flex;
     flex-direction: column;
   }
   @media (prefers-reduced-motion: reduce) {
-    .bds0118Drawer-panel {
+    .bds101Drawer-panel {
       transition: none;
     }
   }
@@ -1528,66 +1602,70 @@
 
 /* src/components/interaction/DropdownMenu/DropdownMenu.module.css */
 @layer component {
-  .bds0118DropdownMenu-wrapper {
+  .bds101DropdownMenu-wrapper {
     position: relative;
     display: inline-flex;
   }
-  .bds0118DropdownMenu-menu {
+  .bds101DropdownMenu-menu {
     position: absolute;
-    top: calc(100% + var(--space_xxs));
-    z-index: var(--z-index_dropdown);
+    top: calc(100% + var(--bds-space_xxs));
+    z-index: var(--bds-z-index_dropdown);
     min-width: 10rem;
-    padding: var(--space_xxs) 0;
-    border-radius: var(--border_radius--s);
-    border: 1px solid currentcolor;
-    background-color: var(--dropdown_color, var(--color_bg));
-    color: var(--dropdown_on-color, var(--color_on-bg));
-    box-shadow: var(--shadow_m);
+    padding: var(--bds-space_xxs) 0;
+    border: var(--dropdown_border, none);
+    --bdc_color: currentcolor;
+    --bdc-outline_radius: var(--bds-border_radius--s);
+    outline: var(--bdc-outline_width) solid var(--bdc_color);
+    outline-offset: var(--bdc-outline_offset);
+    border-radius: var(--dropdown_radius, var(--bdc-outline_radius));
+    background-color: var(--dropdown_color, var(--bds-bg));
+    color: var(--dropdown_on-color, var(--bds-on-bg));
+    box-shadow: var(--dropdown_shadow, var(--bds-shadow_m));
     list-style: none;
     margin: 0;
   }
-  .bds0118DropdownMenu---placement_bottom-start {
+  .bds101DropdownMenu---placement_bottom-start {
     left: 0;
   }
-  .bds0118DropdownMenu---placement_bottom-end {
+  .bds101DropdownMenu---placement_bottom-end {
     right: 0;
   }
-  .bds0118DropdownMenu-separator {
+  .bds101DropdownMenu-separator {
     border: none;
     border-top: 1px solid currentcolor;
-    margin: var(--space_xxs) 0;
+    margin: var(--bds-space_xxs) 0;
     opacity: 0.15;
   }
-  .bds0118DropdownMenu-item {
+  .bds101DropdownMenu-item {
     all: unset;
     display: flex;
     align-items: center;
-    gap: var(--space_xs);
+    gap: var(--bds-space_xs);
     width: 100%;
-    padding: var(--space_xs) var(--space_m);
-    font-family: var(--font_family--body);
-    font-size: var(--font_size--body);
+    padding: var(--bds-space_xs) var(--bds-space_m);
+    font-family: var(--bds-font_family--body);
+    font-size: var(--bds-font_size--body);
     color: currentcolor;
     cursor: pointer;
     box-sizing: border-box;
-    transition: var(--animation_transition);
+    transition: var(--bds-animation_transition);
   }
-  .bds0118DropdownMenu-item:disabled {
+  .bds101DropdownMenu-item:disabled {
     opacity: 0.4;
     cursor: not-allowed;
   }
-  .bds0118DropdownMenu-item:focus-visible {
-    outline: var(--outline_default);
-    outline-offset: calc(var(--outline_offset) * -1);
-    border-radius: var(--border_radius--xs);
+  .bds101DropdownMenu-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) {
-    .bds0118DropdownMenu-item:not(:disabled):hover {
-      background-color: var(--color_bg--subtle);
-      color: var(--color_interactive);
+    .bds101DropdownMenu-item:not(:disabled):hover {
+      background-color: var(--bds-bg--subtle);
+      color: var(--bds-interactive);
     }
   }
-  .bds0118DropdownMenu-icon {
+  .bds101DropdownMenu-icon {
     display: flex;
     align-items: center;
     flex-shrink: 0;
@@ -1596,99 +1674,103 @@
 
 /* src/components/interaction/Popover/Popover.module.css */
 @layer component {
-  .bds0118Popover-wrapper {
+  .bds101Popover-wrapper {
     position: relative;
     display: inline-flex;
   }
-  .bds0118Popover-panel {
+  .bds101Popover-panel {
     position: absolute;
-    z-index: var(--z-index_popover);
+    z-index: var(--bds-z-index_popover);
     min-width: 12rem;
-    padding: var(--space_m);
-    border-radius: var(--border_radius--s);
-    border: 1px solid currentcolor;
-    background-color: var(--popover_color, var(--color_bg));
-    box-shadow: var(--shadow_m);
-    color: var(--popover_on-color, var(--color_on-bg));
-    font-size: var(--font_size--body);
-  }
-  .bds0118Popover---placement_bottom {
-    top: calc(100% + var(--space_xs));
+    padding: var(--bds-space_m);
+    border: var(--popover_border, none);
+    --bdc_color: currentcolor;
+    --bdc-outline_radius: var(--bds-border_radius--s);
+    outline: var(--bdc-outline_width) solid var(--bdc_color);
+    outline-offset: var(--bdc-outline_offset);
+    border-radius: var(--popover_radius, var(--bdc-outline_radius));
+    background-color: var(--popover_color, var(--bds-bg));
+    box-shadow: var(--popover_shadow, var(--bds-shadow_m));
+    color: var(--popover_on-color, var(--bds-on-bg));
+    font-size: var(--bds-font_size--body);
+  }
+  .bds101Popover---placement_bottom {
+    top: calc(100% + var(--bds-space_xs));
     left: 0;
   }
-  .bds0118Popover---placement_top {
-    bottom: calc(100% + var(--space_xs));
+  .bds101Popover---placement_top {
+    bottom: calc(100% + var(--bds-space_xs));
     left: 0;
   }
-  .bds0118Popover---placement_right {
-    left: calc(100% + var(--space_xs));
+  .bds101Popover---placement_right {
+    left: calc(100% + var(--bds-space_xs));
     top: 0;
   }
-  .bds0118Popover---placement_left {
-    right: calc(100% + var(--space_xs));
+  .bds101Popover---placement_left {
+    right: calc(100% + var(--bds-space_xs));
     top: 0;
   }
 }
 
 /* src/components/interaction/Rating/Rating.module.css */
 @layer component {
-  .bds0118Rating-rating {
+  .bds101Rating-rating {
     display: inline-flex;
-    gap: var(--space_xxxs);
-    color: var(--color_bg);
+    gap: var(--bds-space_xxxs);
+    color: var(--bds-bg);
   }
-  .bds0118Rating-star {
+  .bds101Rating-star {
     width: 1.5em;
     height: 1.5em;
   }
-  .bds0118Rating---filled {
-    color: var(--color_warning);
+  .bds101Rating---filled {
+    color: var(--bds-warning);
   }
 }
 
 /* src/components/interaction/Toast/Toast.module.css */
 @layer component {
-  .bds0118Toast-toastContainer {
+  .bds101Toast-toastContainer {
     position: fixed;
-    bottom: var(--space_xl);
-    right: var(--space_xl);
+    bottom: var(--bds-space_xl);
+    right: var(--bds-space_xl);
     display: flex;
     flex-direction: column;
-    gap: var(--space_m);
-    z-index: var(--z-index_toast);
+    gap: var(--bds-space_m);
+    z-index: var(--bds-z-index_toast);
   }
-  .bds0118Toast-toast {
-    padding: var(--space_m) var(--space_l);
-    background-color: var(--toast_color, var(--color_bg));
-    color: var(--toast_on-color, var(--color_on-bg));
-    border-radius: var(--border_radius--s);
-    box-shadow: var(--shadow_s);
+  .bds101Toast-toast {
+    padding: var(--bds-space_m) var(--bds-space_l);
+    background-color: var(--toast_color, var(--bds-bg));
+    color: var(--toast_on-color, var(--bds-on-bg));
+    border-radius: var(--bds-border_radius--s);
+    box-shadow: var(--bds-shadow_s);
     display: flex;
     align-items: center;
-    gap: var(--space_m);
+    gap: var(--bds-space_m);
     min-width: 300px;
-    animation: slideIn var(--animation_duration--fast) var(--animation_easing);
+    animation: slideIn var(--bds-animation_duration--fast) var(--bds-animation_easing);
   }
-  .bds0118Toast-toast.bds0118Toast---variant_success {
-    --toast_color: var(--color_success);
-    --toast_on-color: var(--color_on-success);
+  .bds101Toast-toast.bds101Toast---variant_success {
+    --toast_color: var(--bds-success);
+    --toast_on-color: var(--bds-on-success);
   }
-  .bds0118Toast-toast.bds0118Toast---variant_warning {
-    --toast_color: var(--color_warning);
-    --toast_on-color: var(--color_on-warning);
+  .bds101Toast-toast.bds101Toast---variant_warning {
+    --toast_color: var(--bds-warning);
+    --toast_on-color: var(--bds-on-warning);
   }
-  .bds0118Toast-toast.bds0118Toast---variant_info {
-    --toast_color: var(--color_bg--subtle);
-    --toast_on-color: var(--color_on-bg--subtle);
+  .bds101Toast-toast.bds101Toast---variant_info {
+    --toast_color: var(--bds-bg--subtle);
+    --toast_on-color: var(--bds-on-bg--subtle);
   }
-  .bds0118Toast-toast.bds0118Toast---variant_error {
-    --toast_color: var(--color_error);
-    --toast_on-color: var(--color_on-error);
+  .bds101Toast-toast.bds101Toast---variant_error {
+    --toast_color: var(--bds-error);
+    --toast_on-color: var(--bds-on-error);
   }
-  .bds0118Toast-message {
+  .bds101Toast-message {
     flex: 1;
   }
-  .bds0118Toast-closeButton {
+  .bds101Toast-closeButton {
     display: flex;
     align-items: center;
     justify-content: center;
@@ -1701,7 +1783,7 @@
     cursor: pointer;
     color: var(--toast_on-color);
   }
-  .bds0118Toast-closeButton svg {
+  .bds101Toast-closeButton svg {
     width: 1rem;
     height: 1rem;
   }
@@ -1719,176 +1801,215 @@
 
 /* src/components/interaction/form/Checkbox/Checkbox.module.css */
 @layer component {
-  .bds0118Checkbox-checkboxGroup {
-    --inputSize: calc(var(--space_s) * 2);
+  .bds101Checkbox-checkboxGroup {
+    --inputSize: calc(var(--bds-space_s) * 2);
     display: flex;
     flex-direction: column;
   }
-  .bds0118Checkbox-inputWrapper {
+  .bds101Checkbox-inputWrapper {
     display: flex;
     align-items: stretch;
-    gap: var(--space_xs);
+    gap: var(--bds-space_xs);
   }
-  .bds0118Checkbox-checkbox {
+  .bds101Checkbox-checkbox {
     margin-block-start: 0.25em;
     width: var(--inputSize);
     height: var(--inputSize);
-    color: var(--checkbox_color, var(--color_on-bg));
-    border: 1px solid currentcolor;
-    border-radius: var(--border_radius--xs);
+    color: var(--checkbox_color, var(--bds-on-bg));
+    border: var(--checkbox_border, none);
+    --bdc_color: currentcolor;
+    --bdc-outline_radius: var(--bds-border_radius--xs);
+    outline: var(--bdc-outline_width) solid var(--bdc_color);
+    outline-offset: var(--bdc-outline_offset);
+    border-radius: var(--checkbox_radius, var(--bdc-outline_radius));
+    box-shadow: var(--checkbox_shadow, var(--bdc-outline_shadow));
     appearance: none;
-    background-color: var(--checkbox_color_bg, var(--color_bg));
+    background-color: var(--checkbox_color_bg, var(--bds-bg));
     cursor: pointer;
     position: relative;
-    transition: background-color 0.3s ease, border-color 0.3s ease;
+    transition: --bdc_color 0.3s ease, background-color 0.3s ease;
   }
-  .bds0118Checkbox-checkbox:checked {
-    background-color: var(--checkbox_color-active, var(--color_active));
-    border-color: var(--checkbox_color-active, var(--color_active));
+  .bds101Checkbox-checkbox:checked {
+    background-color: var(--checkbox_color-active, var(--bds-active));
+    --bdc_color: var(--checkbox_color-active, var(--bds-active));
   }
-  .bds0118Checkbox-checkbox:checked::after {
+  .bds101Checkbox-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(--color_on-active));
+    border: solid var(--checkbox_color-on-active, var(--bds-on-active));
     border-width: 0 2px 2px 0;
     transform: rotate(45deg);
   }
-  .bds0118Checkbox-checkbox:focus {
-    outline: none;
-    border-color: var(--color_interactive);
-    box-shadow: 0 0 0 2px rgb(from var(--color_interactive) r g b / 20%);
+  .bds101Checkbox-checkbox:focus {
+    --bdc_color: var(--bdc_color--focus);
   }
-  .bds0118Checkbox-checkboxError {
-    border-color: var(--color_error);
+  .bds101Checkbox-checkbox:focus-visible {
+    outline: var(--bds-outline_default);
+    outline-offset: var(--bds-outline_offset);
   }
-  .bds0118Checkbox-checkboxError:focus {
-    border-color: var(--color_error);
-    box-shadow: 0 0 0 2px rgb(from var(--color_error) r g b / 20%);
+  .bds101Checkbox-checkboxError {
+    --bdc_color: var(--bdc_color--error);
   }
 }
 
 /* src/components/interaction/form/atoms/Message.module.css */
 @layer component {
-  .bds0118Message-error,
-  .bds0118Message-hint {
-    font-size: var(--font_size--body--s);
+  .bds101Message-error,
+  .bds101Message-hint {
+    font-size: var(--bds-font_size--body--s);
     margin-inline-start: var(--labelPosition);
   }
-  .bds0118Message-error {
-    color: var(--color_error);
+  .bds101Message-error {
+    color: var(--bds-error);
   }
 }
 
 /* src/components/interaction/form/atoms/Label.module.css */
 @layer component {
-  .bds0118Label-label {
+  .bds101Label-label {
     display: flex;
     align-items: center;
-    font-family: var(--font_family--body);
-    color: var(--color_on-bg);
+    font-family: var(--bds-font_family--body);
+    color: var(--bds-on-bg);
     cursor: pointer;
   }
 }
 
 /* src/components/interaction/form/atoms/InputContainer.module.css */
 @layer component {
-  .bds0118InputContainer-container {
-    --labelPosition: calc(var(--inputSize) + var(--space_m));
+  .bds101InputContainer-container {
+    --labelPosition: calc(var(--inputSize) + var(--bds-space_m));
     display: flex;
     flex-direction: column;
-    gap: var(--space_xxxs);
+    gap: var(--bds-space_xxxs);
+  }
+}
+
+/* src/components/interaction/form/CheckboxGroup/CheckboxGroup.module.css */
+@layer component {
+  .bds101CheckboxGroup-group {
+    border: none;
+    padding: 0;
+    margin: 0;
+    display: flex;
+    flex-direction: column;
+    gap: var(--bds-space_xs);
+  }
+  .bds101CheckboxGroup-legend {
+    font-family: var(--bds-font_family--body);
+    font-size: var(--bds-font_size--body--s);
+    font-weight: var(--bds-font_weight--medium);
+    color: var(--bds-on-bg);
+    padding: 0;
+    margin-block-end: var(--bds-space_xs);
+  }
+  .bds101CheckboxGroup-required {
+    color: var(--bds-error);
+  }
+  .bds101CheckboxGroup-items {
+    display: flex;
+    flex-direction: column;
+    gap: var(--bds-space_xs);
   }
 }
 
 /* src/components/interaction/form/Combobox/Combobox.module.css */
 @layer component {
-  .bds0118Combobox-formGroup {
+  .bds101Combobox-formGroup {
     display: flex;
     flex-direction: column;
   }
-  .bds0118Combobox-inputWrapper {
+  .bds101Combobox-inputWrapper {
     position: relative;
     display: flex;
     align-items: center;
   }
-  .bds0118Combobox-input {
+  .bds101Combobox-input {
     appearance: none;
     width: 100%;
-    font-family: var(--font_family--body);
-    font-size: var(--font_size--body);
-    padding: var(--space_s);
-    padding-inline-end: var(--space_xxl);
-    border: 1px solid var(--combobox_border-color, currentcolor);
-    border-radius: var(--border_radius--xs);
-    background-color: var(--combobox_color_bg, var(--color_bg));
-    color: var(--combobox_color, var(--color_on-bg));
-    transition: var(--animation_transition);
-  }
-  .bds0118Combobox-input:focus {
-    --combobox_border-color: var(--color_interactive);
-    outline: none;
-    box-shadow: var(--combobox_focus-ring, 0 0 0 2px rgb(from var(--color_interactive) r g b / 20%));
-  }
-  .bds0118Combobox-input:disabled {
+    font-family: var(--bds-font_family--body);
+    font-size: var(--bds-font_size--body);
+    padding: var(--bds-space_s);
+    padding-inline-end: var(--bds-space_xxl);
+    border: var(--combobox_border, none);
+    --bdc_color: currentcolor;
+    --bdc-outline_radius: var(--bds-border_radius--xs);
+    outline: var(--bdc-outline_width) solid var(--bdc_color);
+    outline-offset: var(--bdc-outline_offset);
+    border-radius: var(--combobox_radius, var(--bdc-outline_radius));
+    box-shadow: var(--combobox_shadow, var(--bdc-outline_shadow));
+    background-color: var(--combobox_color_bg, var(--bds-bg));
+    color: var(--combobox_color, var(--bds-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);
+  }
+  .bds101Combobox-input:focus {
+    --bdc_color: var(--bdc_color--focus);
+  }
+  .bds101Combobox-input:focus-visible {
+    outline: var(--bds-outline_default);
+    outline-offset: var(--bds-outline_offset);
+  }
+  .bds101Combobox-input:disabled {
     opacity: 0.5;
     cursor: not-allowed;
   }
-  .bds0118Combobox-inputError {
-    --combobox_border-color: var(--color_error);
-  }
-  .bds0118Combobox-inputError:focus {
-    --combobox_focus-ring: 0 0 0 2px rgb(from var(--color_error) r g b / 20%);
+  .bds101Combobox-inputError {
+    --bdc_color: var(--bdc_color--error);
   }
-  .bds0118Combobox-chevron {
+  .bds101Combobox-chevron {
     position: absolute;
-    inset-inline-end: var(--space_s);
+    inset-inline-end: var(--bds-space_s);
     display: flex;
     align-items: center;
     pointer-events: none;
-    color: var(--combobox_color, var(--color_on-bg));
+    color: var(--combobox_color, var(--bds-on-bg));
   }
-  .bds0118Combobox-chevron svg {
+  .bds101Combobox-chevron svg {
     width: 1rem;
     height: 1rem;
   }
-  .bds0118Combobox-listbox {
+  .bds101Combobox-listbox {
     position: absolute;
-    top: calc(100% + var(--space_xxs));
+    top: calc(100% + var(--bds-space_xxs));
     left: 0;
     right: 0;
-    z-index: var(--z-index_dropdown);
+    z-index: var(--bds-z-index_dropdown);
     max-height: 15rem;
     overflow-y: auto;
     list-style: none;
     margin: 0;
-    padding: var(--space_xxs) 0;
-    border-radius: var(--border_radius--xs);
-    border: 1px solid currentcolor;
-    background-color: var(--combobox_color, var(--color_bg));
-    color: var(--combobox_on-color, var(--color_on-bg));
-    box-shadow: var(--shadow_m);
-  }
-  .bds0118Combobox-option {
+    padding: var(--bds-space_xxs) 0;
+    border: var(--combobox_listbox-border, none);
+    --bdc_color: currentcolor;
+    --bdc-outline_radius: var(--bds-border_radius--xs);
+    outline: var(--bdc-outline_width) solid var(--bdc_color);
+    outline-offset: var(--bdc-outline_offset);
+    border-radius: var(--combobox_listbox-radius, var(--bdc-outline_radius));
+    background-color: var(--combobox_color, var(--bds-bg));
+    color: var(--combobox_on-color, var(--bds-on-bg));
+    box-shadow: var(--combobox_listbox-shadow, var(--bds-shadow_m));
+  }
+  .bds101Combobox-option {
     display: flex;
     align-items: center;
-    padding: var(--space_xs) var(--space_m);
-    font-size: var(--font_size--body);
-    color: var(--combobox_color, var(--color_on-bg));
+    padding: var(--bds-space_xs) var(--bds-space_m);
+    font-size: var(--bds-font_size--body);
+    color: var(--combobox_color, var(--bds-on-bg));
     cursor: pointer;
-    transition: var(--animation_transition);
+    transition: var(--bds-animation_transition);
   }
-  .bds0118Combobox-option.bds0118Combobox---highlighted {
-    background-color: var(--color_bg--subtle);
-    color: var(--color_interactive);
+  .bds101Combobox-option.bds101Combobox---highlighted {
+    background-color: var(--bds-bg--subtle);
+    color: var(--bds-interactive);
   }
-  .bds0118Combobox-option.bds0118Combobox---selected {
-    font-weight: var(--font_weight--semibold);
+  .bds101Combobox-option.bds101Combobox---selected {
+    font-weight: var(--bds-font_weight--semibold);
   }
-  .bds0118Combobox-option.bds0118Combobox---disabled {
+  .bds101Combobox-option.bds101Combobox---disabled {
     opacity: 0.4;
     cursor: not-allowed;
   }
@@ -1896,58 +2017,65 @@
 
 /* src/components/interaction/form/FileInput/FileInput.module.css */
 @layer component {
-  .bds0118FileInput-formGroup {
+  .bds101FileInput-formGroup {
     display: flex;
     flex-direction: column;
   }
-  .bds0118FileInput-dropZone {
+  .bds101FileInput-fieldLabel {
+    display: flex;
+    align-items: center;
+    font-family: var(--bds-font_family--body);
+    color: var(--bds-on-bg);
+    margin-block-end: var(--bds-space_xs);
+  }
+  .bds101FileInput-dropZone {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    gap: var(--space_xs);
-    padding: var(--space_l) var(--space_m);
+    gap: var(--bds-space_xs);
+    padding: var(--bds-space_l) var(--bds-space_m);
     border: 2px dashed currentcolor;
-    border-radius: var(--border_radius--s);
-    color: var(--fileInput_color, var(--color_on-bg));
+    border-radius: var(--bds-border_radius--s);
+    color: var(--fileInput_color, var(--bds-on-bg));
     cursor: pointer;
     text-align: center;
-    transition: var(--animation_transition);
+    transition: var(--bds-animation_transition);
   }
-  .bds0118FileInput-dropZone:focus-within {
-    outline: var(--outline_default);
-    outline-offset: var(--outline_offset);
+  .bds101FileInput-dropZone:focus-within {
+    outline: var(--bds-outline_default);
+    outline-offset: var(--bds-outline_offset);
     border-color: var(--fileInput_border-color, currentcolor);
   }
-  .bds0118FileInput-isDragging {
+  .bds101FileInput-isDragging {
     border-color: currentcolor;
     background-color: rgb(from currentcolor r g b / 8%);
   }
-  .bds0118FileInput-hasError {
-    border-color: var(--color_error);
+  .bds101FileInput-hasError {
+    border-color: var(--bds-error);
   }
-  .bds0118FileInput-isDisabled {
+  .bds101FileInput-isDisabled {
     opacity: 0.5;
     cursor: not-allowed;
   }
-  .bds0118FileInput-icon {
+  .bds101FileInput-icon {
     width: 2rem;
     height: 2rem;
     flex-shrink: 0;
   }
-  .bds0118FileInput-prompt {
-    font-size: var(--font_size--body);
-    color: var(--color_on-bg--muted);
+  .bds101FileInput-prompt {
+    font-size: var(--bds-font_size--body);
+    color: var(--bds-on-bg);
   }
-  .bds0118FileInput-prompt strong {
-    color: var(--color_interactive);
-    font-weight: var(--font_weight--semibold);
+  .bds101FileInput-prompt strong {
+    color: var(--bds-interactive);
+    font-weight: var(--bds-font_weight--semibold);
   }
-  .bds0118FileInput-acceptHint {
-    font-size: var(--font_size--body--s);
-    color: var(--color_on-bg--muted);
+  .bds101FileInput-acceptHint {
+    font-size: var(--bds-font_size--body--s);
+    color: var(--bds-on-bg);
   }
-  .bds0118FileInput-hiddenInput {
+  .bds101FileInput-hiddenInput {
     position: absolute;
     width: 1px;
     height: 1px;
@@ -1957,107 +2085,116 @@
     border: 0;
   }
   @media (hover: hover) and (pointer: fine) {
-    .bds0118FileInput-dropZone:not(.bds0118FileInput-isDisabled):hover {
-      border-color: var(--color_interactive);
-      background-color: rgb(from var(--color_interactive) r g b / 4%);
+    .bds101FileInput-dropZone:not(.bds101FileInput-isDisabled):hover {
+      border-color: var(--bds-interactive);
+      background-color: rgb(from var(--bds-interactive) r g b / 4%);
     }
   }
 }
 
 /* src/components/interaction/form/FormInput/FormInput.module.css */
 @layer component {
-  .bds0118FormInput-formGroup {
+  .bds101FormInput-formGroup {
     --labelPosition: 0;
     display: flex;
     flex-direction: column;
   }
-  .bds0118FormInput-input {
-    font-family: var(--font_family--body);
-    font-size: var(--font_size--body);
-    padding: var(--space_s);
-    border: 1px solid var(--input_border-color, currentcolor);
-    border-radius: var(--input_radius, var(--border_radius--xs));
-    transition: var(--animation_transition);
-    color: var(--input_color, var(--color_on-bg));
-    background-color: var(--input_color_bg, var(--color_bg));
-  }
-  .bds0118FormInput-input:focus {
-    --input_border-color: var(--color_interactive);
-    outline: none;
-    box-shadow: var(--input_focus-ring, 0 0 0 2px rgb(from var(--color_interactive) r g b / 20%));
-  }
-  .bds0118FormInput-inputError {
-    --input_border-color: var(--color_error);
-  }
-  .bds0118FormInput-inputError:focus {
-    --input_focus-ring: 0 0 0 2px rgb(from var(--color_error) r g b / 20%);
+  .bds101FormInput-input {
+    font-family: var(--bds-font_family--body);
+    font-size: var(--bds-font_size--body);
+    padding: var(--bds-space_s);
+    border: var(--input_border, none);
+    --bdc_color: currentcolor;
+    --bdc-outline_radius: var(--bds-border_radius--xs);
+    outline: var(--bdc-outline_width) solid var(--bdc_color);
+    outline-offset: var(--bdc-outline_offset);
+    border-radius: var(--input_radius, var(--bdc-outline_radius));
+    box-shadow: var(--input_shadow, var(--bdc-outline_shadow));
+    color: var(--input_color, var(--bds-on-bg));
+    background-color: var(--input_color_bg, var(--bds-bg));
+    transition: --bdc_color var(--bds-animation_transition-duration) var(--bds-animation_easing), background-color var(--bds-animation_transition-duration) var(--bds-animation_easing);
+  }
+  .bds101FormInput-input:focus {
+    --bdc_color: var(--bdc_color--focus);
+  }
+  .bds101FormInput-input:focus-visible {
+    outline: var(--bds-outline_default);
+    outline-offset: var(--bds-outline_offset);
+  }
+  .bds101FormInput-inputError {
+    --bdc_color: var(--bdc_color--error);
   }
 }
 
 /* src/components/interaction/form/NumberInput/NumberInput.module.css */
 @layer component {
-  .bds0118NumberInput-formGroup {
+  .bds101NumberInput-formGroup {
     display: flex;
     flex-direction: column;
   }
-  .bds0118NumberInput-inputRow {
+  .bds101NumberInput-inputRow {
     display: flex;
     align-items: stretch;
-    border: 1px solid currentcolor;
-    border-radius: var(--border_radius--xs);
+    border: var(--numberInput_border, none);
+    --bdc_color: currentcolor;
+    --bdc-outline_radius: var(--bds-border_radius--xs);
+    outline: var(--bdc-outline_width) solid var(--bdc_color);
+    outline-offset: var(--bdc-outline_offset);
+    border-radius: var(--numberInput_radius, var(--bdc-outline_radius));
+    box-shadow: var(--numberInput_shadow, var(--bdc-outline_shadow));
     overflow: hidden;
-    transition: var(--animation_transition);
+    transition: --bdc_color var(--bds-animation_transition-duration) var(--bds-animation_easing);
+  }
+  .bds101NumberInput-inputRow:focus-within {
+    --bdc_color: var(--bdc_color--focus);
   }
-  .bds0118NumberInput-inputRow:focus-within {
-    border-color: var(--numberInput_border-color, var(--color_interactive));
-    box-shadow: var(--numberInput_focus-ring, 0 0 0 2px rgb(from var(--color_interactive) r g b / 20%));
+  .bds101NumberInput-inputRow:focus-within:has(:focus-visible) {
+    outline: var(--bds-outline_default);
+    outline-offset: var(--bds-outline_offset);
   }
-  .bds0118NumberInput-input {
+  .bds101NumberInput-input {
     flex: 1;
     border: none;
     outline: none;
-    font-family: var(--font_family--body);
-    font-size: var(--font_size--body);
+    font-family: var(--bds-font_family--body);
+    font-size: var(--bds-font_size--body);
     text-align: center;
-    padding: var(--space_s);
+    padding: var(--bds-space_s);
     background: transparent;
-    color: var(--numberInput_color, var(--color_on-bg));
+    color: var(--numberInput_color, var(--bds-on-bg));
     min-width: 0;
     appearance: textfield;
   }
-  .bds0118NumberInput-input::-webkit-inner-spin-button,
-  .bds0118NumberInput-input::-webkit-outer-spin-button {
+  .bds101NumberInput-input::-webkit-inner-spin-button,
+  .bds101NumberInput-input::-webkit-outer-spin-button {
     appearance: none;
   }
-  .bds0118NumberInput-inputError {
-    --numberInput_border-color: var(--color_error);
+  .bds101NumberInput-inputError {
+    --bdc_color: var(--bdc_color--error);
   }
-  .bds0118NumberInput-inputError:focus-within {
-    --numberInput_focus-ring: 0 0 0 2px rgb(from var(--color_error) r g b / 20%);
-  }
-  .bds0118NumberInput-stepper {
+  .bds101NumberInput-stepper {
     all: unset;
     display: flex;
     align-items: center;
     justify-content: center;
-    padding: var(--space_xs);
-    background-color: var(--color_bg--subtle);
-    color: var(--numberInput_color, var(--color_on-bg));
+    padding: var(--bds-space_xs);
+    background-color: var(--bds-bg--subtle);
+    color: var(--numberInput_color, var(--bds-on-bg));
     cursor: pointer;
-    transition: var(--animation_transition);
+    transition: var(--bds-animation_transition);
     flex-shrink: 0;
   }
-  .bds0118NumberInput-stepper svg {
+  .bds101NumberInput-stepper svg {
     width: 1rem;
     height: 1rem;
   }
-  .bds0118NumberInput-stepper:disabled {
+  .bds101NumberInput-stepper:disabled {
     opacity: 0.4;
     cursor: not-allowed;
   }
   @media (hover: hover) and (pointer: fine) {
-    .bds0118NumberInput-stepper:not(:disabled):hover {
-      background-color: var(--color_bg--subtle);
+    .bds101NumberInput-stepper:not(:disabled):hover {
+      background-color: var(--bds-bg--subtle);
       opacity: 0.7;
     }
   }
@@ -2065,47 +2202,52 @@
 
 /* src/components/interaction/form/Radio/Radio.module.css */
 @layer component {
-  .bds0118Radio-radioGroup {
-    --inputSize: calc(var(--space_s) * 2);
-    --labelPosition: calc(var(--inputSize) + var(--space_m));
+  .bds101Radio-radioGroup {
+    --inputSize: calc(var(--bds-space_s) * 2);
+    --labelPosition: calc(var(--inputSize) + var(--bds-space_m));
     display: flex;
     flex-direction: column;
   }
-  .bds0118Radio-inputWrapper {
+  .bds101Radio-inputWrapper {
     display: flex;
     align-items: flex-start;
-    gap: var(--space_xs);
+    gap: var(--bds-space_xs);
   }
-  .bds0118Radio-textWrapper {
+  .bds101Radio-textWrapper {
     display: flex;
     flex-direction: column;
-    gap: var(--space_xxxs);
-    padding-block-start: var(--space_xxxs);
+    gap: var(--bds-space_xxxs);
+    padding-block-start: var(--bds-space_xxxs);
   }
-  .bds0118Radio-description {
-    font-size: var(--font_size--body--s);
-    color: var(--radio_description-color, var(--color_on-bg--subtle));
-    line-height: var(--font_line-height--body);
+  .bds101Radio-description {
+    font-size: var(--bds-font_size--body--s);
+    color: var(--radio_description-color, var(--bds-on-bg--subtle));
+    line-height: var(--bds-font_line-height--body);
   }
-  .bds0118Radio-radio {
+  .bds101Radio-radio {
     flex-shrink: 0;
     margin-block-start: 0.2em;
     width: var(--inputSize);
     height: var(--inputSize);
-    color: var(--radio_color, var(--color_on-bg));
-    border: 1.5px solid currentcolor;
-    border-radius: 50%;
+    color: var(--radio_color, var(--bds-on-bg));
+    border: var(--radio_border, none);
+    --bdc_color: currentcolor;
+    --bdc-outline_radius: 50%;
+    outline: var(--bdc-outline_width) solid var(--bdc_color);
+    outline-offset: var(--bdc-outline_offset);
+    border-radius: var(--radio_radius, var(--bdc-outline_radius));
+    box-shadow: var(--radio_shadow, var(--bdc-outline_shadow));
     appearance: none;
-    background-color: var(--radio_color_bg, var(--color_bg));
+    background-color: var(--radio_color_bg, var(--bds-bg));
     cursor: pointer;
     position: relative;
-    transition: background-color 0.2s ease, border-color 0.2s ease;
+    transition: --bdc_color 0.2s ease, background-color 0.2s ease;
   }
-  .bds0118Radio-radio:checked {
-    background-color: var(--radio_color-active, var(--color_active));
-    border-color: var(--radio_color-active, var(--color_active));
+  .bds101Radio-radio:checked {
+    background-color: var(--radio_color-active, var(--bds-active));
+    --bdc_color: var(--radio_color-active, var(--bds-active));
   }
-  .bds0118Radio-radio:checked::after {
+  .bds101Radio-radio:checked::after {
     content: "";
     position: absolute;
     left: 50%;
@@ -2114,106 +2256,132 @@
     width: 0.4em;
     height: 0.4em;
     border-radius: 50%;
-    background-color: var(--radio_color-on-active, var(--color_on-active));
+    background-color: var(--radio_color-on-active, var(--bds-on-active));
   }
-  .bds0118Radio-radio:focus {
-    outline: none;
-    border-color: var(--color_interactive);
-    box-shadow: 0 0 0 2px rgb(from var(--color_interactive) r g b / 20%);
+  .bds101Radio-radio:focus {
+    --bdc_color: var(--bdc_color--focus);
+  }
+  .bds101Radio-radio:focus-visible {
+    outline: var(--bds-outline_default);
+    outline-offset: var(--bds-outline_offset);
+  }
+  .bds101Radio-radioError {
+    --bdc_color: var(--bdc_color--error);
+  }
+}
+
+/* src/components/interaction/form/RadioGroup/RadioGroup.module.css */
+@layer component {
+  .bds101RadioGroup-group {
+    border: none;
+    padding: 0;
+    margin: 0;
+    display: flex;
+    flex-direction: column;
+    gap: var(--bds-space_xs);
+  }
+  .bds101RadioGroup-legend {
+    font-family: var(--bds-font_family--body);
+    font-size: var(--bds-font_size--body--s);
+    font-weight: var(--bds-font_weight--medium);
+    color: var(--bds-on-bg);
+    padding: 0;
+    margin-block-end: var(--bds-space_xs);
   }
-  .bds0118Radio-radioError {
-    border-color: var(--color_error);
+  .bds101RadioGroup-required {
+    color: var(--bds-error);
   }
-  .bds0118Radio-radioError:focus {
-    border-color: var(--color_error);
-    box-shadow: 0 0 0 2px rgb(from var(--color_error) r g b / 20%);
+  .bds101RadioGroup-items {
+    display: flex;
+    flex-direction: column;
+    gap: var(--bds-space_xs);
   }
 }
 
 /* src/components/interaction/form/SegmentedControl/SegmentedControl.module.css */
 @layer component {
-  .bds0118SegmentedControl-control {
+  .bds101SegmentedControl-control {
     position: relative;
     display: inline-grid;
     grid-auto-flow: column;
     grid-auto-columns: 1fr;
-    padding: var(--space_xxxs);
-    background-color: var(--control_track-bg, var(--color_bg--subtle));
-    border-radius: var(--border_radius--m);
+    padding: var(--bds-space_xxxs);
+    background-color: var(--control_track-bg, var(--bds-bg--subtle));
+    border-radius: var(--bds-border_radius--m);
     gap: 0;
   }
-  .bds0118SegmentedControl-thumb {
+  .bds101SegmentedControl-thumb {
     position: absolute;
-    top: var(--space_xxxs);
-    bottom: var(--space_xxxs);
-    left: var(--space_xxxs);
-    width: calc((100% - 2 * var(--space_xxxs)) / var(--control_count, 1));
-    border-radius: var(--border_radius--s);
-    background-color: var(--control_thumb-bg, var(--color_bg));
-    box-shadow: var(--shadow_s);
+    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));
+    border-radius: var(--bds-border_radius--s);
+    background-color: var(--control_thumb-bg, var(--bds-bg));
+    box-shadow: var(--bds-shadow_s);
     pointer-events: none;
     transform: translateX(calc(var(--control_selected-index, 0) * 100%));
-    transition: transform var(--animation_transition-duration) var(--animation_easing);
+    transition: transform var(--bds-animation_transition-duration) var(--bds-animation_easing);
   }
-  .bds0118SegmentedControl-item {
+  .bds101SegmentedControl-item {
     position: relative;
     z-index: 1;
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
-    border-radius: var(--border_radius--s);
-    transition: var(--animation_transition);
+    border-radius: var(--bds-border_radius--s);
+    transition: var(--bds-animation_transition);
   }
-  .bds0118SegmentedControl-item.bds0118SegmentedControl---disabled {
+  .bds101SegmentedControl-item.bds101SegmentedControl---disabled {
     opacity: 0.4;
     cursor: not-allowed;
   }
-  .bds0118SegmentedControl-radio {
+  .bds101SegmentedControl-radio {
     position: absolute;
     opacity: 0;
     width: 0;
     height: 0;
     margin: 0;
   }
-  .bds0118SegmentedControl-label {
+  .bds101SegmentedControl-label {
     display: block;
-    padding: var(--space_xs) var(--space_m);
+    padding: var(--bds-space_xs) var(--bds-space_m);
     white-space: nowrap;
-    font-size: var(--font_size--body);
-    line-height: var(--font_line-height--body);
-    color: var(--control_label-color, var(--color_on-bg--subtle));
-    transition: color var(--animation_transition-duration) var(--animation_easing);
+    font-size: var(--bds-font_size--body);
+    line-height: var(--bds-font_line-height--body);
+    color: var(--control_label-color, var(--bds-on-bg--subtle));
+    transition: color var(--bds-animation_transition-duration) var(--bds-animation_easing);
     pointer-events: none;
     user-select: none;
   }
-  .bds0118SegmentedControl-control.bds0118SegmentedControl---size_small .bds0118SegmentedControl-label {
-    padding: var(--space_xxs) var(--space_s);
-    font-size: var(--font_size--body--s);
+  .bds101SegmentedControl-control.bds101SegmentedControl---size_small .bds101SegmentedControl-label {
+    padding: var(--bds-space_xxs) var(--bds-space_s);
+    font-size: var(--bds-font_size--body--s);
   }
-  .bds0118SegmentedControl-control.bds0118SegmentedControl---size_large .bds0118SegmentedControl-label {
-    padding: var(--space_s) var(--space_m);
+  .bds101SegmentedControl-control.bds101SegmentedControl---size_large .bds101SegmentedControl-label {
+    padding: var(--bds-space_s) var(--bds-space_m);
     white-space: normal;
     text-align: center;
   }
-  .bds0118SegmentedControl-item.bds0118SegmentedControl---active .bds0118SegmentedControl-label {
-    color: var(--control_label-color--active, var(--color_on-bg));
+  .bds101SegmentedControl-item.bds101SegmentedControl---active .bds101SegmentedControl-label {
+    color: var(--control_label-color--active, var(--bds-on-bg));
   }
-  .bds0118SegmentedControl-radio:focus-visible ~ .bds0118SegmentedControl-label {
-    outline: var(--outline_default);
-    outline-offset: calc(var(--outline_offset) * -1);
-    border-radius: var(--border_radius--s);
+  .bds101SegmentedControl-radio:focus-visible ~ .bds101SegmentedControl-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) {
-    .bds0118SegmentedControl-item:not(.bds0118SegmentedControl---active, .bds0118SegmentedControl---disabled):hover .bds0118SegmentedControl-label {
-      color: var(--control_label-color--hover, var(--color_on-bg));
+    .bds101SegmentedControl-item:not(.bds101SegmentedControl---active, .bds101SegmentedControl---disabled):hover .bds101SegmentedControl-label {
+      color: var(--control_label-color--hover, var(--bds-on-bg));
     }
   }
   @media (prefers-reduced-motion: reduce) {
-    .bds0118SegmentedControl-thumb {
+    .bds101SegmentedControl-thumb {
       transition: none;
     }
-    .bds0118SegmentedControl-label {
+    .bds101SegmentedControl-label {
       transition: none;
     }
   }
@@ -2221,53 +2389,57 @@
 
 /* src/components/interaction/form/Select/Select.module.css */
 @layer component {
-  .bds0118Select-formGroup {
+  .bds101Select-formGroup {
     display: flex;
     flex-direction: column;
   }
-  .bds0118Select-selectWrapper {
+  .bds101Select-selectWrapper {
     position: relative;
     display: flex;
     align-items: center;
   }
-  .bds0118Select-select {
+  .bds101Select-select {
     appearance: none;
     width: 100%;
-    font-family: var(--font_family--body);
-    font-size: var(--font_size--body);
-    padding: var(--space_s);
-    padding-inline-end: var(--space_xxl);
-    border: 1px solid var(--select_border-color, currentcolor);
-    border-radius: var(--border_radius--xs);
-    background-color: var(--select_color_bg, var(--color_bg));
-    color: var(--select_color, var(--color_on-bg));
+    font-family: var(--bds-font_family--body);
+    font-size: var(--bds-font_size--body);
+    padding: var(--bds-space_s);
+    padding-inline-end: var(--bds-space_xxl);
+    border: var(--select_border, none);
+    --bdc_color: currentcolor;
+    --bdc-outline_radius: var(--bds-border_radius--xs);
+    outline: var(--bdc-outline_width) solid var(--bdc_color);
+    outline-offset: var(--bdc-outline_offset);
+    border-radius: var(--select_radius, var(--bdc-outline_radius));
+    box-shadow: var(--select_shadow, var(--bdc-outline_shadow));
+    background-color: var(--select_color_bg, var(--bds-bg));
+    color: var(--select_color, var(--bds-on-bg));
     cursor: pointer;
-    transition: var(--animation_transition);
+    transition: --bdc_color var(--bds-animation_transition-duration) var(--bds-animation_easing), background-color var(--bds-animation_transition-duration) var(--bds-animation_easing);
   }
-  .bds0118Select-select:focus {
-    --select_border-color: var(--color_interactive);
-    outline: none;
-    box-shadow: var(--select_focus-ring, 0 0 0 2px rgb(from var(--color_interactive) r g b / 20%));
+  .bds101Select-select:focus {
+    --bdc_color: var(--bdc_color--focus);
   }
-  .bds0118Select-select:disabled {
+  .bds101Select-select:focus-visible {
+    outline: var(--bds-outline_default);
+    outline-offset: var(--bds-outline_offset);
+  }
+  .bds101Select-select:disabled {
     opacity: 0.5;
     cursor: not-allowed;
   }
-  .bds0118Select-selectError {
-    --select_border-color: var(--color_error);
-  }
-  .bds0118Select-selectError:focus {
-    --select_focus-ring: 0 0 0 2px rgb(from var(--color_error) r g b / 20%);
+  .bds101Select-selectError {
+    --bdc_color: var(--bdc_color--error);
   }
-  .bds0118Select-chevron {
+  .bds101Select-chevron {
     position: absolute;
-    inset-inline-end: var(--space_s);
+    inset-inline-end: var(--bds-space_s);
     display: flex;
     align-items: center;
     pointer-events: none;
-    color: var(--select_color, var(--color_on-bg));
+    color: var(--select_color, var(--bds-on-bg));
   }
-  .bds0118Select-chevron svg {
+  .bds101Select-chevron svg {
     width: 1rem;
     height: 1rem;
   }
@@ -2275,26 +2447,26 @@
 
 /* src/components/interaction/form/Slider/Slider.module.css */
 @layer component {
-  .bds0118Slider-formGroup {
+  .bds101Slider-formGroup {
     display: flex;
     flex-direction: column;
-    gap: var(--space_xxs);
+    gap: var(--bds-space_xxs);
   }
-  .bds0118Slider-labelRow {
+  .bds101Slider-labelRow {
     display: flex;
     justify-content: space-between;
     align-items: baseline;
   }
-  .bds0118Slider-value {
-    font-size: var(--font_size--body--s);
+  .bds101Slider-value {
+    font-size: var(--bds-font_size--body--s);
     font-variant-numeric: tabular-nums;
-    color: var(--color_on-bg--subtle);
+    color: var(--bds-on-bg--subtle);
   }
-  .bds0118Slider-slider {
+  .bds101Slider-slider {
     --slider_fill: 0%;
-    --slider_track-height: var(--space_xxs);
-    --slider_thumb-size: calc(var(--space_s) * 2);
-    color: var(--slider_color, var(--color_on-bg));
+    --slider_track-height: var(--bds-space_xxs);
+    --slider_thumb-size: calc(var(--bds-space_s) * 2);
+    color: var(--slider_color, var(--bds-on-bg));
     appearance: none;
     width: 100%;
     height: var(--slider_track-height);
@@ -2302,60 +2474,60 @@
     background:
       linear-gradient(
         to right,
-        var(--slider_color-active, var(--color_active)) 0%,
-        var(--slider_color-active, var(--color_active)) var(--slider_fill),
-        var(--color_bg--subtle) var(--slider_fill),
-        var(--color_bg--subtle) 100%);
+        var(--slider_color-active, var(--bds-active)) 0%,
+        var(--slider_color-active, var(--bds-active)) var(--slider_fill),
+        var(--bds-bg--subtle) var(--slider_fill),
+        var(--bds-bg--subtle) 100%);
     cursor: pointer;
-    transition: var(--animation_transition);
+    transition: var(--bds-animation_transition);
   }
-  .bds0118Slider-slider:focus-visible {
-    outline: var(--outline_default);
-    outline-offset: var(--outline_offset);
+  .bds101Slider-slider:focus-visible {
+    outline: var(--bds-outline_default);
+    outline-offset: var(--bds-outline_offset);
     border-radius: 999px;
   }
-  .bds0118Slider-slider:disabled {
+  .bds101Slider-slider:disabled {
     opacity: 0.4;
     cursor: not-allowed;
   }
-  .bds0118Slider-slider::-webkit-slider-thumb {
+  .bds101Slider-slider::-webkit-slider-thumb {
     appearance: none;
     width: var(--slider_thumb-size);
     height: var(--slider_thumb-size);
     border-radius: 50%;
-    background-color: var(--slider_color-active, var(--color_active));
-    box-shadow: var(--shadow_s);
-    transition: var(--animation_transition);
+    background-color: var(--slider_color-active, var(--bds-active));
+    box-shadow: var(--bds-shadow_s);
+    transition: var(--bds-animation_transition);
     cursor: pointer;
   }
-  .bds0118Slider-slider::-moz-range-thumb {
+  .bds101Slider-slider::-moz-range-thumb {
     width: var(--slider_thumb-size);
     height: var(--slider_thumb-size);
     border: none;
     border-radius: 50%;
-    background-color: var(--slider_color-active, var(--color_active));
-    box-shadow: var(--shadow_s);
+    background-color: var(--slider_color-active, var(--bds-active));
+    box-shadow: var(--bds-shadow_s);
     cursor: pointer;
   }
-  .bds0118Slider-sliderError {
+  .bds101Slider-sliderError {
     background:
       linear-gradient(
         to right,
-        var(--color_error) 0%,
-        var(--color_error) var(--slider_fill),
-        var(--color_bg--subtle) var(--slider_fill),
-        var(--color_bg--subtle) 100%);
+        var(--bds-error) 0%,
+        var(--bds-error) var(--slider_fill),
+        var(--bds-bg--subtle) var(--slider_fill),
+        var(--bds-bg--subtle) 100%);
   }
-  .bds0118Slider-sliderError::-webkit-slider-thumb {
-    background-color: var(--color_error);
+  .bds101Slider-sliderError::-webkit-slider-thumb {
+    background-color: var(--bds-error);
   }
-  .bds0118Slider-sliderError::-moz-range-thumb {
-    background-color: var(--color_error);
+  .bds101Slider-sliderError::-moz-range-thumb {
+    background-color: var(--bds-error);
   }
   @media (prefers-reduced-motion: reduce) {
-    .bds0118Slider-slider,
-    .bds0118Slider-slider::-webkit-slider-thumb,
-    .bds0118Slider-slider::-moz-range-thumb {
+    .bds101Slider-slider,
+    .bds101Slider-slider::-webkit-slider-thumb,
+    .bds101Slider-slider::-moz-range-thumb {
       transition: none;
     }
   }
@@ -2363,30 +2535,30 @@
 
 /* src/components/interaction/form/Switch/Switch.module.css */
 @layer component {
-  .bds0118Switch-switchGroup {
+  .bds101Switch-switchGroup {
     --switch_thumb-size: 1.25em;
-    --switch_track-pad: var(--space_xxxs);
+    --switch_track-pad: var(--bds-space_xxxs);
     --switch_track-height: calc(var(--switch_thumb-size) + var(--switch_track-pad) * 2);
     --switch_track-width: calc(var(--switch_thumb-size) * 2 + var(--switch_track-pad) * 2);
-    color: var(--switch_color, var(--color_on-bg));
+    color: var(--switch_color, var(--bds-on-bg));
     display: flex;
     flex-direction: column;
   }
-  .bds0118Switch-switchGroup.bds0118Switch---size_small {
+  .bds101Switch-switchGroup.bds101Switch---size_small {
     --switch_thumb-size: 1em;
   }
-  .bds0118Switch-switchGroup.bds0118Switch---size_medium {
+  .bds101Switch-switchGroup.bds101Switch---size_medium {
     --switch_thumb-size: 1.25em;
   }
-  .bds0118Switch-switchGroup.bds0118Switch---size_large {
+  .bds101Switch-switchGroup.bds101Switch---size_large {
     --switch_thumb-size: 1.5em;
   }
-  .bds0118Switch-inputWrapper {
+  .bds101Switch-inputWrapper {
     display: flex;
     align-items: center;
-    gap: var(--space_xs);
+    gap: var(--bds-space_xs);
   }
-  .bds0118Switch-trackWrapper {
+  .bds101Switch-trackWrapper {
     position: relative;
     display: inline-flex;
     align-items: center;
@@ -2394,7 +2566,7 @@
     width: var(--switch_track-width);
     height: var(--switch_track-height);
   }
-  .bds0118Switch-switch {
+  .bds101Switch-switch {
     position: absolute;
     inset: 0;
     appearance: none;
@@ -2405,54 +2577,59 @@
     cursor: pointer;
     z-index: 1;
   }
-  .bds0118Switch-switch:disabled {
+  .bds101Switch-switch:disabled {
     cursor: not-allowed;
   }
-  .bds0118Switch-track {
+  .bds101Switch-track {
     display: inline-flex;
     align-items: center;
     width: var(--switch_track-width);
     height: var(--switch_track-height);
     border-radius: 999px;
-    background-color: var(--switch_track-bg, var(--color_grey--subtle));
+    background-color: var(--switch_track-bg, var(--bds-grey--subtle));
     padding-inline: var(--switch_track-pad);
     pointer-events: none;
-    transition: var(--animation_transition);
-    outline: 1px solid var(--switch_thumb-bg, var(--color_grey));
-    outline-offset: var(--outline_offset);
-  }
-  .bds0118Switch-thumb {
+    outline: var(--bdc-outline_width) solid var(--bdc_color);
+    outline-offset: var(--bds-outline_offset);
+    box-shadow: var(--switch_shadow, var(--bdc-outline_shadow));
+    transition:
+      --bdc_color var(--bds-animation_transition-duration) var(--bds-animation_easing),
+      background-color var(--bds-animation_transition-duration) var(--bds-animation_easing),
+      transform var(--bds-animation_transition-duration) var(--bds-animation_easing);
+    --bdc_color: var(--switch_thumb-bg, var(--bds-grey));
+  }
+  .bds101Switch-thumb {
     display: block;
     width: var(--switch_thumb-size);
     height: var(--switch_thumb-size);
     border-radius: 50%;
-    background-color: var(--switch_thumb-bg, var(--color_grey));
-    box-shadow: var(--shadow_s);
-    transition: var(--animation_transition);
+    background-color: var(--switch_thumb-bg, var(--bds-grey));
+    box-shadow: var(--bds-shadow_s);
+    transition: var(--bds-animation_transition);
     transform: translateX(0);
   }
-  .bds0118Switch-switch.bds0118Switch-switchError + .bds0118Switch-track {
-    outline: 1px solid var(--color_error);
+  .bds101Switch-switch.bds101Switch-switchError + .bds101Switch-track {
+    --bdc_color: var(--bds-error);
   }
-  .bds0118Switch-switch:checked + .bds0118Switch-track {
-    background-color: var(--switch_track-bg--active, var(--color_active--subtle));
-    outline-color: var(--switch_thumb-bg--active, var(--color_active--strong));
+  .bds101Switch-switch:checked + .bds101Switch-track {
+    background-color: var(--switch_track-bg--active, var(--bds-active--subtle));
+    --bdc_color: var(--switch_thumb-bg--active, var(--bds-active--strong));
   }
-  .bds0118Switch-switch:checked + .bds0118Switch-track .bds0118Switch-thumb {
-    background-color: var(--switch_thumb-bg--active, var(--color_active--strong));
+  .bds101Switch-switch:checked + .bds101Switch-track .bds101Switch-thumb {
+    background-color: var(--switch_thumb-bg--active, var(--bds-active--strong));
     transform: translateX(var(--switch_thumb-size));
   }
-  .bds0118Switch-switch:focus-visible + .bds0118Switch-track {
-    outline: var(--outline_default);
-    outline-offset: var(--outline_offset);
+  .bds101Switch-switch:focus-visible + .bds101Switch-track {
+    outline: var(--bds-outline_default);
+    outline-offset: var(--bds-outline_offset);
     border-radius: 999px;
   }
-  .bds0118Switch-switch:disabled + .bds0118Switch-track {
+  .bds101Switch-switch:disabled + .bds101Switch-track {
     opacity: 0.4;
   }
   @media (prefers-reduced-motion: reduce) {
-    .bds0118Switch-track,
-    .bds0118Switch-thumb {
+    .bds101Switch-track,
+    .bds101Switch-thumb {
       transition: none;
     }
   }
@@ -2460,86 +2637,90 @@
 
 /* src/components/interaction/form/Textarea/Textarea.module.css */
 @layer component {
-  .bds0118Textarea-formGroup {
+  .bds101Textarea-formGroup {
     display: flex;
     flex-direction: column;
   }
-  .bds0118Textarea-textarea {
-    font-family: var(--font_family--body);
-    font-size: var(--font_size--body);
-    line-height: var(--font_line-height--body);
-    padding: var(--space_s);
-    border: 1px solid var(--textarea_border-color, currentcolor);
-    border-radius: var(--border_radius--xs);
-    background-color: var(--textarea_color_bg, var(--color_bg));
-    color: var(--textarea_color, var(--color_on-bg));
+  .bds101Textarea-textarea {
+    font-family: var(--bds-font_family--body);
+    font-size: var(--bds-font_size--body);
+    line-height: var(--bds-font_line-height--body);
+    padding: var(--bds-space_s);
+    border: var(--textarea_border, none);
+    --bdc_color: currentcolor;
+    --bdc-outline_radius: var(--bds-border_radius--xs);
+    outline: var(--bdc-outline_width) solid var(--bdc_color);
+    outline-offset: var(--bdc-outline_offset);
+    border-radius: var(--textarea_radius, var(--bdc-outline_radius));
+    box-shadow: var(--textarea_shadow, var(--bdc-outline_shadow));
+    background-color: var(--textarea_color_bg, var(--bds-bg));
+    color: var(--textarea_color, var(--bds-on-bg));
     resize: vertical;
-    min-height: calc(var(--space_m) * 5);
-    transition: var(--animation_transition);
+    min-height: 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);
   }
-  .bds0118Textarea-textarea:focus {
-    --textarea_border-color: var(--color_interactive);
-    outline: none;
-    box-shadow: var(--textarea_focus-ring, 0 0 0 2px rgb(from var(--color_interactive) r g b / 20%));
+  .bds101Textarea-textarea:focus {
+    --bdc_color: var(--bdc_color--focus);
+  }
+  .bds101Textarea-textarea:focus-visible {
+    outline: var(--bds-outline_default);
+    outline-offset: var(--bds-outline_offset);
   }
-  .bds0118Textarea-textarea:disabled {
+  .bds101Textarea-textarea:disabled {
     opacity: 0.5;
     cursor: not-allowed;
     resize: none;
   }
-  .bds0118Textarea-textareaError {
-    --textarea_border-color: var(--color_error);
-  }
-  .bds0118Textarea-textareaError:focus {
-    --textarea_focus-ring: 0 0 0 2px rgb(from var(--color_error) r g b / 20%);
+  .bds101Textarea-textareaError {
+    --bdc_color: var(--bdc_color--error);
   }
 }
 
 /* src/components/layout/ButtonGroup/ButtonGroup.module.css */
 @layer component {
-  .bds0118ButtonGroup-buttonGroup {
+  .bds101ButtonGroup-buttonGroup {
     container-type: inline-size;
     container-name: button-group;
-    grid-column: var(--grid_span-100);
+    grid-column: var(--bds-grid_span-100);
   }
-  .bds0118ButtonGroup-buttonGroup .bds0118ButtonGroup-container {
+  .bds101ButtonGroup-buttonGroup .bds101ButtonGroup-container {
     position: relative;
     display: flex;
     flex-direction: column-reverse;
-    gap: var(--space_l);
+    gap: var(--bds-space_l);
     align-items: center;
   }
-  .bds0118ButtonGroup-buttonGroup.bds0118ButtonGroup---variant_card .bds0118ButtonGroup-container {
+  .bds101ButtonGroup-buttonGroup.bds101ButtonGroup---variant_card .bds101ButtonGroup-container {
     align-items: stretch;
   }
-  .bds0118ButtonGroup-buttonGroup.bds0118ButtonGroup---variant_flow .bds0118ButtonGroup-container,
-  .bds0118ButtonGroup-buttonGroup.bds0118ButtonGroup---variant_modal .bds0118ButtonGroup-container {
+  .bds101ButtonGroup-buttonGroup.bds101ButtonGroup---variant_flow .bds101ButtonGroup-container,
+  .bds101ButtonGroup-buttonGroup.bds101ButtonGroup---variant_modal .bds101ButtonGroup-container {
     align-items: center;
   }
-  .bds0118ButtonGroup-buttonGroup.bds0118ButtonGroup---variant_content .bds0118ButtonGroup-container {
+  .bds101ButtonGroup-buttonGroup.bds101ButtonGroup---variant_content .bds101ButtonGroup-container {
     align-items: flex-start;
   }
   @supports (contain: inline-size) {
     @container button-group (min-width: 30rem) {
-      .bds0118ButtonGroup-buttonGroup .bds0118ButtonGroup-container {
+      .bds101ButtonGroup-buttonGroup .bds101ButtonGroup-container {
         flex-direction: row;
         justify-content: space-between;
       }
-      .bds0118ButtonGroup-buttonGroup.bds0118ButtonGroup---variant_modal .bds0118ButtonGroup-container > :first-child:last-child,
-      .bds0118ButtonGroup-buttonGroup.bds0118ButtonGroup---variant_flow .bds0118ButtonGroup-container > :first-child:last-child {
+      .bds101ButtonGroup-buttonGroup.bds101ButtonGroup---variant_modal .bds101ButtonGroup-container > :first-child:last-child,
+      .bds101ButtonGroup-buttonGroup.bds101ButtonGroup---variant_flow .bds101ButtonGroup-container > :first-child:last-child {
         margin-inline-start: auto;
       }
-      .bds0118ButtonGroup-buttonGroup.bds0118ButtonGroup---variant_card .bds0118ButtonGroup-container {
+      .bds101ButtonGroup-buttonGroup.bds101ButtonGroup---variant_card .bds101ButtonGroup-container {
         justify-content: center;
       }
-      .bds0118ButtonGroup-buttonGroup.bds0118ButtonGroup---variant_modal .bds0118ButtonGroup-container {
+      .bds101ButtonGroup-buttonGroup.bds101ButtonGroup---variant_modal .bds101ButtonGroup-container {
         justify-content: flex-end;
       }
-      .bds0118ButtonGroup-buttonGroup.bds0118ButtonGroup---variant_content .bds0118ButtonGroup-container {
+      .bds101ButtonGroup-buttonGroup.bds101ButtonGroup---variant_content .bds101ButtonGroup-container {
         justify-content: flex-start;
         align-items: center;
       }
-      .bds0118ButtonGroup-buttonGroup.bds0118ButtonGroup---variant_grid .bds0118ButtonGroup-container {
+      .bds101ButtonGroup-buttonGroup.bds101ButtonGroup---variant_grid .bds101ButtonGroup-container {
         justify-content: center;
       }
     }
@@ -2548,129 +2729,140 @@
 
 /* src/components/layout/Card/Card.module.css */
 @layer component {
-  .bds0118Card-card {
-    background-color: var(--card_color, var(--color_bg));
-    color: var(--card_on-color, var(--color_on-bg));
-    border-radius: var(--border_radius--m);
+  .bds101Card-card {
+    background-color: var(--card_color, var(--bds-bg));
+    color: var(--card_on-color, var(--bds-on-bg));
+    border-radius: var(--bds-border_radius--m);
     transition: all 0.3s ease;
     position: relative;
   }
-  .bds0118Card-card.bds0118Card---default {
-    box-shadow: var(--shadow_s);
+  .bds101Card-card.bds101Card---default {
+    box-shadow: var(--bds-shadow_s);
   }
-  .bds0118Card-card.bds0118Card---elevated {
-    box-shadow: var(--shadow_m);
+  .bds101Card-card.bds101Card---elevated {
+    box-shadow: var(--bds-shadow_m);
   }
-  .bds0118Card-card.bds0118Card---outlined {
-    border: 1px solid currentcolor;
-    box-shadow: var(--shadow_s);
+  .bds101Card-card.bds101Card---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);
   }
-  .bds0118Card-card.bds0118Card---clickable {
+  .bds101Card-card.bds101Card---clickable {
     cursor: pointer;
   }
-  .bds0118Card-card.bds0118Card---padding-none {
+  .bds101Card-card.bds101Card---padding-none {
     padding: 0;
   }
-  .bds0118Card-card.bds0118Card---padding-small {
-    padding: var(--space_s);
+  .bds101Card-card.bds101Card---padding-small {
+    padding: var(--bds-space_s);
   }
-  .bds0118Card-card.bds0118Card---padding-medium {
-    padding: var(--space_m);
+  .bds101Card-card.bds101Card---padding-medium {
+    padding: var(--bds-space_m);
   }
-  .bds0118Card-card.bds0118Card---padding-large {
-    padding: var(--space_l);
+  .bds101Card-card.bds101Card---padding-large {
+    padding: var(--bds-space_l);
   }
-  .bds0118Card-card.bds0118Card---text-start {
-    text-align: left;
+  .bds101Card-card.bds101Card---text-start {
+    text-align: start;
   }
-  .bds0118Card-card.bds0118Card---text-center {
+  .bds101Card-card.bds101Card---text-center {
     text-align: center;
   }
-  .bds0118Card-card.bds0118Card---text-end {
-    text-align: right;
+  .bds101Card-card.bds101Card---text-end {
+    text-align: end;
+  }
+  .bds101Card-card.bds101Card---clickable:focus-visible {
+    outline: 2px solid var(--color_focus, currentcolor);
+    outline-offset: 2px;
+  }
+  .bds101Card-card.bds101Card---clickable:active {
+    transform: translateY(0);
+    box-shadow: var(--bds-shadow_s);
   }
   @media (hover: hover) and (pointer: fine) {
-    .bds0118Card-card.bds0118Card---clickable:hover {
+    .bds101Card-card.bds101Card---clickable:hover {
       transform: translateY(-2px);
-      box-shadow: var(--shadow_xl);
+      box-shadow: var(--bds-shadow_xl);
     }
-    .bds0118Card-card.bds0118Card---default:hover {
-      box-shadow: var(--shadow_m);
+    .bds101Card-card.bds101Card---default:hover {
+      box-shadow: var(--bds-shadow_m);
     }
-    .bds0118Card-card.bds0118Card---elevated:hover {
-      box-shadow: var(--shadow_2xl);
+    .bds101Card-card.bds101Card---elevated:hover {
+      box-shadow: var(--bds-shadow_2xl);
     }
-    .bds0118Card-card.bds0118Card---outlined:hover {
-      box-shadow: var(--shadow_s);
+    .bds101Card-card.bds101Card---outlined:hover {
+      box-shadow: var(--bds-shadow_s);
     }
   }
 }
 
 /* src/components/layout/SectionHeader/SectionHeader.module.css */
 @layer component {
-  .bds0118SectionHeader-sectionHeader {
+  .bds101SectionHeader-sectionHeader {
     display: flex;
     flex-direction: column;
-    gap: var(--space_m);
-    grid-column: var(--grid_span-100);
+    gap: var(--bds-space_m);
+    grid-column: var(--bds-grid_span-100);
   }
-  .bds0118SectionHeader-title {
-    color: var(--sectionHeader-title-color, var(--color_on-bg));
+  .bds101SectionHeader-title {
+    color: var(--sectionHeader-title-color, var(--bds-on-bg));
     margin: 0;
-    font-family: var(--font_family--body);
+    font-family: var(--bds-font_family--body);
   }
-  .bds0118SectionHeader-subtitle {
-    color: var(--sectionHeader_subtitle-color, var(--color_grey--strong));
+  .bds101SectionHeader-subtitle {
+    color: var(--sectionHeader_subtitle-color, var(--bds-grey--strong));
     margin: 0;
-    font-family: var(--font_family--body);
-    font-weight: var(--font_weight--medium);
+    font-family: var(--bds-font_family--body);
+    font-weight: var(--bds-font_weight--medium);
   }
-  .bds0118SectionHeader-sectionHeader.bds0118SectionHeader---start {
+  .bds101SectionHeader-sectionHeader.bds101SectionHeader---start {
     align-items: flex-start;
-    text-align: left;
+    text-align: start;
   }
-  .bds0118SectionHeader-sectionHeader.bds0118SectionHeader---center {
+  .bds101SectionHeader-sectionHeader.bds101SectionHeader---center {
     align-items: center;
     text-align: center;
   }
-  .bds0118SectionHeader-sectionHeader.bds0118SectionHeader---end {
+  .bds101SectionHeader-sectionHeader.bds101SectionHeader---end {
     align-items: flex-end;
-    text-align: right;
+    text-align: end;
   }
-  .bds0118SectionHeader-sectionHeader.bds0118SectionHeader---small .bds0118SectionHeader-title {
-    font-size: var(--font_size--heading-1);
-    line-height: var(--font_line-height--heading);
-    font-weight: var(--font_weight--bold);
+  .bds101SectionHeader-sectionHeader.bds101SectionHeader---small .bds101SectionHeader-title {
+    font-size: var(--bds-font_size--heading-1);
+    line-height: var(--bds-font_line-height--heading);
+    font-weight: var(--bds-font_weight--bold);
   }
-  .bds0118SectionHeader-sectionHeader.bds0118SectionHeader---small .bds0118SectionHeader-subtitle {
-    font-size: var(--font_size--body);
+  .bds101SectionHeader-sectionHeader.bds101SectionHeader---small .bds101SectionHeader-subtitle {
+    font-size: var(--bds-font_size--body);
     line-height: 1.4;
   }
-  .bds0118SectionHeader-sectionHeader.bds0118SectionHeader---medium .bds0118SectionHeader-title {
-    font-size: var(--font_size--display);
-    line-height: var(--font_line-height--display);
-    font-weight: var(--font_weight--bold);
+  .bds101SectionHeader-sectionHeader.bds101SectionHeader---medium .bds101SectionHeader-title {
+    font-size: var(--bds-font_size--display);
+    line-height: var(--bds-font_line-height--display);
+    font-weight: var(--bds-font_weight--bold);
   }
-  .bds0118SectionHeader-sectionHeader.bds0118SectionHeader---medium .bds0118SectionHeader-subtitle {
-    font-size: var(--font_size--heading-3);
+  .bds101SectionHeader-sectionHeader.bds101SectionHeader---medium .bds101SectionHeader-subtitle {
+    font-size: var(--bds-font_size--heading-3);
     line-height: 1.3;
   }
-  .bds0118SectionHeader-sectionHeader.bds0118SectionHeader---large .bds0118SectionHeader-title {
-    font-size: var(--font_size--display);
-    line-height: var(--font_line-height--display);
-    font-weight: var(--font_weight--bold);
-    letter-spacing: var(--font_tracking--tight);
+  .bds101SectionHeader-sectionHeader.bds101SectionHeader---large .bds101SectionHeader-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);
   }
-  .bds0118SectionHeader-sectionHeader.bds0118SectionHeader---large .bds0118SectionHeader-subtitle {
-    font-size: var(--font_size--heading-2);
+  .bds101SectionHeader-sectionHeader.bds101SectionHeader---large .bds101SectionHeader-subtitle {
+    font-size: var(--bds-font_size--heading-2);
     line-height: 1.3;
-    font-weight: var(--font_weight--medium);
+    font-weight: var(--bds-font_weight--medium);
   }
 }
 
 /* src/components/layout/IconWrapper/IconWrapper.module.css */
 @layer component {
-  .bds0118IconWrapper-wrapper {
+  .bds101IconWrapper-wrapper {
     width: 2em;
     height: 2em;
     font-size: 3em;
@@ -2678,14 +2870,14 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    margin: var(--space_l) auto var(--space_m);
-    background: var(--icon-wrapper-color, var(--color_bg));
-    color: var(--color_on-icon-wrapper-color, var(--color_on-bg));
-    fill: var(--color_on-icon-wrapper-color, var(--color_on-bg));
+    margin: var(--bds-space_l) auto var(--bds-space_m);
+    background: var(--icon-wrapper-color, var(--bds-bg));
+    color: var(--bds-on-icon-wrapper-color, var(--bds-on-bg));
+    fill: var(--bds-on-icon-wrapper-color, var(--bds-on-bg));
     position: relative;
-    transition: var(--animation_transition);
+    transition: var(--bds-animation_transition);
   }
-  .bds0118IconWrapper-wrapper svg {
+  .bds101IconWrapper-wrapper svg {
     fill: currentcolor;
   }
 }