@recursica/mui-adapter 0.18.1 → 0.19.1

package/src/components/Modal/Modal.module.css

@@ -1,9 +1,13 @@
 /* EXEMPTIONS:
-   - content-style and header-style parent variables represent raw JSON styling objects rather than 
+   - content-style and header-style parent variables represent raw JSON styling objects rather than
      direct CSS variables and cannot be applied directly in standard CSS files.
-     Sub-properties are fully and individually mapped to elements natively. */
+     Sub-properties are fully and individually mapped to elements natively.
+   - header/footer background-color are ignored because .header/.footer are intentionally
+     transparent (inheriting .content's background), matching Panel's header/footer treatment. */
 /* recursica-ignore: --recursica_ui-kit_components_modal_properties_content-style */
 /* recursica-ignore: --recursica_ui-kit_components_modal_properties_header-style */
+/* recursica-ignore: --recursica_ui-kit_components_modal_properties_colors_footer-background-color */
+/* recursica-ignore: --recursica_ui-kit_components_modal_properties_colors_header-background-color */
 
 .root {
 }
@@ -37,7 +41,7 @@
 
   /* Appearance */
   background-color: var(
-    --recursica_ui-kit_components_modal_properties_colors_background
+    --recursica_ui-kit_components_modal_properties_colors_content-background-color
   );
   box-shadow: var(--recursica_ui-kit_components_modal_properties_elevation);
 
@@ -47,8 +51,12 @@
 }
 
 .header {
-  padding: var(--recursica_ui-kit_components_modal_properties_vertical-padding)
-    var(--recursica_ui-kit_components_modal_properties_horizontal-padding);
+  padding: var(
+      --recursica_ui-kit_components_modal_properties_header-footer-vertical-padding
+    )
+    var(
+      --recursica_ui-kit_components_modal_properties_header-footer-horizontal-padding
+    );
   background-color: transparent; /* Inherit from content */
 }
 
@@ -93,8 +101,12 @@
 }
 
 .scrollArea {
-  padding: var(--recursica_ui-kit_components_modal_properties_vertical-padding)
-    var(--recursica_ui-kit_components_modal_properties_horizontal-padding);
+  padding: var(
+      --recursica_ui-kit_components_modal_properties_content-vertical-padding
+    )
+    var(
+      --recursica_ui-kit_components_modal_properties_content-horizontal-padding
+    );
 
   /* Internal scrolling */
   flex: 1 1 auto;
@@ -137,11 +149,11 @@
   /* Smooth divider transitions */
   transition: border-color 0.15s ease;
   border-top: var(
-      --recursica_ui-kit_components_modal_properties_scroll-divider-thickness
+      --recursica_ui-kit_components_modal_properties_scroll-divider-size
     )
     solid transparent;
   border-bottom: var(
-      --recursica_ui-kit_components_modal_properties_scroll-divider-thickness
+      --recursica_ui-kit_components_modal_properties_scroll-divider-size
     )
     solid transparent;
 }
