@repobit/dex-system-design 0.24.14 → 0.24.16

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.16](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.24.15...@repobit/dex-system-design@0.24.16) (2026-09-18)
+
+### Bug Fixes
+
+* **DEX-1014:** adjustments for UI Components
+
+
+## [0.24.15](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.24.14...@repobit/dex-system-design@0.24.15) (2026-09-17)
+
+**Note:** Version bump only for package @repobit/dex-system-design
+
+
+
+
+
 ## [0.24.14](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.24.13...@repobit/dex-system-design@0.24.14) (2026-09-14)
 
 **Note:** Version bump only for package @repobit/dex-system-design

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@repobit/dex-system-design",
-  "version": "0.24.14",
+  "version": "0.24.16",
   "description": "Design system based on Web Components.",
   "author": "Iordache Matei Cezar <miordache@bitdefender.com>",
   "homepage": "https://github.com/bitdefender/dex-core#readme",
@@ -76,8 +76,8 @@
     "url": "https://github.com/bitdefender/dex-core/issues"
   },
   "dependencies": {
-    "@repobit/dex-store": "1.6.30",
-    "@repobit/dex-store-elements": "2.1.0",
+    "@repobit/dex-store": "1.6.32",
+    "@repobit/dex-store-elements": "2.1.2",
     "lit": "^3.3.2"
   },
   "devDependencies": {
@@ -94,5 +94,5 @@
   "volta": {
     "node": "24.14.0"
   },
-  "gitHead": "c305397c9222ca1b3e623115d300a355efa6b2a4"
+  "gitHead": "3b76de7a386f6dfb40c25c3f1a15e80921143258"
 }

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

@@ -227,6 +227,7 @@ function aiGuardianBody() {
           <bd-compatibility-table
             variant="outcome"
             title="The same agent, with and without AI Guardian"
+            description="The table compares how five common agent events play out on an unprotected machine and on one running AI Guardian."
             .rows=${[
               { event: "Prompt injection", without: "Agent may follow the injected instruction", with: "Flagged or blocked before it acts" },
               { event: "Malicious MCP tool", without: "Tool runs and can steer the agent", with: "Blocked before the agent calls it" },
@@ -575,18 +576,11 @@ function skillScannerBody() {
 
       <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-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;">
+          <bd-p kind="regular" style="color: var(--color-neutral-700); margin: 0 0 24px; max-width: 72ch">
             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"
@@ -612,10 +606,10 @@ function skillScannerBody() {
             ></bd-compatibility-table>
           </bd-accordion-item>
 
-          <bd-p kind="regular" style="color: var(--color-neutral-700); margin-top: 16px;">
+          <bd-p kind="regular" style="color: var(--color-neutral-700); margin-top: 16px;max-width: 72ch">
             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;">
+          <bd-p kind="regular" style="color: var(--color-neutral-700); margin-top: 8px;max-width: 72ch">
             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>
@@ -633,32 +627,32 @@ function skillScannerBody() {
             -->
             <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-p color="var(--color-neutral-600)">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-p color="var(--color-neutral-600)">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-p color="var(--color-neutral-600)">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-p color="var(--color-neutral-600)">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-p color="var(--color-neutral-600)">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-p color="#ffffffb8">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>

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

@@ -82,11 +82,13 @@ box-shadow: 0px 14px 40px #00000012;
   }
 
   :host([tone="dark"]) {
-    --background-card-grey: var(--color-neutral-900);
+    --background-card-grey: linear-gradient(160deg, var(--color-neutral-800) 0%, var(--color-blue-950) 130%);
+;
   }
 
   :host([tone="dark"]) .bd-bentoitem-box {
-    border-color: var(--color-neutral-900);
+    border-color: linear-gradient(160deg, var(--color-neutral-800) 0%, var(--color-blue-950) 130%);
+;
   }
 
   :host([tone="dark"]) .bd-bentoitem-title-wrap bd-h {

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

@@ -23,7 +23,7 @@ export default css`
   .bd-comparisonpanel-description {
     margin: 0 0 var(--spacing-48);
     color: var(--color-neutral-600);
-    max-width: 70ch;
+    max-width: 72ch;
   }
 
   /* === COLUMNS === */

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

@@ -82,7 +82,7 @@ class ComparisonPanel extends LitElement {
 
         ${this.description
           ? html`
-              <bd-p kind="regular" class="bd-comparisonpanel-description">
+              <bd-p kind="large" class="bd-comparisonpanel-description">
                 <slot name="description">${this.description}</slot>
               </bd-p>
             `

package/src/components/compatibility-table/compatibility-table.css.js

@@ -13,7 +13,7 @@ export default css`
   .bd-compattable-wrapper {
     max-width: var(--layout-ensemble-max-width, 1200px);
     margin: 0 auto;
-    padding: var(--spacing-48) var(--layout-ensemble-inline-padding, var(--spacing-24));
+    padding: var(--spacing-48) 0px var(--spacing-0);
     box-sizing: border-box;
   }
 
@@ -27,8 +27,8 @@ export default css`
   .bd-compattable-description {
     display: block;
     margin: 0 0 var(--spacing-32);
-    color: var(--color-neutral-700);
-    max-width: 60ch;
+    color: var(--color-neutral-600);
+    max-width: 72ch;
   }
 
   /* === TABLE CONTAINER (default / outcome / risk) === */
@@ -139,7 +139,7 @@ export default css`
   }
 
   .bd-compattable-cell--riskcoverage {
-    color: var(--color-blue-700, #1d4ed8);
+    color: var(--color-neutral-900);
   }
 
   /* === LIGHT VARIANT === */

package/src/components/compatibility-table/compatibility-table.js

@@ -87,7 +87,7 @@ class CompatibilityTable extends LitElement {
 
         ${this.description
           ? html`
-              <bd-p kind="regular" class="bd-compattable-description">
+              <bd-p kind="large" class="bd-compattable-description" color="var(--color-neutral-600)">
                 <slot name="description">${this.description}</slot>
               </bd-p>
             `

package/src/components/header/header-code.css.js

@@ -17,6 +17,34 @@ export default css`
     box-sizing: border-box;
   }
 
+  /* === ENTRANCE ANIMATION === */
+  @keyframes bd-headercode-fade-up {
+    from {
+      opacity: 0;
+      transform: translateY(16px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  .bd-headercode-left,
+  .bd-headercode-right {
+    animation: bd-headercode-fade-up 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
+  }
+
+  .bd-headercode-right {
+    animation-delay: 0.12s;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .bd-headercode-left,
+    .bd-headercode-right {
+      animation: none;
+    }
+  }
+
   /* === LEFT COLUMN === */
   .bd-headercode-left {
     display: flex;

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

@@ -13,9 +13,9 @@ export default css`
   }
 
   .bd-installoptions-eyebrow {
-    color: var(--color-blue-500);
-    font-weight: var(--typography-fontWeight-semibold);
-    margin: 0 0 var(--spacing-16);
+    color: var(--color-blue-600);
+    font-weight: var(--typography-fontWeight-medium);
+    margin: 0 0 var(--spacing-24);
     max-width: var(--layout-ensemble-max-width, 1200px);
     margin-inline: auto;
   }
@@ -31,7 +31,7 @@ export default css`
   .bd-installoptions-description {
     color: var(--color-neutral-700);
     max-width: 640px;
-    margin: 0 auto var(--spacing-32);
+    // padding: var(--spacing-48) var(--layout-ensemble-inline-padding, var(--spacing-24))
   }
 
   .bd-installoptions-worksin {