@kolkrabbi/kol-component 0.238.0 → 0.239.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-component",
-  "version": "0.238.0",
+  "version": "0.239.0",
   "description": "The core component library",
   "license": "MIT",
   "type": "module",
@@ -26,8 +26,8 @@
     "embla-carousel-react": "^8.6.0",
     "pdfjs-dist": "^6.3.289",
     "react-syntax-highlighter": "^16.1.1",
-    "@kolkrabbi/kol-markdown": "^0.1.2",
-    "@kolkrabbi/kol-search": "^0.3.0"
+    "@kolkrabbi/kol-search": "^0.3.0",
+    "@kolkrabbi/kol-markdown": "^0.1.3"
   },
   "peerDependencies": {
     "@kolkrabbi/kol-icons": ">=0.22.0",

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'} props.variant - The intent; the GROUND is `tone`. `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'} 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 {'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', 'danger', 'grey']
+  const KNOWN = ['primary', 'secondary', 'accent', 'outline', 'ghost', 'nav', 'tab', '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/molecules/TabChips.jsx

@@ -1,3 +1,5 @@
+import Button from '../atoms/Button.jsx'
+
 /**
  * TabChips — Tabs as a row of chips. the active tab is a filled chip, the rest are quiet text.
  *
@@ -10,28 +12,37 @@
  *
  * Labels render as authored. Selection is the parent's.
  *
+ * ON THE CONTROL SIZE RAMP (user 2026-10-02: *"can we make the tabtoggle align with the size ramp
+ * controls use?"*). A chip was a bare button at its own 24px, beside a 26px dropdown in the same
+ * bar. Each chip is a `Button variant="tab"` now, so `size` is the ramp's (22 · 26 · 32 · 40) and
+ * the chip's look is a Button state anything else can wear.
+ *
  * @param {Array}    tabs       `[{ id, label }]`
  * @param {string}   value      id of the active tab (controlled)
  * @param {Function} onChange   `(id) => void`
+ * @param {'xs'|'sm'|'md'|'lg'} [size='sm'] the control ramp's rung
  * @param {string}   [ariaLabel] accessible name for the strip
  * @param {string}   [className] extra classes on the row
  */
-export default function TabChips({ tabs = [], value, onChange, ariaLabel, className = '' }) {
+export default function TabChips({ tabs = [], value, onChange, size = 'sm', ariaLabel, className = '' }) {
   return (
     <div className={`flex items-center gap-1 ${className}`.trim()} role="tablist" aria-label={ariaLabel}>
       {tabs.map((t) => {
         const active = t.id === value
         return (
-          <button
+          /* a tab is selected, not pressed — the role's own attribute replaces Button's aria-pressed */
+          <Button
             key={t.id}
-            type="button"
+            variant="tab"
+            size={size}
+            pressed={active}
             role="tab"
             aria-selected={active}
+            aria-pressed={undefined}
             onClick={() => onChange?.(t.id)}
-            className={`kol-mono-12 rounded-[var(--kol-radius-sm)] px-3 py-1 transition-colors [@media(pointer:coarse)]:min-h-8 ${active ? 'bg-fg-08 text-emphasis' : 'text-meta hover:text-emphasis'}`}
           >
             {t.label}
-          </button>
+          </Button>
         )
       })}
     </div>

package/src/organisms/SectionSplit.jsx

@@ -47,7 +47,10 @@ import { minHeightClass } from './sectionHeights.js'
  * @param {ReactNode} media        image / video / interactive node for the visual column
  * @param {string}    [ratio='4/5'] aspect ratio of the media frame. THE FRAME IS BOUNDED BY THE
  *   RUNG (SectionSplitMediaBounded, 2026-08-27): its height is the section's `height` rung minus
- *   the vertical padding, its width follows the ratio (capped at the column). Before, the frame
+ *   the vertical padding, its width follows the ratio (capped at the column) — the RUNG is the
+ *   dimension that holds and the WIDTH the one that yields, so a frame can stand narrower than its
+ *   column; take a taller rung for bigger media. Below 901px, stacked, it is the other way round:
+ *   the frame is as wide as the column and its height follows the ratio. Before, the frame
  *   was as wide as its column and set the section's height itself, so `40` · `60` · `80`
  *   rendered identically — a ladder that only floors is decorative for a card with media.
  * @param {boolean}   [mediaHover=false] zoom the media on frame hover (the CardFeatureItem numbers)
@@ -251,7 +254,15 @@ export default function SectionSplit({
              * silently, which is why it was reported as a ProfileCard crop.
              * Below 901 the frame is `w-full` + ratio: width decides, height
              * follows, media never clips. ≥901 nothing moves. */
-            className={`kol-section-split-visual relative w-full max-w-full justify-self-center rounded-[var(--kol-radius-sm)] min-[901px]:h-[calc(var(--kol-section-h,60vh)_-_2*var(--kol-section-py,4rem))] ${mediaClip ? 'overflow-hidden' : ''} ${mediaHover ? 'is-hoverable' : ''} ${mediaFirst ? 'order-1' : ''} ${centred ? 'max-w-[640px]' : ''}`.replace(/\s+/g, ' ').trim()}
+            /* …AND THE WIDTH FOLLOWS AGAIN FROM 901 (section-split-frame-ratio-holds-at-desktop,
+             * kol-website 2026-10-02; user: *"why is this no longer its original ratio? its
+             * squished?"*). `w-full` was written for the stack and applied at every width, so
+             * beside the text the frame had BOTH dimensions fixed — the column's width and the
+             * rung's height — and `aspect-ratio` had nothing left to decide: a `5/4` frame
+             * rendered 2.22 at 1600 and cropped its image. From 901 the width is `auto` again:
+             * the rung sets the height, the ratio sets the width, the column caps it — the
+             * 2026-08-27 rule written on the `ratio` prop. */
+            className={`kol-section-split-visual relative w-full min-[901px]:w-auto max-w-full justify-self-center rounded-[var(--kol-radius-sm)] min-[901px]:h-[calc(var(--kol-section-h,60vh)_-_2*var(--kol-section-py,4rem))] ${mediaClip ? 'overflow-hidden' : ''} ${mediaHover ? 'is-hoverable' : ''} ${mediaFirst ? 'order-1' : ''} ${centred ? 'max-w-[640px]' : ''}`.replace(/\s+/g, ' ').trim()}
             style={{ aspectRatio: ratio }}
           >
             {media ?? (placeholder === true