@repobit/dex-system-design 0.23.79 → 0.23.81

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/package.json +4 -4
  3. package/src/components/cards/card.css.js +21 -25
  4. package/src/components/cards/card.js +25 -24
  5. package/src/components/cards/card.stories.js +200 -134
package/CHANGELOG.md CHANGED
@@ -3,6 +3,20 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## [0.23.81](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.23.80...@repobit/dex-system-design@0.23.81) (2026-07-15)
7
+
8
+ ### Bug Fixes
9
+
10
+ * **DEX-1014:** card adjustments
11
+
12
+
13
+ ## [0.23.80](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.23.79...@repobit/dex-system-design@0.23.80) (2026-07-14)
14
+
15
+ ### Bug Fixes
16
+
17
+ * **DEX-1014:** card adjustments
18
+
19
+
6
20
  ## [0.23.79](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.23.78...@repobit/dex-system-design@0.23.79) (2026-07-14)
7
21
 
8
22
  ### Bug Fixes
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@repobit/dex-system-design",
3
- "version": "0.23.79",
3
+ "version": "0.23.81",
4
4
  "description": "Design system based on Web Components.",
5
5
  "author": "Iordache Matei Cezar <miordache@bitdefender.com>",
6
6
  "homepage": "https://github.com/bitdefender/dex-core#readme",
@@ -74,8 +74,8 @@
74
74
  "url": "https://github.com/bitdefender/dex-core/issues"
75
75
  },
76
76
  "dependencies": {
77
- "@repobit/dex-store": "1.3.75",
78
- "@repobit/dex-store-elements": "1.4.67",
77
+ "@repobit/dex-store": "1.3.77",
78
+ "@repobit/dex-store-elements": "1.4.69",
79
79
  "lit": "^3.3.2"
80
80
  },
81
81
  "devDependencies": {
@@ -92,5 +92,5 @@
92
92
  "volta": {
93
93
  "node": "24.14.0"
94
94
  },
95
- "gitHead": "d2565cd0231e2612388581ddbaca7bdc1a5728bd"
95
+ "gitHead": "0a6dda02af7ad726b421f3d85ac5ee7da71723f7"
96
96
  }
package/src/components/cards/card.css.js CHANGED
@@ -7,8 +7,6 @@ export default css`
7
7
  --border-card-grey: var(--color-neutral-50);
8
8
  max-width: 1290px;
9
9
  margin: 0 auto;
10
-
11
-
12
10
  }
13
11
 
14
12
  ::slotted([slot="icon"]) {
@@ -52,24 +50,20 @@ export default css`
52
50
  flex-direction: column;
53
51
  max-width: 1400px;
54
52
  margin: 0 auto;
55
-
53
+ padding-top: var(--spacing-64);
54
+ padding-bottom: var(--spacing-64);
56
55
  }
57
56
 
58
57
  .bd-light-carousel-track-s {
59
- scroll-behavior: smooth;
60
- flex: 1;
61
58
  position: relative;
62
59
  padding: var(--spacing-0) var(--spacing-20);
63
- overflow-x: auto;
64
- overflow-y: hidden;
65
60
  scrollbar-width: none;
66
61
  -ms-overflow-style: none;
67
62
  z-index: 1;
68
- scroll-snap-type: x mandatory;
69
63
  display: grid;
70
64
  gap: 1.5rem;
71
- padding-top: var(--spacing-64);
72
- padding-bottom: var(--spacing-64);
65
+ width: 100%;
66
+ box-sizing: border-box;
73
67
  }
74
68
 
