@kolkrabbi/kol-theme 0.89.0 → 0.91.0

package/kol-components-atoms.css

@@ -243,7 +243,7 @@
   border: 1px solid transparent;
 }
 @media (hover: hover) {
-  .kol-btn-primary:not(.kol-btn-animate):hover {
+  .kol-btn-primary:not(.kol-btn-animate):not(.kol-dd-trigger):hover {
     background-color: var(--kol-oq-08);
     color: var(--kol-surface-on-primary);
   }
@@ -256,7 +256,7 @@
   font-weight: 500;
 }
 @media (hover: hover) {
-  .kol-btn-secondary:not(.kol-btn-animate):hover {
+  .kol-btn-secondary:not(.kol-btn-animate):not(.kol-dd-trigger):hover {
     background-color: var(--kol-oq-inverse-40);
     color: var(--kol-surface-primary);
     border-color: transparent;
@@ -270,7 +270,7 @@
   font-weight: 500;
 }
 @media (hover: hover) {
-  .kol-btn-accent:not(.kol-btn-animate):hover {
+  .kol-btn-accent:not(.kol-btn-animate):not(.kol-dd-trigger):hover {
     background-color: var(--kol-accent-primary-strong);
     color: var(--kol-accent-on-primary);
   }
@@ -286,7 +286,7 @@
   border: 1px solid var(--kol-oq-08);
 }
 @media (hover: hover) {
-  .kol-btn-outline:not(.kol-btn-animate):hover {
+  .kol-btn-outline:not(.kol-btn-animate):not(.kol-dd-trigger):hover {
     background-color: var(--kol-oq-02);
     border-color: color-mix(in srgb, var(--kol-surface-on-primary) 25%, var(--kol-surface-primary));
     color: var(--kol-surface-on-primary);
@@ -299,7 +299,7 @@
   border: 1px solid transparent;
 }
 @media (hover: hover) {
-  .kol-btn-ghost:not(.kol-btn-animate):hover {
+  .kol-btn-ghost:not(.kol-btn-animate):not(.kol-dd-trigger):hover {
     background-color: var(--kol-oq-04);
     color: var(--kol-surface-on-primary);
   }
@@ -318,7 +318,7 @@
   border: 1px solid transparent;
 }
 @media (hover: hover) {
-  .kol-btn-nav:not(.kol-btn-animate):hover {
+  .kol-btn-nav:not(.kol-btn-animate):not(.kol-dd-trigger):hover {
     background-color: var(--kol-oq-04);
     color: var(--kol-surface-on-primary);
   }
@@ -343,7 +343,7 @@
   border: 1px solid transparent;
 }
 @media (hover: hover) {
-  .kol-btn-grey:not(.kol-btn-animate):hover {
+  .kol-btn-grey:not(.kol-btn-animate):not(.kol-dd-trigger):hover {
     background-color: var(--kol-oq-16);
     color: var(--kol-surface-on-primary);
   }
@@ -360,7 +360,7 @@
   font-weight: 500;
 }
 @media (hover: hover) {
-  .kol-btn-danger:not(.kol-btn-animate):hover {
+  .kol-btn-danger:not(.kol-btn-animate):not(.kol-dd-trigger):hover {
     background-color: color-mix(in srgb, var(--ui-error) 80%, var(--kol-surface-primary));
     color: var(--kol-color-absolute-white);
   }
@@ -372,13 +372,19 @@
 
 /* Press feedback — one stop past hover (2026-07-08 button-states spec).
  * Outside the hover guard: :active fires on touch too. */
-.kol-btn-primary:not(.kol-btn-animate):not(:disabled):active { background-color: var(--kol-oq-16); }
-.kol-btn-secondary:not(.kol-btn-animate):not(:disabled):active { background-color: var(--kol-oq-inverse-48); color: var(--kol-surface-primary); }
-.kol-btn-accent:not(.kol-btn-animate):not(:disabled):active { background-color: color-mix(in srgb, var(--kol-accent-primary) 70%, var(--kol-surface-primary)); }
-.kol-btn-outline:not(.kol-btn-animate):not(:disabled):active,
-.kol-btn-ghost:not(.kol-btn-animate):not(:disabled):active { background-color: var(--kol-oq-08); }
-.kol-btn-danger:not(.kol-btn-animate):not(:disabled):active { background-color: color-mix(in srgb, var(--ui-error) 70%, var(--kol-surface-primary)); }
-.kol-btn-grey:not(.kol-btn-animate):not(:disabled):active { background-color: var(--kol-oq-24); }
+/* NO HOVER, NO PRESS ON A DROPDOWN TRIGGER (user ruling 2026-08-28). Every
+ * variant excludes `.kol-dd-trigger` at the SOURCE. It used to be cancelled
+ * downstream — kol-components-molecules re-stated each variant's rest colours
+ * on :hover — and that restatement was specificity (0,4,0) against the sunken
+ * tone's (0,2,0), so hovering a SUNKEN trigger repainted it in the untoned
+ * fill: a light box beside two icon controls that stayed dark. */
+.kol-btn-primary:not(.kol-btn-animate):not(:disabled):not(.kol-dd-trigger):active { background-color: var(--kol-oq-16); }
+.kol-btn-secondary:not(.kol-btn-animate):not(:disabled):not(.kol-dd-trigger):active { background-color: var(--kol-oq-inverse-48); color: var(--kol-surface-primary); }
+.kol-btn-accent:not(.kol-btn-animate):not(:disabled):not(.kol-dd-trigger):active { background-color: color-mix(in srgb, var(--kol-accent-primary) 70%, var(--kol-surface-primary)); }
+.kol-btn-outline:not(.kol-btn-animate):not(:disabled):not(.kol-dd-trigger):active,
+.kol-btn-ghost:not(.kol-btn-animate):not(:disabled):not(.kol-dd-trigger):active { background-color: var(--kol-oq-08); }
+.kol-btn-danger:not(.kol-btn-animate):not(:disabled):not(.kol-dd-trigger):active { background-color: color-mix(in srgb, var(--ui-error) 70%, var(--kol-surface-primary)); }
+.kol-btn-grey:not(.kol-btn-animate):not(:disabled):not(.kol-dd-trigger):active { background-color: var(--kol-oq-24); }
 
 .kol-btn:disabled,
 .kol-btn[disabled] {

package/kol-components-molecules.css

@@ -36,23 +36,27 @@
   gap: var(--kol-spacing-1);
   width: 100%;
 }
-/* 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: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);
-}
+/* THE TRIGGER IS ON THE ICON LADDER (DropdownHeightAndHover, kol-fxr 2026-08-28).
+ * A text button takes its height from padding — `.kol-btn-sm` is `4px 12px` on
+ * mono-12, about 24 — while every icon control beside it is PINNED
+ * (`.kol-btn-icon.kol-btn-sm` is 28×28, the 2026-07-28 law: "the box never
+ * moves"). So a `sm` Dropdown sat 4px short of the `IconFrame` and `ThemeToggle`
+ * on its own row — the picker-then-icon-cluster header that kol-r2b2 draws and
+ * the estate is copying. The trigger is the one text control that always sits in
+ * an icon row, so it takes the icon rungs: 28 / 32 / 36. Horizontal padding is
+ * untouched; the vertical goes, because the flex box centres the label. */
+.kol-dd-trigger.kol-btn-sm { height: 28px; padding-block: 0; }
+.kol-dd-trigger.kol-btn-md { height: 32px; padding-block: 0; }
+.kol-dd-trigger.kol-btn-lg { height: 36px; padding-block: 0; }
+/* REST AND OPEN ARE THE ONLY STATES (2026-07-15, re-called 2026-08-09 and
+ * 2026-08-28). No :hover or :active rules for the trigger live here any more —
+ * kol-components-atoms.css excludes `.kol-dd-trigger` from every variant's
+ * hover and press instead. The pin-backs that stood here restated each
+ * variant's REST colours to cancel the button's, and that failed twice: one
+ * went stale when `.kol-btn-outline`'s rest border moved (2026-08-26), and a
+ * pin-back out-specifies the tone, so a sunken trigger hovered into the
+ * untoned fill. "No state" is an absence now, not a mirror. */
+
 /* ONE PIECE MEANS ONE WIDTH (2026-08-09 user call — "they are connected").
  * 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
@@ -1263,14 +1267,8 @@
 .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); }
-/* 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); }
+/* the tone's fill, one selector — nothing left to cancel (2026-08-28) */
+.kol-dd-trigger.kol-tone-sunken, .kol-dd-trigger.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

package/package.json

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