@recursica/adapter-mantine-v8 1.0.0

package/src/components/Slider/IMPLEMENTATION_NOTES.md

@@ -0,0 +1,92 @@
+# Slider Implementation Notes
+
+This document contains specific design decisions, architectural constraints, and hacks required to bridge the Recursica design system with Mantine's underlying `Slider` primitive.
+
+## 1. Bidirectional State Synchronization
+
+**Decision:** Maintain a highly responsive, bidirectional connection between the sliding track value and the adjacent numeric text input.
+**Implementation:**
+
+- The slider track requires a clean `number` state, whereas the text box requires a `string` state (`inputValue`) to allow typing intermediate characters like decimals (`2.`), negative signs (`-`), or empty text without breaking standard React input binding.
+- A `useEffect` hook continuously feeds the outer numeric state changes back into the text input value as a string representation.
+- Input changes instantly parsed as float clamp bounds securely. On blur (`onBlur`), the input state is automatically sanitized and reset to the clean, clamped string representation of the final track value.
+
+## 2. Outer Form Control Wrapper Integration
+
+**Decision:** Bypass Mantine's native `Input.Wrapper` and `label` properties.
+**Implementation:**
+
+- Universal form wrappers like `<FormControlWrapper>` and `<WithReadOnlyWrapper>` handle the outer layout architecture, including labels, assistive text, error states, and optional edit-triggering fields.
+- Therefore, we map the outer form label directly to the `label` property of the `Slider` (delegated to the wrapper), and rename Mantine's internal dragging tooltip label property to `tooltipLabel`.
+
+## 3. Custom Min-Max Labels and Step Indicators
+
+**Decision:** Enforce rigid typography tokens on lower bounds and custom mark indicators.
+**Implementation:**
+
+- Mantine's native mark and step structures are fully styles-mapped back to our scoped variables in `Slider.module.css`.
+- Min and Max numeric guides are rendered directly to the left and right of the slider track, centered vertically and spaced automatically using standard input gaps, while dynamically fetching custom typography tokens for min-max labels to avoid hardcoded formatting constraints.
+
+## 4. Visual Overrides for Stacked and Side-by-Side Spacing
+
+**Decision:** Enforce layout margins dynamically based on container orientation parameters.
+**Implementation:**
+
+- Using custom layouts (e.g. `stacked` and `side-by-side`), we override the margins by assigning the component-specific Figma spacing variables to the unified `--form-control-margin-bottom` property.
+
+## 5. Right-Aligned Floating Current Value
+
+**Decision:** Position the current active value of the slider directly above the max guide (or right-side element) on the right side of the track.
+**Implementation:**
+
+- Wrap the max guide element in a relative layout container (`.rightGuideContainer`) to provide a positioning anchor.
+- Place the active value element (`.currentValue`) inside `.rightGuideContainer` and position it absolutely (`bottom: calc(100% + var(--recursica_ui-kit_globals_form_properties_label-field-gap-vertical, 8px))`, `right: 0`).
+- This absolute positioning strategy guarantees that the active value floats cleanly above the track's right side, while aligning it vertically on the Y-axis to sit in perfect baseline alignment with the component's left-aligned form label.
+- Set typography using the Figma-aligned component-specific read-only value variables (`--recursica_ui-kit_components_slider_properties_read-only-value_...`).
+- Allow the text color of both the floating current value (`.currentValue`) and the component's read-only value (`.readOnlyValue`) to naturally inherit from their parent states/form globals, automatically supporting default (`--form-field-text-valued`), disabled (`--form-field-disabled-text`), and error colors without explicit color overrides, matching the min/max guides.
+- 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.
+- `markLabel` was already mapped in the `classNames` prop but had no matching `.sliderMarkLabel` rule in this file, so Mantine silently fell back to its own default theme grey instead of any recursica token. Added a `.sliderMarkLabel` rule reusing the min-max-label typography tokens with `color: inherit`, matching the mui-adapter's equivalent.
+
+## 7. Formatted Current Value, Label Overrides, Trailing Icon
+
+**Decision:** The floating `.currentValue` display (see §5) always rendered the raw numeric value, even when `tooltipLabel` was a formatter function — a caller mapping values onto custom text (e.g. 0-4 → XS/S/M/L/XL) got the formatted tooltip while dragging but the raw number next to the track otherwise.
+**Implementation:**
+
+- `.currentValue` now runs `resolvedValue` through `tooltipLabel` when it's a function, so both displays agree. No change when `tooltipLabel` is absent or a static node — still the raw number.
+- `minLabel`/`maxLabel` (new `adapter-common` props) override the `.minMaxGuide` text at either end of the track, falling back to the numeric `min`/`max`.
+- `trailingIcon` (new `adapter-common` prop) renders a second icon on the opposite side of the track from the existing `icon`, reusing the same `.iconWrapper` styling (disabled/error/focus states already target `.iconWrapper` generically, so no new CSS was needed).
+
+## 8. Dual-Thumb / Range Support
+
+**Decision:** Previously requested and declined (see git history for this section) as no use case needed it; reopened with a full spec and implemented. `value`/`defaultValue`/`onChange`/`onChangeEnd` are now typed `number | [number, number]` in `@recursica/adapter-common`'s `RecursicaSliderProps`.
+**Implementation:**
+
+- `isRange = Array.isArray(resolvedValue)` picks which underlying Mantine component to render: single-thumb `Slider` (unchanged) or two-thumb `RangeSlider` — Mantine ships these as two separate components (unlike raw MUI, which renders two thumbs off a single `Slider` given a tuple `value`), so this is a real component swap, not just a type/prop change. Both share the same `SliderStylesNames` shape, so `mergedClassNames` (root/track/bar/thumb/mark/markLabel) applies unchanged to either.
+- Internal state (`internalValue`, `resolvedValue`, `inputValue`) generalized from `number` to `number | [number, number]`; range-mode input handlers (`handleLowerInputChange`/`handleUpperInputChange`) clamp each thumb against the other's current value (not the shared `min`/`max`) so the two inputs can't cross.
+- `SliderReadOnlyValue` and the floating `.currentValue` display both render `"lower – upper"` for a range value, running each side through `tooltipLabel` independently when it's a formatter.
+- DOM order in range mode (input → leading icon → min label → track → max label → trailing icon → input) mirrors Forge's own Material/Carbon range layouts — see §9 below.
+- Not carried over: Mantine `RangeSlider`'s own `minRange`/`maxRange`/`pushOnOverlap`/`thumbFromLabel`/`thumbToLabel` pass through via the existing unsanitized `...rest` spread if a caller sets them directly; no adapter-level default is applied (e.g. Mantine's own `minRange` default of `10` is left as-is).
+
+## 9. Trailing Icon Order Relative to the Input Field
+
+**Decision:** `trailingIcon` previously rendered after the numeric input (`... max label, input, trailing icon`), reversed from Forge's Material/Carbon kits, which always render the trailing icon directly after the max label and before the input.
+**Implementation:** Moved `{trailingIconEl}` before the `showInput` input block in the single-value layout; the range layout was built with this order from the start (input → icon → min label → track → max label → trailing icon → input).
+
+## 10. Marks Rendering Off Mantine Defaults Instead of Recursica Tokens
+
+**Decision:** §3 claimed marks were "fully styles-mapped back to our scoped variables" — not quite true. Mantine's `markWrapper` style slot (the zero-height, top-anchored positioning wrapper around each mark dot + label) was never mapped in `mergedClassNames`, and `markLabel`'s vertical position was never overridden, so both stayed on raw Mantine defaults.
+**Implementation:**
+
+- `markWrapper` is anchored to Mantine's own `top: 0` (the track's top edge), with the mark dot inside it unpositioned. Mantine's own dot has no size override so it happens to fill the track height exactly by default; our `step-indicator-width` token is independent of track height, so the dot rendered small and flush to the top instead of centered. Added `markWrapper: styles.sliderMarkWrapper` to `mergedClassNames`, with `.sliderMarkWrapper { top: 50%; }`, and changed `.sliderMark`'s transform from `translateX(-50%)` to `translate(-50%, -50%)` to center the dot on that midpoint.
+- `.sliderMarkLabel` never overrode `transform`, so its vertical offset stayed Mantine's own `calc(var(--mantine-spacing-xs) / 2)` — an unbound theme default, not a recursica token. Replaced the vertical term with `--recursica_ui-kit_globals_form_properties_label-field-gap-vertical` (the same token the mui-adapter's markLabel already uses), keeping the horizontal term (`-50% + var(--slider-size) / 2`, Mantine's own mark-offset compensation) unchanged.

package/src/components/Slider/Slider.module.css

@@ -0,0 +1,588 @@
+/* Brand-layer exemptions (recursica-allow-brand) — see recursica-token-analyzer README.md.
+ * Global hover/focus/disabled state tokens (recursica_variables_scoped.css header, 'Hover & Focus states' / 'Disabled state' — implicit rule for every interactive element; components must not define their own per-component treatment).
+ *   recursica-allow-brand: --recursica_brand_states_focus_blur
+ *   recursica-allow-brand: --recursica_brand_states_focus_border-size
+ *   recursica-allow-brand: --recursica_brand_states_focus_color
+ *   recursica-allow-brand: --recursica_brand_states_focus_margin
+ */
+
+/*
+ * HARDCODED VALUES:
+ * - display: flex; align-items: center; width: 100%; (Standard CSS flexbox layouts for bidirectional components)
+ * - flex-grow: 1; flex-shrink: 0; (Layout control structures)
+ * - transform: translate(-50%, -50%); (custom step-mark centering offset — see .sliderMarkWrapper
+ *   / .sliderMark below; not inherited from Mantine, which centers marks via its own
+ *   --slider-size variable that our step-indicator-width token doesn't participate in)
+ * - top: 50%; on .sliderMarkWrapper (re-anchors Mantine's zero-height mark wrapper to the
+ *   track's vertical midpoint instead of its top edge)
+ * - outline: none; border-style: solid; (Standard focus reset and border outlines)
+ * - Focus ring on thumb/icon/input: the token schema no longer provides per-component focus
+ *   colors for these (only `active` covers track/step-indicator-color). We apply the generic
+ *   --recursica_brand_states_focus_* ring tokens (border-size/color/margin/blur) as a box-shadow
+ *   ring instead of a color swap.
+ */
+
+/* ==========================================
+   1. Baseline, Reset & Layout Overrides
+   ========================================== */
+
+/* Stacked Layout Spacing Override */
+.layoutOverride {
+  --form-control-margin-bottom: var(
+    --recursica_ui-kit_components_slider_variants_layouts_stacked_properties_top-bottom-margin
+  );
+}
+
+/* Side-by-Side Layout Spacing Override */
+.layoutOverride[data-form-layout="side-by-side"] {
+  --form-control-margin-bottom: var(
+    --recursica_ui-kit_components_slider_variants_layouts_side-by-side_properties_top-bottom-margin
+  );
+}
+
+.sliderContainer {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  box-sizing: border-box;
+  gap: var(--recursica_ui-kit_components_slider_properties_input-gap);
+  color: var(--form-field-text-valued);
+}
+
+.sliderTrackWrapper {
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+}
+
+.iconWrapper {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: var(--recursica_ui-kit_components_slider_properties_icon-size);
+  height: var(--recursica_ui-kit_components_slider_properties_icon-size);
+  color: var(--recursica_ui-kit_components_slider_properties_colors_icon-color);
+}
+
+/* ==========================================
+   2. Slider Tracks, Bars, Thumbs, and Marks
+   ========================================== */
+
+.sliderRoot {
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.sliderTrack {
+  height: var(--recursica_ui-kit_components_slider_properties_track-height);
+  border-radius: var(
+    --recursica_ui-kit_components_slider_properties_track-border-radius
+  );
+  background-color: var(
+    --recursica_ui-kit_components_slider_properties_colors_track
+  );
+}
+
+.sliderBar {
+  background-color: var(
+    --recursica_ui-kit_components_slider_properties_colors_track-active
+  );
+}
+
+.sliderThumb {
+  box-sizing: border-box;
+  width: var(--recursica_ui-kit_components_slider_properties_thumb-size);
+  height: var(--recursica_ui-kit_components_slider_properties_thumb-size);
+  border-radius: var(
+    --recursica_ui-kit_components_slider_properties_thumb-border-radius
+  );
+  box-shadow: var(
+    --recursica_ui-kit_components_slider_properties_thumb-elevation
+  );
+  background-color: var(
+    --recursica_ui-kit_components_slider_properties_colors_thumb
+  );
+  border: none;
+  cursor: pointer;
+  outline: none;
+}
+
+.sliderThumb:focus,
+.sliderThumb:focus-visible {
+  outline: none;
+  box-shadow:
+    var(--recursica_ui-kit_components_slider_properties_thumb-elevation),
+    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);
+}
+
+/*
+ * Mantine positions the mark dot inside a zero-height `markWrapper` anchored to the track's
+ * top edge, relying on the dot's height matching Mantine's own `--slider-size` to land centered.
+ * Our step-indicator-width token is independent of that, so without an explicit vertical
+ * transform the dot sits flush to the track's top instead of centered. `sliderMarkWrapper`
+ * moves the anchor to the track's vertical midpoint; `translate(-50%, -50%)` below centers the
+ * dot on that midpoint (in addition to the pre-existing horizontal centering).
+ */
+.sliderMarkWrapper {
+  top: 50%;
+}
+
+.sliderMark {
+  box-sizing: border-box;
+  width: var(
+    --recursica_ui-kit_components_slider_properties_step-indicator-width
+  );
+  height: var(
+    --recursica_ui-kit_components_slider_properties_step-indicator-width
+  );
+  border-radius: var(
+    --recursica_ui-kit_components_slider_properties_step-indicator-border-radius
+  );
+  background-color: var(
+    --recursica_ui-kit_components_slider_properties_colors_step-indicator-color
+  );
+  transform: translate(-50%, -50%);
+  border: none;
+}
+
+.sliderMark[data-filled] {
+  /* No default-state "-active" step-indicator token exists anymore (only disabled/error define
+     one); reusing the active-track color keeps filled marks visually tied to the filled track. */
+  background-color: var(
+    --recursica_ui-kit_components_slider_properties_colors_track-active
+  );
+}
+
+/*
+ * Mantine's default markLabel has no dedicated recursica token; it renders with Mantine's own
+ * theme grey instead of inheriting the container text color. Reusing the min-max-label
+ * typography tokens and inheriting color keeps this visually consistent with the min/max guides.
+ *
+ * The vertical gap between mark and label is also Mantine's own default (half of
+ * --mantine-spacing-xs, unbound to any recursica token) unless overridden here. The transform's
+ * horizontal term (`-50% + var(--slider-size) / 2`) is Mantine's own mark-offset compensation
+ * and is left untouched; only the vertical term is replaced with the same label-field gap token
+ * the mui-adapter's markLabel already uses, for cross-adapter consistency.
+ */
+.sliderMarkLabel {
+  transform: translate(
+    calc(-50% + var(--slider-size) / 2),
+    var(--recursica_ui-kit_globals_form_properties_label-field-gap-vertical)
+  );
+  color: inherit;
+
+  font-family: var(
+    --recursica_ui-kit_components_slider_properties_min-max-label_font-family
+  );
+  font-size: var(
+    --recursica_ui-kit_components_slider_properties_min-max-label_font-size
+  );
+  font-style: var(
+    --recursica_ui-kit_components_slider_properties_min-max-label_font-style
+  );
+  font-weight: var(
+    --recursica_ui-kit_components_slider_properties_min-max-label_font-weight
+  );
+  letter-spacing: var(
+    --recursica_ui-kit_components_slider_properties_min-max-label_letter-spacing
+  );
+  line-height: var(
+    --recursica_ui-kit_components_slider_properties_min-max-label_line-height
+  );
+  text-decoration: var(
+    --recursica_ui-kit_components_slider_properties_min-max-label_text-decoration
+  );
+  text-transform: var(
+    --recursica_ui-kit_components_slider_properties_min-max-label_text-transform
+  );
+}
+
+/* ==========================================
+   3. Min / Max Custom Typography Labels & Floating Active Value
+   ========================================== */
+
+.minMaxGuide {
+  font-family: var(
+    --recursica_ui-kit_components_slider_properties_min-max-label_font-family
+  );
+  font-size: var(
+    --recursica_ui-kit_components_slider_properties_min-max-label_font-size
+  );
+  font-style: var(
+    --recursica_ui-kit_components_slider_properties_min-max-label_font-style
+  );
+  font-weight: var(
+    --recursica_ui-kit_components_slider_properties_min-max-label_font-weight
+  );
+  letter-spacing: var(
+    --recursica_ui-kit_components_slider_properties_min-max-label_letter-spacing
+  );
+  line-height: var(
+    --recursica_ui-kit_components_slider_properties_min-max-label_line-height
+  );
+  text-decoration: var(
+    --recursica_ui-kit_components_slider_properties_min-max-label_text-decoration
+  );
+  text-transform: var(
+    --recursica_ui-kit_components_slider_properties_min-max-label_text-transform
+  );
+}
+
+/* 
+ * LAYOUT DECISION: Right-Aligned Floating Current Value Container
+ * - Wrapped around the right-side max guide (or icon) as a relative flex context.
+ * - This provides the anchor for absolutely positioning the floating current value element
+ *   above the guide.
+ */
+.rightGuideContainer {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+/*
+ * LAYOUT DECISION: Floating Active Value Element
+ * - Absolutely positioned directly above the max guide and right-aligned (`right: 0`).
+ * - Uses a vertical gap matching the global label-to-component gap variable, ensuring
+ *   that `.currentValue` is placed in perfect horizontal baseline alignment with the
+ *   left-aligned form label of the component.
+ * - Typography maps back to the slider component's read-only value token definitions.
+ * - Inherits the container default/disabled/error text colors naturally.
+ */
+.currentValue {
+  position: absolute;
+  bottom: calc(
+    100% +
+      var(--recursica_ui-kit_globals_form_properties_label-field-gap-vertical)
+  );
+  right: 0;
+  white-space: nowrap;
+  pointer-events: none;
+  display: inline-block;
+  width: var(--recursica_ui-kit_components_slider_properties_input-width);
+  text-align: right;
+
+  font-family: var(
+    --recursica_ui-kit_components_slider_properties_read-only-value_font-family
+  );
+  font-size: var(
+    --recursica_ui-kit_components_slider_properties_read-only-value_font-size
+  );
+  font-style: var(
+    --recursica_ui-kit_components_slider_properties_read-only-value_font-style
+  );
+  font-weight: var(
+    --recursica_ui-kit_components_slider_properties_read-only-value_font-weight
+  );
+  letter-spacing: var(
+    --recursica_ui-kit_components_slider_properties_read-only-value_letter-spacing
+  );
+  line-height: var(
+    --recursica_ui-kit_components_slider_properties_read-only-value_line-height
+  );
+  text-decoration: var(
+    --recursica_ui-kit_components_slider_properties_read-only-value_text-decoration
+  );
+  text-transform: var(
+    --recursica_ui-kit_components_slider_properties_read-only-value_text-transform
+  );
+}
+
+/* ==========================================
+   4. Numeric Input Field
+   ========================================== */
+
+.inputField {
+  box-sizing: border-box;
+  flex-shrink: 0;
+  width: var(--recursica_ui-kit_components_slider_properties_input-width);
+  height: var(--recursica_ui-kit_components_slider_properties_input-height);
+  border-radius: var(
+    --recursica_ui-kit_components_slider_properties_input-border-radius
+  );
+  border-style: solid;
+  border-width: var(
+    --recursica_ui-kit_components_slider_properties_input-border-size
+  );
+  border-color: var(
+    --recursica_ui-kit_components_slider_properties_colors_input-border-color
+  );
+  background-color: var(
+    --recursica_ui-kit_components_slider_properties_colors_input-background-color
+  );
+  color: var(--recursica_ui-kit_components_slider_properties_colors_input-text);
+
+  font-family: var(
+    --recursica_ui-kit_components_slider_properties_input-text_font-family
+  );
+  font-size: var(
+    --recursica_ui-kit_components_slider_properties_input-text_font-size
+  );
+  font-style: var(
+    --recursica_ui-kit_components_slider_properties_input-text_font-style
+  );
+  font-weight: var(
+    --recursica_ui-kit_components_slider_properties_input-text_font-weight
+  );
+  letter-spacing: var(
+    --recursica_ui-kit_components_slider_properties_input-text_letter-spacing
+  );
+  line-height: var(
+    --recursica_ui-kit_components_slider_properties_input-text_line-height
+  );
+  text-decoration: var(
+    --recursica_ui-kit_components_slider_properties_input-text_text-decoration
+  );
+  text-transform: var(
+    --recursica_ui-kit_components_slider_properties_input-text_text-transform
+  );
+
+  padding-left: var(
+    --recursica_ui-kit_components_slider_properties_input-padding-left
+  );
+  padding-right: var(
+    --recursica_ui-kit_components_slider_properties_input-padding-right
+  );
+  padding-top: var(
+    --recursica_ui-kit_components_slider_properties_input-padding-vertical
+  );
+  padding-bottom: var(
+    --recursica_ui-kit_components_slider_properties_input-padding-vertical
+  );
+  text-align: center;
+  transition:
+    border-color 0.15s ease,
+    background-color 0.15s ease;
+}
+
+.inputField:focus {
+  outline: none;
+  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);
+}
+
+/* Chrome, Safari, Edge, Opera: Hide number spin buttons */
+.inputField::-webkit-outer-spin-button,
+.inputField::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+/* Firefox: Hide number spin buttons */
+.inputField[type="number"] {
+  -moz-appearance: textfield;
+}
+
+/* ==========================================
+   5. Custom Read-Only Typography Value
+   ========================================== */
+
+.readOnlyValue {
+  font-family: var(
+    --recursica_ui-kit_components_slider_properties_read-only-value_font-family
+  );
+  font-size: var(
+    --recursica_ui-kit_components_slider_properties_read-only-value_font-size
+  );
+  font-style: var(
+    --recursica_ui-kit_components_slider_properties_read-only-value_font-style
+  );
+  font-weight: var(
+    --recursica_ui-kit_components_slider_properties_read-only-value_font-weight
+  );
+  letter-spacing: var(
+    --recursica_ui-kit_components_slider_properties_read-only-value_letter-spacing
+  );
+  line-height: var(
+    --recursica_ui-kit_components_slider_properties_read-only-value_line-height
+  );
+  text-decoration: var(
+    --recursica_ui-kit_components_slider_properties_read-only-value_text-decoration
+  );
+  text-transform: var(
+    --recursica_ui-kit_components_slider_properties_read-only-value_text-transform
+  );
+}
+
+/* ==========================================
+   6. State-Specific Overrides (Disabled, Error)
+   ========================================== */
+
+/* Focus states */
+/* The token schema's `active` state (not a separate `focus` state) now covers track/step-indicator
+   color while focus is within the slider; there is no `active` override for the filled mark. */
+.sliderRoot:has(.sliderThumb:focus) .sliderTrack,
+.sliderRoot:focus-within .sliderTrack {
+  background-color: var(
+    --recursica_ui-kit_components_slider_variants_states_active_properties_colors_track
+  );
+}
+
+.sliderRoot:has(.sliderThumb:focus) .sliderMark,
+.sliderRoot:focus-within .sliderMark {
+  background-color: var(
+    --recursica_ui-kit_components_slider_variants_states_active_properties_colors_step-indicator-color
+  );
+}
+
+.sliderContainer:focus-within .iconWrapper {
+  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);
+}
+
+/* Disabled state */
+.sliderContainer[data-disabled="true"] .iconWrapper {
+  color: var(
+    --recursica_ui-kit_components_slider_variants_states_disabled_properties_colors_icon-color
+  );
+}
+
+.sliderContainer[data-disabled="true"] .sliderTrack {
+  background-color: var(
+    --recursica_ui-kit_components_slider_variants_states_disabled_properties_colors_track
+  );
+}
+
+.sliderContainer[data-disabled="true"] .sliderBar {
+  background-color: var(
+    --recursica_ui-kit_components_slider_variants_states_disabled_properties_colors_track-active
+  );
+}
+
+.sliderContainer[data-disabled="true"] .sliderThumb {
+  background-color: var(
+    --recursica_ui-kit_components_slider_variants_states_disabled_properties_colors_thumb
+  );
+  cursor: not-allowed;
+  box-shadow: none;
+}
+
+.sliderContainer[data-disabled="true"] .sliderMark {
+  background-color: var(
+    --recursica_ui-kit_components_slider_variants_states_disabled_properties_colors_step-indicator-color
+  );
+}
+
+.sliderContainer[data-disabled="true"] .sliderMark[data-filled] {
+  background-color: var(
+    --recursica_ui-kit_components_slider_variants_states_disabled_properties_colors_step-indicator-color-active
+  );
+}
+
+.sliderContainer[data-disabled="true"] {
+  color: var(--form-field-disabled-text);
+  opacity: var(
+    --recursica_ui-kit_components_slider_variants_states_disabled_properties_opacity
+  );
+}
+
+.inputField:disabled {
+  cursor: not-allowed;
+  background-color: var(
+    --recursica_ui-kit_components_slider_variants_states_disabled_properties_colors_input-background-color
+  );
+  border-color: var(
+    --recursica_ui-kit_components_slider_variants_states_disabled_properties_colors_input-border-color
+  );
+  color: var(
+    --recursica_ui-kit_components_slider_variants_states_disabled_properties_colors_input-text
+  );
+  border-width: var(
+    --recursica_ui-kit_components_slider_variants_states_disabled_properties_input-border-size
+  );
+}
+
+/* Error state */
+.sliderContainer[data-error="true"] .iconWrapper {
+  color: var(
+    --recursica_ui-kit_components_slider_variants_states_error_properties_colors_icon-color
+  );
+}
+
+.sliderContainer[data-error="true"] .sliderTrack {
+  background-color: var(
+    --recursica_ui-kit_components_slider_variants_states_error_properties_colors_track
+  );
+}
+
+.sliderContainer[data-error="true"] .sliderBar {
+  background-color: var(
+    --recursica_ui-kit_components_slider_variants_states_error_properties_colors_track-active
+  );
+}
+
+.sliderContainer[data-error="true"] .sliderThumb {
+  background-color: var(
+    --recursica_ui-kit_components_slider_variants_states_error_properties_colors_thumb
+  );
+}
+
+.sliderContainer[data-error="true"] .sliderMark {
+  background-color: var(
+    --recursica_ui-kit_components_slider_variants_states_error_properties_colors_step-indicator-color
+  );
+}
+
+.sliderContainer[data-error="true"] .sliderMark[data-filled] {
+  background-color: var(
+    --recursica_ui-kit_components_slider_variants_states_error_properties_colors_step-indicator-color-active
+  );
+}
+
+.inputField[data-error="true"] {
+  background-color: var(
+    --recursica_ui-kit_components_slider_variants_states_error_properties_colors_input-background-color
+  );
+  border-color: var(
+    --recursica_ui-kit_components_slider_variants_states_error_properties_colors_input-border-color
+  );
+  color: var(
+    --recursica_ui-kit_components_slider_variants_states_error_properties_colors_input-text
+  );
+  border-width: var(
+    --recursica_ui-kit_components_slider_variants_states_error_properties_input-border-size
+  );
+}
+
+/* ==========================================
+   7. Side-by-Side Layout Overrides
+   ========================================== */
+
+.sliderContainer[data-form-layout="side-by-side"] .rightGuideContainer {
+  position: relative;
+  display: inline-flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-end;
+  flex-shrink: 0;
+  gap: var(--recursica_ui-kit_components_slider_properties_input-gap);
+}
+
+.sliderContainer[data-form-layout="side-by-side"] .currentValue {
+  position: static;
+  white-space: nowrap;
+  pointer-events: none;
+  order: 2; /* Positioned to the right of the max label */
+}
+
+.sliderContainer[data-form-layout="side-by-side"]
+  .rightGuideContainer
+  .minMaxGuide {
+  order: 1; /* Positioned to the left of the current value */
+}