@zanichelli/albe-web-components 2.30.0-rc7 → 2.30.0-rc8

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 (11) hide show
  1. package/dist/cjs/z-alert_66.cjs.entry.js +1 -1
  2. package/dist/collection/components/navigation/z-user-dropdown/styles.css +41 -41
  3. package/dist/esm/z-alert_66.entry.js +1 -1
  4. package/dist/web-components-library/{p-9cefa3bf.entry.js → p-b89ae2ca.entry.js} +1 -1
  5. package/dist/web-components-library/web-components-library.esm.js +1 -1
  6. package/package.json +1 -1
  7. package/www/build/{p-9cefa3bf.entry.js → p-b89ae2ca.entry.js} +1 -1
  8. package/www/build/p-c2b2814d.js +1 -0
  9. package/www/build/web-components-library.esm.js +1 -1
  10. package/www/index.html +1 -1
  11. package/www/build/p-0b4eabaf.js +0 -1
package/dist/cjs/z-alert_66.cjs.entry.js CHANGED
@@ -3522,7 +3522,7 @@ const ZTypography = class {
3522
3522
  };
3523
3523
  ZTypography.style = stylesCss$1;
3524
3524
 
3525
- const stylesCss = ":host{background-color:var(--bg-grey-900)}:host(.inverse){background-color:var(--bg-white)}button{cursor:pointer;display:flex;flex-direction:column;width:100%;margin:0;background-color:var(--bg-grey-900);border:none;padding:0;letter-spacing:0.16px;white-space:nowrap}button.inverse{background-color:var(--bg-white)}button div.firstline{display:flex;justify-content:flex-end;align-items:center;max-width:200px}button.open div.firstline{max-width:none}z-icon{padding:0 2px;fill:var(--text-white)}z-icon.inverse{fill:var(--bg-grey-900)}ul{box-sizing:border-box;position:absolute;left:0;padding:calc(var(--space-unit) / 2) calc(var(--space-unit) * 2) 0 calc(var(--space-unit) * 2);width:100%;margin:calc(var(--space-unit) * 1.5) 0 0 0;background-color:var(--bg-grey-900);font-family:var(--font-family-sans);font-weight:var(--font-sb);font-size:14px;line-height:20px;letter-spacing:0.3px}ul.inverse{background-color:var(--bg-white)}ul>li{display:flex;justify-content:flex-end;white-space:nowrap;padding:calc(var(--space-unit) * 1.5 - 1px) 0;margin:0;border-bottom:var(--border-base) solid var(--bg-grey-700)}ul>li.inverse{border-bottom-color:var(--gray400)}ul>li:first-child{border-top:none;padding-top:0;padding-bottom:calc(var(--space-unit) + 6px);flex-direction:column;align-items:end}ul>li:last-child{border-bottom:none;margin-bottom:0}#guestbutton{box-sizing:border-box;display:inline-flex;flex-direction:row;align-items:center;justify-content:center;width:100%;font-family:var(--font-family-sans);font-weight:var(--font-sb);font-size:14px;line-height:1;letter-spacing:0.3px;border-width:var(--border-size-medium);border-style:solid;border-radius:var(--border-radius);vertical-align:middle;text-transform:uppercase;text-decoration:none;cursor:pointer;outline:none;fill:currentColor;height:32px;min-width:32px;padding:0 calc(var(--space-unit) * 2);background-color:var(--bg-white);border-color:var(--bg-white);color:var(--text-grey-800)}#guestbutton.inverse{background-color:var(--bg-grey-800);border-color:var(--bg-grey-800);color:var(--text-white)}.userfullname{padding:0;overflow:hidden;max-width:250px;text-overflow:ellipsis;width:100%;color:var(--text-white);font-family:var(--font-family-sans);font-weight:var(--font-sb);font-size:16px;line-height:24px;letter-spacing:0;text-align:right}.userfullname.inverse{color:var(--text-grey-800)}.useremail{color:var(--text-white);font-family:var(--font-family-sans);font-weight:var(--font-rg);font-size:12px;line-height:16px;letter-spacing:0.32px;overflow:hidden;text-overflow:ellipsis;width:100%;text-align:right}.useremail.inverse{color:var(--text-grey-800)}@media only screen and (min-width: 768px){:host{height:calc(var(--space-unit) * 4);background-color:var(--bg-grey-900)}:host(.inverse){background-color:var(--bg-white)}:host>div{position:relative;top:50%;transform:translateY(-50%)}:host>div.open{top:auto;transform:none}:host>div>div{padding:0}:host>div>div.open{position:absolute;right:calc(var(--space-unit) * -1);box-shadow:0px 2px calc(var(--space-unit) * .5) 0px rgba(0, 0, 0, 0.5);background-color:var(--bg-white);margin-top:calc(var(--space-unit) / 2);padding:calc(var(--space-unit) / 2 + 1px) var(--space-unit) 0 var(--space-unit);transform:translate(0, -4px)}:host>div>div.inverse.open{background-color:var(--bg-grey-800)}button{display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:flex-end;align-items:end;align-content:center}button.open{background-color:var(--bg-white);border-top:var(--border-size-small) solid var(--bg-white);border-top-left-radius:calc(var(--space-unit) * .5);border-top-right-radius:calc(var(--space-unit) * .5);max-width:initial;margin-left:var(--space-unit);padding-right:var(--space-unit)}button.open.inverse{border-top-color:var(--bg-grey-800);background-color:var(--bg-grey-800)}button:not(.open) z-icon{fill:var(--text-white)}button:not(.open) z-icon.inverse{fill:var(--text-grey-800)}button.open z-icon{fill:var(--text-grey-800)}button.open z-icon.inverse{fill:var(--text-white)}.userfullname{font-family:var(--font-family-sans);font-weight:var(--font-sb);font-size:14px;line-height:20px;letter-spacing:0.16px;padding:0 calc(var(--space-unit) - 6px) 0 calc(var(--space-unit) - 2px);width:auto}.userfullname.inverse{color:var(--text-grey-800)}button.open div.userfullname{color:var(--text-grey-800);max-width:none;text-overflow:clip}button.open div.userfullname.inverse{color:var(--text-white)}.useremail{padding-right:calc(var(--space-unit) * 3 - 2px);box-sizing:border-box}button.open div.useremail{color:var(--text-grey-800)}button.open div.useremail.inverse{color:var(--text-white)}ul{position:initial;left:initial;padding:0;width:100%;background-color:var(--bg-white)}ul.inverse{border-bottom-color:var(--bg-grey-800);background-color:var(--bg-grey-800)}ul>li{color:var(--text-grey-800);border-bottom:var(--border-base) solid var(--gray400);margin:0 var(--space-unit)}ul>li.inverse{color:var(--text-white)}ul>li:first-child{border-top:var(--border-base) solid var(--gray400);padding-top:calc(var(--space-unit) + 3px);padding-bottom:calc(var(--space-unit) + 5px)}}";
3525
+ const stylesCss = ":host{background-color:var(--gray900)}:host(.inverse){background-color:var(--color-white)}button{cursor:pointer;display:flex;flex-direction:column;width:100%;margin:0;background-color:var(--gray900);border:none;padding:0;letter-spacing:0.16px;white-space:nowrap}button.inverse{background-color:var(--color-white)}button div.firstline{display:flex;justify-content:flex-end;align-items:center;max-width:200px}button.open div.firstline{max-width:none}z-icon{padding:0 2px;fill:var(--color-white)}z-icon.inverse{fill:var(--gray900)}ul{box-sizing:border-box;position:absolute;left:0;padding:calc(var(--space-unit) / 2) calc(var(--space-unit) * 2) 0 calc(var(--space-unit) * 2);width:100%;margin:calc(var(--space-unit) * 1.5) 0 0 0;background-color:var(--gray900);font-family:var(--font-family-sans);font-weight:var(--font-sb);font-size:14px;line-height:20px;letter-spacing:0.3px}ul.inverse{background-color:var(--color-white)}ul>li{display:flex;justify-content:flex-end;white-space:nowrap;padding:calc(var(--space-unit) * 1.5 - 1px) 0;margin:0;border-bottom:var(--border-base) solid var(--gray700)}ul>li.inverse{border-bottom-color:var(--gray400)}ul>li:first-child{border-top:none;padding-top:0;padding-bottom:calc(var(--space-unit) + 6px);flex-direction:column;align-items:end}ul>li:last-child{border-bottom:none;margin-bottom:0}#guestbutton{box-sizing:border-box;display:inline-flex;flex-direction:row;align-items:center;justify-content:center;width:100%;font-family:var(--font-family-sans);font-weight:var(--font-sb);font-size:14px;line-height:1;letter-spacing:0.3px;border-width:var(--border-size-medium);border-style:solid;border-radius:var(--border-radius);vertical-align:middle;text-transform:uppercase;text-decoration:none;cursor:pointer;outline:none;fill:currentColor;height:32px;min-width:32px;padding:0 calc(var(--space-unit) * 2);background-color:var(--color-white);border-color:var(--color-white);color:var(--gray800)}#guestbutton.inverse{background-color:var(--gray800);border-color:var(--gray800);color:var(--color-white)}.userfullname{padding:0;overflow:hidden;max-width:250px;text-overflow:ellipsis;width:100%;color:var(--color-white);font-family:var(--font-family-sans);font-weight:var(--font-sb);font-size:16px;line-height:24px;letter-spacing:0;text-align:right}.userfullname.inverse{color:var(--gray800)}.useremail{color:var(--color-white);font-family:var(--font-family-sans);font-weight:var(--font-rg);font-size:12px;line-height:16px;letter-spacing:0.32px;overflow:hidden;text-overflow:ellipsis;width:100%;text-align:right}.useremail.inverse{color:var(--gray800)}@media only screen and (min-width: 768px){:host{height:calc(var(--space-unit) * 4);background-color:var(--gray900)}:host(.inverse){background-color:var(--color-white)}:host>div{position:relative;top:50%;transform:translateY(-50%)}:host>div.open{top:auto;transform:none}:host>div>div{padding:0}:host>div>div.open{position:absolute;right:calc(var(--space-unit) * -1);box-shadow:0px 2px calc(var(--space-unit) * .5) 0px rgba(0, 0, 0, 0.5);background-color:var(--color-white);margin-top:calc(var(--space-unit) / 2);padding:calc(var(--space-unit) / 2 + 1px) var(--space-unit) 0 var(--space-unit);transform:translate(0, -4px)}:host>div>div.inverse.open{background-color:var(--gray800)}button{display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:flex-end;align-items:end;align-content:center}button.open{background-color:var(--color-white);border-top:var(--border-size-small) solid var(--color-white);border-top-left-radius:calc(var(--space-unit) * .5);border-top-right-radius:calc(var(--space-unit) * .5);max-width:initial;margin-left:var(--space-unit);padding-right:var(--space-unit)}button.open.inverse{border-top-color:var(--gray800);background-color:var(--gray800)}button:not(.open) z-icon{fill:var(--color-white)}button:not(.open) z-icon.inverse{fill:var(--gray800)}button.open z-icon{fill:var(--gray800)}button.open z-icon.inverse{fill:var(--color-white)}.userfullname{font-family:var(--font-family-sans);font-weight:var(--font-sb);font-size:14px;line-height:20px;letter-spacing:0.16px;padding:0 calc(var(--space-unit) - 6px) 0 calc(var(--space-unit) - 2px);width:auto}.userfullname.inverse{color:var(--gray800)}button.open div.userfullname{color:var(--gray800);max-width:none;text-overflow:clip}button.open div.userfullname.inverse{color:var(--color-white)}.useremail{padding-right:calc(var(--space-unit) * 3 - 2px);box-sizing:border-box}button.open div.useremail{color:var(--gray800)}button.open div.useremail.inverse{color:var(--color-white)}ul{position:initial;left:initial;padding:0;width:100%;background-color:var(--color-white)}ul.inverse{border-bottom-color:var(--gray800);background-color:var(--gray800)}ul>li{color:var(--gray800);border-bottom:var(--border-base) solid var(--gray400);margin:0 var(--space-unit)}ul>li.inverse{color:var(--color-white)}ul>li:first-child{border-top:var(--border-base) solid var(--gray400);padding-top:calc(var(--space-unit) + 3px);padding-bottom:calc(var(--space-unit) + 5px)}}";
3526
3526
 
