@recursica/mantine-adapter 0.35.0 → 0.36.0

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

@@ -92,8 +92,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/Popover/Popover.module.css

@@ -14,7 +14,7 @@
 
 .dropdown {
   background-color: var(
-    --recursica_ui-kit_components_hover-card-popover_properties_colors_background
+    --recursica_ui-kit_components_hover-card-popover_properties_colors_background-color
   );
   border-style: solid; /* HARDCODE: Mantine Paper does not set border-style natively */
   border-width: var(

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,6 +226,6 @@
     --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
   );
 }

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

@@ -46,7 +46,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(
     --recursica_ui-kit_components_read-only-field_properties_min-height

package/src/components/RecursicaThemeProvider/USAGE.md

@@ -0,0 +1,60 @@
+# RecursicaThemeProvider - Usage Guide
+
+This document describes how to integrate and use `RecursicaThemeProvider` in your projects using `@recursica/mantine-adapter`.
+
+> [!NOTE] > `RecursicaThemeProvider` is defined once in `@recursica/adapter-common` and re-exported here so it shares the exact same behavior across every Recursica adapter.
+
+---
+
+## 1. Import Reference
+
+```tsx
+import { RecursicaThemeProvider } from "@recursica/mantine-adapter";
+```
+
+---
+
+## 2. Basic Example
+
+```tsx
+import { MantineProvider } from "@mantine/core";
+import { RecursicaThemeProvider } from "@recursica/mantine-adapter";
+
+function App() {
+  return (
+    <MantineProvider>
+      <RecursicaThemeProvider theme="light">
+        {/* Your App Components */}
+      </RecursicaThemeProvider>
+    </MantineProvider>
+  );
+}
+```
+
+By default, `RecursicaThemeProvider` also wraps `children` in a base [`Layer`](../Layer/USAGE.md) (`layer={0}`), so surface/border/elevation variables resolve immediately — no separate `Layer` needed for the page background.
+
+If you want to place the base layer yourself (e.g. to use `contentsOnly`, or to control exactly where layer 0 starts in the tree), opt out with `initLayer0={false}`:
+
+```tsx
+import { RecursicaThemeProvider, Layer } from "@recursica/mantine-adapter";
+
+<RecursicaThemeProvider theme="light" initLayer0={false}>
+  <Layer layer={0}>{/* Your App Components */}</Layer>
+</RecursicaThemeProvider>;
+```
+
+---
+
+## 3. Design System Integration
+
+> [!IMPORTANT]
+>
+> - **Required for setup**: `RecursicaThemeProvider` must wrap your entire application, once, near the root. See [SETUP.md](../../../SETUP.md) for the full setup sequence.
+> - **`initLayer0` (default `true`)**: Automatically wraps `children` in a layer-0 [`Layer`](../Layer/USAGE.md). `RecursicaThemeProvider` itself only sets `data-recursica-theme` (`"light"` or `"dark"`, defaults to `"light"`) on `document.documentElement` — without a `Layer` in the tree (either the automatic one or one you add yourself with `initLayer0={false}`), none of Recursica's surface CSS variables resolve.
+> - **Runtime theme switching**: Changing the `theme` prop re-runs the effect and updates `data-recursica-theme` immediately, so you can drive light/dark switching from application state.
+
+---
+
+## 4. Key Integration Features & Constraints
+
+`RecursicaThemeProvider` also wires up the `overStyled` development-mode visual auditing helper (see [OVERSTYLING.md](../../../OVERSTYLING.md)) — `recursica.toggleOverStyled()` in the browser console only works once this provider has mounted.

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

@@ -7,7 +7,7 @@
 
 .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
@@ -42,50 +42,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;
@@ -131,50 +131,50 @@
 /* Indicator (the moving selected block) */
 .root .indicator {
   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[data-active] .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
   );
 }

package/src/components/Slider/IMPLEMENTATION_NOTES.md

@@ -47,3 +47,12 @@ This document contains specific design decisions, architectural constraints, and
 - If `showInput` is enabled, the floating `.currentValue` is hidden since the active value is already displayed and editable within the adjacent numeric text input, avoiding visual redundancy.
 - In `side-by-side` form layouts, the `.currentValue` is positioned inline (static positioning) to the right of the max label rather than floating above it, centered vertically with the max label and aligned right to the container. This uses CSS flexbox ordering (`order: 2` for `.currentValue` and `order: 1` for `.minMaxGuide`) to visually swap their positions while preserving clean, semantic DOM ordering.
 - To ensure perfect, pixel-perfect vertical track alignment between sliders that show numeric text inputs (`showInput={true}`) and sliders that display the active inline value (`showInput={false}`), the `.currentValue` element is globally given a width equal to the input width (`var(--recursica_ui-kit_components_slider_properties_input-width)`) and right-aligned (`text-align: right`). In `side-by-side` layouts, `.rightGuideContainer`'s flex gap is also matched to the horizontal input-to-track gap (`var(--recursica_ui-kit_components_slider_properties_input-gap)`), making the horizontal space occupied by the rightmost elements exactly identical in both component modes.
+
+## 6. Focus Treatment (Generic State Tokens)
+
+**Decision:** The token schema dropped the component-level `focus` state entirely. Only a narrower `active` state remains, covering `colors_track`/`colors_step-indicator-color` for the track/mark while any part of the slider has focus-within.
+**Implementation:**
+
+- Thumb, icon, and numeric input no longer have per-component focus colors. Instead they get a focus _ring_ built from the generic `--recursica_brand_states_focus_{border-size,color,margin,blur}` tokens, applied as a `box-shadow` (crisp inner ring at `border-size` plus a soft outer glow using `blur`/`margin`) rather than a color swap.
+- The thumb's focus box-shadow layers the ring on top of its existing `thumb-elevation` shadow rather than replacing it.
+- `.sliderMark[data-filled]` has no default-state "-active" step-indicator token anymore (only `disabled`/`error` define one); it reuses `colors_track-active` so filled marks stay visually tied to the filled portion of the track. Worth a design review if a distinct filled-mark color is expected.