@dialpad/dialtone-css 8.65.0 → 8.67.0

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 (10) hide show
  1. package/lib/build/less/components/avatar.less +211 -32
  2. package/lib/build/less/components/presence.less +1 -1
  3. package/lib/build/less/utilities/typography.less +36 -0
  4. package/lib/dist/dialtone-default-theme.css +141 -13
  5. package/lib/dist/dialtone-default-theme.min.css +1 -1
  6. package/lib/dist/dialtone-docs.json +1 -1
  7. package/lib/dist/dialtone.css +141 -13
  8. package/lib/dist/dialtone.min.css +1 -1
  9. package/lib/dist/tokens-docs.json +1 -1
  10. package/package.json +1 -1
package/lib/build/less/components/avatar.less CHANGED
@@ -27,6 +27,7 @@
27
27
  --avatar-presence-position-right: var(--dt-space-200-negative);
28
28
  --avatar-presence-position-bottom: var(--dt-space-200-negative);
29
29
  --avatar-count-color-shadow: var(--dt-shell-color-surface-default);
30
+ --avatar-presence-mask-size: calc(var(--dt-size-450) + var(--dt-size-50));
30
31
 
31
32
  position: relative;
32
33
  display: flex;
@@ -34,25 +35,25 @@
34
35
 
35
36
  // -- COLOR VARIANTS
36
37
  // ------------------------------------------------------------------------
37
- &--color-000 { --avatar-color-background: var(--dt-avatar-color-background-000); }
38
- &--color-100 { --avatar-color-background: var(--dt-avatar-color-background-100); }
39
- &--color-200 { --avatar-color-background: var(--dt-avatar-color-background-200); }
40
- &--color-300 { --avatar-color-background: var(--dt-avatar-color-background-300); }
41
- &--color-400 { --avatar-color-background: var(--dt-avatar-color-background-400); }
42
- &--color-500 { --avatar-color-background: var(--dt-avatar-color-background-500); }
43
- &--color-600 { --avatar-color-background: var(--dt-avatar-color-background-600); }
44
- &--color-700 { --avatar-color-background: var(--dt-avatar-color-background-700); }
45
- &--color-800 { --avatar-color-background: var(--dt-avatar-color-background-800); }
46
- &--color-900 { --avatar-color-background: var(--dt-avatar-color-background-900); }
47
- &--color-1000 { --avatar-color-background: var(--dt-avatar-color-background-1000); }
48
- &--color-1100 { --avatar-color-background: var(--dt-avatar-color-background-1100); }
49
- &--color-1200 { --avatar-color-background: var(--dt-avatar-color-background-1200); }
50
- &--color-1300 { --avatar-color-background: var(--dt-avatar-color-background-1300); }
51
- &--color-1400 { --avatar-color-background: var(--dt-avatar-color-background-1400); }
52
- &--color-1500 { --avatar-color-background: var(--dt-avatar-color-background-1500); }
53
- &--color-1600 { --avatar-color-background: var(--dt-avatar-color-background-1600); }
54
- &--color-1700 { --avatar-color-background: var(--dt-avatar-color-background-1700); }
55
- &--color-1800 { --avatar-color-background: var(--dt-avatar-color-background-1800); }
38
+ &--color-000 { --avatar-color-background: var(--dt-avatar-color-background-000); }
39
+ &--color-100 { --avatar-color-background: var(--dt-avatar-color-background-100); }
40
+ &--color-200 { --avatar-color-background: var(--dt-avatar-color-background-200); }
41
+ &--color-300 { --avatar-color-background: var(--dt-avatar-color-background-300); }
42
+ &--color-400 { --avatar-color-background: var(--dt-avatar-color-background-400); }
43
+ &--color-500 { --avatar-color-background: var(--dt-avatar-color-background-500); }
44
+ &--color-600 { --avatar-color-background: var(--dt-avatar-color-background-600); }
45
+ &--color-700 { --avatar-color-background: var(--dt-avatar-color-background-700); }
46
+ &--color-800 { --avatar-color-background: var(--dt-avatar-color-background-800); }
47
+ &--color-900 { --avatar-color-background: var(--dt-avatar-color-background-900); }
48
+ &--color-1000 { --avatar-color-background: var(--dt-avatar-color-background-1000); }
49
+ &--color-1100 { --avatar-color-background: var(--dt-avatar-color-background-1100); }
50
+ &--color-1200 { --avatar-color-background: var(--dt-avatar-color-background-1200); }
51
+ &--color-1300 { --avatar-color-background: var(--dt-avatar-color-background-1300); }
52
+ &--color-1400 { --avatar-color-background: var(--dt-avatar-color-background-1400); }
53
+ &--color-1500 { --avatar-color-background: var(--dt-avatar-color-background-1500); }
54
+ &--color-1600 { --avatar-color-background: var(--dt-avatar-color-background-1600); }
55
+ &--color-1700 { --avatar-color-background: var(--dt-avatar-color-background-1700); }
56
+ &--color-1800 { --avatar-color-background: var(--dt-avatar-color-background-1800); }
56
57
 
