@kolkrabbi/kol-theme 0.50.1 → 0.51.0

package/kol-components-atoms.css

@@ -474,10 +474,28 @@
   background-color: transparent;
   color: var(--kol-surface-on-primary);
   cursor: pointer;
+  position: relative; /* the bare variant's hit extent below anchors here */
   transition: background-color var(--kol-transition-base),
               border-color var(--kol-transition-base);
 }
 
+/* THE TOUCH FLOOR (MobileTouchFloor, user ruling 2026-08-26): every pressable
+ * control clears a 24px hit box (WCAG 2.5.8 AA) and the DRAWN size never
+ * moves. No type floor — 10px chrome is the ruled helper/mono-10 voice. Two
+ * controls sat under 24: this bare switch (a 12px track in a 1px border, 14px
+ * tall) and the Slider's range input below (a 2px track was the whole target).
+ * The shells ride button geometry (26/32/40) and already clear it. The extent
+ * is a pseudo-element, so the layout box, the label and the track stay where
+ * they are; hit-testing on a pseudo lands on its originating button. */
+.toggle-switch--bare::before {
+  content: '';
+  position: absolute;
+  inset-inline: 0;
+  top: 50%;
+  height: 24px;
+  translate: 0 -50%;
+}
+
 .toggle-switch:focus-visible {
   outline: 2px solid var(--kol-focus-ring);
   outline-offset: 2px;
@@ -626,7 +644,12 @@
   appearance: none;
   background: transparent;
   cursor: pointer;
-  height: 2px;
+  /* 24px, not 2px (the touch floor, user ruling 2026-08-26 — see ToggleSwitch
+   * above). The INPUT is the hit target and it was exactly the track's 2px;
+   * the drawing is unchanged: the 2px track centres inside the box by the UA's
+   * own `align-self: center` on the runnable track, and the thumb stays pinned
+   * to the track. The row (.control-slider) is already 24px, so nothing moves. */
+  height: 24px;
 }
 
 .slider-black::-webkit-slider-runnable-track {

package/kol-components-molecules.css

@@ -707,6 +707,20 @@
   margin-block-end: 0.75rem;
 }
 
+/* THE CONTROL'S LANE (CodeBlockMobileOverflow, kol-website 2026-08-25). The
+ * copy button floats in the frame's top-right corner (.kol-frame-control), and
+ * the chip row is the lane it sits in — when there IS a chip. A block with no
+ * chip (a `text` fence, an unlabelled CMS block) starts its code on the row
+ * the control occupies, and once the block is narrower than ~600px the first
+ * line runs underneath it (measured: control y 3729–3761, line 1 y 3735–3756).
+ * The first line reserves the control's column in that case and only that
+ * case — 2rem is the control's box (.kol-copy-btn: 16px glyph + 0.5rem pad)
+ * plus its inset; every other line, and every chipped block, is untouched.
+ * `.kol-codeblock-line` is stamped per line by CodeBlock.jsx. */
+.kol-codeblock:not(:has(.kol-codeblock-filename)) .kol-codeblock-line:first-child {
+  padding-inline-end: calc(2rem + var(--kol-spacing-3));
+}
+
 /* ─────────────────────────────────────────────────────────────────────
  * FRAME CONTROL — a control that floats in a host frame's corner
  * (user ruling 2026-08-15).

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-theme",
-  "version": "0.50.1",
+  "version": "0.51.0",
   "description": "KOL (Kolkrabbi) design-system tokens + base CSS — brand-neutral. The canonical token/cascade layer every other KOL package and consumer builds on.",
   "license": "MIT",
   "type": "module",