@kolkrabbi/kol-component 0.317.7 → 0.318.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-component",
-  "version": "0.317.7",
+  "version": "0.318.0",
   "description": "The core component library",
   "license": "MIT",
   "type": "module",

package/src/atoms/Button.jsx

@@ -12,7 +12,7 @@ import { glyphSize } from '../hooks/glyphLadders.js'
  *
  * @param {Object} props
  * @param {ReactNode} props.children - Button content
- * @param {'accent'|'danger'|'nav'|'tab'|'tab-filled'} props.variant - The intent; the GROUND is `tone`. `tab` is the tab chip (2026-10-02): quiet text at rest, a soft filled chip while `pressed`. `tab-filled` (2026-10-29) shows its chip at rest (oq-04), brighter on hover (oq-08) and brightest selected (oq-16). `primary · secondary · outline · ghost · grey · control` are deprecated aliases of tones (2026-10-01, on the retirement ledger): pass `tone` — `secondary` is `tone="inverted"`, `control` is `tone="ghost"`, the rest keep their name. Visual variant. UNSET (the default) inherits the tone of the nearest `kol-tone-*` wrapper, else renders primary; the five ground variants are aliases of `tone`. `danger` is the destructive treatment (--ui-error fill); `nav` is the chrome rung — transparent, oq-64 ink, one step brighter than `ghost`; `control` is an alias for `ghost` (legacy call-sites).
+ * @param {'accent'|'danger'|'nav'|'tab'|'tab-filled'} props.variant - The intent; the GROUND is `tone`. `tab` is the tab chip (2026-10-02): quiet text at rest, a soft filled chip while `pressed`. `tab-filled` (2026-10-29) shows its chip at rest (oq-04), brighter on hover (oq-08) and brightest selected (oq-16). `float` (2026-10-30, FloatingStyleAndSignInDemos — the floating style B) is the shape only: a 44 control (44×44 icon-only), an 18 radius; the ground stays the `tone`'s. A composed float component (AppFloatNav, AccountForm's box) passes it, a consumer never sets it by hand. `primary · secondary · outline · ghost · grey · control` are deprecated aliases of tones (2026-10-01, on the retirement ledger): pass `tone` — `secondary` is `tone="inverted"`, `control` is `tone="ghost"`, the rest keep their name. Visual variant. UNSET (the default) inherits the tone of the nearest `kol-tone-*` wrapper, else renders primary; the five ground variants are aliases of `tone`. `danger` is the destructive treatment (--ui-error fill); `nav` is the chrome rung — transparent, oq-64 ink, one step brighter than `ghost`; `control` is an alias for `ghost` (legacy call-sites).
  * @param {'xs'|'sm'|'md'|'lg'} props.size - Button size (default: 'md'); xs is the panel rung (ControlsXsRung, 2026-09-01) — kol-mono-8 in a 22px shell (20 icon-only), opt-in by prop
  * @param {string} props.iconLeft - Icon name to display on the left
  * @param {string} props.iconRight - Icon name to display on the right
@@ -93,7 +93,7 @@ const Button = ({
     warned.add(variant)
     console.warn(`Button: variant="${variant}" is deprecated — use tone="${VARIANT_TONE[variant]}"`)
   }
-  const KNOWN = ['primary', 'secondary', 'accent', 'outline', 'ghost', 'nav', 'tab', 'tab-filled', 'danger', 'grey']
+  const KNOWN = ['primary', 'secondary', 'accent', 'outline', 'ghost', 'nav', 'tab', 'tab-filled', 'danger', 'grey', 'float']
   const known = !resolvedVariant || KNOWN.includes(resolvedVariant)
   if (!known && import.meta.env.DEV) console.warn(`Button: unknown variant "${resolvedVariant}" — rendering the inherited tone (primary)`)
   const variantClass = resolvedVariant && known ? `kol-btn-${resolvedVariant}` : ''

package/src/atoms/Input.jsx

@@ -11,6 +11,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)
+ *   variant="float"            — the floating style B (2026-10-30): 44 tall, an 18 radius, on the page's ground
+ *                                (surface-primary) inside a float box; AccountForm's box passes it
  *   tone="inverse"             — the dark chip (`fg-ab-24`) for a washed plane
  *                                (ControlToneInverse, 2026-08-27); same prop on ViewToggle · Dropdown
  *   size="xs"                  — the panel rung (ControlsXsRung, 2026-09-01):

