@kolkrabbi/kol-component 0.19.0 → 0.20.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-component",
-  "version": "0.19.0",
+  "version": "0.20.1",
   "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

@@ -1,5 +1,6 @@
 import { isValidElement } from 'react'
 import { Icon } from '@kolkrabbi/kol-icons'
+import { glyphSize } from '../hooks/glyphLadders.js'
 
 /**
  * Button — canonical KOL button. Emits kol-btn* classes (CSS in @kol/theme).
@@ -20,7 +21,8 @@ import { Icon } from '@kolkrabbi/kol-icons'
  * @param {string} props.iconOnlyHover - Icon to show on hover (icon-only)
  * @param {boolean} props.animateIcon - Disable default hover states to focus on icon animation
  * @param {boolean} props.quiet - Dimmed at rest, brightens on hover; stays dimmed when disabled. For secondary icon-only chrome.
- * @param {number} props.iconSize - Size of the icon in pixels (default: auto by size)
+ * @param {number} props.iconSize - Size of the icon in pixels (default: auto by size — SOLO when iconOnly, ADJACENT otherwise)
+ * @param {'sm'|'full'} props.radius - sm (default, the system's radius token) | full (a full round). Two values, nothing between — mirrors IconFrame, and a round control is its own chrome idiom (edge-straddling controls, avatars), the only sanctioned exception to the hard radius invariant.
  * @param {number} props.iconGap - Gap between icon and text (default: 8)
  * @param {string} props.href - Link destination (makes it an <a>)
  * @param {Function} props.onClick - Click handler (makes it a <button>)
@@ -42,6 +44,7 @@ const Button = ({
   iconRightHover,
   iconOnly,
   iconOnlyHover,
+  radius = 'sm',
   animateIcon = false,
   quiet = false,
   iconSize,
@@ -57,7 +60,11 @@ const Button = ({
   pressed,
   ...props
 }) => {
-  const resolvedIconSize = iconSize ?? (size === 'sm' ? 14 : size === 'lg' ? 18 : 16)
+  // Two ladders, split on whether a label sits beside the glyph. An icon-only
+  // 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))
 
   // `control` is a legacy alias for `ghost` (kept so web call-sites passing
   // variant="control" keep working post-migration).
@@ -97,7 +104,12 @@ const Button = ({
   // .kol-btn-icon replaces the old iconOnly INLINE style — inline display
   // beat every consumer utility (lg:hidden could never hide the button).
   const iconOnlyClass = iconOnly ? 'kol-btn-icon' : ''
-  const combinedClass = `kol-btn ${variantClass} ${sizeClass} ${animateClass} ${quietClass} ${pressedClass} ${iconOnlyClass} ${className}`.trim().replace(/\s+/g, ' ')
+
+  // `sm` is the default and carries no class — it's on .kol-btn itself.
+  // The rule for `full` is shared with .kol-icon-frame-radius-full, one
+  // selector, so the two controls can never disagree on the value.
+  const radiusClass   = radius === 'full' ? 'kol-btn-radius-full' : ''
+  const combinedClass = `kol-btn ${variantClass} ${sizeClass} ${animateClass} ${quietClass} ${pressedClass} ${iconOnlyClass} ${radiusClass} ${className}`.trim().replace(/\s+/g, ' ')
 
   // Render icon with optional hover state
   const renderIcon = (iconName, iconHoverName) => {

package/src/atoms/IconFrame.jsx

@@ -1,4 +1,5 @@
 import { Icon } from '@kolkrabbi/kol-icons'
+import { SOLO } from '../hooks/glyphLadders.js'
 
 /**
  * IconFrame — a STATIC square frame holding one icon.
@@ -51,7 +52,9 @@ import { Icon } from '@kolkrabbi/kol-icons'
  *                            square is unaffected; only the centred glyph moves.
  * @param {string} className  escape hatch
  */
-const GLYPH = { sm: 16, md: 20, lg: 24 }
+// The solo-glyph ladder, from its one source. This was a local transcription
+// until component 0.20.0 — see hooks/glyphLadders.js for why that mattered.
+const GLYPH = SOLO
 
 export default function IconFrame({
   name,

package/src/atoms/Input.jsx

@@ -1,4 +1,5 @@
 import { Icon } from '@kolkrabbi/kol-icons'
+import { glyphSize } from '../hooks/glyphLadders.js'
 
 /**
  * Input — single-input atom built on the .kol-control shell.
@@ -31,7 +32,6 @@ import { Icon } from '@kolkrabbi/kol-icons'
  */
 
 const SIZE_TYPE = { sm: 'kol-mono-12', md: 'kol-mono-14', lg: 'kol-mono-16' }
-const ICON_SIZE = { sm: 14, md: 14, lg: 18 }
 
 export default function Input({
   type = 'text',
@@ -53,7 +53,12 @@ export default function Input({
 }) {
   const isNumber = type === 'number'
   const fixedChars = typeof chars === 'number'
-  const resolvedIconSize = iconSize ?? ICON_SIZE[size] ?? 14
+  // The text-adjacent ladder — an Input's icon sits in the rung's line box
+  // beside the value, exactly like a labelled Button's. `.kol-control-*` and
+  // `.kol-btn-*` carry identical padding + type per rung, so the glyph is the
+  // same too. This was a local ICON_SIZE with `md: 14` until 0.20.1, the last
+  // of the four transcriptions (sm and lg had always agreed).
+  const resolvedIconSize = iconSize ?? glyphSize(size)
 
   // ghost folds into outline (2026-07-08 chrome law): one secondary treatment.
   const resolvedVariant = variant === 'ghost' ? 'outline' : variant

package/src/hooks/glyphLadders.js

@@ -0,0 +1,39 @@
+/**
+ * THE two glyph ladders. One source for the sizes every icon-bearing control
+ * resolves against.
+ *
+ * Plain constants, not hooks — they live here because src/hooks is the
+ * taxonomy's only non-component folder (same reason as cssVar.js).
+ *
+ * The ladders split on ONE question: is there a label beside the glyph?
+ *
+ *   SOLO      an icon alone in a pinned square (28/32/36) — takes the room
+ *   ADJACENT  an icon inside a rung's line box, beside a label
+ *
+ * Stated in the DS before this file existed — ThemeToggle.jsx:40 ("solo
+ * 16/20/24, the pinned-square pairing") and IconFrame.jsx ("the solo-glyph
+ * ladder against the pinned squares 28/32/36"). This file is where they stop
+ * being transcribed.
+ *
+ * Why it exists: the same two ladders were re-typed in four places
+ * (Button, IconFrame, Input, Tag) and had already drifted. Button's icon-only
+ * branch took the ADJACENT ladder — a 14px glyph in a 28px square where the
+ * law says 16 — which is exactly what independent transcriptions produce.
+ * framework 0.10.3 fixed the mirror of this bug (hop-bare took SOLO while
+ * carrying a label) and nothing connected the two.
+ */
+
+/** Icon alone in a pinned square. Pairs with squares 28 · 32 · 36. */
+export const SOLO = { sm: 16, md: 20, lg: 24 }
+
+/** Icon beside a label, inside the rung's line box. */
+export const ADJACENT = { sm: 14, md: 16, lg: 18 }
+
+/**
+ * Resolve a glyph size. `solo` picks the ladder; `size` indexes it.
+ * Falls back to the md rung so an unknown size never yields undefined.
+ */
+export function glyphSize(size, solo = false) {
+  const ladder = solo ? SOLO : ADJACENT
+  return ladder[size] ?? ladder.md
+}