@kolkrabbi/kol-component 0.74.1 → 0.75.0

package/package.json

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

@@ -38,7 +38,12 @@ const BOX = {
   article:  { thumb: 120, ratio: '1 / 1',  pad: '0',           gap: S6, align: 'items-start', thumbBg: 'var(--kol-fg-12)', hover: 'var(--kol-oq-02)', thumbZoom: true },
   /* work and typeface step UP at md — the shipped rows both do, and a work row
    * at a fixed 96 cannot hold the display-03 line it was ruled to carry. */
-  work:     { thumb: 64,  thumbMd: 112, ratio: '1 / 1', pad: S4, padMd: S6, gap: S4, gapMd: S6, frame: 'transparent', frameHover: 'var(--kol-fg-16)', bg: 'var(--kol-surface-secondary)', minH: 96, minHMd: 160, align: 'items-stretch', thumbRadius: 'var(--kol-radius-xs)', thumbBorder: true, thumbZoom: true },
+  /* thumbSquare (2026-08-26, user on the comparison page): the shipped
+   * WorkListItem thumb is a fixed SQUARE (w-16 h-16 md:w-28 md:h-28) sitting at
+   * the top of a taller row — it does not stretch to the row's height, so the
+   * fill-the-height ruling does not apply here and a 64-wide thumb in a 96-tall
+   * row came out portrait. */
+  work:     { thumb: 64,  thumbMd: 112, ratio: '1 / 1', pad: S4, padMd: S6, gap: S4, gapMd: S6, frame: 'transparent', frameHover: 'var(--kol-fg-16)', bg: 'var(--kol-surface-secondary)', minH: 96, minHMd: 160, align: 'items-stretch', thumbRadius: 'var(--kol-radius-xs)', thumbBorder: true, thumbZoom: true, thumbSquare: true },
   /* typeface's row is a COLUMN, not a line: a header (name/styles left,
    * classification/year right) with a full-width specimen band under it. The
    * shipped item is `flex-col gap-6`, and forcing it into the horizontal
@@ -112,9 +117,9 @@ export default function ContentRow({
          * height the row is. An earlier cut freed the width instead and let
          * `aspect-ratio` fall back to the image's intrinsic size, which is how
          * one card ate the page. */
-        <div className="kol-row-thumb shrink-0 self-stretch">
+        <div className={`kol-row-thumb shrink-0 ${box.thumbSquare ? 'self-start' : 'self-stretch'}`}>
           <ContentMedia
-            ratio={null}
+            ratio={box.thumbSquare ? '1 / 1' : null}
             border={box.thumbBorder ?? false}
             bg={box.thumbBg}
             /* zoom where the thumb IS the subject (article · work), never on a

package/src/organisms/SectionHero.jsx

@@ -83,6 +83,9 @@ function MediaLayer({ media }) {
  * @param {ReactNode} label · headline · body · actions  the composed text (SectionText)
  * @param {string}    [headlineSize='display-04']
  * @param {string}    [panelMaxWidth='max-w-[440px]']  the glass panel's cap on the composed route
+ * @param {object}    panelProps     everything else on the glass panel (user ask 2026-08-26):
+ *                                   `padding` ('px-6 py-8') · `maxWidth` · `surfaceOpacity`
+ *                                   (80) · `blur` ('1px') · `gap` · `className`
  * @param {ReactNode} panel          a caller-authored content node; wins over the text props and children
  * @param {ReactNode} children       fallback content slot
  * @param {string}    align          media: 'center' | 'start' | 'end' — placement of the content ·
@@ -102,6 +105,7 @@ export default function SectionHero({
   body,
   actions,
   panelMaxWidth = 'max-w-[440px]',
+  panelProps,
   panel,
   children,
   align = 'center',
@@ -145,7 +149,7 @@ export default function SectionHero({
     : 'justify-center'
   const composed = label || headline || body || actions
   const content = panel ?? (composed ? (
-    <OverlayGlassPanel maxWidth={panelMaxWidth} align={align === 'center' ? 'center' : 'start'}>
+    <OverlayGlassPanel maxWidth={panelMaxWidth} align={align === 'center' ? 'center' : 'start'} {...panelProps}>
       <SectionText
         label={label}
         headline={headline}

package/src/utilities/OverlayGlassPanel.jsx

@@ -11,6 +11,8 @@
  * @param {string} align           'center' | 'start' | 'end' (cross-axis + text)
  * @param {string} gap             vertical rhythm class between children
  * @param {string} maxWidth        optional max-w-* class (adds mx-auto)
+ * @param {string} padding         padding classes (default 'px-6 py-8') — 2026-08-26,
+ *                                 the one knob the panel had no seam for
  */
 export default function OverlayGlassPanel({
   children,
@@ -19,6 +21,7 @@ export default function OverlayGlassPanel({
   align = 'center',
   gap = 'gap-6',
   maxWidth = '',
+  padding = 'px-6 py-8',
   className = '',
 }) {
   const alignCls =
@@ -28,7 +31,7 @@ export default function OverlayGlassPanel({
 
   return (
     <div
-      className={`flex flex-col ${alignCls} ${gap} rounded-[var(--kol-radius-xs)] px-6 py-8 ${maxWidth ? `${maxWidth} mx-auto` : ''} ${className}`.trim()}
+      className={`flex flex-col ${alignCls} ${gap} rounded-[var(--kol-radius-xs)] ${padding} ${maxWidth ? `${maxWidth} mx-auto` : ''} ${className}`.trim()}
       style={{
         backgroundColor: `color-mix(in srgb, var(--kol-surface-primary) ${surfaceOpacity}%, transparent)`,
         backdropFilter: `blur(${blur})`,