@hraness/design-kit 0.41.0 → 0.41.1

package/dist/stylex.css

@@ -85,6 +85,10 @@
     padding: .5rem 1rem 4rem;
   }
 
+  .xrqs5gp {
+    padding: .5rem 1rem;
+  }
+
   .x1i4hug3 {
     padding: .65rem .8rem;
   }
@@ -101,10 +105,6 @@
     padding: .75rem .95rem;
   }
 
-  .x86o7ao {
-    padding: .8rem 1rem;
-  }
-
   .x1717udv {
     padding: 0;
   }
@@ -864,6 +864,10 @@
     padding-inline: var(--hraness-marketing-gutter);
   }
 
+  .x18wjirm {
+    padding-inline: var(--hraness-marketing-question-inline-inset, 1.25rem);
+  }
+
   .xfmotut {
     padding-inline: var(--layout-chrome-inset);
   }
@@ -2939,6 +2943,10 @@
     margin-block-start: 1rem;
   }
 
+  .x1n5yk0f {
+    margin-block-start: auto;
+  }
+
   .xvc5jky {
     margin-inline-start: auto;
   }
@@ -3386,6 +3394,10 @@
     text-align: center;
   }
 
+  .xp4054r {
+    text-align: end;
+  }
+
   .x1yc453h {
     text-align: start;
   }
@@ -3424,6 +3436,10 @@
     text-transform: uppercase;
   }
 
+  .x5hzr90 {
+    text-underline-offset: .18em;
+  }
+
   .xdsgf93 {
     text-underline-offset: .22em;
   }
@@ -3709,6 +3725,10 @@
     color: var(--hraness-appearance-accent-foreground, var(--hraness-material-ink, var(--ui-accent-foreground, ButtonText)));
   }
 
+  .x1eyr600:focus-visible {
+    color: var(--hraness-marketing-ink);
+  }
+
   .x89zja:is([data-hovered], :hover) {
     color: var(--secondary-foreground);
   }
@@ -4943,8 +4963,26 @@
     transform: translate3d(0, -4vh, 0);
   }
 
-  .x1bz48vb.x1bz48vb:where(.x1mw0dh9[open] *):after {
-    transform: rotate(45deg);
+  .x78hkw1:after {
+    transition-duration: .24s;
+  }
+
+  .xjocvvi:after {
+    transition-property: transform;
+  }
+
+  .x15fj410:after {
+    transition-timing-function: cubic-bezier(.16, 1, .3, 1);
+  }
+
+  .xba5a1s.xba5a1s:where(.x1mw0dh9[open] *):after {
+    transform: rotate(135deg);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .x4oqjru.x4oqjru:after {
+      transition-duration: 0s;
+    }
   }
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hraness/design-kit",
-  "version": "0.41.0",
+  "version": "0.41.1",
   "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.41.0"
+      "version": "0.41.1"
     }
   ],
   "contract": "hraness.portfolio-inventory/v1",

package/src/product-marketing-foundation.css

@@ -304,10 +304,14 @@
   line-height: 1.5;
 }
 
