@repobit/dex-system-design 0.24.5 → 0.24.7

package/CHANGELOG.md

@@ -3,6 +3,21 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.24.7](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.24.6...@repobit/dex-system-design@0.24.7) (2026-09-07)
+
+### Bug Fixes
+
+* **DEX-1014:** new review component adjustments
+
+
+## [0.24.6](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.24.5...@repobit/dex-system-design@0.24.6) (2026-09-04)
+
+### Bug Fixes
+
+* **DEX-1014:** new review component
+* **DEX-1014:** new review component
+
+
 ## [0.24.5](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.24.4...@repobit/dex-system-design@0.24.5) (2026-09-01)
 
 ### Bug Fixes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@repobit/dex-system-design",
-  "version": "0.24.5",
+  "version": "0.24.7",
   "description": "Design system based on Web Components.",
   "author": "Iordache Matei Cezar <miordache@bitdefender.com>",
   "homepage": "https://github.com/bitdefender/dex-core#readme",
@@ -74,8 +74,8 @@
     "url": "https://github.com/bitdefender/dex-core/issues"
   },
   "dependencies": {
-    "@repobit/dex-store": "1.6.21",
-    "@repobit/dex-store-elements": "2.0.26",
+    "@repobit/dex-store": "1.6.23",
+    "@repobit/dex-store-elements": "2.0.28",
     "lit": "^3.3.2"
   },
   "devDependencies": {
@@ -92,5 +92,5 @@
   "volta": {
     "node": "24.14.0"
   },
-  "gitHead": "5cb3f2de5d59ff4292b2a4175fde263f72ac5152"
+  "gitHead": "fce2975c82772042a3f9164d3bc06df4e99e6898"
 }

package/src/components/ai-guardian-demo.stories.js

@@ -24,6 +24,7 @@ import "./icons/laurel-icon.js";
 import "./icons/machine-learning-icon.js";
 import "./icons/pc-mag-icon.js";
 import "./icons/top-product-icon.js";
+import "./install-options/install-options.js";
 import "./overview/overview.js";
 import "./page-switcher/page-switcher.js";
 import "./process-steps/process-steps.js";
@@ -31,10 +32,6 @@ import "./quick-answer/quick-answer.js";
 import "./terminal/terminal-message.js";
 import "./trust-panel/trust-panel.js";
 
-// ---------------------------------------------------------------------------
-// Conținutul (fără page-switcher, fără footer — alea sunt comune,
-// randate o singură dată de wrapper-ul de mai jos) pentru fiecare "pagină".
-// ---------------------------------------------------------------------------
 
 function aiGuardianBody() {
   return html`
@@ -432,6 +429,15 @@ function aiGuardianBody() {
   `;
 }
 
