@repobit/dex-system-design 0.24.7 → 0.24.9

package/CHANGELOG.md

@@ -3,6 +3,20 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.24.9](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.24.8...@repobit/dex-system-design@0.24.9) (2026-09-08)
+
+### Bug Fixes
+
+* **DEX-1014:** new AI Bitdefender components and anchor nav changes
+
+
+## [0.24.8](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.24.7...@repobit/dex-system-design@0.24.8) (2026-09-08)
+
+### Bug Fixes
+
+* **DEX-1014:** review component adjustments and AI Bitdefender new component
+
+
 ## [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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@repobit/dex-system-design",
-  "version": "0.24.7",
+  "version": "0.24.9",
   "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.23",
-    "@repobit/dex-store-elements": "2.0.28",
+    "@repobit/dex-store": "1.6.25",
+    "@repobit/dex-store-elements": "2.0.30",
     "lit": "^3.3.2"
   },
   "devDependencies": {
@@ -92,5 +92,5 @@
   "volta": {
     "node": "24.14.0"
   },
-  "gitHead": "fce2975c82772042a3f9164d3bc06df4e99e6898"
+  "gitHead": "1f08b0389af256faebe7db77b276d350c9be31ae"
 }

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

@@ -93,6 +93,7 @@ function aiGuardianBody() {
         aria-label="Page sections"
         cta-label="Download BETA Today"
         cta-href="#download"
+        sticky-top="65px"
         .items=${[
           { title: "Overview" },
           { title: "Compatibility" },
@@ -430,14 +431,6 @@ 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
@@ -506,6 +499,7 @@ function skillScannerBody() {
     <div style="max-width: 1200px; margin: 0 auto;">
       <bd-anchor-nav
         aria-label="Skill Scanner sections"
+        sticky-top="65px"
         .items=${[
           { title: "Install" },
           { title: "Overview" },
@@ -668,22 +662,242 @@ function skillScannerBody() {
             </bd-bento-item>
           </bd-bento-grid>
         </div>
+
+        <bd-process-steps
+          title="How a scan works"
+          description='You ask in plain language, "scan the foo skill for security risks", and the skill does the rest. There is no separate command-line tool to learn.'
+          .steps=${[
+            {
+              title      : "1. Resolve",
+              description: "The scanner resolves the target (a directory, an installed skill name, a zip, or a URL) into a skill root."
+            },
+            {
+              title      : "2. Pack & hash",
+              description: "It packs the skill into a normalized archive and computes a skill-level SHA-256, then checks for a cached report before repeating any work."
+            },
+            {
+              title      : "3. Collect & enrich",
+              description: "It walks, hashes and recurses into every file, then runs all 18 indicator extractors and 71 behavioural patterns over the text content."
+            },
+            {
+              title      : "4. Embed",
+              description: "It computes semantic embeddings on your machine, unless you disable them."
+            },
+            {
+              title      : "5. Submit metadata",
+              description: "Hashes, indicators with short matched excerpts, counts, metadata and embeddings go to the backend. In scan mode it sends no full file contents."
+            },
+            {
+              title      : "6. Report",
+              description: "The backend returns a risk level, summary and findings, rendered as Markdown in your session."
+            }
+          ]}
+        ></bd-process-steps>
+
+        <div style="padding: 48px 24px 24px;">
+          <bd-compatibility-table
+            variant="risk"
+            title="What you can point it at"
+            description="The scanner accepts four target types: a directory, an installed skill name, a zip archive, or a URL."
+            .columns=${["Target", "Behaviour"]}
+            .rows=${[
+              { category: "Directory path", coverage: "Scanned directly as the skill root." },
+              { category: "Skill name", coverage: "Resolved via the harness's known skill directories, project- and user-level." },
+              { category: ".zip archive", coverage: "Extracted to a temp directory, then scanned." },
+              { category: "URL", coverage: "Sent to the backend for scanning (scan mode only)." }
+            ]}
+          ></bd-compatibility-table>
+        </div>
+      </section>
+
+      <section id="anchor-5-section">
+        <bd-install-options
+          eyebrow="Trust &amp; transparency"
+          title="What leaves your machine"
+          description="Two modes, both agent-driven. Scan is the default: only hashes, extracted indicators and metadata are transmitted, and full files are never uploaded. Submit is opt-in: the complete skill archive is uploaded for deeper analysis, and only when you explicitly ask for it."
+        >
+          <bd-compatibility-table
+            variant="risk"
+            .columns=${["Mode", "Transmitted"]}
+            .rows=${[
+              {
+                category: "Scan (default)",
+                coverage: "File hashes (SHA-256/MD5), extracted indicators and pattern matches — including short excerpts of matched content (regex fragments ≤100 chars, decoded base64 snippets ≤500 chars) — file metadata, finding counts, SKILL.md frontmatter, dependency metadata, and local embeddings. Full file contents are not transmitted."
+              },
+              {
+                category: "Submit (opt-in)",
+                coverage: "The complete skill archive, uploaded for deep analysis. The agent will not do this unless you explicitly ask."
+              }
+            ]}
+          ></bd-compatibility-table>
+
+          <div style="background: var(--color-neutral-0); border: 1px solid var(--color-neutral-100); border-radius: var(--radius-xl); padding: 24px; box-sizing: border-box; margin-top: 24px;">
+            <bd-h as="h3" style="margin: 0 0 16px;">The contract the agent is held to</bd-h>
+            <ul style="list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px;">
+              <li style="display: flex; align-items: flex-start; gap: 12px;">
+                <span aria-hidden="true" style="flex-shrink: 0; width: 20px; height: 20px; border-radius: 999px; background: var(--color-green-600, #16a34a); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; margin-top: 2px;">✓</span>
+                <bd-p kind="regular" style="margin:0;">Scan mode is the default: a casual request never uploads your files.</bd-p>
+              </li>
+              <li style="display: flex; align-items: flex-start; gap: 12px;">
+                <span aria-hidden="true" style="flex-shrink: 0; width: 20px; height: 20px; border-radius: 999px; background: var(--color-green-600, #16a34a); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; margin-top: 2px;">✓</span>
+                <bd-p kind="regular" style="margin:0;">Submit is opt-in only: the agent won't upload the full archive unless you explicitly ask.</bd-p>
+              </li>
+              <li style="display: flex; align-items: flex-start; gap: 12px;">
+                <span aria-hidden="true" style="flex-shrink: 0; width: 20px; height: 20px; border-radius: 999px; background: var(--color-green-600, #16a34a); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; margin-top: 2px;">✓</span>
+                <bd-p kind="regular" style="margin:0;">The agent relays, it doesn't overrule: it presents the backend's report and never substitutes its own verdict.</bd-p>
+              </li>
+              <li style="display: flex; align-items: flex-start; gap: 12px;">
+                <span aria-hidden="true" style="flex-shrink: 0; width: 20px; height: 20px; border-radius: 999px; background: var(--color-green-600, #16a34a); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; margin-top: 2px;">✓</span>
+                <bd-p kind="regular" style="margin:0;">Errors are surfaced as they are: on failure you get the specific reason.</bd-p>
+              </li>
+              <li style="display: flex; align-items: flex-start; gap: 12px;">
+                <span aria-hidden="true" style="flex-shrink: 0; width: 20px; height: 20px; border-radius: 999px; background: var(--color-green-600, #16a34a); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; margin-top: 2px;">✓</span>
+                <bd-p kind="regular" style="margin:0;">Self-updates are Ed25519-signature-verified against a key pinned in the client, staged with path-traversal-safe extraction, and rolled back automatically on failure.</bd-p>
+              </li>
+            </ul>
+          </div>
+
+          <div style="background: var(--color-yellow-50, #fffbeb); border: 1px solid var(--color-yellow-300, #fcd34d); border-radius: var(--radius-md); padding: 16px 20px; color: var(--color-yellow-800, #92400e); margin-top: 24px;">
+            <bd-p kind="small" style="margin:0;">A scan that returns no findings means no known threat patterns were detected — not that the skill is safe.</bd-p>
+          </div>
+        </bd-install-options>
       </section>
 
-      <!--
-        TODO: Privacy / FAQ
-        (anchor-5-section .. anchor-6-section) nu au fost specificate incă
-        — se adaugă când vine conținutul.
-      -->
+      <section id="anchor-6-section" class="faq">
+        <bd-trust-panel
+          eyebrow="Why trust it"
+          title="Built by Bitdefender"
+          description="Agent Skill Scanner is made by Bitdefender, the company that has protected people and organisations since 2001. The figures and recognitions below describe Bitdefender the company — not the scanner itself."
+          link-label="Why millions trust Bitdefender"
+          link-href="#"
+          .stats=${[
+            { value: "50B+", label: "threats blocked every year" },
+            { value: "580+", label: "technology patents" },
+            { value: "170+", label: "countries protected" },
+            { value: "15+", label: "years of AI-driven security" },
+            { value: "50%+", label: "of employees work in R&D" },
+            { value: "30+", label: "law-enforcement partnerships" }
+          ]}
+          .cards=${[
+            {
+              eyebrow    : "Brand partnership",
+              title      : "Trusted by Ferrari as cybersecurity partner",
+              description: "A partnership born from a passion for high performance and technological innovation — Bitdefender supports Ferrari with Advanced Threat Intelligence to improve detection and response to cyber threats.",
+              linkLabel  : "Learn more",
+              linkHref   : "#"
+            },
+            {
+              eyebrow    : "Brand recognition",
+              title      : "Award-winning security software you can trust. Always.",
+              description: "Consistently top-ranked by the world's leading independent testing labs and tech publications.",
+              linkLabel  : "Learn more",
+              linkHref   : "#"
+            }
+          ]}
+        >
+          <span slot="card-1-logos" style="font-weight:700; color:#006DFF; font-size:18px;">Bitdefender</span>
+          <span slot="card-1-logos" style="font-size:12px; color:#374151; font-weight:600;">FERRARI TEAM PARTNER</span>
+
+          <bd-pc-mag-icon slot="card-2-logos" height="32"></bd-pc-mag-icon>
+          <bd-av-comparatives-icon slot="card-2-logos" height="32"></bd-av-comparatives-icon>
+          <bd-top-product-icon slot="card-2-logos" height="32"></bd-top-product-icon>
+          <bd-best-brands-icon slot="card-2-logos" height="32"></bd-best-brands-icon>
+          <bd-laurel-icon slot="card-2-logos" height="32"></bd-laurel-icon>
+        </bd-trust-panel>
+
+        <div style="padding: 24px 24px 48px;">
+          <bd-accordion-bg title="Frequently asked questions">
+            <bd-accordion-bg-item title="What is Agent Skill Scanner?">
+              <bd-p>Agent Skill Scanner is a Bitdefender agent skill that audits other agent skills before you install or trust them. It runs 71 behavioural detectors across 16 threat categories, extracts 18 indicator types from every file, and returns an LLM-generated security report with a risk level, summary, and per-file findings.</bd-p>
+            </bd-accordion-bg-item>
+
+            <bd-accordion-bg-item title="How do I install Agent Skill Scanner?">
+              <bd-p>Three ways: run "npx skills add bitdefender/agent-skill-scanner" via skills.sh; clone the GitHub repository and copy the agent-skill-scanner folder into your skills directory; or download the zip archive and unzip it there. It requires Python 3.12 or 3.13 and installs its own dependencies on first use.</bd-p>
+            </bd-accordion-bg-item>
+
+            <bd-accordion-bg-item title="How do I scan a skill?">
+              <bd-p>Ask your agent in plain language, for example "scan the foo skill for security risks". There is no separate command to learn: the harness invokes the skill, resolves the target (a directory, an installed skill name, a zip, or a URL), and presents the Markdown report.</bd-p>
+            </bd-accordion-bg-item>
+
+            <bd-accordion-bg-item title="Does it upload my files?">
+              <bd-p>Not by default. In scan mode the scanner transmits only file hashes, extracted indicators with short matched excerpts, metadata and local embeddings; full file contents are never uploaded. The opt-in submit mode uploads the complete skill archive for deeper analysis, and the agent will only use it when you explicitly ask.</bd-p>
+            </bd-accordion-bg-item>
+
+            <bd-accordion-bg-item title="Which agents and harnesses does it work with?">
+              <bd-p>It is an agent skill for use inside a harness such as Claude Code, Codex, OpenClaw, or opencode. It is not a standalone CLI tool. Any harness that reads a skills directory and lets the agent execute the skill's instructions can run it.</bd-p>
+            </bd-accordion-bg-item>
+
+            <bd-accordion-bg-item title="What does a CLEAN result mean?">
+              <bd-p>CLEAN means no known threat patterns were detected, not that the skill is safe. Detection covers 71 behavioural patterns and 18 indicator types, but no scanner proves the absence of malicious intent. Treat the report as strong signal for a trust decision, not a guarantee.</bd-p>
+            </bd-accordion-bg-item>
+
+            <bd-accordion-bg-item title="How much does it cost?">
+              <bd-p>Agent Skill Scanner is available at no charge from skills.sh and GitHub. Use is subject to Bitdefender's End User License Agreement and Privacy Policy.</bd-p>
+            </bd-accordion-bg-item>
+          </bd-accordion-bg>
+        </div>
+      </section>
     </div>
 
+    <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>
+
+    <section id="anchor-11-section">
+      <bd-agent-endpoints
+        eyebrow="For AI agents and assistants"
+        title="Machine-readable endpoints"
+        description="This site is built to be read by AI assistants, browsers, and agents. Structured, curated context is available at:"
+        .endpoints=${[
+          { label: "/llms.txt", href: "/llms.txt" },
+          { label: "/llms-full.txt", href: "/llms-full.txt" },
+          { label: "/skill-scanner/index.md", href: "/skill-scanner/index.md" },
+          { label: "/sitemap.xml", href: "/sitemap.xml" },
+          { label: "/robots.txt", href: "/robots.txt" }
+        ]}
+      >
+        <div slot="rows" style="border-top: 1px solid var(--color-neutral-100); margin-top: 24px; padding-top: 24px;">
+          <bd-p kind="regular" style="color: var(--color-neutral-700); margin: 0;">
+            By using Bitdefender Agent Skill Scanner, you confirm that you are over 16 years old and you have read and agreed to Bitdefender's
+            <bd-link href="#" kind="primary">End User License Agreement</bd-link>
+            and
+            <bd-link href="#" kind="primary">Privacy Policy</bd-link>.
+          </bd-p>
+        </div>
+
+        <div slot="rows" style="border-top: 1px solid var(--color-neutral-100); margin-top: 24px; padding-top: 24px;">
+          <bd-p kind="regular" style="color: var(--color-neutral-700); margin: 0;">
+            No security product guarantees complete protection. A scan that returns no findings means no known threat patterns were detected — not that the skill is safe. Effectiveness depends on configuration, runtime environment and the skills analysed. Features and availability may vary.
+          </bd-p>
+        </div>
+      </bd-agent-endpoints>
+    </section>
+
     <!--
-      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.
+      TODO: daca mai exista sectiuni sub asta pentru Skill Scanner,
+      se adauga cand vine continutul.
     -->
   `;
 }
+
+
 function sharedFooter() {
   return html`
     <bd-footer>
@@ -822,18 +1036,28 @@ switches, in place, between two full "pages" without any real navigation —
 clicking a tab intercepts the anchor click and swaps local state instead of
 following the href (which has no route in Storybook and would 404).
 
+Both anchor-nav bars use \`sticky-top="65px"\` so they pin themselves *below*
+the sticky page-switcher instead of overlapping it once scrolled. That value
+is an estimate — measure bd-page-switcher's real rendered height in DevTools
+and adjust if the two bars still overlap or leave a gap.
+
 **AI Guardian** page: \`bd-header-code\`, \`bd-quick-answer\`, sticky \`bd-anchor-nav\`
 (9 items) wrapping \`bd-overview\`, \`bd-compatibility-table\` (default variant), the
 "Protections" section (\`bd-bento-grid\` + \`bd-comparison-panel\`), \`bd-process-steps\`,
-\`bd-compatibility-table\` (\`variant="outcome"\`), two chevron \`bd-accordion-item\`s
-revealing \`bd-compatibility-table\` (\`variant="risk"\` / \`variant="light"\`), an FAQ
+\`bd-compatibility-table\` (\`variant="risk"\` / \`variant="light"\`), an FAQ
 section (\`bd-accordion-bg\`, 9 questions), \`bd-cta-banner\`, \`bd-agent-endpoints\`,
 and \`bd-trust-panel\`.
 
 **Skill Scanner** page: same top nav (tab now active), a dedicated
-\`bd-header-code\` for Agent Skill Scanner. Only the header is fully specified for
-this page today — the rest of its sections are a placeholder until content is
-provided.
+\`bd-header-code\`, \`bd-quick-answer\`, and a sticky \`bd-anchor-nav\` (6 items:
+Install, Overview, What it detects, How it works, Privacy, FAQ) wrapping
+\`bd-install-options\` (cards + "Then just ask" prompt panel), \`bd-overview\`,
+a \`bd-compatibility-table\` inside a chevron accordion, a \`bd-bento-grid\` +
+\`bd-process-steps\` + another \`bd-compatibility-table\` for "How it works",
+another \`bd-install-options\` (generic-slot variant: table + checklist + note)
+for "Privacy", a \`bd-trust-panel\` + \`bd-accordion-bg\` FAQ (7 questions) under
+"FAQ", a \`bd-cta-banner\`, and \`bd-agent-endpoints\` with legal copy in its
+\`rows\` slot.
 
 Both pages share the same \`bd-footer\` at the bottom.
         `

package/src/components/anchor/anchor-nav.css.js

@@ -11,14 +11,17 @@ export const anchorNavStyles = css`
 
   :host(.is-sticky) {
     position: fixed;
-    top: 0;
+    top: var(--sticky-top, 0);
     left: var(--sticky-left, 0);
     width: var(--sticky-width, 100%);
     box-shadow: var(--shadow-sm);
     z-index: 1000;
   }
 
-  /* Border-urile sunt pe nav - full width */
+  :host(.is-sticky) nav {
+    background: var(--color-neutral-0);
+  }
+
   nav {
     display: block;
     margin: var(--spacing-0);
@@ -29,11 +32,6 @@ export const anchorNavStyles = css`
     border-bottom: var(--border-width-1) solid var(--color-neutral-100);
   }
 
-  /* Când e sticky, păstrăm aceleași border-uri */
-  :host(.is-sticky) nav {
-    background: var(--color-neutral-0);
-  }
-
   .bd-anchor-nav__inner {
     display: flex;
     flex-wrap: wrap;
@@ -48,7 +46,6 @@ export const anchorNavStyles = css`
     box-sizing: border-box;
   }
 
-  /* Restul codului tău CSS rămâne identic de aici în jos */
   
   .anchor-link:focus-visible,
   .bd-anchor-nav__cta:focus-visible,
@@ -118,19 +115,19 @@ export const anchorNavStyles = css`
     text-decoration: none !important;
   }
 
-  .anchor-link::after {
-    content: "";
+
+  .anchor-indicator {
     position: absolute;
-    left: var(--spacing-0);
+    left: 0;
     bottom: calc(-1 * var(--spacing-14));
-    width: 0%;
+    width: 0;
     height: var(--border-width-3);
     background-color: var(--color-blue-500);
-    transition: width var(--transition-duration-slow) var(--transition-easing-ease-out);
-  }
-
-  .anchor-link.active::after {
-    width: 100%;
+    transform: translateX(0);
+    transition:
+      transform var(--transition-duration-slow) var(--transition-easing-ease-out),
+      width var(--transition-duration-slow) var(--transition-easing-ease-out);
+    pointer-events: none;
   }
 
   .bd-anchor-nav__dropdown {
@@ -299,10 +296,11 @@ export const anchorNavStyles = css`
   }
 
   @media (prefers-reduced-motion: reduce) {
-    .anchor-link::after,
+    .anchor-indicator,
     .bd-anchor-nav__dropdown-chevron,
     .bd-cta,
     .bd-anchor-nav__dropdown-label--swap {
+      transition: none !important;
       animation: none !important;
     }
   }

package/src/components/anchor/anchor-nav.js

@@ -33,7 +33,12 @@ class BdAnchorNav extends LitElement {
     ctaLabel          : { type: String, attribute: "cta-label" },
     ctaHref           : { type: String, attribute: "cta-href" },
     items             : { type: Array },
-    maxWidth          : { type: String, attribute: "max-width" }
+    maxWidth          : { type: String, attribute: "max-width" },
+    // How far from the viewport top this nav sticks once pinned — set this
+    // to the rendered height of whatever sticky element sits above it (e.g.
+    // a page-switcher), so the two don't stack on top of each other at
+    // top:0. Accepts any CSS length, e.g. "64px", "4rem".
+    stickyTop         : { type: String, attribute: "sticky-top" }
   };
 
   static styles = [tokens, anchorNavStyles];
@@ -48,6 +53,7 @@ class BdAnchorNav extends LitElement {
     this.ctaHref                     = "";
     this.items                       = null;
     this.maxWidth                    = "";
+    this.stickyTop                   = "0px";
     this._panelId                    = `bd-anchor-nav-panel-${Math.random().toString(36)
       .slice(2, 11)}`;
     this._onScrollSpy                = this._onScrollSpy.bind(this);
@@ -61,6 +67,10 @@ class BdAnchorNav extends LitElement {
     this._stickyPlaceholder          = null;
     this._onStickyScroll             = null;
     this._handleResize               = this._handleResize.bind(this);
+    // sliding underline indicator: false until the first successful
+    // measurement + placement, so it doesn't visibly animate in from the
+    // left edge on first paint.
+    this._indicatorReady             = false;
   }
 
   connectedCallback() {
@@ -85,8 +95,76 @@ class BdAnchorNav extends LitElement {
     this._destroySticky();
   }
 
+  updated(changedProperties) {
+    super.updated(changedProperties);
+
+    if (changedProperties.has("stickyTop")) {
+      this.style.setProperty("--sticky-top", this.stickyTop || "0px");
+      // the scroll-spy offset (how far to scroll past the sticky bar when
+      // clicking a link) depends on this too, since the nav's own visible
+      // top now sits lower than the viewport top while stuck.
+      this._runScrollSpy();
+    }
+
+    if (changedProperties.has("activeId") || changedProperties.has("items")) {
+      // wait a frame so the .active class has actually painted before
+      // measuring its box — requestAnimationFrame is enough here, no need
+      // for updateComplete since nothing else in render() depends on this.
+      requestAnimationFrame(() => this._updateIndicator());
+    }
+
+    if (!changedProperties.has("activeId")) return;
+    const prev = changedProperties.get("activeId");
+    if (prev === undefined || prev === "") return;
+    if (prev === this.activeId) return;
+    queueMicrotask(() => this._playMobileDropdownLabelSwap());
+  }
+
+  firstUpdated() {
+    const resolved = this._resolvedItems();
+    if (resolved.length) {
+      this.activeId = "anchor-1";
+      this.requestUpdate();
+    }
+    queueMicrotask(() => this._runScrollSpy());
+    this._handleMobileFullWidth();
+    requestAnimationFrame(() => this._updateIndicator());
+  }
+
+  // Positions the sliding underline under the currently active desktop
+  // link. Reads offsetLeft/offsetWidth directly off the active bd-link —
+  // as a flex item it's block-level regardless of its own :host display,
+  // so these are reliable without any extra math against a bounding rect.
+  _updateIndicator() {
+    const indicator = this.renderRoot?.querySelector(".anchor-indicator");
+    const activeLink = this.renderRoot?.querySelector(
+      ".anchor-links--desktop .anchor-link.active"
+    );
+    if (!indicator || !activeLink) return;
+
+    const left  = activeLink.offsetLeft;
+    const width = activeLink.offsetWidth;
+
+    if (!this._indicatorReady) {
+      // first placement: skip the transition so it doesn't slide in from
+      // the left edge on initial paint, then re-enable it next frame.
+      indicator.style.transition = "none";
+      indicator.style.transform  = `translateX(${left}px)`;
+      indicator.style.width      = `${width}px`;
+      // force a style flush before removing the transition override
+      void indicator.offsetWidth;
+      indicator.style.transition = "";
+      this._indicatorReady = true;
+      return;
+    }
+
+    indicator.style.transform = `translateX(${left}px)`;
+    indicator.style.width     = `${width}px`;
+  }
+
   _handleResize() {
     this._handleMobileFullWidth();
+    this._updateIndicator();
   }
 
   _handleMobileFullWidth() {
@@ -109,6 +187,7 @@ class BdAnchorNav extends LitElement {
 
   _initSticky() {
     this._stickyOriginalTop = null;
+    this.style.setProperty("--sticky-top", this.stickyTop || "0px");
 
     this._onStickyScroll = () => {
       const parent     = this.parentElement;
@@ -118,14 +197,15 @@ class BdAnchorNav extends LitElement {
       const navHeight  = this._stickyPlaceholder
         ? this._stickyPlaceholder.offsetHeight
         : this.offsetHeight;
+      const stickyTopPx = parseLengthToPx(this.stickyTop) || 0;
 
       if (this._stickyOriginalTop === null) {
         const rect = this.getBoundingClientRect();
-        this._stickyOriginalTop = rect.top + window.scrollY;
+        this._stickyOriginalTop = rect.top + window.scrollY - stickyTopPx;
       }
 
       const passedTop = window.scrollY >= this._stickyOriginalTop;
-      const parentExited = parentRect.bottom <= navHeight;
+      const parentExited = parentRect.bottom <= navHeight + stickyTopPx;
 
       if (passedTop && !parentExited) {
         if (!this.classList.contains("is-sticky")) {
@@ -297,25 +377,6 @@ class BdAnchorNav extends LitElement {
     }
   }
 
-  firstUpdated() {
-    const resolved = this._resolvedItems();
-    if (resolved.length) {
-      this.activeId = "anchor-1";
-      this.requestUpdate();
-    }
-    queueMicrotask(() => this._runScrollSpy());
-    this._handleMobileFullWidth();
-  }
-
-  updated(changedProperties) {
-    super.updated(changedProperties);
-    if (!changedProperties.has("activeId")) return;
-    const prev = changedProperties.get("activeId");
-    if (prev === undefined || prev === "") return;
-    if (prev === this.activeId) return;
-    queueMicrotask(() => this._playMobileDropdownLabelSwap());
-  }
-
   _playMobileDropdownLabelSwap() {
     if (typeof window === "undefined") return;
     if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
@@ -334,10 +395,11 @@ class BdAnchorNav extends LitElement {
 
   _stickyOffsetPx() {
     const barPx    = this.offsetHeight;
+    const stickyTopPx = parseLengthToPx(this.stickyTop) || 0;
     const insetRaw = getComputedStyle(this).getPropertyValue("--spacing-8")
       .trim();
     const insetPx  = parseLengthToPx(insetRaw) || 8;
-    if (barPx > 0) return barPx + insetPx;
+    if (barPx > 0) return barPx + insetPx + stickyTopPx;
     const fallback = getComputedStyle(this).getPropertyValue("--spacing-128")
       .trim();
     return parseLengthToPx(fallback) || 128;
@@ -413,6 +475,7 @@ class BdAnchorNav extends LitElement {
             >${title}</bd-link>
           `;
         })}
+        <span class="anchor-indicator" aria-hidden="true"></span>
       </div>
     `;
 

package/src/components/anchor/anchor.stories.js

@@ -27,6 +27,9 @@ prin \`ResizeObserver\` — fără a fi necesară setarea manuală a \`max-width
 - Când navul iese din viewport, devine \`position: fixed\` full-width
 - Border-ul și background-ul sunt full-width
 - Conținutul (linkuri + CTA) rămâne centrat și aliniat cu cel mai lat sibling
+- Dacă mai există un alt element sticky **deasupra** lui (ex. un header/page-switcher
+  propriu sticky la \`top: 0\`), setează \`sticky-top\` cu înălțimea acelui element —
+  altfel cele două se suprapun, fiindcă implicit navul se lipește tot la \`top: 0\`.
 
 ---
 
@@ -76,6 +79,18 @@ prin \`ResizeObserver\` — fără a fi necesară setarea manuală a \`max-width
 ></bd-anchor-nav>
 \`\`\`
 
+### Utilizare cu \`sticky-top\` (nav secundar sub un header sticky propriu)
+\`\`\`html
+<my-sticky-header></my-sticky-header>
+
+<bd-anchor-nav sticky-top="64px" cta-label="Buy now" cta-href="#pricing">
+  <bd-anchor-nav-item title="Overview" href="#overview"></bd-anchor-nav-item>
+  <bd-anchor-nav-item title="Pricing"  href="#pricing"></bd-anchor-nav-item>
+</bd-anchor-nav>
+\`\`\`
+\`64px\` trebuie să fie înălțimea reală (măsurată în DevTools) a elementului sticky de deasupra —
+nu-i o valoare universală, depinde de conținutul acelui header.
+
 ---
 
 ### Atribute \`bd-anchor-nav\`
@@ -85,6 +100,7 @@ prin \`ResizeObserver\` — fără a fi necesară setarea manuală a \`max-width
 | \`cta-href\`   | String | \`"#section-pricing"\`   | href-ul butonului CTA fallback                   |
 | \`aria-label\` | String | \`"Section navigation"\` | Label accesibil pentru \`<nav>\`                 |
 | \`items\`      | Array  | —                        | \`{ title, href }[]\` — suprascrie child items   |
+| \`sticky-top\` | String | \`"0px"\`                | Cât de departe de vârful viewport-ului se lipește navul când devine sticky — setează-l la înălțimea oricărui alt element sticky de deasupra, ca să nu se suprapună |
 
 ### Atribute \`bd-anchor-nav-item\`
 | Atribut | Tip    | Descriere                                              |
@@ -114,6 +130,12 @@ Pe mobile devine automat full-width prin \`::slotted([slot="cta"])\`.
       control    : "object",
       description: "Array de { title, href } — suprascrie child elements",
       table      : { type: { summary: "{ title: string, href: string }[]" }, category: "Content" }
+    },
+    stickyTop: {
+      name       : "sticky-top",
+      control    : "text",
+      description: "Cât de departe de vârful viewport-ului se lipește navul când devine sticky — setează-l la înălțimea oricărui element sticky de deasupra (ex. un header propriu), ca sa nu se suprapună la scroll",
+      table      : { type: { summary: "string" }, defaultValue: { summary: "0px" }, category: "Sticky" }
     }
   }
 };
@@ -404,6 +426,65 @@ export const WithScrollTargets = {
   }
 };
 
+export const StickyBelowFixedHeader = {
+  name  : "Sticky sub un header propriu — sticky-top",
+  render: () => html`
+    <div>
+      <!-- Simuleaza un header sticky separat (ex. bd-page-switcher), la fel
+           pozitionat: position: sticky; top: 0. Fara sticky-top pe nav,
+           cele doua s-ar suprapune identic la scroll. -->
+      <div style="
+        position: sticky; top: 0; z-index: 200;
+        background: #0a1a2f; color: #fff;
+        padding: 16px 24px; box-sizing: border-box;
+        font-family: sans-serif; font-weight: 700; font-size: 18px;
+        display: flex; align-items: center; justify-content: space-between;
+      ">
+        <span>Mock Header (simulează bd-page-switcher, ~64px înălțime)</span>
+        <span style="opacity: .7; font-weight: 400; font-size: 13px;">Tab A · Tab B</span>
+      </div>
+
+      <bd-anchor-nav
+        sticky-top="64px"
+        cta-label="Buy now"
+        cta-href="#anchor-3-section"
+      >
+        <bd-anchor-nav-item title="Overview" href="#anchor-1-section"></bd-anchor-nav-item>
+        <bd-anchor-nav-item title="Features" href="#anchor-2-section"></bd-anchor-nav-item>
+        <bd-anchor-nav-item title="Pricing"  href="#anchor-3-section"></bd-anchor-nav-item>
+      </bd-anchor-nav>
+
+      <div style="max-width: 800px; margin: 0 auto;">
+        <div id="anchor-1-section" style="min-height: 60vh; padding: 80px 24px; background: #EDF9FF;">
+          <bd-h as="h2">Overview Section</bd-h>
+          <bd-p kind="regular">
+            Scroll în jos: mock header-ul de sus rămâne fix la top: 0, iar
+            bd-anchor-nav se lipește exact sub el (la 64px), nu peste el.
+          </bd-p>
+        </div>
+        <div id="anchor-2-section" style="min-height: 60vh; padding: 80px 24px; background: #fff;">
+          <bd-h as="h2">Features Section</bd-h>
+        </div>
+        <div id="anchor-3-section" style="min-height: 60vh; padding: 80px 24px; background: #EDF9FF;">
+          <bd-h as="h2">Pricing Section</bd-h>
+        </div>
+      </div>
+    </div>
+  `,
+  parameters: {
+    docs: {
+      description: {
+        story: `Reproduce cazul real din demo-ul AI Guardian / Skill Scanner: un header sticky
+        propriu deasupra (aici simulat printr-un \`<div>\`, în producție \`bd-page-switcher\`)
+        și \`bd-anchor-nav\` cu \`sticky-top="64px"\`. Fără acest atribut, ambele s-ar
+        fixa la \`top: 0\` și s-ar suprapune perfect la scroll. Valoarea \`64px\` trebuie
+        să corespundă înălțimii reale a elementului sticky de deasupra — verifică în
+        DevTools dacă diferă la tine.`
+      }
+    }
+  }
+};
+
 export const MobileView = {
   name      : "Mobile View",
   render    : () => renderWithSlotCta(["Overview", "Features", "Reviews", "Pricing"]),
@@ -420,9 +501,10 @@ export const MobileView = {
 export const Playground = {
   name: "Playground",
   args: {
-    ctaLabel: "Buy now",
-    ctaHref : "#section-pricing",
-    items   : [
+    ctaLabel : "Buy now",
+    ctaHref  : "#section-pricing",
+    stickyTop: "0px",
+    items    : [
       { title: "Overview", href: "#anchor-1-section" },
       { title: "Features", href: "#anchor-2-section" },
       { title: "Reviews",  href: "#anchor-3-section" },
@@ -433,13 +515,14 @@ export const Playground = {
     <bd-anchor-nav
       cta-label=${args.ctaLabel}
       cta-href=${args.ctaHref}
+      sticky-top=${args.stickyTop}
       .items=${args.items}
     ></bd-anchor-nav>
   `,
   parameters: {
     docs: {
       description: {
-        story: "Playground interactiv. Editează `items`, `ctaLabel` și `ctaHref` din Controls."
+        story: "Playground interactiv. Editează `items`, `ctaLabel`, `ctaHref` și `sticky-top` din Controls."
       }
     }
   }

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

@@ -0,0 +1,122 @@
+import { html } from "lit";
+import "../button/button.js";
+import "./cta-banner.js";
+
+export default {
+  title     : "Components/CtaBanner",
+  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>
+\`\`\`
+
+### 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.
+        `
+      }
+    }
+  }
+};
+
+// ─── 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>
+  `
+};
+
+// ─── Fara caption (Skill Scanner) ──────────────────────────────────────────
+
+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>
+  `
+};
+
+// ─── Un singur buton ────────────────────────────────────────────────────────
+
+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>
+  `
+};

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

@@ -43,6 +43,12 @@ export default css`
     margin: 0 auto var(--spacing-40);
   }
 
+  /* Slot generic pentru orice continut in afara grid-ului fix de carduri */
+  .bd-installoptions-body {
+    max-width: var(--layout-ensemble-max-width, 1200px);
+    margin: 0 auto;
+  }
+
   .bd-installoptions-worksin-label {
     color: var(--color-neutral-500);
     font-family: var(--typography-fontFamily-mono, monospace);

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

@@ -171,10 +171,25 @@ class BdInstallOptions extends LitElement {
 
         ${this._renderWorksIn()}
 
-        <div class="bd-installoptions-grid">
-          ${this.cards.map((card) => this._renderCard(card))}
+        <!--
+          Slot generic (fara nume) -- pentru orice continut care nu se
+          potriveste cu grid-ul fix de carduri (ex: un tabel, o casuta
+          checklist, o nota de avertizare). Cardurile ramase implicite
+          (this.cards) tot se randeaza mai jos daca sunt pasate; cele doua
+          pot coexista sau poti folosi doar unul din ele.
+        -->
+        <div class="bd-installoptions-body">
+          <slot></slot>
         </div>
 
+        ${this.cards.length
+          ? html`
+              <div class="bd-installoptions-grid">
+                ${this.cards.map((card) => this._renderCard(card))}
+              </div>
+            `
+          : nothing}
+
         ${this._renderPromptPanel()}
       </div>
     `;

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

@@ -0,0 +1,219 @@
+import { html } from "lit";
+import "../compatibility-table/compatibility-table.js";
+import "../heading/heading.js";
+import "../paragraph/paragraph.js";
+import "./install-options.js";
+
+export default {
+  title     : "Components/InstallOptions",
+  tags      : ["autodocs"],
+  parameters: {
+    layout: "fullscreen",
+    docs  : {
+      description: {
+        component: `
+Section container (eyebrow + title + description on a light blue background)
+for "how to get this" style pages. Three ways to fill it, usable on their
+own or combined:
+
+1. **Cards grid** (\`.cards\`) — a row of install-method cards, each with an
+   optional badge, a copyable code block, and a link.
+2. **"Then just ask" prompt panel** (\`prompt-panel\` + slots) — a copyable
+   prompt block with a label, a warning-style note, and a footer line.
+3. **Generic default slot** — anything else (a table, a checklist, a note)
+   that doesn't fit the cards grid, while still getting the shared
+   eyebrow/title/description header.
+
+\`\`\`html
+<!-- Cards + Works in pills -->
+<bd-install-options
+  eyebrow="Get it"
+  title="Three ways to install"
+  description="..."
+></bd-install-options>
+
+<!-- Generic slot instead of cards -->
+<bd-install-options eyebrow="Trust & transparency" title="What leaves your machine">
+  <bd-compatibility-table variant="risk" .columns=\${["Mode", "Transmitted"]} .rows=\${[...]}></bd-compatibility-table>
+</bd-install-options>
+\`\`\`
+
+### Attribute / property table
+| Name | Type | Default | Description |
+|---|---|---|---|
+| \`eyebrow\` | String | — | Small blue label above the title |
+| \`title\` | String | — | Section heading |
+| \`description\` | String | — | Paragraph under the title |
+| \`.worksIn\` | Array | \`[]\` | \`[{ label, initial, color }]\` — pill row. \`initial\`/\`color\` are placeholders (a letter on a solid circle) until real brand marks are available |
+| \`.cards\` | Array | \`[]\` | \`[{ title, badge, description, code, linkLabel, linkHref }]\` — rendered only if non-empty |
+| *(default slot)* | — | — | Anything else — renders between the description/works-in row and the cards grid |
+| \`prompt-panel\` | Boolean | \`false\` | Shows the "Then just ask" sub-panel below the cards |
+| \`prompt-label\` | String | — | Small mono label above the prompt code block |
+
+### Slots (only used when \`prompt-panel\` is set)
+| Slot | Description |
+|---|---|
+| \`prompt-title\` | Heading of the sub-panel |
+| \`prompt-description\` | Paragraph under that heading |
+| \`prompt\` | The copyable prompt text — the Copy button reads this slot's \`textContent\` |
+| \`prompt-note\` | Warning-style note box |
+| \`prompt-footer\` | Closing line (e.g. uninstall instructions) |
+        `
+      }
+    }
+  }
+};
+
+// ─── Carduri + Works in (cazul principal: "Three ways to install") ────────
+
+export const CardsWithWorksIn = {
+  name  : "Carduri + Works in",
+  render: () => html`
+    <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.",
+          linkLabel  : "Download the zip",
+          linkHref   : "#"
+        }
+      ]}
+    ></bd-install-options>
+  `
+};
+
+// ─── Carduri + prompt panel ("Then just ask") ──────────────────────────────
+
+export const WithPromptPanel = {
+  name      : "Carduri + prompt panel",
+  parameters: {
+    docs: {
+      description: {
+        story: "Aceleași carduri, plus sub-panelul \"Then just ask\" activat prin `prompt-panel`. Butonul Copy citește textul din `slot=\"prompt\"` la click, indiferent de markup."
+      }
+    }
+  },
+  render: () => html`
+    <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."
+      .cards=${[
+        {
+          title      : "With npx, from skills.sh",
+          badge      : "Recommended",
+          description: "One command via the skills.sh installer.",
+          code       : "npx skills add bitdefender/agent-skill-scanner",
+          linkLabel  : "View on skills.sh",
+          linkHref   : "#"
+        },
+        {
+          title      : "From GitHub",
+          description: "Clone the repository into your skills directory.",
+          code       : "git clone https://github.com/bitdefender/agent-skill-scanner.git",
+          linkLabel  : "View the repository",
+          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.</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.</bd-p>
+      <span slot="prompt-footer">To uninstall, delete the agent-skill-scanner folder from your skills directory.</span>
+    </bd-install-options>
+  `
+};
+
+// ─── Slot generic in loc de carduri (tabel + checklist + nota) ────────────
+
+export const GenericSlotContent = {
+  name      : "Slot generic (tabel + checklist + notă)",
+  parameters: {
+    docs: {
+      description: {
+        story: "Aceeași secțiune (eyebrow + titlu + descriere pe fundal albastru), dar fără `.cards` deloc — în schimb, orice conținut arbitrar prin slotul generic: aici un `bd-compatibility-table` (variant `risk`, cu antete custom prin `.columns`), o casetă cu checklist, și o notă de avertizare, scrise ca markup simplu în locul consumator."
+      }
+    }
+  },
+  render: () => html`
+    <bd-install-options
+      eyebrow="Trust &amp; transparency"
+      title="What leaves your machine"
+      description="Two modes, both agent-driven. Scan is the default: only hashes, extracted indicators and metadata are transmitted, and full files are never uploaded. Submit is opt-in: the complete skill archive is uploaded for deeper analysis, and only when you explicitly ask for it."
+    >
+      <bd-compatibility-table
+        variant="risk"
+        .columns=${["Mode", "Transmitted"]}
+        .rows=${[
+          {
+            category: "Scan (default)",
+            coverage: "File hashes (SHA-256/MD5), extracted indicators and pattern matches. Full file contents are not transmitted."
+          },
+          {
+            category: "Submit (opt-in)",
+            coverage: "The complete skill archive, uploaded for deep analysis. The agent will not do this unless you explicitly ask."
+          }
+        ]}
+      ></bd-compatibility-table>
+
+      <div style="background: var(--color-neutral-0); border: 1px solid var(--color-neutral-100); border-radius: var(--radius-xl); padding: 24px; box-sizing: border-box; margin-top: 24px;">
+        <bd-h as="h3" style="margin: 0 0 16px;">The contract the agent is held to</bd-h>
+        <ul style="list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px;">
+          <li style="display: flex; align-items: flex-start; gap: 12px;">
+            <span aria-hidden="true" style="flex-shrink: 0; width: 20px; height: 20px; border-radius: 999px; background: var(--color-green-600, #16a34a); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; margin-top: 2px;">✓</span>
+            <bd-p kind="regular" style="margin:0;">Scan mode is the default: a casual request never uploads your files.</bd-p>
+          </li>
+          <li style="display: flex; align-items: flex-start; gap: 12px;">
+            <span aria-hidden="true" style="flex-shrink: 0; width: 20px; height: 20px; border-radius: 999px; background: var(--color-green-600, #16a34a); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; margin-top: 2px;">✓</span>
+            <bd-p kind="regular" style="margin:0;">Submit is opt-in only: the agent won't upload the full archive unless you explicitly ask.</bd-p>
+          </li>
+        </ul>
+      </div>
+
+      <div style="background: var(--color-yellow-50, #fffbeb); border: 1px solid var(--color-yellow-300, #fcd34d); border-radius: var(--radius-md); padding: 16px 20px; color: var(--color-yellow-800, #92400e); margin-top: 24px;">
+        <bd-p kind="small" style="margin:0;">A scan that returns no findings means no known threat patterns were detected — not that the skill is safe.</bd-p>
+      </div>
+    </bd-install-options>
+  `
+};
+
+// ─── Doar header, fara carduri si fara slot ────────────────────────────────
+
+export const HeaderOnly = {
+  name  : "Doar header (fără carduri, fără slot)",
+  render: () => html`
+    <bd-install-options
+      eyebrow="Get it"
+      title="Coming soon"
+      description="Installation instructions will appear here once the package is published."
+    ></bd-install-options>
+  `
+};

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

@@ -5,8 +5,9 @@ export default css`
     display: block;
     width: 100%;
     box-sizing: border-box;
-    max-width: 1290px;
-
+    max-width: var(--layout-ensemble-max-width, 1290px);
+    margin: 0 auto;
+    padding-inline: var(--layout-ensemble-inline-padding, var(--spacing-24));
   }
 
   .bd-reviewgrid-title {

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

@@ -6,8 +6,6 @@ export default css`
     height: 100%;
     font-family: var(--typography-fontFamily-sans);
     box-sizing: border-box;
-    max-width: 1290px;
-
   }
 
   .bd-review-card {