@repobit/dex-system-design 0.19.1 → 0.19.2

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 (4) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/package.json +2 -2
  3. package/src/components/accordion/accordion-bg.css.js +104 -94
  4. package/src/components/accordion/accordion-bg.js +9 -1
package/CHANGELOG.md CHANGED
@@ -3,6 +3,14 @@
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.19.2](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.19.1...@repobit/dex-system-design@0.19.2) (2025-10-06)
7
+
8
+ **Note:** Version bump only for package @repobit/dex-system-design
9
+
10
+
11
+
12
+
13
+
6
14
  ## [0.19.1](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.19.0...@repobit/dex-system-design@0.19.1) (2025-10-02)
7
15
 
8
16
  **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.19.1",
3
+ "version": "0.19.2",
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",
@@ -79,5 +79,5 @@
79
79
  "volta": {
80
80
  "node": "22.14.0"
81
81
  },
82
- "gitHead": "dbf063ce6cbe70f63fee6dd325d5659886e5fe13"
82
+ "gitHead": "4719cfeb84a6e363a78a33460197661f23aac5a5"
83
83
  }
package/src/components/accordion/accordion-bg.css.js CHANGED
@@ -1,117 +1,127 @@
1
1
  import { css } from "lit";
2
2
 
3
3
  export default css`
4
- :host {
5
- --background-card-grey: var(--color-neutral-25);
6
- --border-card-grey: var(--color-neutral-50);
7
- --border-card-green: var(--color-green-700);
8
- --badge-background: var(--color-blue-500);
9
- --text-color-white: var(--color-neutral-0);
10
- --bd-accesibility-focus: var(--color-blue-500);
11
- display: block;
12
- }
4
+ @layer bd-components {
5
+ :host {
6
+ --background-card-grey: var(--color-neutral-25);
7
+ --border-card-grey: var(--color-neutral-50);
8
+ --border-card-green: var(--color-green-700);
9
+ --badge-background: var(--color-blue-500);
10
+ --text-color-white: var(--color-neutral-0);
11
+ --bd-accesibility-focus: var(--color-blue-500);
12
+ display: block;
13
+ }
13
14
 
14
- .bd-accordion-bg-item {
15
- margin-bottom: var(--spacing-16);
16
- border-radius: var(--spacing-8);
17
- background-color: var(--color-blue-50);
18
- overflow: hidden;
19
- transition: box-shadow 0.3s ease;
20
- }
15
+ .bd-accordion-bg-item {
16
+ margin-bottom: var(--spacing-16);
17
+ border-radius: var(--spacing-8);
18
+ background-color: var(--color-blue-50);
19
+ overflow: hidden;
20
+ transition: box-shadow 0.3s ease;
21
+ }
21
22
 
22
- .bd-accordion-bg-item:hover {
23
- .bd-accordion-bg-question-text {
24
- text-decoration-line: underline;
23
+ .bd-accordion-bg-item:hover {
24
+ .bd-accordion-bg-question-text {
25
+ text-decoration-line: underline;
26
+ }
25
27
  }
26
- }
27
28
 
28
- .bd-accordion-bg-question {
29
- cursor: pointer;
30
- display: flex;
31
- justify-content: flex-start;
32
- align-items: center;
33
- gap: var(--spacing-10);
34
- padding: var(--spacing-16);
35
- font-weight: bold;
36
- background-color: var(--color-blue-50);
37
- color: #333;
38
- transition: background-color 0.3s ease, color 0.3s ease;
39
- }
29
+ .bd-accordion-bg-question {
30
+ cursor: pointer;
31
+ display: flex;
32
+ justify-content: flex-start;
33
+ align-items: center;
34
+ gap: var(--spacing-10);
35
+ padding: var(--spacing-16);
36
+ font-weight: bold;
37
+ background-color: var(--color-blue-50);
38
+ color: #333;
39
+ transition: background-color 0.3s ease, color 0.3s ease;
40
+ }
40
41
 
41
- .bd-accordion-bg-header {
42
- margin-bottom: var(--spacing-32);
43
- }
42
+ .bd-accordion-bg-header {
43
+ margin-bottom: var(--spacing-32);
44
+ }
44
45
 
45
- .bd-accordion-bg-question:hover {
46
- color: #0073e6;
47
- }
46
+ .bd-accordion-bg-question:hover {
47
+ color: #0073e6;
48
+ }
48
49
 
49
- .bd-accordion-bg-item:focus-visible {
50
- outline: var(--spacing-2) solid var(--bd-accesibility-focus);
51
- outline-offset: var(--spacing-2);
52
- border-radius: var(--space-2xs);
53
- }
50
+ .bd-accordion-bg-item:focus-visible {
51
+ outline: var(--spacing-2) solid var(--bd-accesibility-focus);
52
+ outline-offset: var(--spacing-2);
53
+ border-radius: var(--space-2xs);
54
+ }
55
+
56
+ .bd-accordion-bg-item:focus {
57
+ .bd-accordion-bg-question-text {
58
+ font-weight: 600;
59
+ text-decoration-line: underline;
60
+ color: var(--color-blue-600);
61
+ text-decoration-thickness: var(--spacing-2);
62
+ }
63
+ }
54
64
 
55
- .bd-accordion-bg-item:focus {
56
65
  .bd-accordion-bg-question-text {
57
- font-weight: 600;
58
- text-decoration-line: underline;
59
- color: var(--color-blue-600);
60
- text-decoration-thickness: var(--spacing-2);
66
+ font-family: var(--typography-fontFamily-sans);
67
+ font-weight: var(--typography-fontWeight-semibold);
61
68
  }
62
- }
63
69
 
64
- .bd-accordion-bg-question-text {
65
- font-family: var(--typography-fontFamily-sans);
66
- font-weight: var(--typography-fontWeight-semibold);
67
- }
70
+ .bd-accordion-bg-title {
71
+ font-family: var(--typography-fontFamily-sans);
72
+ font-weight: var(--typography-fontWeight-semibold);
73
+ margin-left: auto;
74
+ margin-right: auto;
75
+ text-align: center;
76
+ }
68
77
 
69
- .bd-accordion-bg-title {
70
- font-family: var(--typography-fontFamily-sans);
71
- font-weight: var(--typography-fontWeight-semibold);
72
- margin-left: auto;
73
- margin-right: auto;
74
- text-align: center;
75
- }
78
+ .bd-accordion-bg-icon {
79
+ transition: transform 0.3s ease;
80
+ width: var(--spacing-14);
81
+ height: var(--spacing-14);
82
+ color: var(--color-blue-500);
83
+ text-align: center;
84
+ position: relative;
85
+ bottom: 1px;
86
+ }
76
87
 
77
- .bd-accordion-bg-icon {
78
- transition: transform 0.3s ease;
79
- width: var(--spacing-14);
80
- height: var(--spacing-14);
81
- color: var(--color-blue-500);
82
- text-align: center;
83
- position: relative;
84
- bottom: 1px;
85
- }
88
+ .bd-accordion-bg-answer {
89
+ overflow: hidden;
90
+ max-height: 0;
91
+ opacity: 0;
92
+ padding: 0 15px;
93
+ background-color: var(--color-blue-50);
94
+ font-family: var(--typography-fontFamily-sans);
95
+ font-weight: var(--font-weight-sans-medium);
96
+ }
86
97
 
87
- .bd-accordion-bg-answer {
88
- overflow: hidden;
89
- max-height: 0;
90
- opacity: 0;
91
- padding: 0 15px;
92
- background-color: var(--color-blue-50);
93
- font-family: var(--typography-fontFamily-sans);
94
- font-weight: var(--font-weight-sans-medium);
95
- }
98
+ .bd-accordion-bg-item.open .bd-accordion-bg-answer {
99
+ max-height: 1000px;
100
+ opacity: 1;
101
+ padding: var(--spacing-0) var(--spacing-40);
102
+ }
96
103
 
97
- .bd-accordion-bg-item.open .bd-accordion-bg-answer {
98
- max-height: 1000px;
99
- opacity: 1;
100
- padding: var(--spacing-0) var(--spacing-40);
101
- }
104
+ .bd-accordion-bg-answer > div {
105
+ overflow: hidden;
106
+ }
102
107
 
103
- .bd-accordion-bg-answer > div {
104
- overflow: hidden;
105
- }
108
+ .bd-accordion-bg-container {
109
+ width: 90%;
110
+ margin: auto;
111
+ padding-top: var(--spacing-64);
112
+ padding-bottom: var(--spacing-64);
113
+ }
106
114
 
107
- .bd-accordion-bg-container {
108
- width: 90%;
109
- margin: auto;
110
- padding-top: var(--spacing-64);
111
- padding-bottom: var(--spacing-64);
112
- }
115
+ .bd-accordion-bg-link-noline {
116
+ text-decoration: none;
117
+ }
118
+
119
+ .test-accordion {
120
+ background-color: blue;
121
+ }
113
122
 
114
- .bd-accordion-bg-link-noline {
115
- text-decoration: none;
123
+ .test-accordion p {
124
+ font-size: 20px;
125
+ }
116
126
  }
117
127
  `;
package/src/components/accordion/accordion-bg.js CHANGED
@@ -48,6 +48,14 @@ class BdAccordionBgItem extends LitElement {
48
48
  }
49
49
  }
50
50
 
51
+ /**
52
+ * @param {Event} e
53
+ */
54
+ #onSlot(e) {
55
+ const slot = e.currentTarget;
56
+ slot.classList.add('accordion-test');
57
+ }
58
+
51
59
  render() {
52
60
  return html`
53
61
  <div
@@ -69,7 +77,7 @@ class BdAccordionBgItem extends LitElement {
69
77
  role="region"
70
78
  aria-labelledby="${this.id}"
71
79
  >
72
- <slot></slot>
80
+ <slot @slotchange=${this.#onSlot}></slot>
73
81
  </div>
74
82
  </div>
75
83
  `;