@hraness/design-kit 0.32.0 → 0.33.0

package/dist/stylex.css

@@ -2443,6 +2443,14 @@
     grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
   }
 
+  .x1v4bfo1 {
+    grid-template-columns: repeat(auto-fit,minmax(min(100%,var(--_hraness-marketing-grid-track, 16rem)),1fr));
+  }
+
+  .x1ui45ma {
+    grid-template-columns: repeat(auto-fit,minmax(min(100%,var(--_hraness-marketing-grid-track, 18rem)),1fr));
+  }
+
   .x3g07o8 {
     grid-template-columns: repeat(var(--hraness-marketing-fact-columns, 4),minmax(0,1fr));
   }
@@ -5261,6 +5269,14 @@
   --_hraness-foil-mark-display: none;
 }
 
+.x9wro72 {
+  --_hraness-marketing-grid-track: max(16rem,calc((100% - (var(--hraness-marketing-grid-columns) - 1) * 1rem) / var(--hraness-marketing-grid-columns)));
+}
+
+.xwl1ywu {
+  --_hraness-marketing-grid-track: max(18rem,calc((100% - (var(--hraness-marketing-grid-columns) - 1) * 1rem) / var(--hraness-marketing-grid-columns)));
+}
+
 .xojny72 {
   --hraness-appearance-accent-foreground: var(--hraness-material-ink, var(--ui-accent-foreground, ButtonText));
 }
@@ -5353,6 +5369,26 @@
   --hraness-marketing-fact-columns: 4;
 }
 
+.x166dvhg {
+  --hraness-marketing-grid-columns: 1;
+}
+
+.x10q4e6v {
+  --hraness-marketing-grid-columns: 2;
+}
+
+.xyqi4l0 {
+  --hraness-marketing-grid-columns: 3;
+}
+
+.x1g57y38 {
+  --hraness-marketing-grid-columns: 4;
+}
+
+.xogmzgw {
+  --hraness-marketing-grid-columns: initial;
+}
+
 .xphms39 {
   --hraness-marketing-pillar-columns: 1;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hraness/design-kit",
-  "version": "0.32.0",
+  "version": "0.33.0",
   "description": "React components and CSS for Hraness apps and product sites: application shells, marketing sections, charts, themes, effects, and syntax highlighting. Built on @hraness/ui.",
   "license": "MIT",
   "type": "module",

package/portfolio-inventory.json

@@ -6,7 +6,7 @@
       "name": "@hraness/design-kit",
       "path": ".",
       "visibility": "public",
-      "version": "0.32.0"
+      "version": "0.33.0"
     }
   ],
   "contract": "hraness.portfolio-inventory/v1",

package/src/product-marketing.css

