@repobit/dex-system-design 0.23.50 → 0.23.52
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.
- package/CHANGELOG.md +14 -0
- package/package.json +4 -4
- package/src/components/accordion/accordion-bg.css.js +3 -1
- package/src/components/accordion/accordion.css.js +3 -0
- package/src/components/card-features/card-features.css.js +2 -2
- package/src/components/features/features.css.js +6 -4
- package/src/components/features/features.js +8 -6
- package/src/components/tabs/tabs.js +6 -9
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.52](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.23.51...@repobit/dex-system-design@0.23.52) (2026-06-23)
|
|
7
|
+
|
|
8
|
+
### Bug Fixes
|
|
9
|
+
|
|
10
|
+
* **DEX-1014:** css adjustments for features and tabs component
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
## [0.23.51](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.23.50...@repobit/dex-system-design@0.23.51) (2026-06-22)
|
|
14
|
+
|
|
15
|
+
### Bug Fixes
|
|
16
|
+
|
|
17
|
+
* **DEX-1014:** css adjustments for accordion and card features
|
|
18
|
+
|
|
19
|
+
|
|
6
20
|
## [0.23.50](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.23.49...@repobit/dex-system-design@0.23.50) (2026-06-17)
|
|
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.
|
|
3
|
+
"version": "0.23.52",
|
|
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.
|
|
74
|
-
"@repobit/dex-store-elements": "1.4.
|
|
73
|
+
"@repobit/dex-store": "1.3.48",
|
|
74
|
+
"@repobit/dex-store-elements": "1.4.40",
|
|
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": "
|
|
91
|
+
"gitHead": "10b79725b3ab54c9aa0fab51c9b458941a483ef2"
|
|
92
92
|
}
|
|
@@ -92,6 +92,9 @@ export const accordionItem = css`
|
|
|
92
92
|
margin-bottom: var(--bd-acc-header-margin-bottom, var(--spacing-16));
|
|
93
93
|
}
|
|
94
94
|
|
|
95
|
+
:host-context(bd-features) .header {
|
|
96
|
+
margin-bottom: var(--spacing-8);
|
|
97
|
+
}
|
|
95
98
|
.header:focus-visible {
|
|
96
99
|
outline: none;
|
|
97
100
|
box-shadow: none;
|
|
@@ -5,8 +5,8 @@ export default css`
|
|
|
5
5
|
display: block;
|
|
6
6
|
--background-card-grey: var(--color-neutral-25);
|
|
7
7
|
--border-card-grey: var(--color-neutral-50);
|
|
8
|
-
padding-top: var(--spacing-32);
|
|
9
|
-
padding-bottom: var(--spacing-32);
|
|
8
|
+
// padding-top: var(--spacing-32);
|
|
9
|
+
// padding-bottom: var(--spacing-32);
|
|
10
10
|
}
|
|
11
11
|
|
|
12
12
|
.bd-card-features-s {
|
|
@@ -4,8 +4,9 @@ export default css`
|
|
|
4
4
|
:host {
|
|
5
5
|
display: block;
|
|
6
6
|
width: 100%;
|
|
7
|
-
padding-top: var(--spacing-
|
|
8
|
-
padding-bottom: var(--spacing-
|
|
7
|
+
padding-top: var(--spacing-64);
|
|
8
|
+
padding-bottom: var(--spacing-64);
|
|
9
|
+
--bd-acc-header-margin-bottom: var(--spacing-8);
|
|
9
10
|
}
|
|
10
11
|
|
|
11
12
|
/* Columns grid */
|
|
@@ -20,7 +21,8 @@ export default css`
|
|
|
20
21
|
.bd-col {
|
|
21
22
|
display: flex;
|
|
22
23
|
flex-direction: column;
|
|
23
|
-
width:
|
|
24
|
+
width: 100%;
|
|
25
|
+
max-width: 400px;
|
|
24
26
|
}
|
|
25
27
|
|
|
26
28
|
/* Icon wrapper */
|
|
@@ -51,7 +53,7 @@ export default css`
|
|
|
51
53
|
/* Responsive */
|
|
52
54
|
@media (max-width: 992px) {
|
|
53
55
|
.bd-col {
|
|
54
|
-
width:
|
|
56
|
+
max-width: 100%;
|
|
55
57
|
}
|
|
56
58
|
}
|
|
57
59
|
|
|
@@ -6,13 +6,9 @@ import "../image/image.js";
|
|
|
6
6
|
import "../paragraph/paragraph.js";
|
|
7
7
|
import featuresCSS from "./features.css.js";
|
|
8
8
|
|
|
9
|
-
// ─── BdFeatureCol — Light DOM wrapper ────────────────────────────────────────
|
|
10
|
-
|
|
11
9
|
class BdFeatureCol extends HTMLElement {}
|
|
12
10
|
customElements.define("bd-feature-col", BdFeatureCol);
|
|
13
11
|
|
|
14
|
-
// ─── BdFeatures ──────────────────────────────────────────────────────────────
|
|
15
|
-
|
|
16
12
|
class BdFeatures extends LitElement {
|
|
17
13
|
static properties = {
|
|
18
14
|
_minHeight: { state: true }
|
|
@@ -108,7 +104,13 @@ class BdFeatures extends LitElement {
|
|
|
108
104
|
? html`<div class="col-description"><bd-p kind="regular">${descEl.textContent}</bd-p></div>`
|
|
109
105
|
: ""}
|
|
110
106
|
${accordionEl
|
|
111
|
-
?
|
|
107
|
+
? (() => {
|
|
108
|
+
const clone = accordionEl.cloneNode(true);
|
|
109
|
+
clone.querySelectorAll("bd-accordion-item").forEach(item => {
|
|
110
|
+
item.style.setProperty("--bd-acc-header-margin-bottom", "var(--spacing-8)");
|
|
111
|
+
});
|
|
112
|
+
return clone;
|
|
113
|
+
})()
|
|
112
114
|
: ""}
|
|
113
115
|
</div>
|
|
114
116
|
`;
|
|
@@ -121,7 +123,7 @@ class BdFeatures extends LitElement {
|
|
|
121
123
|
return html`
|
|
122
124
|
<div
|
|
123
125
|
class="bd-features-container"
|
|
124
|
-
style="grid-template-columns: repeat(${colCount},
|
|
126
|
+
style="grid-template-columns: repeat(${colCount}, 1fr); ${this._minHeight ? `min-height: ${this._minHeight}px;` : ""}"
|
|
125
127
|
>
|
|
126
128
|
${cols.map(col => this._renderCol(col))}
|
|
127
129
|
</div>
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { LitElement, html } from "lit";
|
|
2
|
+
import { keyed } from "lit/directives/keyed.js";
|
|
2
3
|
import { tokens } from "../../tokens/tokens.js";
|
|
3
4
|
import "../features/features.js";
|
|
4
5
|
import "../heading/heading.js";
|
|
@@ -6,8 +7,6 @@ import "../highlight/highlight.js";
|
|
|
6
7
|
import "../paragraph/paragraph.js";
|
|
7
8
|
import tabsCSS from "./tabs.css.js";
|
|
8
9
|
|
|
9
|
-
// ─── BdTabPanel — Light DOM wrapper ──────────────────────────────────────────
|
|
10
|
-
|
|
11
10
|
class BdTabPanel extends HTMLElement {
|
|
12
11
|
connectedCallback() {
|
|
13
12
|
this.style.display = "none";
|
|
@@ -15,8 +14,6 @@ class BdTabPanel extends HTMLElement {
|
|
|
15
14
|
}
|
|
16
15
|
customElements.define("bd-tab-panel", BdTabPanel);
|
|
17
16
|
|
|
18
|
-
// ─── BdTabs ──────────────────────────────────────────────────────────────────
|
|
19
|
-
|
|
20
17
|
class BdTabs extends LitElement {
|
|
21
18
|
static properties = {
|
|
22
19
|
title : { type: String },
|
|
@@ -61,7 +58,6 @@ class BdTabs extends LitElement {
|
|
|
61
58
|
? html`<bd-p kind="large" class="bd-tabs-subtitle">${this.subtitle}</bd-p>`
|
|
62
59
|
: ""}
|
|
63
60
|
|
|
64
|
-
<!-- Tab buttons -->
|
|
65
61
|
<div class="bd-tabs-container" role="tablist">
|
|
66
62
|
${panels.map((panel, index) => html`
|
|
67
63
|
<button
|
|
@@ -77,16 +73,17 @@ class BdTabs extends LitElement {
|
|
|
77
73
|
`)}
|
|
78
74
|
</div>
|
|
79
75
|
|
|
80
|
-
<!-- Active panel — bd-features cu coloanele panelului activ -->
|
|
81
76
|
<div
|
|
82
77
|
id="tab-panel-${this.selectedTab}"
|
|
83
78
|
role="tabpanel"
|
|
84
79
|
aria-labelledby="tab-btn-${this.selectedTab}"
|
|
85
80
|
class="bd-panel-wrapper"
|
|
86
81
|
>
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
82
|
+
${keyed(this.selectedTab, html`
|
|
83
|
+
<bd-features>
|
|
84
|
+
${cols.map(col => col.cloneNode(true))}
|
|
85
|
+
</bd-features>
|
|
86
|
+
`)}
|
|
90
87
|
</div>
|
|
91
88
|
|
|
92
89
|
</div>
|