@@ -159,8 +171,12 @@
 }
 
 .footer {
-  padding: var(--recursica_ui-kit_components_modal_properties_vertical-padding)
-    var(--recursica_ui-kit_components_modal_properties_horizontal-padding);
+  padding: var(
+      --recursica_ui-kit_components_modal_properties_header-footer-vertical-padding
+    )
+    var(
+      --recursica_ui-kit_components_modal_properties_header-footer-horizontal-padding
+    );
   background-color: transparent;
   display: flex;
   justify-content: flex-end;

package/src/components/NumberInput/NumberInput.module.css

@@ -1,23 +1,36 @@
 /* EXEMPTIONS:
-   - state-specific border-size variables are ignored because the input box uses a uniform static boundary to prevent 
-     unexpected layout shifts or flickering when switching between active, focused, or error states. */
-/* recursica-ignore: --recursica_ui-kit_components_number-input_variants_states_default_properties_border-size */
+   - border-size variables are ignored because the input box uses a uniform static boundary to prevent
+     unexpected layout shifts or flickering when switching between focused, disabled, or error states. */
+/* recursica-ignore: --recursica_ui-kit_components_number-input_properties_border-size */
 /* recursica-ignore: --recursica_ui-kit_components_number-input_variants_states_disabled_properties_border-size */
 /* recursica-ignore: --recursica_ui-kit_components_number-input_variants_states_error_properties_border-size */
-/* recursica-ignore: --recursica_ui-kit_components_number-input_variants_states_focus_properties_border-size */
 
 /* LAYOUT SPACING OVERRIDES:
-   - Sets the --form-control-margin-bottom spacing hook to map component-specific layout tokens. */
+   - Sets the --form-control-margin-bottom spacing hook to map component-specific layout tokens.
+   - Also sets the --number-input-control-{max,min}-width hooks consumed inline in NumberInput.tsx,
+     since the token schema no longer provides a single layout-agnostic min/max width. */
 .layoutOverride {
   --form-control-margin-bottom: var(
     --recursica_ui-kit_components_number-input_variants_layouts_stacked_properties_top-bottom-margin
   );
+  --number-input-control-max-width: var(
+    --recursica_ui-kit_components_number-input_variants_layouts_stacked_properties_max-width
+  );
+  --number-input-control-min-width: var(
+    --recursica_ui-kit_components_number-input_variants_layouts_stacked_properties_min-width
+  );
 }
 
 .layoutOverride[data-form-layout="side-by-side"] {
   --form-control-margin-bottom: var(
     --recursica_ui-kit_components_number-input_variants_layouts_side-by-side_properties_top-bottom-margin
   );
+  --number-input-control-max-width: var(
+    --recursica_ui-kit_components_number-input_variants_layouts_side-by-side_properties_max-width
+  );
+  --number-input-control-min-width: var(
+    --recursica_ui-kit_components_number-input_variants_layouts_side-by-side_properties_min-width
+  );
 }
 
 /* HARDCODED VALUES:
@@ -109,13 +122,13 @@
 
   /* Base State Default Execution */
   background-color: var(
-    --recursica_ui-kit_components_number-input_variants_states_default_properties_colors_background
+    --recursica_ui-kit_components_number-input_properties_colors_background-color
   );
   border-color: var(
-    --recursica_ui-kit_components_number-input_variants_states_default_properties_colors_border-color
+    --recursica_ui-kit_components_number-input_properties_colors_border-color
   );
   color: var(
-    --recursica_ui-kit_components_number-input_variants_states_default_properties_colors_text
+    --recursica_ui-kit_components_number-input_properties_colors_text-color
   );
 
   outline: none;
@@ -162,13 +175,13 @@
   width: var(--recursica_ui-kit_components_number-input_properties_icon-size);
   height: var(--recursica_ui-kit_components_number-input_properties_icon-size);
   color: var(
-    --recursica_ui-kit_components_number-input_variants_states_default_properties_colors_leading-icon
+    --recursica_ui-kit_components_number-input_properties_colors_leading-icon
   );
 }
 
 .section[data-position="right"] :global(svg) {
   color: var(
-    --recursica_ui-kit_components_number-input_variants_states_default_properties_colors_trailing-icon
+    --recursica_ui-kit_components_number-input_properties_colors_trailing-icon
   );
 }
 
@@ -188,7 +201,7 @@
   border: none;
   background: transparent;
   color: var(
-    --recursica_ui-kit_components_number-input_variants_states_default_properties_colors_trailing-icon
+    --recursica_ui-kit_components_number-input_properties_colors_trailing-icon
   );
 }
 
@@ -201,30 +214,16 @@
 -------------------------------------- */
 
 /* Focus State Mapping (Triggered internally via browser pseudo-pseudo-class) */