+
+
+// ---------------------------------------------------------------------------
+// PATCH pentru ai-guardian-demo.stories.js
+// 1. Adauga importul: import "./install-options/install-options.js";
+//    (prompt-panel.js NU mai e nevoie -- totul e integrat in bd-install-options)
+// 2. Inlocuieste functia skillScannerBody() cu varianta de mai jos.
+// ---------------------------------------------------------------------------
+
 function skillScannerBody() {
   return html`
     <bd-header-code
@@ -497,14 +503,187 @@ function skillScannerBody() {
       </div>
     </section>
 
+    <div style="max-width: 1200px; margin: 0 auto;">
+      <bd-anchor-nav
+        aria-label="Skill Scanner sections"
+        .items=${[
+          { title: "Install" },
+          { title: "Overview" },
+          { title: "What it detects" },
+          { title: "How it works" },
+          { title: "Privacy" },
+          { title: "FAQ" }
+        ]}
+        style="margin-bottom: 0;"
+      >
+      </bd-anchor-nav>
+
+      <section id="anchor-1-section" style="margin-top: 0; padding-top: 0;">
+        <bd-install-options
+          eyebrow="Get it"
+          title="Three ways to install"
+          description="Agent Skill Scanner installs in under a minute with npx via skills.sh, by cloning the GitHub repository, or as a zip archive you drop into your skills directory. It runs inside your agent harness and installs its own Python dependencies on first use."
+          .worksIn=${[
+            { label: "Claude Code", initial: "✻", color: "#d97706" },
+            { label: "Codex", initial: "◒", color: "#111827" },
+            { label: "OpenClaw", initial: "▣", color: "#dc2626" },
+            { label: "opencode", initial: "▪", color: "#111827" },
+            { label: "Hermes Agent", initial: "H", color: "#111827" }
+          ]}
+          .cards=${[
+            {
+              title      : "With npx, from skills.sh",
+              badge      : "Recommended",
+              description: "One command via the skills.sh installer. Works for any supported harness.",
+              code       : "npx skills add bitdefender/agent-skill-scanner",
+              linkLabel  : "View on skills.sh",
+              linkHref   : "#"
+            },
+            {
+              title      : "From GitHub",
+              description: "Clone the repository and copy the inner agent-skill-scanner/ folder into your skills directory.",
+              code       : "git clone https://github.com/bitdefender/agent-skill-scanner.git\ncp -r agent-skill-scanner/agent-skill-scanner ~/.claude/skills/",
+              linkLabel  : "View the repository",
+              linkHref   : "#"
+            },
+            {
+              title      : "As a zip archive",
+              description: "Download the archive, unzip it, and move the inner agent-skill-scanner/ folder into your skills directory: ~/.claude/skills/, ~/.openclaw/skills/, or your project's skills/.",
+              linkLabel  : "Download the zip",
+              linkHref   : "#"
+            }
+          ]}
+          prompt-panel
+          prompt-label="Prompt for your agent"
+        >
+          <span slot="prompt-title">Then just ask</span>
+          <span slot="prompt-description">There is no command to learn. Once installed, paste this prompt into your agent; it handles invocation, target resolution and update checks. Replace the placeholder with a skill name, a directory, a zip, or a URL:</span>
+          <span slot="prompt">Scan the &lt;skill name or path&gt; skill for security risks and show me the report.</span>
+          <bd-p slot="prompt-note" kind="small">Requires Python 3.12 or 3.13 (3.13 recommended). Dependencies install on first use, and optional pieces degrade gracefully: .7z/.rar support, embeddings and signed-update verification each activate only when needed. Scanning .rar targets additionally needs a system unrar or unar binary on your PATH.</bd-p>
+          <span slot="prompt-footer">To uninstall, delete the agent-skill-scanner folder from your skills directory.</span>
+        </bd-install-options>
+      </section>
+
+      <section id="anchor-2-section">
+        <bd-overview
+          title="What is Agent Skill Scanner?"
+          description="Agent skills are executable code plus natural-language instructions that run with your agent's privileges. A single malicious or careless skill can exfiltrate secrets, open a reverse shell, mine cryptocurrency, phone home, or hide a delayed trigger. Agent Skill Scanner audits a skill before you trust it: it walks every file, extracts security indicators, runs behavioural detectors, and returns an LLM-generated security report with a risk level, a summary, and per-file findings."
+          .facts=${[
+            { label: "TYPE", value: "Agent skill, runs inside your harness" },
+            { label: "WORKS IN", value: "Claude Code, Codex, OpenClaw, opencode, and similar" },
+            { label: "REQUIRES", value: "Python 3.12 or 3.13" },
+            { label: "DETECTION", value: "71 behavioural detectors, 16 threat categories" },
+            { label: "INDICATORS", value: "18 indicator types extracted per text file" },
+            { label: "GET IT FROM", value: "skills.sh · GitHub · zip archive" }
+          ]}
+        ></bd-overview>
+      </section>
+
+      <section id="anchor-3-section">
+        <div style="padding: 24px 24px 48px;">
+          <bd-p kind="normal" style="color: var(--color-blue-500); font-weight: 600; margin: 0 0 8px;">Detection coverage</bd-p>
+          <bd-h as="h2" font-weight="700" style="margin: 0 0 8px;">What it detects</bd-h>
+          <bd-p kind="regular" style="color: var(--color-neutral-700); margin: 0 0 24px;">
+            Agent Skill Scanner runs 71 behavioural detectors across 16 threat categories, including code execution, obfuscation, reverse shells, crypto-mining, persistence, time bombs and stealth natural-language directives. It also extracts 18 indicator types from every text file: URLs, IPs, base64 blobs, dangerous shell commands, secret env-var names and invisible Unicode characters among them.
+          </bd-p>
+
+          <!--
+            .columns suprascrie antetele implicite ale variantei "risk"
+            ("Risk category" / "AI Guardian coverage"), care nu au sens
+            pe pagina Skill Scanner -- prop deja existent in componenta,
+            nicio modificare pe compatibility-table.js nu a fost necesara.
+          -->
+          <bd-accordion-item chevron title="Show all 16 threat categories">
+            <bd-compatibility-table
+              variant="risk"
+              .columns=${["Threat category", "Examples"]}
+              .rows=${[
+                { category: "Code execution", coverage: "eval/exec, dynamic __import__, JS Function(), PowerShell Invoke-Expression" },
+                { category: "Subprocess usage", coverage: "shell=True, os.system, os.popen" },
+                { category: "Obfuscation", coverage: "base64-decode-then-exec, hex decoding, chr() construction, known encoded payloads" },
+                { category: "Network", coverage: "requests/httpx/urllib, raw sockets, fetch(), connections to raw IPs" },
+                { category: "File operations", coverage: "writes, deletions, bulk shutil ops, destructive rm -rf" },
+                { category: "Crypto-mining", coverage: "xmrig, stratum, mining-pool indicators" },
+                { category: "Reverse shells", coverage: "/dev/tcp, nc -e, bash -i >&, pty.spawn" },
+                { category: "Download-and-execute", coverage: "curl … | sh, pip/npm install from URL, npx without approval" },
+                { category: "Credential access", coverage: "bulk environment-variable harvesting" },
+                { category: "System persistence", coverage: "cron, systemd, launchd, Windows registry run-keys" },
+                { category: "Privilege escalation", coverage: "sudo, dangerous chmod, chown root, writes to system paths" },
+                { category: "Path traversal", coverage: "../../.., URL-encoded traversal" },
+                { category: "Telemetry", coverage: "analytics and tracking SDKs, sendBeacon, phone-home" },
+                { category: "Symlink attacks", coverage: "ln -s, os.symlink, Node fs.symlink" },
+                { category: "Time bombs", coverage: "date and timestamp-comparison triggers, delayed execution" },
+                { category: "Stealth directives", coverage: "natural-language exfiltration, covert-action and hidden-memory instructions" }
+              ]}
+            ></bd-compatibility-table>
+          </bd-accordion-item>
+
+          <bd-p kind="regular" style="color: var(--color-neutral-700); margin-top: 16px;">
+            18 indicator types are extracted from every text file: URLs, IPv4 addresses, data/javascript: URIs, emails, base64 blobs (decoded and inspected), percent-encoded URLs, environment-variable references, 25 dangerous shell commands, sensitive file paths, suspicious imports, private/loopback IPs, crypto-wallet addresses, known secret env-var names, paste-service domains, DNS-exfiltration patterns, and invisible Unicode characters.
+          </bd-p>
+          <bd-p kind="regular" style="color: var(--color-neutral-700); margin-top: 8px;">
+            Structural checks cover hidden dotfiles, package install-hooks (preinstall/postinstall, setup.py cmdclass), per-file SHA-256 and MD5 hashing, and a normalized skill-level hash used for report caching.
+          </bd-p>
+        </div>
+      </section>
+
+      <section id="anchor-4-section">
+        <div style="padding: 24px 24px 48px;">
+          <bd-bento-grid
+            title="How it works"
+          >
+            <!--
+              Iconițele exacte din poză (stive/layers, scut+lupă, eprubetă,
+              ceas, lacăt deschis, lupă+insectă) nu există în setul curent de
+              iconițe -- am ales cele mai apropiate semantic ca placeholder.
+            -->
+            <bd-bento-item title="Layered analysis" tone="tint">
+              <bd-analysis-icon slot="icon" width="32" height="32" color="#006DFF"></bd-analysis-icon>
+              <bd-p>Local indicator extraction feeds a server-side LLM that produces the report: a risk level, a plain-language summary, and per-file findings. Enough to decide, without wading through raw indicators.</bd-p>
+            </bd-bento-item>
+
+            <bd-bento-item title="Deep archive inspection">
+              <bd-guide-icon slot="icon" width="32" height="32" color="#006DFF"></bd-guide-icon>
+              <bd-p>The scanner recursively unpacks .zip, .tar.gz, .tar.bz2, .tar, .7z and .rar up to 10 levels deep, with limits of 500 MB uncompressed and 10,000 entries per archive. It skips symlinks rather than following them.</bd-p>
+            </bd-bento-item>
+
+            <bd-bento-item title="Prose-aware detection">
+              <bd-machine-learning-icon slot="icon" width="32" height="32" color="#006DFF"></bd-machine-learning-icon>
+              <bd-p>Natural-language threats hidden in SKILL.md instructions (stealth exfiltration, covert actions, keyword and counter triggers) are first-class detections.</bd-p>
+            </bd-bento-item>
+
+            <bd-bento-item title="Semantic embeddings">
+              <bd-globe-icon slot="icon" width="32" height="32" color="#006DFF"></bd-globe-icon>
+              <bd-p>The scanner computes local sentence embeddings (all-MiniLM-L6-v2, ONNX) to support the analysis. They run on your machine, and you can disable them.</bd-p>
+            </bd-bento-item>
+
+            <bd-bento-item title="Privacy-respecting default">
+              <bd-individual-icon slot="icon" width="32" height="32" color="#006DFF"></bd-individual-icon>
+              <bd-p>In scan mode the scanner transmits only hashes, extracted indicators and metadata off the machine.</bd-p>
+            </bd-bento-item>
+
+            <bd-bento-item title="Flexible targets" tone="dark">
+              <bd-family-icon slot="icon" width="32" height="32" color="#60a5fa"></bd-family-icon>
+              <bd-p>Scan a directory, an installed skill by name, a .zip archive, or a URL. The skill resolves whatever you refer to in plain language.</bd-p>
+            </bd-bento-item>
+          </bd-bento-grid>
+        </div>
+      </section>
+
+      <!--
+        TODO: Privacy / FAQ
+        (anchor-5-section .. anchor-6-section) nu au fost specificate incă
+        — se adaugă când vine conținutul.
+      -->
+    </div>
+
     <!--
-      TODO: restul secțiunilor pentru pagina Skill Scanner
-      (compatibility table, features/protections, FAQ, trust panel etc.)
-      nu au fost specificate încă — se adaugă când vine conținutul.
+      TODO: restul secțiunilor de dedesubtul anchor-nav-ului
+      (trust panel, cta-banner, agent-endpoints etc.) încă lipsesc,
+      la fel ca înainte — se adaugă când vine conținutul.
     -->
   `;
 }
