@kolkrabbi/kol-component 0.316.0 → 0.317.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-component",
-  "version": "0.316.0",
+  "version": "0.317.1",
   "description": "The core component library",
   "license": "MIT",
   "type": "module",
@@ -38,7 +38,7 @@
     "react-dom": "^18.3.0 || ^19.0.0"
   },
   "devDependencies": {
-    "@kolkrabbi/kol-icons": "^0.52.0"
+    "@kolkrabbi/kol-icons": "^0.53.1"
   },
   "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'} 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`. `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). `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', 'danger', 'grey']
+  const KNOWN = ['primary', 'secondary', 'accent', 'outline', 'ghost', 'nav', 'tab', 'tab-filled', 'danger', 'grey']
   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/SegmentedToggle.jsx

@@ -35,8 +35,11 @@
  *               (`aria-disabled`, not the attribute — the tooltip still gives the reason),
  *               refuses the press, and ←/→ step over it. It may still be the current `value`
  *               (the ground changed under it): selected + disabled, no throw.
- *   variant   — 'default' (shipped chrome: shared outer stroke + dividers,
- *               filled active cell) | 'filled' (the state law's tiles: every
+ *   variant   — 'default' — BORDERLESS (2026-10-29, the user: *"WE DONT USE BORDER, almost NEVER … DONT USE FUCKING
+ *               BORDER unless I APPROVE it"*): the `sunken` tone, no outer stroke, the selected cell on the sunken
+ *               ground. A choice is a Dropdown or text tabs first; a toggle that stays is this one |
+ *               'outlined' (the old default: shared outer stroke + dividers, filled active cell — only where he has
+ *               approved a border) | 'filled' (the state law's tiles: every
  *               cell a surface-secondary tile with 1px transparent gaps, NO
  *               outline shell; the inset ring marks ONLY the selected cell) |
  *               'tonal' (filled tiles, but the clicked cell marks itself by
@@ -80,6 +83,8 @@ export default function SegmentedToggle({ value, onChange, options = [], variant
     e.currentTarget.children[next]?.focus()
   }
 
+  /* the default draws borderless — the sunken tone — unless a tone is asked for; `outlined` keeps the stroke */
+  const resolvedTone = variant === 'default' && tone === 'default' ? 'sunken' : tone
   return (
     <div
       role={stateless ? 'group' : 'radiogroup'}
@@ -90,7 +95,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}`,
-        toneClass(tone),
+        toneClass(resolvedTone),
         className,
       ].filter(Boolean).join(' ')}
     >

package/src/molecules/PaletteHarmonyWheel.jsx

@@ -86,8 +86,11 @@ export default function PaletteHarmonyWheel({
     onHueChange?.(h)
   }
 
-  const outerR = size / 2 - 8
-  const innerR = outerR - 22
+  /* the ring, its margin and the dots were pixels tuned at the 248 default; they scale with `size` so a small wheel (the lab's
+   * harmony tiles, 2026-10-29) draws the same wheel instead of a negative radius. 248 is unchanged */
+  const k = size / 248
+  const outerR = size / 2 - 8 * k
+  const innerR = outerR - 22 * k
   const midR   = (outerR + innerR) / 2
 
   useEffect(() => {
@@ -134,7 +137,7 @@ export default function PaletteHarmonyWheel({
       const x = cx + Math.cos(a) * midR
       const y = cy + Math.sin(a) * midR
       ctx.beginPath()
-      ctx.arc(x, y, 5, 0, Math.PI * 2)
+      ctx.arc(x, y, 5 * k, 0, Math.PI * 2)
       ctx.fillStyle = `hsl(${h}, 100%, 50%)`
       ctx.fill()
       ctx.strokeStyle = MARKER_STROKE
@@ -147,14 +150,14 @@ export default function PaletteHarmonyWheel({
     const bx = cx + Math.cos(ba) * midR
     const by = cy + Math.sin(ba) * midR
     ctx.beginPath()
-    ctx.arc(bx, by, 9, 0, Math.PI * 2)
+    ctx.arc(bx, by, 9 * k, 0, Math.PI * 2)
     ctx.fillStyle = `hsl(${baseHue}, 100%, 50%)`
     ctx.fill()
     ctx.strokeStyle = MARKER_STROKE
     ctx.lineWidth = 2
     ctx.stroke()
     ctx.beginPath()
-    ctx.arc(bx, by, 10.5, 0, Math.PI * 2)
+    ctx.arc(bx, by, 10.5 * k, 0, Math.PI * 2)
     ctx.strokeStyle = 'rgba(0, 0, 0, 0.35)'
     ctx.lineWidth = 1
     ctx.stroke()

package/src/molecules/Stepper.jsx

@@ -92,7 +92,9 @@ export default function Stepper({
 
   const shellCls = [
     'kol-control',
-    'kol-control--filled',
+    /* NO MODIFIER, as Input (2026-09-03): the shell takes a `kol-tone-*` wrapper's tone, else the filled default. It
+     * forced `--filled`, so beside an Input or a Dropdown in a toned rail it drew a second tone (BrandLabToolWindow,
+     * 2026-10-29 — the user: *"2 different dropdown tones"*) */
     `kol-control-${size}`,
     SIZE_TYPE[size],
     'relative',

package/src/molecules/TabsRow.jsx

@@ -31,7 +31,9 @@ import { RAIL_ROW } from '../hooks/railRow.js'
  *   active tab scrolled into view when it changes — arrow keys included; `wrap` breaks the tabs onto a second line.
  *   Every look but `stacked`, which has its phone bar
  * @param {'underline'|'chip'|'text'|'stacked'} [look='underline']
- *        underline — this row, as it always was
+ * @param {boolean} [filled=false] - `chip` only: every chip shows at rest (Button `tab-filled`), so the row reads as choices
+ *        underline — this row, as it always was; a tab's `icon` sits before its label. `size="md"` is the sans body
+ *        face with a 20px glyph in a 48px row (the user's ref, Adobe's tab strip, 2026-10-29)
  *        chip      — the active tab a filled chip, the rest quiet (was `TabChips`); `size` is the control rung
  *        text      — flat helper-type tabs, the active one bright (was kol-shell's `TabStrip`); `size` is the
  *                    helper size (default 14), `tracked` adds 1px tracking
@@ -69,13 +71,13 @@ export const tabbarPillWidth = (count) => count * TABBAR_PILL_TAB + 14
 /* 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, look = 'underline', 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, look = 'underline', 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 }) {
   const tabs = raw.map((t) => ({ ...t, id: t.id ?? t.value }))
   const wrap = overflow === 'wrap'
-  if (look === 'chip') return <Overflow mode={overflow} value={value}><ChipTabs tabs={tabs} value={value} onChange={onChange} size={size ?? 'sm'} 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 ?? ''} />
-  return <Overflow mode={overflow} value={value}><UnderlineTabs tabs={tabs} value={value} onChange={onChange} onClose={onClose} onMinimise={onMinimise} wrap={wrap} /></Overflow>
+  return <Overflow mode={overflow} value={value}><UnderlineTabs tabs={tabs} value={value} onChange={onChange} onClose={onClose} onMinimise={onMinimise} wrap={wrap} size={size} /></Overflow>
 }
 
 /* `overflow="scroll"`: the row in a sideways scroller that fades its clipped edges and keeps the active tab (`data-active`)
@@ -98,14 +100,14 @@ function Overflow({ mode, value, children }) {
 }
 
 /* chip — TabChips verbatim */
-function ChipTabs({ tabs, value, onChange, size, ariaLabel, className }) {
+function ChipTabs({ tabs, value, onChange, size, filled, ariaLabel, className }) {
   return (
-    <div className={`flex items-center gap-1 ${className}`.trim()} role="tablist" aria-label={ariaLabel}>
+    <div className={`flex items-center ${filled ? 'gap-2' : 'gap-1'} ${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="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={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>
         )
@@ -263,7 +265,9 @@ function StackedTabs({ tabs, value, onChange, placement, shape = 'bar', collapse
   )
 }
 
-function UnderlineTabs({ tabs, value, onChange, onClose, onMinimise, wrap }) {
+function UnderlineTabs({ tabs, value, onChange, onClose, onMinimise, wrap, size }) {
+  /* `size="md"` (2026-10-29, the user's ref — Adobe's tab strip): the sans body face, a 20px glyph, a 48px row, 24 between tabs */
+  const md = size === 'md'
   const listRef = useRef(null)
   const activeIdx = tabs.findIndex((t) => t.id === value)
 
@@ -277,14 +281,14 @@ function UnderlineTabs({ tabs, value, onChange, onClose, onMinimise, wrap }) {
   }
 
   return (
-    <div className={`flex items-stretch gap-4 ${wrap ? 'min-h-10' : 'h-10'}`}>
+    <div className={`flex items-stretch gap-4 ${wrap ? (md ? 'min-h-12' : 'min-h-10') : md ? 'h-12' : 'h-10'}`}>
       {onClose && (
         /* the one close, at the rung whose glyph is the 12 this hand-rolled
          * (2026-09-03) — xs SOLO is 12, so the drawing does not move */
         <CloseButton onClick={onClose} size="xs" className="self-center" />
       )}
 
-      <div ref={listRef} role="tablist" onKeyDown={onKeyDown} className={`flex items-stretch gap-4${wrap ? ' flex-wrap gap-y-1' : ''}`}>
+      <div ref={listRef} role="tablist" onKeyDown={onKeyDown} className={`flex items-stretch ${md ? 'gap-6' : 'gap-4'}${wrap ? ' flex-wrap gap-y-1' : ''}`}>
         {tabs.map((t, i) => {
           const isActive = t.id === value
           return (
@@ -297,12 +301,15 @@ function UnderlineTabs({ tabs, value, onChange, onClose, onMinimise, wrap }) {
               tabIndex={isActive || (activeIdx === -1 && i === 0) ? 0 : -1}
               onClick={() => onChange?.(t.id)}
               className={[
-                'kol-mono-12 flex items-center cursor-pointer border-b-2',
+                `group ${md ? 'kol-sans-body-02 gap-2.5' : 'kol-mono-12 gap-2'} flex items-center cursor-pointer border-b-2`,
                 isActive
                   ? 'text-emphasis border-fg'
                   : 'text-meta hover:text-emphasis border-transparent',
               ].join(' ')}
             >
+              {/* a tab may carry its glyph before the label (2026-10-29, Adobe's Base color · Image · Color wheel) */}
+              {/* the glyph in OPAQUE ink (icons take oq, never fg) — full when active, meta otherwise, full under the pointer */}
+              {t.icon && <Icon name={t.icon} size={md ? 20 : 16} className={isActive ? 'text-oq-96' : 'text-oq-48 group-hover:text-oq-96'} />}
               {t.label}
             </button>
           )

package/src/organisms/ColorPickerPopover.jsx

@@ -1,6 +1,9 @@
-import { useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import ColorSwatch from '../molecules/ColorSwatch.jsx'
 import Input from '../atoms/Input.jsx'
+import Slider from '../molecules/Slider.jsx'
+import Dropdown from '../molecules/Dropdown.jsx'
+import { Icon } from '@kolkrabbi/kol-icons'
 import { usePopover, PopoverPanel } from '../utilities/Popover.jsx'
 import { HueStrip, SBSquare, AlphaStrip } from './SpectrumControls.jsx'
 import { hexToHsva, hsvaToHex } from '../hooks/colorMath.js'
@@ -9,6 +12,74 @@ import { resolveCssColor } from '../hooks/cssVar.js'
 /* taxonomy-ok: organism — composes the SpectrumControls family (an organism) with a swatch and the hex Input */
 
 const SWATCH = { xs: 16, sm: 24 }
+
+/* ── THE MODES (review 3, 2026-10-29, Adobe's — the user: *"which mode? HEX HSL HSB GREYSCALE? like everything is
+ * missing?"*): HEX · RGB · HSB · Lab, each channel a gradient strip with its thumb and its number ── */
+export const PICKER_MODES = [{ value: 'hex', label: 'HEX' }, { value: 'rgb', label: 'RGB' }, { value: 'hsb', label: 'HSB' }, { value: 'lab', label: 'Lab' }]
+const rgbOf = (hex) => [1, 3, 5].map((i) => parseInt(hex.slice(i, i + 2), 16))
+const hexOf = (rgb) => '#' + rgb.map((v) => Math.round(Math.min(255, Math.max(0, v))).toString(16).padStart(2, '0')).join('').toUpperCase()
+/* CIE Lab (D65) ↔ sRGB */
+const lin = (c) => { c /= 255; return c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4 }
+const gam = (c) => 255 * (c <= 0.0031308 ? 12.92 * c : 1.055 * c ** (1 / 2.4) - 0.055)
+const W = [0.95047, 1, 1.08883]
+const f = (t) => (t > 216 / 24389 ? Math.cbrt(t) : (24389 / 27 * t + 16) / 116)
+const fi = (t) => (t ** 3 > 216 / 24389 ? t ** 3 : (116 * t - 16) / (24389 / 27))
+function hexToLab(hex) {
+  const [r, g, b] = rgbOf(hex).map(lin)
+  const xyz = [0.4124 * r + 0.3576 * g + 0.1805 * b, 0.2126 * r + 0.7152 * g + 0.0722 * b, 0.0193 * r + 0.1192 * g + 0.9505 * b].map((v, i) => f(v / W[i]))
+  return [116 * xyz[1] - 16, 500 * (xyz[0] - xyz[1]), 200 * (xyz[1] - xyz[2])]
+}
+function labToHex([L, a, bb]) {
+  const fy = (L + 16) / 116, fx = fy + a / 500, fz = fy - bb / 200
+  const [x, y, z] = [fi(fx) * W[0], fi(fy) * W[1], fi(fz) * W[2]]
+  return hexOf([3.2406 * x - 1.5372 * y - 0.4986 * z, -0.9689 * x + 1.8758 * y + 0.0415 * z, 0.0557 * x - 0.2040 * y + 1.0570 * z].map(gam))
+}
+/* a mode's three channels: name, range, read from the hsva, write back as a hex */
+const CHANNELS = {
+  rgb: [0, 1, 2].map((i) => ({ key: 'RGB'[i], min: 0, max: 255, read: (hex) => rgbOf(hex)[i], write: (hex, v) => { const c = rgbOf(hex); c[i] = v; return hexOf(c) } })),
+  hsb: [
+    { key: 'H', min: 0, max: 360, read: (_, h) => h.hue, write: null, hsva: (h, v) => ({ ...h, hue: v }) },
+    { key: 'S', min: 0, max: 100, read: (_, h) => h.sat, write: null, hsva: (h, v) => ({ ...h, sat: v }) },
+    { key: 'B', min: 0, max: 100, read: (_, h) => h.val, write: null, hsva: (h, v) => ({ ...h, val: v }) },
+  ],
+  lab: [
+    { key: 'L', min: 0, max: 100, read: (hex) => hexToLab(hex)[0], write: (hex, v) => { const l = hexToLab(hex); l[0] = v; return labToHex(l) } },
+    { key: 'a', min: -128, max: 127, read: (hex) => hexToLab(hex)[1], write: (hex, v) => { const l = hexToLab(hex); l[1] = v; return labToHex(l) } },
+    { key: 'b', min: -128, max: 127, read: (hex) => hexToLab(hex)[2], write: (hex, v) => { const l = hexToLab(hex); l[2] = v; return labToHex(l) } },
+  ],
+}
+
+/* one channel: its letter, a strip painted with the channel's own range at the current colour, a thumb, its number */
+/* brightness — Adobe's ☀ ramp under the hue strip in HEX and RGB: HSV value, black to the colour at full brightness */
+const BRIGHTNESS = { key: 'B', label: 'Brightness', icon: 'brightness', min: 0, max: 100, read: (_, h) => h.val, write: null, hsva: (h, v) => ({ ...h, val: v }) }
+
+function ChannelStrip({ ch, hex, hsva, onHsva }) {
+  const ref = useRef(null)
+  const value = ch.read(hex, hsva)
+  const at = (v) => (ch.hsva ? hsvaToHex({ ...ch.hsva(hsva, v), alpha: 1 }) : ch.write(hex, v))
+  const stops = Array.from({ length: 9 }, (_, i) => at(ch.min + ((ch.max - ch.min) * i) / 8).slice(0, 7))
+  const set = (v) => {
+    const n = Math.min(ch.max, Math.max(ch.min, v))
+    onHsva(ch.hsva ? ch.hsva(hsva, n) : { ...hexToHsva(ch.write(hex, n)), alpha: hsva.alpha })
+  }
+  const fromPointer = (e) => { const r = ref.current.getBoundingClientRect(); set(ch.min + ((e.clientX - r.left) / r.width) * (ch.max - ch.min)) }
+  const pct = ((value - ch.min) / (ch.max - ch.min)) * 100
+  return (
+    <div className="flex items-center gap-2">
+      <span className="flex w-4 shrink-0 items-center kol-mono-12 text-meta">{ch.icon ? <Icon name={ch.icon} size={16} className="text-oq-64" /> : ch.key}</span>
+      <div ref={ref} role="slider" aria-label={ch.label ?? ch.key} aria-valuemin={ch.min} aria-valuemax={ch.max} aria-valuenow={Math.round(value)} tabIndex={0}
+        className="relative h-4 flex-1 cursor-pointer rounded-full touch-none" style={{ background: `linear-gradient(to right, ${stops.join(', ')})` }}
+        onPointerDown={(e) => { e.currentTarget.setPointerCapture(e.pointerId); fromPointer(e) }}
+        onPointerMove={(e) => { if (e.currentTarget.hasPointerCapture(e.pointerId)) fromPointer(e) }}
+        onKeyDown={(e) => { const d = { ArrowRight: 1, ArrowUp: 1, ArrowLeft: -1, ArrowDown: -1 }[e.key]; if (d) { e.preventDefault(); set(value + d * (e.shiftKey ? 10 : 1)) } }}>
+        <span className="absolute top-1/2 size-4 -translate-x-1/2 -translate-y-1/2 rounded-full" style={{ left: `${pct}%`, boxShadow: '0 0 0 2px #fff, 0 0 0 3px rgba(0,0,0,0.35)', background: hex.slice(0, 7) }} />
+      </div>
+      <div className="w-14 shrink-0">
+        <Input size="sm" type="number" value={Math.round(value)} aria-label={`${ch.label ?? ch.key} value`} onChange={(e) => { const v = Number(e.target.value); if (!Number.isNaN(v)) set(v) }} />
+      </div>
+    </div>
+  )
+}
 const PANEL_W = 180
 
 /* the browser's computed `rgb()` / `rgba()` → '#RRGGBB(AA)' — for `currentColor` and tokens */
@@ -35,8 +106,20 @@ function cssToHex(css) {
  * @param {string}   [defaultValue] ⌥-click on the swatch resets to it
  * @param {'xs'|'sm'} [size='xs']  swatch 16 · 24
  * @param {string}   [label='Color'] the swatch's accessible name
+ * @param {ReactNode} [trigger]    what opens the panel instead of the swatch — any node, drawn inside the button (the lab's
+ *                                 hex, Adobe's "Edit color": BrandLabToolWindow 2026-10-29). The panel is the same
+ * @param {string}   [placement='bottom-end']  where the panel opens
+ * @param {boolean}  [alpha=true]  the opacity strip
+ * @param {boolean}  [brightness=false]  a brightness row under the hue (HSV value, 0–100, with its number) — Adobe's
+ * @param {boolean}  [inline=false] the panel IN the page, no swatch and no popover — the same square, strips and hex,
+ *                                 filling its column (the lab's Base color tab, 2026-10-29)
+ * @param {ReactNode} [hexEnd]     inline only: a control at the end of the hex row (the lab's base lock)
+ * @param {boolean}  [modes=false]  a head row — `title` and a mode Dropdown, HEX · RGB · HSB · Lab — and, under the square and
+ *                                 the hue, that mode's fields: the hex, or three channel strips with their numbers (Adobe's)
+ * @param {string}   [title]       the head row's name ("Base", "Edit color")
  */
-export default function ColorPickerPopover({ color, onChange, defaultValue, size = 'xs', label = 'Color', className = '' }) {
+export default function ColorPickerPopover({ color, onChange, defaultValue, size = 'xs', label = 'Color', trigger, placement = 'bottom-end', alpha = true, brightness = false, inline = false, hexEnd, modes = false, title, className = '' }) {
+  const [mode, setMode] = useState('hex')
   const isNone = !color || color === 'transparent'
   const [open, setOpen] = useState(false)
   const [hsva, setHsva] = useState(null)
@@ -44,7 +127,7 @@ export default function ColorPickerPopover({ color, onChange, defaultValue, size
 
   const popover = usePopover({
     open,
-    placement: 'bottom-end',
+    placement,
     offset: 4,
     onOpenChange: (next, event) => {
       if (next && event?.altKey) {
@@ -80,6 +163,70 @@ export default function ColorPickerPopover({ color, onChange, defaultValue, size
 
   const opaque = hsva && hsvaToHex({ ...hsva, alpha: 1 })
 
+  /* INLINE: the working copy follows `color` whenever it changes from outside (a roll, an undo) */
+  useEffect(() => {
+    if (!inline) return
+    const literal = isNone ? '#000000' : hexToHsva(color) ? color : '#000000'
+    if (hsva && hsvaToHex(hsva).slice(0, 7).toUpperCase() === literal.slice(0, 7).toUpperCase()) return
+    const h = hexToHsva(literal) ?? { hue: 0, sat: 0, val: 0, alpha: 1 }
+    setHsva(h)
+    setDraft(hsvaToHex(h).slice(1))
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [inline, color])
+
+  const hexField = (
+    /* no variant: the field takes the nearest `kol-tone-*` wrapper (a toned rail), filled where there is none (review 3 —
+     * *"input is invisible, just set tone to sunken … so you dont have to set it individually"*) */
+    <Input size="sm" prefix="#" maxLength={8} value={draft} onChange={onHex} aria-label={`${label} hex`} />
+  )
+  const strips = hsva && (
+    <>
+      <div className="rounded-[var(--kol-radius-xs)] overflow-hidden" style={{ width: inline || modes ? '100%' : PANEL_W, height: inline || modes ? 160 : 140 }}>
+        <SBSquare hue={hsva.hue} sat={hsva.sat} val={hsva.val} onChange={(sat, val) => commit({ ...hsva, sat, val })} />
+      </div>
+      <HueStrip hue={hsva.hue} onChange={(hue) => commit({ ...hsva, hue })} />
+      {modes && mode !== 'hex' && CHANNELS[mode].map((ch) => <ChannelStrip key={ch.key} ch={ch} hex={hsvaToHex({ ...hsva, alpha: 1 })} hsva={hsva} onHsva={commit} />)}
+      {!modes && brightness && (
+        <Slider min={0} max={100} value={Math.round(hsva.val)} onChange={(v) => commit({ ...hsva, val: v })} formatValue={(v) => `${v}`} displayWidth={3} aria-label="Brightness" />
+      )}
+      {alpha && <AlphaStrip alpha={hsva.alpha} color={opaque} onChange={(a) => commit({ ...hsva, alpha: a })} />}
+    </>
+  )
+  /* the head row: the picker's name and its mode */
+  const head = modes && (
+    <div className="flex items-center justify-between gap-2">
+      <span className="truncate kol-helper-12 text-emphasis">{title ?? label}</span>
+      <Dropdown size="sm" value={mode} onChange={setMode} options={PICKER_MODES} />
+    </div>
+  )
+
+  if (inline) {
+    /* ADOBE'S BASE COLOR PANEL (review 7, refs 68–72): the label row — the name, the mode as plain text at the right;
+     * in HEX, ONE field: the swatch, the hex, the lock (Input's slotLeft · slotRight); the square, THEN the hue strip;
+     * the mode's channels under them (RGB · HSB · Lab), and brightness — the ☀ ramp — in HEX and RGB */
+    const hexField = (!modes || mode === 'hex') && (
+      <Input size="md" prefix="#" maxLength={8} value={draft} onChange={onHex} aria-label={`${label} hex`} width="100%"
+        slotLeft={<ColorSwatch hex={isNone ? null : color} size={SWATCH.xs} radius="full" hoverable={false} />}
+        slotRight={hexEnd} />
+    )
+    return hsva && (
+      <div className={`flex w-full flex-col gap-3 ${className}`.trim()}>
+        <div className="flex items-center justify-between gap-3">
+          <span className="kol-sans-body-02 text-emphasis">{title ?? label}</span>
+          {modes && <Dropdown variant="nav" size="sm" value={mode} onChange={setMode} options={PICKER_MODES} ariaLabel={`${label} mode`} />}
+        </div>
+        {hexField}
+        <div className="w-full overflow-hidden rounded-[var(--kol-radius-xs)]" style={{ height: 200 }}>
+          <SBSquare hue={hsva.hue} sat={hsva.sat} val={hsva.val} onChange={(sat, val) => commit({ ...hsva, sat, val })} />
+        </div>
+        <HueStrip hue={hsva.hue} onChange={(hue) => commit({ ...hsva, hue })} />
+        {modes && mode !== 'hex' && CHANNELS[mode].map((ch) => <ChannelStrip key={ch.key} ch={ch} hex={hsvaToHex({ ...hsva, alpha: 1 })} hsva={hsva} onHsva={commit} />)}
+        {(!modes || mode === 'hex' || mode === 'rgb') && <ChannelStrip ch={BRIGHTNESS} hex={hsvaToHex({ ...hsva, alpha: 1 })} hsva={hsva} onHsva={commit} />}
+        {alpha && <AlphaStrip alpha={hsva.alpha} color={opaque} onChange={(a) => commit({ ...hsva, alpha: a })} />}
+      </div>
+    )
+  }
+
   return (
     <>
       <button
@@ -90,36 +237,27 @@ export default function ColorPickerPopover({ color, onChange, defaultValue, size
         aria-expanded={open}
         className={`inline-flex shrink-0 rounded focus-visible:outline-1 focus-visible:outline-offset-2 ${className}`}
       >
-        <ColorSwatch
-          hex={isNone ? null : color}
-          size={SWATCH[size] ?? SWATCH.xs}
-          showTransparent={isNone}
-          transparentTone="error"
-          hoverable={false}
-          className="border border-[var(--kol-border-default)]"
-        />
+        {trigger ?? (
+          <ColorSwatch
+            hex={isNone ? null : color}
+            size={SWATCH[size] ?? SWATCH.xs}
+            showTransparent={isNone}
+            transparentTone="error"
+            hoverable={false}
+            className="border border-[var(--kol-border-default)]"
+          />
+        )}
       </button>
       {open && hsva && (
         <PopoverPanel
           popover={popover}
           panel={false}
           className="bg-surface-secondary border border-fg-08 rounded p-2 flex flex-col gap-2 shadow-lg"
-          style={{ width: PANEL_W + 16 }}
+          style={{ width: modes ? 296 : PANEL_W + 16 }}
         >
-          <div className="rounded-[var(--kol-radius-xs)] overflow-hidden" style={{ width: PANEL_W, height: 140 }}>
-            <SBSquare hue={hsva.hue} sat={hsva.sat} val={hsva.val} onChange={(sat, val) => commit({ ...hsva, sat, val })} />
-          </div>
-          <HueStrip hue={hsva.hue} onChange={(hue) => commit({ ...hsva, hue })} />
-          <AlphaStrip alpha={hsva.alpha} color={opaque} onChange={(alpha) => commit({ ...hsva, alpha })} />
-          <Input
-            variant="filled"
-            size="sm"
-            prefix="#"
-            maxLength={8}
-            value={draft}
-            onChange={onHex}
-            aria-label={`${label} hex`}
-          />
+          {head}
+          {strips}
+          {(!modes || mode === 'hex') && hexField}
         </PopoverPanel>
       )}
     </>

package/src/organisms/NavRailSite.jsx

@@ -136,6 +136,19 @@ import useScrollFade from '../hooks/useScrollFade.js'
  *   `defaultOpen`      category ids open on first render (default none — the rail loads closed, elder ruling 2026-08-06)
  *   `openOnRoute`      `true` opens the category holding the current route whenever the route changes (default `false`
  *                      — nothing auto-expands on arrival); it only adds, never closes what you opened
+ * EVERY ROW IS OVERRIDABLE (NavRailRowProps, kol-website 2026-10-29 — user: "props are good. we use variants and presets
+ * to define how things ship, but props make things flexible"). All opt-in; with none passed every rail renders as before:
+ *   `case`             the label's case on every level — `as-written` · `upper` · `lower` · `title` · `sentence`;
+ *                      `caseCategory` / `caseGroup` / `casePage` per level (defaults today's: upper, upper, as-written)
+ *                      and a node's own `case` wins. CSS only (text-transform, `::first-letter` for sentence), so the
+ *                      label stays the authored string for screen readers and search
+ *   `icon`             on any node at any depth (page, group label, action row, nested child), through `iconComponent`
+ *   `iconSize`         `{ category, group, page }` (defaults 16, 12, 12); a node's own `iconSize` wins
+ *   `alignIcons`       `true` (default): a level where any row has an icon reserves the icon column for all its rows
+ *   `collapsedIcons`   `'category'` (default) — the collapsed rail shows category glyphs only; `'all'` also shows the
+ *                      icon-bearing pages of an open category under it
+ *   per node           `trailing` (a count, badge or node, right-aligned), `className`, `title` (the tooltip when the
+ *                      label truncates), `external: true` (the external-link glyph, opens a new tab)
  * `background` (2026-08-09, prop): `true` (default) paints the rail surface;
  * `false` renders chromeless so the rail can float over a consumer's media
  * (the brand-hero model — the consumer owns the plane). `hairline` (2026-08-26,
@@ -177,13 +190,25 @@ const indentOf = (depth) => `calc(var(--kol-pad-chrome-x) + 2rem + ${depth} * va
  * router lives in the consumer (kol-framework's `SideNav` wraps this with react-router). A
  * modified click (cmd, ctrl, shift, middle) is left to the browser, as a NavLink left it.
  * Hoisted out of the component so its identity is stable across renders (see `leafProps`). */
-function RouteLeaf({ to, href, active, onNavigate, className, style, children, onPress }) {
+function RouteLeaf({ to, href, active, onNavigate, className, style, title, children, onPress }) {
   return (
-    <a href={href} style={style} className={className(active)} aria-current={active ? 'page' : undefined}
+    <a href={href} style={style} title={title} className={className(active)} aria-current={active ? 'page' : undefined}
       onClick={(e) => { if (e.metaKey || e.ctrlKey || e.shiftKey || e.altKey || e.button !== 0) return; e.preventDefault(); onPress?.(); onNavigate(e, to) }}>{children}</a>
   )
 }
 
+/* THE ROW PROPS (NavRailRowProps): a case resolves node → level → rail → the level's own look; the level's own look emits
+ * NO class, so a rail without the props carries the classes it always did. Tailwind's case utilities — they outrank the
+ * hop's `text-transform: uppercase` (kol-theme) from the utilities layer. */
+const CASE_CLS = { 'as-written': 'normal-case', upper: 'uppercase', lower: 'lowercase', title: 'capitalize', sentence: 'lowercase first-letter:uppercase' }
+const LEVEL_CASE = { category: 'upper', group: 'upper', page: 'as-written' }
+const ICON_SIZE = { category: 16, group: 12, page: 12 }
+const withCls = (...parts) => parts.filter(Boolean).join(' ')
+/* `external`: a plain new-tab link, never the router's */
+const ExternalLeaf = ({ to, className, style, title, children }) => (
+  <a href={to} target="_blank" rel="noopener noreferrer" style={style} title={title} className={className}>{children}</a>
+)
+
 export default function NavRailSite({
   currentPath: pathname = '',
   /* `(to) => href` — the router's basename on the link a modified click opens (kol-framework's
@@ -212,7 +237,27 @@ export default function NavRailSite({
   fade = true,
   defaultOpen = [],
   openOnRoute = false,
+  case: railCase,
+  caseCategory,
+  caseGroup,
+  casePage,
+  iconSize: iconSizes,
+  alignIcons = true,
+  collapsedIcons = 'category',
 }) {
+  /* the row props' resolvers (NavRailRowProps) — '' at a level's own look, so the classes stay as they were */
+  const caseCls = (node, level) => {
+    const c = node.case ?? { category: caseCategory, group: caseGroup, page: casePage }[level] ?? railCase ?? LEVEL_CASE[level]
+    return c === LEVEL_CASE[level] ? '' : (CASE_CLS[c] ?? '')
+  }
+  const sizeOf = (node, level) => node.iconSize ?? iconSizes?.[level] ?? ICON_SIZE[level]
+  /* what rides a row's right end: its `trailing`, then the external glyph */
+  const tailOf = (node) => (node.trailing != null || node.external) && (
+    <>
+      {node.trailing != null && <span className="shrink-0 text-subtle">{node.trailing}</span>}
+      {node.external && <span className="shrink-0 inline-flex text-subtle" aria-hidden="true"><Icon name="external-link" size={10} /></span>}
+    </>
+  )
   /* the tree fades where it clips — the head once scrolled, the foot while more lies below (kol-theme `.kol-scroll-fade`;
    * TimeSetAndSiteRailFade, 2026-10-29) */
   const scrollRef = useRef(null)
@@ -299,19 +344,50 @@ export default function NavRailSite({
   /* Rows under a category: a leaf is a route link; a group is a non-routing
    * header over its own rows, one step further in (recursive). A group lights
    * up the way a category does — when one of its leaves is the current route. */
-  const renderRows = (rows, depth) => rows.map((row, i) => {
+  const renderRows = (rows, depth) => {
+    /* THE ICON COLUMN (NavRailRowProps): with `alignIcons`, a level where any row has an icon reserves the column for all
+     * its rows, as wide as its widest glyph; a level with no icon draws exactly as before */
+    const levelOf = (r) => (r.children ? 'group' : 'page')
+    const iconW = rows.reduce((w, r) => (r.icon ? Math.max(w, sizeOf(r, levelOf(r))) : w), 0)
+    const aligned = alignIcons && iconW > 0
+    /* a row with an icon, a reserved column or a tail lays out as glyph · label · tail; its case rides the label span
+     * (a flex item, so `::first-letter` applies). A plain row keeps its text bare and the case rides the row. */
+    const body = (row, cc) => {
+      const tail = tailOf(row)
+      if (!row.icon && !aligned && !tail) return { rowCase: cc, content: row.label }
+      const size = sizeOf(row, levelOf(row))
+      return {
+        rowCase: '',
+        content: (
+          <span className="flex items-center gap-2 min-w-0">
+            {(row.icon || aligned) && (
+              /* zero-height slot: the 12px glyph centres on the 10px line without growing the row */
+              <span className="kol-sidenav-hop-icon inline-flex items-center justify-center shrink-0" style={{ width: aligned ? iconW : size, height: 0 }} aria-hidden="true">
+                {row.icon && <Glyph name={row.icon} size={size} />}
+              </span>
+            )}
+            <span className={withCls('flex-1 min-w-0 truncate', cc)}>{row.label}</span>
+            {tail}
+          </span>
+        ),
+      }
+    }
+    return rows.map((row, i) => {
     if (row.children) {
+      const { rowCase, content } = body(row, caseCls(row, 'group'))
       return (
         <li key={row.id ?? `${row.label}-${i}`}>
           <div
             /* UPPERCASE (user 2026-10-24, the another-creation reference: "look at uppercase sections") — the fork's
              * `uppercase` utility returns, as the reference carries it; the group is a section label in the rows' voice.
              * ONE INK (user 2026-10-24: "just keep them same opacity"): the label never lights — the row's dot says
-             * which row is active, and a label that brightened said it twice. */
-            className="kol-sidenav-group kol-helper-10 uppercase text-subtle"
+             * which row is active, and a label that brightened said it twice. `caseGroup` / a node's `case` swap the
+             * utility (NavRailRowProps). */
+            className={withCls('kol-sidenav-group kol-helper-10', rowCase || 'uppercase', 'text-subtle', row.className)}
             style={depth ? { paddingLeft: indentOf(depth) } : undefined}
+            title={row.title}
           >
-            {row.label}
+            {content}
           </div>
           <ul className="kol-sidenav-list">{renderRows(rowsOf(row.children), depth + 1)}</ul>
         </li>
@@ -321,29 +397,65 @@ export default function NavRailSite({
     /* a row under a group sits 2px further in than the step, dot and text together, so the dot's edge lines up under
      * the group label's first letter (user 2026-10-24: "just indent the dot+text by 2px to right") */
     const leafStyle = depth ? { paddingLeft: `calc(${indentOf(depth)} + 2px)`, '--kol-sidenav-dot-left': `calc(var(--kol-pad-chrome-x) + 1.125rem + 2px + ${depth} * var(--kol-spacing-3))` } : pageStyle
+    const { rowCase, content } = body(row, caseCls(row, 'page'))
     if (row.onSelect) {
       return (
         <li key={row.id ?? `${row.label}-${i}`}>
           <button
             type="button"
             style={leafStyle}
-            className={`${row.active ? pageActiveCls : pageCls} w-full bg-transparent border-0 cursor-pointer text-left truncate`}
+            className={withCls(`${row.active ? pageActiveCls : pageCls} w-full bg-transparent border-0 cursor-pointer text-left truncate`, rowCase, row.className)}
             aria-pressed={!!row.active}
+            title={row.title}
             onClick={(e) => handleSelect(e, row)}
           >
-            {row.label}
+            {content}
           </button>
         </li>
       )
     }
+    if (row.external) {
+      return (
+        <li key={row.to}>
+          <ExternalLeaf to={row.to} style={leafStyle} title={row.title} className={withCls(pageCls, rowCase, row.className)}>{content}</ExternalLeaf>
+        </li>
+      )
+    }
     return (
       <li key={row.to}>
-        <RouteLeaf {...leafProps(row.to)} style={leafStyle} className={(active) => (active ? pageActiveCls : pageCls)}>
-          {row.label}
+        <RouteLeaf {...leafProps(row.to)} style={leafStyle} title={row.title} className={(active) => withCls(active ? pageActiveCls : pageCls, rowCase, row.className)}>
+          {content}
         </RouteLeaf>
       </li>
     )
-  })
+    })
+  }
+
+  /* a page as a collapsed glyph row (`collapsedIcons="all"`) — the hop's own classes, so the collapse geometry centres it */
+  const renderIconLeaf = (leaf, i) => {
+    const cls = 'kol-sidenav-hop kol-helper-12 text-emphasis no-underline'
+    const inner = (
+      <>
+        <span className="kol-sidenav-hop-icon inline-flex items-center justify-center w-5 h-5 shrink-0" aria-hidden="true">
+          <Glyph name={leaf.icon} size={sizeOf(leaf, 'page')} />
+        </span>
+        <span className="kol-sidenav-hop-label flex-1 min-w-0">{leaf.label}</span>
+      </>
+    )
+    return (
+      <li key={leaf.to ?? leaf.id ?? `${leaf.label}-${i}`}>
+        <Tooltip label={leaf.label} placement="right" triggerClassName="block">
+          {leaf.onSelect ? (
+            <button type="button" className={`${cls} bg-transparent border-0 cursor-pointer text-left${leaf.active ? ' is-active' : ''}`} aria-pressed={!!leaf.active} onClick={(e) => handleSelect(e, leaf)}>{inner}</button>
+          ) : leaf.external ? (
+            <ExternalLeaf to={leaf.to} className={cls}>{inner}</ExternalLeaf>
+          ) : (
+            <RouteLeaf {...leafProps(leaf.to)} className={(active) => `${cls}${active ? ' is-active' : ''}`}>{inner}</RouteLeaf>
+          )}
+        </Tooltip>
+      </li>
+    )
+  }
 
   /* one renderer for the tree and the pinned rows (RailSideNavPixelParity) */
   const renderCat = (cat, ci) => {
@@ -368,12 +480,21 @@ export default function NavRailSite({
               /* Box utilities deliberately absent — the hop's layout lives in
                * .kol-sidenav-hop (kol-framework.css): a utility here would
                * outrank the collapsed-state overrides (2026-08-09 defect). */
-              const rowCls = 'kol-sidenav-hop kol-helper-12 text-emphasis no-underline'
+              const rowCls = withCls('kol-sidenav-hop kol-helper-12 text-emphasis no-underline', cat.className)
               const glyph = (
                 <span className="kol-sidenav-hop-icon inline-flex items-center justify-center w-5 h-5 shrink-0" aria-hidden="true">
-                  <Glyph name={cat.icon} size={16} />
+                  <Glyph name={cat.icon} size={sizeOf(cat, 'category')} />
                 </span>
               )
+              /* the label slot: the case on it (the hop's uppercase is inherited, so a class here wins); with a tail it
+               * lays out label · tail, the case moving onto the label's own span (NavRailRowProps) */
+              const cc = caseCls(cat, 'category')
+              const tail = tailOf(cat)
+              const label = (inner) => (tail ? (
+                <span className="kol-sidenav-hop-label flex-1 min-w-0 flex items-center gap-2">
+                  <span className={withCls('flex-1 min-w-0 truncate', cc)}>{inner}</span>{tail}
+                </span>
+              ) : <span className={withCls('kol-sidenav-hop-label flex-1 min-w-0', cc)}>{inner}</span>)
               /* A category is a <button>, not a link — it has no route by
                  definition, and an <a href> would promise a page that does
                  not exist. Clicking it discloses its pages. */
@@ -396,15 +517,20 @@ export default function NavRailSite({
                   >
                     <span className={`kol-sidenav-hop-chevron${isOpen ? '' : ' -rotate-90'}`}><Icon name="chevron-down" size={12} /></span>
                   </button>
-                  <RouteLeaf {...leafProps(cat.to)} onPress={discloseOnTitle ? () => discloseCat(cat.id) : undefined} className={(active) => `${rowCls} kol-sidenav-hop--split${(active || isActiveCat(cat)) ? ' is-active' : ''}`}>
+                  <RouteLeaf {...leafProps(cat.to)} title={cat.title} onPress={discloseOnTitle ? () => discloseCat(cat.id) : undefined} className={(active) => `${rowCls} kol-sidenav-hop--split${(active || isActiveCat(cat)) ? ' is-active' : ''}`}>
                     {glyph}
-                    <span className="kol-sidenav-hop-label flex-1 min-w-0"><span className="kol-sidenav-hop-title">{cat.label}</span></span>
+                    {label(<span className="kol-sidenav-hop-title">{cat.label}</span>)}
                   </RouteLeaf>
                 </>
+              ) : isLink && cat.external ? (
+                <ExternalLeaf to={cat.to} title={cat.title} className={rowCls}>
+                  {glyph}
+                  {label(cat.label)}
+                </ExternalLeaf>
               ) : isLink ? (
-                <RouteLeaf {...leafProps(cat.to)} className={(active) => `${rowCls}${active ? ' is-active' : ''}`}>
+                <RouteLeaf {...leafProps(cat.to)} title={cat.title} className={(active) => `${rowCls}${active ? ' is-active' : ''}`}>
                   {glyph}
-                  <span className="kol-sidenav-hop-label flex-1 min-w-0">{cat.label}</span>
+                  {label(cat.label)}
                 </RouteLeaf>
               ) : isPanel ? (
                 <button
@@ -412,26 +538,29 @@ export default function NavRailSite({
                   data-panel-trigger={cat.id}
                   className={`${rowCls} bg-transparent border-0 cursor-pointer text-left${openPanel === cat.id ? ' is-active' : ''}`}
                   aria-expanded={openPanel === cat.id}
+                  title={cat.title}
                   onClick={() => setOpenPanel((o) => (o === cat.id ? null : cat.id))}
                 >
                   {glyph}
-                  <span className="kol-sidenav-hop-label flex-1 min-w-0">{cat.label}</span>
+                  {label(cat.label)}
                 </button>
               ) : isAction ? (
                 <button
                   type="button"
                   className={`${rowCls} bg-transparent border-0 cursor-pointer text-left${cat.active ? ' is-active' : ''}`}
                   aria-pressed={!!cat.active}
+                  title={cat.title}
                   onClick={(e) => handleSelect(e, cat)}
                 >
                   {glyph}
-                  <span className="kol-sidenav-hop-label flex-1 min-w-0">{cat.label}</span>
+                  {label(cat.label)}
                 </button>
               ) : (
                 <button
                   type="button"
                   className={`${rowCls} bg-transparent border-0 cursor-pointer text-left${isActiveCat(cat) ? ' is-active' : ''}`}
                   aria-expanded={isOpen}
+                  title={cat.title}
                   /* Collapsed rail: the click meant "open this" — expand the
                    * rail AND disclose the category, or the tap is wasted on
                    * an expand that lands on a closed tree. */
@@ -445,7 +574,7 @@ export default function NavRailSite({
                   }}
                 >
                   {glyph}
-                  <span className="kol-sidenav-hop-label flex-1 min-w-0">{cat.label}</span>
+                  {label(cat.label)}
                   {/* plain wrapper span — Icon stamps inline-flex on its own
                     * element, which would outrank the rail's display:none */}
                   <span
@@ -470,6 +599,12 @@ export default function NavRailSite({
                   {!isLink && !isAction && !isPanel && isOpen && (
                     <ul className="kol-sidenav-list">{renderRows(pages, 0)}</ul>
                   )}
+                  {/* `collapsedIcons="all"` (NavRailRowProps): collapsed, an open category's icon-bearing pages show
+                    * under it as glyph rows in the hop's geometry, each named by its tooltip; expanded they are the
+                    * list's rows above. Only mounted collapsed, so the expanded tree is untouched. */}
+                  {collapsed && collapsedIcons === 'all' && isOpen && pages.length > 0 && (
+                    <ul className="kol-sidenav-tree flex flex-col gap-[2px]">{leavesOf(pages).filter((l) => l.icon).map(renderIconLeaf)}</ul>
+                  )}
                 </li>
               )
   }