75
69
  .bd-light-carousel-track-s::-webkit-scrollbar {
@@ -88,16 +82,21 @@ export default css`
88
82
  transition: transform 0.2s ease-in-out;
89
83
  position: relative;
90
84
  z-index: 2;
91
- scroll-snap-align: start;
92
85
  font-family: var(--typography-fontFamily-sans);
93
86
  box-sizing: border-box;
94
87
  }
95
88
 
89
+ .bd-light-box-blue {
90
+ background: #E4F2FF !important;
91
+ }
92
+
96
93
  .bd-light-box-no-content {
97
94
  justify-content: center !important;
98
95
  align-items: center !important;
99
96
  text-align: center !important;
100
97
  gap: var(--spacing-32);
98
+ width: clamp(200px, 100%, 300px);
99
+
101
100
  }
102
101
 
103
102
  .bd-light-box-center {
@@ -239,31 +238,28 @@ export default css`
239
238
 
240
239
  @media (max-width: 768px) {
241
240
  .bd-light-carousel-track-s {
242
- display: flex;
243
- flex-direction: column;
241
+ display: grid !important;
242
+ grid-template-columns: 1fr !important;
244
243
  gap: var(--spacing-20);
245
244
  overflow-x: hidden;
246
- overflow-y: hidden;
247
- scroll-behavior: smooth;
248
245
  }
249
246
 
250
- .bd-light-box-s {
251
- width: 100%;
252
- max-width: 400px;
253
- margin: var(--spacing-0) auto;
254
- }
255
-
256
- .bd-arrow-s {
257
- display: none;
247
+ .bd-light-box-s,
248
+ .bd-light-box-no-content {
249
+ width: clamp(200px, 100%, 300px);
250
+ max-width: 100% !important;
251
+ min-width: 0 !important;
252
+ margin: 0 !important;
253
+ box-sizing: border-box !important;
258
254
  }
259
255
  }
260
256
 
261
257
  @media (max-width: 480px) {
262
258
  .bd-light-box-s {
263
- width: 100%;
264
259
  padding: 1em;
265
260
  }
266
-
261
+ .bd-light-carousel-track-s{
262
+ padding: 0 !important; }
267
263
  .bd-light-box-s h3 {
268
264
  font-size: 1em;
269
265
  }
package/src/components/cards/card.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { LitElement, html } from "lit";
2
2
  import { tokens } from "../../tokens/tokens.js";
3
- import "../Button/Button.js";
3
+ import "../button/button.js";
4
4
  import "../heading/heading.js";
5
5
  import carouselCSS from "./card.css.js";
6
6
 
@@ -8,6 +8,7 @@ class Card extends LitElement {
8
8
  static properties = {
9
9
  title : { type: String },
10
10
  subtitle : { type: String },
11
+ bgBlue : { type: Boolean, reflect: true, attribute: "bg-blue" },
11
12
  _itemCount: { state: true }
12
13
  };
13
14
 
@@ -15,6 +16,7 @@ class Card extends LitElement {
15
16
  super();
16
17
  this.title = "";
17
18
  this.subtitle = "";
19
+ this.bgBlue = false;
18
20
  this._itemCount = 0;
19
21
  this._resizeObserver = null;
20
22
  }
@@ -41,34 +43,28 @@ class Card extends LitElement {
41
43
  const titleW = item.renderRoot?.querySelector(".bd-light-title-badge-wrapper-s");
42
44
  const contentW = item.renderRoot?.querySelector(".bd-card-content-wrapper");
43
45
 
44
- if (box) { box.style.height = ""; box.style.minHeight = ""; box.style.width = "auto"; }
45
- if (iconW) { iconW.style.height = ""; }
46
- if (titleW) { titleW.style.height = ""; }
46
+ if (box) { box.style.cssText = ""; }
47
+ if (iconW) { iconW.style.height = ""; }
48
+ if (titleW) { titleW.style.height = ""; }
47
49
  if (contentW) { contentW.style.height = ""; }
48
50
  });
49
51
 
50
- requestAnimationFrame(() => {
51
- let maxW = 0;
52
- items.forEach(item => {
53
- const box = item.renderRoot?.querySelector(".bd-light-box-s");
54
- if (!box) return;
55
- const rect = box.getBoundingClientRect();
56
- if (rect.width > maxW) maxW = rect.width;
57
- });
58
-
59
- if (maxW > 0) {
52
+ const sectionW = this.getBoundingClientRect().width;
53
+ if (sectionW > 0) {
54
+ requestAnimationFrame(() => {
60
55
  items.forEach(item => {
61
56
  const box = item.renderRoot?.querySelector(".bd-light-box-s");
62
57
  if (box) {
63
- box.style.width = `${maxW}px`;
64
- box.style.minWidth = `${maxW}px`;
58
+ box.style.width = `${sectionW}px`;
59
+ box.style.minWidth = `${sectionW}px`;
65
60
  }
66
61
  });
67
- }
68
- });
62
+ });
63
+ }
69
64
 
70
65
  return;
71
66
  }
67
+
72
68
  items.forEach(item => {
73
69
  const box = item.renderRoot?.querySelector(".bd-light-box-s");
74
70
  const iconW = item.renderRoot?.querySelector(".bd-light-box-header-s");
@@ -76,8 +72,8 @@ class Card extends LitElement {
76
72
  const contentW = item.renderRoot?.querySelector(".bd-card-content-wrapper");
77
73
 
78
74
  if (box) { box.style.height = "auto"; box.style.minHeight = "0"; box.style.width = "auto"; }
79
- if (iconW) { iconW.style.height = "auto"; }
80
- if (titleW) { titleW.style.height = "auto"; }
75
+ if (iconW) { iconW.style.height = "auto"; }
76
+ if (titleW) { titleW.style.height = "auto"; }
81
77
  if (contentW) { contentW.style.height = "auto"; }
82
78
  });
83
79
 
@@ -208,6 +204,7 @@ class CardItem extends LitElement {
208
204
  subtitle: { type: String },
209
205
  icon : { type: String },
210
206
  align : { type: String },
207
+ bgBlue : { type: Boolean, reflect: true, attribute: "bg-blue" },
211
208
  ctaAlign: { type: String, attribute: "cta-align" }
212
209
  };
213
210
 
@@ -217,6 +214,7 @@ class CardItem extends LitElement {
217
214
  this.subtitle = "";
218
215
  this.icon = "";
219
216
  this.align = "start";
217
+ this.bgBlue = false;
220
218
  this.ctaAlign = "start";
221
219
  }
222
220
 
@@ -224,8 +222,7 @@ class CardItem extends LitElement {
224
222
  const iconEl = this.querySelector("[slot='icon']");
225
223
 
226
224
  if (iconEl) {
227
- const clone = iconEl.cloneNode(true);
228
-
225
+ const clone = iconEl.cloneNode(true);
229
226
  const originalW = iconEl.getAttribute("width");
230
227
  const originalH = iconEl.getAttribute("height");
231
228
 
@@ -286,8 +283,12 @@ class CardItem extends LitElement {
286
283
  : "justify-content: flex-start;";
287
284
 
288
285
  return html`
289
- <div class="bd-light-box-s ${isCentered ? "bd-light-box-center" : ""} ${!hasContent ? "bd-light-box-no-content" : ""}">
290
-
286
+ <div
287
+ class="bd-light-box-s
288
+ ${isCentered ? "bd-light-box-center" : ""}
289
+ ${!hasContent ? "bd-light-box-no-content" : ""}
290
+ ${this.bgBlue ? "bd-light-box-blue" : ""}"
291
+ >
291
292
  <div class="bd-light-box-header-s ${isCentered ? "bd-light-box-header-center" : ""}">
292
293
  ${this._renderIcon()}
293
294
  </div>
package/src/components/cards/card.stories.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { html } from 'lit';
2
- import '../Button/Button.js';
2
+ import '../button/button.js';
3
3
  import '../heading/heading.js';
4
4
  import '../icons/analysis-icon.js';
5
5
  import '../icons/arrow-up-icon.js';
@@ -19,13 +19,13 @@ export default {
19
19
  component: `
20
20
  **Card** and **CardItem** are Lit components for a static card grid layout.
21
21
 
22
- - \`<bd-card-section>\` — a section wrapper with an optional title and subtitle for the section
23
- - \`<bd-card-item>\` — individual card with optional icon, title, alignment, slotted content, and CTA button
22
+ - \`<bd-card-section>\` — section wrapper with optional title and subtitle
23
+ - \`<bd-card-item>\` — individual card with optional icon, title, subtitle, alignment, slotted content, CTA button, and blue background
24
24
 
25
25
  ### Usage
26
26
  \`\`\`html
27
- <bd-card-section title="Why Bitdefender" subtitle="Discover the benefits">
28
- <bd-card-item title="AI Protection" align="center">
27
+ <bd-card-section title="Why Bitdefender" subtitle="Optional subtitle">
28
+ <bd-card-item title="AI Protection" align="center" bg-blue cta-align="center">
29
29
  <bd-individual-icon slot="icon" width="32" height="32" color="#006DFF"></bd-individual-icon>
30
30
  <bd-p>Powered by machine learning.</bd-p>
31
31
  <bd-button-link slot="cta" href="#" kind="primary" size="sm">Learn more</bd-button-link>
@@ -33,25 +33,21 @@ export default {
33
33
  </bd-card-section>
34
34
  \`\`\`
35
35
 
36
- ### CardSection Props
37
- | Prop | Valori | Default |
38
- |---|---|---|
39
- | \`title\` | String | \`''\` |
40
- | \`subtitle\` | String | \`''\` |
36
+ ### CardItem Slots
37
+ | Slot | Descriere |
38
+ |---|---|
39
+ | \`icon\` | Iconiță sau imagine (max 120x120px automat) |
40
+ | default | Conținut text |
41
+ | \`cta\` | Buton CTA jos |
41
42
 
42
43
  ### CardItem Props
43
44
  | Prop | Valori | Default |
44
45
  |---|---|---|
45
46
  | \`title\` | String | \`''\` |
47
+ | \`subtitle\` | String | \`''\` |
46
48
  | \`align\` | \`start\`, \`center\` | \`start\` |
47
- | \`icon\` | String (path) | \`''\` |
48
-
49
- ### CardItem Slots
50
- | Slot | Descriere |
51
- |---|---|
52
- | \`icon\` | Iconiță sau imagine (max 120x120px automat) |
53
- | default | Conținut text — \`bd-p\`, liste, etc. |
54
- | \`cta\` | Buton CTA jos stânga — \`bd-button-link\` sau \`bd-button\` |
49
+ | \`bg-blue\` | Boolean | \`false\` |
50
+ | \`cta-align\` | \`start\`, \`center\`, \`end\` | \`start\` |
55
51
  `
56
52
  }
57
53
  }
@@ -64,7 +60,7 @@ export default {
64
60
  },
65
61
  sectionSubtitle: {
66
62
  control : 'text',
67
- description: 'Optional subtitle for the card section (displayed below title)',
63
+ description: 'Optional subtitle for the card section',
68
64
  table : { type: { summary: 'string' }, defaultValue: { summary: '' }, category: 'CardSection' }
69
65
  },
70
66
  itemTitle: {
@@ -75,12 +71,25 @@ export default {
75
71
  align: {
76
72
  control : { type: 'select' },
77
73
  options : ['start', 'center'],
78
- description: 'Alignment of card content.',
74
+ description: 'Alignment of card content',
79
75
  table : { type: { summary: "'start' | 'center'" }, defaultValue: { summary: 'start' }, category: 'CardItem' }
76
+ },
77
+ bgBlue: {
78
+ control : 'boolean',
79
+ description: 'Blue background (#E4F2FF) on card',
80
+ table : { type: { summary: 'boolean' }, defaultValue: { summary: 'false' }, category: 'CardItem' }
81
+ },
82
+ ctaAlign: {
83
+ control : { type: 'select' },
84
+ options : ['start', 'center', 'end'],
85
+ description: 'CTA button alignment',
86
+ table : { type: { summary: "'start' | 'center' | 'end'" }, defaultValue: { summary: 'start' }, category: 'CardItem' }
80
87
  }
81
88
  }
82
89
  };
83
90
 
91
+ // ─── Default ──────────────────────────────────────────────────────────────────
92
+
84
93
  export const Default = {
85
94
  name : 'Default (4 items)',
86
95
  render: () => html`
@@ -103,39 +112,43 @@ export const Default = {
103
112
  </bd-card-item>
104
113
  </bd-card-section>
105
114
  `,
106
- parameters: { docs: { description: { story: 'Four card items with icons, titles, and content.' } } }
115
+ parameters: { docs: { description: { story: '4 card items cu iconițe, titluri și conținut.' } } }
107
116
  };
108
117
 
109
- export const WithSectionSubtitle = {
110
- name : 'With Section Subtitle',
118
+ // ─── With Blue Background ─────────────────────────────────────────────────────
119
+
120
+ export const WithBlueBg = {
121
+ name : 'With Blue Background',
111
122
  render: () => html`
112
- <bd-card-section title="Why Bitdefender" subtitle="Discover the benefits of our award-winning security">
113
- <bd-card-item title="AI Protection">
123
+ <bd-card-section title="Why Bitdefender">
124
+ <bd-card-item title="AI Protection" bg-blue>
114
125
  <bd-individual-icon slot="icon" width="32" height="32" color="#006DFF"></bd-individual-icon>
115
126
  <bd-p>Powered by machine learning and behavioral analysis.</bd-p>
116
127
  </bd-card-item>
117
- <bd-card-item title="Multi-layer Security">
128
+ <bd-card-item title="Multi-layer Security" bg-blue>
118
129
  <bd-globe-icon slot="icon" width="32" height="32" color="#006DFF"></bd-globe-icon>
119
130
  <bd-p>Multiple independent protection layers stop any attack.</bd-p>
120
131
  </bd-card-item>
121
- <bd-card-item title="VPN Included">
132
+ <bd-card-item title="VPN Included" bg-blue>
122
133
  <bd-machine-learning-icon slot="icon" width="32" height="32" color="#006DFF"></bd-machine-learning-icon>
123
134
  <bd-p>Unlimited encrypted VPN traffic for all your devices.</bd-p>
124
135
  </bd-card-item>
125
- <bd-card-item title="Parental Controls">
136
+ <bd-card-item title="Parental Controls" bg-blue>
126
137
  <bd-analysis-icon slot="icon" width="32" height="32" color="#006DFF"></bd-analysis-icon>
127
138
  <bd-p>Advanced controls to protect your children online.</bd-p>
128
139
  </bd-card-item>
129
140
  </bd-card-section>
130
141
  `,
131
- parameters: { docs: { description: { story: 'Section with both title and subtitle above the cards.' } } }
142
+ parameters: { docs: { description: { story: 'Toate cardurile cu `bg-blue` — fundal #E4F2FF.' } } }
132
143
  };
133
144
 
134
- export const SectionSubtitleOnly = {
135
- name : 'Section Subtitle Only',
145
+ // ─── Mixed Blue Background ────────────────────────────────────────────────────
146
+
147
+ export const MixedBlueBg = {
148
+ name : 'Mixed — Some Blue',
136
149
  render: () => html`
137
- <bd-card-section subtitle="Discover the benefits of our award-winning security">
138
- <bd-card-item title="AI Protection">
150
+ <bd-card-section title="Features">
151
+ <bd-card-item title="AI Protection" bg-blue>
139
152
  <bd-individual-icon slot="icon" width="32" height="32" color="#006DFF"></bd-individual-icon>
140
153
  <bd-p>Powered by machine learning and behavioral analysis.</bd-p>
141
154
  </bd-card-item>
@@ -143,19 +156,25 @@ export const SectionSubtitleOnly = {
143
156
  <bd-globe-icon slot="icon" width="32" height="32" color="#006DFF"></bd-globe-icon>
144
157
  <bd-p>Multiple independent protection layers stop any attack.</bd-p>
145
158
  </bd-card-item>
146
- <bd-card-item title="VPN Included">
159
+ <bd-card-item title="VPN Included" bg-blue>
147
160
  <bd-machine-learning-icon slot="icon" width="32" height="32" color="#006DFF"></bd-machine-learning-icon>
148
161
  <bd-p>Unlimited encrypted VPN traffic for all your devices.</bd-p>
149
162
  </bd-card-item>
163
+ <bd-card-item title="Parental Controls">
164
+ <bd-analysis-icon slot="icon" width="32" height="32" color="#006DFF"></bd-analysis-icon>
165
+ <bd-p>Advanced controls to protect your children online.</bd-p>
166
+ </bd-card-item>
150
167
  </bd-card-section>
151
168
  `,
152
- parameters: { docs: { description: { story: 'Section with subtitle only (no title).' } } }
169
+ parameters: { docs: { description: { story: 'Mix de carduri cu și fără `bg-blue`.' } } }
153
170
  };
154
171
 
172
+ // ─── With CTA ─────────────────────────────────────────────────────────────────
173
+
155
174
  export const WithCTA = {
156
175
  name : 'With CTA Button',
157
176
  render: () => html`
158
- <bd-card-section title="Why Bitdefender" subtitle="Explore our key features">
177
+ <bd-card-section title="Why Bitdefender">
159
178
  <bd-card-item title="AI Protection">
160
179
  <bd-individual-icon slot="icon" width="32" height="32" color="#006DFF"></bd-individual-icon>
161
180
  <bd-p>Powered by machine learning and behavioral analysis to stop threats before they reach you.</bd-p>
@@ -178,19 +197,73 @@ export const WithCTA = {
178
197
  </bd-card-item>
179
198
  </bd-card-section>
180
199
  `,
181
- parameters: { docs: { description: { story: 'Cards with CTA button in the bottom-left via `slot="cta"`.' } } }
200
+ parameters: { docs: { description: { story: 'Cards cu buton CTA via `slot="cta"`.' } } }
182
201
  };
183
202
 
203
+ // ─── With CTA Centered ────────────────────────────────────────────────────────
204
+
205
+ export const WithCTACentered = {
206
+ name : 'With CTA — Centered',
207
+ render: () => html`
208
+ <bd-card-section title="Features">
209
+ <bd-card-item title="AI Protection" cta-align="center">
210
+ <bd-individual-icon slot="icon" width="32" height="32" color="#006DFF"></bd-individual-icon>
211
+ <bd-p>Powered by machine learning.</bd-p>
212
+ <bd-button-link slot="cta" href="#" kind="danger" size="sm">Get started</bd-button-link>
213
+ </bd-card-item>
214
+ <bd-card-item title="Multi-layer Security" cta-align="center">
215
+ <bd-globe-icon slot="icon" width="32" height="32" color="#006DFF"></bd-globe-icon>
216
+ <bd-p>Multiple protection layers.</bd-p>
217
+ <bd-button-link slot="cta" href="#" kind="danger" size="sm">Get started</bd-button-link>
218
+ </bd-card-item>
219
+ <bd-card-item title="VPN Included" cta-align="center">
220
+ <bd-machine-learning-icon slot="icon" width="32" height="32" color="#006DFF"></bd-machine-learning-icon>
221
+ <bd-p>Unlimited encrypted VPN traffic.</bd-p>
222
+ <bd-button-link slot="cta" href="#" kind="danger" size="sm">Get started</bd-button-link>
223
+ </bd-card-item>
224
+ </bd-card-section>
225
+ `,
226
+ parameters: { docs: { description: { story: 'CTA centrat cu `cta-align="center"`.' } } }
227
+ };
228
+
229
+ // ─── With Subtitle ────────────────────────────────────────────────────────────
230
+
231
+ export const WithSubtitle = {
232
+ name : 'With Section Subtitle',
233
+ render: () => html`
234
+ <bd-card-section
235
+ title="Why Bitdefender"
236
+ subtitle="Trusted by millions worldwide for over 20 years."
237
+ >
238
+ <bd-card-item title="AI Protection" subtitle="Machine learning powered">
239
+ <bd-individual-icon slot="icon" width="32" height="32" color="#006DFF"></bd-individual-icon>
240
+ <bd-p>Powered by machine learning and behavioral analysis.</bd-p>
241
+ </bd-card-item>
242
+ <bd-card-item title="Multi-layer Security" subtitle="Independent protection layers">
243
+ <bd-globe-icon slot="icon" width="32" height="32" color="#006DFF"></bd-globe-icon>
244
+ <bd-p>Multiple independent protection layers stop any attack.</bd-p>
245
+ </bd-card-item>
246
+ <bd-card-item title="VPN Included" subtitle="Unlimited traffic">
247
+ <bd-machine-learning-icon slot="icon" width="32" height="32" color="#006DFF"></bd-machine-learning-icon>
248
+ <bd-p>Unlimited encrypted VPN traffic for all your devices.</bd-p>
249
+ </bd-card-item>
250
+ </bd-card-section>
251
+ `,
252
+ parameters: { docs: { description: { story: 'Section cu subtitlu și card items cu subtitlu sub titlu.' } } }
253
+ };
254
+
255
+ // ─── Uneven Content Alignment Test ────────────────────────────────────────────
256
+
184
257
  export const WithCTAUnevenContent = {
185
- name : 'With CTA — Uneven Content (alignment test)',
258
+ name : 'Uneven Content — Alignment Test',
186
259
  render: () => html`
187
- <bd-card-section title="Features" subtitle="Compare our security solutions">
260
+ <bd-card-section title="Features">
188
261
  <bd-card-item title="AI Protection">
189
262
  <bd-individual-icon slot="icon" width="32" height="32" color="#006DFF"></bd-individual-icon>
190
263
  <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>
191
264
  <bd-button-link slot="cta" href="#" kind="danger" size="sm">Get started</bd-button-link>
192
265
  </bd-card-item>
193
- <bd-card-item title="Multi-layer Security">
266
+ <bd-card-item title="Multi-layer Security — Advanced Protection Suite">
194
267
  <bd-globe-icon slot="icon" width="32" height="32" color="#006DFF"></bd-globe-icon>
195
268
  <bd-p>Stop any attack.</bd-p>
196
269
  <bd-button-link slot="cta" href="#" kind="danger" size="sm">Get started</bd-button-link>
@@ -207,9 +280,11 @@ export const WithCTAUnevenContent = {
207
280
  </bd-card-item>
208
281
  </bd-card-section>
209
282
  `,
210
- parameters: { docs: { description: { story: 'Cards with uneven title and content lengths — tests row alignment equalization. CTA buttons should always align at the same vertical position.' } } }
283
+ parameters: { docs: { description: { story: 'Conținut inegal — testează egalizarea rândurilor. Butoanele CTA trebuie să fie la aceeași înălțime.' } } }
211
284
  };
212
285
 
286
+ // ─── No Section Title ─────────────────────────────────────────────────────────
287
+
213
288
  export const NoSectionTitle = {
214
289
  name : 'No Section Title',
215
290
  render: () => html`
@@ -232,13 +307,15 @@ export const NoSectionTitle = {
232
307
  </bd-card-item>
233
308
  </bd-card-section>
234
309
  `,
235
- parameters: { docs: { description: { story: 'Section without title or subtitle.' } } }
310
+ parameters: { docs: { description: { story: 'Section fără `title` — header div omis.' } } }
236
311
  };
237
312
 
313
+ // ─── Centered Alignment ───────────────────────────────────────────────────────
314
+
238
315
  export const CenteredAlignment = {
239
316
  name : 'Centered Alignment',
240
317
  render: () => html`
241
- <bd-card-section title="Features" subtitle="All features are centered">
318
+ <bd-card-section title="Features">
242
319
  <bd-card-item title="AI Protection" align="center">
243
320
  <bd-individual-icon slot="icon" width="32" height="32" color="#006DFF"></bd-individual-icon>
244
321
  <bd-p>Powered by machine learning and behavioral analysis.</bd-p>
@@ -257,30 +334,15 @@ export const CenteredAlignment = {
257
334
  </bd-card-item>
258
335
  </bd-card-section>
259
336
  `,
260
- parameters: { docs: { description: { story: '`align="center"` applied to all items.' } } }
337
+ parameters: { docs: { description: { story: '`align="center"` pe toate itemele.' } } }
261
338
  };
262
339
 
263
- export const MixedAlignment = {
264
- name : 'Mixed Alignment',
265
- render: () => html`
266
- <bd-card-section title="Mixed Layout" subtitle="Different alignment styles">
267
- <bd-card-item title="Left Aligned" align="start">
268
- <bd-individual-icon slot="icon" width="32" height="32" color="#006DFF"></bd-individual-icon>
269
- <bd-p>Default left-aligned content.</bd-p>
270
- </bd-card-item>
271
- <bd-card-item title="Center Aligned" align="center">
272
- <bd-globe-icon slot="icon" width="32" height="32" color="#006DFF"></bd-globe-icon>
273
- <bd-p>Centered content.</bd-p>
274
- </bd-card-item>
275
- </bd-card-section>
276
- `,
277
- parameters: { docs: { description: { story: 'Two items with different alignment values.' } } }
278
- };
340
+ // ─── No Icon ──────────────────────────────────────────────────────────────────
279
341
 
280
342
  export const NoIcon = {
281
343
  name : 'No Icons',
282
344
  render: () => html`
283
- <bd-card-section title="Features" subtitle="Simple text cards without icons">
345
+ <bd-card-section title="Features">
284
346
  <bd-card-item title="AI Protection">
285
347
  <bd-p>Powered by machine learning and behavioral analysis.</bd-p>
286
348
  </bd-card-item>
@@ -295,13 +357,15 @@ export const NoIcon = {
295
357
  </bd-card-item>
296
358
  </bd-card-section>
297
359
  `,
298
- parameters: { docs: { description: { story: 'Items without icon.' } } }
360
+ parameters: { docs: { description: { story: 'Carduri fără iconițe.' } } }
299
361
  };
300
362
 
363
+ // ─── No Slotted Content ───────────────────────────────────────────────────────
364
+
301
365
  export const NoSlottedContent = {
302
366
  name : 'No Slotted Content',
303
367
  render: () => html`
304
- <bd-card-section title="Features" subtitle="Icons with titles only">
368
+ <bd-card-section title="Features">
305
369
  <bd-card-item title="AI Protection">
306
370
  <bd-individual-icon slot="icon" width="32" height="32" color="#006DFF"></bd-individual-icon>
307
371
  </bd-card-item>
@@ -316,46 +380,57 @@ export const NoSlottedContent = {
316
380
  </bd-card-item>
317
381
  </bd-card-section>
318
382
  `,
319
- parameters: { docs: { description: { story: 'Items with only icon and title.' } } }
383
+ parameters: { docs: { description: { story: 'Carduri cu doar iconițe și titlu — fără conținut slotted.' } } }
320
384
  };
321
385
 
322
- export const TitleOnly = {
323
- name : 'Title Only',
386
+ // ─── Two Columns ──────────────────────────────────────────────────────────────
387
+
388
+ export const TwoColumns = {
389
+ name : 'Two Columns',
324
390
  render: () => html`
325
391
  <bd-card-section title="Features">
326
- <bd-card-item title="AI Protection"></bd-card-item>
327
- <bd-card-item title="VPN Included"></bd-card-item>
328
- <bd-card-item title="Parental Controls"></bd-card-item>
392
+ <bd-card-item title="AI Protection">
393
+ <bd-individual-icon slot="icon" width="32" height="32" color="#006DFF"></bd-individual-icon>
394
+ <bd-p>Powered by machine learning and behavioral analysis.</bd-p>
395
+ </bd-card-item>
396
+ <bd-card-item title="Multi-layer Security">
397
+ <bd-globe-icon slot="icon" width="32" height="32" color="#006DFF"></bd-globe-icon>
398
+ <bd-p>Multiple independent protection layers stop any attack.</bd-p>
399
+ </bd-card-item>
329
400
  </bd-card-section>
330
401
  `,
331
- parameters: { docs: { description: { story: 'Minimal cards with only a title.' } } }
402
+ parameters: { docs: { description: { story: 'Două coloane — grid se ajustează automat.' } } }
332
403
  };
333
404
 
334
- export const RichContent = {
335
- name : 'Rich Slotted Content',
405
+ // ─── Three Columns ────────────────────────────────────────────────────────────
406
+
407
+ export const ThreeColumns = {
408
+ name : 'Three Columns',
336
409
  render: () => html`
337
- <bd-card-section title="Plan Details" subtitle="What's included in each plan">
338
- <bd-card-item title="What's included">
339
- <bd-family-icon slot="icon" width="32" height="32" color="#006DFF"></bd-family-icon>
340
- <bd-p>Antivirus & Anti-malware</bd-p>
341
- <bd-p>VPN (200+ servers)</bd-p>
342
- <bd-p>Password Manager</bd-p>
343
- <bd-button-link slot="cta" href="#" kind="primary" size="sm">See all features</bd-button-link>
344
- </bd-card-item>
345
- <bd-card-item title="Supported Platforms">
346
- <bd-arrow-up-icon slot="icon" width="32" height="32" color="#006DFF"></bd-arrow-up-icon>
347
- <bd-p>Windows, macOS, Android, iOS</bd-p>
348
- <bd-button-link slot="cta" href="#" kind="primary" size="sm">View all platforms</bd-button-link>
410
+ <bd-card-section title="Features">
411
+ <bd-card-item title="AI Protection">
412
+ <bd-individual-icon slot="icon" width="32" height="32" color="#006DFF"></bd-individual-icon>
413
+ <bd-p>Powered by machine learning and behavioral analysis.</bd-p>
414
+ </bd-card-item>
415
+ <bd-card-item title="Multi-layer Security">
416
+ <bd-globe-icon slot="icon" width="32" height="32" color="#006DFF"></bd-globe-icon>
417
+ <bd-p>Multiple independent protection layers stop any attack.</bd-p>
418
+ </bd-card-item>
419
+ <bd-card-item title="VPN Included">
420
+ <bd-machine-learning-icon slot="icon" width="32" height="32" color="#006DFF"></bd-machine-learning-icon>
421
+ <bd-p>Unlimited encrypted VPN traffic for all your devices.</bd-p>
349
422
  </bd-card-item>
350
423
  </bd-card-section>
351
424
  `,
352
- parameters: { docs: { description: { story: 'Rich content with multiple bd-p elements and CTA buttons.' } } }
425
+ parameters: { docs: { description: { story: 'Trei coloane — grid se ajustează automat.' } } }
353
426
  };
354
427
 
428
+ // ─── Single Item ──────────────────────────────────────────────────────────────
429
+
355
430
  export const SingleItem = {
356
431
  name : 'Single Item (edge case)',
357
432
  render: () => html`
358
- <bd-card-section title="Feature" subtitle="One card only">
433
+ <bd-card-section title="Feature">
359
434
  <bd-card-item title="AI Protection">
360
435
  <bd-individual-icon slot="icon" width="32" height="32" color="#006DFF"></bd-individual-icon>
361
436
  <bd-p>Machine learning-powered protection.</bd-p>
@@ -363,83 +438,74 @@ export const SingleItem = {
363
438
  </bd-card-item>
364
439
  </bd-card-section>
365
440
  `,
366
- parameters: { docs: { description: { story: 'Edge case: only one card item.' } } }
441
+ parameters: { docs: { description: { story: 'Edge case — un singur card.' } } }
367
442
  };
368
443
 
369
- export const WithImages = {
370
- name : 'With Images (large + small)',
371
- render: () => html`
372
- <bd-card-section title="Our Products" subtitle="Choose the right plan for you">
373
- <bd-card-item title="Total Security">
374
- <img slot="icon" src="/assets/tabs-img1.png" alt="Total Security" />
375
- <bd-p>Complete protection for all your devices with advanced threat detection and real-time security updates.</bd-p>
376
- <bd-button-link slot="cta" href="#" kind="primary" size="sm">Learn more</bd-button-link>
377
- </bd-card-item>
378
- <bd-card-item title="Internet Security">
379
- <img slot="icon" src="/assets/tabs-img2.png" alt="Internet Security" />
380
- <bd-p>Stay safe online.</bd-p>
381
- <bd-button-link slot="cta" href="#" kind="primary" size="sm">Learn more</bd-button-link>
382
- </bd-card-item>
383
- <bd-card-item title="Antivirus Plus">
384
- <img slot="icon" src="/assets/tabs-img3.png" alt="Antivirus Plus" />
385
- <bd-p>Essential protection for your Windows PC with real-time antivirus and anti-phishing.</bd-p>
386
- <bd-button-link slot="cta" href="#" kind="primary" size="sm">Learn more</bd-button-link>
387
- </bd-card-item>
388
- </bd-card-section>
389
- `,
390
- parameters: { docs: { description: { story: 'Cards with large images via `slot="icon"` — max-width/max-height 120px applied automatically.' } } }
391
- };
444
+ // ─── Mobile View ──────────────────────────────────────────────────────────────
392
445
 
393
- export const MixedIconsAndImages = {
394
- name : 'Mixed — Icons and Images',
395
- render: () => html`
396
- <bd-card-section title="Mixed Media" subtitle="SVG icons and images together">
446
+ export const MobileView = {
447
+ name : 'Mobile View (375px)',
448
+ parameters: { viewport: { defaultViewport: 'mobile1' } },
449
+ render : () => html`
450
+ <bd-card-section title="Why Bitdefender">
397
451
  <bd-card-item title="AI Protection">
398
452
  <bd-individual-icon slot="icon" width="32" height="32" color="#006DFF"></bd-individual-icon>
399
453
  <bd-p>Powered by machine learning and behavioral analysis.</bd-p>
400
- <bd-button-link slot="cta" href="#" kind="danger" size="sm">Get started</bd-button-link>
454
+ <bd-button-link slot="cta" href="#" kind="primary" size="sm">Learn more</bd-button-link>
401
455
  </bd-card-item>
402
- <bd-card-item title="Total Security">
403
- <img slot="icon" src="/assets/tabs-img1.png" alt="Total Security" />
404
- <bd-p>Complete protection for all your devices.</bd-p>
405
- <bd-button-link slot="cta" href="#" kind="danger" size="sm">Get started</bd-button-link>
456
+ <bd-card-item title="Multi-layer Security">
457
+ <bd-globe-icon slot="icon" width="32" height="32" color="#006DFF"></bd-globe-icon>
458
+ <bd-p>Multiple independent protection layers stop any attack.</bd-p>
459
+ <bd-button-link slot="cta" href="#" kind="primary" size="sm">Learn more</bd-button-link>
406
460
  </bd-card-item>
407
461
  <bd-card-item title="VPN Included">
408
- <bd-globe-icon slot="icon" width="32" height="32" color="#006DFF"></bd-globe-icon>
409
- <bd-p>Unlimited encrypted VPN traffic for all your devices, anywhere.</bd-p>
410
- <bd-button-link slot="cta" href="#" kind="danger" size="sm">Get started</bd-button-link>
462
+ <bd-machine-learning-icon slot="icon" width="32" height="32" color="#006DFF"></bd-machine-learning-icon>
463
+ <bd-p>Unlimited encrypted VPN traffic for all your devices.</bd-p>
464
+ <bd-button-link slot="cta" href="#" kind="primary" size="sm">Learn more</bd-button-link>
411
465
  </bd-card-item>
412
- <bd-card-item title="Internet Security">
413
- <img slot="icon" src="/assets/tabs-img2.png" alt="Internet Security" />
414
- <bd-p>Stay safe online with advanced threat detection.</bd-p>
415
- <bd-button-link slot="cta" href="#" kind="danger" size="sm">Get started</bd-button-link>
466
+ <bd-card-item title="Parental Controls">
467
+ <bd-analysis-icon slot="icon" width="32" height="32" color="#006DFF"></bd-analysis-icon>
468
+ <bd-p>Advanced controls to protect your children online.</bd-p>
469
+ <bd-button-link slot="cta" href="#" kind="primary" size="sm">Learn more</bd-button-link>
416
470
  </bd-card-item>
417
471
  </bd-card-section>
418
- `,
419
- parameters: { docs: { description: { story: 'Mix of SVG icons and large images in the same grid — tests consistent icon row height equalization.' } } }
420
- };
472
+ ` };
473
+
474
+ // ─── Playground ───────────────────────────────────────────────────────────────
421
475
 
422
476
  export const Playground = {
423
477
  name: '🛝 Playground',
424
478
  args: {
425
479
  sectionTitle : 'Why Bitdefender',
426
- sectionSubtitle: 'Discover the benefits of our award-winning security',
480
+ sectionSubtitle: '',
427
481
  itemTitle : 'AI Protection',
428
- align : 'start'
482
+ align : 'start',
483
+ bgBlue : false,
484
+ ctaAlign : 'start'
429
485
  },
430
486
  render: (args) => html`
431
487
  <bd-card-section title="${args.sectionTitle}" subtitle="${args.sectionSubtitle}">
432
- <bd-card-item title="${args.itemTitle}" align="${args.align}">
488
+ <bd-card-item
489
+ title="${args.itemTitle}"
490
+ align="${args.align}"
491
+ ?bg-blue=${args.bgBlue}
492
+ cta-align="${args.ctaAlign}"
493
+ >
433
494
  <bd-individual-icon slot="icon" width="32" height="32" color="#006DFF"></bd-individual-icon>
434
495
  <bd-p>Powered by machine learning and behavioral analysis.</bd-p>
435
496
  <bd-button-link slot="cta" href="#" kind="primary" size="sm">Learn more</bd-button-link>
436
497
  </bd-card-item>
437
- <bd-card-item title="VPN Included" align="${args.align}">
498
+ <bd-card-item
499
+ title="VPN Included"
500
+ align="${args.align}"
501
+ ?bg-blue=${args.bgBlue}
502
+ cta-align="${args.ctaAlign}"
503
+ >
438
504
  <bd-globe-icon slot="icon" width="32" height="32" color="#006DFF"></bd-globe-icon>
439
505
  <bd-p>Unlimited encrypted VPN traffic.</bd-p>
440
506
  <bd-button-link slot="cta" href="#" kind="primary" size="sm">Learn more</bd-button-link>
441
507
  </bd-card-item>
442
508
  </bd-card-section>
443
509
  `,
444
- parameters: { docs: { description: { story: 'Interactive playground with section subtitle support.' } } }
510
+ parameters: { docs: { description: { story: 'Playground interactiv.' } } }
445
511
  };