@repobit/dex-system-design 0.24.4 → 0.24.6

package/src/components/bento-grid/bento-item.css.js

@@ -0,0 +1,105 @@
+import { css } from "lit";
+
+export default css`
+  :host {
+    display: block;
+    height: 100%;
+    --background-card-grey: var(--color-neutral-25);
+    box-sizing: border-box;
+  }
+
+  .bd-bentoitem-box {
+    background: var(--background-card-grey);
+    border-radius: var(--spacing-20);
+    padding: var(--spacing-32);
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    justify-content: flex-start;
+    text-align: start;
+    height: 100%;
+    box-sizing: border-box;
+    font-family: var(--typography-fontFamily-sans);
+    min-width: 0;
+    transition: transform 0.25s ease, box-shadow 0.25s ease;
+    border: 1px solid var(--color-neutral-100);
+  }
+
+
+.bd-bentoitem-box:hover {
+transform: translateY(-3px);
+box-shadow: 0px 14px 40px #00000012;
+}
+
+  .bd-bentoitem-icon-wrap {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: flex-start;
+    gap: var(--spacing-8);
+    padding-bottom: var(--spacing-8);
+    min-height: 48px;
+  }
+
+  .bd-bentoitem-icon,
+  ::slotted([slot="icon"]) {
+    max-width: 48px;
+    max-height: 48px;
+    width: 48px;
+    height: 48px;
+    object-fit: contain;
+    display: block;
+  }
+
+  .bd-bentoitem-title-wrap {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--spacing-4, 4px);
+    overflow: hidden;
+    margin-bottom: var(--spacing-8);
+    width: 100%;
+  }
+
+  .bd-bentoitem-body {
+    font-size: var(--spacing-16);
+    margin: 0 0 1em 0;
+    color: var(--color-neutral-700, inherit);
+    width: 100%;
+  }
+
+  ::slotted(bd-p) {
+    width: 100%;
+  }
+
+  /* === TONE VARIANTS === */
+
+  :host([tone="tint"]) {
+    --background-card-grey: var(--color-blue-50);
+  }
+
+  :host([tone="tint"]) .bd-bentoitem-box {
+    border-color: var(--color-blue-50);
+  }
+
+  :host([tone="dark"]) {
+    --background-card-grey: var(--color-neutral-900);
+  }
+
+  :host([tone="dark"]) .bd-bentoitem-box {
+    border-color: var(--color-neutral-900);
+  }
+
+  :host([tone="dark"]) .bd-bentoitem-title-wrap bd-h {
+    color: var(--color-neutral-0);
+  }
+
+  :host([tone="dark"]) .bd-bentoitem-body {
+    --bd-paragraph-color: var(--color-neutral-0);
+  }
+
+  @media (max-width: 599px) {
+    .bd-bentoitem-box {
+      padding: var(--spacing-24);
+    }
+  }
+`;

package/src/components/bento-grid/bento-item.js

@@ -0,0 +1,57 @@
+import { LitElement, html } from "lit";
+import { tokens } from "../../tokens/tokens.js";
+import "../heading/heading.js";
+import "../paragraph/paragraph.js";
+import bentoItemCSS from "./bento-item.css.js";
+
+class BentoItem extends LitElement {
+  static properties = {
+    title      : { type: String },
+    body       : { type: String },
+    icon       : { type: String },
+    priority   : { type: String, reflect: true },
+    orientation: { type: String, attribute: "orientation" },
+    // "default" (neutral-25 fill) | "tint" (light blue fill) | "dark" (dark fill, light text)
+    tone       : { type: String, reflect: true }
+  };
+
+  static styles = [tokens, bentoItemCSS];
+
+  constructor() {
+    super();
+    this.title = "";
+    this.body = "";
+    this.icon = "";
+    this.priority = "standard";
+    this.orientation = "auto";
+    this.tone = "default";
+  }
+
+  render() {
+    return html`
+      <div class="bd-bentoitem-box">
+        <div class="bd-bentoitem-icon-wrap">
+          <slot name="icon">
+            ${this.icon ? html`<img src="${this.icon}" alt="" class="bd-bentoitem-icon" />` : ""}
+          </slot>
+        </div>
+
+        ${this.title
+          ? html`
+              <div class="bd-bentoitem-title-wrap">
+                <bd-h as="h5" fontWeight="700">${this.title}</bd-h>
+              </div>
+            `
+          : ""}
+
+        ${this.body
+          ? html`<bd-p kind="regular" class="bd-bentoitem-body">${this.body}</bd-p>`
+          : ""}
+
+        <slot></slot>
+      </div>
+    `;
+  }
+}
+
+customElements.define("bd-bento-item", BentoItem);

