@recursica/mantine-adapter 0.20.0 → 0.22.0

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

@@ -1,3 +1,84 @@
+/* EXEMPTIONS:
+   - All pagination subcomponent properties (active-pages, inactive-pages, navigation-controls) are ignored
+     because we are not implementing custom subcomponent styling for pagination. Instead, pagination items
+     directly inherit the unified, standard brand button components for complete UI/UX consistency, rendering 
+     these generated subcomponent tokens redundant. */
+/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_active-pages_subcomponent_border-size */
+/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_active-pages_subcomponent_disabled-opacity */
+/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_active-pages_subcomponent_elevation */
+/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_active-pages_subcomponent_height */
+/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_active-pages_subcomponent_horizontal-padding */
+/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_active-pages_subcomponent_hover-color */
+/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_active-pages_subcomponent_hover-elevation */
+/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_active-pages_subcomponent_hover-opacity */
+/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_active-pages_subcomponent_icon */
+/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_active-pages_subcomponent_icon-text-gap */
+/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_active-pages_subcomponent_max-label-width */
+/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_active-pages_subcomponent_min-width */
+/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_active-pages_subcomponent_text_font-family */
+/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_active-pages_subcomponent_text_font-size */
+/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_active-pages_subcomponent_text_font-style */
+/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_active-pages_subcomponent_text_font-weight */
+/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_active-pages_subcomponent_text_letter-spacing */
+/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_active-pages_subcomponent_text_line-height */
+/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_active-pages_subcomponent_text_text-decoration */
+/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_active-pages_subcomponent_text_text-transform */
+/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_active-pages_subcomponent_colors_background */
+/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_active-pages_subcomponent_colors_border-color */
+/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_active-pages_subcomponent_colors_icon-color */
+/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_active-pages_subcomponent_colors_text */
+/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_active-pages_subcomponent_colors_text-hover */
+/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_inactive-pages_subcomponent_border-size */
+/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_inactive-pages_subcomponent_disabled-opacity */
+/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_inactive-pages_subcomponent_elevation */
+/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_inactive-pages_subcomponent_height */
+/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_inactive-pages_subcomponent_horizontal-padding */
+/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_inactive-pages_subcomponent_hover-color */
+/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_inactive-pages_subcomponent_hover-elevation */
+/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_inactive-pages_subcomponent_hover-opacity */
+/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_inactive-pages_subcomponent_icon */
+/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_inactive-pages_subcomponent_icon-text-gap */
+/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_inactive-pages_subcomponent_max-label-width */
+/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_inactive-pages_subcomponent_min-width */
+/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_inactive-pages_subcomponent_text_font-family */
+/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_inactive-pages_subcomponent_text_font-size */
+/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_inactive-pages_subcomponent_text_font-style */
+/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_inactive-pages_subcomponent_text_font-weight */
+/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_inactive-pages_subcomponent_text_letter-spacing */
+/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_inactive-pages_subcomponent_text_line-height */
+/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_inactive-pages_subcomponent_text_text-decoration */
+/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_inactive-pages_subcomponent_text_text-transform */
+/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_inactive-pages_subcomponent_colors_background */
+/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_inactive-pages_subcomponent_colors_border-color */
+/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_inactive-pages_subcomponent_colors_icon-color */
+/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_inactive-pages_subcomponent_colors_text */
+/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_inactive-pages_subcomponent_colors_text-hover */
+/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_navigation-controls_subcomponent_border-size */
+/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_navigation-controls_subcomponent_disabled-opacity */
+/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_navigation-controls_subcomponent_elevation */
+/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_navigation-controls_subcomponent_height */
+/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_navigation-controls_subcomponent_horizontal-padding */
+/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_navigation-controls_subcomponent_hover-color */
+/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_navigation-controls_subcomponent_hover-elevation */
+/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_navigation-controls_subcomponent_hover-opacity */
+/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_navigation-controls_subcomponent_icon */
+/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_navigation-controls_subcomponent_icon-text-gap */
+/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_navigation-controls_subcomponent_max-label-width */
+/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_navigation-controls_subcomponent_min-width */
+/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_navigation-controls_subcomponent_text_font-family */
+/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_navigation-controls_subcomponent_text_font-size */
+/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_navigation-controls_subcomponent_text_font-style */
+/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_navigation-controls_subcomponent_text_font-weight */
+/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_navigation-controls_subcomponent_text_letter-spacing */
+/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_navigation-controls_subcomponent_text_line-height */
+/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_navigation-controls_subcomponent_text_text-decoration */
+/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_navigation-controls_subcomponent_text_text-transform */
+/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_navigation-controls_subcomponent_colors_background */
+/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_navigation-controls_subcomponent_colors_border-color */
+/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_navigation-controls_subcomponent_colors_icon-color */
+/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_navigation-controls_subcomponent_colors_text */
+/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_navigation-controls_subcomponent_colors_text-hover */
+
 .root {
   display: flex;
   align-items: center;
@@ -17,68 +98,69 @@
 
   /* Typography */
   font-family: var(
-    --recursica_ui-kit_components_pagination_properties_inactive-pages_size_properties_text_font-family,
+    --recursica_ui-kit_components_button_variants_sizes_default_properties_text_font-family,
     var(--recursica_brand_fonts_primary)
   );
   font-size: var(
-    --recursica_ui-kit_components_pagination_properties_inactive-pages_size_properties_text_font-size,
+    --recursica_ui-kit_components_button_variants_sizes_default_properties_text_font-size,
     var(--recursica_brand_dimensions_text-size_default)
   );
   font-style: var(
-    --recursica_ui-kit_components_pagination_properties_inactive-pages_size_properties_text_font-style,
+    --recursica_ui-kit_components_button_variants_sizes_default_properties_text_font-style,
     normal
   );
   font-weight: var(
-    --recursica_ui-kit_components_pagination_properties_inactive-pages_size_properties_text_font-weight,
+    --recursica_ui-kit_components_button_variants_sizes_default_properties_text_font-weight,
     500
   );
   letter-spacing: var(
-    --recursica_ui-kit_components_pagination_properties_inactive-pages_size_properties_text_letter-spacing,
+    --recursica_ui-kit_components_button_variants_sizes_default_properties_text_letter-spacing,
     0
   );
   line-height: var(
-    --recursica_ui-kit_components_pagination_properties_inactive-pages_size_properties_text_line-height,
+    --recursica_ui-kit_components_button_variants_sizes_default_properties_text_line-height,
     1.5
   );
   text-decoration: var(
-    --recursica_ui-kit_components_pagination_properties_inactive-pages_size_properties_text_text-decoration,
+    --recursica_ui-kit_components_button_variants_sizes_default_properties_text_text-decoration,
     none
   );
   text-transform: var(
-    --recursica_ui-kit_components_pagination_properties_inactive-pages_size_properties_text_text-transform,
+    --recursica_ui-kit_components_button_variants_sizes_default_properties_text_text-transform,
     none
   );
 
   /* Dimensions */
   border-radius: var(
-    --recursica_ui-kit_components_pagination_properties_inactive-pages_size_properties_border-radius
+    --recursica_ui-kit_components_button_variants_content_icon-only_variants_sizes_default_properties_border-radius,
+    4px
   );
   height: var(
-    --recursica_ui-kit_components_pagination_properties_inactive-pages_size_properties_height
+    --recursica_ui-kit_components_button_variants_sizes_default_properties_height
   );
   min-width: var(
-    --recursica_ui-kit_components_pagination_properties_inactive-pages_size_properties_min-width
+    --recursica_ui-kit_components_button_variants_sizes_default_properties_min-width
   );
   padding: 0
     var(
-      --recursica_ui-kit_components_pagination_properties_inactive-pages_size_properties_horizontal-padding
+      --recursica_ui-kit_components_button_variants_sizes_default_properties_horizontal-padding
     );
 
   /* Base Inactive Style: Outline */
   border-width: var(
-    --recursica_ui-kit_components_pagination_properties_inactive-pages_style_properties_border-size
+    --recursica_ui-kit_components_button_variants_styles_outline_properties_border-size
   );
   box-shadow: var(
-    --recursica_ui-kit_components_pagination_properties_inactive-pages_style_properties_elevation
+    --recursica_ui-kit_components_button_variants_styles_outline_properties_elevation
   );
   background-color: var(
-    --recursica_ui-kit_components_pagination_properties_inactive-pages_style_properties_colors_background
+    --recursica_ui-kit_components_button_variants_styles_outline_properties_colors_background
   );
   border-color: var(
-    --recursica_ui-kit_components_pagination_properties_inactive-pages_style_properties_colors_border-color
+    --recursica_ui-kit_components_button_variants_styles_outline_properties_colors_border-color
   );
   color: var(
-    --recursica_ui-kit_components_pagination_properties_inactive-pages_style_properties_colors_text
+    --recursica_ui-kit_components_button_variants_styles_outline_properties_colors_text
   );
 }
 
