@kolkrabbi/kol-component 0.36.0 → 0.38.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-component",
-  "version": "0.36.0",
+  "version": "0.38.0",
   "description": "KOL design-system components — atoms through organisms, emitting canonical kol-* classes. Pairs with @kolkrabbi/kol-theme for styling.",
   "license": "MIT",
   "type": "module",
@@ -29,7 +29,7 @@
     "@floating-ui/react": "^0.27.19",
     "embla-carousel-react": "^8.6.0",
     "react-syntax-highlighter": "^16.1.1",
-    "@kolkrabbi/kol-icons": "^0.14.0"
+    "@kolkrabbi/kol-icons": "^0.15.0"
   },
   "peerDependencies": {
     "framer-motion": "^12.0.0",

package/src/atoms/SegmentedToggle.jsx

@@ -33,7 +33,11 @@
  *   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
- *               outline shell; the inset ring marks ONLY the selected cell).
+ *               outline shell; the inset ring marks ONLY the selected cell) |
+ *               'tonal' (filled tiles, but the clicked cell marks itself by
+ *               TONE — surface-tertiary fill, no ring; 2026-08-12).
+ *               Every variant renders at the SAME pinned button-ladder
+ *               height (26/32/40) — icon or text, the box never moves.
  *   size      — mirrors Button exactly: 'sm' (26px, mono-12, 4/12 pad) |
  *               'md' (default, 32px, mono-14, 6/16 pad) | 'lg' (40px,
  *               mono-16, 8/20 pad). Same cell padding + mono type as the
@@ -62,7 +66,13 @@ export default function SegmentedToggle({ value, onChange, options = [], variant
       role={stateless ? 'group' : 'radiogroup'}
       aria-label={ariaLabel}
       onKeyDown={handleKeyDown}
-      className={['kol-seg', variant === 'filled' && 'kol-seg--filled', size !== 'md' && `kol-seg--${size}`, className].filter(Boolean).join(' ')}
+      className={[
+        'kol-seg',
+        (variant === 'filled' || variant === 'tonal') && 'kol-seg--filled',
+        variant === 'tonal' && 'kol-seg--tonal',
+        size !== 'md' && `kol-seg--${size}`,
+        className,
+      ].filter(Boolean).join(' ')}
     >
       {options.map((opt, i) => {
         const isActive = !stateless && opt.value === value

package/src/molecules/CardFeatureItem.jsx

@@ -59,7 +59,10 @@ export default function CardFeatureItem({
         {icon && <Icon name={icon} size={16} className="shrink-0" />}
       </div>
 
-      <div className={`w-full flex-1 flex items-center justify-center overflow-hidden ${aspectClass}`.trim()}>
+      {/* kol-card-feature-visual: zooms 1.03 on card hover (chrome in
+        * kol-theme — CardFeatureHoverZoom 2026-08-12); all three visual
+        * forms ride the same wrapper, reduced-motion opts out. */}
+      <div className={`kol-card-feature-visual w-full flex-1 flex items-center justify-center overflow-hidden ${aspectClass}`.trim()}>
         {visual ? (
           typeof visual === 'string' ? (
             isSvgUrl ? (
@@ -97,7 +100,7 @@ export default function CardFeatureItem({
     </>
   )
 
-  const baseClasses = `w-full flex-1 h-[304px] md:h-72 p-4 md:p-6 gap-4 ${backgroundColor} rounded border border-fg-08 flex flex-col justify-between items-start overflow-hidden`
+  const baseClasses = `kol-card-feature w-full flex-1 h-[304px] md:h-72 p-4 md:p-6 gap-4 ${backgroundColor} rounded border border-fg-08 flex flex-col justify-between items-start overflow-hidden`
 
   if (href) {
     const isExternal = href.startsWith('http') || href.startsWith('mailto')