@kolkrabbi/kol-component 0.133.0 → 0.134.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-component",
-  "version": "0.133.0",
+  "version": "0.134.0",
   "description": "KOL design-system components — atoms through organisms, emitting canonical kol-* classes. Pairs with @kolkrabbi/kol-theme for styling.",
   "license": "MIT",
   "type": "module",

package/src/molecules/Slider.jsx

@@ -11,9 +11,13 @@ import Input from '../atoms/Input.jsx'
  * One bare inline row: label · track · readout. (Bordered `default` and chip
  * `subtle` variants retired 2026-07-08 — minimal is the only single slider.)
  *
- * Track color is exposed as the `--kol-slider-track` CSS variable on
- * `.slider-black`; override per-instance via
- * style={{ '--kol-slider-track': '...' }}.
+ * Track color is `--kol-slider-track`. Set it per-instance via
+ * `style={{ '--kol-slider-track': '…' }}` on this component, or from ANY
+ * ancestor — `.slider-black` reads it as a fallback rather than declaring it,
+ * so it inherits (SliderTrackVariableNotForwarded, kol-mirror 2026-08-30: both
+ * routes were documented and neither was wired, so consumers were reaching into
+ * `.slider-black` by specificity from their own stylesheets).
+ * `--kol-slider-playhead` works the same way on the dual rail.
  *
  * DUAL + PLAYHEAD (SliderDualThumbAndPlayhead, kol-mirror 2026-08-30):
  * `variant="dual"` stacks two native ranges on one rail for an in/out pair,
@@ -35,6 +39,7 @@ import Input from '../atoms/Input.jsx'
  * @param {string} props.className - Additional wrapper classes
  * @param {number} props.displayWidth - Width of the value readout, in characters (default: 6)
  * @param {string} props.fontSize - Font size for label/value (e.g., '11px')
+ * @param {Object} props.style - forwarded to the wrapper; the seam for `--kol-slider-track` / `--kol-slider-playhead`
  * @param {number} props.defaultValue - alt-click the control resets to this (falls back to `min`). Same contract on RotaryDial
  * @param {'input'|'value'|'none'} props.readout - `input` (default) an editable Input · `value` a plain right-aligned span, RotaryDial's own display-only readout · `none`
  * @param {'minimal'|'dual'} props.variant - `dual` = two thumbs on one rail
@@ -67,6 +72,7 @@ const Slider = ({
   label2,
   playhead = null,
   onPlayheadChange,
+  style,
 }) => {
   /* Label ↔ input pairing — the <label> is a sibling of the range input, so
    * without an htmlFor/id pair the visible label confers no accessible name. */
@@ -169,7 +175,7 @@ const Slider = ({
     const showLabels = label1 != null || label2 != null
     const ratio = max > min ? (playhead - min) / (max - min) : 0
     return (
-      <div className={`control-slider gap-3 shadow-none ${className}`}>
+      <div className={`control-slider gap-3 shadow-none ${className}`} style={style}>
         {label && (
           <label
             className={`kol-helper-12 whitespace-nowrap shrink-0 w-fit ${disabled ? 'opacity-50' : ''}`}
@@ -231,7 +237,7 @@ const Slider = ({
   }
 
   return (
-    <div className={`control-slider gap-3 shadow-none ${className}`} onClick={onAltReset}>
+    <div className={`control-slider gap-3 shadow-none ${className}`} style={style} onClick={onAltReset}>
       {label && (
         <label
           htmlFor={sliderId}