@@ -89,7 +171,7 @@
 
 .control:hover:not(:disabled) {
   color: var(
-    --recursica_ui-kit_components_pagination_properties_inactive-pages_style_properties_colors_text-hover
+    --recursica_ui-kit_components_button_variants_styles_outline_properties_colors_text-hover
   );
 }
 
@@ -104,13 +186,13 @@
   transition: opacity 150ms ease;
   opacity: 0;
   background-color: var(
-    --recursica_ui-kit_components_pagination_properties_inactive-pages_size_properties_hover-color
+    --recursica_ui-kit_components_button_variants_sizes_default_properties_hover-color
   );
 }
 
 .control:hover:not(:disabled)::after {
   opacity: var(
-    --recursica_ui-kit_components_pagination_properties_inactive-pages_size_properties_hover-opacity,
+    --recursica_ui-kit_components_button_variants_sizes_default_properties_hover-opacity,
     0.1
   );
 }
@@ -118,77 +200,77 @@
 /* Active Style: Solid */
 .control[data-active] {
   border-width: var(
-    --recursica_ui-kit_components_pagination_properties_active-pages_style_properties_border-size
+    --recursica_ui-kit_components_button_variants_styles_solid_properties_border-size
   );
   box-shadow: var(
-    --recursica_ui-kit_components_pagination_properties_active-pages_style_properties_elevation
+    --recursica_ui-kit_components_button_variants_styles_solid_properties_elevation
   );
   background-color: var(
-    --recursica_ui-kit_components_pagination_properties_active-pages_style_properties_colors_background
+    --recursica_ui-kit_components_button_variants_styles_solid_properties_colors_background
   );
   border-color: var(
-    --recursica_ui-kit_components_pagination_properties_active-pages_style_properties_colors_border-color
+    --recursica_ui-kit_components_button_variants_styles_solid_properties_colors_border-color
   );
   color: var(
-    --recursica_ui-kit_components_pagination_properties_active-pages_style_properties_colors_text
+    --recursica_ui-kit_components_button_variants_styles_solid_properties_colors_text
   );
 }
 
 .control[data-active]:hover:not(:disabled) {
   color: var(
-    --recursica_ui-kit_components_pagination_properties_active-pages_style_properties_colors_text-hover
+    --recursica_ui-kit_components_button_variants_styles_solid_properties_colors_text-hover
   );
 }
 
 /* Navigation Style: Text */
 .control[data-variant="text"] {
   border-width: var(
-    --recursica_ui-kit_components_pagination_properties_navigation-controls_style_properties_border-size
+    --recursica_ui-kit_components_button_variants_styles_text_properties_border-size
   );
   box-shadow: var(
-    --recursica_ui-kit_components_pagination_properties_navigation-controls_style_properties_elevation
+    --recursica_ui-kit_components_button_variants_styles_text_properties_elevation
   );
   background-color: var(
-    --recursica_ui-kit_components_pagination_properties_navigation-controls_style_properties_colors_background
+    --recursica_ui-kit_components_button_variants_styles_text_properties_colors_background
   );
   border-color: var(
-    --recursica_ui-kit_components_pagination_properties_navigation-controls_style_properties_colors_border-color
+    --recursica_ui-kit_components_button_variants_styles_text_properties_colors_border-color
   );
   color: var(
-    --recursica_ui-kit_components_pagination_properties_navigation-controls_style_properties_colors_text
+    --recursica_ui-kit_components_button_variants_styles_text_properties_colors_text
   );
 
   /* Also explicitly inherit navigation sizes incase they differ from pages */
   border-radius: var(
-    --recursica_ui-kit_components_pagination_properties_navigation-controls_size_properties_border-radius
+    --recursica_ui-kit_components_button_variants_content_icon-only_variants_sizes_default_properties_border-radius
   );
   height: var(
-    --recursica_ui-kit_components_pagination_properties_navigation-controls_size_properties_height
+    --recursica_ui-kit_components_button_variants_sizes_default_properties_height
   );
   min-width: var(
-    --recursica_ui-kit_components_pagination_properties_navigation-controls_size_properties_min-width
+    --recursica_ui-kit_components_button_variants_sizes_default_properties_min-width
   );
   padding: 0
     var(
-      --recursica_ui-kit_components_pagination_properties_navigation-controls_size_properties_horizontal-padding
+      --recursica_ui-kit_components_button_variants_sizes_default_properties_horizontal-padding
     );
 }
 
 .control[data-variant="text"]:hover:not(:disabled) {
   color: var(
-    --recursica_ui-kit_components_pagination_properties_navigation-controls_style_properties_colors_text-hover
+    --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_pagination_properties_navigation-controls_size_properties_hover-color
+    --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_pagination_properties_navigation-controls_size_properties_hover-opacity,
+    --recursica_ui-kit_components_button_variants_sizes_default_properties_hover-opacity,
     0.1
   );
 }
