@kolkrabbi/kol-component 0.96.0 → 0.97.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-component",
-  "version": "0.96.0",
+  "version": "0.97.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/molecules/SectionCardItem.jsx

@@ -25,10 +25,10 @@ import { Icon } from '@kolkrabbi/kol-icons'
  * author strings in their final case at the call site.
  *
  * @param {ReactNode} title            header heading (kol-helper-16)
- * @param {string}    icon             Icon name for the header (16px); also the 96px no-visual fallback
- * @param {string|ReactNode} visual    image URL, `.svg` mask URL, or inline node
+ * @param {string}    icon             Icon name for the header (16px)
+ * @param {string|ReactNode} visual    image URL, `.svg` mask URL, or inline node; NONE = a text-only tile (title + description, min-h 180, the .feature-card frame/hover)
  * @param {ReactNode} description      footer line (kol-mono-12, muted)
- * @param {string}    backgroundColor  card background utility class
+ * @param {string}    backgroundColor  card background utility class (default: bg-surface-primary with a visual, transparent text-only)
  * @param {string}    href             link target; `http*`/`mailto` → new tab, else plain same-tab anchor
  * @param {Function}  onNavigate       (event) => void — click seam on the same-tab anchor (SPA intercept)
  * @param {'auto'|'9/6'|'10/6'|'16/9'|'1/1'} imageAspectRatio  aspect class on the visual middle
@@ -39,7 +39,7 @@ export default function SectionCardItem({
   icon,
   visual,
   description,
-  backgroundColor = 'bg-surface-primary',
+  backgroundColor,
   href,
   onNavigate,
   imageAspectRatio = 'auto',
@@ -48,6 +48,11 @@ export default function SectionCardItem({
   style,
 }) {
   const isSvgUrl = typeof visual === 'string' && visual.endsWith('.svg')
+  /* TEXT-ONLY (FoundrySpecimenSections, 2026-08-27): no `visual` = a title +
+   * description tile — the frame and hover of kol-website's .feature-card, no
+   * 96px icon fallback. Hover only, never a persistent selected state. */
+  const textOnly = visual == null
+  const bg = backgroundColor ?? (textOnly ? 'bg-transparent' : 'bg-surface-primary')
 
   const aspectClasses = {
     'auto': '',
@@ -58,7 +63,15 @@ export default function SectionCardItem({
   }
   const aspectClass = aspectClasses[imageAspectRatio] || ''
 
-  const content = (
+  const content = textOnly ? (
+    <>
+      <div className="w-full flex items-start justify-between gap-2">
+        <h3 className="kol-helper-16">{title}</h3>
+        {icon && <Icon name={icon} size={16} className="shrink-0" />}
+      </div>
+      <p className="kol-mono-12 text-fg-48">{description}</p>
+    </>
+  ) : (
     <>
       <div className="w-full flex items-center justify-between gap-2">
         <h3 className="kol-helper-16">{title}</h3>
@@ -106,7 +119,9 @@ export default function SectionCardItem({
     </>
   )
 
-  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 ${className}`.trim()
+  const baseClasses = textOnly
+    ? `kol-card-feature kol-card-feature--text w-full flex-1 min-h-[180px] p-4 md:p-5 lg:p-6 gap-2 ${bg} rounded border border-fg-08 flex flex-col justify-between items-start overflow-hidden ${className}`
+    : `kol-card-feature w-full flex-1 h-[304px] md:h-72 p-4 md:p-6 gap-4 ${bg} rounded border border-fg-08 flex flex-col justify-between items-start overflow-hidden ${className}`.trim()
 
   if (href) {
     const isExternal = href.startsWith('http') || href.startsWith('mailto')

package/src/organisms/ContentFilters.jsx

@@ -295,7 +295,8 @@ const ContentFilters = ({
             * nothing, so it must not wear a button's chrome. The atom exists
             * for exactly this (lobby ruling 2026-07-30 — "icons only, NO
             * states"); the span here was the same defect that promoted it. */}
-          <h2 className="flex items-center gap-2">
+          {/* the icon gap matches the specimen header — 16 from md (FoundrySpecimenSections, 2026-08-27) */}
+          <h2 className="flex items-center gap-2 md:gap-4">
             {titleIcon && <IconFrame name={titleIcon} variant="secondary" size="md" />}
             {/* `pr-4` by rule (ContentFiltersTitleGap, kol-website 2026-08-27): the
               * divider sat 24px from the title's text edge but 32 from the