@hraness/design-kit 0.32.0 → 0.34.0

package/dist/stylex.css

@@ -2431,10 +2431,6 @@
     grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
   }
 
-  .x1p797x9 {
-    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
-  }
-
   .x1vfedg7 {
     grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
   }
@@ -2443,6 +2439,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 +5265,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 +5365,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.34.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.34.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 > * {
@@ -1510,11 +1513,13 @@ html:has(:is(.hraness-marketing-header, .hraness-marketing-header-surface):not([
 
 .hraness-marketing-interface-grid,
 .hraness-marketing-trust-grid {
+  --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-interface-grid > *,
@@ -1566,11 +1571,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}
@@ -435,15 +436,15 @@ export function DesignSystemGallery({
             <MarketingSectionLabel size="body">Reference</MarketingSectionLabel>
             <p>Consumer-owned content can include <a href="#gallery-install">links</a> and <code>inline code</code>.</p>
           </MarketingSection>
-          <MarketingInterfaceGrid heading="Choose your interface." headingId="gallery-marketing-interfaces" headingLevel={3} label="Interfaces" interfaces={[
+          <MarketingInterfaceGrid columns={2} heading="Choose your interface." headingId="gallery-marketing-interfaces" headingLevel={3} label="Interfaces" interfaces={[
             { 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." },
           ]} />
-          <MarketingTrustBoundary heading="What leaves your machine." headingId="gallery-marketing-trust" headingLevel={3} label="Boundary" items={[
+          <MarketingTrustBoundary columns={2} heading="What leaves your machine." headingId="gallery-marketing-trust" headingLevel={3} label="Boundary" items={[
             { label: "Stays local", detail: "Source files and credentials." },
             { label: "Shared", detail: "Only the logs you choose to sync." },
           ]} />
@@ -519,6 +520,7 @@ export function DesignSystemGallery({
             ]}
           />
           <MarketingRelated
+            columns={2}
             groups={[
               {
                 heading: "Sibling tools",
@@ -537,6 +539,7 @@ export function DesignSystemGallery({
                 ],
               },
               {
+                columns: 1,
                 heading: "Shared infrastructure",
                 headingId: "design-gallery-related-infra",
                 items: [

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",
@@ -2168,18 +2174,22 @@ export const marketingStyles = stylex.create({
     "line-height": "1.5"
   },
   "interface_grid": {
+    "--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))"
   },
   "trust_grid": {
+    "--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))"
   },
   "interface": {
     "display": "grid",
@@ -2374,11 +2384,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 +4453,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" | "hraness-marketing-interface-grid" | "hraness-marketing-trust-grid",
   caller: string | undefined,
   columns: MarketingColumnCount | undefined,
 ): string {
@@ -4451,7 +4470,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" || hook === "hraness-marketing-interface-grid" || hook === "hraness-marketing-trust-grid" ? 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")}>
@@ -1142,6 +1148,7 @@ export interface MarketingInterface {
 
 export function MarketingInterfaceGrid({
   className,
+  columns,
   heading,
   headingId,
   headingLevel = 2,
@@ -1151,6 +1158,8 @@ export function MarketingInterfaceGrid({
   summary,
 }: Readonly<{
   className?: string;
+  /** Maximum columns; cards wrap within the available container width. */
+  columns?: MarketingColumnCount;
   heading: string;
   headingId: string;
   headingLevel?: MarketingHeadingLevel;
@@ -1167,7 +1176,7 @@ export function MarketingInterfaceGrid({
       id={id}
     >
       <MarketingCollectionHeader {...{ heading, headingId, headingLevel, label, summary }} prefix="interfaces" />
-      <div className={classNames("hraness-marketing-interface-grid")}>
+      <div className={marketingColumnClassName("hraness-marketing-interface-grid", undefined, columns)}>
         {interfaces.map((entry) => (
           <article className={classNames("hraness-marketing-interface")} key={entry.label}>
             <Heading
@@ -1192,6 +1201,7 @@ export interface MarketingTrustItem {
 
 export function MarketingTrustBoundary({
   className,
+  columns,
   heading,
   headingId,
   headingLevel = 2,
@@ -1201,6 +1211,8 @@ export function MarketingTrustBoundary({
   summary,
 }: Readonly<{
   className?: string;
+  /** Maximum columns; cards wrap within the available container width. */
+  columns?: MarketingColumnCount;
   heading: string;
   headingId: string;
   headingLevel?: MarketingHeadingLevel;
@@ -1217,7 +1229,7 @@ export function MarketingTrustBoundary({
       id={id}
     >
       <MarketingCollectionHeader {...{ heading, headingId, headingLevel, label, summary }} prefix="trust" />
-      <dl className={classNames("hraness-marketing-trust-grid")}>
+      <dl className={marketingColumnClassName("hraness-marketing-trust-grid", undefined, columns)}>
         {items.map((item) => (
           <div className={classNames("hraness-marketing-trust-item")} key={item.label}>
             <dt className={classNames("hraness-marketing-trust-item__label")}>{item.label}</dt>
@@ -1491,6 +1503,8 @@ export interface MarketingRelatedProduct {
 }
 
 export interface MarketingRelatedGroup {
+  /** Maximum columns for this group, overriding the section default. */
+  readonly columns?: MarketingColumnCount;
   /** Heading naming this tier of siblings, rendered one level below the section heading. */
   readonly heading: string;
   readonly headingId: string;
@@ -1533,6 +1547,7 @@ type MarketingRelatedBody =
 /** Linked cards for sibling products: each shows the product's mark, name, and one-line description. */
 export function MarketingRelated({
   className,
+  columns,
   heading,
   headingId,
   headingLevel = 2,
@@ -1543,6 +1558,8 @@ export function MarketingRelated({
   summary,
 }: Readonly<{
   className?: string;
+  /** Maximum columns for each card row; a group can override it. */
+  columns?: MarketingColumnCount;
   heading: string;
   headingId: string;
   headingLevel?: MarketingHeadingLevel;
@@ -1551,6 +1568,7 @@ export function MarketingRelated({
   summary?: string;
 }> &
   MarketingRelatedBody) {
+  const defaultColumnProps = columns === undefined ? {} : { columns };
   return (
     <section
       aria-labelledby={headingId}
@@ -1568,7 +1586,7 @@ export function MarketingRelated({
       />
       {groups === undefined
         ? (
-          <MarketingCardRow>
+          <MarketingCardRow {...defaultColumnProps}>
             <MarketingRelatedCards items={items} level={childHeadingLevel(headingLevel)} />
           </MarketingCardRow>
         )
@@ -1586,7 +1604,7 @@ export function MarketingRelated({
                 ? null
                 : <p className={classNames("hraness-marketing-related__group-summary")}>{group.summary}</p>}
             </div>
-            <MarketingCardRow ariaLabel={group.heading}>
+            <MarketingCardRow ariaLabel={group.heading} {...(group.columns === undefined ? defaultColumnProps : { columns: group.columns })}>
               <MarketingRelatedCards items={group.items} level={childHeadingLevel(childHeadingLevel(headingLevel))} />
             </MarketingCardRow>
           </div>