@kolkrabbi/kol-component 0.160.0 → 0.162.0

package/package.json

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

@@ -199,6 +199,13 @@ export default function ContentCard({
   ) : null
   const r = ratio ?? RATIOS[variant]
   const padding = pad ? `var(--kol-pad-card-${pad})` : box.pad
+  /* the inset takes SINGLE values (ContentCardActionsInsetShorthand, kol-monitor
+   * 2026-09-02): `catalog`'s pad is the two-value shorthand `sm md`, and a
+   * two-value string is invalid for top / right / bottom — all three dropped
+   * and the actions landed at their static position, under the copy at the
+   * left, instead of bottom-right (the 2026-08-15 ruling). Block from the
+   * first value, inline from the second (or the same one). */
+  const [padBlock, padInline = padBlock] = String(padding ?? '0').trim().split(/\s+/)
   /* image-only cards (print) pass no text slots — the empty plate must not render */
   const hasText = ['title', 'body', 'kicker', 'detail', 'date', 'size', 'meta', 'tags'].some((k) => textSlots[k] != null)
   /* `actions` sit IN THE TEXT PLATE, bottom-right (user ruling 2026-08-15:
@@ -233,7 +240,7 @@ export default function ContentCard({
       {actions && (
         <div
           className="absolute flex"
-          style={{ top: padding, bottom: padding, right: padding }}
+          style={{ top: padBlock, bottom: padBlock, right: padInline }}
         >
           {actions}
         </div>

package/src/molecules/Stepper.jsx

@@ -12,6 +12,15 @@
  *   at both ends, and `onChange` reports the option in the same event shape
  *   as the number path — `{ target: { value: option } }`.
  *
+ *   layout="inline" — `‹ value ›` on ONE line (StepperInlineVariant, kol-monitor
+ *   2026-09-02; the rack's Selector shape, the other half of its collapse onto
+ *   this): the chevrons flank the value as left/right hit targets, the value is
+ *   centred in a 3ch floor so the row does not jitter as it steps, and there is
+ *   NO `.kol-control` field chrome — it is inline text on the panel. Value
+ *   `text-fg-64`, chevrons `text-fg-40`, type from the size ladder; casing is the
+ *   caller's. Works for `options` and for the number range alike. Default
+ *   `stacked` is the field with the chevron stack, exactly as before.
+ *
  * Loaded from `00-kol/chevron-{up,down}.svg` via the Icon registry — first
  * stroke icons in the kol curated set. For a plain number input without
  * bump affordance, use `<Input type="number" />`.
@@ -28,6 +37,7 @@ export default function Stepper({
   max,
   step = 1,
   options,
+  layout = 'stacked',
   size = 'sm',
   className = '',
   style = {},
@@ -63,6 +73,23 @@ export default function Stepper({
     onChange?.(e)
   }
 
+  /* INLINE — ‹ value › with no field: the chevrons are the hit targets, the
+   * value is text on the panel. `min-w-[3ch]` holds the width across steps. */
+  if (layout === 'inline') {
+    const chev = CHEVRON_SIZE[size]
+    return (
+      <div className={`inline-flex items-center justify-center gap-0.5 select-none ${SIZE_TYPE[size]} ${className}`.trim()} style={style}>
+        <button type="button" onClick={handleDecrement} className="inline-flex items-center justify-center px-0.5 text-fg-40 hover:text-emphasis transition-colors" aria-label="Previous">
+          <Icon name="chevron-left" size={chev} />
+        </button>
+        <span className="min-w-[3ch] text-center text-fg-64" {...props}>{value ?? ''}</span>
+        <button type="button" onClick={handleIncrement} className="inline-flex items-center justify-center px-0.5 text-fg-40 hover:text-emphasis transition-colors" aria-label="Next">
+          <Icon name="chevron-right" size={chev} />
+        </button>
+      </div>
+    )
+  }
+
   const shellCls = [
     'kol-control',
     'kol-control--filled',