+/* The token schema no longer provides per-component focus colors; apply the generic focus ring
+   tokens as a box-shadow ring instead of a color swap. */
 .input:focus-within,
 .input:focus {
-  border-color: var(
-    --recursica_ui-kit_components_number-input_variants_states_focus_properties_colors_border-color
-  );
-  background-color: var(
-    --recursica_ui-kit_components_number-input_variants_states_focus_properties_colors_background
-  );
-  color: var(
-    --recursica_ui-kit_components_number-input_variants_states_focus_properties_colors_text
-  );
-}
-
-.root:focus-within .section[data-position="left"] :global(svg) {
-  color: var(
-    --recursica_ui-kit_components_number-input_variants_states_focus_properties_colors_leading-icon
-  );
-}
-
-.root:focus-within .section[data-position="right"] :global(svg),
-.root:focus-within .control {
-  color: var(
-    --recursica_ui-kit_components_number-input_variants_states_focus_properties_colors_trailing-icon
-  );
+  box-shadow:
+    0 0 0 var(--recursica_brand_states_focus_border-size)
+      var(--recursica_brand_states_focus_color),
+    0 0 var(--recursica_brand_states_focus_blur)
+      var(--recursica_brand_states_focus_margin)
+      var(--recursica_brand_states_focus_color);
 }
 
 /* Error State Mapping (Propagated strictly down from the wrapper DOM context) */
@@ -233,10 +232,10 @@
     --recursica_ui-kit_components_number-input_variants_states_error_properties_colors_border-color
   ) !important;
   background-color: var(
-    --recursica_ui-kit_components_number-input_variants_states_error_properties_colors_background
+    --recursica_ui-kit_components_number-input_variants_states_error_properties_colors_background-color
   ) !important;
   color: var(
-    --recursica_ui-kit_components_number-input_variants_states_error_properties_colors_text
+    --recursica_ui-kit_components_number-input_variants_states_error_properties_colors_text-color
   ) !important;
 }
 
@@ -259,10 +258,13 @@
     --recursica_ui-kit_components_number-input_variants_states_disabled_properties_colors_border-color
   ) !important;
   background-color: var(
-    --recursica_ui-kit_components_number-input_variants_states_disabled_properties_colors_background
+    --recursica_ui-kit_components_number-input_variants_states_disabled_properties_colors_background-color
   ) !important;
   color: var(
-    --recursica_ui-kit_components_number-input_variants_states_disabled_properties_colors_text
+    --recursica_ui-kit_components_number-input_variants_states_disabled_properties_colors_text-color
+  ) !important;
+  opacity: var(
+    --recursica_ui-kit_components_number-input_variants_states_disabled_properties_opacity
   ) !important;
   cursor: not-allowed;
 }

package/src/components/NumberInput/NumberInput.tsx

@@ -110,8 +110,8 @@ export const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(
       <WithReadOnlyWrapper
         className={wrapperClass}
         style={style as React.CSSProperties}
-        controlMaxWidth="var(--recursica_ui-kit_components_number-input_properties_max-width)"
-        controlMinWidth="var(--recursica_ui-kit_components_number-input_properties_min-width)"
+        controlMaxWidth="var(--number-input-control-max-width)"
+        controlMinWidth="var(--number-input-control-min-width)"
         overStyled={overStyled as true}
         formLayout={formLayout}
         labelSize={labelSize}

package/src/components/Pagination/Pagination.module.css

@@ -145,13 +145,13 @@
     --recursica_ui-kit_components_button_variants_styles_outline_properties_elevation
   );
   background-color: var(
-    --recursica_ui-kit_components_button_variants_styles_outline_properties_colors_background
+    --recursica_ui-kit_components_button_variants_styles_outline_properties_colors_background-color
   );
   border-color: var(
     --recursica_ui-kit_components_button_variants_styles_outline_properties_colors_border-color
   );
   color: var(
-    --recursica_ui-kit_components_button_variants_styles_outline_properties_colors_text
+    --recursica_ui-kit_components_button_variants_styles_outline_properties_colors_text-color
   );
 }
 
@@ -160,13 +160,8 @@
   cursor: not-allowed;
 }
 
-.control:hover:not(:disabled) {
-  color: var(
-    --recursica_ui-kit_components_button_variants_styles_outline_properties_colors_text-hover
-  );
-}
-
-/* Hover Overlay */
+/* Hover Overlay: no per-variant hover-color/hover-opacity tokens exist anymore; use the
+   generic overlay tokens shared across components (same as Button). */
 .control::after {
   content: "";
   position: absolute;
@@ -176,15 +171,11 @@
   pointer-events: none;
   transition: opacity 150ms ease;
   opacity: 0;
-  background-color: var(
-    --recursica_ui-kit_components_button_variants_sizes_default_properties_hover-color
-  );
+  background-color: var(--recursica_brand_states_hover_color);
 }
 
 .control:hover:not(:disabled)::after {
-  opacity: var(
-    --recursica_ui-kit_components_button_variants_sizes_default_properties_hover-opacity
-  );
+  opacity: var(--recursica_brand_states_hover_opacity);
 }
 
 /* Active Style: Solid */
