@kolkrabbi/kol-component 0.174.0 → 0.176.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-component",
-  "version": "0.174.0",
+  "version": "0.176.0",
   "description": "KOL design-system components — atoms through organisms, emitting canonical kol-* classes. Pairs with @kolkrabbi/kol-theme for styling.",
   "license": "MIT",
   "type": "module",

package/src/atoms/Button.jsx

@@ -12,13 +12,13 @@ import { glyphSize } from '../hooks/glyphLadders.js'
  *
  * @param {Object} props
  * @param {ReactNode} props.children - Button content
- * @param {'primary'|'secondary'|'accent'|'outline'|'ghost'|'nav'|'danger'|'grey'|'control'} props.variant - Visual variant. `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 {'primary'|'secondary'|'accent'|'outline'|'ghost'|'nav'|'danger'|'grey'|'control'} props.variant - 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
  * @param {string} props.iconLeftHover - Icon to show on hover (left position)
  * @param {string} props.iconRightHover - Icon to show on hover (right position)
- * @param {'default'|'sunken'} props.tone - `sunken` = the control set's dark well + fg-96 ink (ControlToneSunken); `inverse` aliased
+ * @param {'primary'|'secondary'|'outline'|'ghost'|'grey'|'sunken'} props.tone - the ground (tone-is-the-ground-axis, 2026-09-03) — wins over `variant` on the same element; unset = inherit the wrapper's. `sunken` = the control set's dark well + fg-96 ink (ControlToneSunken); `inverse` aliased
  * @param {string} props.iconOnly - Icon name for icon-only button
  * @param {string} props.iconOnlyHover - Icon to show on hover (icon-only)
  * @param {boolean} props.animateIcon - Disable default hover states to focus on icon animation
@@ -38,7 +38,7 @@ import { glyphSize } from '../hooks/glyphLadders.js'
  */
 const Button = ({
   children,
-  variant = 'primary',
+  variant,
   size = 'md',
   iconLeft,
   iconRight,
@@ -73,27 +73,16 @@ const Button = ({
   // variant="control" keep working post-migration).
   const resolvedVariant = variant === 'control' ? 'ghost' : variant
 
-  const variantClass = resolvedVariant === 'primary'
-    ? 'kol-btn-primary'
-    : resolvedVariant === 'accent'
-    ? 'kol-btn-accent'
-    : resolvedVariant === 'outline'
-    ? 'kol-btn-outline'
-    : resolvedVariant === 'ghost'
-    ? 'kol-btn-ghost'
-    : resolvedVariant === 'danger'
-    ? 'kol-btn-danger'
-    : resolvedVariant === 'grey'
-    ? 'kol-btn-grey'
-    /* `nav` — transparent box, oq-64 ink (2026-08-01). The class had lived in
-     * the theme since the shell landed with NO component able to emit it, so
-     * every consumer that wanted this exact weight hand-wrote the box instead:
-     * that orphan is the direct cause of the four-container header. It is the
-     * chrome rung — one step brighter than `ghost` at oq-48 — and it is what
-     * `text-fg-64` meant every time a call site typed it. */
-    : resolvedVariant === 'nav'
-    ? 'kol-btn-nav'
-    : 'kol-btn-secondary'
+  /* THE GROUND IS A TONE (tone-is-the-ground-axis, 2026-09-03). No variant →
+   * NO class: the button paints from the `--kol-tone-*` properties it inherits
+   * from a toned wrapper, else the theme's primary fallback — that is how a
+   * set gets its tone "already set". An explicit variant stamps its class,
+   * which is an alias of the tone (primary · secondary · outline · ghost ·
+   * grey) or its own bundle (nav · danger · accent); `nav` is ghost's chrome
+   * rung, oq-80 ink + aria-current — it had lived in the theme with no
+   * component able to emit it, the direct cause of the four-container header. */
+  const KNOWN = ['primary', 'secondary', 'accent', 'outline', 'ghost', 'nav', 'danger', 'grey']
+  const variantClass = !resolvedVariant ? '' : KNOWN.includes(resolvedVariant) ? `kol-btn-${resolvedVariant}` : 'kol-btn-secondary'
 
   // Add size class — pairs the padding rule with its mono type class.
   const sizeClass = size === 'sm'

package/src/atoms/IconFrame.jsx

@@ -60,7 +60,7 @@ import { toneClass } from '../utilities/tone.js'
  * Want the wash, the pressed fill or the disabled dim? That is `Button`.
  *
  * @param {string} name       icon name (kol-icons)
- * @param {string} variant    primary|secondary|accent|outline|ghost|nav|grey|danger
+ * @param {string} variant    primary|secondary|accent|outline|ghost|nav|grey|danger — unset inherits the nearest `kol-tone-*` wrapper's tone, else secondary
  * @param {string} size       xs|sm|md|lg — square + glyph together (xs = 20px square, 12 glyph; the panel rung, 2026-09-01)
  * @param {string} radius     sm (default, the system's 4px) | full (9999px).
  *                            Two values, nothing between: a round frame is its
@@ -78,7 +78,7 @@ const GLYPH = SOLO
 
 export default function IconFrame({
   name,
-  variant = 'secondary',
+  variant,
   size = 'md',
   radius = 'sm',
   iconSize = null,
@@ -92,7 +92,8 @@ export default function IconFrame({
   const radiusCls = radius === 'full' ? ' kol-icon-frame-radius-full' : ''
   const resolvedIconSize = iconSize ?? GLYPH[size] ?? GLYPH.md
   /* `tone="sunken"` (ControlToneSunken, 2026-08-28) — the control set's dark well + fg-96 ink, no states, as ever */
-  const cls = `kol-icon-frame kol-icon-frame-${variant} kol-icon-frame-${size}${radiusCls} ${toneClass(tone)} ${className}`.replace(/\s+/g, ' ').trim()
+  /* no variant → no class: the frame inherits a wrapper's tone, else secondary (2026-09-03) */
+  const cls = `kol-icon-frame${variant ? ` kol-icon-frame-${variant}` : ''} kol-icon-frame-${size}${radiusCls} ${toneClass(tone)} ${className}`.replace(/\s+/g, ' ').trim()
   const glyph = <Icon name={name} size={resolvedIconSize} />
 
   /* The element follows the affordance, and the CLASS is identical in all three

package/src/atoms/Input.jsx

@@ -6,7 +6,8 @@ import { glyphSize } from '../hooks/glyphLadders.js'
 /**
  * Input — single-input atom built on the .kol-control shell.
  *
- *   variant="filled" (default) — persistent solid bg (= button primary chrome)
+ *   variant unset (default)    — the nearest `kol-tone-*` wrapper's tone, else filled
+ *   variant="filled"           — persistent solid bg (= button primary chrome)
  *   variant="outline"          — bordered, transparent bg — THE secondary
  *                                treatment (2026-07-08 chrome law: one
  *                                secondary, always subordinate to filled)
@@ -61,7 +62,7 @@ export default function Input({
   value,
   onChange,
   onCommit,
-  variant = 'filled',
+  variant,
   tone = 'default',
   size = 'md',
   chars,
@@ -95,7 +96,8 @@ export default function Input({
 
   const shellCls = [
     'kol-control',
-    `kol-control--${resolvedVariant}`,
+    /* no variant → no modifier: the shell inherits a wrapper's tone, else filled (2026-09-03) */
+    resolvedVariant && `kol-control--${resolvedVariant}`,
     `kol-control-${size}`,
     SIZE_TYPE[size],
     'cursor-text',

package/src/atoms/ViewToggle.jsx

@@ -78,7 +78,7 @@ const ViewToggle = ({
    * consumer subtracted it with a `-ml-1` on the neighbour. `-mx-1` draws the padding inward from the
    * declared box — the chips sit where the box says, the well bleeds 4px into the gap. */
   const containerClasses = isIconVariant
-    ? `kol-view-toggle inline-flex items-center gap-1 p-1 -mx-1 bg-surface-secondary rounded ${toneClass(tone)} ${className}`.replace(/\s+/g, ' ').trim()
+    ? `kol-view-toggle inline-flex items-center gap-1 p-1 -mx-1 rounded ${toneClass(tone)} ${className}`.replace(/\s+/g, ' ').trim()
     : `flex gap-2 ${className}`
 
   const buttonClasses = (isActive) => {
@@ -95,7 +95,7 @@ const ViewToggle = ({
      * hover; that's deliberately gone.) */
     return isActive
       ? `kol-control kol-control--filled kol-control-${size} kol-mono-${size === 'md' ? '14' : '12'}`
-      : `kol-control kol-control-${size} kol-mono-${size === 'md' ? '14' : '12'} text-meta hover:text-emphasis`
+      : `kol-control kol-control--plain kol-control-${size} kol-mono-${size === 'md' ? '14' : '12'} text-meta hover:text-emphasis`
   }
 
   return (

package/src/molecules/Dropdown.jsx

@@ -1,5 +1,5 @@
-import { useEffect, useRef, useState } from 'react'
-import { toneClass } from '../utilities/tone.js'
+import { useEffect, useLayoutEffect, useRef, useState } from 'react'
+import { toneClass, TONE_VARS } from '../utilities/tone.js'
 import { Icon } from '@kolkrabbi/kol-icons'
 import { MenuDropdownItem } from './MenuItem.jsx'
 import { PopoverPanel, usePopover } from '../utilities/Popover.jsx'
@@ -13,7 +13,9 @@ import { indicatorSize } from '../hooks/glyphLadders.js'
  * active, focus ring all come from the button rules in kol-theme.
  * `.kol-dd-*` classes only add trigger layout + the open/panel fusion.
  *
- *   variant="primary" (default) — filled trigger; open panel continues the
+ *   variant unset (default)     — the tone of the nearest `kol-tone-*` wrapper,
+ *     else primary (tone-is-the-ground-axis, 2026-09-03)
+ *   variant="primary"           — filled trigger; open panel continues the
  *     same fill (one piece: no border, no gap, hairline divider inside)
  *   variant="grey"              — oq-12 filled trigger (opaque per the fill
  *                                 law); panel continues it
@@ -46,7 +48,7 @@ const Dropdown = ({
   value,
   onChange,
   size,
-  variant = 'primary',
+  variant,
   tone = 'default',
   /* DropdownGhostWidthAndListHeight (kol-mirror 2026-08-28 — user, on the
    * studio's 30-option Source picker in a ~300px shelf: "1 it's way too tall,
@@ -80,6 +82,22 @@ const Dropdown = ({
 }) => {
   const [isOpen, setIsOpen] = useState(defaultOpen)
 
+  /* THE PANEL IS PORTALLED (FloatingPortal → body), so a tone the trigger
+   * INHERITS from a toned wrapper never reaches it through the cascade — the
+   * exact failure the 2026-08-30 page-wash attempt hit. On open, copy the
+   * trigger's RESOLVED `--kol-tone-*` onto the panel as inline style: an
+   * explicit variant / tone class on the panel sets the same values, and the
+   * ambient case is the one only this can serve. */
+  const triggerRef = useRef(null)
+  const [ambient, setAmbient] = useState(null)
+  useLayoutEffect(() => {
+    if (!isOpen || !triggerRef.current) return
+    const cs = getComputedStyle(triggerRef.current)
+    const vars = {}
+    for (const v of TONE_VARS) { const val = cs.getPropertyValue(v).trim(); if (val) vars[v] = val }
+    setAmbient(vars)
+  }, [isOpen])
+
   // sm everywhere unless explicitly overridden (see docblock size law).
   const resolvedSize = size || 'sm'
 
@@ -141,7 +159,7 @@ const Dropdown = ({
     'kol-btn',
     /* grey is dropdown-only chrome (2026-07-15) — no kol-btn-* class so it
      * never leaks into Button's variant set */
-    resolvedVariant === 'grey' ? 'kol-dd-trigger--grey' : `kol-btn-${resolvedVariant}`,
+    resolvedVariant === 'grey' ? 'kol-dd-trigger--grey' : resolvedVariant && `kol-btn-${resolvedVariant}`,
     `kol-btn-${resolvedSize}`,
     SIZE_TYPE[resolvedSize],
     'kol-dd-trigger',
@@ -153,7 +171,7 @@ const Dropdown = ({
   return (
     <div className={`kol-dd-root relative inline-block align-middle ${className}`}>
       <button
-        ref={popover.refs.setReference}
+        ref={(el) => { triggerRef.current = el; popover.refs.setReference(el) }}
         {...popover.getReferenceProps()}
         type="button"
         className={triggerCls}
@@ -181,8 +199,9 @@ const Dropdown = ({
         popover={popover}
         panel={false}
         focus={false}
-        className={`kol-dd-panel kol-dd-panel--${resolvedVariant} ${toneClass(tone)}`.trim()}
+        className={`kol-dd-panel ${resolvedVariant ? `kol-dd-panel--${resolvedVariant}` : ''} ${toneClass(tone)}`.replace(/\s+/g, ' ').trim()}
         style={{
+          ...ambient,
           '--kol-dd-max-rows': maxRows ?? 10,
           /* xs rows are 20px; the panel's max-height reads the row height */
           ...(resolvedSize === 'xs' && rowHeight == null ? { '--kol-dd-row-h': '20px' } : null),

package/src/molecules/PageHeader.jsx

@@ -1,3 +1,4 @@
+import SectionText from './SectionText.jsx'
 /**
  * PageHeader — the page's masthead: an optional eyebrow, the title, and a
  * sub-line.
@@ -64,6 +65,8 @@
  * The bottom rhythm is `--kol-page-header-mb` (default 40px): inline, as before, but through a
  * variable a consumer can re-point where an inline literal could only be `!important`-ed.
  */
+/* the title role per size and voice — the one thing PageHeader knows that the
+ * base does not, because the base's ladder is the SECTION scale */
 const TITLE = {
   sans: { sm: 'kol-sans-heading-03', md: 'kol-sans-display-03', lg: 'kol-sans-display-02' },
   mono: { sm: 'kol-mono-heading-03', md: 'kol-mono-display-03', lg: 'kol-mono-display-02' },
@@ -73,63 +76,29 @@ const LEDE = { app: 'kol-mono-14', site: 'kol-sans-body-01' }
 
 export default function PageHeader({ eyebrow, title, subtitle, actions, subtitleMaxWidth, size = 'md', voice = 'sans', register = 'app', titleClass, className = '' }) {
   const roles = TITLE[voice] ?? TITLE.sans
-  const h1 = <h1 className={`text-fg-96 ${titleClass ?? roles[size] ?? roles.md}`}>{title}</h1>
-  const lede = subtitle && <p className={`text-oq-64 ${LEDE[register] ?? LEDE.app} min-w-0`} style={{ marginTop: actions ? undefined : 12, maxWidth: subtitleMaxWidth }}>{subtitle}</p>
-  /* The cluster shares a baseline row with the lede (or the title): flexbox
-     exposes a flex item's FIRST baseline, so putting them in one row is the one
-     way to land on the subtitle's line rather than the h1's.
-     
-     AND IT CONTRIBUTES NO HEIGHT (PageHeaderActionsGrowsBlock, kol-fxr
-     2026-08-28). A flex row takes its tallest child, so a cluster of `sm`
-     controls (28px since kol-theme 0.90.0) against a one-line `kol-mono-14`
-     lede (18px) made the masthead 10px taller — measured, monitor's `/` at 65.2
-     against fxr's `/settings` at 75.2 with identical titles. The masthead is the
-     one block every page of an app shares, so a page with a control cluster sat
-     10px lower than every page without one, with no way to opt out.
-     
-     `h-0` + `self-center` is the fix and it is not a magic number: a zero-height
-     box centred on the row makes the children overflow it symmetrically, so the
-     row's height is the TEXT's and the cluster is free at any rung (the gap is
-     10px at `sm`, 14 at `md` — a constant would have been wrong). Horizontal
-     layout is untouched: the box still takes its width, so `justify-between`
-     holds and a long lede cannot run under the controls. */
-  const cluster = actions && <div className="flex items-center gap-4 shrink-0 h-0 self-center">{actions}</div>
   return (
     /* the block owns its own rhythm — margins inline, never in a shared type
        class, which leaks estate-wide (ShellHeaderFilterRefinements, 2026-08-15) */
-    <header className={`flex flex-col ${className}`.trim()} style={{ marginBottom: 'var(--kol-page-header-mb, 40px)' }}>
-      {eyebrow && (
-        /* HELPER, not mono (user ruling 2026-08-15). An eyebrow is single-line
-           chrome — that is the whole definition of the `kol-helper-*` ramp, and
-           it carries its own tracking, so no inline letter-spacing here.
-           Uppercase, and off `fg-48`: under half the ink read as disabled
-           rather than quiet, and this is a live label, not a footnote. */
-        <p
-          className="text-oq-64 kol-helper-12"
-          style={{ marginBottom: 12, textTransform: 'uppercase' }}
-        >
-          {eyebrow}
-        </p>
-      )}
-      {actions && subtitle ? (
-        <>
-          {h1}
-          <div className="flex items-baseline justify-between gap-6" style={{ marginTop: 12 }}>
-            {lede}
-            {cluster}
-          </div>
-        </>
-      ) : actions ? (
-        <div className="flex items-baseline justify-between gap-6">
-          {h1}
-          {cluster}
-        </div>
-      ) : (
-        <>
-          {h1}
-          {lede}
-        </>
-      )}
-    </header>
+    <SectionText
+      eyebrow={eyebrow}
+      headline={title}
+      headlineAs="h1"
+      headlineClass={`text-fg-96 ${titleClass ?? roles[size] ?? roles.md}`}
+      body={subtitle}
+      bodyClass={`text-oq-64 ${LEDE[register] ?? LEDE.app} min-w-0`}
+      actions={actions}
+      actionsPlacement="inline"
+      actionsClass="flex items-center gap-4"
+      /* HELPER, not mono (user ruling 2026-08-15). An eyebrow is single-line
+         chrome — the whole definition of the `kol-helper-*` ramp — and it
+         carries its own tracking, so no inline letter-spacing. Off `oq-64`:
+         under half the ink read as disabled rather than quiet, and this is a
+         live label, not a footnote. */
+      eyebrowClass="kol-helper-12 text-oq-64"
+      gap="gap-3"
+      slotStyle={{ body: { maxWidth: subtitleMaxWidth } }}
+      className={className}
+      style={{ marginBottom: 'var(--kol-page-header-mb, 40px)' }}
+    />
   )
 }

package/src/molecules/SearchInput.jsx

@@ -77,7 +77,7 @@ export default function SearchInput({
   shortcutHint,
   onFocus,
   size = 'md',
-  variant = 'filled',
+  variant,
   tone = 'default',
   bare = false,
   expanding = false,
@@ -157,7 +157,7 @@ export default function SearchInput({
            control: 22 · 26 · 32 · 40 (01-foundations/09-sizes.md). This was a
            hardcoded 36 — the LG square — so an expanding search sat beside a
            `kol-btn-md` filter button at two different sizes. */
-        className={`kol-expand flex items-center rounded-full ${isOpen ? (toneClass(tone) ? 'kol-tone-sunken' : 'bg-fg-04') : ''} ${className}`.trim()}
+        className={`kol-expand flex items-center rounded-full ${isOpen ? `kol-expand--open ${toneClass(tone)}` : ''} ${className}`.replace(/\s+/g, ' ').trim()}
         style={{ height: isOpen ? fieldH : square, width: isOpen ? expandedWidth : square }}
       >
         {/* THE GLYPH IS THE CLOSED STATE, and only that (user ruling
@@ -201,7 +201,7 @@ export default function SearchInput({
       /* kol-control--bare: zero-chrome marker so the theme's coarse-pointer
        * 16px floor covers this body plan too (OverlaySearchFieldZoomsIOS) */
       ? 'kol-control--bare flex w-full gap-2.5 px-4 py-3'
-      : `kol-control kol-control--${variant} kol-control-${size} gap-2${toneClass(tone) ? ' kol-tone-sunken' : ''}`,
+      : `kol-control${variant ? ` kol-control--${variant}` : ''} kol-control-${size} gap-2${toneClass(tone) ? ` ${toneClass(tone)}` : ''}`,
     'items-center cursor-text',
     SIZE_TYPE[size],
     className,

package/src/molecules/SectionText.jsx

@@ -71,24 +71,59 @@ export default function SectionText({
   labelClass,
   bodyClass = 'kol-section-text-body',
   actionsClass = 'flex flex-wrap gap-4',
+  /* ACTIONS ON THE BODY'S BASELINE (page-header-one-masthead, 2026-09-03).
+   * Default `below` is the section stack every organism renders. `inline` puts
+   * the cluster in ONE flex row with the body, which is the only way to land it
+   * on the body's first baseline rather than the headline's — flexbox exposes a
+   * flex item's first baseline, so they have to share a row.
+   *
+   * The cluster contributes NO HEIGHT there: a flex row takes its tallest
+   * child, so `sm` controls (26px) against a one-line `kol-mono-14` (18px) made
+   * the block 10px taller — measured across two apps, and the masthead is the
+   * one block every page shares, so a page with a control cluster sat lower
+   * than one without. `h-0 self-center` makes the children overflow a
+   * zero-height box symmetrically; the row's height is the TEXT's, at any rung.
+   * Horizontal layout is untouched, so a long body cannot run under the
+   * controls (PageHeaderTrailingSlot / PageHeaderActionsGrowsBlock, carried in
+   * from `PageHeader` when it became a composition of this base). */
+  actionsPlacement = 'below',
   slotClass = {},
   slotStyle = {},
   className = '',
+  /* the ROOT's own style — a composition that owns its rhythm needs it
+     (PageHeader's `--kol-page-header-mb`). `slotStyle` reaches the slots; this
+     was the one box it could not reach. */
+  style,
 }) {
   /* `label` / `labelClass` / slot key `label` = aliases of `eyebrow` (2026-08-27) */
   const eb = eyebrow ?? label
   const ebClass = eyebrowClass ?? labelClass ?? 'kol-helper-12 text-meta'
   const cls = (base, slot) => `${base} ${slotClass[slot] ?? (slot === 'eyebrow' ? slotClass.label : undefined) ?? ''}`.trim()
   const alignCls = align === 'center' ? 'items-center text-center' : 'items-start text-left'
+  const inlineActions = actionsPlacement === 'inline' && !!actions && !!body
+  const bodyNode = body && (typeof body === 'string'
+    ? <p className={cls(bodyClass, 'body')} style={slotStyle.body}>{body}</p>
+    : <div className={cls(bodyClass, 'body')} style={slotStyle.body}>{body}</div>)
+  const cluster = actions && (
+    <div className={cls(`${actionsClass} shrink-0 h-0 self-center`, 'actions')} style={slotStyle.actions}>{actions}</div>
+  )
   return (
-    <div className={`kol-section-text flex flex-col ${gap} ${alignCls} ${className}`.replace(/\s+/g, ' ').trim()}>
+    <div className={`kol-section-text flex flex-col ${gap} ${alignCls} ${className}`.replace(/\s+/g, ' ').trim()} style={style}>
       {/* `kol-section-text-eyebrow` = uppercase by ROLE (kol-theme ≥0.55.0);
         * `labelClass` is the voice riding beside it */}
       {eb && <span className={cls(`kol-section-text-eyebrow ${ebClass}`, 'eyebrow')} style={slotStyle.eyebrow ?? slotStyle.label}>{eb}</span>}
       {headline && <Headline className={cls(`kol-section-text-headline ${headlineClass ?? (HEADLINE_ROLE[headlineSize] ?? HEADLINE_ROLE['heading-02'])}${headlineCase === 'upper' ? ' kol-section-text-caps' : ''}`, 'headline')} style={slotStyle.headline}>{headline}</Headline>}
-      {body && (typeof body === 'string' ? <p className={cls(bodyClass, 'body')} style={slotStyle.body}>{body}</p> : <div className={cls(bodyClass, 'body')} style={slotStyle.body}>{body}</div>)}
+      {bodyNode && (inlineActions
+        ? (
+          <div className="flex items-baseline justify-between gap-6">
+            {bodyNode}
+            {cluster}
+          </div>
+        )
+        : bodyNode)}
       {children}
-      {actions && <div className={cls(actionsClass, 'actions')} style={slotStyle.actions}>{actions}</div>}
+      {/* inline with no body → the cluster shares the HEADLINE's row instead */}
+      {actions && !inlineActions && <div className={cls(actionsClass, 'actions')} style={slotStyle.actions}>{actions}</div>}
     </div>
   )
 }

package/src/utilities/tone.js

@@ -1,8 +1,31 @@
 /**
- * toneClass — the control set's ONE sunken tone (ControlToneSunken,
- * kol-website 2026-08-28; user ruling: it is not "inverse" — the control does
- * not invert anything, it sits BELOW the plane it is on — call it `sunken`).
- * `inverse` (0.117.0's name) is an alias: every consumer on it renders the same
- * pixel. The rules are kol-theme's `.kol-tone-sunken`.
+ * toneClass — the control set's TONE, six values (tone-is-the-ground-axis,
+ * kol-client-olina 2026-09-03; the six-tone list is the user's).
+ *
+ *   primary · secondary · outline · ghost · grey · sunken
+ *
+ * A tone is a ground-and-ink bundle — `--kol-tone-*` custom properties in
+ * kol-theme (kol-components-molecules.css, TONE) that every control paints
+ * from. `default` is NOT a tone: it is the absence of one — the control
+ * inherits its wrapper's tone (one `kol-tone-*` class on any ancestor), else
+ * its family's fallback. That is the whole mechanism of "get a set with it
+ * already set": nothing is stamped, so the inheritance is not blocked.
+ *
+ * `inverse` is `sunken`'s alias (0.117.0's name — ControlToneSunken,
+ * kol-website 2026-08-28; user ruling: the control does not invert anything,
+ * it sits BELOW the plane it is on).
  */
-export const toneClass = (tone) => (tone === 'sunken' || tone === 'inverse' ? 'kol-tone-sunken' : '')
+export const TONES = ['primary', 'secondary', 'outline', 'ghost', 'grey', 'sunken']
+
+export const toneClass = (tone) =>
+  tone === 'inverse' ? 'kol-tone-sunken' : TONES.includes(tone) ? `kol-tone-${tone}` : ''
+
+/* the properties a bundle sets — Dropdown copies them from its trigger onto
+ * the PORTALLED panel, which the cascade cannot reach */
+export const TONE_VARS = [
+  'bg', 'image', 'fg', 'border',
+  'hover-bg', 'hover-image', 'hover-fg', 'hover-border',
+  'active-bg', 'active-image',
+  'pressed-bg', 'pressed-image', 'pressed-fg',
+  'panel-bg', 'panel-border-w', 'panel-border',
+].map((k) => `--kol-tone-${k}`)