@@ -199,10 +281,10 @@
   align-items: center;
   justify-content: center;
   height: var(
-    --recursica_ui-kit_components_pagination_properties_inactive-pages_size_properties_height
+    --recursica_ui-kit_components_button_variants_sizes_default_properties_height
   );
   min-width: var(
-    --recursica_ui-kit_components_pagination_properties_inactive-pages_size_properties_min-width
+    --recursica_ui-kit_components_button_variants_sizes_default_properties_min-width
   );
   color: var(
     --recursica_ui-kit_components_pagination_properties_colors_dots-color
@@ -214,7 +296,7 @@
   display: flex;
   align-items: center;
   gap: var(
-    --recursica_ui-kit_components_pagination_properties_navigation-controls_size_properties_icon-text-gap,
+    --recursica_ui-kit_components_button_variants_sizes_default_properties_icon-text-gap,
     4px
   );
 }

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

@@ -4,7 +4,7 @@
    - flexbox layout on .content & .body: Required to create a vertical flex context that pushes the footer to the bottom.
    - position: sticky & negative margins on .footer: A CSS technique used to break the footer out of the .body padding constraints so it stretches edge-to-edge, while remaining fixed at the bottom of the scroll container.
    - z-index: 10 on .footer: Ensures the footer covers the body content as it scrolls underneath.
