@dialpad/dialtone 9.61.0 → 9.63.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 (63) hide show
  1. package/dist/css/dialtone-default-theme.css +33 -3
  2. package/dist/css/dialtone-default-theme.min.css +1 -1
  3. package/dist/css/dialtone.css +33 -3
  4. package/dist/css/dialtone.min.css +1 -1
  5. package/dist/tokens/doc.json +19300 -19300
  6. package/dist/vue2/dialtone-vue.cjs +1 -0
  7. package/dist/vue2/dialtone-vue.cjs.map +1 -1
  8. package/dist/vue2/dialtone-vue.js +2 -1
  9. package/dist/vue2/lib/avatar.cjs +4 -1
  10. package/dist/vue2/lib/avatar.cjs.map +1 -1
  11. package/dist/vue2/lib/avatar.js +4 -1
  12. package/dist/vue2/lib/avatar.js.map +1 -1
  13. package/dist/vue2/lib/combobox-multi-select.cjs +21 -3
  14. package/dist/vue2/lib/combobox-multi-select.cjs.map +1 -1
  15. package/dist/vue2/lib/combobox-multi-select.js +21 -3
  16. package/dist/vue2/lib/combobox-multi-select.js.map +1 -1
  17. package/dist/vue2/lib/keyboard-shortcut.cjs +1 -1
  18. package/dist/vue2/lib/keyboard-shortcut.cjs.map +1 -1
  19. package/dist/vue2/lib/keyboard-shortcut.js +1 -1
  20. package/dist/vue2/lib/keyboard-shortcut.js.map +1 -1
  21. package/dist/vue2/lib/message-input.cjs +1 -1
  22. package/dist/vue2/lib/message-input.cjs.map +1 -1
  23. package/dist/vue2/lib/message-input.js +1 -1
  24. package/dist/vue2/lib/message-input.js.map +1 -1
  25. package/dist/vue2/lib/rich-text-editor.cjs +9 -1
  26. package/dist/vue2/lib/rich-text-editor.cjs.map +1 -1
  27. package/dist/vue2/lib/rich-text-editor.js +9 -1
  28. package/dist/vue2/lib/rich-text-editor.js.map +1 -1
  29. package/dist/vue2/style.css +46 -40
  30. package/dist/vue2/types/components/avatar/avatar_constants.d.ts +2 -0
  31. package/dist/vue2/types/components/avatar/avatar_constants.d.ts.map +1 -1
  32. package/dist/vue2/types/components/avatar/index.d.ts +1 -1
  33. package/dist/vue2/types/components/rich_text_editor/rich_text_editor.vue.d.ts.map +1 -1
  34. package/dist/vue2/types/recipes/comboboxes/combobox_multi_select/combobox_multi_select.vue.d.ts +1 -1
  35. package/dist/vue3/dialtone-vue.cjs +1 -0
  36. package/dist/vue3/dialtone-vue.cjs.map +1 -1
  37. package/dist/vue3/dialtone-vue.js +2 -1
  38. package/dist/vue3/lib/avatar.cjs +4 -1
  39. package/dist/vue3/lib/avatar.cjs.map +1 -1
  40. package/dist/vue3/lib/avatar.js +4 -1
  41. package/dist/vue3/lib/avatar.js.map +1 -1
  42. package/dist/vue3/lib/combobox-multi-select.cjs +24 -4
  43. package/dist/vue3/lib/combobox-multi-select.cjs.map +1 -1
  44. package/dist/vue3/lib/combobox-multi-select.js +24 -4
  45. package/dist/vue3/lib/combobox-multi-select.js.map +1 -1
  46. package/dist/vue3/lib/keyboard-shortcut.cjs +1 -1
  47. package/dist/vue3/lib/keyboard-shortcut.cjs.map +1 -1
  48. package/dist/vue3/lib/keyboard-shortcut.js +1 -1
  49. package/dist/vue3/lib/keyboard-shortcut.js.map +1 -1
  50. package/dist/vue3/lib/message-input.cjs +6 -2
  51. package/dist/vue3/lib/message-input.cjs.map +1 -1
  52. package/dist/vue3/lib/message-input.js +6 -2
  53. package/dist/vue3/lib/message-input.js.map +1 -1
  54. package/dist/vue3/lib/rich-text-editor.cjs +9 -1
  55. package/dist/vue3/lib/rich-text-editor.cjs.map +1 -1
  56. package/dist/vue3/lib/rich-text-editor.js +9 -1
  57. package/dist/vue3/lib/rich-text-editor.js.map +1 -1
  58. package/dist/vue3/style.css +46 -40
  59. package/dist/vue3/types/components/avatar/avatar_constants.d.ts +2 -0
  60. package/dist/vue3/types/components/avatar/avatar_constants.d.ts.map +1 -1
  61. package/dist/vue3/types/components/avatar/index.d.ts +1 -1
  62. package/dist/vue3/types/components/rich_text_editor/rich_text_editor.vue.d.ts.map +1 -1
  63. package/package.json +3 -3