@@ -1454,13 +1454,16 @@ html:has(:is(.hraness-marketing-header, .hraness-marketing-header-surface):not([
 }
 
 .hraness-marketing-primitives__list {
+  --hraness-marketing-grid-columns: initial;
+  /* Without an explicit column cap, the track falls back to its natural minimum. */
+  --_hraness-marketing-grid-track: max(18rem, calc((100% - (var(--hraness-marketing-grid-columns) - 1) * 1rem) / var(--hraness-marketing-grid-columns)));
   display: grid;
   align-items: stretch;
   margin: 0;
   padding: 0;
   list-style: none;
   gap: 1rem;
-  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--_hraness-marketing-grid-track, 18rem)), 1fr));
 }
 
 .hraness-marketing-primitives__list > * {
@@ -1566,11 +1569,13 @@ html:has(:is(.hraness-marketing-header, .hraness-marketing-header-surface):not([
  * block. The art well clips overflow and contains backgrounds so a logo
  * surface cannot paint through the gutter as one bar. */
 .hraness-marketing-card-row {
+  --hraness-marketing-grid-columns: initial;
+  --_hraness-marketing-grid-track: max(16rem, calc((100% - (var(--hraness-marketing-grid-columns) - 1) * 1rem) / var(--hraness-marketing-grid-columns)));
   display: grid;
   align-items: stretch;
   margin: 0;
   gap: 1rem;
-  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--_hraness-marketing-grid-track, 16rem)), 1fr));
 }
 
 .hraness-marketing-card-row > * {

package/src/react/design-gallery.tsx

@@ -409,6 +409,7 @@ export function DesignSystemGallery({
             ]} label="Relay agent commands" />
           </MarketingSection>
           <MarketingPrimitives
+            columns={3}
             heading="Three objects cover most work."
             headingId="design-gallery-primitives-title"
             headingLevel={3}
@@ -439,7 +440,7 @@ export function DesignSystemGallery({
             { label: "CLI", summary: "Run a named job.", example: <MarketingCodeBlock code="relay run job-01" /> },
             { label: "SDK", summary: "Use typed application code." },
           ]} />
-          <MarketingCardRow ariaLabel="Release radar" cards={[
+          <MarketingCardRow ariaLabel="Release radar" columns={2} cards={[
             { art: <svg aria-hidden="true" viewBox="0 0 24 24" width="24" height="24"><circle cx="12" cy="12" r="8" /></svg>, href: "#marketing", title: "Grok 4.7", meta: "First observed 21 September 2026." },
             { art: <svg aria-hidden="true" viewBox="0 0 24 24" width="24" height="24"><rect x="4" y="4" width="16" height="16" rx="4" /></svg>, href: "#gallery-install", title: "GLM 5.3 Flash", meta: "First observed 26 August 2026. Early DeepSWE coverage on OpenRouter." },
           ]} />

package/src/react/product-marketing.stylex.ts

@@ -63,6 +63,10 @@ export const marketingStyles = stylex.create({
   pillarColumns2: { "--hraness-marketing-pillar-columns": "2" },
   pillarColumns3: { "--hraness-marketing-pillar-columns": "3" },
   pillarColumns4: { "--hraness-marketing-pillar-columns": "4" },
+  gridColumns1: { "--hraness-marketing-grid-columns": "1" },
+  gridColumns2: { "--hraness-marketing-grid-columns": "2" },
+  gridColumns3: { "--hraness-marketing-grid-columns": "3" },
+  gridColumns4: { "--hraness-marketing-grid-columns": "4" },
   actionFocus: {
     outline: { default: null, ":focus-visible": "2px solid var(--hraness-marketing-accent)" },
     "outline-offset": { default: null, ":focus-visible": "2px" },
@@ -2057,13 +2061,15 @@ export const marketingStyles = stylex.create({
     "font-size": "var(--hraness-paper-section-heading-size, clamp(1.75rem, 3vw, 2.5rem))"
   },
   "primitives__list": {
+    "--hraness-marketing-grid-columns": "initial",
+    "--_hraness-marketing-grid-track": "max(18rem, calc((100% - (var(--hraness-marketing-grid-columns) - 1) * 1rem) / var(--hraness-marketing-grid-columns)))",
     "display": "grid",
     "align-items": "stretch",
     "margin": "0",
     "padding": "0",
     "list-style": "none",
     "gap": "1rem",
-    "grid-template-columns": "repeat(auto-fit, minmax(min(100%, 18rem), 1fr))"
+    "grid-template-columns": "repeat(auto-fit, minmax(min(100%, var(--_hraness-marketing-grid-track, 18rem)), 1fr))"
   },
   "primitive": {
     "display": "grid",
@@ -2374,11 +2380,13 @@ export const marketingStyles = stylex.create({
     "line-height": "1.5"
   },
   "card_row": {
+    "--hraness-marketing-grid-columns": "initial",
+    "--_hraness-marketing-grid-track": "max(16rem, calc((100% - (var(--hraness-marketing-grid-columns) - 1) * 1rem) / var(--hraness-marketing-grid-columns)))",
     "display": "grid",
     "align-items": "stretch",
     "margin": "0",
     "gap": "1rem",
-    "grid-template-columns": "repeat(auto-fit, minmax(min(100%, 16rem), 1fr))"
+    "grid-template-columns": "repeat(auto-fit, minmax(min(100%, var(--_hraness-marketing-grid-track, 16rem)), 1fr))"
   },
   "card": {
     "display": "flex",
@@ -4441,9 +4449,16 @@ const pillarColumns = {
   4: marketingStyles.pillarColumns4,
 } as const;
 
+const gridColumns = {
+  1: marketingStyles.gridColumns1,
+  2: marketingStyles.gridColumns2,
+  3: marketingStyles.gridColumns3,
+  4: marketingStyles.gridColumns4,
+} as const;
+
 /** Explicit finite columns compose static atoms, including the existing media rules. */
 export function marketingColumnClassName(
-  hook: "hraness-marketing-facts" | "hraness-marketing-pillars" | "hraness-marketing-stats__list",
+  hook: "hraness-marketing-facts" | "hraness-marketing-pillars" | "hraness-marketing-stats__list" | "hraness-marketing-card-row" | "hraness-marketing-primitives__list",
   caller: string | undefined,
   columns: MarketingColumnCount | undefined,
 ): string {
@@ -4451,7 +4466,9 @@ export function marketingColumnClassName(
     throw new RangeError("Marketing columns must be 1, 2, 3, or 4 when specified.");
   }
   const columnRecipe = columns === undefined ? undefined
-    : (hook === "hraness-marketing-pillars" ? pillarColumns : factColumns)[columns];
+    : (hook === "hraness-marketing-pillars" ? pillarColumns
+      : hook === "hraness-marketing-card-row" || hook === "hraness-marketing-primitives__list" ? gridColumns
+        : factColumns)[columns];
   return [hook, stylex.props(recipes[hook].default, columnRecipe).className, caller]
     .filter((value) => value !== undefined && value.length > 0).join(" ");
 }

package/src/react/product-marketing.tsx

@@ -225,16 +225,19 @@ export function MarketingCardRow({
   cards,
   children,
   className,
+  columns,
 }: Readonly<{
   ariaLabel?: string;
   cards?: readonly MarketingCardItem[];
   children?: ReactNode;
   className?: string;
+  /** Maximum columns; cards wrap to fit the available container width. */
+  columns?: MarketingColumnCount;
 }>) {
   return (
     <div
       aria-label={ariaLabel}
-      className={classNames("hraness-marketing-card-row", className)}
+      className={marketingColumnClassName("hraness-marketing-card-row", className, columns)}
       data-hraness-marketing="card-row"
     >
       {cards?.map((card) => (
@@ -1015,6 +1018,7 @@ export interface MarketingPrimitive {
 
 export function MarketingPrimitives({
   className,
+  columns,
   heading,
   headingId,
   headingLevel = 2,
@@ -1024,6 +1028,8 @@ export function MarketingPrimitives({
   summary,
 }: Readonly<{
   className?: string;
+  /** Maximum columns; items wrap to fit the available container width. */
+  columns?: MarketingColumnCount;
   heading: string;
   headingId: string;
   headingLevel?: MarketingHeadingLevel;
@@ -1040,7 +1046,7 @@ export function MarketingPrimitives({
       id={id}
     >
       <MarketingCollectionHeader {...{ heading, headingId, headingLevel, label, summary }} prefix="primitives" />
-      <ol className={classNames("hraness-marketing-primitives__list")}>
+      <ol className={marketingColumnClassName("hraness-marketing-primitives__list", undefined, columns)}>
         {items.map((item, index) => (
           <li className={classNames("hraness-marketing-primitive")} key={item.label}>
             <span aria-hidden="true" className={classNames("hraness-marketing-primitive__number")}>