@kolkrabbi/kol-theme 0.85.0 → 0.87.0

package/kol-components-molecules.css

@@ -61,13 +61,25 @@
  * 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-label { display: inline-grid; min-width: 0; text-align: start; overflow: hidden; }
+.kol-dd-label > span { grid-area: 1 / 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 /* Ghost slack: each hidden option reserves the PANEL row's trailing check
  * column on top of its label, so the fused one-piece width fits every row
  * without truncating (2026-08-09 night — closes the "Cen…" defect at the
  * trigger instead of un-fusing the panel). */
 .kol-dd-ghost { visibility: hidden; padding-right: 1rem; }
+/* THE RESERVATION YIELDS TO THE AVAILABLE WIDTH (DropdownGhostWidthAndListHeight,
+ * kol-mirror 2026-08-28 — user, on the studio's 30-option Source picker in a
+ * ~300px shelf: "1 it's way too tall, 2 it's not fitting"). The ghost stack
+ * above reserves the widest option's width, and the 2026-08-09 one-piece ruling
+ * assumed a trigger free to take it: with 30 long labels it computed ~640px,
+ * overflowed its container and was clipped, while the portalled panel rendered
+ * at the true 640 — a panel wider than and detached from its trigger. Capping
+ * the trigger at its container keeps the fusion honest (the panel still matches
+ * `rects.reference.width`, which is now the real one) and the label ellipsises.
+ * A dropdown in a narrow chrome is where dropdowns live. */
+.kol-dd-root { max-width: 100%; }
+.kol-dd-trigger { max-width: 100%; }
 .kol-dd-caret {
   flex-shrink: 0;
   transition: rotate var(--kol-transition-base);
@@ -101,7 +113,18 @@
   border-top: none; /* the trigger's bottom edge is the divider (docs page) */
 }
 .kol-dd-div  { border-top: 1px solid var(--kol-fg-08); }
-.kol-dd-list { padding: var(--kol-spacing-1); overflow-y: auto; min-height: 0; }
+/* A ROWS CEILING THE CONSUMER CAN REACH (same ticket): Popover's size
+ * middleware clamps the PANEL to the viewport, which does nothing for a
+ * 30-row slab opened at the top of a tall page — and its inline `maxHeight`
+ * cannot be overridden from a consumer stylesheet, so the ceiling had to be
+ * ours. `maxRows` (Dropdown, default 10) and `rowHeight` write these two
+ * variables on the panel; the list scrolls at the ceiling as it always could. */
+.kol-dd-list {
+  padding: var(--kol-spacing-1);
+  overflow-y: auto;
+  min-height: 0;
+  max-height: calc(var(--kol-dd-max-rows, 10) * var(--kol-dd-row-h, 2rem) + var(--kol-spacing-1) * 2);
+}
 
 /* Popover — default chrome for floating-ui-positioned panels.
  * Used by molecules/Popover.jsx PopoverPanel. */
@@ -1234,12 +1257,22 @@
 .kol-view-toggle.kol-tone-sunken > button:not([aria-pressed="true"]):hover, .kol-view-toggle.kol-tone-inverse > button:not([aria-pressed="true"]):hover { background-color: color-mix(in srgb, var(--kol-color-absolute-white) 8%, transparent); }
 .kol-control.kol-tone-sunken, .kol-control.kol-tone-inverse { background-color: var(--kol-fg-inverse-96); }
 .kol-expand.kol-tone-sunken, .kol-expand.kol-tone-inverse { background-color: var(--kol-fg-inverse-96); }
-/* the trigger: rest and open are its only states — the pin-back rules above
- * paint surface-secondary on hover/active, so the tone pins its own chip */
+/* NO HOVER STATE ON THE DROPDOWN (user ruling 2026-08-28). Rest and open are
+ * its only states — and the three selectors are what ENFORCE that: the base
+ * `.kol-dd-trigger:hover/:active` rules paint surface-secondary, so the tone
+ * re-states its own fill on all three and nothing moves. Deleting them gives
+ * the hover back. */
 .kol-dd-trigger.kol-tone-sunken, .kol-dd-trigger.kol-tone-inverse,
 .kol-dd-trigger.kol-tone-sunken:not(:disabled):hover, .kol-dd-trigger.kol-tone-inverse:not(:disabled):hover,
 .kol-dd-trigger.kol-tone-sunken:not(:disabled):active, .kol-dd-trigger.kol-tone-inverse:not(:disabled):active { background-color: var(--kol-fg-inverse-96); }
-.kol-dd-panel.kol-tone-sunken, .kol-dd-panel.kol-tone-inverse { background-color: var(--kol-fg-inverse-96); }
+/* THE PANEL IS OPAQUE (user 2026-08-28: "transparent doesn't work for
+ * dropdown") — it floats over page content, and every `fg-*` stop is an alpha
+ * wash that the content reads through. `oq-inverse-*`, the opaque tier, bakes
+ * onto `surface-inverse` — the near-WHITE in dark theme — so even `oq-inverse-96`
+ * lands ~23.5 against the #121215 page's 18: lighter than the page, the wrong
+ * side of it. `surface-tertiary` is the flat twin of what the trigger renders:
+ * #0e0e11 (14.0) in dark against the trigger's 14.2, #ffffff in light. */
+.kol-dd-panel.kol-tone-sunken, .kol-dd-panel.kol-tone-inverse { background-color: var(--kol-surface-tertiary); }
 /* the rest of the set — Button (icon-only especially), IconFrame, ThemeToggle:
  * the well, transparent edge, fg-96 ink; hover the white wash, pressed the
  * fg-08 chip — both LAYERED over the well (a gradient image over the fill),

package/package.json

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