@kolkrabbi/kol-component 0.11.0 → 0.12.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-component",
-  "version": "0.11.0",
+  "version": "0.12.1",
   "description": "KOL design-system components — atoms through organisms, emitting canonical kol-* classes. Pairs with @kolkrabbi/kol-theme for styling.",
   "license": "MIT",
   "type": "module",
@@ -23,7 +23,7 @@
   "dependencies": {
     "@floating-ui/react": "^0.27.19",
     "embla-carousel-react": "^8.6.0",
-    "@kolkrabbi/kol-icons": "0.7.0"
+    "@kolkrabbi/kol-icons": "0.7.1"
   },
   "peerDependencies": {
     "react": "^18.3.0 || ^19.0.0",

package/src/atoms/SectionLabel.jsx

@@ -5,22 +5,26 @@ export default function SectionLabel({
   size = 'md',
   className = ''
 }) {
-  // Size variants: sm (16px), md (20px), lg (32px)
+  // Size variants: sm (16px), md (20px), lg (32px).
+  // Migrated off the deleted legacy kol-label-* family (2026-07-15): current
+  // helper/heading classes, no text-transform — labels render as authored.
+  // (lg's old 'kol-heading-md' was a ghost class defined nowhere — rendered
+  // 16px default; kol-sans-heading-03 is the real 32px scale.)
   const sizeConfig = {
     sm: {
       height: 'h-4',
       iconSize: 16,
-      textClass: 'kol-label-compact-md'
+      textClass: 'kol-helper-14'
     },
     md: {
       height: 'h-5',
       iconSize: 24,
-      textClass: 'kol-label-compact-lg'
+      textClass: 'kol-helper-20'
     },
     lg: {
       height: 'h-8',
       iconSize: 40,
-      textClass: 'kol-heading-md'
+      textClass: 'kol-sans-heading-03'
     }
   }
 

package/src/index.js

@@ -104,6 +104,7 @@ export { default as ErrorBoundary } from './organisms/ErrorBoundary.jsx'
 export { default as FeatureSplit } from './organisms/FeatureSplit.jsx'
 export { default as FeaturedCarousel } from './organisms/FeaturedCarousel.jsx'
 export { default as FeaturesCardSection } from './organisms/FeaturesCardSection.jsx'
+export { default as FoundryCTA } from './organisms/FoundryCTA.jsx'
 export { default as FullBleedHero } from './organisms/FullBleedHero.jsx'
 export { default as LoaderOverlay } from './organisms/LoaderOverlay.jsx'
 export { default as MediaTileGallery } from './organisms/MediaTileGallery.jsx'

package/src/molecules/Slider.jsx

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from 'react'
+import { useEffect, useId, useMemo, useState } from 'react'
 import Input from '../atoms/Input.jsx'
 
 /**
@@ -46,6 +46,10 @@ const Slider = ({
   displayWidth = 6,
   fontSize,
 }) => {
+  /* Label ↔ input pairing — the <label> is a sibling of the range input, so
+   * without an htmlFor/id pair the visible label confers no accessible name. */
+  const sliderId = useId()
+
   const handleChange = (e) => {
     if (onChange) {
       onChange(Number(e.target.value))
@@ -96,6 +100,7 @@ const Slider = ({
     <div className={`control-slider gap-3 shadow-none ${className}`}>
       {label && (
         <label
+          htmlFor={sliderId}
           className={`kol-helper-12 whitespace-nowrap shrink-0 w-fit ${disabled ? 'opacity-50' : ''}`}
           style={fontSize ? { fontSize } : undefined}
         >
@@ -103,6 +108,7 @@ const Slider = ({
         </label>
       )}
       <input
+        id={sliderId}
         type="range"
         min={min}
         max={max}

package/src/organisms/FeaturedCarousel.jsx

@@ -183,7 +183,8 @@ export default function FeaturedCarousel({
     >
       {showHeader && (
         <div className="mb-6 flex items-center gap-4">
-          <span className="kol-label-mono-xs text-auto">{sectionLabel}</span>
+          {/* migrated off the deleted legacy kol-label-* family — label renders as authored */}
+          <span className="kol-helper-12 text-auto">{sectionLabel}</span>
           <span className="kol-mono-12 text-fg-64">{selectedIndex + 1} / {items.length}</span>
         </div>
       )}

package/src/organisms/FoundryCTA.jsx

@@ -0,0 +1,65 @@
+import Button from '../atoms/Button.jsx'
+
+/* taxonomy-ok: nests component's Button */
+
+/**
+ * FoundryCTA — the simple centered tier of the CTA-band family: a centered
+ * column with a short rule line, a heading, a mono description, and one or
+ * more Button actions. CtaGlobal is the editorial two-column closer of the
+ * same family; this is the quiet mid-page tier (foundry pages, prints grid).
+ *
+ * Presentational — copy arrives as props and renders verbatim (no
+ * text-transform; author strings in their final case). Actions with an
+ * `href` render Button's anchor form; pass `onNavigate` for SPA routing —
+ * same `(href, event)` seam contract as WorkListItem — or omit it for plain
+ * anchors (external links, mailto:).
+ *
+ * @param {ReactNode} heading      band heading (kol-sans-heading-02)
+ * @param {ReactNode} description  supporting line (kol-mono-14, dimmed)
+ * @param {Object|Array} action    one {href, label, variant?, target?, rel?} or an array;
+ *                                 variant 'secondary' renders Button's outline treatment,
+ *                                 anything else the primary fill
+ * @param {Function}  onNavigate   (href, event) => void — SPA-nav seam for internal links
+ * @param {string}    className    extra classes on the section
+ */
+export default function FoundryCTA({
+  heading,
+  description,
+  action,
+  onNavigate,
+  className = '',
+}) {
+  const actions = (Array.isArray(action) ? action : [action]).filter(Boolean)
+
+  return (
+    <section className={`w-full py-24 ${className}`.trim()}>
+      <div className="max-w-[900px] mx-auto text-center space-y-8">
+        <div className="w-32 h-px bg-fg-24 mx-auto" />
+
+        {heading && <h2 className="kol-sans-heading-02 text-auto">{heading}</h2>}
+
+        {description && (
+          <p className="kol-mono-14 text-fg-64 max-w-[600px] mx-auto">{description}</p>
+        )}
+
+        {actions.length > 0 && (
+          <div className={`pt-4 ${actions.length > 1 ? 'flex flex-col sm:flex-row gap-4 justify-center' : ''}`.trim()}>
+            {actions.map((act, i) => (
+              <Button
+                key={i}
+                variant={act.variant === 'secondary' ? 'outline' : 'primary'}
+                size="md"
+                href={act.href}
+                target={act.target}
+                rel={act.rel}
+                onClick={onNavigate ? (e) => onNavigate(act.href, e) : undefined}
+              >
+                {act.label}
+              </Button>
+            ))}
+          </div>
+        )}
+      </div>
+    </section>
+  )
+}