@kolkrabbi/kol-component 0.176.0 → 0.177.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-component",
-  "version": "0.176.0",
+  "version": "0.177.0",
   "description": "KOL design-system components — atoms through organisms, emitting canonical kol-* classes. Pairs with @kolkrabbi/kol-theme for styling.",
   "license": "MIT",
   "type": "module",

package/src/atoms/Button.jsx

@@ -18,7 +18,7 @@ import { glyphSize } from '../hooks/glyphLadders.js'
  * @param {string} props.iconRight - Icon name to display on the right
  * @param {string} props.iconLeftHover - Icon to show on hover (left position)
  * @param {string} props.iconRightHover - Icon to show on hover (right position)
- * @param {'primary'|'secondary'|'outline'|'ghost'|'grey'|'sunken'} props.tone - the ground (tone-is-the-ground-axis, 2026-09-03) — wins over `variant` on the same element; unset = inherit the wrapper's. `sunken` = the control set's dark well + fg-96 ink (ControlToneSunken); `inverse` aliased
+ * @param {'primary'|'secondary'|'inverted'|'outline'|'ghost'|'grey'|'sunken'} props.tone - the ground (`secondary` = the page surface, `inverted` = the text colour as fill — what `variant="secondary"` paints) (tone-is-the-ground-axis, 2026-09-03) — wins over `variant` on the same element; unset = inherit the wrapper's. `sunken` = the control set's dark well + fg-96 ink (ControlToneSunken); `inverse` aliased
  * @param {string} props.iconOnly - Icon name for icon-only button
  * @param {string} props.iconOnlyHover - Icon to show on hover (icon-only)
  * @param {boolean} props.animateIcon - Disable default hover states to focus on icon animation

package/src/organisms/ContentFilters.jsx

@@ -265,7 +265,8 @@ const ContentFilters = ({
     /* THE LAW (user ruling 2026-08-27, said "for the 10th time" — ContentFiltersFirstGroupHugs,
      * its WIDTH overruled the same day — ContentFiltersFirstGroupFixedWidth, kol-monitor: "nope
      * not hug, fix a size … if columns, maybe just use one?"): THE FIRST FILTER GROUP IS ONE
-     * CATALOG COLUMN WIDE — `.kol-filters-first` (kol-theme): `(100cqw − 120px) / 6`, the `1fr`
+     * CATALOG COLUMN WIDE — `.kol-filters-first` (kol-theme): one track of the catalog grid AT THE
+     * COUNT IT RENDERS (theme ≥0.137.0 — was `(100cqw − 120px) / 6`, true only at six tracks), the `1fr`
      * of the catalog's `repeat(6, 1fr)` gap 24, measured on the header row as a container so
      * the count/strip beside the groups never narrows it. It sits over the first card; EVERY
      * GROUP AFTER IT FLOWS across the rest of the row, starting over the second. By POSITION,

package/src/utilities/tone.js

@@ -2,7 +2,12 @@
  * toneClass — the control set's TONE, six values (tone-is-the-ground-axis,
  * kol-client-olina 2026-09-03; the six-tone list is the user's).
  *
- *   primary · secondary · outline · ghost · grey · sunken
+ *   primary · secondary · inverted · outline · ghost · grey · sunken
+ *
+ * `secondary` paints the PAGE SURFACE and `inverted` the text colour as fill
+ * (tone-secondary-is-inverse, 2026-09-03; user: "that tone should be called
+ * secondary. What is currently secondary should be called inverted") — 0.134.0
+ * had lifted `secondary` from Button's variant, which was already an inverse.
  *
  * A tone is a ground-and-ink bundle — `--kol-tone-*` custom properties in
  * kol-theme (kol-components-molecules.css, TONE) that every control paints
@@ -13,9 +18,10 @@
  *
  * `inverse` is `sunken`'s alias (0.117.0's name — ControlToneSunken,
  * kol-website 2026-08-28; user ruling: the control does not invert anything,
- * it sits BELOW the plane it is on).
+ * it sits BELOW the plane it is on) — NOT `inverted`; one kol-website call
+ * still passes it, and it drops when that moves.
  */
-export const TONES = ['primary', 'secondary', 'outline', 'ghost', 'grey', 'sunken']
+export const TONES = ['primary', 'secondary', 'inverted', 'outline', 'ghost', 'grey', 'sunken']
 
 export const toneClass = (tone) =>
   tone === 'inverse' ? 'kol-tone-sunken' : TONES.includes(tone) ? `kol-tone-${tone}` : ''