@repobit/dex-system-design 0.23.73 → 0.23.75

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.23.75](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.23.74...@repobit/dex-system-design@0.23.75) (2026-07-13)
+
+### Bug Fixes
+
+* **DEX-1014:** card buttons alignment and button adjustments
+
+
+## [0.23.74](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.23.73...@repobit/dex-system-design@0.23.74) (2026-07-10)
+
+### Bug Fixes
+
+* **DEX-1014:** card adjustment
+
+
 ## [0.23.73](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.23.72...@repobit/dex-system-design@0.23.73) (2026-07-08)
 
 ### Bug Fixes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@repobit/dex-system-design",
-  "version": "0.23.73",
+  "version": "0.23.75",
   "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.3.69",
-    "@repobit/dex-store-elements": "1.4.61",
+    "@repobit/dex-store": "1.3.71",
+    "@repobit/dex-store-elements": "1.4.63",
     "lit": "^3.3.2"
   },
   "devDependencies": {
@@ -92,5 +92,5 @@
   "volta": {
     "node": "24.14.0"
   },
-  "gitHead": "c2b31338e7ca8c4e8cc49cd4e7ed95419f23b369"
+  "gitHead": "e62afb598b7d85b829e705e49ebd60207d46057c"
 }

package/src/components/Button/Button.js