57
58
  // -- CHILDREN
58
59
  // ------------------------------------------------------------------------
@@ -61,22 +62,22 @@
61
62
  display: flex;
62
63
  align-items: center;
63
64
  justify-content: center;
64
- width: var(--avatar-size-shape);
65
- height: var(--avatar-size-shape);
65
+ inline-size: var(--avatar-size-shape);
66
+ block-size: var(--avatar-size-shape);
66
67
  overflow: hidden;
67
68
  background-color: var(--avatar-color-background);
68
69
  border-radius: var(--dt-size-radius-pill);
69
70
  }
70
71
 
71
72
  &__image {
72
- width: var(--avatar-size-image);
73
- height: var(--avatar-size-image);
73
+ inline-size: var(--avatar-size-image);
74
+ block-size: var(--avatar-size-image);
74
75
  object-fit: cover;
75
76
  border-radius: var(--dt-size-radius-pill);
76
77
  }
77
78
 
78
79
  &--image-loaded {
79
- background-color: transparent;
80
+ background-color: var(--dt-color-neutral-transparent);
80
81
  background-image: unset;
81
82
  }
82
83
 
@@ -126,13 +127,16 @@
126
127
  .d-recipe-leftbar-row__primary:hover & {
127
128
  --avatar-count-color-shadow: var(--dt-shell-action-color-background-primary-hover);
128
129
  }
130
+
131
+ --avatar-count-color-shadow: var(--dt-color-neutral-transparent);
132
+
129
133
  }
130
134
 
