@kolkrabbi/kol-component 0.128.0 → 0.129.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-component",
-  "version": "0.128.0",
+  "version": "0.129.0",
   "description": "KOL design-system components — atoms through organisms, emitting canonical kol-* classes. Pairs with @kolkrabbi/kol-theme for styling.",
   "license": "MIT",
   "type": "module",
@@ -36,7 +36,7 @@
     "react-router-dom": "^6.0.0 || ^7.0.0"
   },
   "devDependencies": {
-    "@kolkrabbi/kol-icons": "^0.24.0"
+    "@kolkrabbi/kol-icons": "^0.25.0"
   },
   "files": [
     "src",

package/src/atoms/Input.jsx

@@ -9,7 +9,7 @@ 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
+ *   tone="inverse"             — the dark chip (`fg-ab-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,

package/src/atoms/ViewToggle.jsx

@@ -7,7 +7,7 @@ import { toneClass } from '../utilities/tone.js'
  *   variant="text"   — segmented bare buttons; active uses kol-control--filled,
  *                      inactive is bare text-meta with text-emphasis on hover.
  *   variant="icon"   — bordered chip-row container holding square icon
- *                      buttons. Active uses bg-fg-absolute-24.
+ *                      buttons. Active uses bg-fg-ab-24.
  *   variant="single" — single button binary toggle. Click flips between the
  *                      two `options` values. The button shows the *current*
  *                      option's label; active = on (kol-control--filled),
@@ -28,7 +28,7 @@ import { toneClass } from '../utilities/tone.js'
  * 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 the `fg-16` ink wash (user, on the live
+ * (`fg-ab-24`), the active chip the `fg-16` ink wash (user, on the live
  * page: "just use bg-fg-16"), the inactive hover a lighter wash. Theme rules on `.kol-tone-inverse`
  * (kol-theme ≥0.78.0); the same prop on `Dropdown` and `Input`.
  */
@@ -84,10 +84,10 @@ const ViewToggle = ({
   const buttonClasses = (isActive) => {
     if (isIconVariant) {
       // Inset "well" pattern — container is bg-fg-04 (slight lift from page),
-      // active button uses bg-fg-absolute-24 (theme-invariant black, always
+      // active button uses bg-fg-ab-24 (theme-invariant black, always
       // darkens regardless of theme) so it reads as recessed/pressed.
       return `inline-flex items-center justify-center p-1.5 rounded transition-colors text-emphasis cursor-pointer ${
-        isActive ? 'bg-fg-absolute-24' : 'hover:bg-fg-absolute-08'
+        isActive ? 'bg-fg-ab-24' : 'hover:bg-fg-ab-08'
       }`
     }
     /* Active = filled chip. Inactive = bare-text on the shell base — no

package/src/molecules/AudioSheet.jsx

@@ -22,7 +22,7 @@ function useCover(src) {
  *
  *   cover  the same as VideoSheet — the artwork is the frame (`w-[min(78vh,100vw_-_10rem)]`,
  *          square), the bar floating over its bottom edge (inset 16, radius 12)
- *   sheet  the QuickTime window — a dark plate (`bg-fg-absolute-88`, `min(100vw − 10rem, 1000px)`),
+ *   sheet  the QuickTime window — a dark plate (`bg-fg-ab-88`, `min(100vw − 10rem, 1000px)`),
  *          the cover square left, `Time: mm:ss` beside it, the bar flush along the bottom
  *
  * Artwork = the file's embedded ID3 `APIC` cover (`readCover`); no cover → a light
@@ -39,14 +39,14 @@ export default function AudioSheet({ src, onDuration, variant = 'cover' }) {
   const audio = <audio ref={ref} src={src} autoPlay preload="metadata" {...handlers} />
   const art = cover
     ? <img src={cover} alt="" className="w-full h-full object-cover" />
-    : <div className="w-full h-full flex items-center justify-center bg-absolute-white text-fg-absolute-32"><Icon name="music-note" size={64} /></div>
+    : <div className="w-full h-full flex items-center justify-center bg-ab-white text-fg-ab-32"><Icon name="music-note" size={64} /></div>
 
   if (variant === 'sheet') return (
-    <div className="relative w-[min(100vw_-_10rem,1000px)] rounded overflow-hidden bg-fg-absolute-88">
+    <div className="relative w-[min(100vw_-_10rem,1000px)] rounded overflow-hidden bg-fg-ab-88">
       {audio}
       <div className="flex items-center gap-16 p-10 pb-24">
         <div className="w-[min(50vh,380px)] aspect-square shrink-0 overflow-hidden">{art}</div>
-        <span className="kol-mono-16 text-absolute-white"><span className="opacity-48">Time: </span><b className="opacity-80">{clock(bar.duration)}</b></span>
+        <span className="kol-mono-16 text-ab-white"><span className="opacity-48">Time: </span><b className="opacity-80">{clock(bar.duration)}</b></span>
       </div>
       <PlaybackBar {...bar} place="left-0 right-0 bottom-0" />
     </div>

package/src/molecules/ColorInputRow.jsx

@@ -116,7 +116,7 @@ export default function ColorInputRow({
       {chip('stretch')}
       <span
         aria-hidden="true"
-        className={`absolute inset-0 inline-flex items-center justify-center rounded-[var(--kol-radius-xs)] transition-opacity bg-fg-absolute-48 text-white pointer-events-none ${
+        className={`absolute inset-0 inline-flex items-center justify-center rounded-[var(--kol-radius-xs)] transition-opacity bg-fg-ab-48 text-white pointer-events-none ${
           locked ? 'opacity-100' : 'opacity-0 group-hover:opacity-100'
         }`}
       >

package/src/molecules/Dropdown.jsx

@@ -17,7 +17,7 @@ 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
+ *   tone="inverse"              — the dark chip (`fg-ab-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

package/src/molecules/MediaCard.jsx

@@ -27,7 +27,7 @@ export function SelectIndicator({ on = false }) {
       style={
         on
           ? { background: 'var(--kol-surface-on-primary)', borderColor: 'var(--kol-surface-on-primary)' }
-          : { background: 'var(--kol-fg-absolute-16, rgba(0,0,0,0.15))', borderColor: 'var(--kol-fg-absolute-48, rgba(0,0,0,0.4))' }
+          : { background: 'var(--kol-fg-ab-16, rgba(0,0,0,0.15))', borderColor: 'var(--kol-fg-ab-48, rgba(0,0,0,0.4))' }
       }
       aria-hidden="true"
     >
@@ -76,7 +76,7 @@ export default function MediaCard({
         {selectMode ? (
           <span
             className="kol-frame-control kol-frame-control--top-left rounded p-1"
-            style={{ background: 'var(--kol-fg-absolute-12, rgba(0,0,0,0.4))', backdropFilter: 'blur(4px)' }}
+            style={{ background: 'var(--kol-fg-ab-12, rgba(0,0,0,0.4))', backdropFilter: 'blur(4px)' }}
           >
             <SelectIndicator on={selected} />
           </span>
@@ -85,8 +85,8 @@ export default function MediaCard({
             href={downloadHref}
             aria-label="Download"
             title="Download"
-            className="kol-frame-control inline-flex items-center justify-center w-8 h-8 rounded text-emphasis hover:bg-fg-absolute-24 transition-colors"
-            style={{ background: 'var(--kol-fg-absolute-12, rgba(0,0,0,0.4))', backdropFilter: 'blur(4px)' }}
+            className="kol-frame-control inline-flex items-center justify-center w-8 h-8 rounded text-emphasis hover:bg-fg-ab-24 transition-colors"
+            style={{ background: 'var(--kol-fg-ab-12, rgba(0,0,0,0.4))', backdropFilter: 'blur(4px)' }}
             onClick={(e) => e.stopPropagation()}
           >
             <Icon name="download" size={16} />

package/src/molecules/PlaybackBar.jsx

@@ -13,7 +13,7 @@ const RATES = [1, 1.5, 2]
 /**
  * PlaybackBar — the QuickTime bar, ruled against the reference (PlaybackBarAndAudioSheet,
  * kol-r2b2 2026-08-27; supersedes 0.107.0's strip): a frosted strip over media —
- * `bg-fg-absolute-48 backdrop-blur-xl`, **radius 12** (`rounded-xl`, the user's
+ * `bg-fg-ab-48 backdrop-blur-xl`, **radius 12** (`rounded-xl`, the user's
  * ruling on this surface — the 4px container law stands elsewhere), `h-16 px-8
  * gap-7` — white glyphs whatever the theme (`.kol-playback-bar`, kol-theme ≥0.75.0:
  * opacity .8, 1 on hover / focus-visible), the transport cluster (`skip-back-15` ·
@@ -44,7 +44,7 @@ export default function PlaybackBar({ playing, time, duration, rate = 1, onToggl
   const pop = usePopover({ open, onOpenChange: setOpen, placement: 'top' })
   const nextRate = RATES[(RATES.indexOf(rate) + 1) % RATES.length]
   return (
-    <div className={`kol-playback-bar absolute h-16 px-8 flex items-center gap-7 bg-fg-absolute-48 backdrop-blur-xl text-absolute-white ${place}`}>
+    <div className={`kol-playback-bar absolute h-16 px-8 flex items-center gap-7 bg-fg-ab-48 backdrop-blur-xl text-ab-white ${place}`}>
       <div className="flex items-center gap-5">
         <IconFrame name="skip-back-15" variant="ghost" size="sm" onClick={() => onSeek(time - 15)} aria-label="Back 15 seconds" />
         <IconFrame name={playing ? 'pause' : 'play'} variant="ghost" size="sm" onClick={onToggle} aria-label={playing ? 'Pause' : 'Play'} />

package/src/molecules/TiltBento.jsx

@@ -98,7 +98,7 @@ function Media({ src, poster, className }) {
  * @param {boolean}   alignRight     right-align the card (ms-auto) vs fill (size-full)
  * @param {boolean}   enableTilt     master tilt switch (default true)
  * @param {string}    titleClassName title classes — the family default is `kol-sans-heading-01
- *                                   text-absolute-white` (confirmed 2026-08-27; the fork's was
+ *                                   text-ab-white` (confirmed 2026-08-27; the fork's was
  *                                   heading-02 uppercase — a consumer wanting that passes it)
  * @param {string}    contentClassName inner content-box classes
  * @param {string}    imageClassName media fit/position classes
@@ -118,7 +118,7 @@ export default function TiltBento({
   overlayOpacity = 60,
   alignRight = false,
   enableTilt = true,
-  titleClassName = 'kol-sans-heading-01 text-absolute-white',
+  titleClassName = 'kol-sans-heading-01 text-ab-white',
   contentClassName = 'max-w-[384px]',
   imageClassName = 'object-cover object-center',
   contentStackClassName = 'relative z-20 h-full flex flex-col justify-start items-start gap-4 p-6 md:p-8',
@@ -173,8 +173,8 @@ export default function TiltBento({
             {/* kol-mono-14 — one rung above the mono-12 description, as the retired
               * fork drew it (TiltBentoVoiceAndDefaults, kol-website 2026-08-27: this
               * rode `kol-mono-text`, a class retired from the theme — zero rules emitted) */}
-            {subtitle && <p className={`kol-mono-14 text-absolute-white ${revealClass}`}>{subtitle}</p>}
-            {description && <p className={`kol-mono-12 text-absolute-white pb-6 ${revealClass}`}>{description}</p>}
+            {subtitle && <p className={`kol-mono-14 text-ab-white ${revealClass}`}>{subtitle}</p>}
+            {description && <p className={`kol-mono-12 text-ab-white pb-6 ${revealClass}`}>{description}</p>}
             {bodyContent}
             {href && (
               <div className={revealClass}>

package/src/organisms/MediaLibraryPages.jsx

@@ -192,7 +192,7 @@ function MediaInspector({ files, index, onClose, onPrev, onNext, mediaUrl, downl
   if (!o) return null
   const kind = kindOf(o)
   const poster = kind === 'video' ? posterFor(o.key, keySet) : null
-  const ARROW = 'fixed top-1/2 -translate-y-1/2 z-10 w-10 h-10 flex items-center justify-center rounded text-fg-48 hover:text-fg-default hover:bg-fg-absolute-24 transition-colors'
+  const ARROW = 'fixed top-1/2 -translate-y-1/2 z-10 w-10 h-10 flex items-center justify-center rounded text-fg-48 hover:text-fg-default hover:bg-fg-ab-24 transition-colors'
   return (
     <FullscreenOverlay open onClose={onClose} closeButton={false}>
       <button type="button" className={`${ARROW} left-6`} onClick={onPrev} disabled={files.length <= 1} aria-label="Previous"><Icon name="chevron-left" size={22} /></button>

package/src/organisms/SettingsPanel.jsx

@@ -150,10 +150,16 @@ export function LabeledControlSection({ label, divided = false, rowGap = 2, chil
 /** SettingsChoice — the row's one-of-N control: the DS Dropdown, sm · primary
  *  (SettingsPanelEyebrowAndDropdowns — user: "put the toggles inside a dropdown,
  *  because it's super messy like it is"). Options are values or `{ value, label }`;
- *  width is the call site's (`className="w-40"`). */
-export function SettingsChoice({ options = [], value, onChange, ariaLabel, className = '' }) {
+ *  width is the call site's (`className="w-40"`).
+ *
+ *  `tone` · `size` · `variant` pass through (kol-fxr 2026-08-28): they were
+ *  hardcoded, so a settings page ruled sunken could not be told — and kol-fxr
+ *  rebuilt this same Dropdown in a local `ChoiceRow`, which is the exact
+ *  duplication this component exists to prevent. A component that wraps another
+ *  has to forward the wrapped one's seams or it becomes a wall. */
+export function SettingsChoice({ options = [], value, onChange, ariaLabel, tone = 'default', size = 'sm', variant = 'primary', className = '' }) {
   const opts = options.map((o) => (o != null && typeof o === 'object' ? o : { value: o, label: String(o) }))
-  return <Dropdown size="sm" variant="primary" value={value} onChange={onChange} options={opts} className={`w-full ${className}`.trim()} aria-label={ariaLabel} />
+  return <Dropdown size={size} variant={variant} tone={tone} value={value} onChange={onChange} options={opts} className={`w-full ${className}`.trim()} aria-label={ariaLabel} />
 }
 
 /* THE CONTROL CHIP (SettingsPanelCompliance, user 2026-08-27: "WROOOONG" on the
@@ -173,13 +179,13 @@ export const chipCls = (on) => `${CHIP_CLS} ${on ? 'kol-control--filled' : 'text
  * @param {Function} onToggle (value) => void
  * @param {string} noun      the trigger's noun (default 'kinds')
  */
-export function SettingsMulti({ options = [], selected = [], onToggle, noun = 'kinds', className = '' }) {
+export function SettingsMulti({ options = [], selected = [], onToggle, noun = 'kinds', tone = 'default', size = 'sm', className = '' }) {
   const on = selected instanceof Set ? selected : new Set(selected)
   const opts = [
     { value: '__summary', label: `${on.size} of ${options.length} ${noun}` },
     ...options.map((o) => ({ value: o.value, label: `${on.has(o.value) ? '✓ ' : ''}${o.label ?? String(o.value)}` })),
   ]
-  return <Dropdown size="sm" variant="primary" value="__summary" options={opts} onChange={(v) => (v === '__summary' ? null : onToggle?.(v))} className={`w-full ${className}`.trim()} />
+  return <Dropdown size={size} variant="primary" tone={tone} value="__summary" options={opts} onChange={(v) => (v === '__summary' ? null : onToggle?.(v))} className={`w-full ${className}`.trim()} />
 }
 
 /**

package/src/organisms/sectionSurface.js

@@ -1,7 +1,7 @@
 /* ONE surface prop across the section family (SectionBackgroundProp, kol-website
  * 2026-08-27 — user: "ALL section family should pass bg as props"). A named
  * surface, `none`, or a raw utility / token string for the odd case
- * (`'bg-fg-absolute-16'`). Each section's default is what it painted before,
+ * (`'bg-fg-ab-16'`). Each section's default is what it painted before,
  * so nothing moves on the bump. `theme` keeps scoping ink; this is the paint. */
 export const SURFACES = {
   primary: 'bg-surface-primary',