@repobit/dex-system-design 0.25.12 → 1.0.0

package/src/components/cta-banner/cta-banner.stories.js

@@ -1,122 +1,67 @@
 import { html } from "lit";
-import "../button/button.js";
 import "./cta-banner.js";
+import "../button/button.js";
 
 export default {
-  title     : "Components/CtaBanner",
+  title     : "Modules/CTA Banner",
+  component : "bd-cta-banner",
   tags      : ["autodocs"],
   parameters: {
     layout: "fullscreen",
     docs  : {
       description: {
         component: `
-Full-width closing call-to-action banner on a blue gradient background —
-centered title, description, one or two buttons, and an optional small
-mono caption underneath.
-
-\`\`\`html
-<bd-cta-banner
-  title="Run your AI agents with a guardrail"
-  description="AI Guardian is in open BETA on macOS. Download the BETA and secure your agentic workflows."
-  caption="Downloads the macOS BETA (.dmg). Free during BETA."
->
-  <bd-button-link slot="primary-button" kind="white" strong>Download BETA Today</bd-button-link>
-  <bd-button-link slot="secondary-button" kind="outline-white" strong>Read the docs</bd-button-link>
-</bd-cta-banner>
-\`\`\`
+**CtaBanner** is a full-width closing call to action on a brand gradient: a title, a
+supporting line, one or two buttons, and an optional caption underneath.
 
-### Attribute table
-| Attribute / slot | Type | Description |
-|---|---|---|
-| \`title\` / \`slot="title"\` | String | Large centred heading |
-| \`description\` / \`slot="description"\` | String | Paragraph under the title |
-| \`slot="primary-button"\` | — | First button, typically \`kind="white"\` |
-| \`slot="secondary-button"\` | — | Second button, typically \`kind="outline-white"\` |
-| \`caption\` / \`slot="caption"\` | String | Optional small mono line under the buttons |
-
-Buttons are expected to use \`bd-button-link\` with \`kind="white"\` /
-\`kind="outline-white"\` and \`strong\`, so they read against the blue
-background — that pairing isn't enforced by the component, just the
-convention used everywhere it's been placed so far.
+It had no story until P5H.1, which is why nothing measured it. Its text sits on a
+gradient rather than a flat surface, and a gradient is judged at its lightest point —
+see \`Foundations/Text on a surface\`.
         `
       }
     }
+  },
+  argTypes: {
+    title      : { control: "text", description: "Headline. Slot `title` overrides it." },
+    description: { control: "text", description: "Supporting line. Slot `description` overrides it." },
+    caption    : { control: "text", description: "Small print under the buttons. Slot `caption` overrides it." }
   }
 };
 