131
135
  &--clickable {
132
- --avatar-color-border: transparent;
136
+ --avatar-color-border: var(--dt-color-neutral-transparent);
133
137
 
134
138
  padding: 0;
135
- background-color: transparent;
139
+ background-color: var(--dt-color-neutral-transparent);
136
140
  border: var(--dt-size-border-100) solid var(--avatar-color-border);
137
141
  border-radius: var(--dt-size-radius-circle);
138
142
  cursor: pointer;
@@ -159,19 +163,19 @@
159
163
  display: flex;
160
164
  align-items: center;
161
165
  justify-content: center;
162
- width: var(--dt-size-100-percent);
163
- height: var(--dt-size-100-percent);
166
+ inline-size: var(--dt-size-100-percent);
167
+ block-size: var(--dt-size-100-percent);
164
168
  background-color: var(--dt-color-surface-contrast-opaque);
165
169
  border-radius: var(--dt-size-radius-circle);
166
170
  opacity: var(--dt-opacity-900);
167
171
 
168
172
  &-icon {
169
- width: var(--dt-size-100-percent);
173
+ inline-size: var(--dt-size-100-percent);
170
174
  color: var(--dt-color-foreground-primary-inverted);
171
175
  }
172
176
 
173
177
  &-text {
174
- width: var(--dt-size-100-percent);
178
+ inline-size: var(--dt-size-100-percent);
175
179
  color: var(--dt-color-foreground-primary-inverted);
176
180
  font-weight: var(--dt-font-weight-bold);
177
181
  font-size: var(--dt-font-size-200);
@@ -186,6 +190,8 @@
186
190
  --avatar-size-shape: calc(var(--dt-size-500) + var(--dt-size-200));
187
191
  --avatar-presence-position-right: var(--dt-space-300-negative);
188
192
  --avatar-presence-position-bottom: var(--dt-space-300-negative);
193
+ --avatar-presence-mask-offset-x: var(--dt-space-200);
194
+ --avatar-presence-mask-offset-y: var(--dt-space-200);
189
195
  }
190
196
 
191
197
  &--sm {
@@ -193,6 +199,8 @@
193
199
  --avatar-size-text: var(--dt-font-size-100);
194
200
  --avatar-presence-position-right: var(--dt-space-200-negative);
195
201
  --avatar-presence-position-bottom: var(--dt-space-200-negative);
202
+ --avatar-presence-mask-offset-x: var(--dt-space-300);
203
+ --avatar-presence-mask-offset-y: var(--dt-space-300);
196
204
  }
197
205
 
198
206
  &--md {
@@ -200,6 +208,12 @@
200
208
  --avatar-size-text: var(--dt-font-size-200);
201
209
  --avatar-presence-position-right: var(--dt-space-100-negative);
202
210
  --avatar-presence-position-bottom: var(--dt-space-100-negative);
211
+ --avatar-presence-mask-offset-x: calc(
212
+ var(--dt-space-350) - var(--dt-space-100)
213
+ );
214
+ --avatar-presence-mask-offset-y: calc(
215
+ var(--dt-space-350) - var(--dt-space-100)
216
+ );
203
217
  }
204
218
 
205
219
  &--lg {
@@ -207,6 +221,12 @@
207
221
  --avatar-size-text: var(--dt-font-size-300);
208
222
  --avatar-presence-position-right: var(--dt-space-100);
209
223
  --avatar-presence-position-bottom: var(--dt-space-100);
224
+ --avatar-presence-mask-offset-x: calc(
225
+ var(--dt-space-400) - var(--dt-space-100)
226
+ );
227
+ --avatar-presence-mask-offset-y: calc(
228
+ var(--dt-space-400) - var(--dt-space-100)
229
+ );
210
230
  }
211
231
 
212
232
  &--xl {
@@ -214,6 +234,72 @@
214
234
  --avatar-size-text: var(--dt-font-size-400);
215
235
  --avatar-presence-position-right: var(--dt-space-300);
216
236
  --avatar-presence-position-bottom: var(--dt-space-300);
237
+ --avatar-presence-mask-offset-x: calc(
238
+ var(--dt-space-450) - var(--dt-space-200)
239
+ );
240
+ --avatar-presence-mask-offset-y: calc(
241
+ var(--dt-space-450) - var(--dt-space-200)
242
+ );
243
+ }
244
+
245
+ // -- PRESENCE
246
+ // ------------------------------------------------------------------------
247
+
248
+ &--presence {
249
+ > .d-avatar__canvas,
250
+ > .d-avatar__overlay {
251
+ mask: radial-gradient(
252
+ circle calc(var(--avatar-presence-mask-size) / 2) at
253
+ calc(var(--dt-size-100-percent) - var(--avatar-presence-mask-offset-x))
254
+ calc(var(--dt-size-100-percent) - var(--avatar-presence-mask-offset-y)),
255
+ var(--dt-color-neutral-transparent) 92%, // less than 99% to smooth the edges
256
+ var(--dt-color-neutral-white) var(--dt-size-100-percent)
257
+ );
258
+ }
259
+
260
+ &.d-avatar--clickable {
261
+ border-color: var(--dt-color-neutral-transparent);
262
+
263
+ // The clickable border causes issues with masking
264
+ // Use a pseudo-element to simulate the clickable border and mask as needed
265
+
266
+ &::before {
267
+ position: absolute;
268
+ background-color: var(--dt-color-neutral-transparent);
269
+ border: var(--dt-size-border-100) solid var(--avatar-color-border);
270
+ border-radius: var(--dt-size-radius-circle);
271
+ content: "";
272
+ inset: calc(var(--dt-space-100) * -1);
273
+ mask: radial-gradient(
274
+ circle calc(var(--avatar-presence-mask-size) / 2) at
275
+ calc(
276
+ var(--dt-size-100-percent) - var(--avatar-presence-mask-offset-x) - var(--dt-size-100)
277
+ )
278
+ calc(
279
+ var(--dt-size-100-percent) - var(--avatar-presence-mask-offset-y) - var(--dt-size-100)
280
+ ),
281
+ var(--dt-color-neutral-transparent) 92%, // less than 99% to smooth the edges
282
+ var(--dt-color-neutral-white) var(--dt-size-100-percent)
283
+ );
284
+ }
285
+ }
286
+
287
+ // override default presence border
288
+ > .d-presence {
289
+ --presence-color-border-base: var(--dt-color-neutral-transparent);
290
+ }
291
+ }
292
+
293
+ // Recipe overrides (Leftbar states)
294
+ .d-recipe-leftbar-row--selected &,
295
+ .d-recipe-leftbar-row:hover &,
296
+ .d-recipe-leftbar-row:focus-within &,
297
+ .d-recipe-leftbar-row__primary:hover & {
298
+ &--presence {
299
+ .d-presence {
300
+ --presence-color-border-base: var(--dt-color-neutral-transparent);
301
+ }
302
+ }
217
303
  }
218
304
 
219
305
  // -- GROUP
@@ -222,7 +308,100 @@
222
308
  &--group {
223
309
  --avatar-size-shape: calc(var(--dt-size-300) * 4.5);
224
310
 
225
- width: var(--dt-size-550);
226
- height: var(--dt-size-550);
311
+ inline-size: var(--dt-size-550);
312
+ block-size: var(--dt-size-550);
313
+
314
+ --avatar-count-mask-size: calc(
315
+ var(--dt-size-500) + var(--dt-size-200) + var(--dt-size-100)
316
+ );
317
+ --avatar-count-mask-outer-circle-radius: calc(
318
+ var(--dt-size-400) + var(--dt-size-100)
319
+ );
320
+ --avatar-count-mask-outer-circle-x: calc(
321
+ var(--dt-size-400) + var(--dt-size-100)
322
+ );
323
+ --avatar-count-mask-outer-circle-y: calc(
324
+ var(--dt-size-400) + var(--dt-size-100)
325
+ );
326
+ --avatar-count-mask-offset-x: var(--dt-space-100);
327
+ --avatar-count-mask-offset-y: var(--dt-space-100);
328
+ --avatar-count-mask-svg-w: calc(var(--dt-size-625) - var(--dt-size-200));
329
+ --avatar-count-mask-svg-h: calc(var(--dt-size-500) + var(--dt-size-200));
330
+ --avatar-count-color-shadow: var(--dt-color-neutral-transparent);
331
+
332
+ &.d-avatar--clickable {
333
+ border: none !important;
334
+ }
335
+
336
+ > .d-avatar__canvas,
337
+ > .d-avatar__overlay {
338
+ mask: radial-gradient(
339
+ circle calc(var(--avatar-count-mask-size) / 2) at
340
+ calc(var(--dt-size-100-percent) - var(--avatar-count-mask-offset-x))
341
+ calc(var(--dt-size-100-percent) - var(--avatar-count-mask-offset-y)),
342
+ var(--dt-color-neutral-transparent) 92%, // less than 99% to smooth the edges
343
+ var(--dt-color-neutral-white) var(--dt-size-100-percent)
344
+ );
345
+ will-change: transform;
346
+ }
347
+
348
+ // These modifiers set the mask and count size and must be used together with `d-avatar--group`.
349
+ // Example: <div class="d-avatar d-avatar--group d-avatar--group-digits-2">
350
+
351
+ &-digits-2 {
352
+ --avatar-count-mask-offset-x: var(--dt-space-300);
353
+ --avatar-count-mask-offset-y: var(--dt-space-400);
354
+
355
+ > .d-avatar__canvas,
356
+ > .d-avatar__overlay {
357
+ mask:
358
+ radial-gradient(
359
+ circle var(--avatar-count-mask-outer-circle-radius) at
360
+ var(--avatar-count-mask-outer-circle-x)
361
+ var(--avatar-count-mask-outer-circle-y),
362
+ var(--dt-color-neutral-white) 99%,
363
+ var(--dt-color-neutral-transparent) var(--dt-size-100-percent)
364
+ ),
365
+ url('data:image/svg+xml,<svg width="40" height="18" viewBox="0 0 40 18" fill="white" xmlns="http://www.w3.org/2000/svg"><rect width="40" height="18" rx="9" fill="white"/></svg>')
366
+ var(--avatar-count-mask-offset-x)
367
+ var(--avatar-count-mask-offset-y) / var(--avatar-count-mask-svg-w)
368
+ var(--avatar-count-mask-svg-h) no-repeat;
369
+ -webkit-mask-composite: subtract;
370
+ mask-composite: subtract;
371
+ will-change: transform;
372
+ }
373
+
374
+ > .d-avatar__count {
375
+ inline-size: calc(var(--dt-size-500) + var(--dt-size-200));
376
+ }
377
+ }
378
+
379
+ &-digits-3 {
380
+ --avatar-count-mask-offset-x: var(--dt-space-300-negative);
381
+ --avatar-count-mask-offset-y: var(--dt-space-400);
382
+
383
+ > .d-avatar__canvas,
384
+ > .d-avatar__overlay {
385
+ mask:
386
+ radial-gradient(
387
+ circle var(--avatar-count-mask-outer-circle-radius) at
388
+ var(--avatar-count-mask-outer-circle-x)
389
+ var(--avatar-count-mask-outer-circle-y),
390
+ var(--dt-color-neutral-white) 99%,
391
+ var(--dt-color-neutral-transparent) var(--dt-size-100-percent)
392
+ ),
393
+ url('data:image/svg+xml,<svg width="40" height="18" viewBox="0 0 40 18" fill="white" xmlns="http://www.w3.org/2000/svg"><rect width="40" height="18" rx="9" /></svg>')
394
+ var(--avatar-count-mask-offset-x)
395
+ var(--avatar-count-mask-offset-y) / var(--avatar-count-mask-svg-w)
396
+ var(--avatar-count-mask-svg-h) no-repeat;
397
+ -webkit-mask-composite: subtract;
398
+ mask-composite: subtract;
399
+ will-change: transform;
400
+ }
401
+
402
+ > .d-avatar__count {
403
+ inline-size: calc(var(--dt-size-550) + var(--dt-size-200));
404
+ }
405
+ }
227
406
  }
228
407
  }
