@repobit/dex-system-design 0.24.20 → 0.25.0

package/CHANGELOG.md

@@ -3,6 +3,13 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.25.0](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.24.20...@repobit/dex-system-design@0.25.0) (2026-09-25)
+
+### Features
+
+* **DEX-28731:** add align-rows subgrid option to card section
+
+
 ## [0.24.20](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.24.19...@repobit/dex-system-design@0.24.20) (2026-09-24)
 
 ### Bug Fixes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@repobit/dex-system-design",
-  "version": "0.24.20",
+  "version": "0.25.0",
   "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.36",
-    "@repobit/dex-store-elements": "2.1.6",
+    "@repobit/dex-store": "1.6.37",
+    "@repobit/dex-store-elements": "2.1.7",
     "lit": "^3.3.2"
   },
   "devDependencies": {
@@ -94,5 +94,5 @@
   "volta": {
     "node": "24.14.0"
   },
-  "gitHead": "c5b184f2837dad5acab88a931b12d3d51121ed57"
+  "gitHead": "1e626106ffdf4df5443c8da6fa45fa4dae48a2c7"
 }

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

@@ -260,6 +260,68 @@ export default css`
     display: none;
   }
 
+  /* === ALIGN ROWS — opt-in with align-rows on bd-card-section. The track is
+     a grid and every card is a subgrid spanning the same rows (header, title,
+     one per content node, CTA), so rows line up across cards even when their
+     content wraps differently. Row counts come from _syncAlignRows(). Row gaps
+     between tracks stay 0 so spacing inside cards is unchanged; spacing
+     between wrapped card rows comes from the item margin instead. === */
+  @media (min-width: 769px) {
+    :host([align-rows]) .bd-light-carousel-track-s {
+      display: grid;
+      grid-template-columns: repeat(var(--bd-card-cols), minmax(0, 1fr));
+      column-gap: 1.5rem;
+      row-gap: 0;
+      margin-bottom: -1.5rem;
+    }
+
+    :host([align-rows]) ::slotted(bd-card-item) {
+      display: grid;
+      grid-template-rows: subgrid;
+      grid-row: span var(--bd-card-rows, 4);
+      width: auto;
+      min-width: 0;
+      margin: 0 0 1.5rem !important;
+    }
+
+    :host([align-rows]) .bd-light-box-s {
+      display: grid;
+      grid-template-rows: subgrid;
+      grid-row: 1 / -1;
+      row-gap: 0;
+      /* center/outline boxes force flex centering with !important; in grid
+         those would center items vertically and shrink the column */
+      align-items: start !important;
+      justify-content: normal !important;
+      align-content: start;
+    }
+
+    :host([align-rows]) .bd-light-box-header-s {
+      grid-row: 1;
+    }
+
+    :host([align-rows]) .bd-light-title-badge-wrapper-s {
+      grid-row: 2;
+    }
+
+    :host([align-rows]) .bd-card-content-wrapper {
+      display: grid;
+      grid-template-rows: subgrid;
+      grid-row: 3 / span var(--bd-card-content-rows, 1);
+      row-gap: 0;
+      align-items: start;
+    }
+
+    :host([align-rows]) .bd-light-box-center .bd-card-content-wrapper,
+    :host([align-rows]) .bd-light-box-outline .bd-card-content-wrapper {
+      justify-items: center;
+    }
+
+    :host([align-rows]) .bd-card-cta-wrapper {
+      grid-row: -2;
+    }
+  }
+
 
   @media (max-width: 768px) {
     .bd-light-carousel-track-s {

package/src/components/cards/card.js

@@ -16,6 +16,10 @@ class Card extends LitElement {
     // on the section, unless a specific item needs to opt out by setting
     // its own variant attribute explicitly.
     variant   : { type: String, reflect: true },
+    // Opt-in: lays the cards out on a CSS grid and makes every card a subgrid,
+    // so icon, title, each content row and CTA line up across cards (desktop
+    // only). Replaces the JS height equalization for this section.
+    alignRows : { type: Boolean, reflect: true, attribute: "align-rows" },
     _itemCount: { state: true }
   };
 
@@ -25,8 +29,10 @@ class Card extends LitElement {
     this.subtitle        = "";
     this.bgBlue          = false;
     this.variant         = "";
+    this.alignRows       = false;
     this._itemCount      = 0;
     this._resizeObserver = null;
+    this._mutationObserver = null;
   }
 
   _isVisible() {
@@ -72,16 +78,51 @@ class Card extends LitElement {
     });
   }
 
+  // Mirrors align-rows onto every item (their shadow styles key off it) and
+  // sizes the shared row tracks: header, title, the longest content list, CTA.
+  _syncAlignRows() {
+    const items = [...this.querySelectorAll("bd-card-item")];
+    items.forEach((item) => item.toggleAttribute("align-rows", this.alignRows));
+    if (!this.alignRows) return;
+
+    const contentRows = Math.max(0, ...items.map((item) => item._contentNodes?.().length ?? 0));
+    this.style.setProperty("--bd-card-content-rows", contentRows);
+    this.style.setProperty("--bd-card-rows", contentRows + 3);
+  }
+
+  updated(changed) {
+    if (!changed.has("alignRows")) return;
+    this._syncAlignRows();
+    if (this.alignRows) this._clearEqualizedHeights();
+    else this._equalizeHeights();
+  }
+
+  // Removes the inline heights written by _equalizeHeights (e.g. when
+  // align-rows is switched on after the section already rendered).
+  _clearEqualizedHeights() {
+    this.querySelectorAll("bd-card-item").forEach((item) => {
+      const root = item.renderRoot;
+      if (!root) return;
+      [".bd-light-box-s", ".bd-light-box-header-s", ".bd-light-title-badge-wrapper-s", ".bd-card-content-wrapper"]
+        .forEach((selector) => {
+          const el = root.querySelector(selector);
+          if (el) { el.style.height = ""; el.style.minHeight = ""; }
+        });
+    });
+  }
+
   _onSlotChange = () => {
     this._itemCount = this.querySelectorAll("bd-card-item").length;
     this._propagateVariant();
+    this._syncAlignRows();
     this._updateCardWidth();
     this.requestUpdate();
     this._equalizeHeights();
   }
 
   _equalizeHeights() {
-    if (!this._isVisible()) return;
+    // align-rows sizes cards with subgrid; inline heights would fight it
+    if (this.alignRows || !this._isVisible()) return;
 
     const items = Array.from(this.querySelectorAll("bd-card-item"));
     if (!items.length) return;
@@ -187,6 +228,7 @@ class Card extends LitElement {
 
     await new Promise(r => requestAnimationFrame(() => requestAnimationFrame(r)));
     this._propagateVariant();
+    this._syncAlignRows();
     this._updateCardWidth();
     this._equalizeHeights();
 
@@ -198,11 +240,17 @@ class Card extends LitElement {
       });
       this._resizeObserver.observe(track);
     }
+
+    // Content added to or removed from an item changes its row count, which
+    // doesn't trigger slotchange on the section.
+    this._mutationObserver = new MutationObserver(() => this._syncAlignRows());
+    this._mutationObserver.observe(this, { childList: true, subtree: true });
   }
 
   disconnectedCallback() {
     super.disconnectedCallback();
     this._resizeObserver?.disconnect();
+    this._mutationObserver?.disconnect();
   }
 
   render() {
@@ -255,7 +303,7 @@ class CardItem extends LitElement {
     this.icon     = "";
     this.align    = "start";
     this.bgBlue   = false;
-    this.ctaAlign = "start";
+    this.ctaAlign = "";
     this.variant  = "";
   }
 
@@ -310,16 +358,19 @@ class CardItem extends LitElement {
 
     return "";
   }
-  _hasContent() {
-    const slottedNodes = [...this.childNodes].filter((node) => {
+  // Nodes rendered in the default slot — each one is a content row
+  _contentNodes() {
+    return [...this.childNodes].filter((node) => {
       if (node.nodeType === Node.ELEMENT_NODE) {
         const slot = node.getAttribute("slot");
         return slot !== "icon" && slot !== "cta";
       }
       return node.nodeType === Node.TEXT_NODE && node.textContent.trim() !== "";
     });
+  }
 
-    return slottedNodes.length > 0;
+  _hasContent() {
+    return this._contentNodes().length > 0;
   }
 
   render() {
@@ -327,9 +378,10 @@ class CardItem extends LitElement {
     const isCentered = this.align === "center" || isOutline;
     const hasContent = this._hasContent();
     const hasCtaSlot = !!this.querySelector("[slot='cta']");
-    const ctaJustify = this.ctaAlign === "center"
+    const ctaAlign   = this.ctaAlign || (isCentered ? "center" : "start");
+    const ctaJustify = ctaAlign === "center"
       ? "justify-content: center;"
-      : this.ctaAlign === "end"
+      : ctaAlign === "end"
         ? "justify-content: flex-end;"
         : "justify-content: flex-start;";
 

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

@@ -34,6 +34,13 @@ to a bordered, light-blue-tinted, centered card style (blue title, centered
 icon/text) — set it once on the section, it propagates to all items
 automatically. Leaving \`variant\` unset keeps the existing grey-box look.
 An individual \`bd-card-item\` can opt out with \`variant=""\` explicitly.
+
+### Align rows
+\`align-rows\` on \`bd-card-section\` lays the cards out with CSS subgrid
+(above 768px): icon, title, each content element and the CTA line up across
+cards, even when one card's text wraps to more lines. It replaces the JS
+height equalization for that section. Note: an incomplete last row is
+left-aligned instead of centered.
         `
       }
     }