-*/
+ */
 
 /* ======================================
    PANEL CONTENT (outer drawer container)
@@ -23,7 +23,8 @@
     --recursica_ui-kit_components_panel_properties_border-radius
   );
   box-shadow: var(--recursica_ui-kit_components_panel_properties_elevation);
-  color: var(--recursica_ui-kit_components_panel_properties_colors_content);
+  min-width: var(--recursica_ui-kit_components_panel_properties_min-width);
+  max-width: var(--recursica_ui-kit_components_panel_properties_max-width);
 
   display: flex;
   flex-direction: column;
@@ -64,7 +65,32 @@
 
 .title {
   color: var(--recursica_ui-kit_components_panel_properties_colors_title);
-  composes: recursica_brand_typography_h3 from global;
+
+  /* Direct Figma Typography Mapping */
+  font-family: var(
+    --recursica_ui-kit_components_panel_properties_header-style_fontFamily
+  );
+  font-size: var(
+    --recursica_ui-kit_components_panel_properties_header-style_fontSize
+  );
+  font-style: var(
+    --recursica_ui-kit_components_panel_properties_header-style_fontStyle
+  );
+  font-weight: var(
+    --recursica_ui-kit_components_panel_properties_header-style_fontWeight
+  );
+  letter-spacing: var(
+    --recursica_ui-kit_components_panel_properties_header-style_letterSpacing
+  );
+  line-height: var(
+    --recursica_ui-kit_components_panel_properties_header-style_lineHeight
+  );
+  text-transform: var(
+    --recursica_ui-kit_components_panel_properties_header-style_textCase
+  );
+  text-decoration: var(
+    --recursica_ui-kit_components_panel_properties_header-style_textDecoration
+  );
 }
 
 .titleTruncate {
@@ -94,6 +120,32 @@
   display: flex;
   flex-direction: column;
   overflow-y: auto;
+
+  /* Direct Figma Typography Mapping */
+  font-family: var(
+    --recursica_ui-kit_components_panel_properties_content-style_fontFamily
+  );
+  font-size: var(
+    --recursica_ui-kit_components_panel_properties_content-style_fontSize
+  );
+  font-style: var(
+    --recursica_ui-kit_components_panel_properties_content-style_fontStyle
+  );
+  font-weight: var(
+    --recursica_ui-kit_components_panel_properties_content-style_fontWeight
+  );
+  letter-spacing: var(
+    --recursica_ui-kit_components_panel_properties_content-style_letterSpacing
+  );
+  line-height: var(
+    --recursica_ui-kit_components_panel_properties_content-style_lineHeight
+  );
+  text-transform: var(
+    --recursica_ui-kit_components_panel_properties_content-style_textCase
+  );
+  text-decoration: var(
+    --recursica_ui-kit_components_panel_properties_content-style_textDecoration
+  );
 }
 
 /* ======================================

package/src/components/Popover/Popover.module.css

@@ -14,14 +14,14 @@
 
 .dropdown {
   background-color: var(
-    --recursica_ui-kit_components_hover-card-popover_colors_background
+    --recursica_ui-kit_components_hover-card-popover_properties_colors_background
   );
   border-style: solid; /* HARDCODE: Mantine Paper does not set border-style natively */
   border-width: var(
     --recursica_ui-kit_components_hover-card-popover_properties_border-size
   );
   border-color: var(
-    --recursica_ui-kit_components_hover-card-popover_colors_border-color
+    --recursica_ui-kit_components_hover-card-popover_properties_colors_border-color
   );
   border-radius: var(
     --recursica_ui-kit_components_hover-card-popover_properties_border-radius
@@ -70,7 +70,9 @@
     --recursica_ui-kit_components_hover-card-popover_properties_content-text_text-transform
   );
 
