@repobit/dex-system-design 0.24.3 → 0.24.5

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.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
+
+* **DEX-1014:** bitdefender AI components and new adjustments for components
+
+
+## [0.24.4](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.24.3...@repobit/dex-system-design@0.24.4) (2026-09-01)
+
+### Bug Fixes
+
+* **DEX-1014:** padding adjustments
+* **DEX-1014:** padding adjustments
+
+
 ## [0.24.3](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.24.2...@repobit/dex-system-design@0.24.3) (2026-08-25)
 
 ### Bug Fixes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@repobit/dex-system-design",
-  "version": "0.24.3",
+  "version": "0.24.5",
   "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.19",
-    "@repobit/dex-store-elements": "2.0.24",
+    "@repobit/dex-store": "1.6.21",
+    "@repobit/dex-store-elements": "2.0.26",
     "lit": "^3.3.2"
   },
   "devDependencies": {
@@ -92,5 +92,5 @@
   "volta": {
     "node": "24.14.0"
   },
-  "gitHead": "e3429ddb72eb37b8ab1524792a5b8db3f8c65de7"
+  "gitHead": "5cb3f2de5d59ff4292b2a4175fde263f72ac5152"
 }

package/src/components/accordion/accordion-bg.css.js

@@ -207,7 +207,7 @@ export default css`
   /* FAQ container — padding 64px top/bottom */
   .bd-accordion-bg-container {
     margin: auto;
-    // padding-top: var(--spacing-64);
+    padding-top: var(--spacing-64);
     padding-bottom: var(--spacing-64);
   }
 
@@ -215,6 +215,11 @@ export default css`
     background: none;
   }
 