-// ─── Cu caption (AI Guardian) ──────────────────────────────────────────────
-
-export const WithCaption = {
-  name  : "Cu caption",
-  render: () => html`
-    <bd-cta-banner
-      title="Run your AI agents with a guardrail"
-      description="AI Guardian is in open BETA on macOS. Download the BETA and secure your agentic workflows."
-      caption="Downloads the macOS BETA (.dmg). Free during BETA."
-    >
-      <bd-button-link
-        slot="primary-button"
-        label="Download BETA Today"
-        kind="white"
-        size="md"
-        strong
-      >Download BETA Today</bd-button-link>
-
-      <bd-button-link
-        slot="secondary-button"
-        label="Read the docs"
-        kind="outline-white"
-        size="md"
-        strong
-      >Read the docs</bd-button-link>
-    </bd-cta-banner>
-  `
+const ARGS = {
+  title      : "Ready to secure your AI agents?",
+  description: "AI Guardian watches what your agents actually do, and tells you when it should not have happened.",
+  caption    : "Open BETA · macOS · no card required"
 };
 
-// ─── Fara caption (Skill Scanner) ──────────────────────────────────────────
+export const Default = {
+  args  : ARGS,
+  render: (a) => html`
+    <bd-cta-banner title="${a.title}" description="${a.description}" caption="${a.caption}">
+      <bd-button slot="primary-button" variant="primary">Get started</bd-button>
+      <bd-button slot="secondary-button" variant="outline-white">Read the docs</bd-button>
+    </bd-cta-banner>`
+};
 
 export const WithoutCaption = {
-  name  : "Fără caption",
-  render: () => html`
-    <bd-cta-banner
-      title="Scan before you trust"
-      description="A skill is code you hand to your agent. One command stands between you and running it blind."
-    >
-      <bd-button-link
-        slot="primary-button"
-        label="Install with npx"
-        kind="white"
-        size="md"
-        strong
-      >Install with npx</bd-button-link>
-
-      <bd-button-link
-        slot="secondary-button"
-        label="View on GitHub"
-        kind="outline-white"
-        size="md"
-        strong
-      >View on GitHub</bd-button-link>
-    </bd-cta-banner>
-  `
+  name      : "Without caption",
+  args      : { ...ARGS, caption: "" },
+  render    : Default.render,
+  parameters: { docs: { description: { story: "The caption is the smallest tier and the one that fails contrast on the lighter end of the gradient. This story is the same banner without it." } } }
 };
 
-// ─── Un singur buton ────────────────────────────────────────────────────────
+export const TitleOnly = {
+  name  : "Title only",
+  args  : { title: ARGS.title, description: "", caption: "" },
+  render: Default.render
+};
 
-export const SingleButton = {
-  name  : "Un singur buton",
-  render: () => html`
-    <bd-cta-banner
-      title="Ready to get started?"
-      description="Free during BETA, no waitlist and no licence key."
-    >
-      <bd-button-link
-        slot="primary-button"
-        label="Install now"
-        kind="white"
-        size="md"
-        strong
-      >Install now</bd-button-link>
-    </bd-cta-banner>
-  `
-};
+export const LongCopy = {
+  name: "Long copy",
+  args: {
+    title      : "Ready to secure every autonomous agent running on your fleet, on every machine, in every team?",
+    description: "AI Guardian inspects tool calls, file access, prompts and skills against a policy baseline you set, and returns a verdict of allowed, flagged or blocked — so an agent that starts doing something it should not is stopped while it is still trying.",
+    caption    : "Open BETA · macOS 13 and later · no card required · cancel any time"
+  },
+  render: Default.render
+};

package/src/components/display/display.css.js

@@ -6,7 +6,31 @@ export default css`
       margin: 0;
       padding: 0;
       font-family: var(--typography-display-lg-fontFamily);
-      color: var(--color-neutral-900);
+      color: var(--color-text-primary);
+      /* Display type is large enough that a single word can be wider than a
+         phone, and with overflow-wrap: normal there is no break opportunity
+         inside a word -- so the word painted outside the box and widened the
+         document. Measured at 320 and 375 with "Award-winning cybersecurity":
+
+           step      size     320     375     576   768+
+           sm        36px      ok      ok      ok    ok
+           md        48px      ok      ok      ok    ok
+           lg        60px    +61px    +6px     ok    ok
+           xl        72px   +134px   +79px     ok    ok
+           xxl       96px   +280px  +225px   +24px   ok
+           xxxl     128px   +475px  +420px  +219px   ok
+
+         lg is this component's default, so the out-of-the-box configuration
+         made a phone scroll sideways on a thirteen-character word. break-word
+         only breaks where there is no break opportunity at all, so every case
+         that already fitted is untouched -- the same rule, and the same reason,
+         as the tooltip bubble in P7F.1.
+
+         Containment only. WHICH step belongs at which breakpoint stays the
+         consuming page's choice: this atom maps a variant onto a
+         --typography-display-* role and deliberately knows nothing about
+         viewports, and six steps exist so that choice can be made. */
+      overflow-wrap: break-word;
     }
 
       

package/src/components/display/display.js

@@ -1,38 +1,71 @@
 import { LitElement, html } from "lit";
-import { tokens } from "../../tokens/tokens.js";
+// Installs the design tokens into document scope; see src/tokens/tokens.js
+import "../../tokens/tokens.js";
 import displayCSS from "./display.css.js";
+import { color as colorRole } from "../shared/token-scales.js";
+
+/** The six display roles the stylesheet carries, largest first. */
+const VARIANTS = ["xxxl", "xxl", "xl", "lg", "md", "sm"];
 
 export class BdDisplay extends LitElement {
   static properties = {
-    kind : { type: String, reflect: true }, // "xxxl", "xxl", "xl", "lg", "md", "sm"
-    color: { type: String, reflect: true }, // Custom text color
-    align: { type: String, reflect: true }  // "left", "center", "right"
+    /* `variant`, matching bd-p and bd-li, which name their type steps the
+       same way. This was `kind` — the word that meant four unrelated things
+       before the vocabulary was settled, and the one atom the settling missed.
+       These are type roles rather than the sm/md/lg size scale, which is why
+       they are a variant and not a `size`. */
+    variant: { type: String, reflect: true },
+    /** @deprecated pass `variant`. */
+    kind   : { type: String },
+    color  : { type: String, reflect: true }, // semantic role, see COLOR_ROLES
+    align  : { type: String, reflect: true }  // "left", "center", "right"
   };
 
   constructor() {
     super();
-    this.kind = "lg"; // Default medium display
+    /* `md`, not `lg`, since 2026-09-17 -- plans/LATER.md entry 14.
+       lg is 60px with no mobile endpoint, so the out-of-the-box configuration
+       used to be the largest step a phone cannot take: measured on a 288px
+       column, "Cybersecurity" at 60 needs 373px and breaks across two lines.
+       md is fluid -- clamp(30px, .., 48px) -- so it is the largest step that
+       fits at every width, which is what a default should be.
+       This DOES change what a bare <bd-display> renders on desktop, 60 to 48.
+       Nothing in this package moved, because no component consumes the atom;
+       a page that wants 60 says variant="lg" and always could. */
+    this.variant = "md";
+    this.kind = "";
     this.color = "";
     this.align = "left"; // Default left alignment
   }
 
+  willUpdate(changed) {
+    if (changed.has("kind") && this.kind) this.variant = this.kind;
+    if (changed.has("variant") || changed.has("kind")) {
+      /* An unrecognised variant lands on the default rather than on lg: a typo
+         should not render LARGER than what was asked for, which is the trap
+         the default itself just stopped being. */
+      if (!VARIANTS.includes(this.variant)) this.variant = "md";
+    }
+  }
+
   render() {
+    // color is a semantic role resolved to a token reference by
+    // shared/token-scales.js. It took a raw CSS colour before and call sites
+    // were passing hex straight through, which the manifest never surfaced
+    // because bd-display was absent from it.
     const styles = [];
-    if (this.color) {
-      styles.push(`color: ${this.color}`);
-    }
-    if (this.align) {
-      styles.push(`text-align: ${this.align}`);
-    }
+    const resolved = colorRole(this.color);
+    if (resolved) styles.push(`color: ${resolved}`);
+    if (this.align) styles.push(`text-align: ${this.align}`);
 
     return html`
-      <div class="bd-display ${this.kind}" style="${styles.join('; ')}">
+      <div class="bd-display ${this.variant}" style="${styles.join('; ')}">
         <slot></slot>
       </div>
     `;
   }
 
-  static styles = [tokens, displayCSS];
+  static styles = [displayCSS];
 }
 
 customElements.define("bd-display", BdDisplay);