-  color: var(--recursica_ui-kit_components_hover-card-popover_colors_content);
+  color: var(
+    --recursica_ui-kit_components_hover-card-popover_properties_colors_content
+  );
 }
 
 /* ======================================
@@ -79,6 +81,6 @@
 
 .arrow {
   border-color: var(
-    --recursica_ui-kit_components_hover-card-popover_colors_border-color
+    --recursica_ui-kit_components_hover-card-popover_properties_colors_border-color
   );
 }

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

@@ -16,7 +16,7 @@
     0
   );
   margin: 0; /* HARDCODE: structural reset; consider token if layout needs change */
-  display: flex !important;
+  display: flex;
   flex-direction: column;
   gap: var(
     --recursica_ui-kit_components_radio-button-group_properties_item-gap,
@@ -26,8 +26,11 @@
 
 /* SideBySide Variant */
 .groupRoot[data-layout="side-by-side"] {
-  flex-direction: column;
+  flex-direction: row;
   flex-wrap: wrap;
+  gap: var(
+    --recursica_ui-kit_components_radio-button-group_variants_layouts_side-by-side_properties_gutter
+  );
   padding-top: var(
     --recursica_ui-kit_components_radio-button-group_variants_layouts_side-by-side_properties_vertical-padding
   );
@@ -46,7 +49,10 @@
 .groupRoot[data-layout="stacked"] {
   flex-direction: column;
   margin-top: var(
-    --recursica_ui-kit_components_radio-button-group_variants_layouts_stacked_properties_top-bottom-margin
+    --recursica_ui-kit_components_radio-button-group_variants_layouts_stacked_properties_label-field-gap,
+    var(
+      --recursica_ui-kit_components_radio-button-group_variants_layouts_stacked_properties_top-bottom-margin
+    )
   );
   margin-bottom: var(
     --recursica_ui-kit_components_radio-button-group_variants_layouts_stacked_properties_top-bottom-margin
@@ -69,123 +75,114 @@
   );
 }
 
-.inner {
-  display: flex !important;
-  align-items: center !important;
-  justify-content: center !important;
-  margin: 0 !important; /* HARDCODE: structural reset */
-  width: var(
-    --recursica_ui-kit_components_radio-button_properties_size
-  ) !important;
-  height: var(
-    --recursica_ui-kit_components_radio-button_properties_size
-  ) !important;
-  /* Mathematically syncs the physical input radio bounding block visually with the center of the text's first line natively. */
+.root .inner {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0; /* HARDCODE: structural reset */
+  width: var(--recursica_ui-kit_components_radio-button_properties_size);
+  height: var(--recursica_ui-kit_components_radio-button_properties_size);
+  /* Apply font-size to this element so that an 'em' based line-height token evaluates to the correct exact pixel value. */
+  font-size: var(
+    --recursica_ui-kit_components_radio-button-item_properties_text_font-size
+  );
+  /* Mathematically syncs the physical input radio bounding block visually with the center of the text's first line.
+     NOTE: Since the Figma line-height token resolves to an 'em' length (e.g. 1.05em), we CANNOT multiply it by font-size in CSS. 
+     Instead, it naturally evaluates to the correct height because we applied the font-size above. */
   margin-top: calc(
     (
         var(
             --recursica_ui-kit_components_radio-button-item_properties_text_line-height
-          ) *
-          var(
-            --recursica_ui-kit_components_radio-button-item_properties_text_font-size
           ) -
           var(--recursica_ui-kit_components_radio-button_properties_size)
       ) /
       2
-  ) !important;
+  );
 }
 
 /* Base explicit reset masking underlying framework defaults */
-.radio {
+.root .radio {
   cursor: pointer; /* HARDCODE: core interaction behavior */
   appearance: none; /* HARDCODE: reset native widget */
-  box-sizing: border-box !important; /* HARDCODE: ensures size includes borders */
-  width: var(
-    --recursica_ui-kit_components_radio-button_properties_size
-  ) !important;
-  height: var(
-    --recursica_ui-kit_components_radio-button_properties_size
-  ) !important;
+  box-sizing: border-box; /* HARDCODE: ensures size includes borders */
+  width: var(--recursica_ui-kit_components_radio-button_properties_size);
+  height: var(--recursica_ui-kit_components_radio-button_properties_size);
   border-radius: var(
     --recursica_ui-kit_components_radio-button_properties_border-radius
-  ) !important;
+  );
   border-width: var(
     --recursica_ui-kit_components_radio-button_properties_border-size
-  ) !important;
+  );
   border-style: solid; /* HARDCODE: normalize primitive border-style */
 
   /* Standard unchecked state */
   background-color: var(
     --recursica_ui-kit_components_radio-button_properties_colors_background-unselected
-  ) !important;
+  );
   border-color: var(
     --recursica_ui-kit_components_radio-button_properties_colors_border-unselected
-  ) !important;
+  );
   transition: all 0.2s ease; /* HARDCODE: consider global transition token */
 }
 
 /* Checked State */
