@kolkrabbi/kol-theme 0.31.1 → 0.31.3

package/kol-components-atoms.css

@@ -777,32 +777,28 @@ a:hover .icon-hover,
 
 /* ─────────────────────────────────────────────────────────────────────
  * CopyButton — atoms/CopyButton.jsx
- *   Copy-to-clipboard chip: clipboard icon + Copy/Copied label.
- *   Look extracted from CodeBlock's inline copy button; CodeBlock's
- *   .kol-codeblock-copy (kol-framework) now only positions it.
+ *   THE copy-to-clipboard control (2026-08-09 user ruling): the 32×32
+ *   icon button CodeBlock carried privately since the 2026-07-28 elder
+ *   replication — 16px icon + 0.5rem padding. The old Copy/Copied label
+ *   chip (one-off SVGs, auto-uppercase) is retired; CodeBlock composes
+ *   this atom and .kol-codeblock-copy only positions it in-frame.
  * ───────────────────────────────────────────────────────────────────── */
 .kol-copy-btn {
   display: inline-flex;
   align-items: center;
-  gap: 6px;
-  padding: 6px 10px;
-  background: color-mix(in srgb, var(--kol-surface-primary) 80%, transparent);
-  border: 1px solid var(--kol-fg-16);
-  border-radius: 3px;
-  color: var(--kol-fg-64);
+  justify-content: center;
+  padding: 0.5rem;
+  background: color-mix(in srgb, var(--kol-surface-on-primary) 2%, transparent);
+  border: none;
+  border-radius: var(--kol-radius-sm);
+  color: color-mix(in srgb, var(--kol-surface-on-primary) 72%, transparent);
   cursor: pointer;
-  font-family: var(--kol-font-family-mono, monospace);
-  font-size: 10px;
-  font-weight: 600;
-  letter-spacing: 0.08em;
-  line-height: 1;
-  text-transform: uppercase;
-  transition: color 150ms ease, border-color 150ms ease, background 150ms ease;
+  transition: background-color var(--kol-transition-base), color var(--kol-transition-base);
 }
 
 .kol-copy-btn:hover {
+  background: color-mix(in srgb, var(--kol-surface-on-primary) 8%, transparent);
   color: var(--kol-surface-on-primary);
-  border-color: var(--kol-fg-48);
 }
 
 /* ─────────────────────────────────────────────────────────────────────

package/kol-components-molecules.css

@@ -55,7 +55,11 @@
  * The trigger reserves the widest option's width by stacking every label in
  * one grid cell (hidden ghosts), so the panel — pinned to the trigger by
  * matchReferenceWidth — is exactly as wide as the trigger at every value. */
-.kol-dd-label { display: inline-grid; min-width: 0; }
+/* text-align: the trigger is a real <button>, and the UA stylesheet centers
+ * button text — the stretched label span then centers inside the widest-ghost
+ * cell (a value floating at a random indent per list). Pin it to the leading
+ * edge, Input's model. */
+.kol-dd-label { display: inline-grid; min-width: 0; text-align: start; }
 .kol-dd-label > span { grid-area: 1 / 1; white-space: nowrap; }
 .kol-dd-ghost { visibility: hidden; }
 .kol-dd-caret {
@@ -557,27 +561,13 @@
   margin-block-end: 0.75rem;
 }
 
-/* icon copy button — VERBATIM from the live reference build: 16px icon +
- * 0.5rem padding = the 32×32 box, offset 0.75rem into the 1rem pad. */
+/* in-frame position only — the button IS the CopyButton atom (.kol-copy-btn
+ * carries the 32×32 look, promoted there 2026-08-09); offset 0.75rem into
+ * the 1rem pad. */
 .kol-codeblock-copy {
   position: absolute;
   top: 0.75rem;
   right: 0.75rem;
-  padding: 0.5rem;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: color-mix(in srgb, var(--kol-surface-on-primary) 2%, transparent);
-  border: none;
-  border-radius: 4px;
-  color: color-mix(in srgb, var(--kol-surface-on-primary) 72%, transparent);
-  cursor: pointer;
-  transition: all 0.15s;
-}
-
-.kol-codeblock-copy:hover {
-  background: color-mix(in srgb, var(--kol-surface-on-primary) 8%, transparent);
-  color: var(--kol-surface-on-primary);
 }
 
 /* ─────────────────────────────────────────────────────────────────────

package/kol-components-workshop.css

@@ -565,19 +565,42 @@
   overflow-wrap: anywhere;
 }
 
-/* A MULTI-VALUE FIELD IS A LIST WITH A CEILING (2026-08-01). Stacked one per
- * line, and capped at roughly eight rows before it scrolls in place — a doc
- * with fifteen `sources` would otherwise push its own article fifteen lines
- * down and turn the metadata panel into the page. */
+/* A MULTI-VALUE FIELD IS A LIST, one per line. Its 2026-08-01 scroll ceiling
+ * (11rem + overscroll contain per field) is REPEALED 2026-08-09 — per-field
+ * scrollboxes captured the page wheel on the way down; the cap lives on the
+ * WHOLE panel now (.docs-frontmatter-body--capped below). */
 .docs-frontmatter-list {
   display: flex;
   flex-direction: column;
   gap: var(--kol-spacing-1);
-  max-height: 11rem;
-  overflow-y: auto;
-  overscroll-behavior: contain;
 }
 
+/* THE PANEL COLLAPSES, THE PAGE SCROLLS (2026-08-09 user call). One cap on
+ * the whole panel behind a fade, expanded in normal flow via the toggle —
+ * zero scroll regions inside the panel. */
+.docs-frontmatter-body { position: relative; }
+.docs-frontmatter-body--capped {
+  max-height: 20rem;
+  overflow: hidden;
+}
+.docs-frontmatter-fade {
+  position: absolute;
+  inset-inline: 0;
+  bottom: 0;
+  height: 4rem;
+  background: linear-gradient(to bottom, transparent, var(--kol-surface-primary));
+  pointer-events: none;
+}
+/* Toggle layout only — type/color ride kol-helper-12 text-meta in JSX. */
+.docs-frontmatter-toggle {
+  display: flex;
+  align-items: center;
+  gap: var(--kol-spacing-2);
+  margin-block-start: var(--kol-spacing-2);
+  cursor: pointer;
+}
+.docs-frontmatter-toggle:hover { color: var(--kol-surface-on-primary); }
+
 /* `.tag` was the Tag component's base class until it was rebuilt on Pill's
  * model (2026-08-01) and the scheme became `kol-tag`. The selector has matched
  * nothing since. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-theme",
-  "version": "0.31.1",
+  "version": "0.31.3",
   "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",