@kolkrabbi/kol-component 0.226.0 → 0.227.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-component",
-  "version": "0.226.0",
+  "version": "0.227.0",
   "description": "KOL design-system components — atoms through organisms, emitting canonical kol-* classes. Pairs with @kolkrabbi/kol-theme for styling.",
   "license": "MIT",
   "type": "module",
@@ -35,7 +35,7 @@
     "react-dom": "^18.3.0 || ^19.0.0"
   },
   "devDependencies": {
-    "@kolkrabbi/kol-icons": "^0.28.0"
+    "@kolkrabbi/kol-icons": "^0.29.0"
   },
   "files": [
     "src",

package/src/atoms/Input.jsx

@@ -56,6 +56,9 @@ import { glyphSize } from '../hooks/glyphLadders.js'
  *     iconLeft/prefix — the paint-bar anatomy ([swatch] FFFFFF is ONE
  *     container, not two boxes; ColorSwatchFieldSizing 2026-08-12). The
  *     consumer owns the node's sizing; the shell's padding frames it.
+ *   slotRight — its trailing mirror: an interactive node inside the shell, after the unit /
+ *     suffix — a combo field's chevron (the design editor's type size, 2026-09-27: the chevron
+ *     sat OUTSIDE the field as a second control). Not aria-hidden: it is a control.
  *
  * Chrome (bg/border/padding/transition/disabled) comes from .kol-control;
  * Input owns prefix/suffix/icon layout + the inner <input> styling.
@@ -75,6 +78,7 @@ export default function Input({
   prefix,
   suffix,
   slotLeft,
+  slotRight,
   affordance,
   unit,
   iconLeft,
@@ -217,6 +221,9 @@ export default function Input({
       {suffix !== undefined && (
         <span aria-hidden="true" className="text-meta pl-1 shrink-0">{suffix}</span>
       )}
+      {slotRight && (
+        <span className="flex items-center shrink-0 pl-1 ml-auto">{slotRight}</span>
+      )}
     </label>
   )
 }

package/src/atoms/SegmentedToggle.jsx

@@ -29,7 +29,8 @@
  *               strip (canvas alignment, transform cluster); onChange is the
  *               action dispatch.
  *   onChange  — handler (newValue) => void
- *   options   — [{ value, label, ariaLabel? }]
+ *   options   — [{ value, label, ariaLabel?, tooltip? }] — a cell whose label is not a string
+ *               (a glyph) shows its `ariaLabel` as a KOL Tooltip; `tooltip` overrides it
  *   variant   — 'default' (shipped chrome: shared outer stroke + dividers,
  *               filled active cell) | 'filled' (the state law's tiles: every
  *               cell a surface-secondary tile with 1px transparent gaps, NO
@@ -53,6 +54,7 @@
  *   className — additional classes on the outer shell
  */
 import { toneClass } 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 = '' }) {
   const cellType = { xs: 'kol-mono-8', sm: 'kol-mono-12', md: 'kol-mono-14', lg: 'kol-mono-16' }[size]
@@ -86,8 +88,8 @@ export default function SegmentedToggle({ value, onChange, options = [], variant
       {options.map((opt, i) => {
         const isActive = !stateless && opt.value === value
         return (
+          <Tooltip key={opt.value} asChild label={opt.tooltip ?? (typeof opt.label === 'string' ? null : opt.ariaLabel)}>
           <button
-            key={opt.value}
             type="button"
             role={stateless ? undefined : 'radio'}
             aria-checked={stateless ? undefined : isActive}
@@ -98,6 +100,7 @@ export default function SegmentedToggle({ value, onChange, options = [], variant
           >
             {opt.label}
           </button>
+          </Tooltip>
         )
       })}
     </div>

package/src/molecules/InspectorSection.jsx

@@ -18,12 +18,31 @@
  * declaring it — that is the upgrade path if a consumer ever needs the stack
  * to vary the rule per-gap. One prop is a smaller API than a new component.
  *
+ * `pane` (editor inspector rebuild, 2026-09-27 — user: "why are we not sectioning off the panes?
+ * saying 'this is type' 'this is transform'"): the Affinity panel shape instead of a labelled form
+ * group — a titled header strip, a padded body, and a FULL-WIDTH rule between panes. Mount panes
+ * in a container with no horizontal padding; each pane pads itself, so its rule runs edge to edge.
+ *
  * @param {ReactNode} label    the group's name
  * @param {ReactNode} actions  controls on the label's row, right-aligned
  * @param {boolean}   divided  a hairline between divided siblings
+ * @param {boolean}   pane     the panel shape: header strip + body, full-width rules between panes
  * @param {string}    className
  */
-export default function InspectorSection({ label, actions = null, children, divided = false, className = '' }) {
+export default function InspectorSection({ label, actions = null, children, divided = false, pane = false, className = '' }) {
+  if (pane) {
+    return (
+      <section className={`kol-inspector-pane ${className}`.trim()}>
+        {(label || actions) && (
+          <header className="kol-inspector-pane-head">
+            {label && <h3 className="kol-inspector-pane-title">{label}</h3>}
+            {actions}
+          </header>
+        )}
+        <div className="kol-inspector-pane-body">{children}</div>
+      </section>
+    )
+  }
   return (
     <div className={`flex flex-col gap-2${divided ? ' kol-section--divided' : ''} ${className}`}>
       {/* `actions` — controls on the label's row, right-aligned (Figma's eye / plus on Fill and

package/src/molecules/SplitToolButton.jsx

@@ -140,7 +140,7 @@ const SplitToolButton = ({
         popover={popover}
         panel={false}
         focus={false}
-        className="w-max bg-surface-secondary border border-fg-08 rounded shadow-lg"
+        className="w-max bg-surface-secondary border border-oq-08 rounded shadow-lg"
       >
         {variants.map((variant) => {
           const isActive = active && variant.id === value

package/src/organisms/ToolPalette.jsx

@@ -43,7 +43,7 @@ const ToolPalette = ({
   iconComponent = Icon,
   className = '',
 }) => (
-  <div className={`flex items-center gap-1 min-w-0 overflow-x-auto ${className}`.trim()}>
+  <div className={`kol-tool-palette flex items-center gap-1 min-w-0 overflow-x-auto ${className}`.trim()}>
     {items.map((it, i) => {
       if (it.kind === 'divider') return <Divider key={`d${i}`} variant="vertical" height={20} className="mx-1.5 shrink-0" />
       if (it.kind === 'split') {