@kolkrabbi/kol-component 0.133.0 → 0.135.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-component",
-  "version": "0.133.0",
+  "version": "0.135.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/ContentRow.jsx

@@ -15,7 +15,10 @@ import ContentText from './ContentText.jsx'
  * @param {ReactNode} media     thumb content (omit → placeholder)
  * @param {number|'fill'} thumb  thumb edge px — overrides the ruled default; 0 hides; `'fill'` = a square
  *                             the height of the row's content, whatever the rung (WorkListingRowsAndFilters)
- * @param {string}    ratio     thumb aspect-ratio — overrides the ruled default
+ * @param {string}    ratio     thumb aspect-ratio — overrides the ruled default.
+ *                             Under `thumb="fill"` the rung is the thumb's HEIGHT,
+ *                             so a non-square ratio widens the thumb rather than
+ *                             growing the row past its rung (ruled 2026-08-30)
  * @param {number}    paddingY  vertical padding px — overrides the ruled default
  * @param {{label: ReactNode, value: ReactNode}[]} specs  label/value pairs on the
  *                             row's trailing edge, independent of variant.
@@ -108,6 +111,12 @@ export default function ContentRow({
      * aspect-ratio square resolved to the image's intrinsic width) */
     '--kol-row-thumb': thumbPx === 'fill' ? `calc(${box.minH ?? 96}px - 2 * ${padY})` : `${thumbPx}px`,
     '--kol-row-thumb-md': box.thumbMd != null ? `${box.thumbMd}px` : undefined,
+    /* the documented `ratio` prop, finally connected (RowThumbRatioDead,
+     * kol-website 2026-08-30). It was destructured and then dropped — the row
+     * passed ContentMedia `ratio={null}` and kol-theme hard-coded `1 / 1`, so a
+     * consumer setting it got no error and no change. Undefined publishes
+     * nothing and the CSS fallback keeps every current row square. */
+    '--kol-row-thumb-ratio': ratio ?? box.ratio,
     '--kol-content-hover-bg': box.hover,
     '--kol-content-hover-border': box.frameHover,
     /* rest values are PROPERTIES, not inline declarations — an inline

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}