@kolkrabbi/kol-component 0.77.0 → 0.78.0

package/package.json

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

@@ -1,6 +1,7 @@
 import { MenuItem as MenuTrigger } from './MenuItem.jsx'
 
 /**
+ * @deprecated 2026-07-02 — alias of MenuItem (menu-family unify). Drops when nobody imports it (04-retirements.md).
  * MenuPopover — DEPRECATED alias of MenuItem (2026-07-02 menu-family
  * unification).
  *

package/src/organisms/MediaLibrary.jsx

@@ -961,8 +961,9 @@ export default function MediaLibrary({
   return withProvider(<BrowserShell onSelect={onSelect} />, opts)
 }
 
-/** Alias — `MediaLibrary variant="modal"`. Kept so existing call sites and the
- *  fxr editor's `onPick` naming keep working. */
+/** @deprecated 2026-08-01 — alias of `MediaLibrary variant="modal"`. Kept so
+ *  existing call sites and the fxr editor's `onPick` naming keep working;
+ *  drops when nobody imports it (04-retirements.md). */
 export function MediaPicker({ open, client, accept = 'all', onClose, onPick }) {
   return (
     <MediaLibrary
@@ -976,8 +977,8 @@ export function MediaPicker({ open, client, accept = 'all', onClose, onPick }) {
   )
 }
 
-/** Alias — `MediaLibrary variant="page"`. Without `onSelect` the actions offer
- *  Copy URL + download only, which is the read-only page a brand book wants. */
+/** @deprecated 2026-08-01 — alias of `MediaLibrary variant="page"`. Drops when
+ *  nobody imports it (04-retirements.md). */
 export function MediaBrowser({ client, accept = 'all', onSelect = null, ...rest }) {
   return <MediaLibrary variant="page" client={client} accept={accept} onSelect={onSelect} {...rest} />
 }

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