@recursica/adapter-mui-v7 1.0.0

package/src/components/Slider/IMPLEMENTATION_NOTES.md

@@ -0,0 +1,55 @@
+# Slider Implementation Notes
+
+This document contains specific design decisions, architectural constraints, and hacks required to bridge the Recursica design system with MUI's underlying `Slider` primitive.
+
+## 1. Pointer Clicks Falsely Trigger MUI's `Mui-focusVisible` Ring
+
+**Symptom:** Clicking or dragging the thumb showed the keyboard focus ring, which Mantine never shows for a plain mouse interaction.
+
+**Root cause:** MUI's `Slider` always programmatically re-focuses its hidden native `<input type="range">` on pointer-down (`focusThumb()` in `useSlider`). Because the focus target (`<input>`) differs from the element the pointer actually interacted with, and because a script-driven `.focus()` call is what browsers use to decide visibility, the native `:focus-visible` heuristic (which MUI's own `isFocusVisible` check relies on) resolves to `true` even for a plain click. Mantine's thumb is a plain `<div tabIndex>` that receives real native focus directly from the click, so the same heuristic correctly resolves to `false` there.
+
+**Fix:** `Slider.tsx` tracks pointer-vs-keyboard itself (`onMouseDown` sets a ref, `onFocus` reads it to flag `suppressFocusRing`, `onKeyDown`/`onBlur` clear it — mirroring how real `:focus-visible` re-evaluates on a subsequent keypress). `Slider.module.css` only paints the ring when `[data-suppress-focus-ring="true"]` is absent from `.sliderContainer`.
+
+## 2. Disabled Track Stayed Red
+
+**Symptom:** Once `disabled` was wired through correctly, the filled track (`.sliderBar`) still rendered the active/red color instead of the disabled grey token.
+
+**Root cause:** The base `.sliderBar` rule had `background-color: ... !important`, so the (non-`!important`) `[data-disabled="true"] .sliderBar` override could never win the cascade regardless of source order.
+
+**Fix:** Removed the unneeded `!important` flags from the base `.sliderBar` rule — `injectFirst` already makes our CSS-module class beat MUI's native `.MuiSlider-track` via source order alone (same as `.sliderTrack`/`.sliderThumb`/`.sliderMark`, none of which need `!important`).
+
+## 3. Assistive Text Rendered as `<div>` Instead of `<span>`
+
+**Root cause:** `AssistiveElement.tsx` (adapter-mui-v7) hardcoded a `<div>` around the children text; Mantine's equivalent uses a `<span>`. Not shared via `adapter-common` — each adapter has its own `AssistiveElement`.
+
+**Fix:** Changed the inner text wrapper to a `<span>`. No CSS selector depended on the element type (`.text` is a class-only selector and remains a valid flex item as a span).
+
+## 4. Mark Label Color
+
+**Root cause:** MUI's `.sliderMarkLabel` already inherited the container text color using the min-max-label typography tokens. Mantine's equivalent class (`styles.sliderMarkLabel`) was referenced in `Slider.tsx`'s `classNames` map but was never defined in Mantine's `Slider.module.css`, so Mantine silently fell back to its own default theme grey instead of any recursica token. Fixed in `mantine-adapter` by adding the missing `.sliderMarkLabel` rule (same tokens/inherit-color approach as MUI) rather than copying Mantine's undefined behavior into MUI.
+
+## 5. Formatted Current Value, Label Overrides, Trailing Icon
+
+**Symptom:** `.currentValue` always rendered the raw numeric value, even when `tooltipLabel` was a formatter function (already used for MUI's own `valueLabelFormat`) — a caller mapping values onto custom text got the formatted tooltip while dragging but the raw number next to the track otherwise. Same bug as `mantine-adapter`.
+
+**Fix:** `.currentValue` now runs `resolvedValue` through `tooltipLabel` when it's a function, reusing the same formatter passed to `valueLabelFormat`. Added `minLabel`/`maxLabel` (new `adapter-common` props) to override the `.minMaxGuide` text at either end of the track, and `trailingIcon` (new `adapter-common` prop) to render a second icon opposite the existing `icon`, reusing the same `.iconWrapper` styling.
+
+## 6. 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:**
+
+- MUI's `Slider` already accepts `number[]` for `value`/`onChange` and renders two thumbs natively, so unlike `mantine-adapter` (which must swap to a separate `RangeSlider` component) this stays the same `<MuiSlider>` — arrays are no longer collapsed to `value[0]`.
+- 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 (`valueLabelFormat` already handled this per-thumb natively, unchanged).
+- 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 §7 below.
+
+## 7. 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).
+
+## 8. Mark Vertically Off-Center
+
+**Decision:** MUI's own mark is `top: 50%; transform: translate(-1px, -50%)` — the `-1px` assumes MUI's built-in 2px dot, the `-50%` is real vertical centering. `.sliderMark` overrode `transform` to `translateX(-50%)` (horizontal-only, meant to mirror the mantine-adapter) without noticing it dropped MUI's vertical `-50%`, leaving the dot hanging below the track's midpoint instead of centered.
+**Implementation:** Changed `.sliderMark`'s transform to `translate(-50%, -50%)` — keeps MUI's vertical centering and swaps the horizontal term to properly center our (non-2px) `step-indicator-width` instead of MUI's hardcoded 1px.

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

@@ -0,0 +1,635 @@
+/* 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%); on .sliderMark (preserves MUI's own vertical mark
+ *   centering while re-deriving the horizontal offset for our step-indicator-width token — see
+ *   .sliderMark below)
+ * - transform: translateX(-50%); on .sliderMarkLabel (horizontal-only; matches Mantine's offset
+ *   mechanism)
+ * - outline: none; border-style: solid; (Standard focus reset and border outlines)
+ * - Focus ring on thumb/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.
+ * - Focus ring on thumb is applied via MUI's own `Mui-focusVisible` class (not native
+ *   `:focus`/`:focus-visible`, which never match the thumb span — see inline comment).
+ */
+
+/* ==========================================
+   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;
+  color: inherit;
+  font-family: inherit;
+  font-size: inherit;
+  padding: 0;
+  margin: 0;
+}
+
+.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 {
+  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-active
+  );
+  border: none;
+}
+
+.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:hover {
+  /* Reset MUI's default hover ring (box-shadow) */
+  box-shadow: var(
+    --recursica_ui-kit_components_slider_properties_thumb-elevation
+  );
+}
+
+/*
+ * MUI toggles its own `Mui-focusVisible` class on the thumb (for both keyboard focus and
+ * mouse-driven dragging, since MUI's slider routes real DOM focus to a hidden native input,
+ * never the visible thumb span) and pairs it with a hardcoded `theme.palette.primary.main`
+ * box-shadow ring. Native `:focus`/`:focus-visible` never match the thumb span itself, so we
+ * target MUI's own class directly to replace its default-blue ring with the recursica ring.
+ *
+ * MUI also always programmatically re-focuses that hidden input on pointer interaction, which
+ * browsers' `:focus-visible` heuristic treats as keyboard-visible — unlike Mantine's plain div
+ * thumb, where a real click correctly resolves to a non-visible focus. `data-suppress-focus-ring`
+ * (set in Slider.tsx by tracking pointer-vs-keyboard ourselves) keeps the ring keyboard-only,
+ * matching Mantine.
+ */
+.sliderContainer:not([data-suppress-focus-ring="true"])
+  .sliderThumb:global(.Mui-focusVisible) {
+  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);
+}
+
+.sliderContainer[data-suppress-focus-ring="true"]
+  .sliderThumb:global(.Mui-focusVisible) {
+  outline: none;
+  box-shadow: var(
+    --recursica_ui-kit_components_slider_properties_thumb-elevation
+  );
+}
+
+.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
+  );
+  /* MUI's own mark is `top: 50%; transform: translate(-1px, -50%)` — the -1px assumes its
+     built-in 2px-wide dot and the -50% is real vertical centering, not decoration. Overriding
+     width/height above without preserving that vertical -50% would leave the dot vertically
+     un-centered (it would hang below the track's midpoint); translateX(-50%) alone stomped it.
+     translate(-50%, -50%) keeps the vertical centering and swaps the horizontal offset to match
+     our (non-2px) step-indicator-width. */
+  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
+  );
+}
+
+/*
+ * MUI's default markLabel sits ~30-40px below the mark (`top: 30`, `top: 40` under
+ * `(pointer: coarse)`) and uses `theme.palette.text.secondary`. Mantine's equivalent label sits
+ * right under the mark (a half-step-indicator offset plus a small gap) and has no explicit color,
+ * inheriting the container's text color. Reusing the min-max-label typography tokens (the closest
+ * existing "small label near the track" token set) and inheriting color keeps this visually
+ * consistent with Mantine without a dedicated mark-label token.
+ */
+.sliderMarkLabel {
+  top: calc(
+    var(--recursica_ui-kit_components_slider_properties_step-indicator-width) /
+      2 +
+      var(--recursica_ui-kit_globals_form_properties_label-field-gap-vertical)
+  );
+  transform: translateX(-50%);
+  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
+  );
+}
+
+.sliderTooltip {
+  background-color: var(--form-field-text-valued) !important;
+  color: var(--form-field-background) !important;
+  font-size: 12px !important;
+  font-weight: 500 !important;
+  padding: 4px 8px !important;
+  border-radius: 4px !important;
+
+  /* Reset MUI's default teardrop transform styling */
+  transform: translateY(-100%) !important;
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+}
+
+.sliderTooltip * {
+  /* Prevent MUI's internal rotation hack */
+  transform: none !important;
+}
+
+.sliderTooltip::before {
+  /* Hide the default MUI teardrop arrow (if v5 uses before) */
+  display: none !important;
+}
+
+/* ==========================================
+   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. Unlike Mantine (whose unfilled track is painted by an
+   internal `::before` layer that this rule never actually reaches), MUI's rail element is styled
+   directly by `.sliderTrack`, so applying the active-track color here visibly repaints the rail a
+   different color for the whole duration of a drag. There is no design requirement for the rail to
+   change color while dragging, so the track is intentionally left out of this rule; only the
+   step-indicator (mark) is included, matching the token schema's remaining active-state coverage. */
+.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
+  );
+}
+
+/* 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 */
+}