@dialpad/dialtone-css 8.81.0-next.10 → 8.81.0-next.12

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 (13) hide show
  1. package/lib/build/less/components/avatar.less +24 -14
  2. package/lib/build/less/components/emoji-picker.less +12 -4
  3. package/lib/dist/dialtone-default-theme.css +29 -18
  4. package/lib/dist/dialtone-default-theme.min.css +1 -1
  5. package/lib/dist/dialtone-docs.json +1 -1
  6. package/lib/dist/dialtone.css +29 -18
  7. package/lib/dist/dialtone.min.css +1 -1
  8. package/lib/dist/no-layers/dialtone-default-theme.css +29 -18
  9. package/lib/dist/no-layers/dialtone-default-theme.min.css +1 -1
  10. package/lib/dist/no-layers/dialtone.css +29 -18
  11. package/lib/dist/no-layers/dialtone.min.css +1 -1
  12. package/lib/dist/tokens-docs.json +1 -1
  13. package/package.json +1 -1
package/lib/build/less/components/avatar.less CHANGED
@@ -29,8 +29,8 @@
29
29
  --avatar-border-radius: calc(var(--avatar-size-shape) * 0.125);
30
30
  --avatar-presence-shape: calc(var(--avatar-size-shape) * 0.375);
31
31
  --avatar-presence-border-radius: calc(var(--avatar-border-radius) * 0.625);
32
- --avatar-presence-position-right: var(--dt-spacing-0);
33
- --avatar-presence-position-bottom: var(--dt-spacing-0);
32
+ --avatar-presence-position-right: var(--dt-spacing-25-negative);
33
+ --avatar-presence-position-bottom: var(--dt-spacing-25-negative);
34
34
  --avatar-icon-size: calc(var(--avatar-size-shape) * 0.625);
35
35
  --avatar-count-color-shadow: var(--dt-shell-color-surface-default);
36
36
 
@@ -191,10 +191,10 @@
191
191
  position: absolute;
192
192
  background-color: var(--dt-color-neutral-white);
193
193
  border-radius: var(--avatar-border-radius);
194
- opacity: 0.5;
194
+ opacity: var(--dt-opacity-700);
195
195
  content: '';
196
196
  pointer-events: none;
197
- inset: 0;
197
+ inset: var(--dt-spacing-0);
198
198
  }
199
199
  }
200
200
  }
