@repobit/dex-system-design 0.23.44 → 0.23.46

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 (8) hide show
  1. package/CHANGELOG.md +17 -0
  2. package/package.json +4 -4
  3. package/src/components/features/features.css.js +67 -0
  4. package/src/components/features/features.js +120 -0
  5. package/src/components/features/features.stories.js +225 -0
  6. package/src/components/tabs/tabs.css.js +3 -4
  7. package/src/components/tabs/tabs.js +10 -102
  8. package/src/components/tabs/tabs.stories.js +41 -40
package/CHANGELOG.md CHANGED
@@ -3,6 +3,23 @@
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.46](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.23.45...@repobit/dex-system-design@0.23.46) (2026-06-10)
7
+
8
+ ### Bug Fixes
9
+
10
+ * **DEX-1014:** correction for design - tabs and features
11
+ * **DEX-1014:** correction for design - tabs and features
12
+ * **DEX-1014:** new features component
13
+
14
+
15
+ ## [0.23.45](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.23.44...@repobit/dex-system-design@0.23.45) (2026-06-10)
16
+
17
+ **Note:** Version bump only for package @repobit/dex-system-design
18
+
19
+
20
+
21
+
22
+
6
23
  ## [0.23.44](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.23.43...@repobit/dex-system-design@0.23.44) (2026-06-08)
7
24
 
8
25
  **Note:** Version bump only for package @repobit/dex-system-design
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@repobit/dex-system-design",
3
- "version": "0.23.44",
3
+ "version": "0.23.46",
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",
@@ -70,8 +70,8 @@
70
70
  "url": "https://github.com/bitdefender/dex-core/issues"
71
71
  },
72
72
  "dependencies": {
73
- "@repobit/dex-store": "1.3.40",
74
- "@repobit/dex-store-elements": "1.4.32",
73
+ "@repobit/dex-store": "1.3.42",
74
+ "@repobit/dex-store-elements": "1.4.34",
75
75
  "lit": "^3.3.2"
76
76
  },
77
77
  "devDependencies": {
@@ -88,5 +88,5 @@
88
88
  "volta": {
89
89
  "node": "24.14.0"
90
90
  },
91
- "gitHead": "303379a04658dd5f00780100c7e2c33a543fe2d9"
91
+ "gitHead": "71d57f3670c242df9df010da40e0e2f5da418c42"
92
92
  }
