@kolkrabbi/kol-theme 0.31.0 → 0.31.2

package/kol-components-molecules.css

@@ -34,15 +34,19 @@
   gap: var(--kol-spacing-1);
   width: 100%;
 }
-/* REST AND OPEN ARE THE ONLY STATES (2026-07-15 ruling, re-called 2026-08-09).
- * The trigger wears button chrome, and button chrome hovers — so every
- * kol-btn variant hover is PINNED BACK TO REST here. This sheet loads after
- * atoms in the same layer, so the tie resolves to these rules. */
-.kol-dd-trigger.kol-btn-primary:hover {
+/* REST AND OPEN ARE THE ONLY STATES (2026-07-15 ruling, re-called twice
+ * 2026-08-09). The trigger wears button chrome, and button chrome hovers AND
+ * presses — so every kol-btn variant :hover and :active is PINNED BACK TO
+ * REST here. The :not(:disabled) carries the weight of the atoms :active
+ * selectors; this sheet loads after atoms in the same layer, so ties resolve
+ * to these rules. */
+.kol-dd-trigger.kol-btn-primary:not(:disabled):hover,
+.kol-dd-trigger.kol-btn-primary:not(:disabled):active {
   background: var(--kol-surface-secondary);
   color: var(--kol-surface-on-primary);
 }
-.kol-dd-trigger.kol-btn-outline:hover {
+.kol-dd-trigger.kol-btn-outline:not(:disabled):hover,
+.kol-dd-trigger.kol-btn-outline:not(:disabled):active {
   background: transparent;
   color: var(--kol-surface-on-primary);
   border-color: var(--kol-oq-16);
@@ -51,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 {

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.0",
+  "version": "0.31.2",
   "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",