3527
3527
  const ZUserDropdown = class {
3528
3528
  constructor(hostRef) {
package/dist/collection/components/navigation/z-user-dropdown/styles.css CHANGED
@@ -1,9 +1,9 @@
1
1
  :host {
2
- background-color: var(--bg-grey-900);
2
+ background-color: var(--gray900);
3
3
  }
4
4
 
5
5
  :host(.inverse) {
6
- background-color: var(--bg-white);
6
+ background-color: var(--color-white);
7
7
  }
8
8
 
9
9
  button {
@@ -12,7 +12,7 @@ button {
12
12
  flex-direction: column;
13
13
  width: 100%;
14
14
  margin: 0;
15
- background-color: var(--bg-grey-900);
15
+ background-color: var(--gray900);
16
16
  border: none;
17
17
  padding: 0;
18
18
  letter-spacing: 0.16px;
@@ -20,7 +20,7 @@ button {
20
20
  }
21
21
 
22
22
  button.inverse {
23
- background-color: var(--bg-white);
23
+ background-color: var(--color-white);
24
24
  }
25
25
 
26
26
  button div.firstline {
@@ -36,11 +36,11 @@ button.open div.firstline {
36
36
 
37
37
  z-icon {
38
38
  padding: 0 2px;
39
- fill: var(--text-white);
39
+ fill: var(--color-white);
40
40
  }
41
41
 
42
42
  z-icon.inverse {
43
- fill: var(--bg-grey-900);
43
+ fill: var(--gray900);
44
44
  }
45
45
 
46
46
  ul {
@@ -50,7 +50,7 @@ ul {
50
50
  padding: calc(var(--space-unit) / 2) calc(var(--space-unit) * 2) 0 calc(var(--space-unit) * 2);
51
51
  width: 100%;
52
52
  margin: calc(var(--space-unit) * 1.5) 0 0 0;
53
- background-color: var(--bg-grey-900);
53
+ background-color: var(--gray900);
54
54
  font-family: var(--font-family-sans);
55
55
  font-weight: var(--font-sb);
56
56
  font-size: 14px;
@@ -59,7 +59,7 @@ ul {
59
59
  }
60
60
 
61
61
  ul.inverse {
62
- background-color: var(--bg-white);
62
+ background-color: var(--color-white);
63
63
  }
64
64
 
65
65
  ul > li {
@@ -68,7 +68,7 @@ ul > li {
68
68
  white-space: nowrap;
69
69
  padding: calc(var(--space-unit) * 1.5 - 1px) 0;
70
70
  margin: 0;
71
- border-bottom: var(--border-base) solid var(--bg-grey-700);
71
+ border-bottom: var(--border-base) solid var(--gray700);
72
72
  }
73
73
 
74
74
  ul > li.inverse {
@@ -112,15 +112,15 @@ ul > li:last-child {
112
112
  height: 32px;
113
113
  min-width: 32px;
114
114
  padding: 0 calc(var(--space-unit) * 2);
115
- background-color: var(--bg-white);
116
- border-color: var(--bg-white);
117
- color: var(--text-grey-800);
115
+ background-color: var(--color-white);
116
+ border-color: var(--color-white);
117
+ color: var(--gray800);
118
118
  }
119
119
 
120
120
  #guestbutton.inverse {
121
- background-color: var(--bg-grey-800);
122
- border-color: var(--bg-grey-800);
123
- color: var(--text-white);
121
+ background-color: var(--gray800);
122
+ border-color: var(--gray800);
123
+ color: var(--color-white);
124
124
  }
125
125
 
126
126
  .userfullname {
@@ -129,7 +129,7 @@ ul > li:last-child {
129
129
  max-width: 250px;
130
130
  text-overflow: ellipsis;
131
131
  width: 100%;
132
- color: var(--text-white);
132
+ color: var(--color-white);
133
133
  font-family: var(--font-family-sans);
134
134
  font-weight: var(--font-sb);
135
135
  font-size: 16px;
@@ -139,11 +139,11 @@ ul > li:last-child {
139
139
  }
140
140
 
141
141
  .userfullname.inverse {
142
- color: var(--text-grey-800);
142
+ color: var(--gray800);
143
143
  }
144
144
 
145
145
  .useremail {
146
- color: var(--text-white);
146
+ color: var(--color-white);
147
147
  font-family: var(--font-family-sans);
148
148
  font-weight: var(--font-rg);
149
149
  font-size: 12px;
@@ -156,18 +156,18 @@ ul > li:last-child {
156
156
  }
157
157
 
158
158
  .useremail.inverse {
159
- color: var(--text-grey-800);
159
+ color: var(--gray800);
160
160
  }
161
161
 
162
162
  /* Tablet breakpoint */
163
163
  @media only screen and (min-width: 768px) {
164
164
  :host {
165
165
  height: calc(var(--space-unit) * 4);
166
- background-color: var(--bg-grey-900);
166
+ background-color: var(--gray900);
167
167
  }
168
168
 
169
169
  :host(.inverse) {
170
- background-color: var(--bg-white);
170
+ background-color: var(--color-white);
171
171
  }
172
172
 
173
173
  :host > div {
@@ -189,14 +189,14 @@ ul > li:last-child {
189
189
  position: absolute;
190
190
  right: calc(var(--space-unit) * -1);
191
191
  box-shadow: 0px 2px calc(var(--space-unit) * .5) 0px rgba(0, 0, 0, 0.5);
192
- background-color: var(--bg-white);
192
+ background-color: var(--color-white);
193
193
  margin-top: calc(var(--space-unit) / 2);
194
194
  padding: calc(var(--space-unit) / 2 + 1px) var(--space-unit) 0 var(--space-unit);
195
195
  transform: translate(0, -4px);
196
196
  }
197
197
 
198
198
  :host > div > div.inverse.open {
199
- background-color: var(--bg-grey-800);
199
+ background-color: var(--gray800);
200
200
  }
201
201
 
202
202
  button {
@@ -209,8 +209,8 @@ ul > li:last-child {
209
209
  }
210
210
 
211
211
  button.open {
212
- background-color: var(--bg-white);
213
- border-top: var(--border-size-small) solid var(--bg-white);
212
+ background-color: var(--color-white);
213
+ border-top: var(--border-size-small) solid var(--color-white);
214
214
  border-top-left-radius: calc(var(--space-unit) * .5);
215
215
  border-top-right-radius: calc(var(--space-unit) * .5);
216
216
  max-width: initial;
@@ -219,24 +219,24 @@ ul > li:last-child {
219
219
  }
220
220
 
221
221
  button.open.inverse {
222
- border-top-color: var(--bg-grey-800);
223
- background-color: var(--bg-grey-800);
222
+ border-top-color: var(--gray800);
223
+ background-color: var(--gray800);
224
224
  }
225
225
 
226
226
  button:not(.open) z-icon {
227
- fill: var(--text-white);
227
+ fill: var(--color-white);
228
228
  }
229
229
 
230
230
  button:not(.open) z-icon.inverse {
231
- fill: var(--text-grey-800);
231
+ fill: var(--gray800);
232
232
  }
233
233
 
234
234
  button.open z-icon {
235
- fill: var(--text-grey-800);
235
+ fill: var(--gray800);
236
236
  }
237
237
 
238
238
  button.open z-icon.inverse {
239
- fill: var(--text-white);
239
+ fill: var(--color-white);
240
240
  }
241
241
 
242
242
  .userfullname {
@@ -250,17 +250,17 @@ ul > li:last-child {
250
250
  }
251
251
 
252
252
  .userfullname.inverse {
253
- color: var(--text-grey-800);
253
+ color: var(--gray800);
254
254
  }
255
255
 
256
256
  button.open div.userfullname {
257
- color: var(--text-grey-800);
257
+ color: var(--gray800);
258
258
  max-width: none;
259
259
  text-overflow: clip;
260
260
  }
261
261
 
262
262
  button.open div.userfullname.inverse {
263
- color: var(--text-white);
263
+ color: var(--color-white);
264
264
  }
265
265
 
266
266
  .useremail {
@@ -269,11 +269,11 @@ ul > li:last-child {
269
269
  }
270
270
 
271
271
  button.open div.useremail {
272
- color: var(--text-grey-800);
272
+ color: var(--gray800);
273
273
  }
274
274
 
275
275
  button.open div.useremail.inverse {
276
- color: var(--text-white);
276
+ color: var(--color-white);
277
277
  }
278
278
 
279
279
  ul {
@@ -281,22 +281,22 @@ ul > li:last-child {
281
281
  left: initial;
282
282
  padding: 0;
283
283
  width: 100%;
284
- background-color: var(--bg-white);
284
+ background-color: var(--color-white);
285
285
  }
286
286
 
287
287
  ul.inverse {
288
- border-bottom-color: var(--bg-grey-800);
289
- background-color: var(--bg-grey-800);
288
+ border-bottom-color: var(--gray800);
289
+ background-color: var(--gray800);
290
290
  }
291
291
 
292
292
  ul > li {
293
- color: var(--text-grey-800);
293
+ color: var(--gray800);
294
294
  border-bottom: var(--border-base) solid var(--gray400);
295
295
  margin: 0 var(--space-unit);
296
296
  }
297
297
 
298
298
  ul > li.inverse {
299
- color: var(--text-white);
299
+ color: var(--color-white);
300
300
  }
301
301
 
302
302
  ul > li:first-child {
package/dist/esm/z-alert_66.entry.js CHANGED
@@ -3518,7 +3518,7 @@ const ZTypography = class {
3518
3518
  };
3519
3519
  ZTypography.style = stylesCss$1;
3520
3520
 
3521
- const stylesCss = ":host{background-color:var(--bg-grey-900)}:host(.inverse){background-color:var(--bg-white)}button{cursor:pointer;display:flex;flex-direction:column;width:100%;margin:0;background-color:var(--bg-grey-900);border:none;padding:0;letter-spacing:0.16px;white-space:nowrap}button.inverse{background-color:var(--bg-white)}button div.firstline{display:flex;justify-content:flex-end;align-items:center;max-width:200px}button.open div.firstline{max-width:none}z-icon{padding:0 2px;fill:var(--text-white)}z-icon.inverse{fill:var(--bg-grey-900)}ul{box-sizing:border-box;position:absolute;left:0;padding:calc(var(--space-unit) / 2) calc(var(--space-unit) * 2) 0 calc(var(--space-unit) * 2);width:100%;margin:calc(var(--space-unit) * 1.5) 0 0 0;background-color:var(--bg-grey-900);font-family:var(--font-family-sans);font-weight:var(--font-sb);font-size:14px;line-height:20px;letter-spacing:0.3px}ul.inverse{background-color:var(--bg-white)}ul>li{display:flex;justify-content:flex-end;white-space:nowrap;padding:calc(var(--space-unit) * 1.5 - 1px) 0;margin:0;border-bottom:var(--border-base) solid var(--bg-grey-700)}ul>li.inverse{border-bottom-color:var(--gray400)}ul>li:first-child{border-top:none;padding-top:0;padding-bottom:calc(var(--space-unit) + 6px);flex-direction:column;align-items:end}ul>li:last-child{border-bottom:none;margin-bottom:0}#guestbutton{box-sizing:border-box;display:inline-flex;flex-direction:row;align-items:center;justify-content:center;width:100%;font-family:var(--font-family-sans);font-weight:var(--font-sb);font-size:14px;line-height:1;letter-spacing:0.3px;border-width:var(--border-size-medium);border-style:solid;border-radius:var(--border-radius);vertical-align:middle;text-transform:uppercase;text-decoration:none;cursor:pointer;outline:none;fill:currentColor;height:32px;min-width:32px;padding:0 calc(var(--space-unit) * 2);background-color:var(--bg-white);border-color:var(--bg-white);color:var(--text-grey-800)}#guestbutton.inverse{background-color:var(--bg-grey-800);border-color:var(--bg-grey-800);color:var(--text-white)}.userfullname{padding:0;overflow:hidden;max-width:250px;text-overflow:ellipsis;width:100%;color:var(--text-white);font-family:var(--font-family-sans);font-weight:var(--font-sb);font-size:16px;line-height:24px;letter-spacing:0;text-align:right}.userfullname.inverse{color:var(--text-grey-800)}.useremail{color:var(--text-white);font-family:var(--font-family-sans);font-weight:var(--font-rg);font-size:12px;line-height:16px;letter-spacing:0.32px;overflow:hidden;text-overflow:ellipsis;width:100%;text-align:right}.useremail.inverse{color:var(--text-grey-800)}@media only screen and (min-width: 768px){:host{height:calc(var(--space-unit) * 4);background-color:var(--bg-grey-900)}:host(.inverse){background-color:var(--bg-white)}:host>div{position:relative;top:50%;transform:translateY(-50%)}:host>div.open{top:auto;transform:none}:host>div>div{padding:0}:host>div>div.open{position:absolute;right:calc(var(--space-unit) * -1);box-shadow:0px 2px calc(var(--space-unit) * .5) 0px rgba(0, 0, 0, 0.5);background-color:var(--bg-white);margin-top:calc(var(--space-unit) / 2);padding:calc(var(--space-unit) / 2 + 1px) var(--space-unit) 0 var(--space-unit);transform:translate(0, -4px)}:host>div>div.inverse.open{background-color:var(--bg-grey-800)}button{display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:flex-end;align-items:end;align-content:center}button.open{background-color:var(--bg-white);border-top:var(--border-size-small) solid var(--bg-white);border-top-left-radius:calc(var(--space-unit) * .5);border-top-right-radius:calc(var(--space-unit) * .5);max-width:initial;margin-left:var(--space-unit);padding-right:var(--space-unit)}button.open.inverse{border-top-color:var(--bg-grey-800);background-color:var(--bg-grey-800)}button:not(.open) z-icon{fill:var(--text-white)}button:not(.open) z-icon.inverse{fill:var(--text-grey-800)}button.open z-icon{fill:var(--text-grey-800)}button.open z-icon.inverse{fill:var(--text-white)}.userfullname{font-family:var(--font-family-sans);font-weight:var(--font-sb);font-size:14px;line-height:20px;letter-spacing:0.16px;padding:0 calc(var(--space-unit) - 6px) 0 calc(var(--space-unit) - 2px);width:auto}.userfullname.inverse{color:var(--text-grey-800)}button.open div.userfullname{color:var(--text-grey-800);max-width:none;text-overflow:clip}button.open div.userfullname.inverse{color:var(--text-white)}.useremail{padding-right:calc(var(--space-unit) * 3 - 2px);box-sizing:border-box}button.open div.useremail{color:var(--text-grey-800)}button.open div.useremail.inverse{color:var(--text-white)}ul{position:initial;left:initial;padding:0;width:100%;background-color:var(--bg-white)}ul.inverse{border-bottom-color:var(--bg-grey-800);background-color:var(--bg-grey-800)}ul>li{color:var(--text-grey-800);border-bottom:var(--border-base) solid var(--gray400);margin:0 var(--space-unit)}ul>li.inverse{color:var(--text-white)}ul>li:first-child{border-top:var(--border-base) solid var(--gray400);padding-top:calc(var(--space-unit) + 3px);padding-bottom:calc(var(--space-unit) + 5px)}}";
3521
+ const stylesCss = ":host{background-color:var(--gray900)}:host(.inverse){background-color:var(--color-white)}button{cursor:pointer;display:flex;flex-direction:column;width:100%;margin:0;background-color:var(--gray900);border:none;padding:0;letter-spacing:0.16px;white-space:nowrap}button.inverse{background-color:var(--color-white)}button div.firstline{display:flex;justify-content:flex-end;align-items:center;max-width:200px}button.open div.firstline{max-width:none}z-icon{padding:0 2px;fill:var(--color-white)}z-icon.inverse{fill:var(--gray900)}ul{box-sizing:border-box;position:absolute;left:0;padding:calc(var(--space-unit) / 2) calc(var(--space-unit) * 2) 0 calc(var(--space-unit) * 2);width:100%;margin:calc(var(--space-unit) * 1.5) 0 0 0;background-color:var(--gray900);font-family:var(--font-family-sans);font-weight:var(--font-sb);font-size:14px;line-height:20px;letter-spacing:0.3px}ul.inverse{background-color:var(--color-white)}ul>li{display:flex;justify-content:flex-end;white-space:nowrap;padding:calc(var(--space-unit) * 1.5 - 1px) 0;margin:0;border-bottom:var(--border-base) solid var(--gray700)}ul>li.inverse{border-bottom-color:var(--gray400)}ul>li:first-child{border-top:none;padding-top:0;padding-bottom:calc(var(--space-unit) + 6px);flex-direction:column;align-items:end}ul>li:last-child{border-bottom:none;margin-bottom:0}#guestbutton{box-sizing:border-box;display:inline-flex;flex-direction:row;align-items:center;justify-content:center;width:100%;font-family:var(--font-family-sans);font-weight:var(--font-sb);font-size:14px;line-height:1;letter-spacing:0.3px;border-width:var(--border-size-medium);border-style:solid;border-radius:var(--border-radius);vertical-align:middle;text-transform:uppercase;text-decoration:none;cursor:pointer;outline:none;fill:currentColor;height:32px;min-width:32px;padding:0 calc(var(--space-unit) * 2);background-color:var(--color-white);border-color:var(--color-white);color:var(--gray800)}#guestbutton.inverse{background-color:var(--gray800);border-color:var(--gray800);color:var(--color-white)}.userfullname{padding:0;overflow:hidden;max-width:250px;text-overflow:ellipsis;width:100%;color:var(--color-white);font-family:var(--font-family-sans);font-weight:var(--font-sb);font-size:16px;line-height:24px;letter-spacing:0;text-align:right}.userfullname.inverse{color:var(--gray800)}.useremail{color:var(--color-white);font-family:var(--font-family-sans);font-weight:var(--font-rg);font-size:12px;line-height:16px;letter-spacing:0.32px;overflow:hidden;text-overflow:ellipsis;width:100%;text-align:right}.useremail.inverse{color:var(--gray800)}@media only screen and (min-width: 768px){:host{height:calc(var(--space-unit) * 4);background-color:var(--gray900)}:host(.inverse){background-color:var(--color-white)}:host>div{position:relative;top:50%;transform:translateY(-50%)}:host>div.open{top:auto;transform:none}:host>div>div{padding:0}:host>div>div.open{position:absolute;right:calc(var(--space-unit) * -1);box-shadow:0px 2px calc(var(--space-unit) * .5) 0px rgba(0, 0, 0, 0.5);background-color:var(--color-white);margin-top:calc(var(--space-unit) / 2);padding:calc(var(--space-unit) / 2 + 1px) var(--space-unit) 0 var(--space-unit);transform:translate(0, -4px)}:host>div>div.inverse.open{background-color:var(--gray800)}button{display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:flex-end;align-items:end;align-content:center}button.open{background-color:var(--color-white);border-top:var(--border-size-small) solid var(--color-white);border-top-left-radius:calc(var(--space-unit) * .5);border-top-right-radius:calc(var(--space-unit) * .5);max-width:initial;margin-left:var(--space-unit);padding-right:var(--space-unit)}button.open.inverse{border-top-color:var(--gray800);background-color:var(--gray800)}button:not(.open) z-icon{fill:var(--color-white)}button:not(.open) z-icon.inverse{fill:var(--gray800)}button.open z-icon{fill:var(--gray800)}button.open z-icon.inverse{fill:var(--color-white)}.userfullname{font-family:var(--font-family-sans);font-weight:var(--font-sb);font-size:14px;line-height:20px;letter-spacing:0.16px;padding:0 calc(var(--space-unit) - 6px) 0 calc(var(--space-unit) - 2px);width:auto}.userfullname.inverse{color:var(--gray800)}button.open div.userfullname{color:var(--gray800);max-width:none;text-overflow:clip}button.open div.userfullname.inverse{color:var(--color-white)}.useremail{padding-right:calc(var(--space-unit) * 3 - 2px);box-sizing:border-box}button.open div.useremail{color:var(--gray800)}button.open div.useremail.inverse{color:var(--color-white)}ul{position:initial;left:initial;padding:0;width:100%;background-color:var(--color-white)}ul.inverse{border-bottom-color:var(--gray800);background-color:var(--gray800)}ul>li{color:var(--gray800);border-bottom:var(--border-base) solid var(--gray400);margin:0 var(--space-unit)}ul>li.inverse{color:var(--color-white)}ul>li:first-child{border-top:var(--border-base) solid var(--gray400);padding-top:calc(var(--space-unit) + 3px);padding-bottom:calc(var(--space-unit) + 5px)}}";
3522
3522
 
3523
3523
  const ZUserDropdown = class {
3524
3524
  constructor(hostRef) {