package/src/components/features/features.css.js ADDED
@@ -0,0 +1,67 @@
1
+ import { css } from "lit";
2
+
3
+ export default css`
4
+ :host {
5
+ display: block;
6
+ width: 100%;
7
+ padding-top: var(--spacing-32);
8
+ padding-bottom: var(--spacing-32);
9
+ }
10
+
11
+ /* Columns grid */
12
+ .bd-features-container {
13
+ display: grid;
14
+ gap: var(--spacing-32);
15
+ width: 100%;
16
+ justify-content: center;
17
+ }
18
+
19
+ /* Coloana individuala */
20
+ .bd-col {
21
+ display: flex;
22
+ flex-direction: column;
23
+ width: 300px;
24
+ }
25
+
26
+ /* Icon wrapper */
27
+ .col-icon-wrapper {
28
+ display: flex;
29
+ align-items: flex-start;
30
+ margin-bottom: var(--spacing-8);
31
+ overflow: hidden;
32
+ }
33
+
34
+ /* Title wrapper */
35
+ .col-title-wrapper {
36
+ display: flex;
37
+ align-items: flex-start;
38
+ margin-bottom: var(--spacing-8);
39
+ overflow: hidden;
40
+ }
41
+
42
+ .col-description {
43
+ margin-bottom: var(--spacing-24);
44
+ font-family: var(--typography-fontFamily-sans);
45
+ font-size: var(--typography-fontSize-md);
46
+ color: var(--color-neutral-700);
47
+ line-height: var(--typography-lineHeight-normal);
48
+ overflow: hidden;
49
+ }
50
+
51
+ /* Responsive */
52
+ @media (max-width: 992px) {
53
+ .bd-col {
54
+ width: 260px;
55
+ }
56
+ }
57
+
58
+ @media (max-width: 600px) {
59
+ .bd-features-container {
60
+ grid-template-columns: 1fr !important;
61
+ }
62
+
63
+ .bd-col {
64
+ width: 100%;
65
+ }
66
+ }
67
+ `;
package/src/components/features/features.js ADDED
@@ -0,0 +1,120 @@
1
+ import { LitElement, html } from "lit";
2
+ import { tokens } from "../../tokens/tokens.js";
3
+ import "../accordion/accordion.js";
4
+ import "../heading/heading.js";
5
+ import "../icons/family-icon.js";
6
+ import "../icons/globe-icon.js";
7
+ import "../icons/individual-icon.js";
8
+ import "../icons/laurel-icon.js";
9
+ import "../paragraph/paragraph.js";
10
+ import featuresCSS from "./features.css.js";
11
+
12
+ // ─── BdFeatureCol — Light DOM wrapper ────────────────────────────────────────
13
+
14
+ class BdFeatureCol extends HTMLElement {}
15
+ customElements.define("bd-feature-col", BdFeatureCol);
16
+
17
+ // ─── BdFeatures ──────────────────────────────────────────────────────────────
18
+
19
+ class BdFeatures extends LitElement {
20
+ static properties = {
21
+ _minHeight: { state: true }
22
+ };
23
+
24
+ static styles = [tokens, featuresCSS];
25
+
26
+ constructor() {
27
+ super();
28
+ this._minHeight = 0;
29
+ }
30
+
31
+ _getCols() {
32
+ return Array.from(this.querySelectorAll(":scope > bd-feature-col"));
33
+ }
34
+
35
+ async firstUpdated() {
36
+ await this._measureMaxHeight();
37
+ }
38
+
39
+ _equalizeRows() {
40
+ const container = this.renderRoot.querySelector(".bd-features-container");
41
+ if (!container) return;
42
+
43
+ const icons = container.querySelectorAll(".col-icon-wrapper");
44
+ const titles = container.querySelectorAll(".col-title-wrapper");
45
+ const descriptions = container.querySelectorAll(".col-description");
46
+
47
+ icons.forEach(el => el.style.height = "");
48
+ titles.forEach(el => el.style.height = "");
49
+ descriptions.forEach(el => el.style.height = "");
50
+
51
+ let maxH = 0;
52
+ icons.forEach(el => { if (el.scrollHeight > maxH) maxH = el.scrollHeight; });
53
+ icons.forEach(el => el.style.height = `${maxH}px`);
54
+
55
+ maxH = 0;
56
+ titles.forEach(el => { if (el.scrollHeight > maxH) maxH = el.scrollHeight; });
57
+ titles.forEach(el => el.style.height = `${maxH}px`);
58
+
59
+ maxH = 0;
60
+ descriptions.forEach(el => { if (el.scrollHeight > maxH) maxH = el.scrollHeight; });
61
+ descriptions.forEach(el => el.style.height = `${maxH}px`);
62
+ }
63
+
64
+ async _measureMaxHeight() {
65
+ const container = this.renderRoot.querySelector(".bd-features-container");
66
+ if (!container) return;
67
+
68
+ await this.updateComplete;
69
+ this._equalizeRows();
70
+ await new Promise(resolve => requestAnimationFrame(resolve));
71
+
72
+ const h = container.scrollHeight;
73
+ if (h > 0) {
74
+ this._minHeight = h;
75
+ }
76
+
77
+ await this.updateComplete;
78
+ this._equalizeRows();
79
+ }
80
+
81
+ _renderCol(col) {
82
+ const descEl = col.querySelector("[slot='description']");
83
+ const iconEl = col.querySelector("[slot='icon']");
84
+ const accordionEl = col.querySelector("bd-accordion-section");
85
+ const title = col.getAttribute("title");
86
+
87
+ return html`
88
+ <div class="bd-col">
89
+ <div class="col-icon-wrapper">
90
+ ${iconEl ? iconEl.cloneNode(true) : ""}
91
+ </div>
92
+ <div class="col-title-wrapper">
93
+ <bd-h as="h4">${title}</bd-h>
94
+ </div>
95
+ ${descEl
96
+ ? html`<div class="col-description"><bd-p kind="regular">${descEl.textContent}</bd-p></div>`
97
+ : ""}
98
+ ${accordionEl
99
+ ? accordionEl.cloneNode(true)
100
+ : ""}
101
+ </div>
102
+ `;
103
+ }
104
+
105
+ render() {
106
+ const cols = this._getCols();
107
+ const colCount = cols.length;
108
+
109
+ return html`
110
+ <div
111
+ class="bd-features-container"
112
+ style="grid-template-columns: repeat(${colCount}, 300px); ${this._minHeight ? `min-height: ${this._minHeight}px;` : ""}"
113
+ >
114
+ ${cols.map(col => this._renderCol(col))}
115
+ </div>
116
+ `;
117
+ }
118
+ }
119
+
120
+ customElements.define("bd-features", BdFeatures);
package/src/components/features/features.stories.js ADDED
@@ -0,0 +1,225 @@
1
+ import { html } from "lit";
2
+ import "../accordion/accordion.js";
3
+ import "../icons/family-icon.js";
4
+ import "../icons/globe-icon.js";
5
+ import "../icons/individual-icon.js";
6
+ import "../icons/laurel-icon.js";
7
+ import "../paragraph/paragraph.js";
8
+ import "./features.js";
9
+
10
+ export default {
11
+ title : "Components/Features",
12
+ tags : ["autodocs"],
13
+ parameters: {
14
+ layout: "padded",
15
+ docs : {
16
+ description: {
17
+ component: `
18
+ Componentă Lit pentru afișarea de feature-uri în coloane cu icon, titlu, descriere și accordion items.
19
+
20
+ \`\`\`html
21
+ <bd-features>
22
+ <bd-feature-col title="Protection">
23
+ <bd-individual-icon slot="icon" size="40" color="#006DFF"></bd-individual-icon>
24
+ <bd-p slot="description" kind="small">Descriere coloana</bd-p>
25
+ <bd-accordion-section no-container>
26
+ <bd-accordion-item title="Feature 1" open>
27
+ <bd-p kind="small">Detalii</bd-p>
28
+ </bd-accordion-item>
29
+ </bd-accordion-section>
30
+ </bd-feature-col>
31
+ </bd-features>
32
+ \`\`\`
33
+
34
+ ### Structura
35
+ - \`bd-features\` — componenta principală, randează coloanele în grid
36
+ - \`bd-feature-col\` — o coloană, primește \`title\`
37
+ - Slot \`icon\` — orice componentă de icon
38
+ - Slot \`description\` — text descriptiv sub titlul coloanei
39
+ - Slot default — \`bd-accordion-section\` cu \`no-container\`
40
+
41
+ ### Atribute \`bd-feature-col\`
42
+ | Atribut | Tip | Descriere |
43
+ |---|---|---|
44
+ | \`title\` | String | Titlul coloanei |
45
+
46
+ ### Iconițe disponibile
47
+ \`bd-individual-icon\`, \`bd-globe-icon\`, \`bd-family-icon\`, \`bd-laurel-icon\`
48
+ `
49
+ }
50
+ }
51
+ }
52
+ };
53
+
54
+ // ─── Stories ──────────────────────────────────────────────────────────────────
55
+
56
+ export const ThreeColumns = {
57
+ name : "Trei coloane",
58
+ parameters: { controls: { disable: true } },
59
+ render : () => html`
60
+ <bd-features>
61
+ <bd-feature-col title="Protection">
62
+ <bd-individual-icon slot="icon" size="40" color="#006DFF"></bd-individual-icon>
63
+ <bd-p slot="description" kind="small">Bitdefender's unbeatable multi-layered protection keeps your devices safe from all new and existing cyber threats.</bd-p>
64
+ <bd-accordion-section no-container>
65
+ <bd-accordion-item title="Complete Real-Time Data Protection" open>
66
+ <bd-p kind="small">Absolute power in the most efficient security bundle available today.</bd-p>
67
+ </bd-accordion-item>
68
+ <bd-accordion-item title="Network Threat Prevention">
69
+ <bd-p kind="small">Proactive network monitoring and threat detection.</bd-p>
70
+ </bd-accordion-item>
71
+ <bd-accordion-item title="Advanced Threat Defense">
72
+ <bd-p kind="small">Behavioral detection stops unknown threats before they execute.</bd-p>
73
+ </bd-accordion-item>
74
+ <bd-accordion-item title="Scam Copilot">
75
+ <bd-p kind="small">AI-powered scam detection and prevention.</bd-p>
76
+ </bd-accordion-item>
77
+ <bd-accordion-item title="Multi-Layer Ransomware Protection">
78
+ <bd-p kind="small">Protects your files from unauthorized encryption.</bd-p>
79
+ </bd-accordion-item>
80
+ </bd-accordion-section>
81
+ </bd-feature-col>
82
+
83
+ <bd-feature-col title="Privacy">
84
+ <bd-globe-icon slot="icon" size="40" color="#006DFF"></bd-globe-icon>
85
+ <bd-p slot="description" kind="small">Bitdefender Ultimate Security takes care of your online privacy and personal information.</bd-p>
86
+ <bd-accordion-section no-container>
87
+ <bd-accordion-item title="Unlimited VPN Traffic" open>
88
+ <bd-p kind="small">Encrypt your connection and stay private online.</bd-p>
89
+ </bd-accordion-item>
90
+ <bd-accordion-item title="Password Manager">
91
+ <bd-p kind="small">Store and autofill passwords securely.</bd-p>
92
+ </bd-accordion-item>
93
+ <bd-accordion-item title="Anti-tracker">
94
+ <bd-p kind="small">Block trackers and keep your browsing private.</bd-p>
95
+ </bd-accordion-item>
96
+ <bd-accordion-item title="Webcam Protection">
97
+ <bd-p kind="small">Prevent unauthorized webcam access.</bd-p>
98
+ </bd-accordion-item>
99
+ <bd-accordion-item title="Privacy Firewall">
100
+ <bd-p kind="small">Advanced firewall protection for your network.</bd-p>
101
+ </bd-accordion-item>
102
+ </bd-accordion-section>
103
+ </bd-feature-col>
104
+
105
+ <bd-feature-col title="Identity Protection">
106
+ <bd-family-icon slot="icon" size="40" color="#006DFF"></bd-family-icon>
107
+ <bd-p slot="description" kind="small">Goes beyond credit monitoring to protect you against identity theft attacks you might not always recognize.</bd-p>
108
+ <bd-accordion-section no-container>
109
+ <bd-accordion-item title="Continuous Dark Web Monitoring" open>
110
+ <bd-p kind="small">Get instant alerts if your data appears on the dark web.</bd-p>
111
+ </bd-accordion-item>
112
+ <bd-accordion-item title="Digital Footprint Visualization">
113
+ <bd-p kind="small">See and reduce your digital exposure online.</bd-p>
114
+ </bd-accordion-item>
115
+ <bd-accordion-item title="Identity Protection Score">
116
+ <bd-p kind="small">Understand your identity risk at a glance.</bd-p>
117
+ </bd-accordion-item>
118
+ <bd-accordion-item title="Real Time Breach Notifications">
119
+ <bd-p kind="small">Be first to know when your accounts are compromised.</bd-p>
120
+ </bd-accordion-item>
121
+ <bd-accordion-item title="Credit Report Monitoring">
122
+ <bd-p kind="small">Track changes to your credit report in real time.</bd-p>
123
+ </bd-accordion-item>
124
+ </bd-accordion-section>
125
+ </bd-feature-col>
126
+ </bd-features>
127
+ `
128
+ };
129
+
130
+ export const TwoColumns = {
131
+ name : "Două coloane",
132
+ parameters: { controls: { disable: true } },
133
+ render : () => html`
134
+ <bd-features>
135
+ <bd-feature-col title="Protection">
136
+ <bd-individual-icon slot="icon" size="40" color="#006DFF"></bd-individual-icon>
137
+ <bd-p slot="description" kind="small">Protection description.</bd-p>
138
+ <bd-accordion-section no-container>
139
+ <bd-accordion-item title="Real-Time Protection" open>
140
+ <bd-p kind="small">Content here</bd-p>
141
+ </bd-accordion-item>
142
+ <bd-accordion-item title="Network Threat Prevention">
143
+ <bd-p kind="small">Content here</bd-p>
144
+ </bd-accordion-item>
145
+ </bd-accordion-section>
146
+ </bd-feature-col>
147
+
148
+ <bd-feature-col title="Privacy">
149
+ <bd-globe-icon slot="icon" size="40" color="#006DFF"></bd-globe-icon>
150
+ <bd-p slot="description" kind="small">Privacy description.</bd-p>
151
+ <bd-accordion-section no-container>
152
+ <bd-accordion-item title="VPN Traffic" open>
153
+ <bd-p kind="small">Content here</bd-p>
154
+ </bd-accordion-item>
155
+ <bd-accordion-item title="Password Manager">
156
+ <bd-p kind="small">Content here</bd-p>
157
+ </bd-accordion-item>
158
+ </bd-accordion-section>
159
+ </bd-feature-col>
160
+ </bd-features>
161
+ `
162
+ };
163
+
164
+ export const OneColumn = {
165
+ name : "O coloană",
166
+ parameters: { controls: { disable: true } },
167
+ render : () => html`
168
+ <bd-features>
169
+ <bd-feature-col title="Protection">
170
+ <bd-individual-icon slot="icon" size="40" color="#006DFF"></bd-individual-icon>
171
+ <bd-p slot="description" kind="small">Single column protection description.</bd-p>
172
+ <bd-accordion-section no-container>
173
+ <bd-accordion-item title="Real-Time Protection" open>
174
+ <bd-p kind="small">Content here</bd-p>
175
+ </bd-accordion-item>
176
+ <bd-accordion-item title="Network Threat Prevention">
177
+ <bd-p kind="small">Content here</bd-p>
178
+ </bd-accordion-item>
179
+ <bd-accordion-item title="Advanced Threat Defense">
180
+ <bd-p kind="small">Content here</bd-p>
181
+ </bd-accordion-item>
182
+ </bd-accordion-section>
183
+ </bd-feature-col>
184
+ </bd-features>
185
+ `
186
+ };
187
+
188
+ export const MobileView = {
189
+ name : "Mobile View (375px)",
190
+ parameters: {
191
+ viewport: { defaultViewport: "mobile1" },
192
+ controls: { disable: true }
193
+ },
194
+ render: () => html`
195
+ <bd-features>
196
+ <bd-feature-col title="Protection">
197
+ <bd-individual-icon slot="icon" size="40" color="#006DFF"></bd-individual-icon>
198
+ <bd-p slot="description" kind="small">Protection description.</bd-p>
199
+ <bd-accordion-section no-container>
200
+ <bd-accordion-item title="Real-Time Protection" open>
201
+ <bd-p kind="small">Content here</bd-p>
202
+ </bd-accordion-item>
203
+ </bd-accordion-section>
204
+ </bd-feature-col>
205
+ <bd-feature-col title="Privacy">
206
+ <bd-globe-icon slot="icon" size="40" color="#006DFF"></bd-globe-icon>
207
+ <bd-p slot="description" kind="small">Privacy description.</bd-p>
208
+ <bd-accordion-section no-container>
209
+ <bd-accordion-item title="VPN Traffic" open>
210
+ <bd-p kind="small">Content here</bd-p>
211
+ </bd-accordion-item>
212
+ </bd-accordion-section>
213
+ </bd-feature-col>
214
+ <bd-feature-col title="Identity Protection">
215
+ <bd-family-icon slot="icon" size="40" color="#006DFF"></bd-family-icon>
216
+ <bd-p slot="description" kind="small">Identity description.</bd-p>
217
+ <bd-accordion-section no-container>
218
+ <bd-accordion-item title="Dark Web Monitoring" open>
219
+ <bd-p kind="small">Content here</bd-p>
220
+ </bd-accordion-item>
221
+ </bd-accordion-section>
222
+ </bd-feature-col>
223
+ </bd-features>
224
+ `
225
+ };
package/src/components/tabs/tabs.css.js CHANGED
@@ -26,8 +26,8 @@ export default css`
26
26
  max-width: 780px;
27
27
  text-align: center;
28
28
  font-family: var(--typography-fontFamily-sans);
29
- margin-top: var(--spacing-16);
30
- margin-bottom: var(--spacing-8);
29
+ margin-top: var(--spacing-32);
30
+ margin-bottom: var(--spacing-32);
31
31
  }
32
32
 
33
33
  /* Tab buttons row */
@@ -36,8 +36,7 @@ export default css`
36
36
  justify-content: center;
