@dialpad/dialtone-css 8.45.3 → 8.46.2

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 (38) hide show
  1. package/lib/build/less/components/avatar.less +61 -3
  2. package/lib/build/less/components/collapsible.less +6 -0
  3. package/lib/build/less/components/combobox.less +9 -0
  4. package/lib/build/less/components/datepicker.less +3 -8
  5. package/lib/build/less/components/description-list.less +30 -0
  6. package/lib/build/less/components/dropdown.less +14 -0
  7. package/lib/build/less/components/emoji-picker.less +4 -0
  8. package/lib/build/less/components/empty-state.less +0 -4
  9. package/lib/build/less/components/input.less +9 -0
  10. package/lib/build/less/components/item-layout.less +20 -20
  11. package/lib/build/less/components/list-item.less +38 -0
  12. package/lib/build/less/components/rich-text-editor.less +57 -0
  13. package/lib/build/less/components/scroller.less +49 -0
  14. package/lib/build/less/components/skeleton.less +11 -7
  15. package/lib/build/less/components/tooltip.less +20 -0
  16. package/lib/build/less/dialtone-reset.less +7 -6
  17. package/lib/build/less/dialtone.less +5 -0
  18. package/lib/build/less/utilities/borders.less +38 -8
  19. package/lib/build/less/utilities/colors.less +10 -3
  20. package/lib/build/less/utilities/effects.less +3 -4
  21. package/lib/build/less/utilities/interactivity.less +14 -3
  22. package/lib/build/less/utilities/layout.less +4 -4
  23. package/lib/build/less/utilities/spacing.less +27 -7
  24. package/lib/build/less/utilities/typography.less +3 -2
  25. package/lib/dist/dialtone-default-theme.css +344 -66
  26. package/lib/dist/dialtone-default-theme.min.css +1 -1
  27. package/lib/dist/dialtone.css +336 -58
  28. package/lib/dist/dialtone.min.css +1 -1
  29. package/lib/dist/tokens/tokens-base-dark.css +1 -1
  30. package/lib/dist/tokens/tokens-base-light.css +8 -8
  31. package/lib/dist/tokens/tokens-debug-base.css +777 -0
  32. package/lib/dist/tokens/tokens-debug-dp.css +2131 -0
  33. package/lib/dist/tokens/tokens-dp-dark.css +7 -7
  34. package/lib/dist/tokens/tokens-expressive-dark.css +7 -7
  35. package/lib/dist/tokens/tokens-expressive-sm-dark.css +7 -7
  36. package/lib/dist/tokens/tokens-tmo-dark.css +7 -7
  37. package/package.json +3 -5
  38. package/lib/build/less/utilities/lint-staged.config.cjs +0 -5
@@ -1,9 +1,10 @@
1
+ /* stylelint-disable meowtec/no-px */
1
2
  /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
2
3
  /* Document
3
4
  ========================================================================== */
4
5
  * {
5
- padding: 0;
6
6
  margin: 0;
7
+ padding: 0;
7
8
  }
8
9
  *,
9
10
  *::before,