package/lib/build/less/components/presence.less CHANGED
@@ -7,7 +7,7 @@
7
7
  // visit https://dialtone.dialpad.com/components/presence
8
8
 
9
9
  .d-presence {
10
- --presence-color-border-base: var(--dt-color-surface-secondary); // Probably won't be necessary after @jeverhart-dialpad's DLT-2665 PR
10
+ --presence-color-border-base: var(--dt-color-surface-secondary);
11
11
  --presence-color-border-offline: var(--dt-presence-color-offline);
12
12
  --presence-color-background-active: var(--dt-presence-color-available);
13
13
  --presence-color-background-busy: var(--dt-presence-color-unavailable);
package/lib/build/less/utilities/typography.less CHANGED
@@ -376,6 +376,42 @@ ul {
376
376
  .d-to-clip { text-overflow: clip !important; }
377
377
  .d-to-unset { text-overflow: unset !important; }
378
378
 
379
+
380
+ // ============================================================================
381
+ // $$ LINE CLAMP
382
+ // ----------------------------------------------------------------------------
383
+ // Base styles for all line-clamp classes
384
+ [class*="d-lc-"] {
385
+ --lc-lines: initial;
386
+
387
+ display: -webkit-box !important;
388
+ overflow: hidden !important;
389
+ -webkit-box-orient: vertical !important;
390
+ -webkit-line-clamp: var(--lc-lines) !important;
391
+ }
392
+
393
+ // Individual line-clamp values
394
+ .d-lc {
395
+ &-1 { --lc-lines: 1; }
396
+ &-2 { --lc-lines: 2; }
397
+ &-3 { --lc-lines: 3; }
398
+ &-4 { --lc-lines: 4; }
399
+ &-5 { --lc-lines: 5; }
400
+ &-6 { --lc-lines: 6; }
401
+ &-7 { --lc-lines: 7; }
402
+ &-8 { --lc-lines: 8; }
403
+ &-9 { --lc-lines: 9; }
404
+
405
+ // Reset classes
406
+ &-none,
407
+ &-unset {
408
+ display: initial !important;
409
+ overflow: initial !important;
410
+ -webkit-box-orient: initial !important;
411
+ -webkit-line-clamp: initial !important;
412
+ }
413
+ }
414
+
379
415
  // $$ OVERFLOW WRAP
380
416
  // ----------------------------------------------------------------------------
381
417
  .d-ow-normal { overflow-wrap: normal !important; }
package/lib/dist/dialtone-default-theme.css CHANGED
@@ -1019,6 +1019,7 @@ template {
1019
1019
  --avatar-presence-position-right: var(--dt-space-200-negative);
1020
1020
  --avatar-presence-position-bottom: var(--dt-space-200-negative);
1021
1021
  --avatar-count-color-shadow: var(--dt-shell-color-surface-default);
1022
+ --avatar-presence-mask-size: calc(var(--dt-size-450) + var(--dt-size-50));
1022
1023
  position: relative;
1023
1024
  display: flex;
1024
1025
  color: var(--avatar-color-text);
@@ -1084,21 +1085,21 @@ template {
1084
1085
  display: flex;
1085
1086
  align-items: center;
1086
1087
  justify-content: center;
1087
- width: var(--avatar-size-shape);
1088
- height: var(--avatar-size-shape);
1088
+ inline-size: var(--avatar-size-shape);
1089
+ block-size: var(--avatar-size-shape);
1089
1090
  overflow: hidden;
1090
1091
  background-color: var(--avatar-color-background);
1091
1092
  border-radius: var(--dt-size-radius-pill);
1092
1093
  }
1093
1094
  .d-avatar__image {
1094
- width: var(--avatar-size-image);
1095
- height: var(--avatar-size-image);
1095
+ inline-size: var(--avatar-size-image);
1096
+ block-size: var(--avatar-size-image);
1096
1097
  -o-object-fit: cover;
1097
1098
  object-fit: cover;
1098
1099
  border-radius: var(--dt-size-radius-pill);
1099
1100
  }
1100
1101
  .d-avatar--image-loaded {
1101
- background-color: transparent;
1102
+ background-color: var(--dt-color-neutral-transparent);
1102
1103
  background-image: unset;
1103
1104
  }
1104
1105
  .d-avatar__initials {
@@ -1141,15 +1142,16 @@ template {
1141
1142
  background-color: var(--dt-color-surface-strong);
1142
1143
  border-radius: var(--dt-size-radius-pill);
1143
1144
  box-shadow: 0 0 0 var(--dt-size-200) var(--avatar-count-color-shadow);
1145
+ --avatar-count-color-shadow: var(--dt-color-neutral-transparent);
1144
1146
  }
1145
1147
  .d-recipe-leftbar-row--selected .d-avatar__count,
1146
1148
  .d-recipe-leftbar-row__primary:hover .d-avatar__count {
1147
1149
  --avatar-count-color-shadow: var(--dt-shell-action-color-background-primary-hover);
1148
1150
  }
1149
1151
  .d-avatar--clickable {
1150
- --avatar-color-border: transparent;
1152
+ --avatar-color-border: var(--dt-color-neutral-transparent);
1151
1153
  padding: 0;
1152
- background-color: transparent;
1154
+ background-color: var(--dt-color-neutral-transparent);
1153
1155
  border: var(--dt-size-border-100) solid var(--avatar-color-border);
1154
1156
  border-radius: var(--dt-size-radius-circle);
1155
1157
  cursor: pointer;
@@ -1172,18 +1174,18 @@ template {
1172
1174
  display: flex;
1173
1175
  align-items: center;
1174
1176
  justify-content: center;
1175
- width: var(--dt-size-100-percent);
1176
- height: var(--dt-size-100-percent);
1177
+ inline-size: var(--dt-size-100-percent);
1178
+ block-size: var(--dt-size-100-percent);
1177
1179
  background-color: var(--dt-color-surface-contrast-opaque);
1178
1180
  border-radius: var(--dt-size-radius-circle);
1179
1181
  opacity: var(--dt-opacity-900);
1180
1182
  }
1181
1183
  .d-avatar__overlay-icon {
1182
- width: var(--dt-size-100-percent);
1184
+ inline-size: var(--dt-size-100-percent);
1183
1185
  color: var(--dt-color-foreground-primary-inverted);
1184
1186
  }
1185
1187
  .d-avatar__overlay-text {
1186
- width: var(--dt-size-100-percent);
1188
+ inline-size: var(--dt-size-100-percent);
1187
1189
  color: var(--dt-color-foreground-primary-inverted);
1188
1190
  font-weight: var(--dt-font-weight-bold);
1189
1191
  font-size: var(--dt-font-size-200);
@@ -1193,35 +1195,120 @@ template {
1193
1195
  --avatar-size-shape: calc(var(--dt-size-500) + var(--dt-size-200));
1194
1196
  --avatar-presence-position-right: var(--dt-space-300-negative);
1195
1197
  --avatar-presence-position-bottom: var(--dt-space-300-negative);
1198
+ --avatar-presence-mask-offset-x: var(--dt-space-200);
1199
+ --avatar-presence-mask-offset-y: var(--dt-space-200);
1196
1200
  }
1197
1201
  .d-avatar--sm {
1198
1202
  --avatar-size-shape: var(--dt-size-550);
1199
1203
  --avatar-size-text: var(--dt-font-size-100);
1200
1204
  --avatar-presence-position-right: var(--dt-space-200-negative);
1201
1205
  --avatar-presence-position-bottom: var(--dt-space-200-negative);
1206
+ --avatar-presence-mask-offset-x: var(--dt-space-300);
1207
+ --avatar-presence-mask-offset-y: var(--dt-space-300);
1202
1208
  }
1203
1209
  .d-avatar--md {
1204
1210
  --avatar-size-shape: var(--dt-size-600);
1205
1211
  --avatar-size-text: var(--dt-font-size-200);
1206
1212
  --avatar-presence-position-right: var(--dt-space-100-negative);
1207
1213
  --avatar-presence-position-bottom: var(--dt-space-100-negative);
1214
+ --avatar-presence-mask-offset-x: calc(var(--dt-space-350) - var(--dt-space-100));
1215
+ --avatar-presence-mask-offset-y: calc(var(--dt-space-350) - var(--dt-space-100));
1208
1216
  }
1209
1217
  .d-avatar--lg {
1210
1218
  --avatar-size-shape: var(--dt-size-650);
1211
1219
  --avatar-size-text: var(--dt-font-size-300);
1212
1220
  --avatar-presence-position-right: var(--dt-space-100);
1213
1221
  --avatar-presence-position-bottom: var(--dt-space-100);
1222
+ --avatar-presence-mask-offset-x: calc(var(--dt-space-400) - var(--dt-space-100));
1223
+ --avatar-presence-mask-offset-y: calc(var(--dt-space-400) - var(--dt-space-100));
1214
1224
  }
1215
1225
  .d-avatar--xl {
1216
1226
  --avatar-size-shape: var(--dt-size-700);
1217
1227
  --avatar-size-text: var(--dt-font-size-400);
1218
1228
  --avatar-presence-position-right: var(--dt-space-300);
1219
1229
  --avatar-presence-position-bottom: var(--dt-space-300);
1230
+ --avatar-presence-mask-offset-x: calc(var(--dt-space-450) - var(--dt-space-200));
1231
+ --avatar-presence-mask-offset-y: calc(var(--dt-space-450) - var(--dt-space-200));
1232
+ }
1233
+ .d-avatar--presence > .d-avatar__canvas,
1234
+ .d-avatar--presence > .d-avatar__overlay {
1235
+ -webkit-mask: radial-gradient(circle calc(var(--avatar-presence-mask-size) / 2) at calc(var(--dt-size-100-percent) - var(--avatar-presence-mask-offset-x)) calc(var(--dt-size-100-percent) - var(--avatar-presence-mask-offset-y)), var(--dt-color-neutral-transparent) 92%, var(--dt-color-neutral-white) var(--dt-size-100-percent));
1236
+ mask: radial-gradient(circle calc(var(--avatar-presence-mask-size) / 2) at calc(var(--dt-size-100-percent) - var(--avatar-presence-mask-offset-x)) calc(var(--dt-size-100-percent) - var(--avatar-presence-mask-offset-y)), var(--dt-color-neutral-transparent) 92%, var(--dt-color-neutral-white) var(--dt-size-100-percent));
1237
+ }
1238
+ .d-avatar--presence.d-avatar--clickable {
1239
+ border-color: var(--dt-color-neutral-transparent);
1240
+ }
1241
+ .d-avatar--presence.d-avatar--clickable::before {
1242
+ position: absolute;
1243
+ background-color: var(--dt-color-neutral-transparent);
1244
+ border: var(--dt-size-border-100) solid var(--avatar-color-border);
1245
+ border-radius: var(--dt-size-radius-circle);
1246
+ content: "";
1247
+ inset: calc(var(--dt-space-100) * -1);
1248
+ -webkit-mask: radial-gradient(circle calc(var(--avatar-presence-mask-size) / 2) at calc(var(--dt-size-100-percent) - var(--avatar-presence-mask-offset-x) - var(--dt-size-100)) calc(var(--dt-size-100-percent) - var(--avatar-presence-mask-offset-y) - var(--dt-size-100)), var(--dt-color-neutral-transparent) 92%, var(--dt-color-neutral-white) var(--dt-size-100-percent));
1249
+ mask: radial-gradient(circle calc(var(--avatar-presence-mask-size) / 2) at calc(var(--dt-size-100-percent) - var(--avatar-presence-mask-offset-x) - var(--dt-size-100)) calc(var(--dt-size-100-percent) - var(--avatar-presence-mask-offset-y) - var(--dt-size-100)), var(--dt-color-neutral-transparent) 92%, var(--dt-color-neutral-white) var(--dt-size-100-percent));
1250
+ }
1251
+ .d-avatar--presence > .d-presence {
1252
+ --presence-color-border-base: var(--dt-color-neutral-transparent);
1253
+ }
1254
+ .d-recipe-leftbar-row--selected .d-avatar--presence .d-presence,
1255
+ .d-recipe-leftbar-row:hover .d-avatar--presence .d-presence,
1256
+ .d-recipe-leftbar-row:focus-within .d-avatar--presence .d-presence,
1257
+ .d-recipe-leftbar-row__primary:hover .d-avatar--presence .d-presence {
1258
+ --presence-color-border-base: var(--dt-color-neutral-transparent);
1220
1259
  }
1221
1260
  .d-avatar--group {
1222
1261
  --avatar-size-shape: calc(var(--dt-size-300) * 4.5);
1223
- width: var(--dt-size-550);
1224
- height: var(--dt-size-550);
1262
+ inline-size: var(--dt-size-550);
1263
+ block-size: var(--dt-size-550);
1264
+ --avatar-count-mask-size: calc(var(--dt-size-500) + var(--dt-size-200) + var(--dt-size-100));
1265
+ --avatar-count-mask-outer-circle-radius: calc(var(--dt-size-400) + var(--dt-size-100));
1266
+ --avatar-count-mask-outer-circle-x: calc(var(--dt-size-400) + var(--dt-size-100));
1267
+ --avatar-count-mask-outer-circle-y: calc(var(--dt-size-400) + var(--dt-size-100));
1268
+ --avatar-count-mask-offset-x: var(--dt-space-100);
1269
+ --avatar-count-mask-offset-y: var(--dt-space-100);
1270
+ --avatar-count-mask-svg-w: calc(var(--dt-size-625) - var(--dt-size-200));
1271
+ --avatar-count-mask-svg-h: calc(var(--dt-size-500) + var(--dt-size-200));
1272
+ --avatar-count-color-shadow: var(--dt-color-neutral-transparent);
1273
+ }
1274
+ .d-avatar--group.d-avatar--clickable {
1275
+ border: none !important;
1276
+ }
1277
+ .d-avatar--group > .d-avatar__canvas,
1278
+ .d-avatar--group > .d-avatar__overlay {
1279
+ -webkit-mask: radial-gradient(circle calc(var(--avatar-count-mask-size) / 2) at calc(var(--dt-size-100-percent) - var(--avatar-count-mask-offset-x)) calc(var(--dt-size-100-percent) - var(--avatar-count-mask-offset-y)), var(--dt-color-neutral-transparent) 92%, var(--dt-color-neutral-white) var(--dt-size-100-percent));
1280
+ mask: radial-gradient(circle calc(var(--avatar-count-mask-size) / 2) at calc(var(--dt-size-100-percent) - var(--avatar-count-mask-offset-x)) calc(var(--dt-size-100-percent) - var(--avatar-count-mask-offset-y)), var(--dt-color-neutral-transparent) 92%, var(--dt-color-neutral-white) var(--dt-size-100-percent));
1281
+ will-change: transform;
1282
+ }
1283
+ .d-avatar--group-digits-2 {
1284
+ --avatar-count-mask-offset-x: var(--dt-space-300);
1285
+ --avatar-count-mask-offset-y: var(--dt-space-400);
1286
+ }
1287
+ .d-avatar--group-digits-2 > .d-avatar__canvas,
1288
+ .d-avatar--group-digits-2 > .d-avatar__overlay {
1289
+ -webkit-mask: radial-gradient(circle var(--avatar-count-mask-outer-circle-radius) at var(--avatar-count-mask-outer-circle-x) var(--avatar-count-mask-outer-circle-y), var(--dt-color-neutral-white) 99%, var(--dt-color-neutral-transparent) var(--dt-size-100-percent)), url('data:image/svg+xml,<svg width="40" height="18" viewBox="0 0 40 18" fill="white" xmlns="http://www.w3.org/2000/svg"><rect width="40" height="18" rx="9" fill="white"/></svg>') var(--avatar-count-mask-offset-x) var(--avatar-count-mask-offset-y) / var(--avatar-count-mask-svg-w) var(--avatar-count-mask-svg-h) no-repeat;
1290
+ mask: radial-gradient(circle var(--avatar-count-mask-outer-circle-radius) at var(--avatar-count-mask-outer-circle-x) var(--avatar-count-mask-outer-circle-y), var(--dt-color-neutral-white) 99%, var(--dt-color-neutral-transparent) var(--dt-size-100-percent)), url('data:image/svg+xml,<svg width="40" height="18" viewBox="0 0 40 18" fill="white" xmlns="http://www.w3.org/2000/svg"><rect width="40" height="18" rx="9" fill="white"/></svg>') var(--avatar-count-mask-offset-x) var(--avatar-count-mask-offset-y) / var(--avatar-count-mask-svg-w) var(--avatar-count-mask-svg-h) no-repeat;
1291
+ -webkit-mask-composite: subtract;
1292
+ mask-composite: subtract;
1293
+ will-change: transform;
1294
+ }
1295
+ .d-avatar--group-digits-2 > .d-avatar__count {
1296
+ inline-size: calc(var(--dt-size-500) + var(--dt-size-200));
1297
+ }
1298
+ .d-avatar--group-digits-3 {
1299
+ --avatar-count-mask-offset-x: var(--dt-space-300-negative);
1300
+ --avatar-count-mask-offset-y: var(--dt-space-400);
1301
+ }
1302
+ .d-avatar--group-digits-3 > .d-avatar__canvas,
1303
+ .d-avatar--group-digits-3 > .d-avatar__overlay {
1304
+ -webkit-mask: radial-gradient(circle var(--avatar-count-mask-outer-circle-radius) at var(--avatar-count-mask-outer-circle-x) var(--avatar-count-mask-outer-circle-y), var(--dt-color-neutral-white) 99%, var(--dt-color-neutral-transparent) var(--dt-size-100-percent)), url('data:image/svg+xml,<svg width="40" height="18" viewBox="0 0 40 18" fill="white" xmlns="http://www.w3.org/2000/svg"><rect width="40" height="18" rx="9" /></svg>') var(--avatar-count-mask-offset-x) var(--avatar-count-mask-offset-y) / var(--avatar-count-mask-svg-w) var(--avatar-count-mask-svg-h) no-repeat;
1305
+ mask: radial-gradient(circle var(--avatar-count-mask-outer-circle-radius) at var(--avatar-count-mask-outer-circle-x) var(--avatar-count-mask-outer-circle-y), var(--dt-color-neutral-white) 99%, var(--dt-color-neutral-transparent) var(--dt-size-100-percent)), url('data:image/svg+xml,<svg width="40" height="18" viewBox="0 0 40 18" fill="white" xmlns="http://www.w3.org/2000/svg"><rect width="40" height="18" rx="9" /></svg>') var(--avatar-count-mask-offset-x) var(--avatar-count-mask-offset-y) / var(--avatar-count-mask-svg-w) var(--avatar-count-mask-svg-h) no-repeat;
1306
+ -webkit-mask-composite: subtract;
1307
+ mask-composite: subtract;
1308
+ will-change: transform;
1309
+ }
1310
+ .d-avatar--group-digits-3 > .d-avatar__count {
1311
+ inline-size: calc(var(--dt-size-550) + var(--dt-size-200));
1225
1312
  }
1226
1313
  .d-badge {
1227
1314
  --badge-color-text: var(--dt-badge-color-foreground-default);
@@ -8341,6 +8428,47 @@ ul {
8341
8428
  .d-to-unset {
8342
8429
  text-overflow: unset !important;
8343
8430
  }
8431
+ [class*="d-lc-"] {
8432
+ --lc-lines: initial;
8433
+ display: -webkit-box !important;
8434
+ overflow: hidden !important;
8435
+ -webkit-box-orient: vertical !important;
8436
+ -webkit-line-clamp: var(--lc-lines) !important;
8437
+ }
8438
+ .d-lc-1 {
8439
+ --lc-lines: 1;
8440
+ }
8441
+ .d-lc-2 {
8442
+ --lc-lines: 2;
8443
+ }
8444
+ .d-lc-3 {
8445
+ --lc-lines: 3;
8446
+ }
8447
+ .d-lc-4 {
8448
+ --lc-lines: 4;
8449
+ }
8450
+ .d-lc-5 {
8451
+ --lc-lines: 5;
8452
+ }
8453
+ .d-lc-6 {
8454
+ --lc-lines: 6;
8455
+ }
8456
+ .d-lc-7 {
8457
+ --lc-lines: 7;
8458
+ }
8459
+ .d-lc-8 {
8460
+ --lc-lines: 8;
8461
+ }
8462
+ .d-lc-9 {
8463
+ --lc-lines: 9;
8464
+ }
8465
+ .d-lc-none,
8466
+ .d-lc-unset {
8467
+ display: initial !important;
8468
+ overflow: initial !important;
8469
+ -webkit-box-orient: initial !important;
8470
+ -webkit-line-clamp: initial !important;
8471
+ }
8344
8472
  .d-ow-normal {
8345
8473
  overflow-wrap: normal !important;
8346
8474
  }