@@ -250,6 +257,81 @@ export const WithCTA = {
   parameters: { docs: { description: { story: 'Cards cu buton CTA via `slot="cta"`.' } } }
 };
 
+// ─── Align Rows ───────────────────────────────────────────────────────────────
+
+const alignRowsIcons = [
+  html`<bd-individual-icon slot="icon" width="32" height="32" color="#006DFF"></bd-individual-icon>`,
+  html`<bd-globe-icon slot="icon" width="32" height="32" color="#006DFF"></bd-globe-icon>`,
+  html`<bd-machine-learning-icon slot="icon" width="32" height="32" color="#006DFF"></bd-machine-learning-icon>`,
+  html`<bd-analysis-icon slot="icon" width="32" height="32" color="#006DFF"></bd-analysis-icon>`
+];
+
+// Store badges rendered as linked pictures (a content row), like on product pages
+const storeBadges = [
+  { src: '/images/badges/google-play-badge.png', alt: 'Get it on Google Play' },
+  { src: '/images/badges/app-store-badge.png', alt: 'Download on the App Store' }
+];
+
+const storeBadge = (n) => {
+  const badge = storeBadges[(n - 1) % storeBadges.length];
+  return html`
+    <a href="#" style="display: block;">
+      <img src="${badge.src}" alt="${badge.alt}" width="188" height="56" style="display: block; width: auto; height: 56px;" />
+    </a>
+  `;
+};
+
+export const AlignRows = {
+  name: 'Align Rows (subgrid)',
+  args: {
+    alignRows : true,
+    align     : 'center',
+    variant   : '',
+    showCta   : true,
+    showBadges: true,
+    card1Title: 'Antivirus Free for Android',
+    card1Text : 'Blocks malware on your phone.',
+    card1Extra: 'No cost, no catch.',
+    card2Title: 'Virus Scanner for Mac',
+    card2Text : 'Catches Mac and Windows malware alike, including threats hiding in email attachments and downloads.',
+    card2Extra: 'Free. Forever.',
+    card3Title: 'Security for iOS, iPhone and iPad devices',
+    card3Text : 'Web protection.',
+    card3Extra: 'Free for iPhone and iPad.',
+    card4Title: '',
+    card4Text : '',
+    card4Extra: ''
+  },
+  argTypes: {
+    alignRows : { control: 'boolean', description: '`align-rows` on bd-card-section — toggle to compare with the JS height equalization' },
+    align     : { control: { type: 'select' }, options: ['start', 'center'], description: 'bd-card-item align' },
+    variant   : { control: { type: 'select' }, options: ['', 'outline'], description: 'bd-card-section variant' },
+    showCta   : { control: 'boolean', description: 'Render a CTA (slot="cta") in every card' },
+    showBadges: { control: 'boolean', description: 'Render a store badge (linked picture) as the last content row — Google Play / App Store alternating' },
+    ...Object.fromEntries([1, 2, 3, 4].flatMap((n) => [
+      [`card${n}Title`, { control: 'text', table: { category: `Card ${n}` }, description: n === 4 ? 'Leave empty to hide card 4' : 'Card title' }],
+      [`card${n}Text`, { control: 'text', table: { category: `Card ${n}` }, description: 'First content row (bd-p)' }],
+      [`card${n}Extra`, { control: 'text', table: { category: `Card ${n}` }, description: 'Second content row (bd-p) — leave empty to omit' }]
+    ]))
+  },
+  render: (args) => html`
+    <bd-card-section title="Also free" variant="${args.variant}" ?align-rows=${args.alignRows}>
+      ${[1, 2, 3, 4]
+        .filter((n) => args[`card${n}Title`])
+        .map((n) => html`
+          <bd-card-item align="${args.align}" title="${args[`card${n}Title`]}">
+            ${alignRowsIcons[n - 1]}
+            ${args[`card${n}Text`] ? html`<bd-p>${args[`card${n}Text`]}</bd-p>` : ''}
+            ${args[`card${n}Extra`] ? html`<bd-p>${args[`card${n}Extra`]}</bd-p>` : ''}
+            ${args.showBadges ? storeBadge(n) : ''}
+            ${args.showCta ? html`<bd-button-link slot="cta" href="#" kind="primary" size="sm">Get it free</bd-button-link>` : ''}
+          </bd-card-item>
+        `)}
+    </bd-card-section>
+  `,
+  parameters: { docs: { description: { story: 'With `align-rows`, each row (icon, title, every content element, CTA) has the same height across cards, via CSS subgrid. Use the controls to toggle it and change card content. Rows only align above 768px — widen the canvas.' } } }
+};
+
 // ─── No Slotted Content ───────────────────────────────────────────────────────
 
 export const NoSlottedContent = {
@@ -390,13 +472,18 @@ export const Playground = {
     itemTitle      : 'AI Protection',
     align          : 'start',
     bgBlue         : false,
-    ctaAlign       : 'start'
+    ctaAlign       : ''
   },
   argTypes: {
     sectionVariant: {
       control    : { type: 'select' },
       options    : ['', 'outline'],
       description: 'bd-card-section variant — propagates to all items'
+    },
+    ctaAlign: {
+      control    : { type: 'select' },
+      options    : ['', 'start', 'center', 'end'],
+      description: 'bd-card-item cta-align — empty follows align'
     }
   },
   render: (args) => html`