@@ -196,19 +187,13 @@
     --recursica_ui-kit_components_button_variants_styles_solid_properties_elevation
   );
   background-color: var(
-    --recursica_ui-kit_components_button_variants_styles_solid_properties_colors_background
+    --recursica_ui-kit_components_button_variants_styles_solid_properties_colors_background-color
   );
   border-color: var(
     --recursica_ui-kit_components_button_variants_styles_solid_properties_colors_border-color
   );
   color: var(
-    --recursica_ui-kit_components_button_variants_styles_solid_properties_colors_text
-  );
-}
-
-.control[data-active]:hover:not(:disabled) {
-  color: var(
-    --recursica_ui-kit_components_button_variants_styles_solid_properties_colors_text-hover
+    --recursica_ui-kit_components_button_variants_styles_solid_properties_colors_text-color
   );
 }
 
@@ -221,13 +206,13 @@
     --recursica_ui-kit_components_button_variants_styles_text_properties_elevation
   );
   background-color: var(
-    --recursica_ui-kit_components_button_variants_styles_text_properties_colors_background
+    --recursica_ui-kit_components_button_variants_styles_text_properties_colors_background-color
   );
   border-color: var(
     --recursica_ui-kit_components_button_variants_styles_text_properties_colors_border-color
   );
   color: var(
-    --recursica_ui-kit_components_button_variants_styles_text_properties_colors_text
+    --recursica_ui-kit_components_button_variants_styles_text_properties_colors_text-color
   );
 
   /* Also explicitly inherit navigation sizes incase they differ from pages */
@@ -246,24 +231,6 @@
     );
 }
 
