@kolkrabbi/kol-component 0.115.0 → 0.117.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-component",
-  "version": "0.115.0",
+  "version": "0.117.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/Input.jsx

@@ -8,6 +8,8 @@ import { glyphSize } from '../hooks/glyphLadders.js'
  *   variant="outline"          — bordered, transparent bg — THE secondary
  *                                treatment (2026-07-08 chrome law: one
  *                                secondary, always subordinate to filled)
+ *   tone="inverse"             — the dark chip (`fg-absolute-24`) for a washed plane
+ *                                (ControlToneInverse, 2026-08-27); same prop on ViewToggle · Dropdown
  *   variant="ghost"            — legacy alias, resolves to outline
  *   variant="property"         — the Figma property field (PropertyField,
  *                                2026-08-12): filled chrome, dim `affordance`
@@ -50,6 +52,7 @@ export default function Input({
   value,
   onChange,
   variant = 'filled',
+  tone = 'default',
   size = 'md',
   chars,
   prefix,
@@ -86,6 +89,8 @@ export default function Input({
     `kol-control-${size}`,
     SIZE_TYPE[size],
     'cursor-text',
+    /* the dark chip on a washed plane (ControlToneInverse, kol-website 2026-08-27) */
+    tone === 'inverse' && 'kol-tone-inverse',
     isProperty && 'w-full',
     className,
   ].filter(Boolean).join(' ')

package/src/atoms/ViewToggle.jsx

@@ -18,6 +18,15 @@ import { Icon } from '@kolkrabbi/kol-icons'
  * icon cut for variant="icon" ('stroke' default; 'solid' reads better at
  * 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
+ * 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
+ * icon variant's two values swap — the well takes the dark chip
+ * (`fg-absolute-24`), the active chip a lighter grey (`surface-tertiary` —
+ * user: "the active grey can be lighter"), the inactive hover a lighter wash. Theme rules on `.kol-tone-inverse`
+ * (kol-theme ≥0.78.0); the same prop on `Dropdown` and `Input`.
  */
 const ViewToggle = ({
   size = 'sm',
@@ -25,6 +34,7 @@ const ViewToggle = ({
   onViewChange,
   variant = 'text',
   iconVariant = 'stroke',
+  tone = 'default',
   options = [
     { value: 'grid', label: 'Grid view', icon: 'grid' },
     { value: 'list', label: 'List view', icon: 'view-list' }
@@ -60,7 +70,7 @@ const ViewToggle = ({
   }
 
   const containerClasses = isIconVariant
-    ? `inline-flex items-center gap-1 p-1 bg-surface-secondary rounded ${className}`
+    ? `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()
     : `flex gap-2 ${className}`
 
   const buttonClasses = (isActive) => {

package/src/molecules/Dropdown.jsx

@@ -16,6 +16,9 @@ import { indicatorSize } from '../hooks/glyphLadders.js'
  *     same fill (one piece: no border, no gap, hairline divider inside)
  *   variant="grey"              — oq-12 filled trigger (opaque per the fill
  *                                 law); panel continues it
+ *   tone="inverse"              — the dark chip (`fg-absolute-24`) for a washed
+ *                                 plane, the panel continuing it (ControlToneInverse,
+ *                                 kol-website 2026-08-27); same prop on ViewToggle · Input
  *   variant="outline"           — bordered trigger; open panel carries the
  *     same border, trigger's bottom edge acts as the divider
  *
@@ -42,6 +45,7 @@ const Dropdown = ({
   onChange,
   size,
   variant = 'primary',
+  tone = 'default',
   defaultOpen = false,
   className = ''
 }) => {
@@ -98,6 +102,8 @@ const Dropdown = ({
     SIZE_TYPE[resolvedSize],
     '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',
   ].filter(Boolean).join(' ')
 
   return (
@@ -131,7 +137,7 @@ const Dropdown = ({
         popover={popover}
         panel={false}
         focus={false}
-        className={`kol-dd-panel kol-dd-panel--${resolvedVariant}`}
+        className={`kol-dd-panel kol-dd-panel--${resolvedVariant} ${tone === 'inverse' ? 'kol-tone-inverse' : ''}`.trim()}
       >
         {(resolvedVariant === 'primary' || resolvedVariant === 'grey') && <div className="kol-dd-div" />}
 

package/src/molecules/SearchInput.jsx

@@ -34,6 +34,7 @@ import { glyphSize } from '../hooks/glyphLadders.js'
  * @param {Function} onFocus      (event) => void — input focus
  * @param {string}   size         'sm' | 'md' — kol-control size + matched mono type class
  * @param {string}   variant      'filled' | 'ghost' | 'outline' — kol-control variant, same chrome as Input (ignored when bare/expanding)
+ * @param {string}   tone         'default' | 'inverse' — the dark chip for a washed plane (ControlToneInverse, 2026-08-27); on the expanding pill it is the OPEN fill
  * @param {boolean}  bare         borderless inline field for overlay panels (full width, no shell chrome; keeps icon/clear/chip slots)
  * @param {boolean}  expanding    round icon-button pill that animates open into an inline field
  * @param {boolean}  open         (expanding) controlled open state; omit for internal state
@@ -76,6 +77,7 @@ export default function SearchInput({
   onFocus,
   size = 'md',
   variant = 'filled',
+  tone = 'default',
   bare = false,
   expanding = false,
   open,
@@ -154,7 +156,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 ? 'bg-fg-04' : ''} ${className}`.trim()}
+        className={`kol-expand flex items-center rounded-full ${isOpen ? (tone === 'inverse' ? 'kol-tone-inverse' : '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
@@ -196,7 +198,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`,
+      : `kol-control kol-control--${variant} kol-control-${size} gap-2${tone === 'inverse' ? ' kol-tone-inverse' : ''}`,
     'items-center cursor-text',
     SIZE_TYPE[size],
     className,

package/src/organisms/ContentFilters.jsx

@@ -56,8 +56,11 @@ import IconFrame from '../atoms/IconFrame.jsx'
  * @param {string}  props.stripActiveClassName — strip ink, selected (both strips)
  * @param {string}  props.stripRestClassName  — strip ink, unselected (both strips)
  * @param {string}  props.countClassName      — the "N of N" type/ink
+ * @param {string}  props.tone                — 'default' | 'inverse' — forwarded to the search field (ControlToneInverse,
+ *                                              2026-08-27): a page on a wash sets its header row's tone in one place
  */
 const ContentFilters = ({
+  tone = 'default',
   items,
   title,
   totalCount,
@@ -371,6 +374,7 @@ const ContentFilters = ({
               * shows while searching); SearchInput takes it controlled. */}
             <SearchInput
               expanding
+              tone={tone}
               open={searchOpen}
               onOpenChange={(next) => { setSearchOpen(next); if (!next) setSearchText('') }}
               value={searchText}

package/src/organisms/ShellSearchOverlay.jsx

@@ -131,7 +131,7 @@ export default function ShellSearchOverlay({
   }
 
   return (
-    <div className="fixed inset-0 z-[300] flex items-start justify-center pt-[20vh]">
+    <div className="fixed inset-0 flex items-start justify-center pt-[20vh]" style={{ zIndex: 'var(--kol-z-modal, 100)' }}>
       <div
         className="absolute inset-0 kol-overlay-scrim"
         onClick={onClose}