@kolkrabbi/kol-component 0.91.3 → 0.92.1

package/package.json

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

@@ -189,9 +189,15 @@ export default function ContentText({
    * so a card that wants the whole excerpt simply does not pass it. */
   const extra = (slot) => (slot === 'body' && clamp ? ` line-clamp-${clamp}` : '')
 
+  /* the title dim is BEHAVIOUR, not voice: a `titleClass` override replaces the
+   * ramp string whole (that is the seam's contract), and the hook was riding in
+   * that string — so Stack's uppercase display title lost its hover the moment
+   * it overrode the class (user 2026-08-27: "I had put A HOVER OPACITY drop,
+   * WHERE IS IT"). The hook is re-attached after the override. */
+  const hook = (slot) => (overrides[slot] && /\bkol-content-title-dim\b/.test(ramp[slot] ?? '') ? ' kol-content-title-dim' : '')
   const line = (slot) =>
     values[slot] == null ? null : (
-      <div key={slot} className={`${overrides[slot] ?? ramp[slot] ?? ''}${extra(slot)}`.trim()}>{values[slot]}</div>
+      <div key={slot} className={`${overrides[slot] ?? ramp[slot] ?? ''}${extra(slot)}${hook(slot)}`.trim()}>{values[slot]}</div>
     )
 
   /* RECURSIVE (2026-08-15) — an entry inside a line/between/group may itself be

package/src/organisms/ContentFilters.jsx

@@ -25,6 +25,9 @@ import IconFrame from '../atoms/IconFrame.jsx'
  * @param {string} props.layout — controlled LIST/GRID value (kol-r2b2 2026-08-27: a consumer that persists
  *   layout per bucket needs the strip's value back; `defaultLayout` alone kept it internal)
  * @param {Function} props.onLayoutChange — (layout) => void, fires on every strip click
+ * @param {ReactNode} props.trailingActions — the header's RIGHT slot, where the view strip sits
+ *   (kol-r2b2 2026-08-27: a consumer's own controls — sort, flat, select — belong there;
+ *   `headerActions` is the left group beside search and was never that)
  * @param {Function} props.onFilterChange — optional callback when filters change
  * @param {Array} props.mutuallyExclusiveFilters — filter keys that should be mutually exclusive
  * @param {Array} props.customFilterKeys — filter keys handled by renderItem, not by ContentFilters
@@ -80,6 +83,7 @@ const ContentFilters = ({
   customFilterKeys = [],
   searchKeys = ['label', 'name', 'title', 'type'],
   headerActions,
+  trailingActions,
   showCountOnlyWhenFiltering = false,
   iconComponent,
   className = '',
@@ -218,8 +222,10 @@ const ContentFilters = ({
       {layoutOptions.map((opt) => (
         <span
           key={opt.value}
-          onClick={() => setLayout(opt.value)}
-          className={`${layoutClassName} cursor-pointer select-none ${layout === opt.value ? stripActiveClassName : stripRestClassName}`}
+          onClick={opt.onClick ?? (() => setLayout(opt.value))}
+          aria-pressed={opt.active !== undefined ? !!opt.active : undefined}
+          title={opt.title}
+          className={`${layoutClassName} cursor-pointer select-none ${(opt.active ?? layout === opt.value) ? stripActiveClassName : stripRestClassName}`}
           style={{ letterSpacing: 1 }}
         >
           {opt.label}
@@ -360,6 +366,7 @@ const ContentFilters = ({
         </div>
 
         <div className="flex items-center gap-8">
+          {trailingActions}
           {layoutPlacement === 'header' && layoutStrip}
           {/* RECENT / SAVED is the SAME STRIP as LIST / GRID, not a ViewToggle.
             * Read off kol-monitor's original (_tmp/2026-08-15-shell-adoption/

package/src/organisms/SectionHero.jsx

@@ -120,7 +120,7 @@ function MediaLayer({ media }) {
  * @param {ReactNode|{src, kind, poster, srcSet, alt}|Array} media  background (media) / the half (split) / an ARRAY of slides → carousel
  * @param {number}    overlayOpacity 0–100 surface-primary scrim over the media (default 0)
  * @param {boolean}   veil           bottom-heavy gradient over the media
- * @param {'center'|'end'} justify   content vertically centred, or pinned to the foot (with `foot`, the pb ramp plus `overlap` — the text clears the card)
+ * @param {'center'|'end'} justify   content vertically centred, or pinned to the foot (with `foot`: `overlap` + 32px, 48 from md — the text sits just above the card; without: the pb ramp)
  * @param {ReactNode} foot           a node rendered across the hero's bottom edge
  * @param {number}    overlap        how far `foot` rises into the hero, px (default 250); published on the section as `--kol-section-foot-overlap`
  * @param {boolean}   autoPlay · {number} autoPlayInterval · {'stack'|'header'} navPosition  carousel only
@@ -321,8 +321,14 @@ export default function SectionHero({
   /* the bottom inset is never the `p-*` shorthand: `md:p-10` sits in a later
    * media query than a bare `pb-*` and would win it back at ≥768 (measured —
    * the old `pb-32 sm:pb-40` ramp lost to it between 768 and 1023 too). */
+  /* WITH a foot the inset is `overlap` + one small gap — 32px, 48 from md
+   * (SectionHeroFootGap, kol-website 2026-08-27: 0.86.0's ramp + overlap
+   * floated the lede ~474px above the card; live sat it ~50px above). No
+   * foot → the padding ramp, as before. */
   const justifyCls = justify === 'end'
-    ? 'items-end [--kol-section-pb:8rem] sm:[--kol-section-pb:10rem] lg:[--kol-section-pb:12rem] xl:[--kol-section-pb:14rem] pb-[calc(var(--kol-section-pb)+var(--kol-section-foot-overlap,0px))]'
+    ? (foot
+      ? 'items-end pb-[calc(var(--kol-section-foot-overlap)+2rem)] md:pb-[calc(var(--kol-section-foot-overlap)+3rem)]'
+      : 'items-end pb-32 sm:pb-40 lg:pb-48 xl:pb-56')
     : 'items-center pb-6 md:pb-10'
   const footVar = foot ? { '--kol-section-foot-overlap': `${overlap}px` } : undefined