package/dist/css/dialtone.css CHANGED
@@ -585,6 +585,9 @@ template {
585
585
  display: flex;
586
586
  color: var(--avatar-color-text);
587
587
  }
588
+ .d-avatar--color-000 {
589
+ --avatar-color-background: var(--dt-avatar-color-background-000);
590
+ }
588
591
  .d-avatar--color-100 {
589
592
  --avatar-color-background: var(--dt-avatar-color-background-100);
590
593
  }
@@ -741,10 +744,11 @@ template {
741
744
  --badge-line-height: calc(var(--dt-size-500) + var(--dt-size-200));
742
745
  --badge-font-size: var(--dt-font-size-100);
743
746
  --badge-font-weight: var(--dt-font-weight-semi-bold);
744
- --badge-gap: var(--dt-space-300);
747
+ --badge-gap: var(--dt-space-200);
745
748
  --badge-letter-spacing: var(--dt-size-50);
746
749
  --badge-padding-y: var(--dt-space-100);
747
- --badge-padding-x: var(--dt-space-350);
750
+ --badge-padding-x: var(--dt-space-300);
751
+ --badge-label-padding-x: var(--dt-space-200);
748
752
  --badge-text-case: none;
749
753
  --badge-decorative-color: var(--dt-color-black-900);
750
754
  display: inline-flex;
@@ -752,7 +756,7 @@ template {
752
756
  align-items: center;
753
757
  justify-content: center;
754
758
  box-sizing: border-box;
755
- min-width: var(--dt-size-550);
759
+ min-inline-size: var(--dt-size-550);
756
760
  padding: var(--badge-padding-y) var(--badge-padding-x);
757
761
  color: var(--badge-color-text);
758
762
  font-weight: var(--badge-font-weight);
@@ -769,6 +773,8 @@ template {
769
773
  --badge-padding-x: calc(var(--dt-space-400) - var(--dt-space-100));
770
774
  --badge-padding-y: var(--dt-space-300);
771
775
  --badge-line-height: var(--dt-size-500);
776
+ --badge-label-padding-x: var(--dt-space-0);
777
+ --badge-gap: var(--dt-space-300);
772
778
  }
773
779
  .d-badge--info {
774
780
  --badge-color-background: var(--dt-badge-color-background-info);
@@ -871,15 +877,26 @@ template {
871
877
  height: var(--dt-size-400);
872
878
  background-color: var(--badge-decorative-color);
873
879
  border-radius: var(--dt-size-200);
880
+ -webkit-margin-start: var(--dt-space-200);
881
+ margin-inline-start: var(--dt-space-200);
874
882
  }
875
883
  .d-badge__label {
876
884
  display: flex;
877
885
  align-items: center;
886
+ padding-inline: var(--badge-label-padding-x);
878
887
  }
879
888
  .d-badge__icon-left,
880
889
  .d-badge__icon-right {
881
890
  display: flex;
882
891
  }
892
+ .d-badge__icon-left {
893
+ -webkit-padding-start: var(--dt-space-100);
894
+ padding-inline-start: var(--dt-space-100);
895
+ }
896
+ .d-badge__icon-right {
897
+ -webkit-padding-end: var(--dt-space-100);
898
+ padding-inline-end: var(--dt-space-100);
899
+ }
883
900
  .d-breadcrumbs {
884
901
  --breadcrumbs-font-size: var(--dt-font-size-200);
885
902
  --breadcrumbs-line-height: var(--dt-font-line-height-300);
@@ -2433,10 +2450,23 @@ legend .d-label {
2433
2450
  border: var(--dt-size-100) solid;
2434
2451
  border-color: var(--dt-color-border-default);
2435
2452
  border-radius: var(--dt-size-radius-300);
2453
+ /* Hiding class, making content visible only to screen readers but not visually */
2454
+ /* "sr" meaning "screen-reader" */
2455
+ /* https://css-tricks.com/inclusively-hidden/ */
2436
2456
  }
2437
2457
  .d-keyboard-shortcut--inverted {
2438
2458
  border-color: var(--dt-color-border-moderate-inverted);
2439
2459
  }
2460
+ .d-keyboard-shortcut--sr-only:not(:focus, :active) {
2461
+ position: absolute;
2462
+ width: 1px;
2463
+ height: 1px;
2464
+ overflow: hidden;
2465
+ white-space: nowrap;
2466
+ clip: rect(0 0 0 0);
2467
+ -webkit-clip-path: inset(50%);
2468
+ clip-path: inset(50%);
2469
+ }
2440
2470
  .d-keyboard-shortcut__icon,
2441
2471
  .d-keyboard-shortcut__item {
2442
2472
  margin-right: var(--dt-space-200);