package/src/components/button/button.css.js

@@ -219,4 +219,30 @@ export default css`
       transition: none !important;
     }
   }
+    .button--white {
+  background-color: var(--color-neutral-0);
+  color: var(--color-blue-500);
+}
+
+.button--white:hover {
+  background-color: var(--color-blue-50);
+}
+
+.button--white:active {
+  background-color: var(--color-blue-100);
+}
+
+.button--outline-white {
+  background-color: transparent;
+  box-shadow: inset 0 0 0 1.5px #ffffff8c;
+  color: var(--color-neutral-0);
+}
+
+.button--outline-white:hover {
+  background-color: rgba(255, 255, 255, 0.1);
+}
+
+.button--outline-white:active {
+  background-color: rgba(255, 255, 255, 0.2);
+}
 `;

package/src/components/button/button.js

@@ -70,6 +70,10 @@ class Button extends LitElement {
         return "button--primary";
       case "danger":
         return "button--danger";
+      case "white":
+        return "button--white";
+      case "outline-white":
+        return "button--outline-white";
       default:
         return "";
     }
@@ -173,6 +177,10 @@ class ButtonLink extends LitElement {
         return "button--primary";
       case "danger":
         return "button--danger";
+      case "white":
+        return "button--white";
+      case "outline-white":
+        return "button--outline-white";
       default:
         return "";
     }

package/src/components/button/button.stories.js

