@repobit/dex-system-design 0.23.36 → 0.23.38
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
CHANGED
|
@@ -3,6 +3,21 @@
|
|
|
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.38](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.23.37...@repobit/dex-system-design@0.23.38) (2026-05-26)
|
|
7
|
+
|
|
8
|
+
### Bug Fixes
|
|
9
|
+
|
|
10
|
+
* **DEX-1014:** css adjustment for accordion
|
|
11
|
+
* **DEX-1014:** css adjustment for accordion margin
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
## [0.23.37](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.23.36...@repobit/dex-system-design@0.23.37) (2026-05-26)
|
|
15
|
+
|
|
16
|
+
### Bug Fixes
|
|
17
|
+
|
|
18
|
+
* **DEX-1014:** css adjustment for accesibility
|
|
19
|
+
|
|
20
|
+
|
|
6
21
|
## [0.23.36](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.23.35...@repobit/dex-system-design@0.23.36) (2026-05-25)
|
|
7
22
|
|
|
8
23
|
### 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.38",
|
|
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.34",
|
|
74
|
+
"@repobit/dex-store-elements": "1.4.26",
|
|
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": "e639a21f5618fc23aff63c32c9447ce67df63558"
|
|
92
92
|
}
|
|
@@ -28,6 +28,13 @@ export default css`
|
|
|
28
28
|
0 0 0 4px var(--color-blue-700);
|
|
29
29
|
position: relative;
|
|
30
30
|
z-index: 1;
|
|
31
|
+
border-radius: var(--radius-sm);
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
/* Focus ring pentru varianta terms-of-use — fara background deci ring simplu */
|
|
35
|
+
:host(bd-accordion-bg-item[data-variant="terms-of-use"][data-bd-acc-focus]) {
|
|
36
|
+
// box-shadow: var(--focus-outline-primary);
|
|
37
|
+
border-radius: var(--radius-sm);
|
|
31
38
|
}
|
|
32
39
|
|
|
33
40
|
:host(bd-accordion-bg-item:last-of-type) {
|
|
@@ -59,6 +66,16 @@ export default css`
|
|
|
59
66
|
padding-bottom: 0;
|
|
60
67
|
}
|
|
61
68
|
|
|
69
|
+
::slotted(bd-list) {
|
|
70
|
+
--bd-li-margin-bottom: var(--spacing-16);
|
|
71
|
+
display: block;
|
|
72
|
+
margin-bottom: var(--spacing-16);
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
::slotted(bd-list:last-child) {
|
|
76
|
+
margin-bottom: 0;
|
|
77
|
+
}
|
|
78
|
+
|
|
62
79
|
/* Footer slot — italic, spacing deasupra */
|
|
63
80
|
::slotted([slot="footer"]) {
|
|
64
81
|
display: block;
|
|
@@ -95,14 +112,7 @@ export default css`
|
|
|
95
112
|
color: var(--color-neutral-900);
|
|
96
113
|
transition: color var(--transition-duration-normal) var(--transition-easing-smooth);
|
|
97
114
|
}
|
|
98
|
-
|
|
99
|
-
--bd-li-margin-bottom: var(--spacing-16);
|
|
100
|
-
display: block;
|
|
101
|
-
margin-bottom: var(--spacing-16);
|
|
102
|
-
}
|
|
103
|
-
::slotted(bd-list:last-child) {
|
|
104
|
-
margin-bottom: 0;
|
|
105
|
-
}
|
|
115
|
+
|
|
106
116
|
.bd-accordion-bg-question[aria-expanded="true"] {
|
|
107
117
|
color: var(--color-blue-500);
|
|
108
118
|
}
|
|
@@ -80,7 +80,8 @@ class BdAccordionBg extends LitElement {
|
|
|
80
80
|
|
|
81
81
|
_renderTerms() {
|
|
82
82
|
return html`
|
|
83
|
-
|
|
83
|
+
<div class="bd-accordion-section-container">
|
|
84
|
+
<div class="bd-accordion-section-inner">
|
|
84
85
|
${this.title
|
|
85
86
|
? html`<bd-h as="h6" paddingBottom="var(--spacing-32)" fontWeight="700" class="section-title">${this.title}</bd-h>`
|
|
86
87
|
: ""}
|
|
@@ -91,14 +92,15 @@ class BdAccordionBg extends LitElement {
|
|
|
91
92
|
<p class="user-guide-link">
|
|
92
93
|
<a href=${this.guideHref}>
|
|
93
94
|
${this.guideIcon
|
|
94
|
-
? html`<
|
|
95
|
+
? html`<bd-plus-icon size="16" color="#006DFF"></bd-plus-icon>`
|
|
95
96
|
: ""}
|
|
96
97
|
${this.guideLabel}
|
|
97
98
|
</a>
|
|
98
99
|
</p>`
|
|
99
100
|
: ""}
|
|
100
101
|
</div>
|
|
101
|
-
|
|
102
|
+
</div>
|
|
103
|
+
`;
|
|
102
104
|
}
|
|
103
105
|
|
|
104
106
|
render() {
|
|
@@ -1,10 +1,5 @@
|
|
|
1
1
|
import { css } from "lit";
|
|
2
2
|
|
|
3
|
-
/**
|
|
4
|
-
* bd-accordion-item — tokens scoped with `:host-context(...)` so vars resolve on
|
|
5
|
-
* this host (slotted rules from the section do not). Default + `default-blue` =
|
|
6
|
-
* parent is not `variant="small"` (tuned title/body colors for light tinted bgs).
|
|
7
|
-
*/
|
|
8
3
|
export const accordionItem = css`
|
|
9
4
|
:host {
|
|
10
5
|
display: block;
|
|
@@ -18,13 +13,13 @@ export const accordionItem = css`
|
|
|
18
13
|
box-shadow: var(--focus-outline-primary);
|
|
19
14
|
position: relative;
|
|
20
15
|
z-index: 1;
|
|
16
|
+
border-radius: var(--radius-sm);
|
|
21
17
|
}
|
|
22
18
|
|
|
23
19
|
:host(:last-child) {
|
|
24
20
|
margin-bottom: 0;
|
|
25
21
|
}
|
|
26
22
|
|
|
27
|
-
/* Default / non-small — panel body = 14px (fontSize-sm), titles 16px semibold */
|
|
28
23
|
:host-context(bd-accordion-section:not([variant="small"])) {
|
|
29
24
|
--bd-acc-title-font-size: var(--typography-fontSize-base);
|
|
30
25
|
--bd-acc-title-font-weight: var(--typography-fontWeight-semibold);
|
|
@@ -37,13 +32,11 @@ export const accordionItem = css`
|
|
|
37
32
|
--bd-acc-panel-color: var(--color-neutral-800);
|
|
38
33
|
}
|
|
39
34
|
|
|
40
|
-
/* default-blue: titles blue-600 on blue-50 for stronger contrast (AA vs blue-500) */
|
|
41
35
|
:host-context(bd-accordion-section[variant="default-blue"]) {
|
|
42
36
|
--bd-acc-title-color-expanded: var(--color-blue-600);
|
|
43
37
|
--bd-acc-title-color-collapsed: var(--color-blue-600);
|
|
44
38
|
}
|
|
45
39
|
|
|
46
|
-
/* Small variant — title colors below (collapsed neutral-900; expanded blue-800; hover blue-500) */
|
|
47
40
|
:host-context(bd-accordion-section[variant="small"]) {
|
|
48
41
|
--bd-acc-header-padding: var(--spacing-12) var(--spacing-8);
|
|
49
42
|
--bd-acc-header-margin-bottom: var(--spacing-0);
|
|
@@ -61,14 +54,17 @@ export const accordionItem = css`
|
|
|
61
54
|
--bd-acc-panel-paragraph-gap: var(--spacing-0);
|
|
62
55
|
--bd-acc-item-margin-bottom: var(--spacing-0);
|
|
63
56
|
}
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
57
|
+
|
|
58
|
+
::slotted(bd-list) {
|
|
59
|
+
--bd-li-margin-bottom: var(--spacing-16);
|
|
60
|
+
display: block;
|
|
61
|
+
margin-bottom: var(--spacing-16);
|
|
62
|
+
}
|
|
63
|
+
|
|
69
64
|
::slotted(bd-list:last-child) {
|
|
70
|
-
|
|
71
|
-
}
|
|
65
|
+
margin-bottom: 0;
|
|
66
|
+
}
|
|
67
|
+
|
|
72
68
|
.header {
|
|
73
69
|
display: flex;
|
|
74
70
|
align-items: flex-start;
|
|
@@ -82,10 +78,7 @@ export const accordionItem = css`
|
|
|
82
78
|
font-family: var(--typography-fontFamily-sans);
|
|
83
79
|
font-style: normal;
|
|
84
80
|
font-size: var(--bd-acc-title-font-size, var(--typography-label-large-fontSize));
|
|
85
|
-
font-weight: var(
|
|
86
|
-
--bd-acc-title-font-weight,
|
|
87
|
-
var(--typography-fontWeight-semibold)
|
|
88
|
-
);
|
|
81
|
+
font-weight: var(--bd-acc-title-font-weight, var(--typography-fontWeight-semibold));
|
|
89
82
|
line-height: var(--bd-acc-title-line-height, var(--typography-lineHeight-normal));
|
|
90
83
|
margin-bottom: var(--bd-acc-header-margin-bottom, var(--spacing-16));
|
|
91
84
|
}
|
|
@@ -103,27 +96,19 @@ export const accordionItem = css`
|
|
|
103
96
|
color: var(--color-blue-500);
|
|
104
97
|
}
|
|
105
98
|
|
|
106
|
-
:host-context(bd-accordion-section[variant="small"])
|
|
107
|
-
.header[aria-expanded="false"]
|
|
108
|
-
.title {
|
|
99
|
+
:host-context(bd-accordion-section[variant="small"]) .header[aria-expanded="false"] .title {
|
|
109
100
|
color: var(--color-neutral-900);
|
|
110
101
|
}
|
|
111
102
|
|
|
112
|
-
:host-context(bd-accordion-section[variant="small"])
|
|
113
|
-
.header[aria-expanded="false"]:hover
|
|
114
|
-
.title {
|
|
103
|
+
:host-context(bd-accordion-section[variant="small"]) .header[aria-expanded="false"]:hover .title {
|
|
115
104
|
color: var(--color-blue-500);
|
|
116
105
|
}
|
|
117
106
|
|
|
118
|
-
:host-context(bd-accordion-section[variant="small"])
|
|
119
|
-
.header[aria-expanded="true"]
|
|
120
|
-
.title {
|
|
107
|
+
:host-context(bd-accordion-section[variant="small"]) .header[aria-expanded="true"] .title {
|
|
121
108
|
color: var(--color-blue-800);
|
|
122
109
|
}
|
|
123
110
|
|
|
124
|
-
:host-context(bd-accordion-section[variant="small"])
|
|
125
|
-
.header[aria-expanded="true"]:hover
|
|
126
|
-
.title {
|
|
111
|
+
:host-context(bd-accordion-section[variant="small"]) .header[aria-expanded="true"]:hover .title {
|
|
127
112
|
color: var(--color-blue-500);
|
|
128
113
|
}
|
|
129
114
|
|
|
@@ -137,12 +122,9 @@ export const accordionItem = css`
|
|
|
137
122
|
justify-content: center;
|
|
138
123
|
line-height: 0;
|
|
139
124
|
user-select: none;
|
|
140
|
-
/* First-line alignment: icon sits in first line box, not vertically centered on wrapped title */
|
|
141
125
|
margin-top: calc(
|
|
142
|
-
(
|
|
143
|
-
|
|
144
|
-
var(--bd-acc-toggle-size, var(--icon-sm-size))
|
|
145
|
-
) / 2
|
|
126
|
+
(var(--bd-acc-title-line-height, var(--typography-lineHeight-normal)) * 1em -
|
|
127
|
+
var(--bd-acc-toggle-size, var(--icon-sm-size))) / 2
|
|
146
128
|
);
|
|
147
129
|
}
|
|
148
130
|
|
|
@@ -155,39 +137,30 @@ export const accordionItem = css`
|
|
|
155
137
|
|
|
156
138
|
.title {
|
|
157
139
|
flex: 1;
|
|
158
|
-
font-weight: var(
|
|
159
|
-
--bd-acc-title-font-weight,
|
|
160
|
-
var(--typography-fontWeight-semibold)
|
|
161
|
-
);
|
|
140
|
+
font-weight: var(--bd-acc-title-font-weight, var(--typography-fontWeight-semibold));
|
|
162
141
|
}
|
|
163
142
|
|
|
164
143
|
.content {
|
|
165
|
-
padding: var(
|
|
166
|
-
--bd-acc-panel-padding,
|
|
167
|
-
0 0 0 calc(var(--icon-sm-size) + var(--spacing-12))
|
|
168
|
-
);
|
|
144
|
+
padding: var(--bd-acc-panel-padding, 0 0 0 calc(var(--icon-sm-size) + var(--spacing-12)));
|
|
169
145
|
font-family: var(--typography-fontFamily-sans);
|
|
170
146
|
font-size: var(--bd-acc-panel-font-size, var(--typography-fontSize-sm));
|
|
171
|
-
font-weight: var(
|
|
172
|
-
|
|
173
|
-
var(--typography-fontWeight-normal)
|
|
174
|
-
);
|
|
175
|
-
line-height: var(
|
|
176
|
-
--bd-acc-panel-line-height,
|
|
177
|
-
var(--typography-lineHeight-normal)
|
|
178
|
-
);
|
|
147
|
+
font-weight: var(--bd-acc-panel-font-weight, var(--typography-fontWeight-normal));
|
|
148
|
+
line-height: var(--bd-acc-panel-line-height, var(--typography-lineHeight-normal));
|
|
179
149
|
color: var(--bd-acc-panel-color, var(--color-neutral-700));
|
|
180
150
|
}
|
|
181
151
|
|
|
182
152
|
.content[hidden] {
|
|
183
153
|
display: none !important;
|
|
184
154
|
}
|
|
155
|
+
|
|
185
156
|
::slotted(bd-p) {
|
|
186
157
|
padding-bottom: var(--spacing-16);
|
|
187
158
|
}
|
|
159
|
+
|
|
188
160
|
::slotted(bd-p:last-child) {
|
|
189
161
|
padding-bottom: 0px;
|
|
190
162
|
}
|
|
163
|
+
|
|
191
164
|
::slotted(p) {
|
|
192
165
|
margin-top: 0;
|
|
193
166
|
margin-bottom: var(--bd-acc-panel-paragraph-gap, var(--spacing-16));
|
|
@@ -204,28 +177,39 @@ export const accordionItem = css`
|
|
|
204
177
|
`;
|
|
205
178
|
|
|
206
179
|
export const accordionSection = css`
|
|
207
|
-
// :host {
|
|
208
|
-
// display: block;
|
|
209
|
-
// background-color: var(--bd-acc-section-bg, var(--color-neutral-25));
|
|
210
|
-
// padding: var(--bd-acc-section-padding, var(--spacing-32));
|
|
211
|
-
// box-sizing: border-box;
|
|
212
|
-
// }
|
|
213
180
|
.bd-accordion-section-container {
|
|
214
181
|
background-color: var(--bd-acc-section-bg, var(--color-neutral-25));
|
|
215
|
-
|
|
216
|
-
|
|
182
|
+
border-radius: 0;
|
|
183
|
+
box-sizing: border-box;
|
|
184
|
+
|
|
185
|
+
/* Bleed — bg full width */
|
|
186
|
+
width: 100vw;
|
|
187
|
+
margin-left: calc(50% - 50vw);
|
|
188
|
+
margin-right: calc(50% - 50vw);
|
|
189
|
+
|
|
190
|
+
padding-top: var(--bd-acc-section-padding-v, var(--spacing-32));
|
|
191
|
+
padding-bottom: var(--bd-acc-section-padding-v, var(--spacing-32));
|
|
192
|
+
padding-left: calc(50vw - 50%);
|
|
193
|
+
padding-right: calc(50vw - 50%);
|
|
194
|
+
}
|
|
195
|
+
|
|
196
|
+
/* Inner — max-width 1290px, centrat, cu padding lateral ca anchor-nav */
|
|
197
|
+
.bd-accordion-section-inner {
|
|
198
|
+
max-width: 1290px;
|
|
199
|
+
margin-inline: auto;
|
|
200
|
+
padding-inline: var(--layout-ensemble-inline-padding, var(--spacing-24));
|
|
201
|
+
box-sizing: border-box;
|
|
217
202
|
}
|
|
218
203
|
|
|
219
204
|
:host([variant="small"]) {
|
|
220
205
|
--bd-acc-section-bg: var(--color-neutral-0);
|
|
221
|
-
--bd-acc-section-padding: var(--spacing-24)
|
|
206
|
+
--bd-acc-section-padding-v: var(--spacing-24);
|
|
222
207
|
}
|
|
223
208
|
|
|
224
209
|
:host([variant="default-blue"]) {
|
|
225
210
|
--bd-acc-section-bg: var(--color-blue-50);
|
|
226
211
|
}
|
|
227
212
|
|
|
228
|
-
/* Light tinted section bgs (neutral-25, blue-50): footnote link */
|
|
229
213
|
:host(:not([variant="small"])) .user-guide-link {
|
|
230
214
|
color: var(--color-blue-700);
|
|
231
215
|
}
|
|
@@ -258,7 +242,6 @@ export const accordionSection = css`
|
|
|
258
242
|
gap: var(--spacing-12);
|
|
259
243
|
font-family: Arial, Helvetica, sans-serif;
|
|
260
244
|
font-size: var(--typography-fontSize-xs);
|
|
261
|
-
|
|
262
245
|
}
|
|
263
246
|
|
|
264
247
|
.user-guide-link a:focus-visible {
|
|
@@ -273,4 +256,4 @@ export const accordionSection = css`
|
|
|
273
256
|
height: var(--dimension-16px);
|
|
274
257
|
object-fit: contain;
|
|
275
258
|
}
|
|
276
|
-
`;
|
|
259
|
+
`;
|
|
@@ -17,8 +17,8 @@ export class BdAccordionItem extends LitElement {
|
|
|
17
17
|
|
|
18
18
|
constructor() {
|
|
19
19
|
super();
|
|
20
|
-
this.open
|
|
21
|
-
this.title
|
|
20
|
+
this.open = false;
|
|
21
|
+
this.title = "";
|
|
22
22
|
this._panelId = `acc-panel-${Math.random().toString(36)
|
|
23
23
|
.slice(2, 11)}`;
|
|
24
24
|
}
|
|
@@ -77,17 +77,17 @@ export class BdAccordionSection extends LitElement {
|
|
|
77
77
|
guideIcon : { type: String, reflect: true, attribute: "guide-icon" },
|
|
78
78
|
guideLabel : { type: String, reflect: true, attribute: "guide-label" },
|
|
79
79
|
guideHref : { type: String, reflect: true, attribute: "guide-href" },
|
|
80
|
-
noContainer: { type: Boolean, attribute: "no-container" }
|
|
80
|
+
noContainer: { type: Boolean, attribute: "no-container" }
|
|
81
81
|
};
|
|
82
82
|
|
|
83
83
|
constructor() {
|
|
84
84
|
super();
|
|
85
|
-
this.title
|
|
86
|
-
this.variant
|
|
87
|
-
this.guideIcon
|
|
88
|
-
this.guideLabel
|
|
89
|
-
this.guideHref
|
|
90
|
-
this.noContainer = false;
|
|
85
|
+
this.title = "";
|
|
86
|
+
this.variant = "default";
|
|
87
|
+
this.guideIcon = "";
|
|
88
|
+
this.guideLabel = "";
|
|
89
|
+
this.guideHref = "#";
|
|
90
|
+
this.noContainer = false;
|
|
91
91
|
}
|
|
92
92
|
|
|
93
93
|
render() {
|
|
@@ -101,7 +101,7 @@ export class BdAccordionSection extends LitElement {
|
|
|
101
101
|
<bd-p kind="small" class="user-guide-link">
|
|
102
102
|
<a href=${this.guideHref}>
|
|
103
103
|
${this.guideIcon
|
|
104
|
-
? html`<
|
|
104
|
+
? html`<span class="icon"><img src=${this.guideIcon} alt="" /></span>`
|
|
105
105
|
: ""}
|
|
106
106
|
${this.guideLabel}
|
|
107
107
|
</a>
|
|
@@ -109,15 +109,15 @@ export class BdAccordionSection extends LitElement {
|
|
|
109
109
|
: ""}
|
|
110
110
|
`;
|
|
111
111
|
|
|
112
|
-
// Dacă nu vrei container, returnează direct contentul
|
|
113
112
|
if (this.noContainer) {
|
|
114
113
|
return content;
|
|
115
114
|
}
|
|
116
115
|
|
|
117
|
-
// Altfel, înfășoară într-un div cu clasă pentru background
|
|
118
116
|
return html`
|
|
119
117
|
<div class="bd-accordion-section-container">
|
|
120
|
-
|
|
118
|
+
<div class="bd-accordion-section-inner">
|
|
119
|
+
${content}
|
|
120
|
+
</div>
|
|
121
121
|
</div>
|
|
122
122
|
`;
|
|
123
123
|
}
|