-.radio:checked {
+.root .radio:checked {
   background-color: var(
     --recursica_ui-kit_components_radio-button_properties_colors_background-selected
-  ) !important;
+  );
   border-color: var(
     --recursica_ui-kit_components_radio-button_properties_colors_border-selected
-  ) !important;
+  );
 }
 
 /* Disabled State */
-.radio:disabled {
+.root .radio:disabled {
   cursor: not-allowed; /* HARDCODE: disabled state default */
   opacity: var(
     --recursica_ui-kit_components_radio-button_properties_disabled-opacity
-  ) !important;
+  );
   background-color: var(
     --recursica_ui-kit_components_radio-button_properties_colors_disabled-background
-  ) !important;
+  );
   border-color: var(
     --recursica_ui-kit_components_radio-button_properties_colors_disabled-border
-  ) !important;
+  );
 }
 
-.icon {
+.root .icon {
   position: absolute;
   inset: 0;
   margin: auto;
   pointer-events: none;
-  width: var(
-    --recursica_ui-kit_components_radio-button_properties_icon-size
-  ) !important;
-  height: var(
-    --recursica_ui-kit_components_radio-button_properties_icon-size
-  ) !important;
+  width: var(--recursica_ui-kit_components_radio-button_properties_icon-size);
+  height: var(--recursica_ui-kit_components_radio-button_properties_icon-size);
   color: var(
     --recursica_ui-kit_components_radio-button_properties_colors_icon-color
-  ) !important;
+  );
 }
