@repobit/dex-system-design 0.23.7 → 0.23.9

package/src/components/carousel/carousel.stories.js

@@ -16,7 +16,7 @@ export default {
 ### Usage
 \`\`\`html
 <bd-carousel-section title="Security Features">
-  <bd-carousel-item title="VPN" icon="/assets/vpn.svg" modalText="Our VPN protects your connection.">
+  <bd-carousel-item title="VPN" icon="/assets/analysis.svg" modalText="Our VPN protects your connection.">
     <p>Unlimited VPN included</p>
   </bd-carousel-item>
 </bd-carousel-section>
@@ -61,12 +61,12 @@ export default {
 };
 
 const sampleItems = [
-  { title: 'VPN Protection',       icon: '/assets/vpn.svg',       modalText: 'Our VPN encrypts your internet traffic and hides your IP address.',       content: 'Unlimited encrypted VPN traffic' },
-  { title: 'Antivirus',            icon: '/assets/antivirus.svg', modalText: 'Real-time antivirus protection against all known and emerging threats.',    content: 'Award-winning threat detection' },
-  { title: 'Password Manager',     icon: '/assets/password.svg',  modalText: 'Store and autofill all your passwords securely across all devices.',        content: 'Secure password vault' },
-  { title: 'Parental Controls',    icon: '/assets/parental.svg',  modalText: 'Monitor and control your children\'s online activity and screen time.',     content: 'Advanced content filtering' },
-  { title: 'Anti-Phishing',        icon: '/assets/phishing.svg',  modalText: 'Detects and blocks phishing websites before they can steal your data.',     content: 'Real-time phishing protection' },
-  { title: 'Webcam Protection',    icon: '/assets/webcam.svg',    modalText: 'Prevents unauthorized apps from accessing your webcam.',                    content: 'Webcam & mic access control' }
+  { title: 'VPN Protection',       icon: '/assets/analysis.svg',       modalText: 'Our VPN encrypts your internet traffic and hides your IP address.',       content: 'Unlimited encrypted VPN traffic' },
+  { title: 'Antivirus',            icon: '/assets/analysis.svg', modalText: 'Real-time antivirus protection against all known and emerging threats.',    content: 'Award-winning threat detection' },
+  { title: 'Password Manager',     icon: '/assets/analysis.svg',  modalText: 'Store and autofill all your passwords securely across all devices.',        content: 'Secure password vault' },
+  { title: 'Parental Controls',    icon: '/assets/analysis.svg',  modalText: 'Monitor and control your children\'s online activity and screen time.',     content: 'Advanced content filtering' },
+  { title: 'Anti-Phishing',        icon: '/assets/analysis.svg',  modalText: 'Detects and blocks phishing websites before they can steal your data.',     content: 'Real-time phishing protection' },
+  { title: 'Webcam Protection',    icon: '/assets/analysis.svg',    modalText: 'Prevents unauthorized apps from accessing your webcam.',                    content: 'Webcam & mic access control' }
 ];
 
 const renderItem = (item) => html`
@@ -135,18 +135,18 @@ export const RichSlottedContent = {
   name  : 'Rich Slotted Content',
   render: () => html`
     <bd-carousel-section title="Features">
-      <bd-carousel-item title="VPN" icon="/assets/vpn.svg" modalText="Full VPN details here.">
+      <bd-carousel-item title="VPN" icon="/assets/analysis.svg" modalText="Full VPN details here.">
         <ul>
           <li>Unlimited bandwidth</li>
           <li>200+ server locations</li>
           <li>No-log policy</li>
         </ul>
       </bd-carousel-item>
-      <bd-carousel-item title="Antivirus" icon="/assets/antivirus.svg" modalText="Antivirus details here.">
+      <bd-carousel-item title="Antivirus" icon="/assets/analysis.svg" modalText="Antivirus details here.">
         <p>Real-time protection</p>
         <a href="#">Learn more</a>
       </bd-carousel-item>
-      <bd-carousel-item title="Parental Controls" icon="/assets/parental.svg" modalText="Parental control details.">
+      <bd-carousel-item title="Parental Controls" icon="/assets/analysis.svg" modalText="Parental control details.">
         <p>Safe browsing for kids</p>
         <p>Screen time management</p>
       </bd-carousel-item>
@@ -184,7 +184,7 @@ export const Playground = {
   args: {
     title    : 'Security Features',
     itemTitle: 'VPN Protection',
-    itemIcon : '/assets/vpn.svg',
+    itemIcon : '/assets/analysis.svg',
     modalText: 'Our VPN encrypts your connection and protects your privacy.'
   },
   render: (args) => html`
@@ -192,10 +192,10 @@ export const Playground = {
       <bd-carousel-item title="${args.itemTitle}" icon="${args.itemIcon}" modalText="${args.modalText}">
         <p>Slotted content for this item.</p>
       </bd-carousel-item>
-      <bd-carousel-item title="Antivirus" icon="/assets/antivirus.svg" modalText="Real-time antivirus protection.">
+      <bd-carousel-item title="Antivirus" icon="/assets/analysis.svg" modalText="Real-time antivirus protection.">
         <p>Award-winning threat detection</p>
       </bd-carousel-item>
-      <bd-carousel-item title="Parental Controls" icon="/assets/parental.svg" modalText="Monitor your children's activity.">
+      <bd-carousel-item title="Parental Controls" icon="/assets/analysis.svg" modalText="Monitor your children's activity.">
         <p>Advanced content filtering</p>
       </bd-carousel-item>
     </bd-carousel-section>

package/src/components/compare/compare.js

@@ -1,9 +1,6 @@
 import { LitElement, html, nothing } from "lit";
 import { tokens } from "../../tokens/tokens.js";
-import "../image/image.js";
-import "../link/link.js";
 import compareCSS from "./compare.css.js";
-
 // ═══════════════════════════════════════════════════════════════
 //  compare-bar
 //  Attributes / Properties:

package/src/components/compare/compare.stories.js

@@ -1,4 +1,8 @@
 import { html } from "lit";
+import "../heading/heading.js";
+import "../image/image.js";
+import "../link/link.js";
+import "../paragraph/paragraph.js";
 import "./compare.js";
 
 const SHIELD_ICON      = "/assets/shield-check.svg";
@@ -117,7 +121,7 @@ export const Default = {
         bar-stretch="false"
       >
         <compare-bar label="Bitdefender" score="5.86" max-score="6" variant="primary"></compare-bar>
-        <compare-bar label="Norton"      score="5.89" max-score="6" variant="secondary" scale="0.93"></compare-bar>
+        <compare-bar label="Norton"      score="5.89" max-score="6" variant="secondary" scale="0.73"></compare-bar>
         <compare-bar label="McAfee"      score="5.53" max-score="6" variant="secondary" scale="0.47"></compare-bar>
       </compare-card>
     </bd-compare-section>

package/src/components/pricing-cards/new-pricing-card.stories.js

@@ -1,4 +1,8 @@
 import { html } from 'lit';
+import "../heading/heading.js";
+import "../image/image.js";
+import "../link/link.js";
+import "../paragraph/paragraph.js";
 import './new-pricing-card.js';
 import './pricing-card-actions.js';
 import './pricing-card-container.js';

package/src/components/pricing-cards/pricing-card-pricing.js

@@ -78,7 +78,9 @@ class PricingCardPricing extends LitElement {
 
               <bd-p kind="small" class="terms">
                 First year price. Plus applicable sales tax. See
-                <a href="#">terms of use</a> below.
+          <bd-link href="#" target="_blank" font-size="14px" color="var(--color-neutral-900)" underline>
+            terms of use
+          </bd-link>
               </bd-p>
             </div>
             

package/src/tokens/tokens.css

@@ -28,6 +28,14 @@
   --typography-fontWeight-medium: 500;
   --typography-fontWeight-semibold: 600;
   --typography-fontWeight-bold: 700;
+/* Awards section — Orbit Frame 14 (node 1882:9342) */
+  --layout-awards-section-background: var(--color-blue-50);
+  --layout-awards-banner-max-width: 37.5rem; /* legacy narrow cap; prefer cluster */
+  --layout-awards-cluster-max-width: 49.5625rem; /* 793px — trust banner column */
+  --layout-awards-intro-max-width: 39.4375rem; /* 631px — headline stack */
+  /* Legacy: narrow lower block from Orbit; prefer --layout-ensemble-content-max for compare-aligned grids */
+  --layout-awards-content-max-width: 53.0625rem; /* 849px */
+  --layout-ensemble-inline-padding: var(--spacing-24);
 
   --typography-lineHeight-none: 1;
   --typography-lineHeight-tight: 1.25;

package/src/tokens/tokens.js

@@ -1038,5 +1038,14 @@ export const tokens = css`
 
         --font-style-sans-normal: normal;
         --font-style-sans-italic: italic;
+        /* Awards section — Orbit Frame 14 (node 1882:9342) */
+        --layout-awards-section-background: var(--color-blue-50);
+        --layout-awards-banner-max-width: 37.5rem; /* legacy narrow cap; prefer cluster */
+        --layout-awards-cluster-max-width: 49.5625rem; /* 793px — trust banner column */
+        --layout-awards-intro-max-width: 39.4375rem; /* 631px — headline stack */
+        /* Legacy: narrow lower block from Orbit; prefer --layout-ensemble-content-max for compare-aligned grids */
+        --layout-awards-content-max-width: 53.0625rem; /* 849px */
+        --layout-ensemble-inline-padding: var(--spacing-24);
+
     }
 `;