@@ -55,10 +56,10 @@ hr {
55
56
  * 2. Correct the odd `em` font sizing in all browsers.
56
57
  */
57
58
  pre {
58
- font-family: monospace, monospace;
59
- /* 1 */
60
59
  font-size: 1em;
61
60
  /* 2 */
61
+ font-family: monospace;
62
+ /* 1 */
62
63
  }
63
64
  /* Text-level semantics
64
65
  ========================================================================== */
@@ -80,13 +81,13 @@ u {
80
81
  * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
81
82
  */
82
83
  abbr[title] {
83
- border-bottom: none;
84
- /* 1 */
85
84
  text-decoration: underline;
86
85
  /* 2 */
87
86
  -webkit-text-decoration: underline dotted;
88
87
  text-decoration: underline dotted;
89
88
  /* 2 */
89
+ border-bottom: none;
90
+ /* 1 */
90
91
  text-underline-offset: calc(var(--dt-size-border-300) - var(--dt-size-border-100));
91
92
  text-decoration-thickness: var(--dt-size-border-100);
92
93
  }
@@ -108,10 +109,10 @@ strong {
108
109
  code,
109
110
  kbd,
110
111
  samp {
111
- font-family: monospace, monospace;
112
- /* 1 */
113
112
  font-size: 1em;
114
113
  /* 2 */
114
+ font-family: monospace;
115
+ /* 1 */
115
116
  }
116
117
  /**
117
118
  * Add the correct font size in all browsers.
@@ -791,7 +792,7 @@ template {
791
792
  --stack-gap: var(--dt-space-600);
792
793
  }
793
794
  }
794
- .dt-item-layout {
795
+ .d-item-layout {
795
796
  display: flex;
796
797
  align-items: stretch;
797
798
  min-height: calc(var(--dt-size-550) + var(--dt-size-300));
@@ -799,77 +800,77 @@ template {
799
800
  font-size: var(--dt-font-size-200);
800
801
  line-height: var(--dt-font-line-height-300);
801
802
  }
802
- .dt-item-layout > .dt-item-layout--content {
803
+ .d-item-layout > .d-item-layout--content {
803
804
  display: flex;
804
805
  flex-direction: column;
805
806
  flex-grow: 1;
806
807
  justify-content: center;
807
808
  min-width: var(--dt-size-0);
808
809
  }
809
- .dt-item-layout > .dt-item-layout--content > .dt-item-layout--subtitle {
810
+ .d-item-layout > .d-item-layout--content > .d-item-layout--subtitle {
810
811
  color: var(--dt-color-foreground-tertiary);
811
812
  font-size: var(--dt-font-size-100);
812
813
  }
813
- .dt-item-layout > .dt-item-layout--content > .dt-item-layout--subtitle--with-title {
814
+ .d-item-layout > .d-item-layout--content > .d-item-layout--subtitle--with-title {
814
815
  margin-top: var(--dt-space-200-negative);
815
816
  }
816
- .dt-item-layout > .dt-item-layout--content > .dt-item-layout--bottom {
817
+ .d-item-layout > .d-item-layout--content > .d-item-layout--bottom {
817
818
  margin-top: var(--dt-space-200);
818
819
  }
819
- .dt-item-layout > .dt-item-layout--right,
820
- .dt-item-layout > .dt-item-layout--left {
820
+ .d-item-layout > .d-item-layout--right,
821
+ .d-item-layout > .d-item-layout--left {
821
822
  display: flex;
822
823
  align-items: center;
823
824
  min-width: var(--dt-size-600);
824
825
  min-height: inherit;
825
826
  }
826
- .dt-item-layout > .dt-item-layout--right {
827
- padding-left: var(--dt-space-400);
827
+ .d-item-layout > .d-item-layout--right {
828
828
  flex-shrink: 0;
829
+ padding-left: var(--dt-space-400);
829
830
  }
830
- .dt-item-layout > .dt-item-layout--left {
831
+ .d-item-layout > .d-item-layout--left {
831
832
  justify-content: flex-end;
832
833
  padding-right: var(--dt-space-400);
833
834
  }
834
- .dt-item-layout > .dt-item-layout--selected {
835
+ .d-item-layout > .d-item-layout--selected {
835
836
  display: flex;
836
837
  align-items: center;
837
838
  }
838
- .dt-item-layout--custom {
839
+ .d-item-layout--custom {
839
840
  display: grid;
840
841
  grid-template-areas: 'left content right selected';
841
842
  grid-template-columns: minmax(0, -webkit-max-content) 1fr minmax(0, -webkit-max-content) minmax(0, -webkit-max-content);
842
843
  grid-template-columns: minmax(0, max-content) 1fr minmax(0, max-content) minmax(0, max-content);
843
844
  }
844
- .dt-item-layout--custom > .dt-item-layout--left {
845
+ .d-item-layout--custom > .d-item-layout--left {
845
846
  grid-area: left;
846
847
  }
847
- .dt-item-layout--custom > .dt-item-layout--right {
848
+ .d-item-layout--custom > .d-item-layout--right {
848
849
  grid-area: right;
849
850
  }
850
- .dt-item-layout--custom > .dt-item-layout--content {
851
+ .d-item-layout--custom > .d-item-layout--content {
851
852
  display: grid;
852
853
  grid-area: content;
853
854
  grid-template-areas: 'title' 'subtitle' 'bottom';
854
855
  grid-template-rows: repeat(auto-fit, minmax(0, auto));
855
856
  }
856
- .dt-item-layout--custom > .dt-item-layout--content > .dt-item-layout--title {
857
+ .d-item-layout--custom > .d-item-layout--content > .d-item-layout--title {
857
858
  grid-area: title;
858
859
  }
859
- .dt-item-layout--custom > .dt-item-layout--content > .dt-item-layout--subtitle {
860
+ .d-item-layout--custom > .d-item-layout--content > .d-item-layout--subtitle {
860
861
  grid-area: subtitle;
861
862
  }
862
- .dt-item-layout--custom > .dt-item-layout--content > .dt-item-layout--bottom {
863
+ .d-item-layout--custom > .d-item-layout--content > .d-item-layout--bottom {
863
864
  grid-area: bottom;
864
865
  }
865
- .dt-item-layout--custom > .dt-item-layout--selected {
866
+ .d-item-layout--custom > .d-item-layout--selected {
866
867
  grid-area: selected;
867
868
  }
868
869
  .d-avatar {
869
870
  --avatar-color-background: var(--dt-avatar-color-background-000);
870
871
  --avatar-color-text: var(--dt-avatar-color-foreground);
871
872
  --avatar-size-shape: var(--dt-size-600);
872
- --avatar-size-image: 100%;
873
+ --avatar-size-image: var(--dt-size-100-percent);
873
874
  --avatar-size-text: var(--dt-font-size-200);
874
875
  --avatar-presence-position-right: var(--dt-space-200-negative);
875
876
  --avatar-presence-position-bottom: var(--dt-space-200-negative);
@@ -952,6 +953,10 @@ template {
952
953
  object-fit: cover;
953
954
  border-radius: var(--dt-size-radius-pill);
954
955
  }
956
+ .d-avatar--image-loaded {
957
+ background-color: transparent;
958
+ background-image: unset;
959
+ }
955
960
  .d-avatar__initials {
956
961
  position: absolute;
957
962
  z-index: var(--zi-base);
@@ -970,12 +975,14 @@ template {
970
975
  position: absolute;
971
976
  right: var(--avatar-presence-position-right);
972
977
  bottom: var(--avatar-presence-position-bottom);
978
+ z-index: var(--zi-base);
973
979
  display: flex;
974
980
  }
975
981
  .d-avatar__count {
976
982
  position: absolute;
977
- right: 0;
978
- bottom: 0;
983
+ right: var(--dt-space-0);
984
+ bottom: var(--dt-space-0);
985
+ z-index: var(--zi-base);
979
986
  display: inline-flex;
980
987
  align-items: center;
981
988
  justify-content: center;
@@ -995,6 +1002,49 @@ template {
995
1002
  .dt-leftbar-row__primary:hover .d-avatar__count {
996
1003
  --avatar-count-color-shadow: var(--dt-theme-sidebar-row-color-background-hover);
997
1004
  }
1005
+ .d-avatar--clickable {
1006
+ --avatar-color-border: transparent;
1007
+ padding: 0;
1008
+ background-color: transparent;
1009
+ border: var(--dt-size-border-100) solid var(--avatar-color-border);
1010
+ border-radius: var(--dt-size-radius-circle);
1011
+ cursor: pointer;
1012
+ }
1013
+ .d-avatar--clickable:focus-visible {
1014
+ outline: none;
1015
+ box-shadow: var(--dt-shadow-focus);
1016
+ }
1017
+ .d-avatar--clickable:hover {
1018
+ --avatar-color-border: var(--dt-color-border-default);
1019
+ }
1020
+ .d-avatar--clickable:active {
1021
+ --avatar-color-border: var(--dt-color-border-moderate);
1022
+ -webkit-transform: scale(0.98);
1023
+ transform: scale(0.98);
1024
+ }
1025
+ .d-avatar__overlay {
1026
+ position: absolute;
1027
+ z-index: var(--zi-base);
1028
+ display: flex;
1029
+ align-items: center;
1030
+ justify-content: center;
1031
+ width: var(--dt-size-100-percent);
1032
+ height: var(--dt-size-100-percent);
1033
+ background-color: var(--dt-color-surface-contrast-opaque);
1034
+ border-radius: var(--dt-size-radius-circle);
1035
+ opacity: var(--dt-opacity-900);
1036
+ }
1037
+ .d-avatar__overlay-icon {
1038
+ width: var(--dt-size-100-percent);
1039
+ color: var(--dt-color-foreground-primary-inverted);
1040
+ }
1041
+ .d-avatar__overlay-text {
1042
+ width: var(--dt-size-100-percent);
1043
+ color: var(--dt-color-foreground-primary-inverted);
1044
+ font-weight: var(--dt-font-weight-bold);
1045
+ font-size: var(--dt-font-size-200);
1046
+ text-align: center;
1047
+ }
998
1048
  .d-avatar--xs {
999
1049
  --avatar-size-shape: calc(var(--dt-size-500) + var(--dt-size-200));
1000
1050
  --avatar-presence-position-right: var(--dt-space-300-negative);
@@ -1996,9 +2046,22 @@ template {
1996
2046
  white-space: nowrap;
1997
2047
  text-overflow: ellipsis;
1998
2048
  }
2049
+ .d-collapsible__enter-active,
2050
+ .d-collapsible__leave-active {
2051
+ overflow: hidden;
2052
+ transition: height var(--td300) var(--ttf-out-quint);
2053
+ }
1999
2054
  .d-combobox__empty-list {
2000
2055
  padding: var(--dt-space-0);
2001
2056
  }
2057
+ .d-combobox__empty-list-item {
2058
+ display: flex;
2059
+ align-items: center;
2060
+ justify-content: center;
2061
+ padding: var(--dt-space-300) var(--dt-space-450);
2062
+ font-size: var(--dt-font-size-200);
2063
+ line-height: var(--lh4);
2064
+ }
2002
2065
  .d-combobox__loading-list {
2003
2066
  max-height: var(--dt-size-925);
2004
2067
  margin-top: var(--dt-space-400);
@@ -2008,9 +2071,9 @@ template {
2008
2071
  .d-datepicker {
2009
2072
  --datepicker-width: calc(var(--dt-size-300) * 75);
2010
2073
  --datepicker-button-size: calc(var(--dt-size-600) - var(--dt-size-200));
2074
+ box-sizing: border-box;
2011
2075
  width: var(--datepicker-width);
2012
2076
  padding: var(--dt-space-500);
2013
- box-sizing: border-box;
2014
2077
  }
2015
2078
  .d-datepicker__hd {
2016
2079
  padding: 0 var(--dt-space-300);
@@ -2022,9 +2085,9 @@ template {
2022
2085
  text-align: center;
2023
2086
  }
2024
2087
  .d-datepicker__month-year-title {
2025
- line-height: var(--dt-font-line-height-300);
2026
- font-size: var(--dt-font-size-100);
2027
2088
  font-weight: var(--dt-font-weight-normal);
2089
+ font-size: var(--dt-font-size-100);
2090
+ line-height: var(--dt-font-line-height-300);
2028
2091
  text-transform: uppercase;
2029
2092
  }
2030
2093
  .d-datepicker__nav-btn {
@@ -2063,6 +2126,60 @@ template {
2063
2126
  color: var(--dt-color-foreground-muted);
2064
2127
  background-color: var(--dt-color-neutral-transparent);
2065
2128
  }
2129
+ .d-context-menu-list {
2130
+ width: var(--dt-size-850);
2131
+ }
2132
+ .d-dropdown-list {
2133
+ position: relative;
2134
+ margin: var(--dt-space-300);
2135
+ padding-right: var(--dt-space-0);
2136
+ padding-left: var(--dt-space-0);
2137
+ }
2138
+ .d-dropdown-list > .d-list-item {
2139
+ margin-top: var(--dt-space-200);
2140
+ }
2141
+ .d-description-list {
2142
+ display: flex;
2143
+ flex-flow: row wrap;
2144
+ gap: var(--description-list-gap);
2145
+ align-items: flex-start;
2146
+ font-size: var(--dt-font-size-100);
2147
+ line-height: var(--dt-font-line-height-300);
2148
+ --description-list-gap: var(--dt-space-400);
2149
+ }
2150
+ .d-description-list--gap-0 {
2151
+ --description-list-gap: var(--dt-space-0);
2152
+ }
2153
+ .d-description-list--gap-100 {
2154
+ --description-list-gap: var(--dt-space-100);
2155
+ }
2156
+ .d-description-list--gap-200 {
2157
+ --description-list-gap: var(--dt-space-200);
2158
+ }
2159
+ .d-description-list--gap-300 {
2160
+ --description-list-gap: var(--dt-space-300);
2161
+ }
2162
+ .d-description-list--gap-400 {
2163
+ --description-list-gap: var(--dt-space-400);
2164
+ }
2165
+ .d-description-list--gap-500 {
2166
+ --description-list-gap: var(--dt-space-500);
2167
+ }
2168
+ .d-description-list--gap-600 {
2169
+ --description-list-gap: var(--dt-space-600);
2170
+ }
2171
+ .d-description-list--column {
2172
+ flex-direction: column;
2173
+ }
2174
+ .d-description-list__term {
2175
+ flex: 0 1 40%;
2176
+ color: var(--dt-color-foreground-tertiary);
2177
+ }
2178
+ .d-description-list__description {
2179
+ flex: 1 1 50%;
2180
+ margin-left: 0;
2181
+ color: var(--dt-color-foreground-primary);
2182
+ }
2066
2183
  .d-empty-state {
2067
2184
  display: flex;
2068
2185
  flex-direction: column;
@@ -2468,6 +2585,32 @@ legend .d-label--md {
2468
2585
  .d-input__wrapper::-ms-expand {
2469
2586
  display: none;
2470
2587
  }
2588
+ .d-input input[type="search"]::-webkit-search-decoration,
2589
+ .d-input--md input[type="search"]::-webkit-search-decoration,
2590
+ .d-textarea input[type="search"]::-webkit-search-decoration,
2591
+ .d-textarea--md input[type="search"]::-webkit-search-decoration,
2592
+ .d-input__wrapper--md input[type="search"]::-webkit-search-decoration,
2593
+ .d-input__wrapper input[type="search"]::-webkit-search-decoration,
2594
+ .d-input input[type="search"]::-webkit-search-cancel-button,
2595
+ .d-input--md input[type="search"]::-webkit-search-cancel-button,
2596
+ .d-textarea input[type="search"]::-webkit-search-cancel-button,
2597
+ .d-textarea--md input[type="search"]::-webkit-search-cancel-button,
2598
+ .d-input__wrapper--md input[type="search"]::-webkit-search-cancel-button,
2599
+ .d-input__wrapper input[type="search"]::-webkit-search-cancel-button,
2600
+ .d-input input[type="search"]::-webkit-search-results-button,
2601
+ .d-input--md input[type="search"]::-webkit-search-results-button,
2602
+ .d-textarea input[type="search"]::-webkit-search-results-button,
2603
+ .d-textarea--md input[type="search"]::-webkit-search-results-button,
2604
+ .d-input__wrapper--md input[type="search"]::-webkit-search-results-button,
2605
+ .d-input__wrapper input[type="search"]::-webkit-search-results-button,
2606
+ .d-input input[type="search"]::-webkit-search-results-decoration,
2607
+ .d-input--md input[type="search"]::-webkit-search-results-decoration,
2608
+ .d-textarea input[type="search"]::-webkit-search-results-decoration,
2609
+ .d-textarea--md input[type="search"]::-webkit-search-results-decoration,
2610
+ .d-input__wrapper--md input[type="search"]::-webkit-search-results-decoration,
2611
+ .d-input__wrapper input[type="search"]::-webkit-search-results-decoration {
2612
+ display: none;
2613
+ }
2471
2614
  .d-input__length-description {
2472
2615
  margin-bottom: var(--dt-space-200);
2473
2616
  }
@@ -2864,6 +3007,37 @@ legend .d-label--md {
2864
3007
  padding-right: var(--dt-space-0);
2865
3008
  padding-left: var(--dt-space-0);
2866
3009
  }
3010
+ .d-list-item {
3011
+ list-style: none;
3012
+ background-color: var(--dt-action-color-background-muted-default);
3013
+ }
3014
+ .d-list-item:not(.d-list-item--static) {
3015
+ border-radius: var(--dt-size-radius-300);
3016
+ cursor: pointer;
3017
+ }
3018
+ .d-list-item--focusable:focus,
3019
+ .d-list-item--focusable:focus-within,
3020
+ .d-list-item--highlighted {
3021
+ background-color: var(--dt-action-color-background-muted-hover);
3022
+ }
3023
+ .d-list-item--highlighted:active {
3024
+ background-color: var(--dt-action-color-background-muted-active);
3025
+ }
3026
+ .d-list-item--selected-icon {
3027
+ margin-left: var(--dt-space-400);
3028
+ }
3029
+ .d-list-item[role="menuitem"] {
3030
+ border-radius: var(--dt-size-300);
3031
+ }
3032
+ .d-list-item-separator {
3033
+ margin: var(--dt-space-300) var(--dt-space-300-negative);
3034
+ list-style: none;
3035
+ border-top: var(--dt-size-100) solid var(--dt-color-border-default);
3036
+ }
3037
+ .d-list-item :focus-visible {
3038
+ outline: none;
3039
+ box-shadow: var(--dt-shadow-focus);
3040
+ }
2867
3041
  .d-modal {
2868
3042
  --modal-backdrop-color-background: var(--dt-color-surface-backdrop);
2869
3043
  --modal-dialog-padding: var(--dt-space-600);
@@ -3641,6 +3815,91 @@ legend .d-label--md {
3641
3815
  --check-radio-color-background: var(--check-radio-color-background-disabled);
3642
3816
  }
3643
3817
  }
3818
+ .d-rich-text-editor__code-block {
3819
+ padding: var(--dt-space-400);
3820
+ background: var(--dt-color-surface-secondary);
3821
+ }
3822
+ .d-rich-text-editor > .ProseMirror {
3823
+ box-shadow: none;
3824
+ }
3825
+ .d-rich-text-editor > .ProseMirror p.is-editor-empty:first-child::before {
3826
+ float: left;
3827
+ height: 0;
3828
+ color: var(--dt-color-foreground-placeholder);
3829
+ content: attr(data-placeholder);
3830
+ pointer-events: none;
3831
+ }
3832
+ .d-rich-text-editor > .ProseMirror ul,
3833
+ .d-rich-text-editor > .ProseMirror ol {
3834
+ padding-left: var(--dt-space-525);
3835
+ }
3836
+ .d-rich-text-editor > .ProseMirror ul > li {
3837
+ list-style-type: disc;
3838
+ }
3839
+ .d-rich-text-editor > .ProseMirror ol > li {
3840
+ list-style-type: decimal;
3841
+ }
3842
+ .d-rich-text-editor > .ProseMirror blockquote {
3843
+ margin-left: 0;
3844
+ padding-left: var(--dt-space-400);
3845
+ border-left: var(--dt-size-border-300) solid var(--dt-color-foreground-muted-inverted);
3846
+ }
3847
+ .d-suggestion-list__container {
3848
+ max-height: var(--dt-size-875);
3849
+ }
3850
+ .d-suggestion-list {
3851
+ position: relative;
3852
+ min-width: var(--dt-size-925);
3853
+ max-width: var(--dt-size-975);
3854
+ padding: var(--dt-size-300);
3855
+ }
3856
+ .d-suggestion-list__item {
3857
+ border: var(--dt-size-100) solid transparent;
3858
+ }
3859
+ .d-mention-suggestion__name {
3860
+ overflow: hidden;
3861
+ white-space: nowrap;
3862
+ text-overflow: ellipsis;
3863
+ }
3864
+ .vue-recycle-scroller {
3865
+ position: relative;
3866
+ }
3867
+ .vue-recycle-scroller.direction-vertical:not(.page-mode) {
3868
+ overflow-y: auto;
3869
+ }
3870
+ .vue-recycle-scroller.direction-horizontal:not(.page-mode) {
3871
+ overflow-x: auto;
3872
+ }
3873
+ .vue-recycle-scroller.direction-horizontal {
3874
+ display: flex;
3875
+ }
3876
+ .vue-recycle-scroller__slot {
3877
+ flex: auto 0 0;
3878
+ }
3879
+ .vue-recycle-scroller__item-wrapper {
3880
+ position: relative;
3881
+ flex: 1;
3882
+ box-sizing: border-box;
3883
+ overflow: hidden;
3884
+ }
3885
+ .vue-recycle-scroller.ready .vue-recycle-scroller__item-view {
3886
+ position: absolute;
3887
+ top: 0;
3888
+ left: 0;
3889
+ will-change: transform;
3890
+ }
3891
+ .vue-recycle-scroller.direction-vertical .vue-recycle-scroller__item-wrapper {
3892
+ width: 100%;
3893
+ }
3894
+ .vue-recycle-scroller.direction-horizontal .vue-recycle-scroller__item-wrapper {
3895
+ height: 100%;
3896
+ }
3897
+ .vue-recycle-scroller.ready.direction-vertical .vue-recycle-scroller__item-view {
3898
+ width: 100%;
3899
+ }
3900
+ .vue-recycle-scroller.ready.direction-horizontal .vue-recycle-scroller__item-view {
3901
+ height: 100%;
3902
+ }
3644
3903
  .d-select {
3645
3904
  --select-color-border: var(--dt-inputs-color-border-default);
3646
3905
  --select-notch-position-right: var(--dt-space-400);
@@ -3781,6 +4040,12 @@ legend .d-label--md {
3781
4040
  .d-select__input::-ms-expand {
3782
4041
  display: none;
3783
4042
  }
4043
+ .d-select__input input[type="search"]::-webkit-search-decoration,
4044
+ .d-select__input input[type="search"]::-webkit-search-cancel-button,
4045
+ .d-select__input input[type="search"]::-webkit-search-results-button,
4046
+ .d-select__input input[type="search"]::-webkit-search-results-decoration {
4047
+ display: none;
4048
+ }
3784
4049
  .d-select__input option {
3785
4050
  color: var(--dt-color-foreground-secondary);
3786
4051
  background-color: var(--dt-color-surface-secondary);
@@ -3869,9 +4134,9 @@ legend .d-label--md {
3869
4134
  .d-select--disabled::after {
3870
4135
  opacity: 0.33;
3871
4136
  }
3872
- .skeleton-placeholder {
3873
- --placeholder-from-color: hsla(var(--dt-color-black-900-hsl) / 0.2);
3874
- --placeholder-to-color: hsla(var(--dt-color-black-900-hsl) / 0.1);
4137
+ .d-skeleton-placeholder {
4138
+ --placeholder-from-color: var(--dt-color-surface-bold-opaque);
4139
+ --placeholder-to-color: var(--dt-color-surface-moderate-opaque);
3875
4140
  display: flex;
3876
4141
  width: 100%;
3877
4142
  background: var(--placeholder-from-color);
@@ -3880,14 +4145,14 @@ legend .d-label--md {
3880
4145
  fill: var(--placeholder-from-color);
3881
4146
  stroke: none;
3882
4147
  }
3883
- .skeleton-placeholder--animate {
3884
- -webkit-animation-name: skeleton-placeholder-throb;
3885
- animation-name: skeleton-placeholder-throb;
4148
+ .d-skeleton-placeholder--animate {
4149
+ -webkit-animation-name: d-skeleton-placeholder-throb;
4150
+ animation-name: d-skeleton-placeholder-throb;
3886
4151
  -webkit-animation-iteration-count: infinite;
3887
4152
  animation-iteration-count: infinite;
3888
4153
  }
3889
- @-webkit-keyframes skeleton-placeholder-throb {
3890
- 20% {
4154
+ @-webkit-keyframes d-skeleton-placeholder-throb {
4155
+ 10% {
3891
4156
  background: var(--placeholder-from-color);
3892
4157
  fill: var(--placeholder-from-color);
3893
4158
  }
@@ -3895,13 +4160,13 @@ legend .d-label--md {
3895
4160
  background: var(--placeholder-to-color);
3896
4161
  fill: var(--placeholder-to-color);
3897
4162
  }
3898
- 80% {
4163
+ 90% {
3899
4164
  background: var(--placeholder-from-color);
3900
4165
  fill: var(--placeholder-from-color);
3901
4166
  }
3902
4167
  }
3903
- @keyframes skeleton-placeholder-throb {
3904
- 20% {
4168
+ @keyframes d-skeleton-placeholder-throb {
4169
+ 10% {
3905
4170
  background: var(--placeholder-from-color);
3906
4171
  fill: var(--placeholder-from-color);
3907
4172
  }
@@ -3909,7 +4174,7 @@ legend .d-label--md {
3909
4174
  background: var(--placeholder-to-color);
3910
4175
  fill: var(--placeholder-to-color);
3911
4176
  }
3912
- 80% {
4177
+ 90% {
3913
4178
  background: var(--placeholder-from-color);
3914
4179
  fill: var(--placeholder-from-color);
3915
4180
  }
@@ -4156,12 +4421,26 @@ legend .d-label--md {
4156
4421
  .d-tablist--inverted .d-tab--selected::after {
4157
4422
  --tab-color-background: currentColor;
4158
4423
  }
4424
+ .tippy-box[data-placement^=top]>.tippy-svg-arrow{bottom:0}.tippy-box[data-placement^=top]>.tippy-svg-arrow:after,.tippy-box[data-placement^=top]>.tippy-svg-arrow>svg{top:16px;-webkit-transform:rotate(180deg);transform:rotate(180deg)}.tippy-box[data-placement^=bottom]>.tippy-svg-arrow{top:0}.tippy-box[data-placement^=bottom]>.tippy-svg-arrow>svg{bottom:16px}.tippy-box[data-placement^=left]>.tippy-svg-arrow{right:0}.tippy-box[data-placement^=left]>.tippy-svg-arrow:after,.tippy-box[data-placement^=left]>.tippy-svg-arrow>svg{-webkit-transform:rotate(90deg);transform:rotate(90deg);top:calc(50% - 3px);left:11px}.tippy-box[data-placement^=right]>.tippy-svg-arrow{left:0}.tippy-box[data-placement^=right]>.tippy-svg-arrow:after,.tippy-box[data-placement^=right]>.tippy-svg-arrow>svg{-webkit-transform:rotate(-90deg);transform:rotate(-90deg);top:calc(50% - 3px);right:11px}.tippy-svg-arrow{width:16px;height:16px;fill:#333;text-align:initial}.tippy-svg-arrow,.tippy-svg-arrow>svg{position:absolute}
4159
4425
  .d-tooltip-container {
4160
4426
  position: relative;
4161
4427
  display: inline-flex;
4162
4428
  align-items: center;
4163
4429
  justify-content: center;
4164
4430
  }
4431
+ .tippy-box[data-reference-hidden] {
4432
+ visibility: hidden;
4433
+ pointer-events: none;
4434
+ }
4435
+ .tippy-box > .tippy-svg-arrow {
4436
+ fill: var(--dt-color-surface-contrast);
4437
+ }
4438
+ .tippy-box[data-theme~='inverted'] > .tippy-svg-arrow {
4439
+ fill: var(--dt-color-surface-moderate);
4440
+ }
4441
+ .tippy-box[data-animation='fade'][data-state='hidden'] {
4442
+ opacity: 0;
4443
+ }
4165
4444
  .d-tooltip {
4166
4445
  --tooltip-color-background: var(--dt-color-surface-contrast);
4167
4446
  --tooltip-color-text: var(--dt-color-foreground-primary-inverted);
@@ -4723,6 +5002,9 @@ legend .d-label--md {
4723
5002
  .d-emoji-picker__search-label {
4724
5003
  padding-top: var(--dt-space-500);
4725
5004
  }
5005
+ .d-emoji-picker__search-x-button {
5006
+ margin-right: var(--dt-space-300-negative);
5007
+ }
4726
5008
  .d-emoji-picker__tab {
4727
5009
  display: flex;
4728
5010
  flex-wrap: wrap;
@@ -5295,6 +5577,7 @@ legend .d-label--md {
5295
5577
  transform: rotate(360deg);
5296
5578
  }
5297
5579
  }
5580
+ /* stylelint-disable-next-line keyframes-name-pattern */
5298
5581
  @-webkit-keyframes d-loading-bars__short {
5299
5582
  0% {
5300
5583
  min-height: var(--dt-size-300);
@@ -5397,6 +5680,7 @@ legend .d-label--md {
5397
5680
  opacity: 0;
5398
5681
  }
5399
5682
  }
5683
+ /* stylelint-disable-next-line keyframes-name-pattern */
5400
5684
  @-webkit-keyframes d-loading-bars__tall {
5401
5685
  0% {
5402
5686
  min-height: var(--dt-size-300);
@@ -5568,10 +5852,7 @@ legend .d-label--md {
5568
5852
  opacity: unset !important;
5569
5853
  }
5570
5854
  .d-t {
5571
- transition-delay: 0s;
5572
- transition-timing-function: var(--ttf-in-out);
5573
- transition-duration: var(--td50);
5574
- transition-property: all;
5855
+ transition: all var(--td50) var(--ttf-in-out) 0s;
5575
5856
  }
5576
5857
  .d-td0 {
5577
5858
  transition-duration: var(--td0) !important;
@@ -6456,16 +6737,16 @@ legend .d-label--md {
6456
6737
  cursor: none !important;
6457
6738
  }
6458
6739
  .d-ol-focusring {
6459
- box-shadow: var(--dt-shadow-focus) !important;
6460
6740
  outline: none !important;
6741
+ box-shadow: var(--dt-shadow-focus) !important;
6461
6742
  }
6462
6743
  .d-ol-focusring-inset {
6463
- box-shadow: var(--dt-shadow-focus-inset) !important;
6464
6744
  outline: none !important;
6745
+ box-shadow: var(--dt-shadow-focus-inset) !important;
6465
6746
  }
6466
6747
  .d-ol-none {
6467
- box-shadow: none !important;
6468
6748
  outline: none !important;
6749
+ box-shadow: none !important;
6469
6750
  }
6470
6751
  .d-pe-auto {
6471
6752
  pointer-events: auto !important;
@@ -6674,10 +6955,10 @@ legend .d-label--md {
6674
6955
  }
6675
6956
  .d-vi-visible-sr {
6676
6957
  position: absolute;
6677
- width: 1px;
6678
- height: 1px;
6679
- margin: -1px;
6680
- padding: 0;
6958
+ width: var(--dt-size-100);
6959
+ height: var(--dt-size-100);
6960
+ margin: var(--dt-space-100-negative);
6961
+ padding: var(--dt-space-0);
6681
6962
  overflow: hidden;
6682
6963
  word-wrap: normal;
6683
6964
  border: none;
@@ -7436,9 +7717,6 @@ ul {
7436
7717
  .d-headline54 {
7437
7718
  font: var(--dt-typography-headline-xxl);
7438
7719
  }
7439
- .d-fs-unset {
7440
- font-size: unset !important;
7441
- }
7442
7720
  .d-fs-normal {
7443
7721
  font-style: normal !important;
7444
7722
  }
@@ -7864,6 +8142,13 @@ body {
7864
8142
  --dt-shadow-extra-large-color-hsla: hsl(var(--dt-shadow-extra-large-color-h) var(--dt-shadow-extra-large-color-s) var(--dt-shadow-extra-large-color-l) / var(--alpha, 30%));
7865
8143
  --dt-shadow-extra-large-color: #0000004d;
7866
8144
  --dt-shadow-large-type: dropShadow;
8145
+ --dt-shadow-large-color-h: 0;
8146
+ --dt-shadow-large-color-s: 0%;
8147
+ --dt-shadow-large-color-l: 0%;
8148
+ --dt-shadow-large-color-a: 30%;
8149
+ --dt-shadow-large-color-hsl: var(--dt-shadow-large-color-h) var(--dt-shadow-large-color-s) var(--dt-shadow-large-color-l);
8150
+ --dt-shadow-large-color-hsla: hsl(var(--dt-shadow-large-color-h) var(--dt-shadow-large-color-s) var(--dt-shadow-large-color-l) / var(--alpha, 30%));
8151
+ --dt-shadow-large-color: #0000004d;
7867
8152
  --dt-shadow-medium-type: dropShadow;
7868
8153
  --dt-shadow-medium-color-h: 0;
7869
8154
  --dt-shadow-medium-color-s: 0%;
@@ -8536,13 +8821,6 @@ body {
8536
8821
  --dt-shadow-extra-large-blur: var(--dt-size-600);
8537
8822
  --dt-shadow-large-offset-y: var(--dt-size-200);
8538
8823
  --dt-shadow-large-offset-x: var(--dt-size-0);
8539
- --dt-shadow-large-color-h: 0;
8540
- --dt-shadow-large-color-s: 0%;
8541
- --dt-shadow-large-color-l: 0%;
8542
- --dt-shadow-large-color-a: 30%;
8543
- --dt-shadow-large-color-hsl: var(--dt-shadow-large-color-h) var(--dt-shadow-large-color-s) var(--dt-shadow-large-color-l);
8544
- --dt-shadow-large-color-hsla: hsl(var(--dt-shadow-large-color-h) var(--dt-shadow-large-color-s) var(--dt-shadow-large-color-l) / var(--alpha, 30%));
8545
- --dt-shadow-large-color: rgba(0, 0, 0, 0.3);
8546
8824
  --dt-shadow-large-spread: var(--dt-size-0);
8547
8825
  --dt-shadow-large-blur: var(--dt-size-500);
8548
8826
  --dt-shadow-medium-offset-y: var(--dt-size-200);
@@ -8561,7 +8839,7 @@ body {
8561
8839
  --dt-shadow-medium: var(--dt-shadow-medium-offset-x) var(--dt-shadow-medium-offset-y) var(--dt-shadow-medium-blur) var(--dt-shadow-medium-spread) var(--dt-shadow-medium-color);
8562
8840
  --dt-shadow-small: var(--dt-shadow-small-offset-x) var(--dt-shadow-small-offset-y) var(--dt-shadow-small-blur) var(--dt-shadow-small-spread) var(--dt-shadow-small-color);
8563
8841
  --dt-color-gradient-magenta-purple: linear-gradient(135deg, var(--dt-color-brand-magenta) 10%, var(--dt-color-brand-purple) 90%); /* Gradient for Ai-oriented treatments. */
8564
- --dt-size-base: calc(var(--dt-font-size-root) * .8);
8842
+ --dt-size-base: calc(var(--dt-font-size-root) * 0.8);
8565
8843
  --dt-font-family-expressive: Archivo, var(--dt-font-family-body);
8566
8844
  --dt-font-size-500: calc(var(--dt-font-size-root) * 3.8); /* extra large / xxl */
8567
8845
  --dt-font-size-400: calc(var(--dt-font-size-root) * 2.7); /* extra large / xl */