37
37
  flex-wrap: wrap;
38
38
  border-bottom: 1px solid var(--color-neutral-100);
39
- margin-top: var(--spacing-32);
40
- margin-bottom: var(--spacing-48);
39
+ // margin-bottom: var(--spacing-32);
41
40
  }
42
41
 
43
42
  .bd-tab-button {
package/src/components/tabs/tabs.js CHANGED
@@ -1,12 +1,8 @@
1
1
  import { LitElement, html } from "lit";
2
2
  import { tokens } from "../../tokens/tokens.js";
3
- import "../accordion/accordion.js";
3
+ import "../features/features.js";
4
4
  import "../heading/heading.js";
5
5
  import "../highlight/highlight.js";
6
- import "../icons/family-icon.js";
7
- import "../icons/globe-icon.js";
8
- import "../icons/individual-icon.js";
9
- import "../icons/laurel-icon.js";
10
6
  import "../paragraph/paragraph.js";
11
7
  import tabsCSS from "./tabs.css.js";
12
8
 
@@ -19,19 +15,13 @@ class BdTabPanel extends HTMLElement {
19
15
  }
20
16
  customElements.define("bd-tab-panel", BdTabPanel);
21
17
 
22
- // ─── BdTabCol — Light DOM wrapper ────────────────────────────────────────────
23
-
24
- class BdTabCol extends HTMLElement {}
25
- customElements.define("bd-tab-col", BdTabCol);
26
-
27
18
  // ─── BdTabs ──────────────────────────────────────────────────────────────────
28
19
 
29
20
  class BdTabs extends LitElement {
30
21
  static properties = {
31
22
  title : { type: String },
32
23
  subtitle : { type: String },
33
- selectedTab: { type: Number, state: true },
34
- _minHeight : { state: true }
24
+ selectedTab: { type: Number, state: true }
35
25
  };
36
26
 
37
27
  static styles = [tokens, tabsCSS];
@@ -41,107 +31,24 @@ class BdTabs extends LitElement {
41
31
  this.title = "";
42
32
  this.subtitle = "";
43
33
  this.selectedTab = 0;
44
- this._minHeight = 0;
45
34
  }
46
35
 
47
36
  _getPanels() {
48
37
  return Array.from(this.querySelectorAll(":scope > bd-tab-panel"));
49
38
  }
50
39
 
51
- _getCols(panel) {
52
- return Array.from(panel.querySelectorAll(":scope > bd-tab-col"));
40
+ _getColsFromPanel(panel) {
41
+ return Array.from(panel.querySelectorAll(":scope > bd-feature-col"));
53
42
  }
54
43
 
55
44
  selectTab(index) {
56
45
  this.selectedTab = index;
57
- this.updateComplete.then(() => this._equalizeRows());
58
- }
59
-
60
- async firstUpdated() {
61
- await this._measureMaxHeight();
62
- }
63
-
64
- _equalizeRows() {
65
- const container = this.renderRoot.querySelector(".bd-columns-container");
66
- if (!container) return;
67
-
68
- const icons = container.querySelectorAll(".col-icon-wrapper");
69
- const titles = container.querySelectorAll(".col-title-wrapper");
70
- const descriptions = container.querySelectorAll(".col-description");
71
-
72
- // Reset
73
- icons.forEach(el => el.style.height = "");
74
- titles.forEach(el => el.style.height = "");
75
- descriptions.forEach(el => el.style.height = "");
76
-
77
- // Egalizează icon-uri
78
- let maxH = 0;
79
- icons.forEach(el => { if (el.scrollHeight > maxH) maxH = el.scrollHeight; });
80
- icons.forEach(el => el.style.height = `${maxH}px`);
81
-
82
- // Egalizează titluri
83
- maxH = 0;
84
- titles.forEach(el => { if (el.scrollHeight > maxH) maxH = el.scrollHeight; });
85
- titles.forEach(el => el.style.height = `${maxH}px`);
86
-
87
- // Egalizează descrieri
88
- maxH = 0;
89
- descriptions.forEach(el => { if (el.scrollHeight > maxH) maxH = el.scrollHeight; });
90
- descriptions.forEach(el => el.style.height = `${maxH}px`);
91
- }
92
-
93
- async _measureMaxHeight() {
94
- const panels = this._getPanels();
95
- const container = this.renderRoot.querySelector(".bd-columns-container");
96
- if (!container || panels.length === 0) return;
97
-
98
- let maxHeight = 0;
99
- const originalTab = this.selectedTab;
100
-
101
- for (let i = 0; i < panels.length; i++) {
102
- this.selectedTab = i;
103
- await this.updateComplete;
104
- this._equalizeRows();
105
- await new Promise(resolve => requestAnimationFrame(resolve));
106
- const h = container.scrollHeight;
107
- if (h > maxHeight) maxHeight = h;
108
- }
109
-
110
- this.selectedTab = originalTab;
111
- this._minHeight = maxHeight;
112
- await this.updateComplete;
113
- this._equalizeRows();
114
- }
115
-
116
- _renderCol(col) {
117
- const descEl = col.querySelector("[slot='description']");
118
- const iconEl = col.querySelector("[slot='icon']");
119
- const accordionEl = col.querySelector("bd-accordion-section");
120
- const title = col.getAttribute("title");
121
-
122
- return html`
123
- <div class="bd-col">
124
- <div class="col-icon-wrapper">
125
- ${iconEl ? iconEl.cloneNode(true) : ""}
126
- </div>
127
- <div class="col-title-wrapper">
128
- <bd-h as="h4">${title}</bd-h>
129
- </div>
130
- ${descEl
131
- ? html`<div class="col-description"><bd-p kind="regular">${descEl.textContent}</bd-p></div>`
132
- : ""}
133
- ${accordionEl
134
- ? accordionEl.cloneNode(true)
135
- : ""}
136
- </div>
137
- `;
138
46
  }
139
47
 
140
48
  render() {
141
49
  const panels = this._getPanels();
142
50
  const activePanel = panels[this.selectedTab];
143
- const cols = activePanel ? this._getCols(activePanel) : [];
144
- const colCount = cols.length;
51
+ const cols = activePanel ? this._getColsFromPanel(activePanel) : [];
145
52
 
146
53
  return html`
147
54
  <div class="bd-tabs-component">
@@ -170,15 +77,16 @@ class BdTabs extends LitElement {
170
77
  `)}
171
78
  </div>
172
79
 
173
- <!-- Active panel — grid cu coloane -->
80
+ <!-- Active panel — bd-features cu coloanele panelului activ -->
174
81
  <div
175
82
  id="tab-panel-${this.selectedTab}"
176
83
  role="tabpanel"
177
84
  aria-labelledby="tab-btn-${this.selectedTab}"
178
- class="bd-columns-container"
179
- style="grid-template-columns: repeat(${colCount}, 300px); ${this._minHeight ? `min-height: ${this._minHeight}px;` : ""}"
85
+ class="bd-panel-wrapper"
180
86
  >
181
- ${cols.map(col => this._renderCol(col))}
87
+ <bd-features>
88
+ ${cols.map(col => col.cloneNode(true))}
89
+ </bd-features>
182
90
  </div>
183
91
 
184
92
  </div>
package/src/components/tabs/tabs.stories.js CHANGED
@@ -1,5 +1,6 @@
1
1
  import { html } from "lit";
2
2
  import "../accordion/accordion.js";
3
+ import "../features/features.js";
3
4
  import "../icons/family-icon.js";
4
5
  import "../icons/globe-icon.js";
5
6
  import "../icons/individual-icon.js";
@@ -20,7 +21,7 @@ Componentă Lit pentru afișarea de feature-uri în taburi cu coloane de accordi
20
21
  \`\`\`html
21
22
  <bd-tabs title="..." subtitle="...">
22
23
  <bd-tab-panel title="Windows">
23
- <bd-tab-col title="Protection">
24
+ <bd-feature-col title="Protection">
24
25
  <bd-individual-icon slot="icon" size="40" color="#006DFF"></bd-individual-icon>
25
26
  <bd-p slot="description" kind="small">Descriere coloana</bd-p>
26
27
  <bd-accordion-section no-container>
@@ -28,7 +29,7 @@ Componentă Lit pentru afișarea de feature-uri în taburi cu coloane de accordi
28
29
  <bd-p kind="small">Detalii</bd-p>
29
30
  </bd-accordion-item>
30
31
  </bd-accordion-section>
31
- </bd-tab-col>
32
+ </bd-feature-col>
32
33
  </bd-tab-panel>
33
34
  </bd-tabs>
34
35
  \`\`\`
@@ -36,7 +37,7 @@ Componentă Lit pentru afișarea de feature-uri în taburi cu coloane de accordi
36
37
  ### Structura
37
38
  - \`bd-tabs\` — componenta principală, primește \`title\` și \`subtitle\`
38
39
  - \`bd-tab-panel\` — un panel per tab (ex: Windows, macOS), primește \`title\`
39
- - \`bd-tab-col\` — o coloană în panel, primește \`title\`
40
+ - \`bd-feature-col\` — o coloană în panel, primește \`title\`
40
41
  - Slot \`icon\` — orice componentă de icon (ex: \`<bd-individual-icon slot="icon">\`)
41
42
  - Slot \`description\` — text descriptiv sub titlul coloanei
42
43
  - Slot default — conținut accordion (\`bd-accordion-section\` cu \`no-container\`)
@@ -52,7 +53,7 @@ Componentă Lit pentru afișarea de feature-uri în taburi cu coloane de accordi
52
53
  |---|---|---|
53
54
  | \`title\` | String | Label-ul butonului de tab (ex: Windows) |
54
55
 
55
- ### Atribute \`bd-tab-col\`
56
+ ### Atribute \`bd-feature-col\`
56
57
  | Atribut | Tip | Descriere |
57
58
  |---|---|---|
58
59
  | \`title\` | String | Titlul coloanei (ex: Protection) |
@@ -70,7 +71,7 @@ Componentă Lit pentru afișarea de feature-uri în taburi cu coloane de accordi
70
71
  const windowsPanel = html`
71
72
  <bd-tab-panel title="Windows">
72
73
 
73
- <bd-tab-col title="Protection">
74
+ <bd-feature-col title="Protection">
74
75
  <bd-individual-icon slot="icon" size="40" color="#006DFF"></bd-individual-icon>
75
76
  <bd-p slot="description" kind="small">Bitdefender's unbeatable multi-layered protection keeps your devices safe from all new and existing cyber threats.</bd-p>
76
77
  <bd-accordion-section no-container>
@@ -111,9 +112,9 @@ const windowsPanel = html`
111
112
  <bd-p kind="small">Filters out spam and unwanted emails effectively.</bd-p>
112
113
  </bd-accordion-item>
113
114
  </bd-accordion-section>
114
- </bd-tab-col>
115
+ </bd-feature-col>
115
116
 
116
- <bd-tab-col title="Privacy">
117
+ <bd-feature-col title="Privacy">
117
118
  <bd-globe-icon slot="icon" size="40" color="#006DFF"></bd-globe-icon>
118
119
  <bd-p slot="description" kind="small">Bitdefender Ultimate Security takes care of your online privacy and personal information.</bd-p>
119
120
  <bd-accordion-section no-container>
@@ -151,9 +152,9 @@ const windowsPanel = html`
151
152
  <bd-p kind="small">Permanently delete sensitive files beyond recovery.</bd-p>
152
153
  </bd-accordion-item>
153
154
  </bd-accordion-section>
154
- </bd-tab-col>
155
+ </bd-feature-col>
155
156
 
156
- <bd-tab-col title="Identity Protection">
157
+ <bd-feature-col title="Identity Protection">
157
158
  <bd-family-icon slot="icon" size="40" color="#006DFF"></bd-family-icon>
158
159
  <bd-p slot="description" kind="small">Goes beyond credit monitoring to protect you against identity theft attacks you might not always recognize.</bd-p>
159
160
  <bd-accordion-section no-container>
@@ -194,7 +195,7 @@ const windowsPanel = html`
194
195
  <bd-p kind="small">Alerts you to suspicious identity usage attempts.</bd-p>
195
196
  </bd-accordion-item>
196
197
  </bd-accordion-section>
197
- </bd-tab-col>
198
+ </bd-feature-col>
198
199
 
199
200
  </bd-tab-panel>
200
201
  `;
@@ -202,7 +203,7 @@ const windowsPanel = html`
202
203
  const macosPanel = html`
203
204
  <bd-tab-panel title="macOS">
204
205
 
205
- <bd-tab-col title="Protection">
206
+ <bd-feature-col title="Protection">
206
207
  <bd-individual-icon slot="icon" size="40" color="#006DFF"></bd-individual-icon>
207
208
  <bd-p slot="description" kind="small">macOS protection description.</bd-p>
208
209
  <bd-accordion-section no-container>
@@ -213,9 +214,9 @@ const macosPanel = html`
213
214
  <bd-p kind="small">Content here</bd-p>
214
215
  </bd-accordion-item>
215
216
  </bd-accordion-section>
216
- </bd-tab-col>
217
+ </bd-feature-col>
217
218
 
218
- <bd-tab-col title="Privacy">
219
+ <bd-feature-col title="Privacy">
219
220
  <bd-globe-icon slot="icon" size="40" color="#006DFF"></bd-globe-icon>
220
221
  <bd-p slot="description" kind="small">macOS privacy description.</bd-p>
221
222
  <bd-accordion-section no-container>
@@ -223,9 +224,9 @@ const macosPanel = html`
223
224
  <bd-p kind="small">Content for macOS privacy.</bd-p>
224
225
  </bd-accordion-item>
225
226
  </bd-accordion-section>
226
- </bd-tab-col>
227
+ </bd-feature-col>
227
228
 
228
- <bd-tab-col title="Identity Protection">
229
+ <bd-feature-col title="Identity Protection">
229
230
  <bd-family-icon slot="icon" size="40" color="#006DFF"></bd-family-icon>
230
231
  <bd-p slot="description" kind="small">macOS identity description.</bd-p>
231
232
  <bd-accordion-section no-container>
@@ -233,7 +234,7 @@ const macosPanel = html`
233
234
  <bd-p kind="small">Content for macOS identity.</bd-p>
234
235
  </bd-accordion-item>
235
236
  </bd-accordion-section>
236
- </bd-tab-col>
237
+ </bd-feature-col>
237
238
 
238
239
  </bd-tab-panel>
239
240
  `;
@@ -241,7 +242,7 @@ const macosPanel = html`
241
242
  const iosPanel = html`
242
243
  <bd-tab-panel title="iOS">
243
244
 
244
- <bd-tab-col title="Protection">
245
+ <bd-feature-col title="Protection">
245
246
  <bd-individual-icon slot="icon" size="40" color="#006DFF"></bd-individual-icon>
246
247
  <bd-p slot="description" kind="small">iOS protection description.</bd-p>
247
248
  <bd-accordion-section no-container>
@@ -249,9 +250,9 @@ const iosPanel = html`
249
250
  <bd-p kind="small">Content here</bd-p>
250
251
  </bd-accordion-item>
251
252
  </bd-accordion-section>
252
- </bd-tab-col>
253
+ </bd-feature-col>
253
254
 
254
- <bd-tab-col title="Privacy">
255
+ <bd-feature-col title="Privacy">
255
256
  <bd-globe-icon slot="icon" size="40" color="#006DFF"></bd-globe-icon>
256
257
  <bd-p slot="description" kind="small">iOS privacy description.</bd-p>
257
258
  <bd-accordion-section no-container>
@@ -259,9 +260,9 @@ const iosPanel = html`
259
260
  <bd-p kind="small">Content here</bd-p>
260
261
  </bd-accordion-item>
261
262
  </bd-accordion-section>
262
- </bd-tab-col>
263
+ </bd-feature-col>
263
264
 
264
- <bd-tab-col title="Identity Protection">
265
+ <bd-feature-col title="Identity Protection">
265
266
  <bd-family-icon slot="icon" size="40" color="#006DFF"></bd-family-icon>
266
267
  <bd-p slot="description" kind="small">iOS identity description.</bd-p>
267
268
  <bd-accordion-section no-container>
@@ -269,7 +270,7 @@ const iosPanel = html`
269
270
  <bd-p kind="small">Content here</bd-p>
270
271
  </bd-accordion-item>
271
272
  </bd-accordion-section>
272
- </bd-tab-col>
273
+ </bd-feature-col>
273
274
 
274
275
  </bd-tab-panel>
275
276
  `;
@@ -277,7 +278,7 @@ const iosPanel = html`
277
278
  const androidPanel = html`
278
279
  <bd-tab-panel title="Android">
279
280
 
280
- <bd-tab-col title="Protection">
281
+ <bd-feature-col title="Protection">
281
282
  <bd-individual-icon slot="icon" size="40" color="#006DFF"></bd-individual-icon>
282
283
  <bd-p slot="description" kind="small">Android protection description.</bd-p>
283
284
  <bd-accordion-section no-container>
@@ -285,9 +286,9 @@ const androidPanel = html`
285
286
  <bd-p kind="small">Content here</bd-p>
286
287
  </bd-accordion-item>
287
288
  </bd-accordion-section>
288
- </bd-tab-col>
289
+ </bd-feature-col>
289
290
 
290
- <bd-tab-col title="Privacy">
291
+ <bd-feature-col title="Privacy">
291
292
  <bd-globe-icon slot="icon" size="40" color="#006DFF"></bd-globe-icon>
292
293
  <bd-p slot="description" kind="small">Android privacy description.</bd-p>
293
294
  <bd-accordion-section no-container>
@@ -295,9 +296,9 @@ const androidPanel = html`
295
296
  <bd-p kind="small">Content here</bd-p>
296
297
  </bd-accordion-item>
297
298
  </bd-accordion-section>
298
- </bd-tab-col>
299
+ </bd-feature-col>
299
300
 
300
- <bd-tab-col title="Identity Protection">
301
+ <bd-feature-col title="Identity Protection">
301
302
  <bd-family-icon slot="icon" size="40" color="#006DFF"></bd-family-icon>
302
303
  <bd-p slot="description" kind="small">Android identity description.</bd-p>
303
304
  <bd-accordion-section no-container>
@@ -305,7 +306,7 @@ const androidPanel = html`
305
306
  <bd-p kind="small">Content here</bd-p>
306
307
  </bd-accordion-item>
307
308
  </bd-accordion-section>
308
- </bd-tab-col>
309
+ </bd-feature-col>
309
310
 
310
311
  </bd-tab-panel>
311
312
  `;
@@ -375,7 +376,7 @@ export const TwoColumns = {
375
376
  subtitle="Demonstrează flexibilitatea numărului de coloane."
376
377
  >
377
378
  <bd-tab-panel title="Windows">
378
- <bd-tab-col title="Protection">
379
+ <bd-feature-col title="Protection">
379
380
  <bd-individual-icon slot="icon" size="40" color="#006DFF"></bd-individual-icon>
380
381
  <bd-p slot="description" kind="small">Protection description.</bd-p>
381
382
  <bd-accordion-section no-container>
@@ -386,8 +387,8 @@ export const TwoColumns = {
386
387
  <bd-p kind="small">Content here</bd-p>
387
388
  </bd-accordion-item>
388
389
  </bd-accordion-section>
389
- </bd-tab-col>
390
- <bd-tab-col title="Privacy">
390
+ </bd-feature-col>
391
+ <bd-feature-col title="Privacy">
391
392
  <bd-globe-icon slot="icon" size="40" color="#006DFF"></bd-globe-icon>
392
393
  <bd-p slot="description" kind="small">Privacy description.</bd-p>
393
394
  <bd-accordion-section no-container>
@@ -398,11 +399,11 @@ export const TwoColumns = {
398
399
  <bd-p kind="small">Content here</bd-p>
399
400
  </bd-accordion-item>
400
401
  </bd-accordion-section>
401
- </bd-tab-col>
402
+ </bd-feature-col>
402
403
  </bd-tab-panel>
403
404
 
404
405
  <bd-tab-panel title="macOS">
405
- <bd-tab-col title="Protection">
406
+ <bd-feature-col title="Protection">
406
407
  <bd-individual-icon slot="icon" size="40" color="#006DFF"></bd-individual-icon>
407
408
  <bd-p slot="description" kind="small">macOS protection.</bd-p>
408
409
  <bd-accordion-section no-container>
@@ -410,8 +411,8 @@ export const TwoColumns = {
410
411
  <bd-p kind="small">Content here</bd-p>
411
412
  </bd-accordion-item>
412
413
  </bd-accordion-section>
413
- </bd-tab-col>
414
- <bd-tab-col title="Privacy">
414
+ </bd-feature-col>
415
+ <bd-feature-col title="Privacy">
415
416
  <bd-globe-icon slot="icon" size="40" color="#006DFF"></bd-globe-icon>
416
417
  <bd-p slot="description" kind="small">macOS privacy.</bd-p>
417
418
  <bd-accordion-section no-container>
@@ -419,7 +420,7 @@ export const TwoColumns = {
419
420
  <bd-p kind="small">Content here</bd-p>
420
421
  </bd-accordion-item>
421
422
  </bd-accordion-section>
422
- </bd-tab-col>
423
+ </bd-feature-col>
423
424
  </bd-tab-panel>
424
425
  </bd-tabs>
425
426
  `
@@ -434,7 +435,7 @@ export const OneColumn = {
434
435
  subtitle="Demonstrează o singură coloană centrată."
435
436
  >
436
437
  <bd-tab-panel title="Windows">
437
- <bd-tab-col title="Protection">
438
+ <bd-feature-col title="Protection">
438
439
  <bd-individual-icon slot="icon" size="40" color="#006DFF"></bd-individual-icon>
439
440
  <bd-p slot="description" kind="small">Single column protection description.</bd-p>
440
441
  <bd-accordion-section no-container>
@@ -448,11 +449,11 @@ export const OneColumn = {
448
449
  <bd-p kind="small">Content here</bd-p>
449
450
  </bd-accordion-item>
450
451
  </bd-accordion-section>
451
- </bd-tab-col>
452
+ </bd-feature-col>
452
453
  </bd-tab-panel>
453
454
 
454
455
  <bd-tab-panel title="macOS">
455
- <bd-tab-col title="Protection">
456
+ <bd-feature-col title="Protection">
456
457
  <bd-laurel-icon slot="icon" size="40" color="#006DFF"></bd-laurel-icon>
457
458
  <bd-p slot="description" kind="small">macOS single column description.</bd-p>
458
459
  <bd-accordion-section no-container>
@@ -460,7 +461,7 @@ export const OneColumn = {
460
461
  <bd-p kind="small">Content here</bd-p>
461
462
  </bd-accordion-item>
462
463
  </bd-accordion-section>
463
- </bd-tab-col>
464
+ </bd-feature-col>
464
465
  </bd-tab-panel>
465
466
  </bd-tabs>
466
467
  `