package/src/molecules/TabsRow.jsx

@@ -4,6 +4,7 @@ import CloseButton from '../atoms/CloseButton.jsx'
 import Button from '../atoms/Button.jsx'
 import { Icon } from '@kolkrabbi/kol-icons'
 import { RAIL_ROW } from '../hooks/railRow.js'
+import { Tooltip } from '../utilities/Popover.jsx'
 
 /* taxonomy-ok: nests kol-icons's Icon */
 
@@ -59,7 +60,8 @@ import { RAIL_ROW } from '../hooks/railRow.js'
  *                                 that component shoudl probablyget its own variant"*): the pill on a DESK — shown from md up, hidden
  *                                 below (the phone has its own nav), placed at the content's bottom-left, 64 in from the rail's edge
  *                                 (`--kol-shell-rail-width`) and 64 up, not centred
- * @param {boolean} [shadow=false]  a drop shadow — for a pill that floats over content (the transport), not the nav
+ * @param {boolean} [shadow=false]  the KOL float shadow (`--kol-shadow-float`) — for a pill that floats over content (the transport,
+ *                                 a nav over a clashing canvas). Every pill slot names itself on hover in the KOL `Tooltip`
  * @param {'fill'|'circle'} [active='fill']  the lit slot: `fill` its whole 56 slot (today), `circle` a 44×44 1:1 circle
  * @param {boolean} [foldable=false]  a sideways swipe (> 40px) folds the pill into a 28×72 edge tab; a tap restores it
  * @param {boolean} [folded] · {Function} [onFoldChange]  the folded state, controlled (else the pill holds it)
@@ -207,7 +209,8 @@ function StackedTabs({ tabs, value, onChange, placement, shape = 'bar', collapse
         background: 'var(--kol-surface-secondary)',
         /* without the hairline the 1px it took stays, transparent, so the slots never move */
         border: `1px solid ${border ? 'var(--kol-oq-08)' : 'transparent'}`,
-        boxShadow: shadow ? '0 8px 40px rgba(0, 0, 0, 0.45)' : undefined,
+        /* the KOL float shadow (kol-theme `--kol-shadow-float`, FloatingStyleAndSignInDemos 2026-10-30) — was a local 40px blur */
+        boxShadow: shadow ? 'var(--kol-shadow-float)' : undefined,
         transition: `width ${COLLAPSE_MS}ms ease`,
         ...swipeProps.style,
       } : phone ? {
@@ -224,7 +227,9 @@ function StackedTabs({ tabs, value, onChange, placement, shape = 'bar', collapse
       {tabs.map((t) => {
         const active = t.selected ?? t.id === value
         const circle = pill && activeShape === 'circle'
-        return (
+        /* THE NAME ON HOVER IS THE KOL TOOLTIP (AppFloatNav, kol-fxr 2026-10-30 — the Round 3 board), on the pill's far side
+         * from its edge; a thumb never hovers, so the phone is unchanged */
+        const slot = (
           <button
             key={t.id}
             type="button"
@@ -246,6 +251,7 @@ function StackedTabs({ tabs, value, onChange, placement, shape = 'bar', collapse
             {!phone && <span className="kol-helper-10 truncate max-w-full px-1">{t.label}</span>}
           </button>
         )
+        return pill ? <Tooltip key={t.id} label={t.label} placement={top ? 'bottom' : 'top'} offset={10} asChild>{slot}</Tooltip> : slot
       })}
       </div>
       {phone && (