@repobit/dex-system-design 0.25.12 → 1.0.0

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

@@ -1,6 +1,6 @@
 import { html } from 'lit';
 import '../badge/badge.js';
-import './light-carousel-simple.js';
+import '../paragraph/paragraph.js';
 import './light-carousel.js';
 
 export default {
@@ -13,11 +13,11 @@ export default {
 Two light carousel variants are available:
 
 - \`<bd-light-carousel-section>\` — carousel with icon, title, optional badge, and slotted \`<bd-p>\` content
-- \`<bd-light-carousel-simple-section>\` — simplified carousel with icon, title, and slotted content, no badge support
+- \`<bd-light-carousel-section variant="simple">\` — simplified carousel with icon, title, and slotted content, no badge support
 
 Both use corresponding item components:
 - \`<bd-light-carousel-item>\` — for the standard variant
-- \`<bd-light-carousel-simple-item>\` — for the simple variant
+- \`<bd-light-carousel-item variant="simple">\` — for the simple variant
 
 ### Usage
 \`\`\`html
@@ -27,18 +27,31 @@ Both use corresponding item components:
     icon="/assets/icon.png"
     badge="FAQ"
   >
-    <bd-p kind="small">Protection details here.</bd-p>
+    <bd-p variant="small">Protection details here.</bd-p>
   </bd-light-carousel-item>
 </bd-light-carousel-section>
 \`\`\`
 
 ### Standard vs Simple
-| Feature | bd-light-carousel-section | bd-light-carousel-simple-section |
+
+One component, one stylesheet, two value sets chosen by \`variant\`. They were two
+element pairs until P6E.1; they were never two components.
+
+| | variant="standard" (default) | variant="simple" |
 |---|---|---|
-| Badge support | Yes | No |
-| Icon | Yes | Yes |
-| Title | Yes | Yes |
-| Slotted content | Yes | Yes |
+| Badge support | Yes | No — \`badge\` is ignored |
+| Columns | 3 | 4 |
+| Track gap | 30px | 1.5rem |
+| Icon size | \`--spacing-32\` | \`--spacing-44\` |
+| Item header | row, centre-aligned | column, start-aligned |
+| Item title | h5, bold, 10px vertical padding | h4, regular, no padding |
+| Title alignment | start | centre |
+| Section padding block | 0 | \`--spacing-32\` |
+| Track padding top | \`--spacing-32\` | 0 |
+
+Omitting \`badge\` on the standard variant does **not** produce the simple one:
+the two disagree on the eight layout values above and on the type of the item
+title.
 
 ### Notes
 - Both carousels are static layout — no scroll arrows, no drag behavior
@@ -102,15 +115,15 @@ export const Default = {
         icon="/assets/light-carousel-img1.png"
         badge="FAQ"
       >
-        <bd-p kind="small">Bitdefender Internet Security provides the best protection...</bd-p>
-        <bd-p kind="small">Advanced AI and behavior-based detection ensure safety online and offline.</bd-p>
+        <bd-p variant="small">Bitdefender Internet Security provides the best protection...</bd-p>
+        <bd-p variant="small">Advanced AI and behavior-based detection ensure safety online and offline.</bd-p>
       </bd-light-carousel-item>
 
       <bd-light-carousel-item
         title="How to install Bitdefender on another device?"
         icon="/assets/light-carousel-img1.png"
       >
-        <bd-p kind="small">You can install Bitdefender on other devices by logging into your Central account and using the 'My Devices' tab.</bd-p>
+        <bd-p variant="small">You can install Bitdefender on other devices by logging into your Central account and using the 'My Devices' tab.</bd-p>
       </bd-light-carousel-item>
 
       <bd-light-carousel-item
@@ -118,7 +131,7 @@ export const Default = {
         icon="/assets/light-carousel-img1.png"
         badge="How To"
       >
-        <bd-p kind="small">Yes, just remove the license from the old device via Central and activate it on the new one.</bd-p>
+        <bd-p variant="small">Yes, just remove the license from the old device via Central and activate it on the new one.</bd-p>
       </bd-light-carousel-item>
     </bd-light-carousel-section>
   `,
@@ -140,14 +153,14 @@ export const StandardNoTitle = {
         icon="/assets/light-carousel-img1.png"
         badge="FAQ"
       >
-        <bd-p kind="small">Bitdefender uses AI-powered threat detection to keep you safe.</bd-p>
+        <bd-p variant="small">Bitdefender uses AI-powered threat detection to keep you safe.</bd-p>
       </bd-light-carousel-item>
       <bd-light-carousel-item
         title="Can I use one license on multiple devices?"
         icon="/assets/light-carousel-img1.png"
         badge="Licensing"
       >
-        <bd-p kind="small">Yes, depending on your plan you can protect multiple devices.</bd-p>
+        <bd-p variant="small">Yes, depending on your plan you can protect multiple devices.</bd-p>
       </bd-light-carousel-item>
     </bd-light-carousel-section>
   `,
@@ -168,19 +181,19 @@ export const StandardNoBadges = {
         title="What is included in my plan?"
         icon="/assets/light-carousel-img1.png"
       >
-        <bd-p kind="small">All core features are included in every Bitdefender plan.</bd-p>
+        <bd-p variant="small">All core features are included in every Bitdefender plan.</bd-p>
       </bd-light-carousel-item>
       <bd-light-carousel-item
         title="How do I renew my subscription?"
         icon="/assets/light-carousel-img1.png"
       >
-        <bd-p kind="small">You can renew from your Bitdefender Central account at any time.</bd-p>
+        <bd-p variant="small">You can renew from your Bitdefender Central account at any time.</bd-p>
       </bd-light-carousel-item>
       <bd-light-carousel-item
         title="Is there a free trial available?"
         icon="/assets/light-carousel-img1.png"
       >
-        <bd-p kind="small">Yes, a 30-day free trial is available for most Bitdefender products.</bd-p>
+        <bd-p variant="small">Yes, a 30-day free trial is available for most Bitdefender products.</bd-p>
       </bd-light-carousel-item>
     </bd-light-carousel-section>
   `,
@@ -198,13 +211,13 @@ export const StandardNoIcons = {
   render: () => html`
     <bd-light-carousel-section title="Help Topics">
       <bd-light-carousel-item title="Installation Guide" badge="Guide">
-        <bd-p kind="small">Step-by-step installation instructions for all platforms.</bd-p>
+        <bd-p variant="small">Step-by-step installation instructions for all platforms.</bd-p>
       </bd-light-carousel-item>
       <bd-light-carousel-item title="Billing & Payments" badge="Account">
-        <bd-p kind="small">Everything you need to know about your subscription billing.</bd-p>
+        <bd-p variant="small">Everything you need to know about your subscription billing.</bd-p>
       </bd-light-carousel-item>
       <bd-light-carousel-item title="Technical Support" badge="Support">
-        <bd-p kind="small">Contact our support team for technical issues.</bd-p>
+        <bd-p variant="small">Contact our support team for technical issues.</bd-p>
       </bd-light-carousel-item>
     </bd-light-carousel-section>
   `,
@@ -226,7 +239,7 @@ export const StandardSingleItem = {
         icon="/assets/light-carousel-img1.png"
         badge="Support"
       >
-        <bd-p kind="small">You can reach our support team 24/7 via live chat or email from your Central account.</bd-p>
+        <bd-p variant="small">You can reach our support team 24/7 via live chat or email from your Central account.</bd-p>
       </bd-light-carousel-item>
     </bd-light-carousel-section>
   `,
@@ -248,7 +261,7 @@ export const StandardRichContent = {
         icon="/assets/light-carousel-img1.png"
         badge="Features"
       >
-        <bd-p kind="small">Total Security includes:</bd-p>
+        <bd-p variant="small">Total Security includes:</bd-p>
         <ul style="font-size:13px; padding-left:16px; margin:4px 0;">
           <li>Antivirus & anti-malware</li>
           <li>Unlimited VPN</li>
@@ -261,8 +274,8 @@ export const StandardRichContent = {
         icon="/assets/light-carousel-img1.png"
         badge="Compatibility"
       >
-        <bd-p kind="small">Available on Windows, macOS, Android, and iOS.</bd-p>
-        <bd-p kind="small">Visit <a href="#">our compatibility page</a> for full details.</bd-p>
+        <bd-p variant="small">Available on Windows, macOS, Android, and iOS.</bd-p>
+        <bd-p variant="small">Visit <a href="#">our compatibility page</a> for full details.</bd-p>
       </bd-light-carousel-item>
     </bd-light-carousel-section>
   `,
@@ -283,37 +296,37 @@ export const Simple = {
     title: "Our AI-powered platform that detects and fights scams. In real time."
   },
   render: (args) => html`
-    <bd-light-carousel-simple-section title="${args.title}">
-      <bd-light-carousel-simple-item
+    <bd-light-carousel-section variant="simple" title="${args.title}">
+      <bd-light-carousel-item variant="simple"
         title="Scam Copilot Chatbot"
         icon="/assets/light-carousel-img1.png"
       >
-        <bd-p kind="small">
+        <bd-p variant="small">
           Specialized AI chatbot that helps you identify suspicious online
           interactions so you don't become a victim.
         </bd-p>
-      </bd-light-carousel-simple-item>
+      </bd-light-carousel-item>
 
-      <bd-light-carousel-simple-item
+      <bd-light-carousel-item variant="simple"
         title="Scam Wave Alerts"
         icon="/assets/light-carousel-img1.png"
       >
-        <bd-p kind="small">
+        <bd-p variant="small">
           Stay informed with real-time alerts about ongoing scam outbreaks
           detected in your area automatically.
         </bd-p>
-      </bd-light-carousel-simple-item>
+      </bd-light-carousel-item>
 
-      <bd-light-carousel-simple-item
+      <bd-light-carousel-item variant="simple"
         title="Online Scam Protection"
         icon="/assets/light-carousel-img1.png"
       >
-        <bd-p kind="small">
+        <bd-p variant="small">
           Focused on browsing activities, it specializes in detecting the newest
           scam patterns and tactics.
         </bd-p>
-      </bd-light-carousel-simple-item>
-    </bd-light-carousel-simple-section>
+      </bd-light-carousel-item>
+    </bd-light-carousel-section>
   `,
   parameters: {
     docs: {
@@ -327,20 +340,20 @@ export const Simple = {
 export const SimpleNoTitle = {
   name  : 'Simple — No Title',
   render: () => html`
-    <bd-light-carousel-simple-section>
-      <bd-light-carousel-simple-item
+    <bd-light-carousel-section variant="simple">
+      <bd-light-carousel-item variant="simple"
         title="Scam Copilot Chatbot"
         icon="/assets/light-carousel-img1.png"
       >
-        <bd-p kind="small">AI chatbot that helps you identify suspicious online interactions.</bd-p>
-      </bd-light-carousel-simple-item>
-      <bd-light-carousel-simple-item
+        <bd-p variant="small">AI chatbot that helps you identify suspicious online interactions.</bd-p>
+      </bd-light-carousel-item>
+      <bd-light-carousel-item variant="simple"
         title="Real-time Alerts"
         icon="/assets/light-carousel-img1.png"
       >
-        <bd-p kind="small">Get notified instantly about scam outbreaks in your area.</bd-p>
-      </bd-light-carousel-simple-item>
-    </bd-light-carousel-simple-section>
+        <bd-p variant="small">Get notified instantly about scam outbreaks in your area.</bd-p>
+      </bd-light-carousel-item>
+    </bd-light-carousel-section>
   `,
   parameters: {
     docs: {
@@ -354,17 +367,17 @@ export const SimpleNoTitle = {
 export const SimpleNoIcons = {
   name  : 'Simple — No Icons',
   render: () => html`
-    <bd-light-carousel-simple-section title="Protection Features">
-      <bd-light-carousel-simple-item title="Scam Detection">
-        <bd-p kind="small">AI-powered scam detection across all browsing activities.</bd-p>
-      </bd-light-carousel-simple-item>
-      <bd-light-carousel-simple-item title="Wave Alerts">
-        <bd-p kind="small">Real-time alerts about scam outbreaks in your area.</bd-p>
-      </bd-light-carousel-simple-item>
-      <bd-light-carousel-simple-item title="Online Protection">
-        <bd-p kind="small">Continuous protection against the latest scam patterns.</bd-p>
-      </bd-light-carousel-simple-item>
-    </bd-light-carousel-simple-section>
+    <bd-light-carousel-section variant="simple" title="Protection Features">
+      <bd-light-carousel-item variant="simple" title="Scam Detection">
+        <bd-p variant="small">AI-powered scam detection across all browsing activities.</bd-p>
+      </bd-light-carousel-item>
+      <bd-light-carousel-item variant="simple" title="Wave Alerts">
+        <bd-p variant="small">Real-time alerts about scam outbreaks in your area.</bd-p>
+      </bd-light-carousel-item>
+      <bd-light-carousel-item variant="simple" title="Online Protection">
+        <bd-p variant="small">Continuous protection against the latest scam patterns.</bd-p>
+      </bd-light-carousel-item>
+    </bd-light-carousel-section>
   `,
   parameters: {
     docs: {
@@ -378,14 +391,14 @@ export const SimpleNoIcons = {
 export const SimpleSingleItem = {
   name  : 'Simple — Single Item (edge case)',
   render: () => html`
-    <bd-light-carousel-simple-section title="Key Feature">
-      <bd-light-carousel-simple-item
+    <bd-light-carousel-section variant="simple" title="Key Feature">
+      <bd-light-carousel-item variant="simple"
         title="Scam Copilot Chatbot"
         icon="/assets/light-carousel-img1.png"
       >
-        <bd-p kind="small">AI chatbot specialized in identifying suspicious online interactions.</bd-p>
-      </bd-light-carousel-simple-item>
-    </bd-light-carousel-simple-section>
+        <bd-p variant="small">AI chatbot specialized in identifying suspicious online interactions.</bd-p>
+      </bd-light-carousel-item>
+    </bd-light-carousel-section>
   `,
   parameters: {
     docs: {
@@ -406,23 +419,23 @@ export const BothVariants = {
         <p style="font-weight:600; font-size:14px; margin-bottom:8px; color:#026DFF;">Standard (with badge support)</p>
         <bd-light-carousel-section title="Help & FAQ">
           <bd-light-carousel-item title="How do I install?" icon="/assets/light-carousel-img1.png" badge="FAQ">
-            <bd-p kind="small">Download from Central and follow the setup wizard.</bd-p>
+            <bd-p variant="small">Download from Central and follow the setup wizard.</bd-p>
           </bd-light-carousel-item>
           <bd-light-carousel-item title="How do I renew?" icon="/assets/light-carousel-img1.png" badge="Account">
-            <bd-p kind="small">Renew anytime from your Bitdefender Central account.</bd-p>
+            <bd-p variant="small">Renew anytime from your Bitdefender Central account.</bd-p>
           </bd-light-carousel-item>
         </bd-light-carousel-section>
       </div>
       <div>
         <p style="font-weight:600; font-size:14px; margin-bottom:8px; color:#026DFF;">Simple (no badge)</p>
-        <bd-light-carousel-simple-section title="AI Features">
-          <bd-light-carousel-simple-item title="Scam Copilot" icon="/assets/light-carousel-img1.png">
-            <bd-p kind="small">AI chatbot that detects suspicious interactions.</bd-p>
-          </bd-light-carousel-simple-item>
-          <bd-light-carousel-simple-item title="Wave Alerts" icon="/assets/light-carousel-img1.png">
-            <bd-p kind="small">Real-time scam outbreak notifications.</bd-p>
-          </bd-light-carousel-simple-item>
-        </bd-light-carousel-simple-section>
+        <bd-light-carousel-section variant="simple" title="AI Features">
+          <bd-light-carousel-item variant="simple" title="Scam Copilot" icon="/assets/light-carousel-img1.png">
+            <bd-p variant="small">AI chatbot that detects suspicious interactions.</bd-p>
+          </bd-light-carousel-item>
+          <bd-light-carousel-item variant="simple" title="Wave Alerts" icon="/assets/light-carousel-img1.png">
+            <bd-p variant="small">Real-time scam outbreak notifications.</bd-p>
+          </bd-light-carousel-item>
+        </bd-light-carousel-section>
       </div>
     </div>
   `,
@@ -435,6 +448,37 @@ export const BothVariants = {
   }
 };
 
+export const HeadingComposition = {
+  name  : 'Heading composition (a11y)',
+  render: () => html`
+    <h1 style="font-family: var(--typography-fontFamily-sans)">Page title (the only h1)</h1>
+
+    <bd-light-carousel-section title="Section at the default level">
+      <bd-light-carousel-item title="Item heading" badge="FAQ">
+        <bd-p variant="small">Renders h3, one level below its section.</bd-p>
+      </bd-light-carousel-item>
+    </bd-light-carousel-section>
+
+    <bd-light-carousel-section variant="simple" heading-level="3" title="Nested section, told it sits deeper">
+      <bd-light-carousel-item variant="simple" heading-level="4" title="Item heading">
+        <bd-p variant="small">The consumer moved both levels; the type scale did not move with them.</bd-p>
+      </bd-light-carousel-item>
+    </bd-light-carousel-section>
+  `,
+  parameters: {
+    docs: {
+      description: {
+        story: `Heading level is a page-composition question, so the section takes it as \`heading-level\`
+and defaults to 2 -- a reusable section cannot know it is the only thing on the page. Two of these
+used to render an h1 each, which put two page-level headings on one page and then skipped to h6.
+
+The type scale does not move with the level: both sections above look exactly as they did when they
+were h1s. Inspect the accessibility tree and the outline should read h1 -> h2 -> h3 -> h3 -> h4.`
+      }
+    }
+  }
+};
+
 export const MobileView = {
   name  : 'Mobile View (375px)',
   render: () => html`
@@ -444,14 +488,14 @@ export const MobileView = {
         icon="/assets/light-carousel-img1.png"
         badge="FAQ"
       >
-        <bd-p kind="small">AI and behavior-based detection keep you safe online and offline.</bd-p>
+        <bd-p variant="small">AI and behavior-based detection keep you safe online and offline.</bd-p>
       </bd-light-carousel-item>
       <bd-light-carousel-item
         title="How to install on another device?"
         icon="/assets/light-carousel-img1.png"
         badge="How To"
       >
-        <bd-p kind="small">Log into Central and use the My Devices tab to install on more devices.</bd-p>
+        <bd-p variant="small">Log into Central and use the My Devices tab to install on more devices.</bd-p>
       </bd-light-carousel-item>
     </bd-light-carousel-section>
   `,
@@ -480,13 +524,13 @@ export const PlaygroundStandard = {
         icon="${args.icon}"
         badge="${args.badge}"
       >
-        <bd-p kind="small">Bitdefender uses AI-powered detection to keep you safe online and offline.</bd-p>
+        <bd-p variant="small">Bitdefender uses AI-powered detection to keep you safe online and offline.</bd-p>
       </bd-light-carousel-item>
       <bd-light-carousel-item
         title="How do I renew my subscription?"
         icon="${args.icon}"
       >
-        <bd-p kind="small">You can renew from your Bitdefender Central account at any time.</bd-p>
+        <bd-p variant="small">You can renew from your Bitdefender Central account at any time.</bd-p>
       </bd-light-carousel-item>
     </bd-light-carousel-section>
   `,
@@ -507,20 +551,20 @@ export const PlaygroundSimple = {
     icon     : '/assets/light-carousel-img1.png'
   },
   render: (args) => html`
-    <bd-light-carousel-simple-section title="${args.title}">
-      <bd-light-carousel-simple-item
+    <bd-light-carousel-section variant="simple" title="${args.title}">
+      <bd-light-carousel-item variant="simple"
         title="${args.itemTitle}"
         icon="${args.icon}"
       >
-        <bd-p kind="small">Specialized AI chatbot that helps you identify suspicious online interactions.</bd-p>
-      </bd-light-carousel-simple-item>
-      <bd-light-carousel-simple-item
+        <bd-p variant="small">Specialized AI chatbot that helps you identify suspicious online interactions.</bd-p>
+      </bd-light-carousel-item>
+      <bd-light-carousel-item variant="simple"
         title="Scam Wave Alerts"
         icon="${args.icon}"
       >
-        <bd-p kind="small">Real-time alerts about ongoing scam outbreaks detected in your area.</bd-p>
-      </bd-light-carousel-simple-item>
-    </bd-light-carousel-simple-section>
+        <bd-p variant="small">Real-time alerts about ongoing scam outbreaks detected in your area.</bd-p>
+      </bd-light-carousel-item>
+    </bd-light-carousel-section>
   `,
   parameters: {
     docs: {