-.radio:disabled + .iconWrapper .icon,
-.radio:disabled + .icon {
+.root .radio:disabled + .iconWrapper .icon,
+.root .radio:disabled + .icon {
   color: var(
     --recursica_ui-kit_components_radio-button_properties_colors_disabled-icon
-  ) !important;
+  );
 }
 
-.labelWrapper {
-  padding: 0 !important; /* HARDCODE: structural layout reset */
-  margin: 0 !important; /* HARDCODE: structural layout reset */
+.root .labelWrapper {
+  padding: 0; /* HARDCODE: structural layout reset */
+  margin: 0; /* HARDCODE: structural layout reset */
   flex: 1;
   min-width: 0; /* HARDCODE: forces text wrap boundary in flex child */
 }
 
-.label {
+.root .label {
   cursor: pointer; /* HARDCODE: interactive affordance */
-  padding: 0 !important; /* HARDCODE: reset layout */
-  margin: 0 !important; /* HARDCODE: reset layout */
+  padding: 0; /* HARDCODE: reset layout */
+  margin: 0; /* HARDCODE: reset layout */
   word-wrap: break-word;
   white-space: normal;
   color: var(
-    --recursica_ui-kit_components_radio-button-item_properties_text_color
-  ) !important;
+    --recursica_ui-kit_components_radio-button-item_properties_colors_text
+  );
   font-family: var(
     --recursica_ui-kit_components_radio-button-item_properties_text_font-family
   );
@@ -198,10 +195,26 @@
   line-height: var(
     --recursica_ui-kit_components_radio-button-item_properties_text_line-height
   );
+  font-style: var(
+    --recursica_ui-kit_components_radio-button-item_properties_text_font-style
+  );
+  letter-spacing: var(
+    --recursica_ui-kit_components_radio-button-item_properties_text_letter-spacing
+  );
+  text-decoration: var(
+    --recursica_ui-kit_components_radio-button-item_properties_text_text-decoration
+  );
+  text-transform: var(
+    --recursica_ui-kit_components_radio-button-item_properties_text_text-transform
+  );
 }
-.root[data-disabled] .label {
+.root:has(input:disabled) .label {
   cursor: not-allowed; /* HARDCODE: disabled interaction */
+  color: var(
+    --recursica_ui-kit_components_radio-button-item_properties_colors_disabled-text
+  );
   opacity: var(
-    --recursica_ui-kit_components_radio-button_properties_disabled-opacity
+    --recursica_ui-kit_components_radio-button-item_properties_disabled-opacity,
+    var(--recursica_ui-kit_components_radio-button_properties_disabled-opacity)
   );
 }