@@ -12,7 +12,8 @@ class Button extends LitElement {
     fullWidth  : { type: Boolean },
     strong     : { type: Boolean },
     fontSize   : { type: String, attribute: "font-size" },
-    fontWeight : { type: String, attribute: "font-weight" }
+    fontWeight : { type: String, attribute: "font-weight" },
+    align      : { type: String }
   };
 
   constructor() {
@@ -22,6 +23,7 @@ class Button extends LitElement {
     this.size = "md";
     this.fontSize = "";
     this.fontWeight = "";
+    this.align = "left";
   }
 
   _onFocusin(e) {
@@ -112,7 +114,8 @@ class ButtonLink extends LitElement {
     fontSize   : { type: String, attribute: "font-size" },
     fontWeight : { type: String, attribute: "font-weight" },
     buyLink    : { type: Boolean },
-    shadow     : { type: Boolean, reflect: true }
+    shadow     : { type: Boolean, reflect: true },
+    align      : { type: String }
   };
 
   constructor() {
@@ -127,6 +130,7 @@ class ButtonLink extends LitElement {
     this.fontWeight = "";
     this.buyLink = false;
     this.shadow = true;
+    this.align = "left";
   }
 
   _onFocusin(e) {
@@ -211,13 +215,15 @@ class ButtonLink extends LitElement {
 class ContactButton extends LitElement {
   static properties = {
     label: { type: String },
-    href : { type: String }
+    href : { type: String },
+    align: { type: String }
   };
 
   constructor() {
     super();
     this.label = "Contact us";
     this.href = "https://www.google.com";
+    this.align = "left";
   }
 
   _onFocusin(e) {
@@ -266,4 +272,4 @@ ContactButton.styles = [tokens, buttonsCSS];
 
 customElements.define("bd-button", Button);
 customElements.define("bd-button-link", ButtonLink);
-customElements.define("bd-contact-button", ContactButton);
+customElements.define("bd-contact-button", ContactButton);

package/src/components/Button/button.css.js

@@ -29,16 +29,43 @@ export default css`
     --bd-accesibility-focus: var(--color-blue-500);
   }
 
-    :host([fullwidth]) {
-      display: block;
-      width: 100%;
-    }
+  /* ============================================
+     ALIGNMENT SUPPORT
+     ============================================ */
+  
+  :host([align="center"]) {
+    display: flex;
+    justify-content: center;
+    width: 100%;
+  }
 
-    .max--width {
-      width: 100%;
-      display: flex;
-    }
-    :host([data-bd-button-focus]) {
+  :host([align="right"]) {
+    display: flex;
+    justify-content: flex-end;
+    width: 100%;
+  }
+
+  :host([align="left"]) {
+    display: inline-flex;
+    justify-content: flex-start;
+  }
+
+  :host([fullwidth]) {
+    display: block;
+    width: 100%;
+  }
+
+  :host([align="center"][fullwidth]) .button,
+  :host([align="right"][fullwidth]) .button {
+    width: 100%;
+  }
+
+  .max--width {
+    width: 100%;
+    display: flex;
+  }
+
+  :host([data-bd-button-focus]) {
     outline: var(--spacing-2) solid var(--bd-accesibility-focus);
     outline-offset: var(--spacing-2);
     border-radius: var(--radius-md);
@@ -55,6 +82,7 @@ export default css`
   a.button {
     text-decoration: none;
   }
+
   .button,
   .bd-contact-btn {
     display: inline-flex;
@@ -119,23 +147,28 @@ export default css`
     border: var(--border-width-2) solid var(--border-button-background-outline);
     color: var(--color-button-background-outline);
   }
+
   .button--outline:hover {
     background-color: var(--button-background-outline-hover);
     border: var(--border-width-2) solid var(--border-button-background-outline-hover);
   }
+
   .button--outline:active {
     background-color: var(--button-background-outline-focus);
     color: var(--color-neutral-0);
   }
+
   .button--primary--outline {
     background-color: transparent;
     border: var(--border-width-2) solid var(--border-button-background-primary-outline);
     color: var(--color-button-background-primary-outline);
   }
+
   .button--primary--outline:hover {
     background-color: var(--button-background-primary-outline-hover);
     border: var(--border-width-2) solid var(--border-button-background-primary-outline-hover);
   }
+
   .button--primary--outline:active {
     background-color: var(--button-background-primary-outline-focus);
     color: var(--color-neutral-0);
@@ -175,8 +208,6 @@ export default css`
     font-weight: var(--typography-fontWeight-semibold);
   }
 
- 
-  /* Asigură-te că slot-ul ocupă întreg spațiul */
   .button > ::slotted(*) {
     display: inline-block;
     width: 100%;
@@ -188,4 +219,4 @@ export default css`
       transition: none !important;
     }
   }
-`;
+`;

package/src/components/Button/button.stories.js

@@ -37,6 +37,13 @@ Three button components are available:
 | \`md\` | \`button--medium\` |
 | \`lg\` | \`button--large\` |
 
+### Alignment Values
+| Align | Effect |
+|---|---|
+| \`left\` | Aligns button to the left (default) |
+| \`center\` | Centers button horizontally |
+| \`right\` | Aligns button to the right |
+
 ### Events
 - \`custom-click\` — dispatched on click or Enter/Space keypress
         `
@@ -71,6 +78,12 @@ Three button components are available:
       description: 'Applies bold font weight via `button--bold` class',
       table      : { type: { summary: 'boolean' }, defaultValue: { summary: 'false' }, category: 'Appearance' }
     },
+    align: {
+      control    : { type: 'select' },
+      options    : ['left', 'center', 'right'],
+      description: 'Horizontal alignment of the button',
+      table      : { type: { summary: "'left' | 'center' | 'right'" }, defaultValue: { summary: 'left' }, category: 'Layout' }
+    },
     fontSize: {
       control    : 'text',
       description: 'Inline font-size override (e.g. "18px")',
@@ -100,8 +113,14 @@ Three button components are available:
 };
 
 const defaultArgs = {
-  label     : 'Buy now', kind      : 'primary', size      : 'md',
-  fullWidth : false, strong    : false, fontSize  : '', fontWeight: ''
+  label     : 'Buy now',
+  kind      : 'primary',
+  size      : 'md',
+  fullWidth : false,
+  strong    : false,
+  align     : 'left',
+  fontSize  : '',
+  fontWeight: ''
 };
 
 // ─── bd-button Stories ─────────────────────────────────────────────────────
@@ -159,6 +178,44 @@ export const ButtonStrong = {
   parameters: { docs: { description: { story: 'Comparison between normal and `strong` (bold) button.' } } }
 };
 
+export const ButtonAlignCenter = {
+  name  : 'Button — Align Center',
+  render: () => html`
+    <div style="width:100%;">
+      <bd-button kind="primary" size="md" align="center">Centered Button</bd-button>
+    </div>
+  `,
+  parameters: { docs: { description: { story: 'Button centered horizontally using `align="center"`.' } } }
+};
+
+export const ButtonAlignRight = {
+  name  : 'Button — Align Right',
+  render: () => html`
+    <div style="width:100%;">
+      <bd-button kind="danger" size="md" align="right">Right Aligned Button</bd-button>
+    </div>
+  `,
+  parameters: { docs: { description: { story: 'Button aligned to the right using `align="right"`.' } } }
+};
+
+export const ButtonAllAlignments = {
+  name  : 'Button — All Alignments',
+  render: () => html`
+    <div style="width:100%; max-width:600px; display:flex; flex-direction:column; gap:16px;">
+      <div style="border:1px dashed #ccc; padding:12px; border-radius:4px;">
+        <bd-button kind="primary" size="md" align="left">Left (default)</bd-button>
+      </div>
+      <div style="border:1px dashed #ccc; padding:12px; border-radius:4px;">
+        <bd-button kind="primary" size="md" align="center">Center</bd-button>
+      </div>
+      <div style="border:1px dashed #ccc; padding:12px; border-radius:4px;">
+        <bd-button kind="primary" size="md" align="right">Right</bd-button>
+      </div>
+    </div>
+  `,
+  parameters: { docs: { description: { story: 'All three alignment variants side by side for comparison.' } } }
+};
+
 export const ButtonCustomTypography = {
   name  : 'Button — Custom Font Size & Weight',
   render: () => html`
@@ -236,6 +293,30 @@ export const ButtonLinkFullWidth = {
   parameters: { docs: { description: { story: 'Full-width `bd-button-link`.' } } }
 };
 
+export const ButtonLinkAlignCenter = {
+  name  : 'ButtonLink — Align Center',
+  render: () => html`
+    <div style="width:100%;">
+      <bd-button-link kind="primary" size="md" href="#" align="center">
+        Centered Link Button
+      </bd-button-link>
+    </div>
+  `,
+  parameters: { docs: { description: { story: 'ButtonLink centered horizontally using `align="center"`.' } } }
+};
+
+export const ButtonLinkAlignRight = {
+  name  : 'ButtonLink — Align Right',
+  render: () => html`
+    <div style="width:100%;">
+      <bd-button-link kind="danger" size="md" href="#" align="right">
+        Right Aligned Link Button
+      </bd-button-link>
+    </div>
+  `,
+  parameters: { docs: { description: { story: 'ButtonLink aligned to the right using `align="right"`.' } } }
+};
+
 export const ButtonLinkCustomTypography = {
   name  : 'ButtonLink — Custom Typography',
   render: () => html`
@@ -272,6 +353,26 @@ export const ContactButtonCustomHref = {
   parameters: { docs: { description: { story: 'Contact button linking to an external support URL.' } } }
 };
 
+export const ContactButtonAlignCenter = {
+  name  : 'ContactButton — Align Center',
+  render: () => html`
+    <div style="width:100%;">
+      <bd-contact-button label="Contact us" href="#" align="center"></bd-contact-button>
+    </div>
+  `,
+  parameters: { docs: { description: { story: 'Contact button centered horizontally using `align="center"`.' } } }
+};
+
+export const ContactButtonAlignRight = {
+  name  : 'ContactButton — Align Right',
+  render: () => html`
+    <div style="width:100%;">
+      <bd-contact-button label="Contact us" href="#" align="right"></bd-contact-button>
+    </div>
+  `,
+  parameters: { docs: { description: { story: 'Contact button aligned to the right using `align="right"`.' } } }
+};
+
 // ─── Combined Story ────────────────────────────────────────────────────────
 
 export const AllButtonTypes = {
@@ -290,15 +391,18 @@ export const Playground = {
   name  : '🛝 Playground',
   args  : { ...defaultArgs },
   render: (args) => html`
-    <bd-button
-      kind="${args.kind}"
-      size="${args.size}"
-      label="${args.label}"
-      ?full-width="${args.fullWidth}"
-      ?strong="${args.strong}"
-      font-size="${args.fontSize}"
-      font-weight="${args.fontWeight}"
-    >${args.label}</bd-button>
+    <div style="width:100%;">
+      <bd-button
+        kind="${args.kind}"
+        size="${args.size}"
+        label="${args.label}"
+        align="${args.align}"
+        ?full-width="${args.fullWidth}"
+        ?strong="${args.strong}"
+        font-size="${args.fontSize}"
+        font-weight="${args.fontWeight}"
+      >${args.label}</bd-button>
+    </div>
   `,
-  parameters: { docs: { description: { story: 'Interactive playground for `bd-button`. Use Controls to adjust all props.' } } }
+  parameters: { docs: { description: { story: 'Interactive playground for `bd-button`. Use Controls to adjust all props including alignment.' } } }
 };

package/src/components/cards/card.css.js

@@ -12,22 +12,33 @@ export default css`
   ::slotted([slot="icon"]) {
     max-width: 120px !important;
     max-height: 120px !important;
-    width: auto !important;
-    height: auto !important;
     object-fit: contain !important;
     display: block !important;
-    border-radius: var(--spacing-20);
   }
 
   .bd-section-title-s {
     font-family: var(--typography-fontFamily-sans);
     font-weight: var(--typography-fontWeight-semibold);
     font-size: 2em;
+    text-align: center;
+    margin: 0;
+  }
+
+  .bd-section-subtitle-s {
+    font-family: var(--typography-fontFamily-sans);
+    font-size: var(--typography-body-regular-fontSize);
+    color: var(--color-neutral-700);
+    text-align: center;
+    margin: var(--spacing-8) 0 0 0;
   }
 
   .bd-header-light-carousel-s {
-    margin-bottom: 50px;
-    margin-top: 50px;
+    margin-bottom: var(--spacing-48);
+    margin-top: var(--spacing-48);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--spacing-8);
   }
 
   .bd-light-carousel-s {
@@ -41,16 +52,6 @@ export default css`
     margin: 0 auto;
   }
 
-  .bd-light-carousel-title-s {
-    font-size: 28px;
-    font-weight: 700;
-    text-align: center;
-    color: #e4002b;
-    margin-bottom: 32px;
-    text-transform: uppercase;
-    letter-spacing: 0.5px;
-  }
-
   .bd-light-carousel-track-s {
     scroll-behavior: smooth;
     flex: 1;
@@ -130,14 +131,14 @@ export default css`
     text-align: center !important;
   }
 
- .bd-light-icon-s {
-  max-width: 120px;
-  max-height: 120px;
-  width: auto;
-  height: auto;
-  object-fit: contain;
-  display: block;
-}
+  .bd-light-icon-s {
+    max-width: 120px;
+    max-height: 120px;
+    width: auto;
+    height: auto;
+    object-fit: contain;
+    display: block;
+  }
 
   .bd-light-box-no-content .bd-light-icon-s {
     margin: 0 !important;
@@ -170,6 +171,22 @@ export default css`
     gap: var(--spacing-4, 4px);
     overflow: hidden;
     margin-bottom: var(--spacing-8);
+    width: 100%;
+  }
+
+  .bd-card-title-group {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-4);
+    width: 100%;
+  }
+
+  .bd-card-item-subtitle {
+    font-family: var(--typography-fontFamily-sans);
+    font-size: var(--typography-fontSize-sm);
+    color: var(--color-neutral-600);
+    margin: 0;
+    line-height: var(--typography-lineHeight-normal);
   }
 
   .bd-light-title-no-content {
@@ -190,6 +207,7 @@ export default css`
     padding-top: var(--spacing-8);
     display: flex;
     align-items: flex-start;
+    width: 100%;
   }
 
   .bd-card-cta-wrapper:empty {

package/src/components/cards/card.js

@@ -7,12 +7,14 @@ import carouselCSS from "./card.css.js";
 class Card extends LitElement {
   static properties = {
     title     : { type: String },
+    subtitle  : { type: String },
     _itemCount: { state: true }
   };
 
   constructor() {
     super();
     this.title           = "";
+    this.subtitle        = "";
     this._itemCount      = 0;
     this._resizeObserver = null;
   }
@@ -144,13 +146,18 @@ class Card extends LitElement {
   render() {
     return html`
       <section class="bd-light-carousel-s">
-        ${this.title
+        ${this.title || this.subtitle
           ? html`
               <div class="bd-header-light-carousel-s">
-                <bd-h as="h1" class="bd-section-title-s">${this.title}</bd-h>
+                ${this.title
+                  ? html`<bd-h as="h1" class="bd-section-title-s">${this.title}</bd-h>`
+                  : ""}
+                ${this.subtitle
+                  ? html`<p class="bd-section-subtitle-s">${this.subtitle}</p>`
+                  : ""}
               </div>
             `
-          : null}
+          : ""}
         <div
           class="bd-light-carousel-track-s"
           style="grid-template-columns: repeat(${this._itemCount || 1}, 1fr);"
@@ -164,16 +171,18 @@ class Card extends LitElement {
 
 class CardItem extends LitElement {
   static properties = {
-    title: { type: String },
-    icon : { type: String },
-    align: { type: String }
+    title   : { type: String },
+    icon    : { type: String },
+    align   : { type: String },
+    ctaAlign: { type: String, attribute: "cta-align" }
   };
 
   constructor() {
     super();
-    this.title = "";
-    this.icon  = "";
-    this.align = "start";
+    this.title    = "";
+    this.icon     = "";
+    this.align    = "start";
+    this.ctaAlign = "start";
   }
 
   _renderIcon() {
@@ -181,20 +190,25 @@ class CardItem extends LitElement {
 
     if (iconEl) {
       const clone = iconEl.cloneNode(true);
+
+      const originalW = iconEl.getAttribute("width");
+      const originalH = iconEl.getAttribute("height");
+
       clone.style.maxWidth  = "120px";
       clone.style.maxHeight = "120px";
-      clone.style.width     = "auto";
-      clone.style.height    = "auto";
+      clone.style.width     = originalW ? `${originalW}px` : "auto";
+      clone.style.height    = originalH ? `${originalH}px` : "auto";
       clone.style.objectFit = "contain";
       clone.style.display   = "block";
 
-      // Aplica si pe img din interior (ex: picture > img)
       const innerImg = clone.querySelector("img");
       if (innerImg) {
+        const imgW = innerImg.getAttribute("width");
+        const imgH = innerImg.getAttribute("height");
         innerImg.style.maxWidth  = "120px";
         innerImg.style.maxHeight = "120px";
-        innerImg.style.width     = "auto";
-        innerImg.style.height    = "auto";
+        innerImg.style.width     = imgW ? `${Math.min(parseInt(imgW), 120)}px` : "auto";
+        innerImg.style.height    = imgH ? `${Math.min(parseInt(imgH), 120)}px` : "auto";
         innerImg.style.objectFit = "contain";
         innerImg.style.display   = "block";
         innerImg.removeAttribute("width");
@@ -206,10 +220,10 @@ class CardItem extends LitElement {
 
     if (this.icon) {
       return html`<img
-      src="${this.icon}"
-      alt="icon"
-      class="bd-light-icon-s"
-    />`;
+        src="${this.icon}"
+        alt="icon"
+        class="bd-light-icon-s"
+      />`;
     }
 
     return "";
@@ -230,14 +244,21 @@ class CardItem extends LitElement {
   render() {
     const isCentered = this.align === "center";
     const hasContent = this._hasContent();
+    const ctaJustify = this.ctaAlign === "center"
+      ? "justify-content: center;"
+      : this.ctaAlign === "end"
+        ? "justify-content: flex-end;"
+        : "justify-content: flex-start;";
 
     return html`
       <div class="bd-light-box-s ${isCentered ? "bd-light-box-center" : ""} ${!hasContent ? "bd-light-box-no-content" : ""}">
 
+        <!-- Icon -->
         <div class="bd-light-box-header-s ${isCentered ? "bd-light-box-header-center" : ""}">
           ${this._renderIcon()}
         </div>
 
+        <!-- Title -->
         ${this.title
           ? html`
               <div class="bd-light-title-badge-wrapper-s ${!hasContent ? "bd-light-title-no-content" : ""}">
@@ -246,11 +267,13 @@ class CardItem extends LitElement {
             `
           : ""}
 
+        <!-- Content -->
         <div class="bd-card-content-wrapper">
           <slot></slot>
         </div>
 
-        <div class="bd-card-cta-wrapper">
+        <!-- CTA Button -->
+        <div class="bd-card-cta-wrapper" style="${ctaJustify}">
           <slot name="cta"></slot>
         </div>
 

package/src/components/cards/card.stories.js

@@ -1,5 +1,5 @@
 import { html } from 'lit';
-import '../button/button.js';
+import '../Button/Button.js';
 import '../heading/heading.js';
 import '../icons/analysis-icon.js';
 import '../icons/arrow-up-icon.js';
@@ -19,12 +19,12 @@ export default {
         component: `
 **Card** and **CardItem** are Lit components for a static card grid layout.
 
-- \`<bd-card-section>\` — a section wrapper with an optional title and a grid track
+- \`<bd-card-section>\` — a section wrapper with an optional title and subtitle for the section
 - \`<bd-card-item>\` — individual card with optional icon, title, alignment, slotted content, and CTA button
 
 ### Usage
 \`\`\`html
-<bd-card-section title="Why Bitdefender">
+<bd-card-section title="Why Bitdefender" subtitle="Discover the benefits">
   <bd-card-item title="AI Protection" align="center">
     <bd-individual-icon slot="icon" width="32" height="32" color="#006DFF"></bd-individual-icon>
     <bd-p>Powered by machine learning.</bd-p>
@@ -33,12 +33,11 @@ export default {
 </bd-card-section>
 \`\`\`
 
-### CardItem Slots
-| Slot | Descriere |
-|---|---|
-| \`icon\` | Iconiță sau imagine (max 120x120px automat) |
-| default | Conținut text — \`bd-p\`, liste, etc. |
-| \`cta\` | Buton CTA jos stânga — \`bd-button-link\` sau \`bd-button\` |
+### CardSection Props
+| Prop | Valori | Default |
+|---|---|---|
+| \`title\` | String | \`''\` |
+| \`subtitle\` | String | \`''\` |
 
 ### CardItem Props
 | Prop | Valori | Default |
@@ -46,6 +45,13 @@ export default {
 | \`title\` | String | \`''\` |
 | \`align\` | \`start\`, \`center\` | \`start\` |
 | \`icon\` | String (path) | \`''\` |
+
+### CardItem Slots
+| Slot | Descriere |
+|---|---|
+| \`icon\` | Iconiță sau imagine (max 120x120px automat) |
+| default | Conținut text — \`bd-p\`, liste, etc. |
+| \`cta\` | Buton CTA jos stânga — \`bd-button-link\` sau \`bd-button\` |
         `
       }
     }
@@ -56,6 +62,11 @@ export default {
       description: 'Optional title for the card section',
       table      : { type: { summary: 'string' }, defaultValue: { summary: '' }, category: 'CardSection' }
     },
+    sectionSubtitle: {
+      control    : 'text',
+      description: 'Optional subtitle for the card section (displayed below title)',
+      table      : { type: { summary: 'string' }, defaultValue: { summary: '' }, category: 'CardSection' }
+    },
     itemTitle: {
       control    : 'text',
       description: 'Title of the card item',
@@ -95,10 +106,56 @@ export const Default = {
   parameters: { docs: { description: { story: 'Four card items with icons, titles, and content.' } } }
 };
 
+export const WithSectionSubtitle = {
+  name  : 'With Section Subtitle',
+  render: () => html`
+    <bd-card-section title="Why Bitdefender" subtitle="Discover the benefits of our award-winning security">
+      <bd-card-item title="AI Protection">
+        <bd-individual-icon slot="icon" width="32" height="32" color="#006DFF"></bd-individual-icon>
+        <bd-p>Powered by machine learning and behavioral analysis.</bd-p>
+      </bd-card-item>
+      <bd-card-item title="Multi-layer Security">
+        <bd-globe-icon slot="icon" width="32" height="32" color="#006DFF"></bd-globe-icon>
+        <bd-p>Multiple independent protection layers stop any attack.</bd-p>
+      </bd-card-item>
+      <bd-card-item title="VPN Included">
+        <bd-machine-learning-icon slot="icon" width="32" height="32" color="#006DFF"></bd-machine-learning-icon>
+        <bd-p>Unlimited encrypted VPN traffic for all your devices.</bd-p>
+      </bd-card-item>
+      <bd-card-item title="Parental Controls">
+        <bd-analysis-icon slot="icon" width="32" height="32" color="#006DFF"></bd-analysis-icon>
+        <bd-p>Advanced controls to protect your children online.</bd-p>
+      </bd-card-item>
+    </bd-card-section>
+  `,
+  parameters: { docs: { description: { story: 'Section with both title and subtitle above the cards.' } } }
+};
+
+export const SectionSubtitleOnly = {
+  name  : 'Section Subtitle Only',
+  render: () => html`
+    <bd-card-section subtitle="Discover the benefits of our award-winning security">
+      <bd-card-item title="AI Protection">
+        <bd-individual-icon slot="icon" width="32" height="32" color="#006DFF"></bd-individual-icon>
+        <bd-p>Powered by machine learning and behavioral analysis.</bd-p>
+      </bd-card-item>
+      <bd-card-item title="Multi-layer Security">
+        <bd-globe-icon slot="icon" width="32" height="32" color="#006DFF"></bd-globe-icon>
+        <bd-p>Multiple independent protection layers stop any attack.</bd-p>
+      </bd-card-item>
+      <bd-card-item title="VPN Included">
+        <bd-machine-learning-icon slot="icon" width="32" height="32" color="#006DFF"></bd-machine-learning-icon>
+        <bd-p>Unlimited encrypted VPN traffic for all your devices.</bd-p>
+      </bd-card-item>
+    </bd-card-section>
+  `,
+  parameters: { docs: { description: { story: 'Section with subtitle only (no title).' } } }
+};
+
 export const WithCTA = {
   name  : 'With CTA Button',
   render: () => html`
-    <bd-card-section title="Why Bitdefender">
+    <bd-card-section title="Why Bitdefender" subtitle="Explore our key features">
       <bd-card-item title="AI Protection">
         <bd-individual-icon slot="icon" width="32" height="32" color="#006DFF"></bd-individual-icon>
         <bd-p>Powered by machine learning and behavioral analysis to stop threats before they reach you.</bd-p>
@@ -127,13 +184,13 @@ export const WithCTA = {
 export const WithCTAUnevenContent = {
   name  : 'With CTA — Uneven Content (alignment test)',
   render: () => html`
-    <bd-card-section title="Features">
+    <bd-card-section title="Features" subtitle="Compare our security solutions">
       <bd-card-item title="AI Protection">
         <bd-individual-icon slot="icon" width="32" height="32" color="#006DFF"></bd-individual-icon>
         <bd-p>Powered by machine learning and behavioral analysis to stop threats before they reach you. Our AI engine learns from billions of threat signals every day.</bd-p>
         <bd-button-link slot="cta" href="#" kind="danger" size="sm">Get started</bd-button-link>
       </bd-card-item>
-      <bd-card-item title="Multi-layer Security — Advanced Protection Suite">
+      <bd-card-item title="Multi-layer Security">
         <bd-globe-icon slot="icon" width="32" height="32" color="#006DFF"></bd-globe-icon>
         <bd-p>Stop any attack.</bd-p>
         <bd-button-link slot="cta" href="#" kind="danger" size="sm">Get started</bd-button-link>
@@ -175,13 +232,13 @@ export const NoSectionTitle = {
       </bd-card-item>
     </bd-card-section>
   `,
-  parameters: { docs: { description: { story: 'Section without title prop.' } } }
+  parameters: { docs: { description: { story: 'Section without title or subtitle.' } } }
 };
 
 export const CenteredAlignment = {
   name  : 'Centered Alignment',
   render: () => html`
-    <bd-card-section title="Features">
+    <bd-card-section title="Features" subtitle="All features are centered">
       <bd-card-item title="AI Protection" align="center">
         <bd-individual-icon slot="icon" width="32" height="32" color="#006DFF"></bd-individual-icon>
         <bd-p>Powered by machine learning and behavioral analysis.</bd-p>
@@ -206,7 +263,7 @@ export const CenteredAlignment = {
 export const MixedAlignment = {
   name  : 'Mixed Alignment',
   render: () => html`
-    <bd-card-section title="Mixed Layout">
+    <bd-card-section title="Mixed Layout" subtitle="Different alignment styles">
       <bd-card-item title="Left Aligned" align="start">
         <bd-individual-icon slot="icon" width="32" height="32" color="#006DFF"></bd-individual-icon>
         <bd-p>Default left-aligned content.</bd-p>
@@ -223,7 +280,7 @@ export const MixedAlignment = {
 export const NoIcon = {
   name  : 'No Icons',
   render: () => html`
-    <bd-card-section title="Features">
+    <bd-card-section title="Features" subtitle="Simple text cards without icons">
       <bd-card-item title="AI Protection">
         <bd-p>Powered by machine learning and behavioral analysis.</bd-p>
       </bd-card-item>
@@ -244,7 +301,7 @@ export const NoIcon = {
 export const NoSlottedContent = {
   name  : 'No Slotted Content',
   render: () => html`
-    <bd-card-section title="Features">
+    <bd-card-section title="Features" subtitle="Icons with titles only">
       <bd-card-item title="AI Protection">
         <bd-individual-icon slot="icon" width="32" height="32" color="#006DFF"></bd-individual-icon>
       </bd-card-item>
@@ -277,7 +334,7 @@ export const TitleOnly = {
 export const RichContent = {
   name  : 'Rich Slotted Content',
   render: () => html`
-    <bd-card-section title="Plan Details">
+    <bd-card-section title="Plan Details" subtitle="What's included in each plan">
       <bd-card-item title="What's included">
         <bd-family-icon slot="icon" width="32" height="32" color="#006DFF"></bd-family-icon>
         <bd-p>Antivirus & Anti-malware</bd-p>
@@ -298,7 +355,7 @@ export const RichContent = {
 export const SingleItem = {
   name  : 'Single Item (edge case)',
   render: () => html`
-    <bd-card-section title="Feature">
+    <bd-card-section title="Feature" subtitle="One card only">
       <bd-card-item title="AI Protection">
         <bd-individual-icon slot="icon" width="32" height="32" color="#006DFF"></bd-individual-icon>
         <bd-p>Machine learning-powered protection.</bd-p>
@@ -308,10 +365,11 @@ export const SingleItem = {
   `,
   parameters: { docs: { description: { story: 'Edge case: only one card item.' } } }
 };
+
 export const WithImages = {
   name  : 'With Images (large + small)',
   render: () => html`
-    <bd-card-section title="Our Products">
+    <bd-card-section title="Our Products" subtitle="Choose the right plan for you">
       <bd-card-item title="Total Security">
         <img slot="icon" src="/assets/tabs-img1.png" alt="Total Security" />
         <bd-p>Complete protection for all your devices with advanced threat detection and real-time security updates.</bd-p>
@@ -335,7 +393,7 @@ export const WithImages = {
 export const MixedIconsAndImages = {
   name  : 'Mixed — Icons and Images',
   render: () => html`
-    <bd-card-section title="Mixed Media">
+    <bd-card-section title="Mixed Media" subtitle="SVG icons and images together">
       <bd-card-item title="AI Protection">
         <bd-individual-icon slot="icon" width="32" height="32" color="#006DFF"></bd-individual-icon>
         <bd-p>Powered by machine learning and behavioral analysis.</bd-p>
@@ -360,15 +418,17 @@ export const MixedIconsAndImages = {
   `,
   parameters: { docs: { description: { story: 'Mix of SVG icons and large images in the same grid — tests consistent icon row height equalization.' } } }
 };
+
 export const Playground = {
   name: '🛝 Playground',
   args: {
-    sectionTitle: 'Why Bitdefender',
-    itemTitle   : 'AI Protection',
-    align       : 'start'
+    sectionTitle   : 'Why Bitdefender',
+    sectionSubtitle: 'Discover the benefits of our award-winning security',
+    itemTitle      : 'AI Protection',
+    align          : 'start'
   },
   render: (args) => html`
-    <bd-card-section title="${args.sectionTitle}">
+    <bd-card-section title="${args.sectionTitle}" subtitle="${args.sectionSubtitle}">
       <bd-card-item title="${args.itemTitle}" align="${args.align}">
         <bd-individual-icon slot="icon" width="32" height="32" color="#006DFF"></bd-individual-icon>
         <bd-p>Powered by machine learning and behavioral analysis.</bd-p>
@@ -381,5 +441,5 @@ export const Playground = {
       </bd-card-item>
     </bd-card-section>
   `,
-  parameters: { docs: { description: { story: 'Interactive playground.' } } }
+  parameters: { docs: { description: { story: 'Interactive playground with section subtitle support.' } } }
 };

package/src/components/features-tab/features-tab.js

@@ -1,6 +1,6 @@
 import { LitElement, html } from "lit";
 import { tokens } from "../../tokens/tokens.js";
-import "../button/button.js";
+import "../Button/Button.js";
 import "../heading/heading.js";
 import "../paragraph/paragraph.js";
 import featuresTabCSS from "./features-tab.css.js";

package/src/components/features-tab/features-tab.stories.js

@@ -1,5 +1,5 @@
 import { html } from 'lit';
-import '../button/button.js';
+import '../Button/Button.js';
 import '../heading/heading.js';
 import '../paragraph/paragraph.js';
 import '../tabs/tabs.js';