-
 function sharedFooter() {
   return html`
     <bd-footer>

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

@@ -71,6 +71,32 @@ box-shadow: 0px 14px 40px #00000012;
     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

@@ -10,7 +10,9 @@ class BentoItem extends LitElement {
     body       : { type: String },
     icon       : { type: String },
     priority   : { type: String, reflect: true },
-    orientation: { type: String, attribute: "orientation" }
+    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];
@@ -22,6 +24,7 @@ class BentoItem extends LitElement {
     this.icon = "";
     this.priority = "standard";
     this.orientation = "auto";
+    this.tone = "default";
   }
 
   render() {

package/src/components/icons/quote-icon.js

@@ -0,0 +1,28 @@
+// icons/quote-icon.js
+import { LitElement, css, html } from "lit";
+
+class QuoteIcon extends LitElement {
+
+  static properties = {
+    width : { type: Number },
+    height: { type: Number },
+    color : { type: String }
+  };
+
+  constructor() {
+    super();
+    this.width = 51;
+    this.height = 52;
+    this.color = "#2E6BF6";
+  }
+
+  static styles = css`:host { display: inline-flex; }`;
+  render() {
+    return html`
+      <svg xmlns="http://www.w3.org/2000/svg" width="${this.width}" height="${this.height}" viewBox="0 0 51 52" aria-hidden="true">
+        <text fill="${this.color}" font-size="128" font-family="Helvetica"><tspan x="0" y="99">&#8220;</tspan></text>
+      </svg>
+    `;
+  }
+}
+customElements.define("bd-quote-icon", QuoteIcon);

package/src/components/install-options/install-options.css.js

@@ -0,0 +1,276 @@
+import { css } from "lit";
+
+export default css`
+  :host {
+    display: block;
+    font-family: var(--typography-fontFamily-sans);
+  }
+
+  .bd-installoptions-container {
+    background: var(--color-blue-50);
+    padding: var(--spacing-64) var(--layout-ensemble-inline-padding, var(--spacing-24));
+    box-sizing: border-box;
+  }
+
+  .bd-installoptions-eyebrow {
+    color: var(--color-blue-500);
+    font-weight: var(--typography-fontWeight-semibold);
+    margin: 0 0 var(--spacing-16);
+    max-width: var(--layout-ensemble-max-width, 1200px);
+    margin-inline: auto;
+  }
+
+  .bd-installoptions-title {
+    margin: 0 0 var(--spacing-16);
+    color: var(--color-neutral-1000);
+    line-height: var(--typography-lineHeight-tight);
+    max-width: var(--layout-ensemble-max-width, 1200px);
+    margin-inline: auto;
+  }
+
+  .bd-installoptions-description {
+    color: var(--color-neutral-700);
+    max-width: 640px;
+    margin: 0 auto var(--spacing-32);
+  }
+
+  .bd-installoptions-worksin {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: var(--spacing-16);
+    max-width: var(--layout-ensemble-max-width, 1200px);
+    margin: 0 auto var(--spacing-40);
+  }
+
+  .bd-installoptions-worksin-label {
+    color: var(--color-neutral-500);
+    font-family: var(--typography-fontFamily-mono, monospace);
+    font-size: var(--typography-fontSize-xs);
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    flex-shrink: 0;
+  }
+
+  .bd-installoptions-pills {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--spacing-12);
+  }
+
+  .bd-installoptions-pill {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--spacing-8);
+    padding: var(--spacing-8) var(--spacing-16);
+    background: var(--color-neutral-0);
+    border: var(--border-width-1) solid var(--color-neutral-200);
+    border-radius: var(--radius-full);
+    font-size: var(--typography-fontSize-sm);
+    font-weight: var(--typography-fontWeight-semibold);
+    color: var(--color-neutral-900);
+  }
+
+  /*
+    Placeholder brand marks: these render an initial letter on a solid
+    background because the real Claude Code / Codex / OpenClaw / opencode /
+    Hermes Agent logos are not in this icon set. Swap the initial+color pairs
+    for real <img>/<svg> marks as soon as brand assets are available.
+  */
+  .bd-installoptions-pill-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 20px;
+    height: 20px;
+    border-radius: var(--radius-md);
+    color: var(--color-neutral-0);
+    font-size: var(--typography-fontSize-xxs);
+    font-weight: var(--typography-fontWeight-bold);
+    flex-shrink: 0;
+  }
+
+  .bd-installoptions-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: var(--spacing-24);
+    max-width: var(--layout-ensemble-max-width, 1200px);
+    margin-inline: auto;
+  }
+
+  .bd-installoptions-card {
+    background: var(--color-neutral-0);
+    border: var(--border-width-1) solid var(--color-neutral-100);
+    border-radius: var(--radius-xl);
+    padding: var(--spacing-24);
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-12);
+  }
+
+  .bd-installoptions-card-head {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: var(--spacing-12);
+  }
+
+  .bd-installoptions-card-title {
+    margin: 0;
+    color: var(--color-neutral-900);
+  }
+
+  .bd-installoptions-badge {
+    flex-shrink: 0;
+    padding: var(--spacing-4) var(--spacing-8);
+    background: var(--color-blue-50);
+    color: var(--color-blue-700);
+    border-radius: var(--radius-md);
+    font-size: var(--typography-fontSize-xxs);
+    font-weight: var(--typography-fontWeight-bold);
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    white-space: nowrap;
+  }
+
+  .bd-installoptions-card-description {
+    color: var(--color-neutral-600);
+    margin: 0;
+    flex-grow: 1;
+  }
+
+  .bd-installoptions-code {
+    position: relative;
+    background: var(--color-neutral-900);
+    border-radius: var(--radius-md);
+    padding: var(--spacing-16);
+    box-sizing: border-box;
+  }
+
+  .bd-installoptions-code-text {
+    margin: 0;
+    color: var(--color-neutral-0);
+    font-family: var(--typography-fontFamily-mono, monospace);
+    font-size: var(--typography-fontSize-sm);
+    white-space: pre-wrap;
+    word-break: break-word;
+    padding-right: var(--spacing-56);
+  }
+
+  .bd-installoptions-copy {
+    position: absolute;
+    top: var(--spacing-12);
+    right: var(--spacing-12);
+    padding: var(--spacing-4) var(--spacing-10);
+    background: rgba(255, 255, 255, 0.12);
+    color: var(--color-neutral-0);
+    border: none;
+    border-radius: var(--radius-sm);
+    font-family: var(--typography-fontFamily-sans);
+    font-size: var(--typography-fontSize-xs);
+    font-weight: var(--typography-fontWeight-semibold);
+    cursor: pointer;
+    transition: background var(--transition-duration-fast) var(--transition-easing-smooth);
+  }
+
+  .bd-installoptions-copy:hover {
+    background: rgba(255, 255, 255, 0.2);
+  }
+
+  .bd-installoptions-copy:focus-visible {
+    outline: none;
+    box-shadow: var(--focus-outline-primary);
+  }
+
+  .bd-installoptions-card-link {
+    font-weight: var(--typography-fontWeight-semibold);
+    margin-top: auto;
+  }
+
+  /* === "Then just ask" prompt panel (prompt-panel attribute) === */
+
+  .bd-installoptions-promptpanel {
+    max-width: var(--layout-ensemble-max-width, 1200px);
+    margin: var(--spacing-64) auto 0;
+  }
+
+  .bd-installoptions-prompt-title {
+    margin: 0 0 var(--spacing-16);
+    color: var(--color-neutral-1000);
+    line-height: var(--typography-lineHeight-tight);
+  }
+
+  .bd-installoptions-prompt-description {
+    color: var(--color-neutral-700);
+    max-width: 640px;
+    margin: 0 0 var(--spacing-24);
+  }
+
+  .bd-installoptions-prompt-label {
+    display: block;
+    color: var(--color-neutral-500);
+    font-family: var(--typography-fontFamily-mono, monospace);
+    font-size: var(--typography-fontSize-xs);
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    margin-bottom: var(--spacing-8);
+  }
+
+  .bd-installoptions-prompt-code {
+    position: relative;
+    background: var(--color-neutral-900);
+    border: var(--border-width-2) solid var(--color-blue-500);
+    border-radius: var(--radius-md);
+    padding: var(--spacing-16);
+    padding-right: var(--spacing-64);
+    box-sizing: border-box;
+    margin-bottom: var(--spacing-24);
+  }
+
+  .bd-installoptions-prompt-code-text {
+    color: var(--color-neutral-0);
+    font-family: var(--typography-fontFamily-mono, monospace);
+    font-size: var(--typography-fontSize-sm);
+    line-height: var(--typography-lineHeight-normal);
+  }
+
+  .bd-installoptions-prompt-code-text ::slotted(*) {
+    margin: 0;
+    font: inherit;
+    color: inherit;
+  }
+
+  .bd-installoptions-copy--prompt {
+    top: var(--spacing-12);
+    right: var(--spacing-12);
+  }
+
+  .bd-installoptions-prompt-note {
+    background: var(--color-yellow-50, #fffbeb);
+    border: var(--border-width-1) solid var(--color-yellow-300, #fcd34d);
+    border-radius: var(--radius-md);
+    padding: var(--spacing-16) var(--spacing-20);
+    color: var(--color-yellow-800, #92400e);
+    font-size: var(--typography-fontSize-sm);
+    line-height: var(--typography-lineHeight-normal);
+    margin-bottom: var(--spacing-24);
+  }
+
+  .bd-installoptions-prompt-note ::slotted(*) {
+    margin: 0;
+    font: inherit;
+    color: inherit;
+  }
+
+  .bd-installoptions-prompt-footer {
+    color: var(--color-neutral-600);
+    margin: 0;
+  }
+
+  @media (max-width: 899px) {
+    .bd-installoptions-grid {
+      grid-template-columns: 1fr;
+    }
+  }
+`;

package/src/components/install-options/install-options.js

@@ -0,0 +1,184 @@
+import { LitElement, html, nothing } from "lit";
+import { tokens } from "../../tokens/tokens.js";
+import "../heading/heading.js";
+import "../link/link.js";
+import "../paragraph/paragraph.js";
+import installOptionsCSS from "./install-options.css.js";
+
+class BdInstallOptions extends LitElement {
+  static properties = {
+    eyebrow    : { type: String },
+    title      : { type: String },
+    description: { type: String },
+    worksIn    : { type: Array },  // [{ label, initial, color }]
+    cards      : { type: Array },  // [{ title, badge, description, code, linkLabel, linkHref }]
+
+    // "Then just ask" sub-panel — rendered only when this is set, so a
+    // consumer of bd-install-options who doesn't need it gets nothing extra.
+    promptPanel: { type: Boolean, reflect: true, attribute: "prompt-panel" },
+    promptLabel: { type: String, attribute: "prompt-label" } // small mono label above the prompt block
+  };
+
+  static styles = [tokens, installOptionsCSS];
+
+  constructor() {
+    super();
+    this.eyebrow = "";
+    this.title = "";
+    this.description = "";
+    this.worksIn = [];
+    this.cards = [];
+    this.promptPanel = false;
+    this.promptLabel = "";
+  }
+
+  async _copy(text, btn) {
+    try {
+      await navigator.clipboard.writeText(text);
+      const original = btn.textContent;
+      btn.textContent = "Copied";
+      btn.disabled = true;
+      setTimeout(() => {
+        btn.textContent = original;
+        btn.disabled = false;
+      }, 1500);
+    } catch {
+      // clipboard permission denied or unavailable — button stays as "Copy"
+    }
+  }
+
+  async _copyPromptSlot(btn) {
+    const slot = this.renderRoot?.querySelector('slot[name="prompt"]');
+    const nodes = slot?.assignedNodes({ flatten: true }) || [];
+    const text = nodes.map((n) => n.textContent || "").join("")
+      .trim();
+    if (!text) return;
+    this._copy(text, btn);
+  }
+
+  _renderWorksIn() {
+    if (!this.worksIn.length) return nothing;
+    return html`
+      <div class="bd-installoptions-worksin">
+        <span class="bd-installoptions-worksin-label">Works in</span>
+        <div class="bd-installoptions-pills">
+          ${this.worksIn.map(
+            ({ label, initial, color }) => html`
+              <span class="bd-installoptions-pill">
+                <span
+                  class="bd-installoptions-pill-icon"
+                  style="background:${color || "var(--color-neutral-800)"}"
+                  aria-hidden="true"
+                >${initial || label?.[0] || "?"}</span>
+                ${label}
+              </span>
+            `
+          )}
+        </div>
+      </div>
+    `;
+  }
+
+  _renderCard(card) {
+    return html`
+      <div class="bd-installoptions-card">
+        <div class="bd-installoptions-card-head">
+          <bd-h as="h3" class="bd-installoptions-card-title">${card.title}</bd-h>
+          ${card.badge
+            ? html`<span class="bd-installoptions-badge">${card.badge}</span>`
+            : nothing}
+        </div>
+
+        ${card.description
+          ? html`<bd-p kind="small" class="bd-installoptions-card-description">${card.description}</bd-p>`
+          : nothing}
+
+        ${card.code
+          ? html`
+              <div class="bd-installoptions-code">
+                <pre class="bd-installoptions-code-text">${card.code}</pre>
+                <button
+                  type="button"
+                  class="bd-installoptions-copy"
+                  @click=${(e) => this._copy(card.code, e.currentTarget)}
+                >Copy</button>
+              </div>
+            `
+          : nothing}
+
+        ${card.linkLabel
+          ? html`
+              <bd-link href=${card.linkHref || "#"} kind="primary" class="bd-installoptions-card-link">
+                ${card.linkLabel} →
+              </bd-link>
+            `
+          : nothing}
+      </div>
+    `;
+  }
+
+  _renderPromptPanel() {
+    if (!this.promptPanel) return nothing;
+
+    return html`
+      <div class="bd-installoptions-promptpanel">
+        <bd-h as="h2" class="bd-installoptions-prompt-title">
+          <slot name="prompt-title"></slot>
+        </bd-h>
+
+        <bd-p kind="regular" class="bd-installoptions-prompt-description">
+          <slot name="prompt-description"></slot>
+        </bd-p>
+
+        ${this.promptLabel
+          ? html`<span class="bd-installoptions-prompt-label">${this.promptLabel}</span>`
+          : nothing}
+
+        <div class="bd-installoptions-prompt-code">
+          <div class="bd-installoptions-prompt-code-text">
+            <slot name="prompt"></slot>
+          </div>
+          <button
+            type="button"
+            class="bd-installoptions-copy bd-installoptions-copy--prompt"
+            @click=${(e) => this._copyPromptSlot(e.currentTarget)}
+          >Copy</button>
+        </div>
+
+        <div class="bd-installoptions-prompt-note">
+          <slot name="prompt-note"></slot>
+        </div>
+
+        <bd-p kind="regular" class="bd-installoptions-prompt-footer">
+          <slot name="prompt-footer"></slot>
+        </bd-p>
+      </div>
+    `;
+  }
+
+  render() {
+    return html`
+      <div class="bd-installoptions-container">
+        ${this.eyebrow
+          ? html`<bd-p kind="normal" class="bd-installoptions-eyebrow">${this.eyebrow}</bd-p>`
+          : nothing}
+
+        <bd-h as="h2" class="bd-installoptions-title">${this.title}</bd-h>
+
+        ${this.description
+          ? html`<bd-p kind="regular" class="bd-installoptions-description">${this.description}</bd-p>`
+          : nothing}
+
+        ${this._renderWorksIn()}
+
+        <div class="bd-installoptions-grid">
+          ${this.cards.map((card) => this._renderCard(card))}
+        </div>
+
+        ${this._renderPromptPanel()}
+      </div>
+    `;
+  }
+}
+
+customElements.define("bd-install-options", BdInstallOptions);

package/src/components/paragraph/paragraph.css.js

@@ -3,7 +3,7 @@ import { css } from "lit";
 export default css`
   :host {
     display: block;
-    color: var(--color-neutral-1000);
+    color: var(--bd-paragraph-color, var(--color-neutral-1000));
   }
 
   p {
@@ -47,8 +47,4 @@ export default css`
     line-height: var(--typography-body-lead-lineHeight);
     letter-spacing: var(--typography-body-lead-letterSpacing);
   }
-
-
-  
-
 `;

package/src/components/review/review-grid.css.js

@@ -0,0 +1,36 @@
+import { css } from "lit";
+
+export default css`
+  :host {
+    display: block;
+    width: 100%;
+    box-sizing: border-box;
+    max-width: 1290px;
+
+  }
+
+  .bd-reviewgrid-title {
+    text-align: center;
+    margin: 0 0 var(--spacing-32);
+    color: var(--color-neutral-1000);
+  }
+
+  .bd-reviewgrid-grid {
+    display: grid;
+    grid-template-columns: repeat(var(--bd-review-columns, 3), 1fr);
+    gap: var(--spacing-24);
+    width: 100%;
+  }
+
+  ::slotted(bd-review) {
+    min-width: 0;
+  }
+
+  /* Below md, every count collapses to a single column, regardless of how
+     many cards are slotted in. */
+  @media (max-width: 899px) {
+    .bd-reviewgrid-grid {
+      grid-template-columns: 1fr;
+    }
+  }
+`;

package/src/components/review/review-grid.js

@@ -0,0 +1,63 @@
+import { LitElement, html, nothing } from "lit";
+import { tokens } from "../../tokens/tokens.js";
+import "../heading/heading.js";
+import reviewGridCSS from "./review-grid.css.js";
+import "./review.js";
+
+/**
+ * Responsive wrapper for bd-review cards.
+ *
+ *   <bd-review-grid title="What They Say">
+ *     <bd-review variant="tint">...</bd-review>
+ *     <bd-review variant="tint">...</bd-review>
+ *   </bd-review-grid>
+ *
+ * Column count is derived from how many bd-review children are slotted in,
+ * capped at 3 per row (extra cards wrap onto further rows at 3-per-row):
+ *   1 child  -> 1 column  (full width,  "col-md-12")
+ *   2 children -> 2 columns (half each,  "col-md-6")
+ *   3+ children -> 3 columns (third each, "col-md-4")
+ *
+ * Below the md breakpoint every count collapses to a single column.
+ */
+class BdReviewGrid extends LitElement {
+  static properties = {
+    title   : { type: String },
+    _columns: { state: true }
+  };
+
+  static styles = [tokens, reviewGridCSS];
+
+  constructor() {
+    super();
+    this.title = "";
+    this._columns = 3;
+  }
+
+  get _items() {
+    return [...this.children].filter((el) => el.tagName === "BD-REVIEW");
+  }
+
+  _onSlotChange() {
+    const count = this._items.length;
+    this._columns = count <= 0 ? 1 : Math.min(count, 3);
+  }
+
+  render() {
+    return html`
+      ${this.title
+        ? html`<bd-h as="h2" class="bd-reviewgrid-title"><slot name="title">${this.title}</slot></bd-h>`
+        : nothing}
+
+      <div
+        class="bd-reviewgrid-grid"
+        style="--bd-review-columns: ${this._columns};"
+        role="list"
+      >
+        <slot @slotchange=${this._onSlotChange}></slot>
+      </div>
+    `;
+  }
+}
+
+customElements.define("bd-review-grid", BdReviewGrid);

package/src/components/review/review.css.js

@@ -0,0 +1,52 @@
+import { css } from "lit";
+
+export default css`
+  :host {
+    display: block;
+    height: 100%;
+    font-family: var(--typography-fontFamily-sans);
+    box-sizing: border-box;
+    max-width: 1290px;
+
+  }
+
+  .bd-review-card {
+    background: var(--color-blue-50);
+    border-radius: var(--radius-3xl);
+    padding: var(--spacing-28);
+    box-sizing: border-box;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+  }
+
+  :host([variant="neutral"]) .bd-review-card {
+    background: var(--color-neutral-25, #fafafa);
+  }
+
+  .bd-review-mark {
+    display: block;
+    margin-bottom: var(--spacing-8);
+  }
+
+  .bd-review-quote {
+    --bd-paragraph-color: var(--color-neutral-900);
+    margin-bottom: var(--spacing-16);
+    flex-grow: 1;
+  }
+
+  .bd-review-meta {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .bd-review-source {
+    --bd-paragraph-color: var(--color-neutral-900);
+    margin: 0;
+  }
+
+  .bd-review-date {
+    color: var(--color-neutral-600);
+    font-size: var(--typography-fontSize-sm);
+  }
+`;

package/src/components/review/review.js

@@ -0,0 +1,58 @@
+import { LitElement, html } from "lit";
+import { tokens } from "../../tokens/tokens.js";
+import "../icons/quote-icon.js";
+import "../paragraph/paragraph.js";
+import reviewCSS from "./review.css.js";
+
+/**
+ * A single testimonial/review card. Everything is slotted rather than
+ * passed as props, so callers can put arbitrary markup (a bd-p, a link,
+ * bold text) in any of the three slots:
+ *
+ *   <bd-review variant="tint">
+ *     <span slot="quote">If you're looking to buy a security suite...</span>
+ *     <span slot="source">PCMag</span>
+ *     <span slot="date">February 3, 2026</span>
+ *   </bd-review>
+ *
+ * `variant` is the only prop, since it's an appearance switch (background
+ * colour), not content:
+ *   "tint"    — light blue background (var(--color-blue-50))
+ *   "neutral" — light grey background (var(--color-neutral-25), #fafafa)
+ */
+class BdReview extends LitElement {
+  static properties = {
+    variant: { type: String, reflect: true } // "tint" | "neutral"
+  };
+
+  static styles = [tokens, reviewCSS];
+
+  constructor() {
+    super();
+    this.variant = "tint";
+  }
+
+  render() {
+    return html`
+      <div class="bd-review-card">
+        <bd-quote-icon
+          class="bd-review-mark"
+          width="34"
+          height="35"
+          color="var(--color-blue-500)"
+        ></bd-quote-icon>
+
+        <bd-p kind="regular" class="bd-review-quote">
+          <slot name="quote"></slot>
+        </bd-p>
+
+        <div class="bd-review-meta">
+          <bd-p kind="small" font-weight="bold" class="bd-review-source"><slot name="source"></slot></bd-p>
+          <span class="bd-review-date"><slot name="date"></slot></span>
+        </div>
+      </div>
+    `;
+  }
+}
+
+customElements.define("bd-review", BdReview);

package/src/components/review/review.stories.js

@@ -0,0 +1,228 @@
+import { html } from "lit";
+import "./review-grid.js";
+import "./review.js";
+
+export default {
+  title     : "Components/Review",
+  tags      : ["autodocs"],
+  parameters: {
+    layout: "padded",
+    docs  : {
+      description: {
+        component: `
+Testimonial / review card (\`bd-review\`) plus a responsive grid wrapper
+(\`bd-review-grid\`) that auto-sizes columns from how many cards are
+slotted in.
+
+\`\`\`html
+<bd-review-grid title="What They Say">
+  <bd-review variant="tint">
+    <span slot="quote">If you're looking to buy a security suite, our experts and readers agree: Bitdefender should be your top choice.</span>
+    <span slot="source">PCMag</span>
+    <span slot="date">February 3, 2026</span>
+  </bd-review>
+
+  <bd-review variant="tint">
+    <span slot="quote">Bitdefender Premium Security combines award-winning security with a scam-detection chatbot, server-level email protection, and a VPN with no bandwidth or server limits.</span>
+    <span slot="source">PCMag</span>
+    <span slot="date">April 20, 2026</span>
+  </bd-review>
+</bd-review-grid>
+\`\`\`
+
+### Column count (bd-review-grid)
+Derived automatically from how many \`bd-review\` children are slotted in,
+capped at 3 per row — extra cards wrap onto further rows at 3-per-row:
+
+| Cards | Columns | Each card |
+|---|---|---|
+| 1 | 1 | full width ("col-md-12") |
+| 2 | 2 | half each ("col-md-6") |
+| 3+ | 3 | third each ("col-md-4") |
+
+Below the md breakpoint (899px), every count collapses to a single column.
+
+### Attributes \`bd-review\`
+| Attribute | Type | Default | Description |
+|---|---|---|---|
+| \`variant\` | String | \`"tint"\` | \`"tint"\` (light blue) or \`"neutral"\` (light grey, #fafafa) |
+
+### Slots \`bd-review\`
+| Slot | Description |
+|---|---|
+| \`quote\` | The testimonial text |
+| \`source\` | Publication / attribution (bold) |
+| \`date\` | Date line, under the source |
+
+### Attributes \`bd-review-grid\`
+| Attribute | Type | Default | Description |
+|---|---|---|---|
+| \`title\` | String | — | Optional centred heading above the grid |
+        `
+      }
+    }
+  }
+};
+
+// ─── Un singur card (full width) ──────────────────────────────────────────
+
+export const OneCard = {
+  name  : "1 card — full width",
+  render: () => html`
+    <bd-review-grid title="What They Say">
+      <bd-review variant="tint">
+        <span slot="quote">If you're looking to buy a security suite, our experts and readers agree: Bitdefender should be your top choice.</span>
+        <span slot="source">PCMag</span>
+        <span slot="date">February 3, 2026</span>
+      </bd-review>
+    </bd-review-grid>
+  `
+};
+
+// ─── Doua carduri (jumatate fiecare) ──────────────────────────────────────
+
+export const TwoCards = {
+  name  : "2 carduri — jumătate fiecare",
+  render: () => html`
+    <bd-review-grid title="What They Say">
+      <bd-review variant="tint">
+        <span slot="quote">If you're looking to buy a security suite, our experts and readers agree: Bitdefender should be your top choice.</span>
+        <span slot="source">PCMag</span>
+        <span slot="date">February 3, 2026</span>
+      </bd-review>
+
+      <bd-review variant="tint">
+        <span slot="quote">Bitdefender Premium Security combines award-winning security with a scam-detection chatbot, server-level email protection, and a VPN with no bandwidth or server limits.</span>
+        <span slot="source">PCMag</span>
+        <span slot="date">April 20, 2026</span>
+      </bd-review>
+    </bd-review-grid>
+  `
+};
+
+// ─── Trei carduri (o treime fiecare) ──────────────────────────────────────
+
+export const ThreeCards = {
+  name  : "3 carduri — o treime fiecare",
+  render: () => html`
+    <bd-review-grid title="What They Say">
+      <bd-review variant="tint">
+        <span slot="quote">If you're looking to buy a security suite, our experts and readers agree: Bitdefender should be your top choice.</span>
+        <span slot="source">PCMag</span>
+        <span slot="date">February 3, 2026</span>
+      </bd-review>
+
+      <bd-review variant="neutral">
+        <span slot="quote">Bitdefender Premium Security combines award-winning security with a scam-detection chatbot, server-level email protection, and a VPN with no bandwidth or server limits.</span>
+        <span slot="source">PCMag</span>
+        <span slot="date">April 20, 2026</span>
+      </bd-review>
+
+      <bd-review variant="tint">
+        <span slot="quote">Consistently top-ranked by the world's leading independent testing labs and tech publications.</span>
+        <span slot="source">AV-Comparatives</span>
+        <span slot="date">June 12, 2026</span>
+      </bd-review>
+    </bd-review-grid>
+  `
+};
+
+// ─── Cinci carduri (wrap la 3 pe rand) ────────────────────────────────────
+
+export const FiveCardsWrapping = {
+  name      : "5 carduri — se leagă la maxim 3 pe rând",
+  parameters: {
+    docs: {
+      description: {
+        story: "Peste 3 carduri, grid-ul rămâne la 3 coloane și cardurile suplimentare trec pe rândul următor, tot la o treime fiecare — regula \"maxim 3 pe rând\" se aplică indiferent de câte carduri sunt slotate."
+      }
+    }
+  },
+  render: () => html`
+    <bd-review-grid title="What They Say">
+      ${[1, 2, 3, 4, 5].map(
+        (n) => html`
+          <bd-review variant=${n % 2 === 0 ? "neutral" : "tint"}>
+            <span slot="quote">Review number ${n} — placeholder testimonial text to show how the grid wraps once more than three cards are slotted in.</span>
+            <span slot="source">Publication ${n}</span>
+            <span slot="date">2026</span>
+          </bd-review>
+        `
+      )}
+    </bd-review-grid>
+  `
+};
+
+// ─── Text mai lung (verifica wrapping și înălțimea egală pe rând) ─────────
+
+export const LongQuotes = {
+  name      : "Text mai lung — wrapping și înălțime egală",
+  parameters: {
+    docs: {
+      description: {
+        story: "Citate mult mai lungi decât în exemplele scurte, ca să se vadă comportarea reală a cardurilor: textul se leagă pe mai multe rânduri, iar cardurile de pe același rând rămân la aceeași înălțime (citatul se întinde cu flex-grow, meta-ul rămâne lipit de jos)."
+      }
+    }
+  },
+  render: () => html`
+    <bd-review-grid title="What They Say">
+      <bd-review variant="tint">
+        <span slot="quote">If you're looking to buy a security suite, our experts and readers agree: Bitdefender should be your top choice. It combines consistently excellent malware protection with a surprisingly light footprint on system performance, and the extras — VPN, password manager, parental controls — are genuinely useful rather than bolted-on filler.</span>
+        <span slot="source">PCMag</span>
+        <span slot="date">February 3, 2026</span>
+      </bd-review>
+
+      <bd-review variant="neutral">
+        <span slot="quote">Bitdefender Premium Security combines award-winning security with a scam-detection chatbot, server-level email protection, and a VPN with no bandwidth or server limits. In our testing across three months and multiple platforms, it caught every real-world threat we threw at it without a single false positive on legitimate software.</span>
+        <span slot="source">PCMag</span>
+        <span slot="date">April 20, 2026</span>
+      </bd-review>
+
+      <bd-review variant="tint">
+        <span slot="quote">Consistently top-ranked by the world's leading independent testing labs and tech publications, year after year, across every category we measure: protection, performance, usability, and — increasingly relevant for households with kids — how well it handles parental controls without becoming a nuisance to manage.</span>
+        <span slot="source">AV-Comparatives</span>
+        <span slot="date">June 12, 2026</span>
+      </bd-review>
+    </bd-review-grid>
+  `
+};
+
+// ─── Text mai lung, doar doua carduri (verifica jumatate-jumatate) ────────
+
+export const LongQuotesTwoCards = {
+  name  : "Text mai lung — 2 carduri",
+  render: () => html`
+    <bd-review-grid title="What They Say">
+      <bd-review variant="tint">
+        <span slot="quote">If you're looking to buy a security suite, our experts and readers agree: Bitdefender should be your top choice. It combines consistently excellent malware protection with a surprisingly light footprint on system performance.</span>
+        <span slot="source">PCMag</span>
+        <span slot="date">February 3, 2026</span>
+      </bd-review>
+
+      <bd-review variant="neutral">
+        <span slot="quote">Bitdefender Premium Security combines award-winning security with a scam-detection chatbot, server-level email protection, and a VPN with no bandwidth or server limits — a genuinely complete package rather than a marketing checklist.</span>
+        <span slot="source">PCMag</span>
+        <span slot="date">April 20, 2026</span>
+      </bd-review>
+    </bd-review-grid>
+  `
+};
+
+export const NoTitle = {
+  name  : "Fără titlu",
+  render: () => html`
+    <bd-review-grid>
+      <bd-review variant="neutral">
+        <span slot="quote">If you're looking to buy a security suite, our experts and readers agree: Bitdefender should be your top choice.</span>
+        <span slot="source">PCMag</span>
+        <span slot="date">February 3, 2026</span>
+      </bd-review>
+
+      <bd-review variant="neutral">
+        <span slot="quote">Bitdefender Premium Security combines award-winning security with a scam-detection chatbot, server-level email protection, and a VPN with no bandwidth or server limits.</span>
+        <span slot="source">PCMag</span>
+        <span slot="date">April 20, 2026</span>
+      </bd-review>
+    </bd-review-grid>
+  `
+};