@@ -304,7 +304,7 @@
304
304
  &--clickable {
305
305
  --avatar-color-border: var(--dt-color-neutral-transparent);
306
306
 
307
- padding: 0;
307
+ padding: var(--dt-spacing-0);
308
308
  background-color: var(--dt-color-neutral-transparent);
309
309
  border: var(--dt-size-border-0) solid var(--avatar-color-border);
310
310
  border-radius: var(--avatar-border-radius);
@@ -348,52 +348,62 @@
348
348
  &--xs,
349
349
  &--size-100 {
350
350
  --avatar-size-shape: calc(var(--dt-layout-100) * 0.25);
351
+ --avatar-presence-position-right: var(--dt-spacing-0);
352
+ --avatar-presence-position-bottom: var(--dt-spacing-0);
351
353
  --avatar-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M12.8 0c1.12 0 1.68 0 2.108.218a2 2 0 0 1 .874.874C16 1.52 16 2.08 16 3.2v5.3h-3.5c-1.4 0-2.1 0-2.635.272a2.5 2.5 0 0 0-1.093 1.093C8.5 10.4 8.5 11.1 8.5 12.5V16H3.2c-1.12 0-1.68 0-2.108-.218a2 2 0 0 1-.874-.874C0 14.48 0 13.92 0 12.8V3.2c0-1.12 0-1.68.218-2.108a2 2 0 0 1 .874-.874C1.52 0 2.08 0 3.2 0z'/%3E%3C/svg%3E");
352
354
  }
353
355
 
354
356
  &--size-150 {
355
357
  --avatar-size-shape: calc(var(--dt-layout-100) * 0.3125);
356
358
  --avatar-size-text: var(--dt-font-size-100);
357
- --avatar-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath fill='white' d='M16 0c1.4 0 2.1 0 2.635.272a2.5 2.5 0 0 1 1.092 1.093C20 1.9 20 2.6 20 4v6.63h-4.37c-1.75 0-2.626 0-3.294.34-.588.3-1.066.778-1.365 1.366-.34.668-.341 1.544-.341 3.294V20H4c-1.4 0-2.1 0-2.635-.273a2.5 2.5 0 0 1-1.093-1.092C0 18.1 0 17.4 0 16V4c0-1.4 0-2.1.272-2.635A2.5 2.5 0 0 1 1.365.272C1.9 0 2.6 0 4 0z'/%3E%3C/svg%3E");
359
+ --avatar-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath fill='white' d='M17.5 0C18.8807 0 20 1.11929 20 2.5V12.5908H14.5C13.3956 12.5908 12.5003 13.4855 12.5 14.5898V20H2.5C1.11929 20 0 18.8807 0 17.5V2.5C0 1.11929 1.11929 0 2.5 0H17.5Z'/%3E%3C/svg%3E");
358
360
  }
359
361
 
360
362
  &--sm,
361
363
  &--size-200 {
362
364
  --avatar-size-shape: calc(var(--dt-layout-100) * 0.375);
363
365
  --avatar-size-text: var(--dt-font-size-100);
364
- --avatar-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M19.2 0c1.68 0 2.52 0 3.162.327a3 3 0 0 1 1.31 1.31C24 2.28 24 3.12 24 4.8v7.95h-5.25c-2.1 0-3.15 0-3.952.41a3.74 3.74 0 0 0-1.639 1.638c-.409.802-.409 1.852-.409 3.952V24H4.8c-1.68 0-2.52 0-3.162-.327a3 3 0 0 1-1.31-1.31C0 21.72 0 20.88 0 19.2V4.8c0-1.68 0-2.52.327-3.162a3 3 0 0 1 1.31-1.31C2.28 0 3.12 0 4.8 0z'/%3E%3C/svg%3E");
366
+ --avatar-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M21 0C22.65685 0 24 1.34315 24 3V15H17.4C16.07452 15 15 16.07452 15 17.4V24H3C1.34315 24 0 22.65685 0 21V3C0 1.34315 1.34315 0 3 0H21Z'/%3E%3C/svg%3E");
365
367
  }
366
368
 
367
369
  &--size-250 {
368
370
  --avatar-size-shape: calc(var(--dt-layout-100) * 0.4375);
369
- --avatar-size-text: var(--dt-font-size-200);
370
- --avatar-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cpath fill='white' d='M22.4 0c1.96 0 2.94 0 3.689.382a3.5 3.5 0 0 1 1.53 1.53C27.998 2.66 28 3.64 28 5.6v9.28h-6.12c-2.45 0-3.676 0-4.611.476a4.38 4.38 0 0 0-1.913 1.913c-.476.935-.476 2.16-.476 4.61V28H5.6c-1.96 0-2.94 0-3.689-.382a3.5 3.5 0 0 1-1.53-1.53C.002 25.34 0 24.36 0 22.4V5.6c0-1.96 0-2.94.382-3.69A3.5 3.5 0 0 1 1.912.38C2.66.002 3.64 0 5.6 0z'/%3E%3C/svg%3E");
371
+ --avatar-size-text: var(--dt-font-size-125);
372
+ --avatar-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cpath fill='white' d='M24.5 0C26.433 0 28 1.567 28 3.5V17.5H20.3C18.7536 17.5 17.5 18.7536 17.5 20.3V28H3.5C1.567 28 0 26.433 0 24.5V3.5C0 1.567 1.567 0 3.5 0H24.5Z'/%3E%3C/svg%3E");
371
373
  }
372
374
 
373
375
  &--md,
374
376
  &--size-300 {
375
377
  --avatar-size-text: var(--dt-font-size-200);
376
- --avatar-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath fill='white' d='M25.6 0c2.24 0 3.36 0 4.216.436a4 4 0 0 1 1.749 1.748C32 3.039 32 4.16 32 6.4V17h-7c-2.8 0-4.2 0-5.27.545a5 5 0 0 0-2.185 2.185C17 20.8 17 22.2 17 25v7H6.4c-2.24 0-3.36 0-4.216-.436a4 4 0 0 1-1.748-1.748C0 28.961 0 27.84 0 25.6V6.4c0-2.24 0-3.36.436-4.216A4 4 0 0 1 2.184.436C3.039 0 4.16 0 6.4 0z'/%3E%3C/svg%3E");
378
+ --avatar-presence-shape: calc(var(--avatar-size-shape) * 0.328);
379
+ --avatar-presence-position-right: var(--dt-spacing-1-negative);
380
+ --avatar-presence-position-bottom: var(--dt-spacing-1-negative);
381
+ --avatar-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath fill='white' d='M28 0C30.2091 0 32 1.79086 32 4V20.5H23.7C21.9327 20.5 20.5 21.9327 20.5 23.7V32H4C1.79086 32 0 30.2091 0 28V4C0 1.79086 1.79086 0 4 0H28Z'/%3E%3C/svg%3E");
377
382
  }
378
383
 
379
384
  &--size-400 {
380
385
  --avatar-size-shape: calc(var(--dt-layout-100) * 0.625);
381
- --avatar-size-text: var(--dt-font-size-200);
382
- --avatar-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath fill='white' d='M32 0c2.8 0 4.2 0 5.27.545a5 5 0 0 1 2.185 2.185C40 3.8 40 5.2 40 8v13.25h-8.75c-3.5 0-5.25 0-6.588.682a6.25 6.25 0 0 0-2.73 2.73C21.25 26 21.25 27.75 21.25 31.25V40H8c-2.8 0-4.2 0-5.27-.545A5 5 0 0 1 .545 37.27C0 36.2 0 34.8 0 32V8c0-2.8 0-4.2.545-5.27A5 5 0 0 1 2.73.545C3.8 0 5.2 0 8 0z'/%3E%3C/svg%3E");
386
+ --avatar-presence-shape: calc(var(--avatar-size-shape) * 0.32);
387
+ --avatar-size-text: var(--dt-font-size-250);
388
+ --avatar-presence-position-right: var(--dt-spacing-0);
389
+ --avatar-presence-position-bottom: var(--dt-spacing-0);
390
+ --avatar-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath fill='white' d='M35 0C37.7614 0 40 2.23858 40 5V25.4986H29C26.7909 25.4986 25 27.2895 25 29.4986V40H5C2.23858 40 0 37.7614 0 35V5C0 2.23858 2.23858 0 5 0H35Z'/%3E%3C/svg%3E");
383
391
  }
384
392
 
385
393
  &--lg,
386
394
  &--size-500 {
387
395
  --avatar-size-shape: calc(var(--dt-layout-100) * 0.75);
396
+ --avatar-presence-shape: calc(var(--avatar-size-shape) * 0.32);
388
397
  --avatar-size-text: var(--dt-font-size-300);
389
- --avatar-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath fill='white' d='M38.4 0c3.36 0 5.04 0 6.324.654a6 6 0 0 1 2.622 2.622C48 4.56 48 6.24 48 9.6v15.9H37.5c-4.2 0-6.3 0-7.905.817a7.5 7.5 0 0 0-3.278 3.278C25.5 31.199 25.5 33.3 25.5 37.5V48H9.6c-3.36 0-5.04 0-6.324-.654a6 6 0 0 1-2.622-2.622C0 43.44 0 41.76 0 38.4V9.6c0-3.36 0-5.04.654-6.324A6 6 0 0 1 3.276.654C4.56 0 6.24 0 9.6 0z'/%3E%3C/svg%3E");
398
+ --avatar-presence-position-right: var(--dt-spacing-0);
399
+ --avatar-presence-position-bottom: var(--dt-spacing-0);
400
+ --avatar-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath fill='white' d='M42 0C45.3137 0 48 2.68629 48 6V30.5377H34.8C32.149 30.5377 30 32.6867 30 35.3377V48H6C2.68629 48 0 45.3137 0 42V6C0 2.68629 2.68629 0 6 0H42Z'/%3E%3C/svg%3E");
390
401
  }
391
402
 
392
403
  &--xl,
393
404
  &--size-600 {
394
405
  --avatar-size-shape: var(--dt-layout-100);
395
406
  --avatar-size-text: var(--dt-font-size-350);
396
- --avatar-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cpath fill='white' d='M51.2 0c4.48 0 6.72 0 8.432.872a8 8 0 0 1 3.496 3.496C64 6.08 64 8.32 64 12.8V34H50c-5.6 0-8.4 0-10.54 1.09a10 10 0 0 0-4.37 4.37C34 41.6 34 44.4 34 50v14H12.8c-4.48 0-6.72 0-8.432-.872a8 8 0 0 1-3.496-3.496C0 57.92 0 55.68 0 51.2V12.8c0-4.48 0-6.72.872-8.432A8 8 0 0 1 4.368.872C6.08 0 8.32 0 12.8 0z'/%3E%3C/svg%3E");
397
407
  }
398
408
 
399
409
  &--size-700 {
package/lib/build/less/components/emoji-picker.less CHANGED
@@ -38,7 +38,8 @@
38
38
  // !important to default value to override popover dialog box-sizing: border-box style
39
39
  box-sizing: content-box !important;
40
40
  inline-size: auto;
41
- max-inline-size: calc(var(--dt-layout-500) + var(--dt-spacing-100));
41
+ // 340px fits 9 emojis per row (9 × 36px + 8 × 2px gap)
42
+ max-inline-size: calc(var(--dt-layout-500) + var(--dt-spacing-250));
42
43
  margin: 0 var(--dt-spacing-200);
43
44
  }
44
45
 
@@ -59,6 +60,10 @@
59
60
 
60
61
  &__tabset-list {
61
62
  gap: var(--dt-spacing-0);
63
+ // The tabset sits flush above the emoji list, so it does not need the
64
+ // standalone tablist's underline gap that would otherwise add height here.
65
+ --tablist-padding-bottom: var(--dt-spacing-0);
66
+
62
67
 
63
68
  &::after {
64
69
  background-color: var(--dt-color-neutral-transparent) !important;
@@ -127,7 +132,8 @@
127
132
  }
128
133
 
129
134
  &__selector {
130
- min-block-size: calc(var(--dt-layout-450) + var(--dt-spacing-1));
135
+ // 297px keeps the list tall enough to show a full grid of emoji rows
136
+ min-block-size: calc(var(--dt-layout-450) + var(--dt-spacing-100) + var(--dt-spacing-1));
131
137
 
132
138
  p {
133
139
  padding-block-end: var(--dt-spacing-50);
@@ -149,7 +155,8 @@
149
155
  &__list {
150
156
  position: relative;
151
157
  block-size: 100%;
152
- max-block-size: calc(var(--dt-layout-450) + var(--dt-spacing-1));
158
+ // 297px keeps the list tall enough to show a full grid of emoji rows
159
+ max-block-size: calc(var(--dt-layout-450) + var(--dt-spacing-100) + var(--dt-spacing-1));
153
160
  padding-block-end: calc(var(--dt-spacing-50) + var(--dt-spacing-1));
154
161
  overflow: hidden auto;
155
162
 
@@ -173,7 +180,8 @@
173
180
  flex-wrap: wrap;
174
181
  gap: var(--dt-spacing-25);
175
182
  inline-size: calc(100% + calc(var(--dt-layout-25) - var(--dt-spacing-1)));
176
- max-inline-size: calc(var(--dt-layout-500) + var(--dt-spacing-100));
183
+ // 340px fits 9 emojis per row (9 × 36px + 8 × 2px gap)
184
+ max-inline-size: calc(var(--dt-layout-500) + var(--dt-spacing-250));
177
185
  // We use this margin left to align the emoji list with the tabset label
178
186
  margin-inline-start: var(--dt-spacing-75-negative);
179
187
  padding-block-start: var(--dt-spacing-50);
package/lib/dist/dialtone-default-theme.css CHANGED
@@ -5109,8 +5109,8 @@
5109
5109
  --avatar-border-radius: calc(var(--avatar-size-shape) * 0.125);
5110
5110
  --avatar-presence-shape: calc(var(--avatar-size-shape) * 0.375);
5111
5111
  --avatar-presence-border-radius: calc(var(--avatar-border-radius) * 0.625);
5112
- --avatar-presence-position-right: var(--dt-spacing-0);
5113
- --avatar-presence-position-bottom: var(--dt-spacing-0);
5112
+ --avatar-presence-position-right: var(--dt-spacing-25-negative);
5113
+ --avatar-presence-position-bottom: var(--dt-spacing-25-negative);
5114
5114
  --avatar-icon-size: calc(var(--avatar-size-shape) * 0.625);
5115
5115
  --avatar-count-color-shadow: var(--dt-shell-color-surface-default);
5116
5116
  position: relative;
@@ -5238,10 +5238,10 @@
5238
5238
  position: absolute;
5239
5239
  background-color: var(--dt-color-neutral-white);
5240
5240
  border-radius: var(--avatar-border-radius);
5241
- opacity: 0.5;
5241
+ opacity: var(--dt-opacity-700);
5242
5242
  content: '';
5243
5243
  pointer-events: none;
5244
- inset: 0;
5244
+ inset: var(--dt-spacing-0);
5245
5245
  }
5246
5246
  .d-avatar__canvas {
5247
5247
  display: flex;
@@ -5333,7 +5333,7 @@
5333
5333
  }
5334
5334
  .d-avatar--clickable {
5335
5335
  --avatar-color-border: var(--dt-color-neutral-transparent);
5336
- padding: 0;
5336
+ padding: var(--dt-spacing-0);
5337
5337
  background-color: var(--dt-color-neutral-transparent);
5338
5338
  border: var(--dt-size-border-0) solid var(--avatar-color-border);
5339
5339
  border-radius: var(--avatar-border-radius);
@@ -5370,45 +5370,55 @@
5370
5370
  .d-avatar--xs,
5371
5371
  .d-avatar--size-100 {
5372
5372
  --avatar-size-shape: calc(var(--dt-layout-100) * 0.25);
5373
+ --avatar-presence-position-right: var(--dt-spacing-0);
5374
+ --avatar-presence-position-bottom: var(--dt-spacing-0);
5373
5375
  --avatar-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M12.8 0c1.12 0 1.68 0 2.108.218a2 2 0 0 1 .874.874C16 1.52 16 2.08 16 3.2v5.3h-3.5c-1.4 0-2.1 0-2.635.272a2.5 2.5 0 0 0-1.093 1.093C8.5 10.4 8.5 11.1 8.5 12.5V16H3.2c-1.12 0-1.68 0-2.108-.218a2 2 0 0 1-.874-.874C0 14.48 0 13.92 0 12.8V3.2c0-1.12 0-1.68.218-2.108a2 2 0 0 1 .874-.874C1.52 0 2.08 0 3.2 0z'/%3E%3C/svg%3E");
5374
5376
  }
5375
5377
  .d-avatar--size-150 {
5376
5378
  --avatar-size-shape: calc(var(--dt-layout-100) * 0.3125);
5377
5379
  --avatar-size-text: var(--dt-font-size-100);
5378
- --avatar-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath fill='white' d='M16 0c1.4 0 2.1 0 2.635.272a2.5 2.5 0 0 1 1.092 1.093C20 1.9 20 2.6 20 4v6.63h-4.37c-1.75 0-2.626 0-3.294.34-.588.3-1.066.778-1.365 1.366-.34.668-.341 1.544-.341 3.294V20H4c-1.4 0-2.1 0-2.635-.273a2.5 2.5 0 0 1-1.093-1.092C0 18.1 0 17.4 0 16V4c0-1.4 0-2.1.272-2.635A2.5 2.5 0 0 1 1.365.272C1.9 0 2.6 0 4 0z'/%3E%3C/svg%3E");
5380
+ --avatar-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath fill='white' d='M17.5 0C18.8807 0 20 1.11929 20 2.5V12.5908H14.5C13.3956 12.5908 12.5003 13.4855 12.5 14.5898V20H2.5C1.11929 20 0 18.8807 0 17.5V2.5C0 1.11929 1.11929 0 2.5 0H17.5Z'/%3E%3C/svg%3E");
5379
5381
  }
5380
5382
  .d-avatar--sm,
5381
5383
  .d-avatar--size-200 {
5382
5384
  --avatar-size-shape: calc(var(--dt-layout-100) * 0.375);
5383
5385
  --avatar-size-text: var(--dt-font-size-100);
5384
- --avatar-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M19.2 0c1.68 0 2.52 0 3.162.327a3 3 0 0 1 1.31 1.31C24 2.28 24 3.12 24 4.8v7.95h-5.25c-2.1 0-3.15 0-3.952.41a3.74 3.74 0 0 0-1.639 1.638c-.409.802-.409 1.852-.409 3.952V24H4.8c-1.68 0-2.52 0-3.162-.327a3 3 0 0 1-1.31-1.31C0 21.72 0 20.88 0 19.2V4.8c0-1.68 0-2.52.327-3.162a3 3 0 0 1 1.31-1.31C2.28 0 3.12 0 4.8 0z'/%3E%3C/svg%3E");
5386
+ --avatar-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M21 0C22.65685 0 24 1.34315 24 3V15H17.4C16.07452 15 15 16.07452 15 17.4V24H3C1.34315 24 0 22.65685 0 21V3C0 1.34315 1.34315 0 3 0H21Z'/%3E%3C/svg%3E");
5385
5387
  }
5386
5388
  .d-avatar--size-250 {
5387
5389
  --avatar-size-shape: calc(var(--dt-layout-100) * 0.4375);
5388
- --avatar-size-text: var(--dt-font-size-200);
5389
- --avatar-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cpath fill='white' d='M22.4 0c1.96 0 2.94 0 3.689.382a3.5 3.5 0 0 1 1.53 1.53C27.998 2.66 28 3.64 28 5.6v9.28h-6.12c-2.45 0-3.676 0-4.611.476a4.38 4.38 0 0 0-1.913 1.913c-.476.935-.476 2.16-.476 4.61V28H5.6c-1.96 0-2.94 0-3.689-.382a3.5 3.5 0 0 1-1.53-1.53C.002 25.34 0 24.36 0 22.4V5.6c0-1.96 0-2.94.382-3.69A3.5 3.5 0 0 1 1.912.38C2.66.002 3.64 0 5.6 0z'/%3E%3C/svg%3E");
5390
+ --avatar-size-text: var(--dt-font-size-125);
5391
+ --avatar-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cpath fill='white' d='M24.5 0C26.433 0 28 1.567 28 3.5V17.5H20.3C18.7536 17.5 17.5 18.7536 17.5 20.3V28H3.5C1.567 28 0 26.433 0 24.5V3.5C0 1.567 1.567 0 3.5 0H24.5Z'/%3E%3C/svg%3E");
5390
5392
  }
5391
5393
  .d-avatar--md,
5392
5394
  .d-avatar--size-300 {
5393
5395
  --avatar-size-text: var(--dt-font-size-200);
5394
- --avatar-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath fill='white' d='M25.6 0c2.24 0 3.36 0 4.216.436a4 4 0 0 1 1.749 1.748C32 3.039 32 4.16 32 6.4V17h-7c-2.8 0-4.2 0-5.27.545a5 5 0 0 0-2.185 2.185C17 20.8 17 22.2 17 25v7H6.4c-2.24 0-3.36 0-4.216-.436a4 4 0 0 1-1.748-1.748C0 28.961 0 27.84 0 25.6V6.4c0-2.24 0-3.36.436-4.216A4 4 0 0 1 2.184.436C3.039 0 4.16 0 6.4 0z'/%3E%3C/svg%3E");
5396
+ --avatar-presence-shape: calc(var(--avatar-size-shape) * 0.328);
5397
+ --avatar-presence-position-right: var(--dt-spacing-1-negative);
5398
+ --avatar-presence-position-bottom: var(--dt-spacing-1-negative);
5399
+ --avatar-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath fill='white' d='M28 0C30.2091 0 32 1.79086 32 4V20.5H23.7C21.9327 20.5 20.5 21.9327 20.5 23.7V32H4C1.79086 32 0 30.2091 0 28V4C0 1.79086 1.79086 0 4 0H28Z'/%3E%3C/svg%3E");
5395
5400
  }
5396
5401
  .d-avatar--size-400 {
5397
5402
  --avatar-size-shape: calc(var(--dt-layout-100) * 0.625);
5398
- --avatar-size-text: var(--dt-font-size-200);
5399
- --avatar-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath fill='white' d='M32 0c2.8 0 4.2 0 5.27.545a5 5 0 0 1 2.185 2.185C40 3.8 40 5.2 40 8v13.25h-8.75c-3.5 0-5.25 0-6.588.682a6.25 6.25 0 0 0-2.73 2.73C21.25 26 21.25 27.75 21.25 31.25V40H8c-2.8 0-4.2 0-5.27-.545A5 5 0 0 1 .545 37.27C0 36.2 0 34.8 0 32V8c0-2.8 0-4.2.545-5.27A5 5 0 0 1 2.73.545C3.8 0 5.2 0 8 0z'/%3E%3C/svg%3E");
5403
+ --avatar-presence-shape: calc(var(--avatar-size-shape) * 0.32);
5404
+ --avatar-size-text: var(--dt-font-size-250);
5405
+ --avatar-presence-position-right: var(--dt-spacing-0);
5406
+ --avatar-presence-position-bottom: var(--dt-spacing-0);
5407
+ --avatar-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath fill='white' d='M35 0C37.7614 0 40 2.23858 40 5V25.4986H29C26.7909 25.4986 25 27.2895 25 29.4986V40H5C2.23858 40 0 37.7614 0 35V5C0 2.23858 2.23858 0 5 0H35Z'/%3E%3C/svg%3E");
5400
5408
  }
5401
5409
  .d-avatar--lg,
5402
5410
  .d-avatar--size-500 {
5403
5411
  --avatar-size-shape: calc(var(--dt-layout-100) * 0.75);
5412
+ --avatar-presence-shape: calc(var(--avatar-size-shape) * 0.32);
5404
5413
  --avatar-size-text: var(--dt-font-size-300);
5405
- --avatar-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath fill='white' d='M38.4 0c3.36 0 5.04 0 6.324.654a6 6 0 0 1 2.622 2.622C48 4.56 48 6.24 48 9.6v15.9H37.5c-4.2 0-6.3 0-7.905.817a7.5 7.5 0 0 0-3.278 3.278C25.5 31.199 25.5 33.3 25.5 37.5V48H9.6c-3.36 0-5.04 0-6.324-.654a6 6 0 0 1-2.622-2.622C0 43.44 0 41.76 0 38.4V9.6c0-3.36 0-5.04.654-6.324A6 6 0 0 1 3.276.654C4.56 0 6.24 0 9.6 0z'/%3E%3C/svg%3E");
5414
+ --avatar-presence-position-right: var(--dt-spacing-0);
5415
+ --avatar-presence-position-bottom: var(--dt-spacing-0);
5416
+ --avatar-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath fill='white' d='M42 0C45.3137 0 48 2.68629 48 6V30.5377H34.8C32.149 30.5377 30 32.6867 30 35.3377V48H6C2.68629 48 0 45.3137 0 42V6C0 2.68629 2.68629 0 6 0H42Z'/%3E%3C/svg%3E");
5406
5417
  }
5407
5418
  .d-avatar--xl,
5408
5419
  .d-avatar--size-600 {
5409
5420
  --avatar-size-shape: var(--dt-layout-100);
5410
5421
  --avatar-size-text: var(--dt-font-size-350);
5411
- --avatar-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cpath fill='white' d='M51.2 0c4.48 0 6.72 0 8.432.872a8 8 0 0 1 3.496 3.496C64 6.08 64 8.32 64 12.8V34H50c-5.6 0-8.4 0-10.54 1.09a10 10 0 0 0-4.37 4.37C34 41.6 34 44.4 34 50v14H12.8c-4.48 0-6.72 0-8.432-.872a8 8 0 0 1-3.496-3.496C0 57.92 0 55.68 0 51.2V12.8c0-4.48 0-6.72.872-8.432A8 8 0 0 1 4.368.872C6.08 0 8.32 0 12.8 0z'/%3E%3C/svg%3E");
5412
5422
  }
5413
5423
  .d-avatar--size-700 {
5414
5424
  --avatar-size-shape: var(--dt-layout-150);
@@ -10784,7 +10794,7 @@
10784
10794
  .d-emoji-picker__alignment {
10785
10795
  box-sizing: content-box !important;
10786
10796
  inline-size: auto;
10787
- max-inline-size: calc(var(--dt-layout-500) + var(--dt-spacing-100));
10797
+ max-inline-size: calc(var(--dt-layout-500) + var(--dt-spacing-250));
10788
10798
  margin: 0 var(--dt-spacing-200);
10789
10799
  }
10790
10800
  .d-emoji-picker--footer {
@@ -10803,6 +10813,7 @@
10803
10813
  }
10804
10814
  .d-emoji-picker__tabset-list {
10805
10815
  gap: var(--dt-spacing-0);
10816
+ --tablist-padding-bottom: var(--dt-spacing-0);
10806
10817
  }
10807
10818
  .d-emoji-picker__tabset-list::after {
10808
10819
  background-color: var(--dt-color-neutral-transparent) !important;
@@ -10857,7 +10868,7 @@
10857
10868
  border-color: var(--dt-color-border-subtle);
10858
10869
  }
10859
10870
  .d-emoji-picker__selector {
10860
- min-block-size: calc(var(--dt-layout-450) + var(--dt-spacing-1));
10871
+ min-block-size: calc(var(--dt-layout-450) + var(--dt-spacing-100) + var(--dt-spacing-1));
10861
10872
  }
10862
10873
  .d-emoji-picker__selector p {
10863
10874
  -webkit-padding-after: var(--dt-spacing-50);
@@ -10877,7 +10888,7 @@
10877
10888
  .d-emoji-picker__list {
10878
10889
  position: relative;
10879
10890
  block-size: 100%;
10880
- max-block-size: calc(var(--dt-layout-450) + var(--dt-spacing-1));
10891
+ max-block-size: calc(var(--dt-layout-450) + var(--dt-spacing-100) + var(--dt-spacing-1));
10881
10892
  -webkit-padding-after: calc(var(--dt-spacing-50) + var(--dt-spacing-1));
10882
10893
  padding-block-end: calc(var(--dt-spacing-50) + var(--dt-spacing-1));
10883
10894
  overflow: hidden auto;
@@ -10899,7 +10910,7 @@
10899
10910
  flex-wrap: wrap;
10900
10911
  gap: var(--dt-spacing-25);
10901
10912
  inline-size: calc(100% + calc(var(--dt-layout-25) - var(--dt-spacing-1)));
10902
- max-inline-size: calc(var(--dt-layout-500) + var(--dt-spacing-100));
10913
+ max-inline-size: calc(var(--dt-layout-500) + var(--dt-spacing-250));
10903
10914
  -webkit-margin-start: var(--dt-spacing-75-negative);
10904
10915
  margin-inline-start: var(--dt-spacing-75-negative);
10905
10916
  -webkit-padding-before: var(--dt-spacing-50);