@kolkrabbi/kol-component 0.77.1 → 0.78.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-component",
-  "version": "0.77.1",
+  "version": "0.78.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/organisms/SectionCards.jsx

@@ -28,7 +28,8 @@ export default function SectionCards({
   actions,
   onNavigate,
   sectionClassName = '',
-  wrapperClassName = 'w-full flex flex-col gap-8 md:gap-10 max-w-[1400px] mx-auto',
+  /* the family's one cap — the shell's --kol-container-max ladder (2026-08-26) */
+  wrapperClassName = 'w-full flex flex-col gap-8 md:gap-10 max-w-[var(--kol-container-max,var(--kol-content-shell,1800px))] mx-auto',
   cardsWrapperClassName = 'self-stretch inline-flex flex-col md:flex-row md:h-72 justify-start items-center gap-6',
   actionsClassName = 'pt-10 pb-24',
   headerClassName = 'w-full pt-[224px]',

package/src/organisms/SectionCta.jsx

@@ -40,7 +40,7 @@ export default function SectionCta({
   if (variant === 'centered') {
     return (
       <section className={`w-full py-24 ${className}`.trim()}>
-        <div className="max-w-[900px] mx-auto">
+        <div className="max-w-[var(--kol-container-max,var(--kol-content-shell,1800px))] mx-auto">
           <div className="w-32 h-px bg-fg-24 mx-auto mb-8" />
           <SectionText
             align="center"
@@ -65,10 +65,11 @@ export default function SectionCta({
   ]
   return (
     <section className={`w-full bg-auto ${className}`.trim()}>
-      {/* capped at 1600 and centred (SectionCtaEditorial, user 2026-08-26:
-        * "I would cap it at 1800 or 1600") — the surface stays full width,
-        * the columns stop hugging the viewport edges at 2000 */}
-      <div className="w-full max-w-[1600px] mx-auto py-10 flex flex-col md:flex-row items-start gap-12 overflow-hidden">
+      {/* the family's ONE cap — the shell's --kol-container-max ladder (user
+        * ruling 2026-08-26; the 1600 SectionCtaEditorial asked for was a third
+        * number beside split's 1200 and cards' 1400) — the surface stays full
+        * width, the columns stop hugging the viewport edges */}
+      <div className="w-full max-w-[var(--kol-container-max,var(--kol-content-shell,1800px))] mx-auto py-10 flex flex-col md:flex-row items-start gap-12 overflow-hidden">
         <div className="flex-1 self-stretch text-auto kol-sans-display-01">{eyebrow}</div>
         <div className="flex-1 self-stretch pb-6 md:pt-32 flex flex-col justify-end items-start gap-12">
           {rows.map((row, i) => (

package/src/organisms/SectionFaq.jsx

@@ -25,11 +25,14 @@ export default function SectionFaq({
   singleOpen = false,
   defaultOpen,
   className = '',
+  /* the section sits on the family's cap; the list itself is a READING
+   * column inside it — a measure is a content decision, not the frame */
   innerClassName = 'max-w-[var(--kol-content-column)] flex flex-col gap-8',
 }) {
   const [open, setOpen] = useState(defaultOpen ?? null)
   return (
     <section className={`kol-section-faq w-full px-5 py-16 md:px-8 md:py-24 lg:px-14 ${className}`.trim()}>
+      <div className="max-w-[var(--kol-container-max,var(--kol-content-shell,1800px))] mx-auto">
       <div className={innerClassName}>
         {(label || headline || body || actions) && (
           <SectionText label={label} headline={headline} headlineSize={headlineSize} body={body} actions={actions} />
@@ -51,6 +54,7 @@ export default function SectionFaq({
           </Accordion>
         )}
       </div>
+      </div>
     </section>
   )
 }

package/src/organisms/SectionSplit.jsx

@@ -72,7 +72,10 @@ export default function SectionSplit({
       className={`kol-section-split px-5 py-16 md:px-8 md:py-24 lg:px-14 lg:py-32 ${bleed} ${className}`.replace(/\s+/g, ' ').trim()}
       style={sectionStyle}
     >
-      <div className={`max-w-[1200px] mx-auto ${grid} ${innerClassName}`.replace(/\s+/g, ' ').trim()}>
+      {/* ONE cap for the whole section family (user ruling 2026-08-26): the shell's
+        * --kol-container-max ladder — 100% → 1400 → 1600 → 1800. Split ran 1200,
+        * cards 1400, the CTA 1600: three numbers for one job, unflagged. */}
+      <div className={`max-w-[var(--kol-container-max,var(--kol-content-shell,1800px))] mx-auto ${grid} ${innerClassName}`.replace(/\s+/g, ' ').trim()}>
         {/* `order` rather than `flex-row-reverse`: the grid is one column below
           * 901px, and DOM order is what decides the stack there. */}
         <SectionText