@trebired/frontend 7.1.12 → 7.1.13

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
@@ -2,6 +2,10 @@
2
2
 
3
3
  All notable package changes are documented here.
4
4
 
5
+ ## 7.1.13
6
+
7
+ - Aligned advanced dropdown CSS selectors with the runtime attributes so hidden wizard-step dropdowns open and selected options style correctly.
8
+
5
9
  ## 7.1.12
6
10
 
7
11
  - Tightened upload metadata text line-height and made upload metadata spacing use `gap-sm`.
@@ -1,6 +1,6 @@
1
1
  @use "../../input/styles/field.scss" as *;
2
2
 
3
- [data-dropdown] {
3
+ [data-dropdown-root] {
4
4
  --dd-h: var(--height-input);
5
5
  --dd-arrow-space: 26px;
6
6
  --dd-arrow-right: 8px;
@@ -49,7 +49,7 @@
49
49
  }
50
50
  }
51
51
 
52
- &.open::before,
52
+ &[data-dropdown-open="true"]::before,
53
53
  &:focus-within::before {
54
54
  outline-color: $classic-field-focus-color;
55
55
  border-color: $classic-field-focus-color;
@@ -86,7 +86,7 @@
86
86
  visibility 0s linear 0.22s;
87
87
  }
88
88
 
89
- &.open .options {
89
+ &[data-dropdown-open="true"] .options {
90
90
  visibility: visible;
91
91
  opacity: 1;
92
92
  transform: translateY(0) scale(1);
@@ -167,7 +167,7 @@
167
167
  background: var(--tbf-primitives-dropdown-option-states-hover-background, var(--background-surface-2, transparent));
168
168
  }
169
169
 
170
- &[data-selected="true"] {
170
+ &[data-dropdown-selected="true"] {
171
171
  background: color-mix(
172
172
  in srgb,
173
173
  var(--tbf-primitives-dropdown-option-states-selected-background, var(--background-surface-2, transparent)) 70%,
@@ -175,7 +175,7 @@
175
175
  );
176
176
  }
177
177
 
178
- &[data-placeholder] {
178
+ &[data-dropdown-placeholder-option] {
179
179
  color: var(--text-color-muted);
180
180
  cursor: default;
181
181
  }
@@ -236,7 +236,7 @@
236
236
  transition: opacity 120ms ease;
237
237
  }
238
238
 
239
- .dropdown-list li[data-selected="true"] .dropdown-check {
239
+ .dropdown-list li[data-dropdown-selected="true"] .dropdown-check {
240
240
  opacity: 1;
241
241
  }
242
242
 
@@ -18,7 +18,7 @@
18
18
  transform 0.22s ease,
19
19
  visibility 0s linear 0.22s;
20
20
 
21
- &:not(.show):not([data-dropdown-closing="true"]):not(
21
+ &:not([data-dropdown-show="true"]):not([data-dropdown-closing="true"]):not(
22
22
  [data-dropdown-measuring="true"]
23
23
  ) {
24
24
  top: 0 !important;
@@ -31,7 +31,7 @@
31
31
  overflow: hidden !important;
32
32
  }
33
33
 
34
- &.show {
34
+ &[data-dropdown-show="true"] {
35
35
  visibility: visible;
36
36
  opacity: 1;
37
37
  transform: translateY(0) scale(1);
@@ -105,7 +105,7 @@
105
105
 
106
106
  .options[data-dropdown-portaled="true"]
107
107
  .dropdown-list
108
- li[data-selected="true"] {
108
+ li[data-dropdown-selected="true"] {
109
109
  background: color-mix(
110
110
  in srgb,
111
111
  var(--tbf-primitives-dropdown-option-states-selected-background, var(--background-surface-2, transparent)) 70%,
@@ -113,7 +113,9 @@ li[data-selected="true"] {
113
113
  );
114
114
  }
115
115
 
116
- .options[data-dropdown-portaled="true"] .dropdown-list li[data-placeholder] {
116
+ .options[data-dropdown-portaled="true"]
117
+ .dropdown-list
118
+ li[data-dropdown-placeholder-option] {
117
119
  color: var(--text-color-muted);
118
120
  cursor: default;
119
121
  }
@@ -185,7 +187,7 @@ span:not(.dropdown-check) {
185
187
 
186
188
  .options[data-dropdown-portaled="true"]
187
189
  .dropdown-list
188
- li[data-selected="true"]
190
+ li[data-dropdown-selected="true"]
189
191
  .dropdown-check {
190
192
  opacity: 1;
191
193
  }
@@ -196,8 +198,8 @@ li[data-selected="true"]
196
198
 
197
199
  [data-dropdown-label] > i,
198
200
  [data-dropdown-label] > span.icon,
199
- [data-dropdown] .dropdown-list li > i,
200
- [data-dropdown] .dropdown-list li > span.icon,
201
+ [data-dropdown-root] .dropdown-list li > i,
202
+ [data-dropdown-root] .dropdown-list li > span.icon,
201
203
  .options[data-dropdown-portaled="true"] .dropdown-list li > i,
202
204
  .options[data-dropdown-portaled="true"] .dropdown-list li > span.icon {
203
205
  display: inline-flex;
@@ -207,7 +209,7 @@ li[data-selected="true"]
207
209
  }
208
210
 
209
211
  [data-dropdown-label] svg,
210
- [data-dropdown] .dropdown-list li svg,
212
+ [data-dropdown-root] .dropdown-list li svg,
211
213
  .options[data-dropdown-portaled="true"] .dropdown-list li svg {
212
214
  width: 1em;
213
215
  height: 1em;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@trebired/frontend",
3
- "version": "7.1.12",
3
+ "version": "7.1.13",
4
4
  "description": "Generic browser runtime systems for Trebired frontend packages and applications.",
5
5
  "type": "module",
6
6
  "private": false,