@kolkrabbi/kol-theme 0.30.2 → 0.31.0

package/kol-components-molecules.css

@@ -22,6 +22,67 @@
   z-index: 110;
 }
 
+/* ── Dropdown — .kol-dd-* ─────────────────────────────────────────────────
+ * IMPLEMENTED 2026-08-09. Dropdown.jsx stamped these classes and the docs
+ * page recorded their contract (2026-07-08 chrome law) — but no stylesheet
+ * ever carried them, so triggers rendered gapless bare buttons at whatever
+ * width a resize listener guessed. The trigger IS button chrome (kol-btn
+ * rules own fill/focus); these add ONLY trigger layout + the open/panel
+ * fusion. No hover, no clicked state (2026-07-15 ruling) — rest and open. */
+.kol-dd-trigger {
+  justify-content: space-between;
+  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 {
+  background: var(--kol-surface-secondary);
+  color: var(--kol-surface-on-primary);
+}
+.kol-dd-trigger.kol-btn-outline:hover {
+  background: transparent;
+  color: var(--kol-surface-on-primary);
+  border-color: var(--kol-oq-16);
+}
+/* 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
+ * matchReferenceWidth — is exactly as wide as the trigger at every value. */
+.kol-dd-label { display: inline-grid; min-width: 0; }
+.kol-dd-label > span { grid-area: 1 / 1; white-space: nowrap; }
+.kol-dd-ghost { visibility: hidden; }
+.kol-dd-caret {
+  flex-shrink: 0;
+  transition: rotate var(--kol-transition-base);
+}
+.kol-dd-trigger[data-state="open"] .kol-dd-caret { rotate: 180deg; }
+/* grey — the opaque oq-12 fill, dropdown-only (never a kol-btn-* variant) */
+.kol-dd-trigger--grey {
+  background: var(--kol-oq-12);
+  color: var(--kol-surface-on-primary);
+  border: 1px solid transparent;
+}
+/* open/panel fusion — the open trigger and its panel read as ONE piece:
+ * 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; }
+.kol-dd-panel {
+  border-radius: 0 0 var(--kol-radius-sm) var(--kol-radius-sm);
+  overflow: hidden;
+}
+.kol-dd-panel--primary { background: var(--kol-surface-secondary); }
+.kol-dd-panel--grey    { background: var(--kol-oq-12); }
+.kol-dd-panel--outline {
+  background: var(--kol-surface-primary);
+  border: 1px solid var(--kol-oq-16);
+  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); }
+
 /* Popover — default chrome for floating-ui-positioned panels.
  * Used by molecules/Popover.jsx PopoverPanel. */
 .kol-popover {

package/kol-components-organisms.css

@@ -164,29 +164,17 @@
 .kol-table-pill-dark  { background-color: var(--kol-surface-on-primary); color: var(--kol-surface-primary); }
 
 .kol-table-token {
+  /* THE LOOK LIVES IN ONE PLACE (2026-08-09) — the shared chip recipe in
+   * kol-type-roles.css (`.kol-prose code, .kol-doc-code-inline,
+   * .kol-table-token`): font, size, weight, colour, fill, padding, radius.
+   * This rule keeps only the CELL mechanics the prose chip must not have. */
   display: inline-flex;
   align-items: center;
-  padding: 2px 4px;
   /* No outer margin: spacing is the CONTAINER's job. The margin here
    * double-spaced against every flex row's own gap, which is the ragged
    * rhythm the metadata rows showed. */
-  /* Radius is the shared chip radius, not a literal (2026-08-01). This one
-   * value was the last thing making a table token and a prose inline code chip
-   * read as two different objects — see the inline-code block in
-   * kol-type-roles.css, which owns the shared fill/radius/colour answer. */
-  border-radius: var(--kol-radius-sm);
-  font-family: var(--kol-font-family-mono);
-  font-size: 0.75rem;
-  font-weight: 400;
   line-height: 1;
   white-space: nowrap;
-  /* Carries its OWN fill as of 2026-08-01. The look lived only in the
-   * `.kol-table code` descendant rule below, so a token chip rendered right
-   * inside a table and completely unstyled anywhere else — which is why the
-   * component pages hand-rolled a Tailwind lookalike. One concept, two
-   * spellings: exactly the drift `.text-fg-*` vs `--kol-fg-*` taught. */
-  color: var(--kol-fg-80);
-  background-color: var(--kol-fg-08);
 }
 
 .kol-table-wrapper.kol-table--simple { border: none; border-radius: 0; }
@@ -207,14 +195,10 @@
 .kol-table th:last-child,
 .kol-table td:last-child { border-right: none; }
 
-.kol-table code {
-  font-family: var(--kol-font-family-mono);
-  font-size: 11px;
-  color: var(--kol-fg-80);
-  padding: 2px 5px;
-  background-color: var(--kol-fg-08);
-  border-radius: 3px;
-}
+/* `.kol-table code` — the THIRD spelling of the inline chip, found and folded
+ * 2026-08-09 (an off-scale font size and a bare radius literal). A bare
+ * <code> in a cell now takes the ONE recipe in kol-type-roles.css beside
+ * .kol-doc-code-inline and .kol-table-token. */
 
 .kol-table a {
   color: var(--kol-link);

package/kol-type-roles.css

@@ -117,16 +117,23 @@
  * The two chips had drifted on every value that makes them look alike: fg-04
  * against fg-08, radius-sm against a bare literal, no colour against fg-80.
  * Same concept, two spellings — the `.text-fg-*` vs `--kol-fg-*` lesson again.
- * FILL, RADIUS and COLOUR are now one answer; size and padding stay per role,
- * because relative-in-prose and fixed-in-chrome is a real difference. */
+ * ONE RECIPE NOW, size and padding included (user ruling 2026-08-09: "it's
+ * basically the same style, so why are they so different"). The earlier
+ * size-and-padding-stay-per-role line — relative-in-prose vs fixed-in-chrome
+ * — is reversed: the chip is CHROME wherever it appears, and it takes the
+ * chrome numbers (the table token's shipped values, not the prose em). Only
+ * wrap behaviour stays per context: prose chips wrap mid-phrase, the table
+ * token stays single-line — that lives in the organisms sheet. */
 .kol-prose code,
-.kol-doc-code-inline {
+.kol-doc-code-inline,
+.kol-table-token,
+.kol-table code {
   font-family: var(--kol-font-family-mono);
-  font-size: 0.875em;
+  font-size: 0.75rem;
   font-weight: 400;
   color: var(--kol-fg-80);
   background: var(--kol-fg-08);
-  padding: 0.1em 0.35em;
+  padding: 2px var(--kol-spacing-1);
   border-radius: var(--kol-radius-sm);
 }
 /* code inside pre stays stripped (rule preserved from the prose sheet) */

package/package.json

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