@kolkrabbi/kol-component 0.319.1 → 0.320.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-component",
-  "version": "0.319.1",
+  "version": "0.320.0",
   "description": "The core component library",
   "license": "MIT",
   "type": "module",
@@ -26,7 +26,7 @@
     "embla-carousel-react": "^8.6.0",
     "pdfjs-dist": "^6.3.289",
     "react-syntax-highlighter": "^16.1.1",
-    "@kolkrabbi/kol-growth": "^0.2.0",
+    "@kolkrabbi/kol-growth": "^0.3.0",
     "@kolkrabbi/kol-search": "^0.3.0",
     "@kolkrabbi/kol-markdown": "^0.2.0"
   },
@@ -39,7 +39,7 @@
     "react-dom": "^18.3.0 || ^19.0.0"
   },
   "devDependencies": {
-    "@kolkrabbi/kol-icons": "^0.53.5"
+    "@kolkrabbi/kol-icons": "^0.54.0"
   },
   "files": [
     "src",

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). `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 {'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` (FloatingStyleAndSignInDemos; round 3's values, W16 2026-10-31) is the shape only: a capsule whose height and type step together — sm · md · lg 28 · 36 · 44 with 12 · 13 · 14 type and an 18 glyph, on `pointer: coarse` 36 · 44 · 52, 15 · 16 type and a 20 glyph; icon-only is the square; the ground stays the `tone`'s, the surface is the float it sits on. 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
@@ -69,7 +69,8 @@ const Button = ({
   // button is a solo glyph in a pinned square, so it takes SOLO (16/20/24) —
   // it took the text-adjacent ladder until component 0.20.0, which put a 14px
   // glyph in a 28px square at `sm`. `iconSize` still overrides either.
-  const resolvedIconSize = iconSize ?? glyphSize(size, Boolean(iconOnly))
+  /* a float glyph follows the pointer (18, 20 on touch — `--kol-float-ic`), so its size is the token, not a number */
+  const resolvedIconSize = iconSize ?? (variant === 'float' ? 'var(--kol-float-ic)' : glyphSize(size, Boolean(iconOnly)))
 
   // `control` is a legacy alias for `ghost` (kept so web call-sites passing
   // variant="control" keep working post-migration).

package/src/atoms/Input.jsx

@@ -11,8 +11,9 @@ 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
+ *   variant="float"            — the floating style (round 3, W16 2026-10-31): a capsule on the float's well
+ *                                (`--kol-float-well`), 16 in, sm · md · lg 28 · 36 · 44 (touch 36 · 44 · 52) with
+ *                                12 · 13 · 14 (13 · 15 · 16) type; 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/atoms/SegmentedToggle.jsx

@@ -44,7 +44,9 @@
  *               outline shell; the inset ring marks ONLY the selected cell) |
  *               'tonal' (filled tiles, but the clicked cell marks itself by
  *               TONE — surface-tertiary fill, no ring; 2026-08-12).
- *               Every variant renders at the SAME pinned button-ladder
+ *               'float' (W16, round 3 — 2026-10-31): a capsule track 6 in on its `surface`, pills 4 apart at the
+ *               float heights (28/36/44, touch 36/44/52), the selected pill filled with the ink.
+ *               Every other variant renders at the SAME pinned button-ladder
  *               height (22/26/32/40) — icon or text, the box never moves.
  *   size      — mirrors Button exactly: 'sm' (26px, mono-12, 4/12 pad) |
  *               'md' (default, 32px, mono-14, 6/16 pad) | 'lg' (40px,
@@ -57,13 +59,16 @@
  *               selected cell on `--kol-surface-sunken` / `fg-96`, rest cells as the default paints
  *               them; `filled` and `tonal` keep their own selected law. Through `toneClass`, so a
  *               `kol-tone-sunken` wrapper reaches it too. Unset = inherit.
+ *   surface   — `variant="float"` only: 'solid' (default) | 'glass-dark' | 'glass-light' — the track's material
+ *               (`floatSurfaceClass`, kol-theme `.kol-float-*`)
  *   ariaLabel — accessible name for the group
  *   className — additional classes on the outer shell
  */
-import { toneClass } from '../utilities/tone.js'
+import { toneClass, floatSurfaceClass } from '../utilities/tone.js'
 import { Tooltip } from '../utilities/Popover.jsx'
 
-export default function SegmentedToggle({ value, onChange, options = [], variant = 'default', size = 'md', tone = 'default', ariaLabel, className = '' }) {
+export default function SegmentedToggle({ value, onChange, options = [], variant = 'default', size = 'md', tone = 'default', surface = 'solid', ariaLabel, className = '' }) {
+  const float = variant === 'float'
   const cellType = { xs: 'kol-mono-8', sm: 'kol-mono-12', md: 'kol-mono-14', lg: 'kol-mono-16' }[size]
   const stateless = value == null
   const focusIdx = Math.max(0, options.findIndex((opt) => opt.value === value))
@@ -95,6 +100,7 @@ export default function SegmentedToggle({ value, onChange, options = [], variant
         (variant === 'filled' || variant === 'tonal') && 'kol-seg--filled',
         variant === 'tonal' && 'kol-seg--tonal',
         size !== 'md' && `kol-seg--${size}`,
+        float && `kol-seg--float ${floatSurfaceClass(surface)}`,
         toneClass(resolvedTone),
         className,
       ].filter(Boolean).join(' ')}

package/src/index.js

@@ -54,6 +54,7 @@ export { default as LabeledControl } from './molecules/LabeledControl.jsx'
 export { default as OverlayGlassPanel } from './utilities/OverlayGlassPanel.jsx'
 export { default as Pill } from './atoms/Pill.jsx'
 export { usePopover, PopoverPanel, Tooltip } from './utilities/Popover.jsx'
+export { floatSurfaceClass, FLOAT_SURFACES } from './utilities/tone.js'
 /* armLongPress — the touch hold the panel value controls report (moved from kol-hardware 2026-10-01) */
 export { armLongPress } from './utilities/armLongPress.js'
 export { default as ContextMenu, useContextMenu } from './molecules/ContextMenu.jsx'
@@ -149,7 +150,7 @@ export { default as SplitToolButton } from './molecules/SplitToolButton.jsx'
 export { default as ToolPalette } from './organisms/ToolPalette.jsx'
 export { default as DocumentEditor } from './organisms/DocumentEditor.jsx'
 export { default as SwatchControls, SwatchStack, EyedropPick } from './molecules/SwatchControls.jsx'
-export { default as TabsRow, TABBAR_H, TABBAR_PILL_INSET, TABBAR_PILL_TAB, tabbarPillWidth } from './molecules/TabsRow.jsx'
+export { default as TabsRow, TABBAR_H, TABBAR_PILL_H, TABBAR_PILL_INSET, TABBAR_PILL_TAB, TABBAR_PILL_GAP, TABBAR_PILL_LABEL_TAB, TABBAR_PILL_SPLIT_GAP, tabbarPillWidth, tabbarPillSlot } from './molecules/TabsRow.jsx'
 /** @deprecated 2026-10-17 — alias of `TabsRow variant="chip"` */
 export { default as TabChips } from './molecules/TabChips.jsx'
 

package/src/molecules/TabsRow.jsx

@@ -5,6 +5,7 @@ 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'
+import { floatSurfaceClass } from '../utilities/tone.js'
 
 /* taxonomy-ok: nests kol-icons's Icon */
 
@@ -33,7 +34,8 @@ import { Tooltip } from '../utilities/Popover.jsx'
  *   keeps one line that scrolls sideways with no scrollbar, `.kol-scroll-fade--x` fading the clipped edge(s), and the
  *   active tab scrolled into view when it changes — arrow keys included; `wrap` breaks the tabs onto a second line.
  *   Every variant but `stacked`, which has its phone bar
- * @param {'underline'|'chip'|'text'|'stacked'} [variant='underline']
+ * @param {'underline'|'chip'|'text'|'stacked'|'float'} [variant='underline']  `float` (W16, round 3): `chip`'s row as the floating
+ *        style's capsules — float heights (28/36/44, touch 36/44/52), 4 apart, the selected one oq-16
  * @param {string} [look]  @deprecated 2026-10-30 — the old spelling of `variant`; `variant` wins when both are passed
  * @param {'mono'|'sans'|'mono-light'} [type='mono']  `underline` only: the tab's type — `mono-light` is `sans`'s row on JetBrains Mono at 300 (his word, 2026-10-30)
  * @param {boolean} [filled=false] - `chip` only: every chip shows at rest (Button `tab-filled`), so the row reads as choices
@@ -62,7 +64,15 @@ import { Tooltip } from '../utilities/Popover.jsx'
  *                                 (`--kol-shell-rail-width`) and 64 up, not centred
  * @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 {'fill'|'circle'} [active='fill']  the lit slot — since W16 (round 3, 2026-10-31) both are the whole 56 slot as a circle,
+ *                                 oq-16; the prop stays so call sites keep working
+ * THE FLOAT (W16, round 3 — 2026-10-31, accepted: *"accept the style, both glass styles"*). The pill is fxr's live nav: 66 tall, 56
+ * buttons 4 apart, 5 in, 28 glyphs — the same on mouse and touch. Its name on hover is the float Tooltip.
+ * @param {'solid'|'glass-dark'|'glass-light'} [surface='solid']  the pill's material (`floatSurfaceClass`); a glass has no
+ *                                 hairline (its rim is the edge) and always its own shadow; `solid` keeps `border` and `shadow`
+ * @param {boolean} [split=false]  the LAST tab (AppFloatNav's ···) stands apart as its own 66 circle, 8 off the bar (iOS 27's
+ *                                 grouped toolbar); while `collapsed` the bar fades and the circle is the ×
+ * @param {boolean} [labels=false]  the tab bar with labels: 66 tall, items 58 tall and 84 wide, 4 in, a 24 glyph over an 11 label
  * @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)
  * @param {'left'|'right'} [foldSide='left']  the screen edge the tab sits on
@@ -70,21 +80,38 @@ import { Tooltip } from '../utilities/Popover.jsx'
  * lights it whatever `value` is — action slots (the transport) light more than one.
  */
 export const TABBAR_H = 56
-/* the pill's air off the bottom edge — a page under it owes TABBAR_H + this */
+/* the pill's height (W16, round 3 — fxr's live nav: was TABBAR_H) — a page under it owes TABBAR_PILL_H + TABBAR_PILL_INSET */
+export const TABBAR_PILL_H = 66
+/* the pill's air off the bottom edge */
 export const TABBAR_PILL_INSET = 16
-/* the pill's geometry, shared with the sheet that aligns to it: 56 per tab, 6px pad and 1px hairline each side */
+/* the pill's geometry, shared with the sheets that align to it: 56 per tab, 4 between, 5 in (4 + the 1px hairline) each side;
+ * with labels 84 per tab, none between, 4 in; a split last tab is a TABBAR_PILL_H circle 8 off the bar */
 export const TABBAR_PILL_TAB = 56
-export const tabbarPillWidth = (count) => count * TABBAR_PILL_TAB + 14
+export const TABBAR_PILL_GAP = 4
+export const TABBAR_PILL_LABEL_TAB = 84
+export const TABBAR_PILL_SPLIT_GAP = 8
+const pillBar = (n, labels) => (labels ? n * TABBAR_PILL_LABEL_TAB + 8 : n * TABBAR_PILL_TAB + Math.max(0, n - 1) * TABBAR_PILL_GAP + 10)
+/* the whole pill's width — the bar, plus the split circle when `split` */
+export const tabbarPillWidth = (count, { labels = false, split = false } = {}) => (split
+  ? pillBar(count - 1, labels) + TABBAR_PILL_SPLIT_GAP + TABBAR_PILL_H
+  : pillBar(count, labels))
+/* a slot's centre, from the pill's left edge (a split last slot is the circle's) */
+export const tabbarPillSlot = (at, { count, labels = false, split = false } = {}) => {
+  if (split && at === count - 1) return pillBar(count - 1, labels) + TABBAR_PILL_SPLIT_GAP + TABBAR_PILL_H / 2
+  return labels ? 4 + at * TABBAR_PILL_LABEL_TAB + TABBAR_PILL_LABEL_TAB / 2 : 5 + at * (TABBAR_PILL_TAB + TABBAR_PILL_GAP) + TABBAR_PILL_TAB / 2
+}
 /* the collapse's motion — one duration for the width and the glyph swap (300, user 2026-10-23: 180 read as abrupt) */
 const COLLAPSE_MS = 300
 
-export default function TabsRow({ tabs: raw = [], value, onChange, onClose, onMinimise, variant, look: lookLegacy, type = 'mono', filled = false, placement = 'inline', shape = 'bar', collapsed = false, onExpand, edge, border, shadow, dock, active, foldable, folded, onFoldChange, foldSide, size, tracked = false, overflow = 'scroll', ariaLabel, className, style }) {
+export default function TabsRow({ tabs: raw = [], value, onChange, onClose, onMinimise, variant, look: lookLegacy, type = 'mono', filled = false, placement = 'inline', shape = 'bar', collapsed = false, onExpand, edge, border, shadow, dock, active, foldable, folded, onFoldChange, foldSide, surface, split, labels, size, tracked = false, overflow = 'scroll', ariaLabel, className, style }) {
   const tabs = raw.map((t) => ({ ...t, id: t.id ?? t.value }))
   const look = variant ?? lookLegacy ?? 'underline'
   const wrap = overflow === 'wrap'
+  /* `float` (W16, round 3): the chip row as capsules — float heights, pills 4 apart, the selected one oq-16 */
+  if (look === 'float') return <Overflow mode={overflow} value={value}><ChipTabs tabs={tabs} value={value} onChange={onChange} size={size ?? 'md'} float ariaLabel={ariaLabel} className={`${wrap ? 'flex-wrap ' : ''}${className ?? ''}`} /></Overflow>
   if (look === 'chip') return <Overflow mode={overflow} value={value}><ChipTabs tabs={tabs} value={value} onChange={onChange} size={size ?? 'sm'} filled={filled} ariaLabel={ariaLabel} className={`${wrap ? 'flex-wrap ' : ''}${className ?? ''}`} /></Overflow>
   if (look === 'text') return <Overflow mode={overflow} value={value}><TextTabs tabs={tabs} value={value} onChange={onChange} size={size ?? 14} tracked={tracked} className={`${wrap ? 'flex-wrap gap-y-2 ' : ''}${className ?? 'gap-6'}`} style={style} /></Overflow>
-  if (look === 'stacked') return <StackedTabs tabs={tabs} value={value} onChange={onChange} placement={placement} shape={shape} collapsed={collapsed} onExpand={onExpand} edge={edge} border={border} shadow={shadow} dock={dock} active={active} foldable={foldable} folded={folded} onFoldChange={onFoldChange} foldSide={foldSide} ariaLabel={ariaLabel} className={className ?? ''} />
+  if (look === 'stacked') return <StackedTabs tabs={tabs} value={value} onChange={onChange} placement={placement} shape={shape} collapsed={collapsed} onExpand={onExpand} edge={edge} border={border} shadow={shadow} dock={dock} active={active} foldable={foldable} folded={folded} onFoldChange={onFoldChange} foldSide={foldSide} surface={surface} split={split} labels={labels} ariaLabel={ariaLabel} className={className ?? ''} />
   return <Overflow mode={overflow} value={value}><UnderlineTabs tabs={tabs} value={value} onChange={onChange} onClose={onClose} onMinimise={onMinimise} wrap={wrap} type={type} /></Overflow>
 }
 
@@ -108,14 +135,14 @@ function Overflow({ mode, value, children }) {
 }
 
 /* chip — TabChips verbatim */
-function ChipTabs({ tabs, value, onChange, size, filled, ariaLabel, className }) {
+function ChipTabs({ tabs, value, onChange, size, filled, float = false, ariaLabel, className }) {
   return (
-    <div className={`flex items-center ${filled ? 'gap-2' : 'gap-1'} ${className}`.trim()} role="tablist" aria-label={ariaLabel}>
+    <div className={`flex items-center ${filled ? 'gap-2' : 'gap-1'}${float ? ' kol-tabs-float' : ''} ${className}`.trim()} role="tablist" aria-label={ariaLabel}>
       {tabs.map((t) => {
         const active = t.id === value
         return (
           /* a tab is selected, not pressed — the role's own attribute replaces Button's aria-pressed */
-          <Button key={t.id} variant={filled ? 'tab-filled' : 'tab'} size={size} pressed={active} role="tab" aria-selected={active} aria-pressed={undefined} data-active={active || undefined} onClick={() => onChange?.(t.id)}>
+          <Button key={t.id} variant={float ? 'float' : filled ? 'tab-filled' : 'tab'} size={size} pressed={active} role="tab" aria-selected={active} aria-pressed={undefined} data-active={active || undefined} onClick={() => onChange?.(t.id)}>
             {t.label}
           </Button>
         )
@@ -147,17 +174,24 @@ function TextTabs({ tabs, value, onChange, size, tracked, className, style }) {
 /* the fold: a sideways swipe past this folds the pill, as frame E's prototype measures it */
 const FOLD_SWIPE = 40
 
-function StackedTabs({ tabs, value, onChange, placement, shape = 'bar', collapsed = false, onExpand, edge = 'bottom', border = true, shadow = false, dock = false, active: activeShape = 'fill', foldable = false, folded: foldedProp, onFoldChange, foldSide = 'left', ariaLabel = 'Sections', className }) {
+function StackedTabs({ tabs, value, onChange, placement, shape = 'bar', collapsed = false, onExpand, edge = 'bottom', border = true, shadow = false, dock = false, active: activeShape = 'fill', foldable = false, folded: foldedProp, onFoldChange, foldSide = 'left', surface = 'solid', split: splitProp = false, labels = false, ariaLabel = 'Sections', className }) {
   const [foldedOwn, setFoldedOwn] = useState(false)
   const swipe = useRef({ x: null, swiped: false })
   if (tabs.length === 0) return null
   const phone = placement === 'phone'
   const pill = phone && shape === 'pill'
   const isCollapsed = phone && collapsed
-  const W = tabbarPillWidth(tabs.length)
+  const split = pill && splitProp && tabs.length > 1
+  const W = tabbarPillWidth(tabs.length, { labels, split })
   const top = pill && edge === 'top'
   const isFolded = pill && foldable && (foldedProp ?? foldedOwn)
   const setFolded = (v) => { if (foldedProp === undefined) setFoldedOwn(v); onFoldChange?.(v) }
+  /* THE MATERIAL (W16): solid keeps the pill's ground, hairline and shadow props; a glass is the theme's class, no hairline */
+  const glass = surface === 'glass-dark' || surface === 'glass-light'
+  const material = glass ? floatSurfaceClass(surface) : ''
+  const solidLook = glass ? {} : { background: 'var(--kol-surface-secondary)', boxShadow: shadow ? 'var(--kol-shadow-float)' : undefined }
+  /* without the hairline the 1px it took stays, transparent, so the slots never move */
+  const edgeLine = `1px solid ${border && !glass ? 'var(--kol-oq-08)' : 'transparent'}`
   /* the edge offset: the pill's inset from the safe area on its edge */
   const inset = `calc(env(safe-area-inset-${top ? 'top' : 'bottom'}, 0px) + ${TABBAR_PILL_INSET}px)`
   const swipeProps = pill && foldable ? {
@@ -178,101 +212,155 @@ function StackedTabs({ tabs, value, onChange, placement, shape = 'bar', collapse
         type="button"
         aria-label={`Show ${ariaLabel.toLowerCase()}`}
         onClick={() => setFolded(false)}
-        className="kol-mobile-tabbar-tab md:hidden fixed z-[calc(var(--kol-z-sticky)+1)] flex items-center justify-center cursor-pointer"
+        className={`kol-mobile-tabbar-tab md:hidden fixed z-[calc(var(--kol-z-sticky)+1)] flex items-center justify-center cursor-pointer ${material}`.trim()}
         style={{
           [foldSide]: 0,
           [top ? 'top' : 'bottom']: `calc(env(safe-area-inset-${top ? 'top' : 'bottom'}, 0px) + ${TABBAR_PILL_INSET + 8}px)`,
           width: 28, height: 72, padding: 0, border: 'none',
           borderRadius: foldSide === 'left' ? '0 16px 16px 0' : '16px 0 0 16px',
-          background: 'var(--kol-surface-secondary)', color: RAIL_ROW.rest,
+          ...(glass ? {} : { background: 'var(--kol-surface-secondary)' }), color: RAIL_ROW.rest,
         }}
       >
         <Icon name={foldSide === 'left' ? 'chevron-right' : 'chevron-left'} size={18} />
       </button>
     )
   }
+  const inBar = split ? tabs.slice(0, -1) : tabs
+  const last = split ? tabs[tabs.length - 1] : null
+  const slotW = labels ? TABBAR_PILL_LABEL_TAB : TABBAR_PILL_TAB
+  const slotH = labels ? 58 : TABBAR_PILL_TAB
+  const ink = (on) => (phone ? (on ? RAIL_ROW.active : RAIL_ROW.rest) : (on ? 'var(--kol-fg-default)' : 'var(--kol-fg-48)'))
+  const tip = (t, el) => <Tooltip key={t.id} label={t.label} placement={top ? 'bottom' : 'top'} offset={10} variant="float" asChild>{el}</Tooltip>
+  const slot = (t) => {
+    const active = t.selected ?? t.id === value
+    if (pill) {
+      /* round 3: the lit slot is the whole slot as a circle (a capsule with labels), oq-16 */
+      return tip(t, (
+        <button
+          key={t.id}
+          type="button"
+          onClick={() => onChange?.(t.id)}
+          aria-current={active ? 'page' : undefined}
+          aria-label={t.label}
+          className={`flex flex-col items-center justify-center rounded-full cursor-pointer flex-none${labels ? ' gap-0.5' : ''}`}
+          style={{ width: slotW, height: slotH, padding: 0, border: 'none', background: active ? 'var(--kol-oq-16)' : 'transparent', color: ink(active) }}
+        >
+          {t.icon && <Icon name={t.icon} size={labels ? 24 : 28} />}
+          {labels && <span className="truncate max-w-full px-1.5" style={{ fontFamily: 'var(--kol-font-family-mono)', fontSize: 11, lineHeight: 1.2, fontWeight: 600 }}>{t.label}</span>}
+        </button>
+      ))
+    }
+    return (
+      <button
+        key={t.id}
+        type="button"
+        onClick={() => onChange?.(t.id)}
+        aria-current={active ? 'page' : undefined}
+        /* the PHONE bar is icons alone (user 2026-10-23: *"skip the title and show just the icon bigger"*) — the
+         * label is the button's accessible name */
+        aria-label={phone ? t.label : undefined}
+        className="flex-1 min-w-0 flex flex-col items-center justify-center gap-1 cursor-pointer"
+        /* the PHONE bar wears the rail's row type and ink (review 2, § 7.1 — RAIL_ROW, the one constant the rail reads);
+         * an inline stacked row keeps MobileTabBar's own */
+        style={{ background: 'transparent', border: 'none', color: ink(active) }}
+      >
+        {t.icon && <Icon name={t.icon} size={phone ? 24 : 18} />}
+        {/* helper is single-line chrome, which a tab label always is */}
+        {!phone && <span className="kol-helper-10 truncate max-w-full px-1">{t.label}</span>}
+      </button>
+    )
+  }
+  /* the isCollapsed × — the bar's More slot, or (a whole pill, no split) the pill shrunk to one circle; present always so it cross-fades */
+  const closeX = phone && !split && (
+    <button
+      type="button"
+      aria-label="Close"
+      aria-hidden={!isCollapsed}
+      tabIndex={isCollapsed ? 0 : -1}
+      onClick={onExpand}
+      className="absolute flex items-center justify-center rounded-full cursor-pointer"
+      style={{
+        /* no fill — the × is the only glyph, a filled circle inside the circle read as two rings (user 2026-10-23) */
+        ...(pill ? { right: 4, top: 4, width: TABBAR_PILL_TAB, height: TABBAR_PILL_TAB } : { right: 0, top: 0, bottom: 0, width: `${100 / tabs.length}%` }),
+        background: 'transparent', border: 'none', color: RAIL_ROW.active,
+        opacity: isCollapsed ? 1 : 0, pointerEvents: isCollapsed ? 'auto' : 'none', transition: `opacity ${COLLAPSE_MS}ms ease`,
+      }}
+    >
+      <Icon name="x" size={pill ? 28 : 24} />
+    </button>
+  )
+  const row = (
+    <div className={`flex items-stretch ${pill ? 'flex-none' : 'flex-1 min-w-0'}`} style={{ gap: pill && !labels ? TABBAR_PILL_GAP : undefined, opacity: isCollapsed ? 0 : 1, pointerEvents: isCollapsed ? 'none' : 'auto', transition: `opacity ${COLLAPSE_MS}ms ease` }}>
+      {inBar.map(slot)}
+    </div>
+  )
+  if (!pill) {
+    return (
+      <nav
+        className={`${phone ? 'kol-mobile-tabbar md:hidden fixed inset-x-0 bottom-0 z-[var(--kol-z-sticky)] ' : ''}flex items-stretch ${className}`.trim()}
+        style={phone ? {
+          height: TABBAR_H,
+          /* the pill's own ground, not the page's — it floats OVER content, so a
+           * transparent bar would show rows sliding through the labels */
+          background: 'var(--kol-surface-primary)',
+          borderTop: '1px solid var(--kol-oq-08)',
+          paddingBottom: 'env(safe-area-inset-bottom, 0px)',
+        } : { height: TABBAR_H }}
+        aria-label={ariaLabel}
+      >
+        {row}
+        {closeX}
+      </nav>
+    )
+  }
+  const barW = W - (split ? TABBAR_PILL_SPLIT_GAP + TABBAR_PILL_H : 0)
   return (
     <nav
       {...swipeProps}
-      className={`${pill
-        ? `kol-mobile-tabbar kol-mobile-tabbar-pill ${dock ? 'hidden md:flex' : 'md:hidden'} fixed z-[calc(var(--kol-z-sticky)+1)] rounded-full p-1.5 overflow-hidden `
-        : phone ? 'kol-mobile-tabbar md:hidden fixed inset-x-0 bottom-0 z-[var(--kol-z-sticky)] ' : ''}flex items-stretch ${className}`.trim()}
-      style={pill ? {
-        /* THE PILL (user 2026-10-23, iOS Files beside the full-width bar): floats off the bottom edge, hugs its tabs,
-         * the same ground and hairline as the bar, no shadow (user 2026-10-23). Anchored by its RIGHT edge at the
-         * centre line, so the collapse shrinks it toward where More was and the × lands under the same thumb. */
-        height: TABBAR_H,
-        width: isCollapsed ? TABBAR_H : W,
+      className={`kol-mobile-tabbar kol-mobile-tabbar-pill ${dock ? 'hidden md:flex' : 'md:hidden'} fixed z-[calc(var(--kol-z-sticky)+1)] flex items-stretch ${className}`.trim()}
+      style={{
+        /* THE PILL (user 2026-10-23, iOS Files beside the full-width bar; round 3's size, W16): floats off the bottom edge,
+         * hugs its tabs. Anchored by its RIGHT edge at the centre line, so the collapse shrinks it toward where More was
+         * and the × lands under the same thumb. */
+        height: TABBAR_PILL_H,
+        gap: TABBAR_PILL_SPLIT_GAP,
         ...(dock
           ? { left: 'calc(var(--kol-shell-rail-width, 48px) + 64px)', bottom: 64 }
           : { right: `calc(50% - ${W / 2}px)`, [top ? 'top' : 'bottom']: inset }),
-        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'}`,
-        /* 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 ? {
-        height: TABBAR_H,
-        /* the pill's own ground, not the page's — it floats OVER content, so a
-         * transparent bar would show rows sliding through the labels */
-        background: 'var(--kol-surface-primary)',
-        borderTop: '1px solid var(--kol-oq-08)',
-        paddingBottom: 'env(safe-area-inset-bottom, 0px)',
-      } : { height: TABBAR_H }}
+      }}
       aria-label={ariaLabel}
     >
-      <div className={`flex items-stretch ${pill ? 'flex-none' : 'flex-1 min-w-0'}`} style={{ width: pill ? W - 14 : undefined, opacity: isCollapsed ? 0 : 1, pointerEvents: isCollapsed ? 'none' : 'auto', transition: `opacity ${COLLAPSE_MS}ms ease` }}>
-      {tabs.map((t) => {
-        const active = t.selected ?? t.id === value
-        const circle = pill && activeShape === 'circle'
-        /* 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"
-            onClick={() => onChange?.(t.id)}
-            aria-current={active ? 'page' : undefined}
-            /* the PHONE bar is icons alone (user 2026-10-23: *"skip the title and show just the icon bigger"*) — the
-             * label is the button's accessible name */
-            aria-label={phone ? t.label : undefined}
-            className={pill ? 'flex items-center justify-center rounded-full cursor-pointer' : 'flex-1 min-w-0 flex flex-col items-center justify-center gap-1 cursor-pointer'}
-            /* the PHONE bar wears the rail's row type and ink (review 2, § 7.1 — RAIL_ROW, the one constant the rail reads);
-             * an inline stacked row keeps MobileTabBar's own */
-            style={{ background: pill && active && !circle ? 'var(--kol-oq-08)' : 'transparent', border: 'none', width: pill ? 56 : undefined, color: phone ? (active ? RAIL_ROW.active : RAIL_ROW.rest) : (active ? 'var(--kol-fg-default)' : 'var(--kol-fg-48)') }}
-          >
-            {/* the circle: 44×44, 1:1 inside the 56 slot (frame E — the fill stretched to the slot's width) */}
-            {t.icon && (circle
-              ? <span className="inline-flex items-center justify-center rounded-full" style={{ width: 44, height: 44, background: active ? 'var(--kol-oq-08)' : 'transparent' }}><Icon name={t.icon} size={28} /></span>
-              : <Icon name={t.icon} size={pill ? 28 : phone ? 24 : 18} />)}
-            {/* helper is single-line chrome, which a tab label always is */}
-            {!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
+        className={`relative flex items-center rounded-full overflow-hidden ${material}`.trim()}
+        style={{
+          height: TABBAR_PILL_H,
+          width: isCollapsed && !split ? TABBAR_PILL_H : barW,
+          padding: labels ? 3 : 4,
+          border: edgeLine,
+          ...solidLook,
+          opacity: isCollapsed && split ? 0 : 1,
+          pointerEvents: isCollapsed && split ? 'none' : undefined,
+          transition: `width ${COLLAPSE_MS}ms ease, opacity ${COLLAPSE_MS}ms ease`,
+        }}
+      >
+        {row}
+        {closeX}
       </div>
-      {phone && (
-        /* the isCollapsed × — the pill's one tab-sized circle, the bar's More slot; present always so it cross-fades */
+      {split && tip(isCollapsed ? { id: last.id, label: 'Close' } : last, (
+        /* the split circle (round 3, iOS 27's grouped toolbar): ··· on its own, 8 off the bar; the × while collapsed */
         <button
+          key={last.id}
           type="button"
-          aria-label="Close"
-          aria-hidden={!isCollapsed}
-          tabIndex={isCollapsed ? 0 : -1}
-          onClick={onExpand}
-          className="absolute flex items-center justify-center rounded-full cursor-pointer"
-          style={{
-            /* no fill — the × is the only glyph, a filled circle inside the circle read as two rings (user 2026-10-23) */
-            ...(pill ? { right: 6, top: 6, width: TABBAR_H - 14, height: TABBAR_H - 14 } : { right: 0, top: 0, bottom: 0, width: `${100 / tabs.length}%` }),
-            background: 'transparent', border: 'none', color: RAIL_ROW.active,
-            opacity: isCollapsed ? 1 : 0, pointerEvents: isCollapsed ? 'auto' : 'none', transition: `opacity ${COLLAPSE_MS}ms ease`,
-          }}
+          onClick={() => (isCollapsed ? onExpand?.() : onChange?.(last.id))}
+          aria-current={!isCollapsed && (last.selected ?? last.id === value) ? 'page' : undefined}
+          aria-label={isCollapsed ? 'Close' : last.label}
+          className={`flex items-center justify-center rounded-full cursor-pointer flex-none ${material}`.trim()}
+          style={{ width: TABBAR_PILL_H, height: TABBAR_PILL_H, padding: 0, border: edgeLine, ...solidLook, color: ink(isCollapsed || (last.selected ?? last.id === value)) }}
         >
-          <Icon name="x" size={pill ? 28 : 24} />
+          <Icon name={isCollapsed ? 'x' : last.icon} size={labels ? 24 : 28} />
         </button>
-      )}
+      ))}
     </nav>
   )
 }

package/src/organisms/GrowthLineStage.jsx

@@ -10,8 +10,9 @@ import usePrefersReducedMotion from '../hooks/usePrefersReducedMotion.js'
  *
  * THE POINTER IS A FORCE — a move pushes the line aside, a press blasts a crater it regrows into (engine `poke`);
  * either wakes a finished line, which settles and sleeps again a second after the pointer stops. A resting pointer is
- * not a force; a finished line steps only within 0.36 · min(w, h) of the pointer, and runs 48px past the edges (engine
- * `bleed`), frozen there. Read on the window,
+ * not a force. THE LINE RESTS (engine `settle`, kol-fxr 2026-10-30): the packed interior cools and stops, so only the
+ * growing front and what the pointer touches move; it runs 48px past the edges (engine `bleed`), frozen there. Read on
+ * the window,
  * so the stage can sit behind a page; a press on a control is the control's.
  *
  * REDUCED MOTION — the finished line is grown off screen and drawn once: no animation, no pointer force.
@@ -37,7 +38,7 @@ export default function GrowthLineStage({ shape = 'orb', fit = 0.6, params = ORB
     const canvas = ref.current
     if (!canvas) return undefined
     let sim = null, raf = 0, w = 0, h = 0
-    let ptr = null, sm = null, last = null, idle = 0, full = false
+    let ptr = null, sm = null, idle = 0, full = false
     const force = pointer && !reduced
     const start = () => {
       const r = canvas.getBoundingClientRect()
@@ -52,8 +53,9 @@ export default function GrowthLineStage({ shape = 'orb', fit = 0.6, params = ORB
         rand: seed == null ? Math.random : mulberry32(seed),
         cap: cap ?? Math.min(14000, Math.round(w * h / 112)),
       })
-      /* the line runs past the edges and freezes there instead of piling into them */
-      sim.setParams({ bleed: 48, ...params })
+      /* the line runs past the edges and freezes there instead of piling into them, and rests where it is done; one
+       * step a frame keeps 0.2.0's pace now that only the front grows */
+      sim.setParams({ bleed: 48, settle: 120, ...params })
       sim.seed()
       full = false
       return true
@@ -73,11 +75,11 @@ export default function GrowthLineStage({ shape = 'orb', fit = 0.6, params = ORB
         /* low-passed like the editor's stage pointer — the raw one twitches */
         const to = sm ? { x: sm.x + (ptr.x - sm.x) * 0.1, y: sm.y + (ptr.y - sm.y) * 0.1 } : { x: ptr.x, y: ptr.y }
         /* a RESTING pointer is not a force — poked every frame, the line under it churned forever */
-        if (ptr.down || !sm || Math.hypot(to.x - sm.x, to.y - sm.y) > 0.3) { sim.poke(to.x, to.y, ptr.down); last = to; idle = 60 }
+        if (ptr.down || !sm || Math.hypot(to.x - sm.x, to.y - sm.y) > 0.3) { sim.poke(to.x, to.y, ptr.down); idle = 60 }
         sm = to
       } else sm = null
-      /* a finished line moves only around the pointer — stepped whole it never settles and jitters */
-      if (growing) { sim.step(); sim.step() } else if (idle > 0 && last) sim.step({ x: last.x, y: last.y, r: Math.min(w, h) * 0.36 })
+      /* settled stretches rest, so a step moves only the growing front and the pointer's wake */
+      if (growing || idle > 0) sim.step()
       if (idle > 0) idle--
       paint()
       raf = growing || idle > 0 ? requestAnimationFrame(frame) : 0

package/src/utilities/Popover.jsx

@@ -177,6 +177,8 @@ function TooltipOn({
   triggerClassName = 'inline-flex',
   asChild = false,
   disabled = false,
+  /* `float` (W16, round 3 — 2026-10-31): the floating style's tooltip, an inverted pill 24 (28 on touch) tall, 11 (12) type */
+  variant,
 }) {
   const [open, setOpen] = useState(false)
   const [covered, setCovered] = useState(false)
@@ -238,7 +240,7 @@ function TooltipOn({
         popover={popover}
         focus={false}
         panel={false}
-        className="kol-tooltip"
+        className={variant === 'float' ? 'kol-tooltip kol-tooltip-float' : 'kol-tooltip'}
         style={ambient ?? undefined}
       >
         <span>{label}</span>

package/src/utilities/tone.js

@@ -41,3 +41,16 @@ export const TONE_VARS = [
   'pressed-bg', 'pressed-image', 'pressed-fg',
   'panel-bg', 'panel-border-w', 'panel-border',
 ].map((k) => `--kol-tone-${k}`)
+
+/**
+ * floatSurfaceClass — what a float is made of (W16, round 3 — 2026-10-31: *"accept the style, both glass styles"*).
+ * `surface="solid|glass-dark|glass-light"` on the float components resolves here to kol-theme's classes, never inline styles:
+ * `solid` (surface-secondary + the float shadow), `glass-dark` (Apple's dark glass, plus `.dark` — a dark material in either
+ * theme, so what sits on it takes dark-theme ink), `glass-light` (the light tint). `medium` marks a menu or a box (the
+ * deeper blur and shadow); a bar, a button or a track is small. Unknown → solid.
+ */
+export const FLOAT_SURFACES = ['solid', 'glass-dark', 'glass-light']
+export const floatSurfaceClass = (surface = 'solid', medium = false) => {
+  const s = FLOAT_SURFACES.includes(surface) ? surface : 'solid'
+  return `kol-float-${s}${medium ? ' kol-float-m' : ''}${s === 'glass-dark' ? ' dark' : ''}`
+}