@@ -405,4 +405,16 @@ export const Playground = {
     </div>
   `,
   parameters: { docs: { description: { story: 'Interactive playground for `bd-button`. Use Controls to adjust all props including alignment.' } } }
+};
+// ─── White / Outline-White (on dark background) ───────────────────────────
+
+export const ButtonWhiteOnDark = {
+  name  : 'Button — White / Outline-White (on dark background)',
+  render: () => html`
+    <div style="background: linear-gradient(120deg, #0038e0 0%, #061a5c 100%); padding: 48px; border-radius: 12px; display:flex; gap:16px; flex-wrap:wrap; align-items:center; justify-content:center;">
+      <bd-button-link kind="white" size="md" strong href="#">Download BETA Today</bd-button-link>
+      <bd-button-link kind="outline-white" size="md" strong href="#">Read the docs</bd-button-link>
+    </div>
+  `,
+  parameters: { docs: { description: { story: '`white` and `outline-white` kinds, meant for use on colored/dark backgrounds like `bd-cta-banner` or hero sections.' } } }
 };

package/src/components/comparison-panel/comparison-panel.css.js

@@ -0,0 +1,104 @@
+import { css } from "lit";
+
+export default css`
+  :host {
+    display: block;
+    font-family: var(--typography-fontFamily-sans);
+     background: var(--color-blue-50);
+  }
+
+  .bd-comparisonpanel-wrapper {
+    max-width: var(--layout-ensemble-max-width, 1200px);
+    margin: 0 auto;
+    padding: var(--spacing-48) var(--layout-ensemble-inline-padding, var(--spacing-24));
+    box-sizing: border-box;
+  }
+
+  .bd-comparisonpanel-title {
+    margin: 0 0 var(--spacing-16);
+    color: var(--color-neutral-900);
+    line-height: var(--typography-lineHeight-tight, 1.1);
+  }
+
+  .bd-comparisonpanel-description {
+    margin: 0 0 var(--spacing-48);
+    color: var(--color-neutral-600);
+    max-width: 70ch;
+  }
+
+  /* === COLUMNS === */
+  .bd-comparisonpanel-columns {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: var(--spacing-24);
+  }
+
+  .bd-comparisonpanel-column {
+    background: var(--color-neutral-0, #fff);
+    border: 1px solid var(--color-neutral-100, #e5e7eb);
+    border-radius: var(--radius-2xl);
+    padding: var(--spacing-32);
+    box-sizing: border-box;
+  }
+
+  .bd-comparisonpanel-column-title {
+    margin: 0 0 var(--spacing-16);
+    color: var(--color-neutral-900);
+  }
+
+  /* === LIST === */
+  .bd-comparisonpanel-list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-16);
+  }
+
+  .bd-comparisonpanel-item {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--spacing-12);
+  }
+
+  .bd-comparisonpanel-icon {
+    flex-shrink: 0;
+    width: var(--spacing-20);
+    height: var(--spacing-20);
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-top: 1px;
+  }
+
+  .bd-comparisonpanel-icon--positive {
+    background: var(--color-green-700);
+  }
+
+  .bd-comparisonpanel-icon--negative {
+    background: var(--color-red-600);
+  }
+
+  .bd-comparisonpanel-text {
+    margin: 0;
+    color: var(--color-neutral-800);
+    line-height: var(--typography-lineHeight-normal);
+  }
+
+  /* === RESPONSIVE === */
+  @media (max-width: 767px) {
+    .bd-comparisonpanel-columns {
+      grid-template-columns: 1fr;
+    }
+
+    .bd-comparisonpanel-wrapper {
+      padding: var(--spacing-32) var(--spacing-24);
+    }
+
+    .bd-comparisonpanel-column {
+      padding: var(--spacing-24);
+    }
+  }
+`;

package/src/components/comparison-panel/comparison-panel.js

@@ -0,0 +1,100 @@
+import { LitElement, html, nothing } from "lit";
+import { tokens } from "../../tokens/tokens.js";
+import "../heading/heading.js";
+import "../paragraph/paragraph.js";
+import comparisonPanelCSS from "./comparison-panel.css.js";
+
+class ComparisonPanel extends LitElement {
+  static properties = {
+    title        : { type: String },
+    description  : { type: String },
+    positiveTitle: { type: String, attribute: "positive-title" },
+    negativeTitle: { type: String, attribute: "negative-title" },
+    positiveItems: { type: Array }, // [String]
+    negativeItems: { type: Array }  // [String]
+  };
+
+  static styles = [tokens, comparisonPanelCSS];
+
+  constructor() {
+    super();
+    this.title = "";
+    this.description = "";
+    this.positiveTitle = "";
+    this.negativeTitle = "";
+    this.positiveItems = [];
+    this.negativeItems = [];
+  }
+
+  _renderColumn(kind, colTitle, items, slotName) {
+    const isPositive = kind === "positive";
+    return html`
+      <div class="bd-comparisonpanel-column">
+        ${colTitle
+          ? html`
+              <bd-h as="h4" class="bd-comparisonpanel-column-title">
+                <slot name="${slotName}-title">${colTitle}</slot>
+              </bd-h>
+            `
+          : nothing}
+
+        <ul class="bd-comparisonpanel-list">
+          ${items.map(
+            (item) => html`
+              <li class="bd-comparisonpanel-item">
+                <span
+                  class="bd-comparisonpanel-icon ${isPositive ? "bd-comparisonpanel-icon--positive" : "bd-comparisonpanel-icon--negative"}"
+                  aria-hidden="true"
+                >
+                  ${isPositive
+                    ? html`
+                        <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
+                          <path d="M3 7.2l2.6 2.6L11 4.4" stroke="white" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+                        </svg>
+                      `
+                    : html`
+                        <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
+                          <path d="M3.5 3.5l7 7M10.5 3.5l-7 7" stroke="white" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+                        </svg>
+                      `}
+                </span>
+                <bd-p kind="regular" class="bd-comparisonpanel-text">${item}</bd-p>
+              </li>
+            `
+          )}
+        </ul>
+
+        <slot name="${slotName}"></slot>
+      </div>
+    `;
+  }
+
+  render() {
+    return html`
+      <div class="bd-comparisonpanel-wrapper">
+        ${this.title
+          ? html`
+              <bd-h as="h2" class="bd-comparisonpanel-title">
+                <slot name="title">${this.title}</slot>
+              </bd-h>
+            `
+          : nothing}
+
+        ${this.description
+          ? html`
+              <bd-p kind="regular" class="bd-comparisonpanel-description">
+                <slot name="description">${this.description}</slot>
+              </bd-p>
+            `
+          : nothing}
+
+        <div class="bd-comparisonpanel-columns">
+          ${this._renderColumn("positive", this.positiveTitle, this.positiveItems, "positive")}
+          ${this._renderColumn("negative", this.negativeTitle, this.negativeItems, "negative")}
+        </div>
+      </div>
+    `;
+  }
+}
+
+customElements.define("bd-comparison-panel", ComparisonPanel);

package/src/components/comparison-panel/comparison-panel.stories.js

@@ -0,0 +1,223 @@
+import { html } from "lit";
+import "./comparison-panel.js";
+
+export default {
+  title     : "Components/Comparison Panel",
+  component : "bd-comparison-panel",
+  tags      : ["autodocs"],
+  parameters: {
+    layout: "padded",
+    docs  : {
+      description: {
+        component: `
+**ComparisonPanel** shows a title, description, and two side-by-side white cards —
+one with green checkmarks ("what it is"), one with red X marks ("what it isn't") —
+used to clarify scope/positioning.
+
+### Usage
+\`\`\`html
+<bd-comparison-panel
+  title="What it is, and what it isn't"
+  description="AI Guardian secures the actions an AI agent takes. It is not a traditional antivirus, a network VPN, or a chatbot content filter."
+  positive-title="AI Guardian is"
+  negative-title="AI Guardian is not"
+  .positiveItems=\${[
+    "A security layer for autonomous AI agents.",
+    "A baseline model of policies, permissions, and auditing.",
+    "Guardrails and monitoring around tool execution.",
+    "Focused on agent actions, tool calls, and data access.",
+    "Built for macOS first, with more platforms planned."
+  ]}
+  .negativeItems=\${[
+    "A traditional endpoint antivirus.",
+    "A network firewall or VPN.",
+    "A replacement for your agent framework or LLM.",
+    "A content-quality filter for chatbot text."
+  ]}
+></bd-comparison-panel>
+\`\`\`
+
+### Attributes
+| Attribute          | Type   | Default | Description                                    |
+|----------------------|--------|---------|---------------------------------------------------|
+| \`title\`              | String | \`""\`    | Heading above both columns (or the \`title\` slot)   |
+| \`description\`        | String | \`""\`    | Paragraph under the title (or the \`description\` slot) |
+| \`positive-title\`     | String | \`""\`    | Left column heading (or the \`positive-title\` slot) |
+| \`negative-title\`     | String | \`""\`    | Right column heading (or the \`negative-title\` slot) |
+| \`positiveItems\`      | Array  | \`[]\`    | Left column list items, each with a green checkmark  |
+| \`negativeItems\`      | Array  | \`[]\`    | Right column list items, each with a red X mark      |
+
+### Slots
+| Slot               | Description                                              |
+|---------------------|----------------------------------------------------------|
+| \`title\`             | Overrides the \`title\` attribute                          |
+| \`description\`       | Overrides the \`description\` attribute                    |
+| \`positive-title\`    | Overrides the \`positive-title\` attribute                 |
+| \`negative-title\`    | Overrides the \`negative-title\` attribute                 |
+| \`positive\`          | Extra freeform content appended after the positive list    |
+| \`negative\`          | Extra freeform content appended after the negative list    |
+        `
+      }
+    }
+  },
+  argTypes: {
+    title        : { control: "text", table: { category: "Content" } },
+    description  : { control: "text", table: { category: "Content" } },
+    positiveTitle: { control: "text", table: { category: "Content" } },
+    negativeTitle: { control: "text", table: { category: "Content" } },
+    positiveItems: { control: "object", table: { category: "Content" } },
+    negativeItems: { control: "object", table: { category: "Content" } }
+  }
+};
+
+const render = (args) => html`
+  <bd-comparison-panel
+    title=${args.title}
+    description=${args.description}
+    positive-title=${args.positiveTitle}
+    negative-title=${args.negativeTitle}
+    .positiveItems=${args.positiveItems}
+    .negativeItems=${args.negativeItems}
+  ></bd-comparison-panel>
+`;
+
+export const Default = {
+  name: "Default — AI Guardian Scope",
+  args: {
+    title        : "What it is, and what it isn't",
+    description  : "AI Guardian secures the actions an AI agent takes. It is not a traditional antivirus, a network VPN, or a chatbot content filter.",
+    positiveTitle: "AI Guardian is",
+    negativeTitle: "AI Guardian is not",
+    positiveItems: [
+      "A security layer for autonomous AI agents.",
+      "A baseline model of policies, permissions, and auditing.",
+      "Guardrails and monitoring around tool execution.",
+      "Focused on agent actions, tool calls, and data access.",
+      "Built for macOS first, with more platforms planned."
+    ],
+    negativeItems: [
+      "A traditional endpoint antivirus.",
+      "A network firewall or VPN.",
+      "A replacement for your agent framework or LLM.",
+      "A content-quality filter for chatbot text."
+    ]
+  },
+  render,
+  parameters: {
+    docs: {
+      description: {
+        story: "Matches the reference design exactly: title, description, and two bordered white cards with green checkmarks / red X marks."
+      }
+    }
+  }
+};
+
+export const UnevenLists = {
+  name: "Uneven List Lengths",
+  args: {
+    title        : "What it is, and what it isn't",
+    description  : "Columns don't need matching item counts — each renders independently.",
+    positiveTitle: "Included",
+    negativeTitle: "Not included",
+    positiveItems: [
+      "Real-time tool-call monitoring.",
+      "Automatic policy enforcement."
+    ],
+    negativeItems: [
+      "Manual code review.",
+      "Static analysis of source files.",
+      "Dependency vulnerability scanning.",
+      "License compliance checks.",
+      "Container image scanning."
+    ]
+  },
+  render,
+  parameters: {
+    docs: {
+      description: {
+        story: "The two columns have different item counts (2 vs 5) — each card simply sizes to its own content, no forced height matching."
+      }
+    }
+  }
+};
+
+export const NoDescription = {
+  name: "No Description",
+  args: {
+    title        : "What it is, and what it isn't",
+    description  : "",
+    positiveTitle: "AI Guardian is",
+    negativeTitle: "AI Guardian is not",
+    positiveItems: [
+      "A security layer for autonomous AI agents.",
+      "Built for macOS first."
+    ],
+    negativeItems: [
+      "A traditional endpoint antivirus.",
+      "A network firewall or VPN."
+    ]
+  },
+  render,
+  parameters: {
+    docs: {
+      description: {
+        story: "`description` omitted — no paragraph rendered under the title, no leftover gap."
+      }
+    }
+  }
+};
+
+export const SlottedExtraContent = {
+  name  : "Slotted Extra Content Per Column",
+  render: () => html`
+    <bd-comparison-panel
+      title="What it is, and what it isn't"
+      description="Demonstrates appending extra freeform content after each list via the positive/negative slots."
+      positive-title="AI Guardian is"
+      negative-title="AI Guardian is not"
+      .positiveItems=${["A security layer for autonomous AI agents."]}
+      .negativeItems=${["A traditional endpoint antivirus."]}
+    >
+      <a slot="positive" href="#" style="display:inline-block; margin-top:12px; color:#16a34a; font-size:14px; font-weight:600;">See full feature list →</a>
+      <a slot="negative" href="#" style="display:inline-block; margin-top:12px; color:#dc2626; font-size:14px; font-weight:600;">Read the full comparison →</a>
+    </bd-comparison-panel>
+  `,
+  parameters: {
+    docs: {
+      description: {
+        story: "Each column exposes its own slot (`positive`/`negative`) for extra freeform content, such as a link, appended after the checklist."
+      }
+    }
+  }
+};
+
+export const Playground = {
+  name: "Playground",
+  args: {
+    title        : "What it is, and what it isn't",
+    description  : "AI Guardian secures the actions an AI agent takes. It is not a traditional antivirus, a network VPN, or a chatbot content filter.",
+    positiveTitle: "AI Guardian is",
+    negativeTitle: "AI Guardian is not",
+    positiveItems: [
+      "A security layer for autonomous AI agents.",
+      "A baseline model of policies, permissions, and auditing.",
+      "Guardrails and monitoring around tool execution.",
+      "Focused on agent actions, tool calls, and data access.",
+      "Built for macOS first, with more platforms planned."
+    ],
+    negativeItems: [
+      "A traditional endpoint antivirus.",
+      "A network firewall or VPN.",
+      "A replacement for your agent framework or LLM.",
+      "A content-quality filter for chatbot text."
+    ]
+  },
+  render,
+  parameters: {
+    docs: {
+      description: {
+        story: "Fully interactive story — use the Controls panel to edit titles, description, and both item arrays live."
+      }
+    }
+  }
+};