-.control[data-variant="text"]:hover:not(:disabled) {
-  color: var(
-    --recursica_ui-kit_components_button_variants_styles_text_properties_colors_text-hover
-  );
-}
-
-/* Hover Overlay for Navigation */
-.control[data-variant="text"]::after {
-  background-color: var(
-    --recursica_ui-kit_components_button_variants_sizes_default_properties_hover-color
-  );
-}
-.control[data-variant="text"]:hover:not(:disabled)::after {
-  opacity: var(
-    --recursica_ui-kit_components_button_variants_sizes_default_properties_hover-opacity
-  );
-}
-
 /* Dots */
 .dots {
   display: inline-flex;

package/src/components/Panel/Panel.module.css

@@ -12,7 +12,7 @@
 
 .content {
   background-color: var(
-    --recursica_ui-kit_components_panel_properties_colors_background
+    --recursica_ui-kit_components_panel_properties_colors_background-color
   );
   border-style: solid;
   border-width: var(--recursica_ui-kit_components_panel_properties_border-size);
@@ -43,7 +43,7 @@
 
 .header {
   background-color: var(
-    --recursica_ui-kit_components_panel_properties_colors_header-footer-background
+    --recursica_ui-kit_components_panel_properties_colors_header-background-color
   );
   padding: var(
       --recursica_ui-kit_components_panel_properties_header-footer-vertical-padding
@@ -154,7 +154,7 @@
 
 .footer {
   background-color: var(
-    --recursica_ui-kit_components_panel_properties_colors_header-footer-background
+    --recursica_ui-kit_components_panel_properties_colors_footer-background-color
   );
   padding: var(
       --recursica_ui-kit_components_panel_properties_header-footer-vertical-padding

package/src/components/Radio/Radio.module.css

@@ -112,10 +112,10 @@
 
   /* Standard unchecked state */
   background-color: var(
-    --recursica_ui-kit_components_radio-button_properties_colors_background-unselected
+    --recursica_ui-kit_components_radio-button_variants_selection-states_unselected_properties_colors_background-color
   );
   border-color: var(
-    --recursica_ui-kit_components_radio-button_properties_colors_border-unselected
+    --recursica_ui-kit_components_radio-button_variants_selection-states_unselected_properties_colors_border-color
   );
   transition: all 0.2s ease; /* HARDCODE: consider global transition token */
 }
@@ -123,24 +123,37 @@
 /* Checked State */
 .root .radio:checked {
   background-color: var(
-    --recursica_ui-kit_components_radio-button_properties_colors_background-selected
+    --recursica_ui-kit_components_radio-button_variants_selection-states_selected_properties_colors_background-color
   );
   border-color: var(
-    --recursica_ui-kit_components_radio-button_properties_colors_border-selected
+    --recursica_ui-kit_components_radio-button_variants_selection-states_selected_properties_colors_border-color
   );
 }
 
-/* Disabled State */
+/* Disabled State (colors now differ per selection state, so each combination is mapped explicitly) */
 .root .radio:disabled {
   cursor: not-allowed; /* HARDCODE: disabled state default */
+}
+.root .radio:disabled:not(:checked) {
   opacity: var(
-    --recursica_ui-kit_components_radio-button_properties_disabled-opacity
+    --recursica_ui-kit_components_radio-button_variants_selection-states_unselected_variants_states_disabled_properties_opacity
   );
   background-color: var(
-    --recursica_ui-kit_components_radio-button_properties_colors_disabled-background
+    --recursica_ui-kit_components_radio-button_variants_selection-states_unselected_variants_states_disabled_properties_colors_background-color
   );
   border-color: var(
-    --recursica_ui-kit_components_radio-button_properties_colors_disabled-border
+    --recursica_ui-kit_components_radio-button_variants_selection-states_unselected_variants_states_disabled_properties_colors_border-color
+  );
+}
+.root .radio:checked:disabled {
+  opacity: var(
+    --recursica_ui-kit_components_radio-button_variants_selection-states_selected_variants_states_disabled_properties_opacity
+  );
+  background-color: var(
+    --recursica_ui-kit_components_radio-button_variants_selection-states_selected_variants_states_disabled_properties_colors_background-color
+  );
+  border-color: var(
+    --recursica_ui-kit_components_radio-button_variants_selection-states_selected_variants_states_disabled_properties_colors_border-color
   );
 }
 
@@ -151,14 +164,18 @@
   pointer-events: none;
   width: var(--recursica_ui-kit_components_radio-button_properties_icon-size);
   height: var(--recursica_ui-kit_components_radio-button_properties_icon-size);
+}
+/* No icon-color token exists for the unselected state (no icon is visible then) */
+.root .radio:checked + .iconWrapper .icon,
+.root .radio:checked + .icon {
   color: var(
-    --recursica_ui-kit_components_radio-button_properties_colors_icon-color
+    --recursica_ui-kit_components_radio-button_variants_selection-states_selected_properties_colors_icon-color
   );
 }
-.root .radio:disabled + .iconWrapper .icon,
-.root .radio:disabled + .icon {
+.root .radio:checked:disabled + .iconWrapper .icon,
+.root .radio:checked:disabled + .icon {
   color: var(
-    --recursica_ui-kit_components_radio-button_properties_colors_disabled-icon
+    --recursica_ui-kit_components_radio-button_variants_selection-states_selected_variants_states_disabled_properties_colors_icon-color
   );
 }
 
@@ -176,7 +193,7 @@
   word-wrap: break-word;
   white-space: normal;
   color: var(
-    --recursica_ui-kit_components_radio-button-item_properties_colors_text
+    --recursica_ui-kit_components_radio-button-item_properties_colors_text-color
   );
   font-family: var(
     --recursica_ui-kit_components_radio-button-item_properties_text_font-family
@@ -209,7 +226,7 @@
     --recursica_ui-kit_components_radio-button-item_properties_colors_disabled-text
   );
   opacity: var(
-    --recursica_ui-kit_components_radio-button-item_properties_disabled-opacity
+    --recursica_ui-kit_components_radio-button-item_variants_states_disabled_properties_opacity
   );
 }
 
@@ -230,6 +247,6 @@
 .root .description[data-disabled="true"],
 .root .error[data-disabled="true"] {
   opacity: var(
-    --recursica_ui-kit_components_radio-button-item_properties_disabled-opacity
+    --recursica_ui-kit_components_radio-button-item_variants_states_disabled_properties_opacity
   );
 }

package/src/components/ReadOnlyField/ReadOnlyField.module.css

@@ -45,7 +45,7 @@
     --recursica_ui-kit_components_read-only-field_properties_text_text-transform
   );
   color: var(
-    --recursica_ui-kit_components_read-only-field_properties_colors_text
+    --recursica_ui-kit_components_read-only-field_properties_colors_text-color
   );
 
   min-height: var(

package/src/components/SegmentedControl/SegmentedControl.module.css

@@ -4,9 +4,17 @@
    - Scope prefix .root to enforce Figma tokens over Mantine's inline calculation without using !important
 */
 
+/* EXEMPTIONS:
+   - segmented-control-item_properties_item_border-radius is ignored because the item border-radius
+     is fully governed by the per-selection-state tokens (unselected/selected `properties_border-radius`,
+     already applied to `.label` and `.control.Mui-selected` below); this generic, state-agnostic radius
+     token has no distinct consumption site without conflicting with those state-specific overrides.
+     The Mantine reference adapter exempts this same variable for the same reason. */
+/* recursica-ignore: --recursica_ui-kit_components_segmented-control-item_properties_item_border-radius */
+
 .root {
   background-color: var(
-    --recursica_ui-kit_components_segmented-control_properties_colors_background
+    --recursica_ui-kit_components_segmented-control_properties_colors_background-color
   );
   border: var(
       --recursica_ui-kit_components_segmented-control_properties_border-size
@@ -41,50 +49,50 @@
     --recursica_ui-kit_components_segmented-control-item_properties_item_height
   );
   border-radius: var(
-    --recursica_ui-kit_components_segmented-control-item_properties_unselected_border-radius
+    --recursica_ui-kit_components_segmented-control-item_variants_selection-states_unselected_properties_border-radius
   );
 
   border: var(
-      --recursica_ui-kit_components_segmented-control-item_properties_unselected_border-size
+      --recursica_ui-kit_components_segmented-control-item_variants_selection-states_unselected_properties_border-size
     )
     solid
     var(
-      --recursica_ui-kit_components_segmented-control-item_properties_unselected_colors_border-color
+      --recursica_ui-kit_components_segmented-control-item_variants_selection-states_unselected_properties_colors_border-color
     );
   background-color: var(
-    --recursica_ui-kit_components_segmented-control-item_properties_unselected_colors_background
+    --recursica_ui-kit_components_segmented-control-item_variants_selection-states_unselected_properties_colors_background-color
   );
   box-shadow: var(
-    --recursica_ui-kit_components_segmented-control-item_properties_unselected_elevation
+    --recursica_ui-kit_components_segmented-control-item_variants_selection-states_unselected_properties_elevation
   );
 
   font-family: var(
-    --recursica_ui-kit_components_segmented-control-item_properties_unselected-text_font-family
+    --recursica_ui-kit_components_segmented-control-item_variants_selection-states_unselected_properties_text_font-family
   );
   font-size: var(
-    --recursica_ui-kit_components_segmented-control-item_properties_unselected-text_font-size
+    --recursica_ui-kit_components_segmented-control-item_variants_selection-states_unselected_properties_text_font-size
   );
   font-style: var(
-    --recursica_ui-kit_components_segmented-control-item_properties_unselected-text_font-style
+    --recursica_ui-kit_components_segmented-control-item_variants_selection-states_unselected_properties_text_font-style
   );
   font-weight: var(
-    --recursica_ui-kit_components_segmented-control-item_properties_unselected-text_font-weight
+    --recursica_ui-kit_components_segmented-control-item_variants_selection-states_unselected_properties_text_font-weight
   );
   letter-spacing: var(
-    --recursica_ui-kit_components_segmented-control-item_properties_unselected-text_letter-spacing
+    --recursica_ui-kit_components_segmented-control-item_variants_selection-states_unselected_properties_text_letter-spacing
   );
   line-height: var(
-    --recursica_ui-kit_components_segmented-control-item_properties_unselected-text_line-height
+    --recursica_ui-kit_components_segmented-control-item_variants_selection-states_unselected_properties_text_line-height
   );
   text-decoration: var(
-    --recursica_ui-kit_components_segmented-control-item_properties_unselected-text_text-decoration
+    --recursica_ui-kit_components_segmented-control-item_variants_selection-states_unselected_properties_text_text-decoration
   );
   text-transform: var(
-    --recursica_ui-kit_components_segmented-control-item_properties_unselected-text_text-transform
+    --recursica_ui-kit_components_segmented-control-item_variants_selection-states_unselected_properties_text_text-transform
   );
 
   color: var(
-    --recursica_ui-kit_components_segmented-control-item_properties_unselected_colors_text-color
+    --recursica_ui-kit_components_segmented-control-item_variants_selection-states_unselected_properties_colors_text-color
   );
 
   display: flex;
@@ -130,50 +138,50 @@
 /* Indicator mapping (MUI ToggleButton applies .Mui-selected to the button instead of rendering a sliding indicator) */
 .root .control.Mui-selected {
   background-color: var(
-    --recursica_ui-kit_components_segmented-control-item_properties_selected_colors_background
+    --recursica_ui-kit_components_segmented-control-item_variants_selection-states_selected_properties_colors_background-color
   );
   border: var(
-      --recursica_ui-kit_components_segmented-control-item_properties_selected_border-size
+      --recursica_ui-kit_components_segmented-control-item_variants_selection-states_selected_properties_border-size
     )
     solid
     var(
-      --recursica_ui-kit_components_segmented-control-item_properties_selected_colors_border-color
+      --recursica_ui-kit_components_segmented-control-item_variants_selection-states_selected_properties_colors_border-color
     );
   box-shadow: var(
-    --recursica_ui-kit_components_segmented-control-item_properties_selected_elevation
+    --recursica_ui-kit_components_segmented-control-item_variants_selection-states_selected_properties_elevation
   );
   border-radius: var(
-    --recursica_ui-kit_components_segmented-control-item_properties_selected_border-radius
+    --recursica_ui-kit_components_segmented-control-item_variants_selection-states_selected_properties_border-radius
   );
 }
 
 /* Selected label text color override */
 .root .control.Mui-selected .label {
   color: var(
-    --recursica_ui-kit_components_segmented-control-item_properties_selected_colors_text-color
+    --recursica_ui-kit_components_segmented-control-item_variants_selection-states_selected_properties_colors_text-color
   );
   font-family: var(
-    --recursica_ui-kit_components_segmented-control-item_properties_selected-text_font-family
+    --recursica_ui-kit_components_segmented-control-item_variants_selection-states_selected_properties_text_font-family
   );
   font-size: var(
-    --recursica_ui-kit_components_segmented-control-item_properties_selected-text_font-size
+    --recursica_ui-kit_components_segmented-control-item_variants_selection-states_selected_properties_text_font-size
   );
   font-style: var(
-    --recursica_ui-kit_components_segmented-control-item_properties_selected-text_font-style
+    --recursica_ui-kit_components_segmented-control-item_variants_selection-states_selected_properties_text_font-style
   );
   font-weight: var(
-    --recursica_ui-kit_components_segmented-control-item_properties_selected-text_font-weight
+    --recursica_ui-kit_components_segmented-control-item_variants_selection-states_selected_properties_text_font-weight
   );
   letter-spacing: var(
-    --recursica_ui-kit_components_segmented-control-item_properties_selected-text_letter-spacing
+    --recursica_ui-kit_components_segmented-control-item_variants_selection-states_selected_properties_text_letter-spacing
   );
   line-height: var(
-    --recursica_ui-kit_components_segmented-control-item_properties_selected-text_line-height
+    --recursica_ui-kit_components_segmented-control-item_variants_selection-states_selected_properties_text_line-height
   );
   text-decoration: var(
-    --recursica_ui-kit_components_segmented-control-item_properties_selected-text_text-decoration
+    --recursica_ui-kit_components_segmented-control-item_variants_selection-states_selected_properties_text_text-decoration
   );
   text-transform: var(
-    --recursica_ui-kit_components_segmented-control-item_properties_selected-text_text-transform
+    --recursica_ui-kit_components_segmented-control-item_variants_selection-states_selected_properties_text_text-transform
   );
 }