-.hraness-marketing-interface pre {
+.hraness-marketing-interface > :where(pre) {
   margin-block-start: 0.5rem;
 }
 
+.hraness-marketing-interface :where(pre) {
+  font-size: 0.78rem;
+}
+
 .hraness-marketing-question__answer > :first-child {
   margin-block-start: 0;
 }

package/src/product-marketing.css

@@ -1081,7 +1081,7 @@ html:has(:is(.hraness-marketing-header, .hraness-marketing-header-surface):not([
   display: flex;
   align-items: center;
   gap: 0.75rem;
-  padding: 0.8rem 1rem;
+  padding: 0.5rem 1rem;
   background-image: var(--hraness-marketing-frame-chrome, none);
   box-shadow: var(--hraness-marketing-chrome-shadow);
   border-block-end: var(--hraness-marketing-chrome-rule);
@@ -1641,10 +1641,8 @@ html:has(:is(.hraness-marketing-header, .hraness-marketing-header-surface):not([
 
 .hraness-marketing-interface,
 .hraness-marketing-trust-item {
-  display: grid;
   min-inline-size: 0;
   min-block-size: 100%;
-  align-content: start;
   gap: 0.5rem;
   padding: clamp(1.25rem, 2.5vw, 1.75rem);
   border: var(--hraness-marketing-surface-rule);
@@ -1653,6 +1651,17 @@ html:has(:is(.hraness-marketing-header, .hraness-marketing-header-surface):not([
   box-shadow: var(--hraness-marketing-surface-shadow);
 }
 
+/* A vertical column lets the optional action pin to the foot of the card. */
+.hraness-marketing-interface {
+  display: flex;
+  flex-direction: column;
+}
+
+.hraness-marketing-trust-item {
+  display: grid;
+  align-content: start;
+}
+
 .hraness-marketing-interface :where(.hraness-marketing-interface__heading, p),
 .hraness-marketing-trust-item :where(dt, dd) {
   margin: 0;
@@ -1672,10 +1681,42 @@ html:has(:is(.hraness-marketing-header, .hraness-marketing-header-surface):not([
   line-height: 1.5;
 }
 
-.hraness-marketing-interface pre {
+/* The card's reference link sits at the foot, quiet and end-aligned. */
+.hraness-marketing-interface .hraness-marketing-interface__action {
+  margin-block-start: auto;
+  font-size: 0.85rem;
+  text-align: end;
+}
+
+.hraness-marketing-interface__link {
+  color: var(--hraness-marketing-muted);
+  text-decoration-line: underline;
+  text-decoration-style: dotted;
+  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
+  text-decoration-thickness: 1px;
+  text-underline-offset: 0.18em;
+}
+
+.hraness-marketing-interface__link:hover,
+.hraness-marketing-interface__link:focus-visible {
+  color: var(--hraness-marketing-ink);
+  text-decoration-color: currentColor;
+}
+
+@media (forced-colors: active) {
+  .hraness-marketing-interface__link {
+    color: LinkText;
+  }
+}
+
+.hraness-marketing-interface > :where(pre) {
   margin-block-start: 0.5rem;
 }
 
+.hraness-marketing-interface :where(pre) {
+  font-size: 0.78rem;
+}
+
 /* Equal-height product card rows. Direct children stretch to the tallest
  * item. Meta occupies a reserved two-line block so one long blurb does not
  * stagger the row. Titles wrap without clamping. Each card is a containing
@@ -2009,6 +2050,7 @@ html:has(:is(.hraness-marketing-header, .hraness-marketing-header-surface):not([
   justify-content: space-between;
   gap: 1rem;
   padding-block: 1rem;
+  padding-inline: var(--hraness-marketing-question-inline-inset, 1.25rem);
   color: var(--hraness-marketing-ink);
   cursor: pointer;
   font-size: 1.05rem;
@@ -2027,10 +2069,11 @@ html:has(:is(.hraness-marketing-header, .hraness-marketing-header-surface):not([
   font-size: 1.25rem;
   font-weight: 400;
   line-height: 1;
+  transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1);
 }
 
 .hraness-marketing-question[open] summary::after {
-  transform: rotate(45deg);
+  transform: rotate(135deg);
 }
 
 .hraness-marketing-question summary:focus-visible {
@@ -2042,6 +2085,7 @@ html:has(:is(.hraness-marketing-header, .hraness-marketing-header-surface):not([
 .hraness-marketing-question__answer {
   max-inline-size: var(--hraness-marketing-prose-measure);
   padding-block: 0 1.5rem;
+  padding-inline: var(--hraness-marketing-question-inline-inset, 1.25rem);
   color: var(--hraness-marketing-muted);
   line-height: 1.6;
 }
@@ -2259,6 +2303,12 @@ html:has(:is(.hraness-marketing-header, .hraness-marketing-header-surface):not([
   }
 }
 
+@media (prefers-reduced-motion: reduce) {
+  .hraness-marketing-question summary::after {
+    transition: none;
+  }
+}
+
 @media (forced-colors: active) {
   .hraness-marketing-plan[data-emphasis="primary"] {
     border-color: CanvasText;

package/src/react/design-gallery.tsx

@@ -512,8 +512,8 @@ export function DesignSystemGallery({
             <p>Consumer-owned content can include <a href="#gallery-install">links</a> and <code>inline code</code>.</p>
           </MarketingSection>
           <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." },
+            { label: "CLI", summary: "Run a named job.", example: <MarketingCodeBlock code="relay run job-01" />, link: { href: "#gallery-install", label: "Read the CLI guide" } },
+            { label: "SDK", summary: "Use typed application code.", link: { href: "#gallery-install", label: "Read the SDK guide" } },
           ]} />
           <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." },

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

@@ -1195,7 +1195,7 @@ export const marketingStyles = stylex.create({
     "display": "flex",
     "align-items": "center",
     "gap": "0.75rem",
-    "padding": "0.8rem 1rem",
+    "padding": "0.5rem 1rem",
     "background-image": { default: "var(--hraness-marketing-frame-chrome, none)", "@media (forced-colors: active)": "none" },
     "box-shadow": { default: "var(--hraness-marketing-chrome-shadow)", "@media (forced-colors: active)": "none" },
     "border-block-end": { "default": "var(--hraness-marketing-chrome-rule)", "@media (forced-colors: active)": "1px solid CanvasText" },
@@ -2216,10 +2216,10 @@ export const marketingStyles = stylex.create({
     "grid-template-columns": "repeat(auto-fit, minmax(min(100%, var(--_hraness-marketing-grid-track, 16rem)), 1fr))"
   },
   "interface": {
-    "display": "grid",
+    "display": "flex",
+    "flex-direction": "column",
     "min-inline-size": "0",
     "min-block-size": "100%",
-    "align-content": "start",
     "gap": "0.5rem",
     "padding": "clamp(1.25rem, 2.5vw, 1.75rem)",
     "border-top": {
@@ -2395,6 +2395,28 @@ export const marketingStyles = stylex.create({
     "font-size": "0.95rem",
     "line-height": "1.5"
   },
+  "interface__action": {
+    "margin-block-start": "auto",
+    "font-size": "0.85rem",
+    "text-align": "end"
+  },
+  "interface__link": {
+    "color": {
+      "default": "var(--hraness-marketing-muted)",
+      ":hover": "var(--hraness-marketing-ink)",
+      ":focus-visible": "var(--hraness-marketing-ink)",
+      "@media (forced-colors: active)": "LinkText"
+    },
+    "text-decoration-line": "underline",
+    "text-decoration-style": "dotted",
+    "text-decoration-color": {
+      "default": "color-mix(in srgb, currentColor 40%, transparent)",
+      ":hover": "currentColor",
+      ":focus-visible": "currentColor"
+    },
+    "text-decoration-thickness": "1px",
+    "text-underline-offset": "0.18em"
+  },
   "trust_item__label": {
     "margin": "0",
     "font-size": "1.05rem",
@@ -3026,6 +3048,7 @@ export const marketingStyles = stylex.create({
     "justify-content": "space-between",
     "gap": "1rem",
     "padding-block": "1rem",
+    "padding-inline": "var(--hraness-marketing-question-inline-inset, 1.25rem)",
     "color": "var(--hraness-marketing-ink)",
     "cursor": "pointer",
     "font-size": "1.05rem",
@@ -3041,15 +3064,22 @@ export const marketingStyles = stylex.create({
       "font-size": "1.25rem",
       "font-weight": "400",
       "line-height": "1",
+      "transition-duration": {
+        "default": "240ms",
+        "@media (prefers-reduced-motion: reduce)": "0ms"
+      },
+      "transition-property": "transform",
+      "transition-timing-function": "cubic-bezier(0.16, 1, 0.3, 1)",
       "transform": {
         "default": null,
-        [stylex.when.ancestor("[open]", questionMarker)]: "rotate(45deg)"
+        [stylex.when.ancestor("[open]", questionMarker)]: "rotate(135deg)"
       }
     }
   },
   "question__answer": {
     "max-inline-size": "var(--hraness-marketing-prose-measure)",
     "padding-block": "0 1.5rem",
+    "padding-inline": "var(--hraness-marketing-question-inline-inset, 1.25rem)",
     "color": "var(--hraness-marketing-muted)",
     "line-height": "1.6"
   },
@@ -4475,6 +4505,8 @@ const recipes = {
   "hraness-marketing-trust-item": { "default": marketingStyles.trust_item },
   "hraness-marketing-interface__heading": { "default": marketingStyles.interface__heading },
   "hraness-marketing-interface__summary": { "default": marketingStyles.interface__summary },
+  "hraness-marketing-interface__action": { "default": marketingStyles.interface__action },
+  "hraness-marketing-interface__link": { "default": marketingStyles.interface__link },
   "hraness-marketing-trust-item__label": { "default": marketingStyles.trust_item__label },
   "hraness-marketing-trust-item__detail": { "default": marketingStyles.trust_item__detail },
   "hraness-marketing-card-row": { "default": marketingStyles.card_row },

package/src/react/product-marketing.tsx

@@ -745,7 +745,8 @@ export function marketingProofFrameAddress(url: string): string {
  * A captioned frame around a screenshot, recording, or code-built mockup.
  * `chrome` draws a window title bar, a browser address bar, or a terminal
  * title bar above the content. A `title` without `chrome` keeps the window
- * bar. The browser bar shows `url` as host and path.
+ * bar. The browser bar shows `url` as host and path. A window or terminal
+ * bar without a title draws only the window lights.
  */
 export function MarketingProofFrame({
   caption,
@@ -773,8 +774,8 @@ export function MarketingProofFrame({
   if (url !== undefined && chrome !== "browser") throw new RangeError("Proof frame url needs chrome=\"browser\".");
   const bar = chrome ?? (title === undefined ? undefined : "window");
   const label = bar === "browser" ? (url === undefined ? title : marketingProofFrameAddress(url)) : title;
-  if (bar !== undefined && (label === undefined || label.trim() === "")) {
-    throw new RangeError(`Proof frame chrome=${bar} needs ${bar === "browser" ? "a url or title" : "a title"}.`);
+  if (bar === "browser" && (label === undefined || label.trim() === "")) {
+    throw new RangeError("Proof frame chrome=browser needs a url or title.");
   }
   return (
     <figure
@@ -793,7 +794,9 @@ export function MarketingProofFrame({
             </span>
             {bar === "browser"
               ? <span className={classNames("hraness-marketing-proof-frame__address")}>{label}</span>
-              : <span className={classNames("hraness-marketing-proof-frame__title", undefined, bar === "terminal" ? "terminal" : "default")}>{label}</span>}
+              : label === undefined || label.trim() === ""
+                ? null
+                : <span className={classNames("hraness-marketing-proof-frame__title", undefined, bar === "terminal" ? "terminal" : "default")}>{label}</span>}
           </div>
         )}
       <div className={classNames("hraness-marketing-proof-frame__content")}>{children}</div>
@@ -1168,6 +1171,8 @@ export function MarketingStatStrip({
 export interface MarketingInterface {
   readonly example?: ReactNode;
   readonly label: string;
+  /** A reference link pinned to the foot of the card, aligned to the end. */
+  readonly link?: MarketingLink;
   readonly summary: string;
 }
 
@@ -1212,6 +1217,13 @@ export function MarketingInterfaceGrid({
             </Heading>
             <p className={classNames("hraness-marketing-interface__summary")}>{entry.summary}</p>
             {entry.example}
+            {entry.link === undefined
+              ? null
+              : (
+                <p className={classNames("hraness-marketing-interface__action")}>
+                  <a className={classNames("hraness-marketing-interface__link")} data-hraness-marketing="interfaces" href={entry.link.href}>{entry.link.label}</a>
+                </p>
+              )}
           </article>
         ))}
       </div>