@kolkrabbi/kol-component 0.119.0 → 0.121.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-component",
-  "version": "0.119.0",
+  "version": "0.121.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

@@ -1,4 +1,5 @@
 import { isValidElement } from 'react'
+import { toneClass } from '../utilities/tone.js'
 import { Icon } from '@kolkrabbi/kol-icons'
 import { glyphSize } from '../hooks/glyphLadders.js'
 
@@ -17,6 +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 {'default'|'sunken'} props.tone - `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
@@ -58,6 +60,7 @@ const Button = ({
   selected = false,
   iconComponent,
   pressed,
+  tone = 'default',
   ...props
 }) => {
   // Two ladders, split on whether a label sits beside the glyph. An icon-only
@@ -117,7 +120,11 @@ const Button = ({
   // The rule for `full` is shared with .kol-icon-frame-radius-full, one
   // selector, so the two controls can never disagree on the value.
   const radiusClass   = radius === 'full' ? 'kol-btn-radius-full' : ''
-  const combinedClass = `kol-btn ${variantClass} ${sizeClass} ${animateClass} ${quietClass} ${pressedClass} ${iconOnlyClass} ${radiusClass} ${className}`.trim().replace(/\s+/g, ' ')
+  /* `tone="sunken"` (ControlToneSunken, 2026-08-28): the dark well + fg-96 ink of the control set, so an
+   * icon-only button beside a sunken Dropdown is declared, not painted (kol-website hand-wrote the fill
+   * AND guessed the ink — the secondary's dark ink vanished on the forced dark fill). Theme rules. */
+  const toneCls       = toneClass(tone)
+  const combinedClass = `kol-btn ${variantClass} ${sizeClass} ${animateClass} ${quietClass} ${pressedClass} ${iconOnlyClass} ${radiusClass} ${toneCls} ${className}`.trim().replace(/\s+/g, ' ')
 
   // Render icon with optional hover state
   const renderIcon = (iconName, iconHoverName) => {

package/src/atoms/IconFrame.jsx

@@ -1,5 +1,6 @@
 import { Icon } from '@kolkrabbi/kol-icons'
 import { SOLO } from '../hooks/glyphLadders.js'
+import { toneClass } from '../utilities/tone.js'
 
 /**
  * IconFrame — a STATIC square frame holding one icon.
@@ -83,13 +84,15 @@ export default function IconFrame({
   iconSize = null,
   onClick,
   href,
+  tone = 'default',
   className = '',
   ...rest
 }) {
   if (!name) return null
   const radiusCls = radius === 'full' ? ' kol-icon-frame-radius-full' : ''
   const resolvedIconSize = iconSize ?? GLYPH[size] ?? GLYPH.md
-  const cls = `kol-icon-frame kol-icon-frame-${variant} kol-icon-frame-${size}${radiusCls} ${className}`.trim()
+  /* `tone="sunken"` (ControlToneSunken, 2026-08-28) — the control set's dark well + fg-96 ink, no states, as ever */
+  const cls = `kol-icon-frame kol-icon-frame-${variant} kol-icon-frame-${size}${radiusCls} ${toneClass(tone)} ${className}`.replace(/\s+/g, ' ').trim()
   const glyph = <Icon name={name} size={resolvedIconSize} />
 
   /* The element follows the affordance, and the CLASS is identical in all three

package/src/atoms/Input.jsx

@@ -1,4 +1,5 @@
 import { Icon } from '@kolkrabbi/kol-icons'
+import { toneClass } from '../utilities/tone.js'
 import { glyphSize } from '../hooks/glyphLadders.js'
 
 /**
@@ -90,7 +91,7 @@ export default function Input({
     SIZE_TYPE[size],
     'cursor-text',
     /* the dark chip on a washed plane (ControlToneInverse, kol-website 2026-08-27) */
-    tone === 'inverse' && 'kol-tone-inverse',
+    toneClass(tone),
     isProperty && 'w-full',
     className,
   ].filter(Boolean).join(' ')

package/src/atoms/ViewToggle.jsx

@@ -1,4 +1,5 @@
 import { Icon } from '@kolkrabbi/kol-icons'
+import { toneClass } from '../utilities/tone.js'
 
 /**
  * ViewToggle — control for switching between view modes.
@@ -19,7 +20,10 @@ import { Icon } from '@kolkrabbi/kol-icons'
  * 14px). For `variant="single"`, the FIRST option in `options` is the "off"
  * value; the SECOND is "on".
  *
- * `tone="inverse"` (ControlToneInverse, kol-website 2026-08-27 — user: "a
+ * `tone="sunken"` — `inverse` is its alias since 0.120.0 (ControlToneSunken,
+ * 2026-08-28: the control does not invert, it sits BELOW its plane; the
+ * active chip is `fg-08` now, down from `fg-16`). As first ruled:
+ * (ControlToneInverse, kol-website 2026-08-27 — user: "a
  * flipped version of this color scheme, where the darker is background and grey
  * is the active … it would fit better on the light grey"): on a washed plane
  * (`pageWash`, `fg-04`) the default grey well reads as a second plate, so the
@@ -70,7 +74,7 @@ const ViewToggle = ({
   }
 
   const containerClasses = isIconVariant
-    ? `kol-view-toggle inline-flex items-center gap-1 p-1 bg-surface-secondary rounded ${tone === 'inverse' ? 'kol-tone-inverse' : ''} ${className}`.replace(/\s+/g, ' ').trim()
+    ? `kol-view-toggle inline-flex items-center gap-1 p-1 bg-surface-secondary rounded ${toneClass(tone)} ${className}`.replace(/\s+/g, ' ').trim()
     : `flex gap-2 ${className}`
 
   const buttonClasses = (isActive) => {

package/src/molecules/ContentCard.jsx

@@ -44,8 +44,11 @@ const BOX = {
    * like I've said that before" — the ListingCardThumbBorder ruling): the selected
    * state reads from the checked ToggleCheckbox, not a fg-64 border */
   default:  { layout: 'stack', border: null, bg: 'var(--kol-fg-02)', pad: 'var(--kol-pad-card-sm)' },
-  /* frameHover: the frame steps fg-04 → fg-16 on hover (ShellHomeSystem, 2026-08-27 — the tertiary fill alone drowned the fg-04 border) */
-  catalog:  { layout: 'fill-card', border: 'var(--kol-fg-04)', bg: 'var(--kol-fg-04)', pad: 'var(--kol-pad-card-sm) var(--kol-pad-card-md)', plateTop: true, plateBg: 'var(--kol-surface-primary)', frameHover: 'var(--kol-fg-16)' },
+  /* THE FRAME READS BACKWARDS (CatalogCardFrameAndZoom, kol-website 2026-08-28 — user, on a 212-tile
+   * grid: no frame at rest; the old rest value is the hover): a wall of fg-04 frames is a grid of boxes,
+   * louder than what they hold. Rest `transparent` (the 1px stays, so the hover step never relayouts),
+   * hover fg-04. Was fg-04 → fg-16 (ShellHomeSystem, 2026-08-27). */
+  catalog:  { layout: 'fill-card', border: 'transparent', bg: 'var(--kol-fg-04)', pad: 'var(--kol-pad-card-sm) var(--kol-pad-card-md)', plateTop: true, plateBg: 'var(--kol-surface-primary)', frameHover: 'var(--kol-fg-04)' },
   /* flip: PrintGridCard's 3D turn on `isFlipped` → `selected` (ContentRowsAndPrintCard, 2026-08-27) */
   print:    { layout: 'fill-card', border: null, bg: 'var(--kol-surface-secondary)', pad: 'var(--kol-pad-card-sm) var(--kol-pad-card-md)', plateTop: true, flip: true },
   article:  { layout: 'stack', border: null, bg: null, pad: '0', mediaGap: 'var(--kol-spacing-4)' },
@@ -106,6 +109,9 @@ export default function ContentCard({
   frame,
   ring,
   zoom,
+  /* plateRule (CatalogCardFrameAndZoom): the plate's top hairline — default the variant's (catalog and
+   * print draw it); `false` turns it off without an `!important` in a consumer sheet */
+  plateRule,
   control,
   controlStart,
   reveal,
@@ -162,7 +168,7 @@ export default function ContentCard({
         '--kol-plate-pad-md': box.padMd,
         padding,
         marginTop: box.layout === 'stack' ? box.mediaGap : undefined,
-        borderTop: box.plateTop ? '1px solid var(--kol-fg-04)' : undefined,
+        borderTop: (plateRule ?? box.plateTop) ? '1px solid var(--kol-fg-04)' : undefined,
         background: box.layout === 'drawer' ? 'var(--kol-surface-inverse)' : box.plateBg,
         color: box.layout === 'drawer' ? 'var(--kol-fg-inverse)' : undefined,
         position: 'relative',

package/src/molecules/ContentMedia.jsx

@@ -72,7 +72,9 @@ import AssetPlaceholder from '../utilities/AssetPlaceholder.jsx'
  *                              floating in a tall row.
  * @param {boolean}   fade      an <img> child fades in on load (500ms, house curve) and
  *                              takes loading="lazy" — PrintGridCard's move (2026-08-27)
- * @param {ReactNode} children  the real media
+ * @param {ReactNode} children  the real media — ANY element: the zoom scales the wrapper's child
+ *                              whatever it is (CatalogCardFrameAndZoom, 2026-08-28 — a glyph on a
+ *                              specimen plate got the class and no motion while the rule named img/video)
  */
 const FIT = {
   /* a consumer WRAPPER div fills the frame as an img/video does (ColumnBrowser round, 2026-08-27 — kol-r2b2's wrapped thumb fell back to the image's intrinsic size) */
@@ -129,7 +131,7 @@ export default function ContentMedia({
       {fade ? withFade(children) : children}
       {/* OVER the artwork, and inert — a hairline that must not eat the click
         * the card above it is listening for. */}
-      {ring && <div className={`pointer-events-none absolute inset-0 border border-fg-08 ${round}`} />}
+      {ring && <div className={`kol-media-ring pointer-events-none absolute inset-0 border border-fg-08 ${round}`} />}
     </div>
   )
 }

package/src/molecules/Dropdown.jsx

@@ -1,4 +1,5 @@
 import { useEffect, useRef, useState } from 'react'
+import { toneClass } from '../utilities/tone.js'
 import { Icon } from '@kolkrabbi/kol-icons'
 import { MenuDropdownItem } from './MenuItem.jsx'
 import { PopoverPanel, usePopover } from '../utilities/Popover.jsx'
@@ -103,7 +104,7 @@ const Dropdown = ({
     'kol-dd-trigger',
     isOpen && 'kol-dd-trigger--open',
     /* the dark chip on a washed plane; the panel continues it (ControlToneInverse, 2026-08-27) */
-    tone === 'inverse' && 'kol-tone-inverse',
+    toneClass(tone),
   ].filter(Boolean).join(' ')
 
   return (
@@ -137,7 +138,7 @@ const Dropdown = ({
         popover={popover}
         panel={false}
         focus={false}
-        className={`kol-dd-panel kol-dd-panel--${resolvedVariant} ${tone === 'inverse' ? 'kol-tone-inverse' : ''}`.trim()}
+        className={`kol-dd-panel kol-dd-panel--${resolvedVariant} ${toneClass(tone)}`.trim()}
       >
         {(resolvedVariant === 'primary' || resolvedVariant === 'grey') && <div className="kol-dd-div" />}
 

package/src/molecules/SearchInput.jsx

@@ -1,4 +1,5 @@
 import { useEffect, useRef, useState } from 'react'
+import { toneClass } from '../utilities/tone.js'
 import { Icon } from '@kolkrabbi/kol-icons'
 import { glyphSize } from '../hooks/glyphLadders.js'
 
@@ -156,7 +157,7 @@ export default function SearchInput({
            control: sm 28 · md 32 · lg 36 (hooks/glyphLadders.js). This was a
            hardcoded 36 — the LG square — so an expanding search sat beside a
            `kol-btn-md` filter button at two different sizes. */
-        className={`kol-expand flex items-center rounded-full ${isOpen ? (tone === 'inverse' ? 'kol-tone-inverse' : 'bg-fg-04') : ''} ${className}`.trim()}
+        className={`kol-expand flex items-center rounded-full ${isOpen ? (toneClass(tone) ? 'kol-tone-sunken' : 'bg-fg-04') : ''} ${className}`.trim()}
         style={{ height: isOpen ? fieldH : square, width: isOpen ? expandedWidth : square }}
       >
         {/* THE GLYPH IS THE CLOSED STATE, and only that (user ruling
@@ -198,7 +199,7 @@ export default function SearchInput({
   const shellCls = [
     bare
       ? 'flex w-full gap-2.5 px-4 py-3'
-      : `kol-control kol-control--${variant} kol-control-${size} gap-2${tone === 'inverse' ? ' kol-tone-inverse' : ''}`,
+      : `kol-control kol-control--${variant} kol-control-${size} gap-2${toneClass(tone) ? ' kol-tone-sunken' : ''}`,
     'items-center cursor-text',
     SIZE_TYPE[size],
     className,

package/src/utilities/tone.js

@@ -0,0 +1,8 @@
+/**
+ * toneClass — the control set's ONE sunken tone (ControlToneSunken,
+ * kol-website 2026-08-28; user ruling: it is not "inverse" — the control does
+ * not invert anything, it sits BELOW the plane it is on — call it `sunken`).
+ * `inverse` (0.117.0's name) is an alias: every consumer on it renders the same
+ * pixel. The rules are kol-theme's `.kol-tone-sunken`.
+ */
+export const toneClass = (tone) => (tone === 'sunken' || tone === 'inverse' ? 'kol-tone-sunken' : '')