@kolkrabbi/kol-component 0.150.1 → 0.151.0

package/package.json

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

@@ -18,6 +18,11 @@
  *            weight). Useful for current-value displays, units, etc.
  *   inline — bool. When true, renders horizontally with label on the left.
  *   labelWidth — px width for the label column when `inline`. Default 48.
+ *            `'auto'` flips which cell yields: the label flexes and TRUNCATES,
+ *            the control hugs its content (SettingsShortcutsComboOverflow,
+ *            kol-monitor 2026-09-01 — in a narrow multi-column grid a fixed
+ *            160 label left the control 4px, and a nowrap combo painted into
+ *            the neighbour column; the 48px column gap had been hiding it).
  *   children — the control body.
  *   className — additional classes on the wrapper.
  */
@@ -40,17 +45,22 @@ export default function LabeledControl({
   )
 
   if (inline) {
+    /* `'auto'`: the label is the yielding cell — flex-1, truncating — and the
+     * control hugs. The control still carries min-w-0 + overflow-hidden so a
+     * combo wider than the whole column CLIPS at the column edge rather than
+     * painting over the neighbour (the invariant: no cell outside its column). */
+    const labelAuto = labelWidth === 'auto'
     return (
       <div className={`flex items-center gap-3 ${className}`}>
         {showLabel && (
           <span
-            className="kol-helper-10 tracking-widest text-meta shrink-0"
-            style={{ width: labelWidth }}
+            className={`kol-helper-10 tracking-widest text-meta ${labelAuto ? 'flex-1 min-w-0 truncate' : 'shrink-0'}`}
+            style={labelAuto ? undefined : { width: labelWidth }}
           >
             {labelInner}
           </span>
         )}
-        <div className="flex-1 min-w-0">{children}</div>
+        <div className={labelAuto ? 'min-w-0 overflow-hidden' : 'flex-1 min-w-0'}>{children}</div>
       </div>
     )
   }

package/src/organisms/SettingsPanel.jsx

@@ -112,7 +112,10 @@ export default function SettingsPanel({
  * uppercase label (`kol-helper-10` tracked, meta ink) in a 160px column, the
  * control fills the rest. A switch sits at the far right (`align="end"`, the
  * default); a dropdown fills the row (`align="fill"`). No hint sentences on the
- * page — `hint` rides the control's `title`.
+ * page — `hint` rides the control's `title`. `labelWidth="auto"` passes through
+ * to LabeledControl: the label flexes and truncates, the control hugs — for a
+ * row living in a column narrower than the 160px label default
+ * (SettingsShortcutsComboOverflow, kol-monitor 2026-09-01).
  */
 export function SettingsRow({ label, hint, align = 'end', labelWidth = 160, children }) {
   return (