@kolkrabbi/kol-theme 0.32.2 → 0.32.4

package/kol-components-molecules.css

@@ -61,7 +61,11 @@
  * 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; }
+/* 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; }
 .kol-dd-caret {
   flex-shrink: 0;
   transition: rotate var(--kol-transition-base);
@@ -77,9 +81,15 @@
  * trigger squares its bottom corners, panel squares its top, and the fill
  * continues (panel offset is -1 in Dropdown.jsx for the same reason). */
 .kol-dd-trigger--open { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
+/* Flex column so the viewport clamp (Popover size middleware sets maxHeight
+ * on this element) reaches the list: the hairline keeps its 1px, the list
+ * takes the rest and scrolls inside — the panel itself never overflows the
+ * viewport (2026-08-09, kol-ds-fxr long-dropdown ticket). */
 .kol-dd-panel {
   border-radius: 0 0 var(--kol-radius-sm) var(--kol-radius-sm);
   overflow: hidden;
+  display: flex;
+  flex-direction: column;
 }
 .kol-dd-panel--primary { background: var(--kol-surface-secondary); }
 .kol-dd-panel--grey    { background: var(--kol-oq-12); }
@@ -89,7 +99,7 @@
   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); }
+.kol-dd-list { padding: var(--kol-spacing-1); overflow-y: auto; min-height: 0; }
 
 /* Popover — default chrome for floating-ui-positioned panels.
  * Used by molecules/Popover.jsx PopoverPanel. */
@@ -267,25 +277,28 @@
  * 2026-08-09; rebuilt off Tag onto the Dropdown-sm metrics the same day).
  * Tint + ink ride the --ui-* ladder; box/type live in the JSX (kol-btn-sm
  * values + mono-12). No tone → the neutral chip. */
+/* OPAQUE tone fills (user frame 43, 2026-08-09): the tone blends INTO the
+ * surface — a solid dark tint that holds steady over any row background.
+ * The earlier transparent wash let zebra/hover rows bleed through the pill. */
 .kol-status-chip {
   color: var(--kol-surface-on-primary);
-  background-color: color-mix(in srgb, var(--kol-surface-on-primary) 8%, transparent);
+  background-color: color-mix(in srgb, var(--kol-surface-on-primary) 8%, var(--kol-surface-primary));
 }
 .kol-status-chip--success {
   color: var(--ui-success);
-  background-color: color-mix(in srgb, var(--ui-success) 12%, transparent);
+  background-color: color-mix(in srgb, var(--ui-success) 15%, var(--kol-surface-primary));
 }
 .kol-status-chip--warning {
   color: var(--ui-warning);
-  background-color: color-mix(in srgb, var(--ui-warning) 12%, transparent);
+  background-color: color-mix(in srgb, var(--ui-warning) 15%, var(--kol-surface-primary));
 }
 .kol-status-chip--error {
   color: var(--ui-error);
-  background-color: color-mix(in srgb, var(--ui-error) 12%, transparent);
+  background-color: color-mix(in srgb, var(--ui-error) 15%, var(--kol-surface-primary));
 }
 .kol-status-chip--info {
   color: var(--ui-info);
-  background-color: color-mix(in srgb, var(--ui-info) 12%, transparent);
+  background-color: color-mix(in srgb, var(--ui-info) 15%, var(--kol-surface-primary));
 }
 
 /* inverse — the flipped chip. Mirrors .pill-inverse. */

package/package.json

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