+  .bd-accordion-bg-container.no-padding {
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+
   /* Inner — max-width 1290px centrat */
   .bd-accordion-bg-inner {
     max-width: 1290px;

package/src/components/accordion/accordion-bg.js

@@ -11,6 +11,7 @@ class BdAccordionBg extends LitElement {
   static properties = {
     title     : { type: String },
     noBg      : { type: Boolean, reflect: true, attribute: "no-bg" },
+    noPadding : { type: Boolean, reflect: true, attribute: "no-padding" },
     guideIcon : { type: String, reflect: true, attribute: "guide-icon" },
     guideLabel: { type: String, reflect: true, attribute: "guide-label" },
     guideHref : { type: String, reflect: true, attribute: "guide-href" },
@@ -21,6 +22,7 @@ class BdAccordionBg extends LitElement {
   constructor() {
     super();
     this.noBg       = false;
+    this.noPadding  = false;
     this._variant   = "default";
     this.variant    = "default";
     this.guideIcon  = "";
@@ -68,7 +70,7 @@ class BdAccordionBg extends LitElement {
 
   _renderFaq() {
     return html`
-    <div class="bd-accordion-bg-container ${this.noBg ? "no-bg" : ""}">
+    <div class="bd-accordion-bg-container ${this.noBg ? "no-bg" : ""} ${this.noPadding ? "no-padding" : ""}">
       <div class="bd-accordion-bg-inner">
         <div class="bd-accordion-bg-header">
           <bd-h as="h2" class="bd-accordion-bg-title">${this.title}</bd-h>

package/src/components/accordion/accordion-bg.stories.js

@@ -50,6 +50,7 @@ Componenta urcă în DOM și detectează clasa părintelui:
 |---|---|---|---|
 | \`title\` | String | — | Titlul secțiunii |
 | \`no-bg\` | Boolean | \`false\` | Elimină background-ul containerului |
+| \`no-padding\` | Boolean | \`false\` | Elimină padding-top/bottom (64px) al containerului \`.bd-accordion-bg-container\` — util când secțiunea e lipită de alta deasupra/dedesubt. Se aplică doar variantei \`faq\` |
 | \`guide-icon\` | String | — | Cale icon pentru link-ul ghid (doar terms-of-use) |
 | \`guide-label\` | String | — | Text link ghid (doar terms-of-use) |
 | \`guide-href\` | String | \`#\` | URL link ghid (doar terms-of-use) |
@@ -166,6 +167,54 @@ export const FaqNoBgItems = {
   `
 };
 
+// ─── FAQ — Fără padding (no-padding) ──────────────────────────────────────────
+
+export const FaqNoPadding = {
+  name      : "FAQ — Fără padding (no-padding)",
+  parameters: {
+    docs: {
+      description: {
+        story: "Compară aceeași secțiune FAQ cu și fără atributul `no-padding`. Fără el, containerul `.bd-accordion-bg-container` are 64px padding-top/bottom (vezi chenarul roșu de deasupra, care marchează unde s-ar termina normal spațiul). Cu `no-padding`, acel spațiu dispare complet — util când secțiunea trebuie lipită imediat de blocul de deasupra sau de dedesubt."
+      }
+    }
+  },
+  render: () => html`
+    <div>
+      <bd-p kind="small" style="color: var(--color-neutral-500); margin-bottom: 8px;">
+        Fără <code>no-padding</code> — 64px padding-top/bottom (spațiul albastru de sus/jos):
+      </bd-p>
+      <div style="outline: 2px dashed red;">
+        <div class="accordion faq block">
+          <bd-accordion-bg title="Questions? Answers.">
+            <bd-accordion-bg-item title="How does Bitdefender protect me?">
+              <bd-p kind="small">Bitdefender provides multi-layer protection against all cyber threats.</bd-p>
+            </bd-accordion-bg-item>
+            <bd-accordion-bg-item title="Does it work on Mac?">
+              <bd-p kind="small">Yes, Bitdefender is fully compatible with macOS 10.14 and later.</bd-p>
+            </bd-accordion-bg-item>
+          </bd-accordion-bg>
+        </div>
+      </div>
+
+      <bd-p kind="small" style="color: var(--color-neutral-500); margin: 24px 0 8px;">
+        Cu <code>no-padding</code> — 0px padding-top/bottom (secțiunea lipită de chenar):
+      </bd-p>
+      <div style="outline: 2px dashed red;">
+        <div class="accordion faq block">
+          <bd-accordion-bg title="Questions? Answers." no-padding>
+            <bd-accordion-bg-item title="How does Bitdefender protect me?">
+              <bd-p kind="small">Bitdefender provides multi-layer protection against all cyber threats.</bd-p>
+            </bd-accordion-bg-item>
+            <bd-accordion-bg-item title="Does it work on Mac?">
+              <bd-p kind="small">Yes, Bitdefender is fully compatible with macOS 10.14 and later.</bd-p>
+            </bd-accordion-bg-item>
+          </bd-accordion-bg>
+        </div>
+      </div>
+    </div>
+  `
+};
+
 // ─── Terms of Use ─────────────────────────────────────────────────────────────
 
 export const TermsOfUse = {

package/src/components/accordion/accordion.css.js

@@ -195,6 +195,46 @@ export const accordionItem = css`
       width: 100%;
     }
   }
+
+  /* === CHEVRON VARIANT (text + arrow icon only, no visible border/pill/background) === */
+  .header--chevron {
+    display: inline-flex;
+    align-items: center;
+    justify-content: flex-start;
+    width: auto;
+    gap: var(--spacing-8);
+    padding: 0;
+    border: none;
+    border-radius: 0;
+    background: none;
+    margin-bottom: var(--spacing-24);
+    font-size: var(--typography-fontSize-sm);
+    font-weight: var(--typography-fontWeight-semibold);
+  }
+
+  .header--chevron .title-badge-wrapper {
+    flex: 0 1 auto;
+  }
+
+  .header--chevron .title {
+    color: var(--color-blue-600);
+    white-space: nowrap;
+  }
+
+  .header--chevron:hover .title {
+    text-decoration: underline;
+  }
+
+  .toggle--chevron {
+    width: 16px;
+    min-width: 16px;
+    height: 16px;
+    margin-top: 0;
+  }
+
+  .content--chevron {
+    padding: 0;
+  }
 `;
 
 export const accordionSection = css`

package/src/components/accordion/accordion.js

@@ -1,6 +1,8 @@
 import { LitElement, html } from "lit";
 import { tokens } from "../../tokens/tokens.js";
 import "../heading/heading.js";
+import "../icons/arrow-down-icon.js";
+import "../icons/arrow-up-icon.js";
 import "../icons/minus-icon.js";
 import "../icons/plus-icon.js";
 import "../paragraph/paragraph.js";
@@ -12,6 +14,7 @@ export class BdAccordionItem extends LitElement {
   static properties = {
     open    : { type: Boolean, reflect: true },
     title   : { type: String },
+    chevron : { type: Boolean, reflect: true }, // text + arrow icon variant
     _panelId: { type: String, state: true }
   };
 
@@ -19,6 +22,7 @@ export class BdAccordionItem extends LitElement {
     super();
     this.open     = false;
     this.title    = "";
+    this.chevron  = false;
     this._panelId = `acc-panel-${Math.random().toString(36)
       .slice(2, 11)}`;
   }
@@ -46,6 +50,33 @@ export class BdAccordionItem extends LitElement {
   render() {
     const badgeEl = this.querySelector("[slot='badge']");
 
+    if (this.chevron) {
+      return html`
+        <button
+          type="button"
+          class="header header--chevron"
+          aria-expanded="${this.open}"
+          aria-controls="${this._panelId}"
+          @click=${this.toggle}
+          @focusin=${this._onTriggerFocusIn}
+          @focusout=${this._onTriggerFocusOut}
+        >
+          <span class="title-badge-wrapper">
+            <span class="title">${this.title}</span>
+            ${badgeEl ? badgeEl.cloneNode(true) : ""}
+          </span>
+          <span class="toggle toggle--chevron" aria-hidden="true">
+            ${this.open
+              ? html`<bd-arrow-up-icon size="16" color="#006DFF"></bd-arrow-up-icon>`
+              : html`<bd-arrow-down-icon size="16" color="#006DFF"></bd-arrow-down-icon>`}
+          </span>
+        </button>
+        <div id="${this._panelId}" class="content content--chevron" ?hidden=${!this.open}>
+          <slot></slot>
+        </div>
+      `;
+    }
+
     return html`
       <button
         type="button"

package/src/components/accordion/accordion.stories.js

@@ -1,4 +1,5 @@
 import { html } from "lit";
+import "../compatibility-table/compatibility-table.js";
 import "./accordion.js";
 
 export default {
@@ -22,6 +23,12 @@ Two Lit web components for building accordion sections.
 </bd-accordion-section>
 \`\`\`
 
+\`bd-accordion-item\` also supports a \`chevron\` variant — plain blue text with an arrow
+icon (\`bd-arrow-down-icon\`/\`bd-arrow-up-icon\`) on the right, no border or
+background — instead of the default left-side plus/minus icon. Combine it with
+\`bd-compatibility-table\` (\`variant="risk"\`) to build a collapsible risk-mapping
+table, as shown below.
+
 ### Attributes
 
 #### \`bd-accordion-section\`
@@ -34,10 +41,11 @@ Two Lit web components for building accordion sections.
 | \`guide-href\`  | String | \`#\`       | URL for the user guide link                                                 |
 
 #### \`bd-accordion-item\`
-| Attribute | Type    | Default | Description                          |
-|-----------|---------|---------|--------------------------------------|
-| \`title\`   | String  | —       | Trigger label                        |
-| \`open\`    | Boolean | \`false\`| Whether the panel is expanded        |
+| Attribute | Type    | Default | Description                                                        |
+|-----------|---------|---------|-------------------------------------------------------------------------|
+| \`title\`   | String  | —       | Trigger label                                                        |
+| \`open\`    | Boolean | \`false\`| Whether the panel is expanded                                        |
+| \`chevron\` | Boolean | \`false\`| Renders the plain text + arrow-icon style instead of the default left plus/minus icon |
         `
       }
     }
@@ -240,4 +248,139 @@ export const ManyItems = {
       </bd-accordion-item>
     </bd-accordion-section>
   `
+};
+
+
+// ─── Chevron variant — risk mapping (matches reference design) ────────────────
+
+export const RiskMappingAccordion = {
+  name  : "Chevron variant — Risk mapping table",
+  render: () => html`
+    <div style="max-width: 900px;">
+      <bd-h as="h2" font-weight="700" style="margin: 0 0 8px;">Coverage against agentic AI risk categories</bd-h>
+      <bd-p kind="regular" style="color: var(--color-neutral-700); margin: 0 0 24px;">
+        How AI Guardian maps to the risk categories the industry is standardising on for agentic applications.
+      </bd-p>
+
+      <bd-accordion-item chevron title="Show the full mapping (6 categories)">
+        <bd-compatibility-table
+          variant="risk"
+          .rows=${[
+            { category: "Prompt injection", coverage: "Inspects agent inputs and actions; returns allowed, flagged or blocked" },
+            { category: "Tool and MCP misuse", coverage: "Detects and blocks malicious or tampered MCP tools before invocation" },
+            { category: "Excessive or unscoped permissions", coverage: "Policy baseline defines what agents may do with tools, files and actions" },
+            { category: "Sensitive data exposure", coverage: "Detects credential and secret exposure before it leaves the machine" },
+            { category: "Unvetted extensions and skills", coverage: "Scans and validates skills before they run" },
+            { category: "Unmonitored agent activity", coverage: "Real-time tool-call monitoring with an auditable record" }
+          ]}
+        ></bd-compatibility-table>
+      </bd-accordion-item>
+
+      <bd-p kind="small" style="color: var(--color-neutral-500); margin-top: 16px;">
+        Category naming follows OWASP Top 10 for Agentic Applications (2026).
+      </bd-p>
+    </div>
+  `,
+  parameters: {
+    docs: {
+      description: {
+        story: "The chevron variant of bd-accordion-item (plain blue text, bd-arrow-down-icon/bd-arrow-up-icon on the right, no border) toggling a bd-compatibility-table in risk variant (2 columns: Risk category / AI Guardian coverage)."
+      }
+    }
+  }
+};
+
+
+// ─── Chevron variant — collapsed state ─────────────────────────────────────────
+
+export const ChevronCollapsed = {
+  name  : "Chevron variant — collapsed",
+  render: () => html`
+    <bd-accordion-item chevron title="Show the full mapping (6 categories)">
+      <bd-compatibility-table
+        variant="risk"
+        .rows=${[
+          { category: "Prompt injection", coverage: "Inspects agent inputs and actions; returns allowed, flagged or blocked" },
+          { category: "Tool and MCP misuse", coverage: "Detects and blocks malicious or tampered MCP tools before invocation" }
+        ]}
+      ></bd-compatibility-table>
+    </bd-accordion-item>
+  `,
+  parameters: {
+    docs: {
+      description: {
+        story: "Starts collapsed — click the text to expand and see the icon switch from bd-arrow-down-icon to bd-arrow-up-icon."
+      }
+    }
+  }
+};
+
+
+// ─── Default plus/minus vs chevron, side by side ───────────────────────────────
+
+export const DefaultVsChevron = {
+  name  : "Default plus/minus vs chevron",
+  render: () => html`
+    <div style="display: flex; flex-direction: column; gap: 32px;">
+      <div>
+        <bd-p kind="small" style="color: var(--color-neutral-500); margin-bottom: 8px;">Default (plus/minus, left icon)</bd-p>
+        <bd-accordion-item title="Default accordion item">
+          <p>Regular accordion content, unaffected by the new chevron variant.</p>
+        </bd-accordion-item>
+      </div>
+
+      <div>
+        <bd-p kind="small" style="color: var(--color-neutral-500); margin-bottom: 8px;">Chevron (plain text, right arrow icon, no border)</bd-p>
+        <bd-accordion-item chevron title="Chevron accordion item">
+          <p>Same underlying component, opt-in chevron styling via the chevron attribute.</p>
+        </bd-accordion-item>
+      </div>
+    </div>
+  `,
+  parameters: {
+    docs: {
+      description: {
+        story: "The two styles side by side, demonstrating that the chevron attribute is purely additive — existing default accordion items are completely unaffected."
+      }
+    }
+  }
+};
+// ─── Chevron variant — operational details (light table variant) ───────────
+
+export const OperationalDetailsAccordion = {
+  name  : "Chevron variant — Operational details (light table)",
+  render: () => html`
+    <div style="max-width: 900px;">
+      <bd-h as="h2" font-weight="700" style="margin: 0 0 8px;">How it runs</bd-h>
+      <bd-p kind="regular" style="color: var(--color-neutral-700); margin: 0 0 24px;">
+        AI Guardian installs from a signed macOS installer and runs as a background service; the rows below list how it installs, where analysis happens, and what the BETA costs.
+      </bd-p>
+
+      <bd-accordion-item chevron title="Show operational details (11 rows)">
+        <bd-compatibility-table
+          variant="light"
+          .rows=${[
+            { label: "Runs as", value: "Background service on the endpoint" },
+            { label: "Install method", value: "Download the macOS installer (.dmg)" },
+            { label: "System permissions required", value: "Granted during install, when the Bitdefender agent asks" },
+            { label: "Installer", value: "Signed with a Bitdefender Apple Developer ID and recognised by macOS" },
+            { label: "Agent version checks", value: "Handled by the installer" },
+            { label: "Where analysis happens", value: "On-device, with some checks (such as URL reputation) using Bitdefender cloud services" },
+            { label: "Prompt data", value: "Analysed on-device — prompts never leave your Mac" },
+            { label: "Offline operation", value: "Some features" },
+            { label: "Performance overhead", value: "Designed to be minimal; not yet measured" },
+            { label: "Availability", value: "Open BETA, free download" },
+            { label: "Price during BETA", value: "Free" }
+          ]}
+        ></bd-compatibility-table>
+      </bd-accordion-item>
+    </div>
+  `,
+  parameters: {
+    docs: {
+      description: {
+        story: "Same chevron bd-accordion-item pattern as the risk mapping example, this time revealing a bd-compatibility-table in the new light variant — no outer border/background, just a 2-column grid of label/value rows with thin dividers. Matches the \"How it runs\" reference exactly."
+      }
+    }
+  }
 };

package/src/components/agent-endpoints/agent-endpoints.css.js

@@ -0,0 +1,92 @@
+import { css } from "lit";
+
+export default css`
+  :host {
+    display: block;
+    font-family: var(--typography-fontFamily-sans);
+  }
+
+  .bd-agentendpoints-wrapper {
+    max-width: var(--layout-ensemble-max-width, 1200px);
+    margin: 0 auto;
+    padding: var(--spacing-48) var(--layout-ensemble-inline-padding, var(--spacing-24));
+    box-sizing: border-box;
+  }
+
+  .bd-agentendpoints-eyebrow {
+    display: block;
+    margin: 0 0 var(--spacing-8);
+    color: var(--color-blue-500);
+  }
+
+  .bd-agentendpoints-title {
+    display: block;
+    margin: 0 0 var(--spacing-16);
+    color: var(--color-neutral-1000);
+    line-height: var(--typography-lineHeight-tight, 1.1);
+  }
+
+  .bd-agentendpoints-description {
+    display: block;
+    margin: 0 0 var(--spacing-24);
+    color: var(--color-neutral-600);
+    max-width: 70ch;
+  }
+
+  .bd-agentendpoints-row {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--spacing-12);
+    margin-bottom: var(--spacing-12);
+  }
+
+  .bd-agentendpoints-row:last-of-type {
+    margin-bottom: 0;
+  }
+
+  /* === button--outline-white ===
+     White pill button with a thin gray border, rounded corners — used both
+     for the /endpoint links (with a leading arrow, monospace label) and the
+     "Ask <assistant>" links (with a leading brand icon). Reusable class,
+     not scoped to this component only. */
+  .button--outline-white {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--spacing-8);
+    padding: var(--spacing-10, 10px) var(--spacing-16);
+    background: var(--color-neutral-0, #fff);
+    border: 1px solid var(--color-neutral-200, #e5e7eb);
+    border-radius: var(--radius-full, 999px);
+    color: var(--color-neutral-800);
+    font-size: var(--typography-fontSize-sm);
+    font-weight: var(--typography-fontWeight-medium, 500);
+    text-decoration: none;
+    white-space: nowrap;
+    transition: border-color 0.2s ease, background 0.2s ease;
+  }
+
+  .button--outline-white:hover {
+    border-color: var(--color-blue-300, #93c5fd);
+    background: var(--color-blue-50, #eef4ff);
+  }
+
+  .bd-agentendpoints-arrow {
+    color: var(--color-neutral-400, #9ca3af);
+  }
+
+  .bd-agentendpoints-mono {
+    font-family: var(--typography-fontFamily-mono, monospace);
+    color: var(--color-neutral-700);
+  }
+
+  .bd-agentendpoints-icon {
+    display: block;
+    flex-shrink: 0;
+  }
+
+  @media (max-width: 599px) {
+    .bd-agentendpoints-wrapper {
+      padding: var(--spacing-32) var(--spacing-24);
+    }
+  }
+`;

package/src/components/agent-endpoints/agent-endpoints.js

@@ -0,0 +1,86 @@
+import { LitElement, html, nothing } from "lit";
+import { tokens } from "../../tokens/tokens.js";
+import "../heading/heading.js";
+import "../paragraph/paragraph.js";
+import agentEndpointsCSS from "./agent-endpoints.css.js";
+
+class AgentEndpoints extends LitElement {
+  static properties = {
+    eyebrow    : { type: String },
+    title      : { type: String },
+    description: { type: String },
+    endpoints  : { type: Array }, // [{ label: String, href: String }]
+    assistants : { type: Array }  // [{ label: String, href: String, icon: String }]
+  };
+
+  static styles = [tokens, agentEndpointsCSS];
+
+  constructor() {
+    super();
+    this.eyebrow = "";
+    this.title = "";
+    this.description = "";
+    this.endpoints = [];
+    this.assistants = [];
+  }
+
+  render() {
+    return html`
+      <div class="bd-agentendpoints-wrapper">
+        ${this.eyebrow
+          ? html`<bd-p kind="regular" font-weight="var(--typography-fontWeight-semibold, 600)" class="bd-agentendpoints-eyebrow"><slot name="eyebrow">${this.eyebrow}</slot></bd-p>`
+          : nothing}
+
+        ${this.title
+          ? html`<bd-h as="h2" class="bd-agentendpoints-title"><slot name="title">${this.title}</slot></bd-h>`
+          : nothing}
+
+        ${this.description
+          ? html`<bd-p kind="regular" class="bd-agentendpoints-description"><slot name="description">${this.description}</slot></bd-p>`
+          : nothing}
+
+        ${this.endpoints && this.endpoints.length
+          ? html`
+              <div class="bd-agentendpoints-row">
+                ${this.endpoints.map(
+                  (ep) => html`
+                    <a class="button--outline-white" href=${ep.href} target="_blank" rel="noopener noreferrer">
+                      <span class="bd-agentendpoints-arrow" aria-hidden="true">→</span>
+                      <span class="bd-agentendpoints-mono">${ep.label}</span>
+                    </a>
+                  `
+                )}
+              </div>
+            `
+          : nothing}
+
+        ${this.assistants && this.assistants.length
+          ? html`
+              <div class="bd-agentendpoints-row">
+                ${this.assistants.map(
+                  (a) => html`
+    <a
+      class="button--outline-white"
+      href=${a.href}
+      target="_blank"
+      rel="noopener noreferrer"
+      aria-label="${a.label} (opens in new tab)"
+    >
+      ${a.icon
+        ? html`<img src=${a.icon} alt="" class="bd-agentendpoints-icon" width="20" height="20" loading="lazy" />`
+        : nothing}
+      <span>${a.label}</span>
+    </a>
+  `
+                )}
+              </div>
+            `
+          : nothing}
+
+        <slot name="rows"></slot>
+      </div>
+    `;
+  }
+}
+
+customElements.define("bd-agent-endpoints", AgentEndpoints);