@planningcenter/tapestry 4.0.0-rc.2 → 4.0.0-rc.20

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 (53) hide show
  1. package/dist/componentRegistration.js +4 -0
  2. package/dist/componentRegistration.js.map +1 -1
  3. package/dist/components/DataTable/DataTable.d.ts +42 -2
  4. package/dist/components/DataTable/DataTable.d.ts.map +1 -1
  5. package/dist/components/DataTable/DataTable.js +108 -30
  6. package/dist/components/DataTable/DataTable.js.map +1 -1
  7. package/dist/components/DataTable/ResultsCount.d.ts +49 -0
  8. package/dist/components/DataTable/ResultsCount.d.ts.map +1 -0
  9. package/dist/components/DataTable/ResultsCount.js +76 -0
  10. package/dist/components/DataTable/ResultsCount.js.map +1 -0
  11. package/dist/components/DataTable/TableActions.d.ts +41 -0
  12. package/dist/components/DataTable/TableActions.d.ts.map +1 -0
  13. package/dist/components/DataTable/TableActions.js +47 -0
  14. package/dist/components/DataTable/TableActions.js.map +1 -0
  15. package/dist/components/button/BaseButton.d.ts.map +1 -1
  16. package/dist/components/button/BaseButton.js +20 -4
  17. package/dist/components/button/BaseButton.js.map +1 -1
  18. package/dist/components/combo-box/ComboBox.js +19 -19
  19. package/dist/components/combo-box/ComboBox.js.map +1 -1
  20. package/dist/components/internal/LoadingSpinner.js +2 -2
  21. package/dist/components/internal/LoadingSpinner.js.map +1 -1
  22. package/dist/components/internal/index.d.ts +2 -0
  23. package/dist/components/internal/index.d.ts.map +1 -1
  24. package/dist/components/internal/tooltip/Tooltip.d.ts +34 -0
  25. package/dist/components/internal/tooltip/Tooltip.d.ts.map +1 -0
  26. package/dist/components/internal/tooltip/TooltipTriggerContext.d.ts +7 -0
  27. package/dist/components/internal/tooltip/TooltipTriggerContext.d.ts.map +1 -0
  28. package/dist/components/internal/tooltip/TooltipTriggerContext.js +7 -0
  29. package/dist/components/internal/tooltip/TooltipTriggerContext.js.map +1 -0
  30. package/dist/components/internal/tooltip/index.d.ts +3 -0
  31. package/dist/components/internal/tooltip/index.d.ts.map +1 -0
  32. package/dist/components/link/IconLink.d.ts +1 -1
  33. package/dist/components/search-input/SearchInput.d.ts +40 -0
  34. package/dist/components/search-input/SearchInput.d.ts.map +1 -0
  35. package/dist/components/search-input/SearchInput.js +75 -0
  36. package/dist/components/search-input/SearchInput.js.map +1 -0
  37. package/dist/components/search-input/index.d.ts +4 -0
  38. package/dist/components/search-input/index.d.ts.map +1 -0
  39. package/dist/index.css +164 -275
  40. package/dist/index.css.map +1 -1
  41. package/dist/index.d.ts +1 -0
  42. package/dist/index.d.ts.map +1 -1
  43. package/dist/index.js +1 -0
  44. package/dist/index.js.map +1 -1
  45. package/dist/reactRender.css +1024 -1105
  46. package/dist/reactRender.css.map +1 -1
  47. package/dist/reactRenderLegacy.css +1024 -1105
  48. package/dist/reactRenderLegacy.css.map +1 -1
  49. package/dist/unstable.css +2728 -2809
  50. package/dist/unstable.css.map +1 -1
  51. package/dist/unstable.js +1 -0
  52. package/dist/unstable.js.map +1 -1
  53. package/package.json +5 -3
package/dist/reactRenderLegacy.css CHANGED
@@ -1,206 +1,121 @@
1
1
  .tds-flex{ display:flex; }
2
2
 
3
3
  [data-flex-inline]{ display:inline-flex; }
4
-
5
4
  [data-flex-expand]{
6
5
  flex:1 1 0%;
7
6
  min-width:0;
8
7
  }
9
8
 
10
9
  [data-flex-direction="row"]{ flex-direction:row; }
11
-
12
10
  [data-flex-direction="row-reverse"]{ flex-direction:row-reverse; }
13
-
14
11
  [data-flex-direction="column"]{ flex-direction:column; }
15
-
16
12
  [data-flex-direction="column-reverse"]{ flex-direction:column-reverse; }
17
13
 
18
14
  [data-flex-align="stretch"]{ align-items:stretch; }
19
-
20
15
  [data-flex-align="start"]{ align-items:start; }
21
-
22
16
  [data-flex-align="center"]{ align-items:center; }
23
-
24
17
  [data-flex-align="end"]{ align-items:end; }
25
-
26
18
  [data-flex-align="baseline"]{ align-items:baseline; }
27
19
 
28
20
  [data-flex-align-self="auto"]{ align-self:auto; }
29
-
30
21
  [data-flex-align-self="stretch"]{ align-self:stretch; }
31
-
32
22
  [data-flex-align-self="start"]{ align-self:start; }
33
-
34
23
  [data-flex-align-self="center"]{ align-self:center; }
35
-
36
24
  [data-flex-align-self="end"]{ align-self:end; }
37
-
38
25
  [data-flex-align-self="baseline"]{ align-self:baseline; }
39
26
 
40
27
  [data-flex-justify="start"]{ justify-content:start; }
41
-
42
28
  [data-flex-justify="center"]{ justify-content:center; }
43
-
44
29
  [data-flex-justify="end"]{ justify-content:end; }
45
-
46
30
  [data-flex-justify="space-between"]{ justify-content:space-between; }
47
-
48
31
  [data-flex-justify="space-around"]{ justify-content:space-around; }
49
-
50
32
  [data-flex-justify="space-evenly"]{ justify-content:space-evenly; }
51
33
 
52
34
  [data-flex-wrap="nowrap"]{ flex-wrap:nowrap; }
53
-
54
35
  [data-flex-wrap="wrap"]{ flex-wrap:wrap; }
55
-
56
36
  [data-flex-wrap="wrap-reverse"]{ flex-wrap:wrap-reverse; }
57
37
 
58
38
  [data-flex-grow="0"]{ flex-grow:0; }
59
-
60
39
  [data-flex-grow="1"]{ flex-grow:1; }
61
40
 
62
41
  [data-flex-shrink="0"]{ flex-shrink:0; }
63
-
64
42
  [data-flex-shrink="1"]{ flex-shrink:1; }
65
43
 
66
44
  [data-flex-gap="0"]{ gap:0; }
67
-
68
45
  [data-flex-gap="0.25"]{ gap:var(--t-spacing-fourth); }
69
-
70
46
  [data-flex-gap="0.5"]{ gap:var(--t-spacing-half); }
71
-
72
47
  [data-flex-gap="1"]{ gap:var(--t-spacing-1); }
73
-
74
48
  [data-flex-gap="1.5"]{ gap:var(--t-spacing-1-half); }
75
-
76
49
  [data-flex-gap="2"]{ gap:var(--t-spacing-2); }
77
-
78
50
  [data-flex-gap="3"]{ gap:var(--t-spacing-3); }
79
-
80
51
  [data-flex-gap="4"]{ gap:var(--t-spacing-4); }
81
-
82
52
  [data-flex-gap="5"]{ gap:var(--t-spacing-5); }
83
-
84
53
  [data-flex-gap="6"]{ gap:var(--t-spacing-6); }
85
-
86
54
  [data-flex-gap="7"]{ gap:var(--t-spacing-7); }
87
55
 
88
56
  [data-flex-row-gap="0"]{ row-gap:0; }
89
-
90
57
  [data-flex-row-gap="0.25"]{ row-gap:var(--t-spacing-fourth); }
91
-
92
58
  [data-flex-row-gap="0.5"]{ row-gap:var(--t-spacing-half); }
93
-
94
59
  [data-flex-row-gap="1"]{ row-gap:var(--t-spacing-1); }
95
-
96
60
  [data-flex-row-gap="1.5"]{ row-gap:var(--t-spacing-1-half); }
97
-
98
61
  [data-flex-row-gap="2"]{ row-gap:var(--t-spacing-2); }
99
-
100
62
  [data-flex-row-gap="3"]{ row-gap:var(--t-spacing-3); }
101
-
102
63
  [data-flex-row-gap="4"]{ row-gap:var(--t-spacing-4); }
103
-
104
64
  [data-flex-row-gap="5"]{ row-gap:var(--t-spacing-5); }
105
-
106
65
  [data-flex-row-gap="6"]{ row-gap:var(--t-spacing-6); }
107
-
108
66
  [data-flex-row-gap="7"]{ row-gap:var(--t-spacing-7); }
109
67
 
110
68
  [data-flex-column-gap="0"]{ -moz-column-gap:0; column-gap:0; }
111
-
112
69
  [data-flex-column-gap="0.25"]{ -moz-column-gap:var(--t-spacing-fourth); column-gap:var(--t-spacing-fourth); }
113
-
114
70
  [data-flex-column-gap="0.5"]{ -moz-column-gap:var(--t-spacing-half); column-gap:var(--t-spacing-half); }
115
-
116
71
  [data-flex-column-gap="1"]{ -moz-column-gap:var(--t-spacing-1); column-gap:var(--t-spacing-1); }
117
-
118
72
  [data-flex-column-gap="1.5"]{ -moz-column-gap:var(--t-spacing-1-half); column-gap:var(--t-spacing-1-half); }
119
-
120
73
  [data-flex-column-gap="2"]{ -moz-column-gap:var(--t-spacing-2); column-gap:var(--t-spacing-2); }
121
-
122
74
  [data-flex-column-gap="3"]{ -moz-column-gap:var(--t-spacing-3); column-gap:var(--t-spacing-3); }
123
-
124
75
  [data-flex-column-gap="4"]{ -moz-column-gap:var(--t-spacing-4); column-gap:var(--t-spacing-4); }
125
-
126
76
  [data-flex-column-gap="5"]{ -moz-column-gap:var(--t-spacing-5); column-gap:var(--t-spacing-5); }
127
-
128
77
  [data-flex-column-gap="6"]{ -moz-column-gap:var(--t-spacing-6); column-gap:var(--t-spacing-6); }
129
-
130
78
  [data-flex-column-gap="7"]{ -moz-column-gap:var(--t-spacing-7); column-gap:var(--t-spacing-7); }
131
79
 
132
80
  [data-flex-basis="auto"]{ flex-basis:auto; }
133
-
134
81
  [data-flex-basis="0"]{ flex-basis:0; }
135
-
136
82
  [data-flex-basis="100%"]{ flex-basis:100%; }
137
83
 
138
84
  [data-padding="0"]{ padding:0; }
139
-
140
85
  [data-padding="0.25"]{ padding:var(--t-spacing-fourth); }
141
-
142
86
  [data-padding="0.5"]{ padding:var(--t-spacing-half); }
143
-
144
87
  [data-padding="1"]{ padding:var(--t-spacing-1); }
145
-
146
88
  [data-padding="1.5"]{ padding:var(--t-spacing-1-half); }
147
-
148
89
  [data-padding="2"]{ padding:var(--t-spacing-2); }
149
-
150
90
  [data-padding="3"]{ padding:var(--t-spacing-3); }
151
-
152
91
  [data-padding="4"]{ padding:var(--t-spacing-4); }
153
-
154
92
  [data-padding="5"]{ padding:var(--t-spacing-5); }
155
-
156
93
  [data-padding="6"]{ padding:var(--t-spacing-6); }
157
-
158
94
  [data-padding="7"]{ padding:var(--t-spacing-7); }
159
95
 
160
96
  [data-padding-block="0"]{ padding-block:0; }
161
-
162
97
  [data-padding-block="0.25"]{ padding-block:var(--t-spacing-fourth); }
163
-
164
98
  [data-padding-block="0.5"]{ padding-block:var(--t-spacing-half); }
165
-
166
99
  [data-padding-block="1"]{ padding-block:var(--t-spacing-1); }
167
-
168
100
  [data-padding-block="1.5"]{ padding-block:var(--t-spacing-1-half); }
169
-
170
101
  [data-padding-block="2"]{ padding-block:var(--t-spacing-2); }
171
-
172
102
  [data-padding-block="3"]{ padding-block:var(--t-spacing-3); }
173
-
174
103
  [data-padding-block="4"]{ padding-block:var(--t-spacing-4); }
175
-
176
104
  [data-padding-block="5"]{ padding-block:var(--t-spacing-5); }
177
-
178
105
  [data-padding-block="6"]{ padding-block:var(--t-spacing-6); }
179
-
180
106
  [data-padding-block="7"]{ padding-block:var(--t-spacing-7); }
181
107
 
182
108
  [data-padding-inline="0"]{ padding-inline:0; }
183
-
184
109
  [data-padding-inline="0.25"]{ padding-inline:var(--t-spacing-fourth); }
185
-
186
110
  [data-padding-inline="0.5"]{ padding-inline:var(--t-spacing-half); }
187
-
188
111
  [data-padding-inline="1"]{ padding-inline:var(--t-spacing-1); }
189
-
190
112
  [data-padding-inline="1.5"]{ padding-inline:var(--t-spacing-1-half); }
191
-
192
113
  [data-padding-inline="2"]{ padding-inline:var(--t-spacing-2); }
193
-
194
114
  [data-padding-inline="3"]{ padding-inline:var(--t-spacing-3); }
195
-
196
115
  [data-padding-inline="4"]{ padding-inline:var(--t-spacing-4); }
197
-
198
116
  [data-padding-inline="5"]{ padding-inline:var(--t-spacing-5); }
199
-
200
117
  [data-padding-inline="6"]{ padding-inline:var(--t-spacing-6); }
201
-
202
118
  [data-padding-inline="7"]{ padding-inline:var(--t-spacing-7); }
203
-
204
119
  @media (min-width: 480px){
205
120
  [data-flex-direction-xs="row"]{ flex-direction:row; }
206
121
  [data-flex-direction-xs="row-reverse"]{ flex-direction:row-reverse; }
@@ -313,7 +228,6 @@
313
228
  [data-padding-inline-xs="6"]{ padding-inline:var(--t-spacing-6); }
314
229
  [data-padding-inline-xs="7"]{ padding-inline:var(--t-spacing-7); }
315
230
  }
316
-
317
231
  @media (min-width: 600px){
318
232
  [data-flex-direction-sm="row"]{ flex-direction:row; }
319
233
  [data-flex-direction-sm="row-reverse"]{ flex-direction:row-reverse; }
@@ -426,7 +340,6 @@
426
340
  [data-padding-inline-sm="6"]{ padding-inline:var(--t-spacing-6); }
427
341
  [data-padding-inline-sm="7"]{ padding-inline:var(--t-spacing-7); }
428
342
  }
429
-
430
343
  @media (min-width: 720px){
431
344
  [data-flex-direction-md="row"]{ flex-direction:row; }
432
345
  [data-flex-direction-md="row-reverse"]{ flex-direction:row-reverse; }
@@ -539,7 +452,6 @@
539
452
  [data-padding-inline-md="6"]{ padding-inline:var(--t-spacing-6); }
540
453
  [data-padding-inline-md="7"]{ padding-inline:var(--t-spacing-7); }
541
454
  }
542
-
543
455
  @media (min-width: 960px){
544
456
  [data-flex-direction-lg="row"]{ flex-direction:row; }
545
457
  [data-flex-direction-lg="row-reverse"]{ flex-direction:row-reverse; }
@@ -652,7 +564,6 @@
652
564
  [data-padding-inline-lg="6"]{ padding-inline:var(--t-spacing-6); }
653
565
  [data-padding-inline-lg="7"]{ padding-inline:var(--t-spacing-7); }
654
566
  }
655
-
656
567
  @media (min-width: 1200px){
657
568
  [data-flex-direction-xl="row"]{ flex-direction:row; }
658
569
  [data-flex-direction-xl="row-reverse"]{ flex-direction:row-reverse; }
@@ -766,115 +677,434 @@
766
677
  [data-padding-inline-xl="7"]{ padding-inline:var(--t-spacing-7); }
767
678
  }
768
679
 
769
-
770
- @media (prefers-reduced-motion: no-preference){
771
-
772
- :root{
773
- interpolate-size:allow-keywords;
774
- }
680
+ @layer t-critical{
681
+ tds-page-header:not(.hydrated){
682
+ display:none;
775
683
  }
684
+ }
776
685
 
777
- @layer tds-component{
778
- tds-sidenav,
779
- .tds-sidenav{
780
- --tds-sidenav-indent:12px;
781
- --tds-sidenav-item-depth:0;
782
-
783
- --tds-sidenav-item-transition:background-color var(--t-duration-200) var(--t-ease-in-out);
784
-
785
- --tds-sidenav-collapse-transition-enter:opacity var(--t-duration-300) var(--t-ease-out), transform var(--t-duration-300) var(--t-ease-out), display var(--t-duration-300) allow-discrete, overlay var(--t-duration-300) allow-discrete;
786
- --tds-sidenav-collapse-transition-exit:opacity var(--t-duration-200) var(--t-ease-in), display var(--t-duration-200) allow-discrete, overlay var(--t-duration-200) allow-discrete;
787
- --tds-sidenav-collapse-closed-opacity:0;
788
- --tds-sidenav-collapse-open-opacity:1;
789
- --tds-sidenav-collapse-closed-transform:translateY(-8px);
790
- --tds-sidenav-collapse-open-transform:translateY(0);
686
+ @layer t-component{
687
+ .tds-page-header{
688
+ --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
689
+ --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
690
+ --tds-page-header-color:var(--t-text-color);
691
+ --tds-page-header-bottom-border-color:transparent;
692
+ --tds-page-header-headline-color:var(--t-text-color-headline);
693
+ --tds-page-header-headline-font-size:var(--t-font-size-2xl);
694
+ --tds-page-header-padding-x:var(--t-spacing-2);
695
+ --tds-page-header-padding-y:var(--t-spacing-2);
696
+ --tds-page-header-nav-padding-x:var(--tds-page-header-padding-x, var(--t-spacing-3));
697
+ --tds-page-header-nav-gap:var(--t-spacing-1);
698
+ --tds-page-header-nav-background:linear-gradient(180deg, var(--tds-page-header-nav-background-start, rgba(0, 0, 0, 0)) 0%, var(--tds-page-header-nav-background-end, rgba(0, 0, 0, .1)) 100%);
699
+ --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
700
+ --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
701
+ --tds-page-header-nav-item-color:var(--t-text-color-secondary);
702
+ --tds-page-header-nav-item-background-color:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 35%);
703
+ --tds-page-header-nav-item-border-width:1px;
791
704
 
792
- --tds-sidenav-item-icon-size:var(--t-element-size-md);
793
- --tds-sidenav-item-background-hover:var(--t-fill-color-button-interaction-ghost-hover);
794
- --tds-sidenav-item-background-active:var(--t-fill-color-button-interaction-ghost-active);
795
- --tds-sidenav-item-background-selected:var(--t-fill-color-button-interaction-ghost-active);
705
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
706
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color);
796
707
 
797
- --tds-sidenav-item-nested-background-hover:var(--tds-sidenav-item-background-hover);
798
- --tds-sidenav-item-nested-background-active:var(--tds-sidenav-item-background-hover);
799
- --tds-sidenav-item-nested-background-selected:transparent;
708
+ --tds-page-header-nav-item-color-hover:var(--t-text-color);
709
+ --tds-page-header-nav-item-background-color-hover:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 20%);
710
+ --tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
800
711
 
801
- --tds-sidenav-item-nested-border-color:var(--t-fill-color-neutral-050);
802
- --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
803
- --tds-sidenav-item-nested-border-color-selected:var(--t-border-color-status-info);
712
+ --tds-page-header-nav-item-background-color-active:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 10%);
713
+ --tds-page-header-nav-item-border-color-active:var(--tds-page-header-nav-item-background-color-active);
804
714
 
805
- --tds-sidenav-item-icon-color:var(--t-icon-color-secondary);
806
- --tds-sidenav-item-icon-color-selected:var(--t-icon-color);
807
- }
715
+ --tds-page-header-nav-item-color-disabled:var(--t-text-color-disabled);
716
+ --tds-page-header-nav-item-background-color-disabled:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 50%);
717
+ --tds-page-header-nav-item-border-color-disabled:var(--tds-page-header-nav-item-background-color-disabled);
808
718
 
809
- @media (prefers-reduced-motion: reduce){
810
- tds-sidenav,
811
- .tds-sidenav{
812
- --tds-sidenav-collapse-transition-enter:none;
813
- --tds-sidenav-collapse-transition-exit:none;
814
- --tds-sidenav-collapse-closed-transform:none;
815
- --tds-sidenav-collapse-open-transform:none;
719
+ --tds-page-header-nav-item-color-selected:var(--t-text-color);
720
+ --tds-page-header-nav-item-background-color-selected:var(--t-surface-color-canvas);
721
+ --tds-page-header-nav-item-border-color-selected:var(--tds-page-header-nav-item-background-color-selected);
722
+ --tds-page-header-nav-item-border-bottom-color-selected:var(--tds-page-header-nav-item-background-color-selected);
723
+ --tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning);
816
724
  }
817
- }
818
725
 
819
- .tds-sidenav--theme-gray{
820
- --tds-sidenav-item-background-hover:var(--t-fill-color-neutral-080);
821
- --tds-sidenav-item-background-active:var(--t-fill-color-neutral-070);
822
- --tds-sidenav-item-background-selected:var(--t-fill-color-neutral-050);
823
- --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
824
- --tds-sidenav-item-nested-border-color-selected:var(--t-fill-color-neutral-010);
726
+ .tds-page-header--profile{
727
+ --tds-page-header-padding-y:20px;
825
728
  }
826
- }
827
729
 
828
- .tds-sidenav :where(nav,ul,.tds-sidenav-section){
829
- display:flex;
730
+ @supports (color: light-dark(#fff, #000)){
731
+ .tds-page-header{
732
+ --tds-page-header-nav-background-start:light-dark(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0));
733
+ --tds-page-header-nav-background-end:light-dark(rgba(0, 0, 0, .05), rgba(255, 255, 255, .1));
734
+ }
830
735
  }
831
736
 
832
- .tds-sidenav :where(nav,ul,.tds-sidenav-section,.tds-sidenav-collapse){
833
- flex-direction:column;
834
- gap:var(--t-spacing-half);
835
- width:100%;
737
+ @media (min-width: 600px){
738
+ .tds-page-header{
739
+ --tds-page-header-background-color:var(--t-surface-color-canvas);
740
+ --tds-page-header-color:var(--t-text-color-secondary);
741
+ --tds-page-header-bottom-border-color:var(--t-border-color);
742
+ --tds-page-header-padding-x:var(--t-spacing-3);
743
+ --tds-page-header-headline-font-size:var(--t-font-size-3xl);
744
+ --tds-page-header-nav-gap:var(--t-spacing-half);
745
+ --tds-page-header-nav-background:transparent;
746
+ --tds-page-header-nav-item-padding-x:var(--t-spacing-2);
747
+ --tds-page-header-nav-item-border-width:1px;
748
+ --tds-page-header-nav-item-color:var(--t-text-color);
749
+ --tds-page-header-nav-item-background-color:var(--t-fill-color-neutral-070);
750
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-bottom-border-color);
751
+ --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-060);
752
+ --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-050);
753
+ --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
754
+ --tds-page-header-nav-item-border-color-selected:var(--t-border-color);
755
+ }
836
756
  }
837
-
838
- .tds-sidenav-section-list{
839
- width:100%;
840
- padding:0;
841
- margin:0;
842
- list-style:none;
843
757
  }
844
758
 
845
- .tds-sidenav-section-header{
759
+ .tds-page-header{
846
760
  display:flex;
847
- align-items:baseline;
848
- justify-content:space-between;
849
- padding-top:var(--t-spacing-2);
761
+ flex-direction:column;
762
+ padding-top:var(--tds-page-header-padding-y);
763
+ color:var(--tds-page-header-color);
764
+ background:var(--tds-page-header-background-color);
765
+ border-bottom:1px solid var(--tds-page-header-bottom-border-color);
850
766
  }
851
767
 
852
- .tds-sidenav-section-header h2{
853
- margin:0;
854
- font-size:var(--t-font-size-sm);
855
- font-weight:var(--t-font-weight-semibold);
856
- line-height:1.35;
857
- color:var(--t-text-color-secondary);
858
- text-transform:uppercase;
768
+ .tds-page-header:not(.has-nav){
769
+ padding-bottom:var(--tds-page-header-padding-y);
859
770
  }
860
771
 
861
- .tds-sidenav-section:first-of-type .tds-sidenav-section-header{
862
- padding-top:0;
772
+ .tds-page-header.inactive{
773
+ background:var(--tds-page-header-background-color-inactive);
863
774
  }
864
775
 
865
- .tds-sidenav-section-header [slot="label-actions"]{
866
- display:flex;
867
- gap:var(--t-spacing-half);
868
- align-items:center;
776
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
777
+ width:100%;
869
778
  }
870
779
 
871
- .tds-sidenav-section [slot="section-actions"]{
872
- display:flex;
873
- gap:12px;
874
- align-items:center;
875
- min-height:42px;
876
- padding:var(--t-spacing-1) 0;
877
- }
780
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
781
+ display:flex;
782
+ flex-flow:row wrap;
783
+ gap:var(--t-spacing-half) var(--t-spacing-1);
784
+ align-items:flex-start;
785
+ justify-content:flex-start;
786
+ min-width:0;
787
+ }
788
+
789
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)):not(:has(ul)),:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) ul{
790
+ display:flex;
791
+ gap:var(--tds-page-header-nav-gap);
792
+ padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
793
+ margin:0 0 -1px;
794
+ overflow:auto;
795
+ list-style:none;
796
+ background:var(--tds-page-header-nav-background);
797
+ }
798
+
799
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button){
800
+ position:relative;
801
+ display:inline-flex;
802
+ padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
803
+ font-size:var(--t-font-size-sm);
804
+ line-height:22px;
805
+ color:var(--tds-page-header-nav-item-color);
806
+ white-space:nowrap;
807
+ text-decoration:none;
808
+ -webkit-appearance:none;
809
+ -moz-appearance:none;
810
+ appearance:none;
811
+ cursor:pointer;
812
+ outline-offset:-2px;
813
+ background-color:var(--tds-page-header-nav-item-background-color);
814
+ background-clip:padding-box;
815
+ border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
816
+ border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
817
+ border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
818
+ }
819
+
820
+ .selected:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)){
821
+ --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-selected);
822
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-selected);
823
+ --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-selected);
824
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-selected);
825
+ }
826
+
827
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):hover{
828
+ --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
829
+ --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
830
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
831
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-hover);
832
+ }
833
+
834
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):active{
835
+ background-color:var(--tds-page-header-nav-item-background-color-active);
836
+ border-color:var(--tds-page-header-nav-item-border-color-active);
837
+ border-bottom-color:var(--tds-page-header-nav-item-background-color-active);
838
+ }
839
+
840
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):disabled{
841
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-disabled);
842
+ color:var(--tds-page-header-nav-item-color-disabled);
843
+ cursor:not-allowed;
844
+ background-color:var(--tds-page-header-nav-item-background-color-disabled);
845
+ opacity:1;
846
+ }
847
+
848
+ @media (min-width: 600px){
849
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected)::after{
850
+ position:absolute;
851
+ inset:auto -1px -1px;
852
+ height:1px;
853
+ pointer-events:none;
854
+ content:"";
855
+ background-color:var(--tds-page-header-bottom-border-color);
856
+ }
857
+ }
858
+
859
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
860
+ position:relative;
861
+ }
862
+
863
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator)) :is(a,button){
864
+ -webkit-mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
865
+ mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
866
+ }
867
+
868
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::before,:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
869
+ position:absolute;
870
+ top:-5px;
871
+ right:-2px;
872
+ width:10px;
873
+ height:10px;
874
+ content:"";
875
+ background:var(--tds-page-header-nav-item-indicator-color);
876
+ border-radius:50%;
877
+ }
878
+
879
+ @media (prefers-reduced-motion: no-preference){
880
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
881
+ animation:indicator-pulse 1.25s ease infinite;
882
+ }
883
+ }
884
+
885
+ .tds-page-header__title-bar{
886
+ display:flex;
887
+ flex-direction:column;
888
+ gap:var(--t-spacing-2) var(--t-spacing-1);
889
+ align-items:flex-start;
890
+ justify-content:space-between;
891
+ padding:0 var(--tds-page-header-padding-x);
892
+ }
893
+
894
+ .tds-page-header--profile > .tds-page-header__title-bar{
895
+ align-items:center;
896
+ }
897
+
898
+ .tds-page-header__primary{
899
+ width:100%;
900
+ }
901
+
902
+ .tds-page-header__primary h1{
903
+ margin:0;
904
+ font-size:var(--tds-page-header-headline-font-size);
905
+ font-weight:var(--t-font-weight-normal);
906
+ line-height:32px;
907
+ color:var(--tds-page-header-headline-color);
908
+ overflow-wrap:break-word;
909
+ }
910
+
911
+ @media (min-width: 960px){
912
+ .tds-page-header__primary{
913
+ flex:1 1 max-content;
914
+ width:auto;
915
+ min-width:0;
916
+ max-width:100%;
917
+ }
918
+
919
+ .tds-page-header__title-bar,
920
+ .tds-page-header--profile .tds-page-header__title-bar{
921
+ flex-flow:row nowrap;
922
+ row-gap:12px;
923
+ align-items:flex-start;
924
+ }
925
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
926
+ width:auto;
927
+ }
928
+
929
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
930
+ justify-content:flex-end;
931
+ }
932
+ }
933
+
934
+ .tds-page-header-phone,
935
+ .tds-page-header-email{
936
+ color:var(--tds-page-header-color);
937
+ white-space:nowrap;
938
+ }
939
+ .tds-page-header-email{
940
+ max-width:100%;
941
+ overflow:hidden;
942
+ text-overflow:ellipsis;
943
+ }
944
+
945
+ @keyframes indicator-pulse{
946
+ 0%{
947
+ opacity:.3;
948
+ transform:scale(.9);
949
+ }
950
+
951
+ 100%{
952
+ opacity:0;
953
+ transform:scale(1.75);
954
+ }
955
+ }
956
+
957
+ .tds-button-group{
958
+ display:inline-flex;
959
+ }
960
+ .tds-button-group > .tds-btn{
961
+ --tds-button-group-item-z-index:1;
962
+
963
+ position:relative;
964
+ z-index:var(--tds-button-group-item-z-index);
965
+ border-radius:0;
966
+ }
967
+ :is(.tds-button-group > .tds-btn):not(:first-child){
968
+ margin-inline-start:calc(var(--tds-btn-border-width) * -1);
969
+ }
970
+ :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:first-child)::before,:is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:last-child)::after{
971
+ position:absolute;
972
+ inset-block:calc(var(--tds-btn-border-width) * -1);
973
+ width:var(--tds-btn-border-width);
974
+ pointer-events:none;
975
+ content:"";
976
+ background-color:var(--t-border-color-white);
977
+ }
978
+ :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:first-child)::before{
979
+ inset-inline-start:calc(var(--tds-btn-border-width) * -1);
980
+ }
981
+ :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:last-child)::after{
982
+ inset-inline-end:calc(var(--tds-btn-border-width) * -1);
983
+ }
984
+ :is(.tds-button-group > .tds-btn):hover{
985
+ --tds-button-group-item-z-index:2;
986
+ }
987
+ :is(.tds-button-group > .tds-btn):focus-visible{
988
+ --tds-button-group-item-z-index:5;
989
+ }
990
+ .tds-button-group > .tds-btn:first-child{
991
+ border-start-start-radius:var(--tds-btn-border-radius);
992
+ border-end-start-radius:var(--tds-btn-border-radius);
993
+ }
994
+ .tds-button-group > .tds-btn:last-child{
995
+ border-start-end-radius:var(--tds-btn-border-radius);
996
+ border-end-end-radius:var(--tds-btn-border-radius);
997
+ }
998
+
999
+
1000
+ @media (prefers-reduced-motion: no-preference){
1001
+
1002
+ :root{
1003
+ interpolate-size:allow-keywords;
1004
+ }
1005
+ }
1006
+
1007
+ @layer tds-component{
1008
+ tds-sidenav,
1009
+ .tds-sidenav{
1010
+ --tds-sidenav-indent:12px;
1011
+ --tds-sidenav-item-depth:0;
1012
+
1013
+ --tds-sidenav-item-transition:background-color var(--t-duration-200) var(--t-ease-in-out);
1014
+
1015
+ --tds-sidenav-collapse-transition-enter:opacity var(--t-duration-300) var(--t-ease-out), transform var(--t-duration-300) var(--t-ease-out), display var(--t-duration-300) allow-discrete, overlay var(--t-duration-300) allow-discrete;
1016
+ --tds-sidenav-collapse-transition-exit:opacity var(--t-duration-200) var(--t-ease-in), display var(--t-duration-200) allow-discrete, overlay var(--t-duration-200) allow-discrete;
1017
+ --tds-sidenav-collapse-closed-opacity:0;
1018
+ --tds-sidenav-collapse-open-opacity:1;
1019
+ --tds-sidenav-collapse-closed-transform:translateY(-8px);
1020
+ --tds-sidenav-collapse-open-transform:translateY(0);
1021
+
1022
+ --tds-sidenav-item-icon-size:var(--t-element-size-md);
1023
+ --tds-sidenav-item-background-hover:var(--t-fill-color-button-interaction-ghost-hover);
1024
+ --tds-sidenav-item-background-active:var(--t-fill-color-button-interaction-ghost-active);
1025
+ --tds-sidenav-item-background-selected:var(--t-fill-color-button-interaction-ghost-active);
1026
+
1027
+ --tds-sidenav-item-nested-background-hover:var(--tds-sidenav-item-background-hover);
1028
+ --tds-sidenav-item-nested-background-active:var(--tds-sidenav-item-background-hover);
1029
+ --tds-sidenav-item-nested-background-selected:transparent;
1030
+
1031
+ --tds-sidenav-item-nested-border-color:var(--t-fill-color-neutral-050);
1032
+ --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
1033
+ --tds-sidenav-item-nested-border-color-selected:var(--t-border-color-status-info);
1034
+
1035
+ --tds-sidenav-item-icon-color:var(--t-icon-color-secondary);
1036
+ --tds-sidenav-item-icon-color-selected:var(--t-icon-color);
1037
+ }
1038
+
1039
+ @media (prefers-reduced-motion: reduce){
1040
+ tds-sidenav,
1041
+ .tds-sidenav{
1042
+ --tds-sidenav-collapse-transition-enter:none;
1043
+ --tds-sidenav-collapse-transition-exit:none;
1044
+ --tds-sidenav-collapse-closed-transform:none;
1045
+ --tds-sidenav-collapse-open-transform:none;
1046
+ }
1047
+ }
1048
+
1049
+ .tds-sidenav--theme-gray{
1050
+ --tds-sidenav-item-background-hover:var(--t-fill-color-neutral-080);
1051
+ --tds-sidenav-item-background-active:var(--t-fill-color-neutral-070);
1052
+ --tds-sidenav-item-background-selected:var(--t-fill-color-neutral-050);
1053
+ --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
1054
+ --tds-sidenav-item-nested-border-color-selected:var(--t-fill-color-neutral-010);
1055
+ }
1056
+ }
1057
+
1058
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section){
1059
+ display:flex;
1060
+ }
1061
+
1062
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section,.tds-sidenav-collapse){
1063
+ flex-direction:column;
1064
+ gap:var(--t-spacing-half);
1065
+ width:100%;
1066
+ }
1067
+
1068
+ .tds-sidenav-section-list{
1069
+ width:100%;
1070
+ padding:0;
1071
+ margin:0;
1072
+ list-style:none;
1073
+ }
1074
+
1075
+ .tds-sidenav-section-header{
1076
+ display:flex;
1077
+ align-items:baseline;
1078
+ justify-content:space-between;
1079
+ padding-top:var(--t-spacing-2);
1080
+ }
1081
+
1082
+ .tds-sidenav-section-header h2{
1083
+ margin:0;
1084
+ font-size:var(--t-font-size-sm);
1085
+ font-weight:var(--t-font-weight-semibold);
1086
+ line-height:1.35;
1087
+ color:var(--t-text-color-secondary);
1088
+ text-transform:uppercase;
1089
+ }
1090
+
1091
+ .tds-sidenav-section:first-of-type .tds-sidenav-section-header{
1092
+ padding-top:0;
1093
+ }
1094
+
1095
+ .tds-sidenav-section-header [slot="label-actions"]{
1096
+ display:flex;
1097
+ gap:var(--t-spacing-half);
1098
+ align-items:center;
1099
+ }
1100
+
1101
+ .tds-sidenav-section [slot="section-actions"]{
1102
+ display:flex;
1103
+ gap:12px;
1104
+ align-items:center;
1105
+ min-height:42px;
1106
+ padding:var(--t-spacing-1) 0;
1107
+ }
878
1108
 
879
1109
  .tds-sidenav-section-list,
880
1110
  .tds-sidenav-item{
@@ -1128,33 +1358,6 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1128
1358
  flex-direction:column;
1129
1359
  }
1130
1360
 
1131
- .tds-button-group{
1132
- display:inline-flex;
1133
- }
1134
- .tds-button-group > .tds-btn{
1135
- --tds-button-group-item-z-index:1;
1136
-
1137
- z-index:var(--tds-button-group-item-z-index);
1138
- border-radius:0;
1139
- }
1140
- :is(.tds-button-group > .tds-btn):not(:first-child){
1141
- margin-inline-start:calc(var(--tds-btn-border-width) * -1);
1142
- }
1143
- :is(.tds-button-group > .tds-btn):hover{
1144
- --tds-button-group-item-z-index:2;
1145
- }
1146
- :is(.tds-button-group > .tds-btn):focus-visible{
1147
- --tds-button-group-item-z-index:5;
1148
- }
1149
- .tds-button-group > .tds-btn:first-child{
1150
- border-start-start-radius:var(--tds-btn-border-radius);
1151
- border-end-start-radius:var(--tds-btn-border-radius);
1152
- }
1153
- .tds-button-group > .tds-btn:last-child{
1154
- border-start-end-radius:var(--tds-btn-border-radius);
1155
- border-end-end-radius:var(--tds-btn-border-radius);
1156
- }
1157
-
1158
1361
  .tds-checkbox{
1159
1362
  --tds-checkbox-font-size:var(--t-font-size-md);
1160
1363
  --tds-checkbox-cursor:pointer;
@@ -1350,74 +1553,11 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1350
1553
  --tds-checkbox-description-line-height:1.3;
1351
1554
  }
1352
1555
 
1353
- .tds-combo-box{
1354
- --tds-combo-box-button-offset:4px;
1355
- }
1356
-
1357
- .tds-combo-box[data-open] .tds-combo-box-button > svg{
1358
- transform:rotate(.5turn);
1359
- }
1360
-
1361
- .tds-combo-box--lg{
1362
- --tds-combo-box-button-offset:5px;
1363
- }
1364
-
1365
- .tds-combo-box-field:has([readonly]) .tds-combo-box-button{
1366
- display:none;
1367
- }
1368
-
1369
- .tds-combo-box-input{
1370
- display:flex;
1371
- flex:1;
1372
- align-items:center;
1373
- padding-block:var(--tds-field-padding-block);
1374
- padding-inline:var(--tds-field-padding-inline);
1375
- font-family:inherit;
1376
- font-size:inherit;
1377
- color:inherit;
1378
- outline:0;
1379
- background:transparent;
1380
- border:0;
1381
- }
1382
-
1383
- .tds-combo-box-input:has( + .tds-combo-box-button){
1384
- padding-inline-end:0;
1385
- }
1386
-
1387
- .tds-combo-box-input::-moz-placeholder{
1388
- color:var(--tds-field-placeholder-color);
1389
- -moz-user-select:none;
1390
- user-select:none;
1391
- }
1392
-
1393
- .tds-combo-box-input::placeholder{
1394
- color:var(--tds-field-placeholder-color);
1395
- -webkit-user-select:none;
1396
- -moz-user-select:none;
1397
- user-select:none;
1398
- }
1399
-
1400
- .tds-combo-box-button{
1401
- flex-shrink:0;
1402
- align-self:center;
1403
- inline-size:calc(var(--tds-field-min-height) - (var(--tds-combo-box-button-offset) * 2));
1404
- block-size:calc(var(--tds-field-min-height) - (var(--tds-combo-box-button-offset) * 2));
1405
- padding:0;
1406
- margin-inline-end:var(--tds-combo-box-button-offset);
1407
- }
1408
-
1409
- .tds-combo-box-button > svg{
1410
- inline-size:var(--tds-field-font-size);
1411
- block-size:var(--tds-field-font-size);
1412
- transition:transform var(--t-duration-300) var(--t-ease-in-out);
1413
- }
1414
-
1415
- .tds-combo-box-popover{
1416
- width:var(--trigger-width);
1417
- max-block-size:inherit;
1556
+ .tds-dropdown-popover{
1557
+ min-inline-size:10rem;
1558
+ max-inline-size:24rem;
1418
1559
  padding:var(--t-spacing-1);
1419
1560
  overflow:auto;
1420
- scroll-behavior:smooth;
1421
1561
  overscroll-behavior:none;
1422
1562
  -webkit-user-select:none;
1423
1563
  -moz-user-select:none;
@@ -1431,20 +1571,17 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1431
1571
  border-radius:var(--t-border-radius);
1432
1572
  box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
1433
1573
  }
1434
-
1435
- .tds-combo-box-popover[data-entering]{
1436
- animation:tds-combo-box-popover var(--t-duration-300) var(--t-ease-out);
1574
+ .tds-dropdown-popover[data-entering]{
1575
+ animation:tds-dropdown-popover var(--t-duration-300) var(--t-ease-out);
1437
1576
  }
1438
-
1439
- .tds-combo-box-popover[data-exiting]{
1440
- animation:tds-combo-box-popover var(--t-duration-200) var(--t-ease-in) reverse;
1577
+ .tds-dropdown-popover[data-exiting]{
1578
+ animation:tds-dropdown-popover var(--t-duration-200) var(--t-ease-in) reverse;
1441
1579
  }
1442
-
1443
- .tds-combo-box-popover[data-entering],.tds-combo-box-popover[data-exiting]{
1580
+ .tds-dropdown-popover[data-entering],.tds-dropdown-popover[data-exiting]{
1444
1581
  will-change:opacity, transform;
1445
1582
  }
1446
1583
 
1447
- @keyframes tds-combo-box-popover{
1584
+ @keyframes tds-dropdown-popover{
1448
1585
  from{
1449
1586
  opacity:0;
1450
1587
  transform:translateY(-8px);
@@ -1452,85 +1589,116 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1452
1589
  }
1453
1590
 
1454
1591
  @media (prefers-reduced-motion: reduce){
1455
- .tds-combo-box-popover[data-entering],.tds-combo-box-popover[data-exiting]{
1592
+ .tds-dropdown-popover[data-entering],.tds-dropdown-popover[data-exiting]{
1456
1593
  animation:none;
1457
1594
  }
1458
-
1459
- .tds-combo-box-button > svg{
1460
- transition:none;
1461
- }
1462
1595
  }
1463
1596
 
1464
- .tds-combo-box-list{
1465
- padding:0;
1466
- margin:0;
1597
+ .tds-dropdown-popover [role="menu"]{
1598
+ outline:0;
1467
1599
  }
1600
+ .tds-dropdown-item{
1601
+ --tds-dropdown-item-color:var(--t-text-color);
1602
+ --tds-dropdown-item-row-gap:0;
1603
+ --tds-dropdown-item-column-gap:var(--t-spacing-1);
1468
1604
 
1469
- .tds-combo-box-list-item{
1470
- display:block;
1605
+ display:flex;
1606
+ row-gap:var(--tds-dropdown-item-row-gap);
1607
+ -moz-column-gap:var(--tds-dropdown-item-column-gap);
1608
+ column-gap:var(--tds-dropdown-item-column-gap);
1609
+ align-items:center;
1471
1610
  padding-block:var(--t-spacing-1);
1472
- padding-inline:var(--t-spacing-2) var(--t-spacing-1);
1473
- overflow:hidden;
1474
- text-overflow:ellipsis;
1611
+ padding-inline:var(--t-spacing-1-half);
1475
1612
  font-size:1rem;
1476
- color:var(--t-text-color);
1477
- white-space:nowrap;
1613
+ color:var(--tds-dropdown-item-color);
1614
+ text-decoration:none;
1478
1615
  cursor:default;
1616
+ outline:0;
1479
1617
  border-radius:var(--t-border-radius);
1480
1618
  }
1481
-
1482
- .tds-combo-box-list-item[data-hovered]:not([data-disabled]),.tds-combo-box-list-item[data-focus-visible]{
1619
+ .tds-dropdown-item[data-hovered]:not([data-disabled]),.tds-dropdown-item[data-focus-visible]{
1483
1620
  background:var(--t-fill-color-neutral-070);
1484
1621
  }
1485
-
1486
- .tds-combo-box-list-item[data-selected]{
1487
- background:var(--t-fill-color-button-interaction-ghost-active);
1488
- }
1489
-
1490
- .tds-combo-box-list-item[data-pressed]:not([data-disabled]){
1622
+ .tds-dropdown-item[data-pressed]:not([data-disabled]){
1491
1623
  background:var(--t-fill-color-neutral-060);
1492
1624
  }
1625
+ .tds-dropdown-item[data-disabled]{
1626
+ --tds-dropdown-item-color:var(--t-form-color-disabled);
1493
1627
 
1494
- .tds-combo-box-list-item[data-disabled]{
1495
- color:var(--t-form-color-disabled);
1496
1628
  cursor:not-allowed;
1497
1629
  }
1498
1630
 
1499
- .tds-combo-box-list-item[data-disabled][data-hovered]{
1500
- background:transparent;
1501
- }
1631
+ .tds-dropdown-item--destructive{
1632
+ --tds-dropdown-item-color:var(--t-text-color-status-error);
1633
+ }
1502
1634
 
1503
- .tds-combo-box-empty-state{
1504
- position:relative;
1505
- min-block-size:var(--t-spacing-3);
1506
- padding-block:var(--t-spacing-1);
1507
- padding-inline:var(--t-spacing-2);
1508
- font-size:var(--t-font-size-md);
1635
+ .tds-dropdown-item--staff-only{
1636
+ --tds-dropdown-item-color:var(--t-fill-color-product-staff);
1637
+ }
1638
+ a.tds-dropdown-item:is(:hover, :active){
1639
+ color:var(--tds-dropdown-item-color);
1640
+ }
1641
+ .tds-dropdown-item [slot="prefix"],
1642
+ .tds-dropdown-item [slot="suffix"]{
1643
+ flex-shrink:0;
1644
+ }
1645
+
1646
+ .tds-dropdown-item [slot="label"]{
1647
+ flex:1;
1648
+ min-width:0;
1649
+ overflow:hidden;
1650
+ text-overflow:ellipsis;
1651
+ white-space:nowrap;
1652
+ }
1653
+
1654
+ .tds-dropdown-item [slot="description"]{
1655
+ font-size:var(--t-font-size-sm);
1509
1656
  color:var(--t-text-color-secondary);
1510
1657
  }
1511
1658
 
1512
- .tds-combo-box-load-more{
1513
- position:relative;
1514
- min-block-size:calc(var(--t-spacing-3) + var(--t-spacing-1));
1659
+ .tds-dropdown-item:has([slot="description"]){
1660
+ --tds-dropdown-item-row-gap:var(--t-spacing-half);
1661
+ --tds-dropdown-item-column-gap:0;
1662
+
1663
+ display:grid;
1664
+ grid-template-areas:"prefix label suffix" ". description .";
1665
+ grid-template-columns:auto 1fr auto;
1515
1666
  }
1516
1667
 
1517
- .tds-combo-box-empty-state,
1518
- .tds-combo-box-load-more{
1519
- --tds-loading-spinner-visibility:visible;
1520
- --tds-loading-spinner-animation-play-state:running;
1668
+ .tds-dropdown-item:has([slot="description"]) [slot="prefix"]{
1669
+ grid-area:prefix;
1670
+ margin-inline-end:var(--t-spacing-1);
1521
1671
  }
1522
1672
 
1523
- .tds-combo-box-list-section:not(:first-child){
1524
- margin-block-start:var(--t-spacing-half);
1525
- }
1673
+ .tds-dropdown-item:has([slot="description"]) [slot="label"]{
1674
+ grid-area:label;
1675
+ }
1526
1676
 
1527
- .tds-combo-box-section-header{
1677
+ .tds-dropdown-item:has([slot="description"]) [slot="description"]{
1678
+ grid-area:description;
1679
+ }
1680
+
1681
+ .tds-dropdown-item:has([slot="description"]) [slot="suffix"]{
1682
+ grid-area:suffix;
1683
+ margin-inline-start:var(--t-spacing-1);
1684
+ }
1685
+ .tds-dropdown-section:not(:first-child){
1686
+ margin-block-start:var(--t-spacing-half);
1687
+ }
1688
+
1689
+ .tds-dropdown-section-label{
1528
1690
  padding-block:var(--t-spacing-1);
1529
- padding-inline:var(--t-spacing-1);
1691
+ padding-inline:var(--t-spacing-half);
1530
1692
  font-size:var(--t-font-size-sm);
1531
1693
  font-weight:var(--t-font-weight-semibold);
1532
1694
  color:var(--t-text-color-secondary);
1533
1695
  }
1696
+ .tds-dropdown-separator{
1697
+ margin-block:var(--t-spacing-half);
1698
+ margin-inline:0;
1699
+ border:0;
1700
+ border-top:1px solid var(--t-border-color);
1701
+ }
1534
1702
 
1535
1703
  .tds-checkbox-group{
1536
1704
  --tds-checkbox-group-font-size:var(--t-font-size-md);
@@ -1606,30 +1774,6 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1606
1774
  --tds-checkbox-group-description-line-height:1.3;
1607
1775
  }
1608
1776
 
1609
-
1610
- :is(.tds-input input)::-webkit-search-decoration,:is(.tds-input input)::-webkit-search-cancel-button,:is(.tds-input input)::-webkit-search-results-button,:is(.tds-input input)::-webkit-search-results-decoration{
1611
- -webkit-appearance:none;
1612
- appearance:none;
1613
- }
1614
-
1615
- [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
1616
- inline-size:1em;
1617
- block-size:2em;
1618
- }
1619
-
1620
- @supports (field-sizing: content){
1621
- .tds-input--auto-width{
1622
- inline-size:-moz-fit-content;
1623
- inline-size:fit-content;
1624
- min-inline-size:min(100%, 122px);
1625
- }
1626
-
1627
- .tds-input--auto-width input{
1628
- field-sizing:content;
1629
- inline-size:auto;
1630
- }
1631
- }
1632
-
1633
1777
  .tds-modal-overlay{
1634
1778
  position:fixed;
1635
1779
  inset:0;
@@ -1774,6 +1918,29 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1774
1918
  margin-inline-end:auto;
1775
1919
  }
1776
1920
 
1921
+
1922
+ :is(.tds-input input)::-webkit-search-decoration,:is(.tds-input input)::-webkit-search-cancel-button,:is(.tds-input input)::-webkit-search-results-button,:is(.tds-input input)::-webkit-search-results-decoration{
1923
+ -webkit-appearance:none;
1924
+ appearance:none;
1925
+ }
1926
+
1927
+ [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
1928
+ inline-size:1em;
1929
+ block-size:2em;
1930
+ }
1931
+ @supports (field-sizing: content){
1932
+ .tds-input--auto-width{
1933
+ inline-size:-moz-fit-content;
1934
+ inline-size:fit-content;
1935
+ min-inline-size:min(100%, 122px);
1936
+ }
1937
+
1938
+ .tds-input--auto-width input{
1939
+ field-sizing:content;
1940
+ inline-size:auto;
1941
+ }
1942
+ }
1943
+
1777
1944
  .tds-radio{
1778
1945
  --tds-radio-font-size:var(--t-font-size-md);
1779
1946
  --tds-radio-cursor:pointer;
@@ -1899,12 +2066,224 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1899
2066
  cursor:text;
1900
2067
  }
1901
2068
 
1902
- .tds-radio--sm{
1903
- --tds-radio-line-height:1.35;
1904
- --tds-radio-input-size:var(--t-element-size-sm);
1905
- --tds-radio-font-size:var(--t-font-size-sm);
1906
- --tds-radio-description-font-size:var(--t-font-size-xs);
1907
- --tds-radio-description-line-height:1.3;
2069
+ .tds-radio--sm{
2070
+ --tds-radio-line-height:1.35;
2071
+ --tds-radio-input-size:var(--t-element-size-sm);
2072
+ --tds-radio-font-size:var(--t-font-size-sm);
2073
+ --tds-radio-description-font-size:var(--t-font-size-xs);
2074
+ --tds-radio-description-line-height:1.3;
2075
+ }
2076
+
2077
+ .tds-radio-group{
2078
+ --tds-radio-group-font-size:var(--t-font-size-md);
2079
+ --tds-radio-group-line-height:1.4;
2080
+ --tds-radio-group-gap:var(--t-spacing-1);
2081
+
2082
+ --tds-radio-group-description-font-size:var(--t-font-size-sm);
2083
+ --tds-radio-group-description-line-height:1.35;
2084
+ --tds-radio-group-description-color:var(--t-text-color-secondary);
2085
+ --tds-radio-group-description-invalid-icon-display:none;
2086
+ display:flex;
2087
+ flex-direction:column;
2088
+ gap:0;
2089
+ padding:0;
2090
+ margin:0;
2091
+
2092
+ font-size:var(--tds-radio-group-font-size);
2093
+ line-height:var(--tds-radio-group-line-height);
2094
+ border:0;
2095
+ }
2096
+
2097
+ .tds-radio-group legend{
2098
+ float:left;
2099
+ padding:0;
2100
+ margin:0;
2101
+ }
2102
+
2103
+ .tds-radio-group[aria-invalid="true"]{
2104
+ --tds-radio-group-description-color:var(--t-text-color-status-error);
2105
+ --tds-radio-group-description-invalid-icon-display:inline-block;
2106
+ }
2107
+
2108
+ .tds-radio-group[aria-invalid="true"] .tds-radio{
2109
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
2110
+ }
2111
+
2112
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
2113
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
2114
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
2115
+ }
2116
+
2117
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
2118
+ --tds-radio-input-background-color:var(--t-icon-color-inverted);
2119
+ }
2120
+
2121
+ .tds-radio-group:has(input:required) legend::after{
2122
+ margin-left:.25ch;
2123
+ color:var(--t-text-color-status-error);
2124
+ content:"*";
2125
+ }
2126
+
2127
+ .tds-radio-group-fields{
2128
+ display:flex;
2129
+ flex-direction:column;
2130
+ gap:var(--tds-radio-group-gap);
2131
+ align-items:flex-start;
2132
+ margin-top:var(--t-spacing-1);
2133
+ }
2134
+
2135
+ .tds-radio-group-description{
2136
+ display:flex;
2137
+ gap:var(--t-spacing-half);
2138
+ align-items:flex-start;
2139
+ margin:var(--t-spacing-fourth) 0 0;
2140
+ font-size:var(--tds-radio-group-description-font-size);
2141
+ line-height:var(--tds-radio-group-description-line-height);
2142
+ color:var(--tds-radio-group-description-color);
2143
+ cursor:text;
2144
+ }
2145
+
2146
+ .tds-radio-group-description .tds-radio-group-description-invalid-icon{
2147
+ display:var(--tds-radio-group-description-invalid-icon-display);
2148
+ flex-shrink:0;
2149
+ margin-top:calc(.5lh - .5em);
2150
+ line-height:var(--tds-radio-group-description-line-height);
2151
+ }
2152
+
2153
+ .tds-radio-group--sm{
2154
+ --tds-radio-group-line-height:1.35;
2155
+ --tds-radio-group-font-size:var(--t-font-size-sm);
2156
+ --tds-radio-group-description-font-size:var(--t-font-size-xs);
2157
+ --tds-radio-group-description-line-height:1.3;
2158
+ }
2159
+
2160
+ .tds-search-input-control{
2161
+ --tds-search-input-outline-color:rgb(from var(--t-focus-ring-color) r g b / 0);
2162
+ --tds-search-input-outline-offset:0;
2163
+ --tds-search-input-cursor:text;
2164
+
2165
+ display:flex;
2166
+ gap:var(--tds-field-padding-inline);
2167
+ align-items:center;
2168
+ inline-size:100%;
2169
+ min-block-size:var(--tds-field-min-height);
2170
+ padding-inline:var(--tds-field-padding-inline);
2171
+ font-size:var(--tds-field-font-size);
2172
+ color:var(--tds-field-color);
2173
+ cursor:var(--tds-search-input-cursor);
2174
+ outline:var(--t-focus-ring-width) solid transparent;
2175
+ outline-color:var(--tds-search-input-outline-color);
2176
+ outline-offset:var(--tds-search-input-outline-offset);
2177
+ background-color:var(--tds-field-background-color);
2178
+ border:var(--t-form-border-width) solid var(--tds-field-border-color);
2179
+ border-radius:var(--t-form-border-radius);
2180
+ transition-timing-function:var(--t-ease-in-out);
2181
+ transition-duration:var(--t-duration-200);
2182
+ transition-property:background-color, border-color, outline-color, outline-offset;
2183
+ }
2184
+
2185
+ .tds-search-input-control:hover:not(:has(input:focus),:has(:disabled,[readonly])){
2186
+ border-color:var(--tds-field-border-color-hover);
2187
+ }
2188
+
2189
+ .tds-search-input-control:has(input:focus){
2190
+ --tds-search-input-outline-color:var(--t-focus-ring-color);
2191
+ --tds-search-input-outline-offset:var(--t-focus-ring-offset);
2192
+
2193
+ border-color:var(--t-form-border-color-focus);
2194
+ }
2195
+
2196
+ .tds-search-input-control input{
2197
+ flex:1;
2198
+ min-inline-size:0;
2199
+ padding:0;
2200
+ overflow:hidden;
2201
+ text-overflow:ellipsis;
2202
+ font-family:inherit;
2203
+ font-size:inherit;
2204
+ color:inherit;
2205
+ white-space:nowrap;
2206
+ -webkit-appearance:none;
2207
+ -moz-appearance:none;
2208
+ appearance:none;
2209
+ outline:0;
2210
+ background-color:transparent;
2211
+ border:0;
2212
+ }
2213
+
2214
+ :is(.tds-search-input-control input)::-moz-placeholder{
2215
+ color:var(--tds-field-placeholder-color);
2216
+ -moz-user-select:none;
2217
+ user-select:none;
2218
+ }
2219
+
2220
+ :is(.tds-search-input-control input)::placeholder{
2221
+ color:var(--tds-field-placeholder-color);
2222
+ -webkit-user-select:none;
2223
+ -moz-user-select:none;
2224
+ user-select:none;
2225
+ }
2226
+
2227
+ :is(.tds-search-input-control input)::-webkit-search-decoration,:is(.tds-search-input-control input)::-webkit-search-cancel-button,:is(.tds-search-input-control input)::-webkit-search-results-button,:is(.tds-search-input-control input)::-webkit-search-results-decoration{
2228
+ -webkit-appearance:none;
2229
+ appearance:none;
2230
+ }
2231
+
2232
+ .tds-search-input-control .tds-search-input-icon{
2233
+ flex-shrink:0;
2234
+ inline-size:1em;
2235
+ color:var(--t-icon-color-dim);
2236
+ }
2237
+
2238
+ .tds-search-input-control .tds-search-input-clear-icon{
2239
+ inline-size:calc(var(--tds-field-font-size) * .8);
2240
+ block-size:calc(var(--tds-field-font-size) * .8);
2241
+ }
2242
+
2243
+ .tds-search-input-control .tds-btn{
2244
+ --tds-btn-color:var(--t-icon-color-dim);
2245
+ --tds-btn-padding-truncated-x:0;
2246
+ --tds-search-input-clear-button-visibility:hidden;
2247
+
2248
+ visibility:var(--tds-search-input-clear-button-visibility);
2249
+ flex-shrink:0;
2250
+ }
2251
+
2252
+ .tds-search-input-control:has(input:is(:user-invalid,[aria-invalid="true"])){
2253
+ --tds-field-background-color:var(--t-form-background-color-error);
2254
+ --tds-field-border-color:var(--t-form-border-color-error);
2255
+ --tds-field-border-color-hover:var(--t-form-border-color-error-hover);
2256
+ }
2257
+
2258
+ .tds-search-input-control:has(:disabled){
2259
+ --tds-field-border-color:var(--t-form-border-color-disabled);
2260
+ --tds-field-background-color:var(--t-form-background-color-disabled);
2261
+ --tds-field-color:var(--t-form-color-disabled);
2262
+ --tds-search-input-cursor:not-allowed;
2263
+ }
2264
+
2265
+ .tds-search-input-control:has([readonly]){
2266
+ --tds-field-border-color:var(--t-form-border-color-readonly);
2267
+ --tds-field-border-color-hover:var(--t-form-border-color-readonly);
2268
+ --tds-field-background-color:var(--t-form-background-color-readonly);
2269
+ --tds-field-color:var(--t-form-color-readonly);
2270
+ }
2271
+
2272
+ .tds-search-input-control:has([readonly]):has(input:focus){
2273
+ border-color:var(--t-form-border-color-hover);
2274
+ }
2275
+
2276
+ @media (prefers-reduced-motion: reduce){
2277
+
2278
+ .tds-search-input-control{
2279
+ transition-property:none;
2280
+ }
2281
+ }
2282
+
2283
+ .tds-search-input-control--has-value:is(:hover, :has(input:focus)):not(
2284
+ :has(:disabled, [readonly])
2285
+ ) .tds-btn{
2286
+ --tds-search-input-clear-button-visibility:visible;
1908
2287
  }
1909
2288
 
1910
2289
  .tds-input:has(textarea){
@@ -2152,250 +2531,6 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
2152
2531
  --tds-toggle-switch-display:inline-flex;
2153
2532
  }
2154
2533
 
2155
- .tds-dropdown-popover{
2156
- min-inline-size:10rem;
2157
- max-inline-size:24rem;
2158
- padding:var(--t-spacing-1);
2159
- overflow:auto;
2160
- overscroll-behavior:none;
2161
- -webkit-user-select:none;
2162
- -moz-user-select:none;
2163
- user-select:none;
2164
- outline:0;
2165
- scrollbar-color:#0004 var(--t-surface-color-card);
2166
- scrollbar-width:thin;
2167
- background:var(--t-surface-color-card);
2168
- background-clip:padding-box;
2169
- border:1px solid var(--t-border-color);
2170
- border-radius:var(--t-border-radius);
2171
- box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
2172
- }
2173
- .tds-dropdown-popover[data-entering]{
2174
- animation:tds-dropdown-popover var(--t-duration-300) var(--t-ease-out);
2175
- }
2176
- .tds-dropdown-popover[data-exiting]{
2177
- animation:tds-dropdown-popover var(--t-duration-200) var(--t-ease-in) reverse;
2178
- }
2179
- .tds-dropdown-popover[data-entering],.tds-dropdown-popover[data-exiting]{
2180
- will-change:opacity, transform;
2181
- }
2182
- @keyframes tds-dropdown-popover{
2183
- from{
2184
- opacity:0;
2185
- transform:translateY(-8px);
2186
- }
2187
- }
2188
- @media (prefers-reduced-motion: reduce){
2189
- .tds-dropdown-popover[data-entering],.tds-dropdown-popover[data-exiting]{
2190
- animation:none;
2191
- }
2192
- }
2193
- .tds-dropdown-popover [role="menu"]{
2194
- outline:0;
2195
- }
2196
- .tds-dropdown-item{
2197
- --tds-dropdown-item-color:var(--t-text-color);
2198
- --tds-dropdown-item-row-gap:0;
2199
- --tds-dropdown-item-column-gap:var(--t-spacing-1);
2200
-
2201
- display:flex;
2202
- row-gap:var(--tds-dropdown-item-row-gap);
2203
- -moz-column-gap:var(--tds-dropdown-item-column-gap);
2204
- column-gap:var(--tds-dropdown-item-column-gap);
2205
- align-items:center;
2206
- padding-block:var(--t-spacing-1);
2207
- padding-inline:var(--t-spacing-2);
2208
- font-size:1rem;
2209
- color:var(--tds-dropdown-item-color);
2210
- text-decoration:none;
2211
- cursor:default;
2212
- outline:0;
2213
- border-radius:var(--t-border-radius);
2214
- }
2215
- .tds-dropdown-item[data-hovered]:not([data-disabled]),.tds-dropdown-item[data-focus-visible]{
2216
- background:var(--t-fill-color-neutral-070);
2217
- }
2218
- .tds-dropdown-item[data-pressed]:not([data-disabled]){
2219
- background:var(--t-fill-color-neutral-060);
2220
- }
2221
- .tds-dropdown-item[data-disabled]{
2222
- --tds-dropdown-item-color:var(--t-form-color-disabled);
2223
-
2224
- cursor:not-allowed;
2225
- }
2226
- .tds-dropdown-item--destructive{
2227
- --tds-dropdown-item-color:var(--t-text-color-status-error);
2228
- }
2229
- .tds-dropdown-item--staff-only{
2230
- --tds-dropdown-item-color:var(--t-fill-color-product-staff);
2231
- }
2232
- a.tds-dropdown-item:is(:hover, :active){
2233
- color:var(--tds-dropdown-item-color);
2234
- }
2235
- .tds-dropdown-item [slot="prefix"],
2236
- .tds-dropdown-item [slot="suffix"]{
2237
- flex-shrink:0;
2238
- }
2239
- .tds-dropdown-item [slot="label"]{
2240
- flex:1;
2241
- min-width:0;
2242
- overflow:hidden;
2243
- text-overflow:ellipsis;
2244
- white-space:nowrap;
2245
- }
2246
- .tds-dropdown-item [slot="description"]{
2247
- font-size:var(--t-font-size-sm);
2248
- color:var(--t-text-color-secondary);
2249
- }
2250
- .tds-dropdown-item:has([slot="description"]){
2251
- --tds-dropdown-item-row-gap:var(--t-spacing-half);
2252
- --tds-dropdown-item-column-gap:0;
2253
-
2254
- display:grid;
2255
- grid-template-areas:"prefix label suffix" ". description .";
2256
- grid-template-columns:auto 1fr auto;
2257
- }
2258
- .tds-dropdown-item:has([slot="description"]) [slot="prefix"]{
2259
- grid-area:prefix;
2260
- margin-inline-end:var(--t-spacing-1);
2261
- }
2262
- .tds-dropdown-item:has([slot="description"]) [slot="label"]{
2263
- grid-area:label;
2264
- }
2265
- .tds-dropdown-item:has([slot="description"]) [slot="description"]{
2266
- grid-area:description;
2267
- }
2268
- .tds-dropdown-item:has([slot="description"]) [slot="suffix"]{
2269
- grid-area:suffix;
2270
- margin-inline-start:var(--t-spacing-1);
2271
- }
2272
- .tds-dropdown-section:not(:first-child){
2273
- margin-block-start:var(--t-spacing-half);
2274
- }
2275
- .tds-dropdown-section-label{
2276
- padding-block:var(--t-spacing-1);
2277
- padding-inline:var(--t-spacing-1);
2278
- font-size:var(--t-font-size-sm);
2279
- font-weight:var(--t-font-weight-semibold);
2280
- color:var(--t-text-color-secondary);
2281
- }
2282
- .tds-dropdown-separator{
2283
- margin-block:var(--t-spacing-half);
2284
- margin-inline:0;
2285
- border:0;
2286
- border-top:1px solid var(--t-border-color);
2287
- }
2288
-
2289
- .tds-radio-group{
2290
- --tds-radio-group-font-size:var(--t-font-size-md);
2291
- --tds-radio-group-line-height:1.4;
2292
- --tds-radio-group-gap:var(--t-spacing-1);
2293
-
2294
- --tds-radio-group-description-font-size:var(--t-font-size-sm);
2295
- --tds-radio-group-description-line-height:1.35;
2296
- --tds-radio-group-description-color:var(--t-text-color-secondary);
2297
- --tds-radio-group-description-invalid-icon-display:none;
2298
- display:flex;
2299
- flex-direction:column;
2300
- gap:0;
2301
- padding:0;
2302
- margin:0;
2303
-
2304
- font-size:var(--tds-radio-group-font-size);
2305
- line-height:var(--tds-radio-group-line-height);
2306
- border:0;
2307
- }
2308
-
2309
- .tds-radio-group legend{
2310
- float:left;
2311
- padding:0;
2312
- margin:0;
2313
- }
2314
-
2315
- .tds-radio-group[aria-invalid="true"]{
2316
- --tds-radio-group-description-color:var(--t-text-color-status-error);
2317
- --tds-radio-group-description-invalid-icon-display:inline-block;
2318
- }
2319
-
2320
- .tds-radio-group[aria-invalid="true"] .tds-radio{
2321
- --tds-radio-input-border-color:var(--t-form-border-color-error);
2322
- }
2323
-
2324
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
2325
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
2326
- --tds-radio-input-background-color:var(--t-form-background-color-error);
2327
- }
2328
-
2329
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
2330
- --tds-radio-input-background-color:var(--t-icon-color-inverted);
2331
- }
2332
-
2333
- .tds-radio-group:has(input:required) legend::after{
2334
- margin-left:.25ch;
2335
- color:var(--t-text-color-status-error);
2336
- content:"*";
2337
- }
2338
-
2339
- .tds-radio-group-fields{
2340
- display:flex;
2341
- flex-direction:column;
2342
- gap:var(--tds-radio-group-gap);
2343
- align-items:flex-start;
2344
- margin-top:var(--t-spacing-1);
2345
- }
2346
-
2347
- .tds-radio-group-description{
2348
- display:flex;
2349
- gap:var(--t-spacing-half);
2350
- align-items:flex-start;
2351
- margin:var(--t-spacing-fourth) 0 0;
2352
- font-size:var(--tds-radio-group-description-font-size);
2353
- line-height:var(--tds-radio-group-description-line-height);
2354
- color:var(--tds-radio-group-description-color);
2355
- cursor:text;
2356
- }
2357
-
2358
- .tds-radio-group-description .tds-radio-group-description-invalid-icon{
2359
- display:var(--tds-radio-group-description-invalid-icon-display);
2360
- flex-shrink:0;
2361
- margin-top:calc(.5lh - .5em);
2362
- line-height:var(--tds-radio-group-description-line-height);
2363
- }
2364
-
2365
- .tds-radio-group--sm{
2366
- --tds-radio-group-line-height:1.35;
2367
- --tds-radio-group-font-size:var(--t-font-size-sm);
2368
- --tds-radio-group-description-font-size:var(--t-font-size-xs);
2369
- --tds-radio-group-description-line-height:1.3;
2370
- }
2371
-
2372
- .tds-loading-spinner{
2373
- position:absolute;
2374
- right:0;
2375
- left:0;
2376
- visibility:var(--tds-loading-spinner-visibility, hidden);
2377
- width:var(--tds-loading-spinner-size, 1.25em);
2378
- height:var(--tds-loading-spinner-size, 1.25em);
2379
- margin:auto;
2380
- border:var(--tds-loading-spinner-track-width, 4px) solid var(--tds-loading-spinner-track-color, var(--t-fill-color-transparency-dark-020));
2381
- border-top-color:var(--tds-loading-spinner-color, currentcolor);
2382
- border-radius:50%;
2383
- animation:spinner-rotate 500ms infinite linear;
2384
- animation-play-state:var(--tds-loading-spinner-animation-play-state, paused);
2385
- }
2386
-
2387
- @keyframes spinner-rotate{
2388
- to{
2389
- transform:rotate(360deg);
2390
- }
2391
- }
2392
-
2393
- @media (prefers-reduced-motion: reduce){
2394
- [class*="--loading"] .tds-loading-spinner{
2395
- --tds-loading-spinner-animation-play-state:paused;
2396
- }
2397
- }
2398
-
2399
2534
  .tds-input{
2400
2535
  --tds-input-border-color:var(--t-form-border-color);
2401
2536
  --tds-input-border-color-hover:var(--t-form-border-color-hover);
@@ -2458,358 +2593,80 @@ a.tds-dropdown-item:is(:hover, :active){
2458
2593
  }
2459
2594
 
2460
2595
  :is(.tds-input :is(input,textarea))::-moz-placeholder{
2461
- color:var(--t-form-placeholder-color);
2462
- -moz-user-select:none;
2463
- user-select:none;
2464
- }
2465
-
2466
- :is(.tds-input :is(input,textarea))::placeholder{
2467
- color:var(--t-form-placeholder-color);
2468
- -webkit-user-select:none;
2469
- -moz-user-select:none;
2470
- user-select:none;
2471
- }
2472
-
2473
- @media (prefers-reduced-motion: reduce){
2474
-
2475
- .tds-input :is(input,textarea){
2476
- --tds-input-transition-property:none;
2477
- }
2478
- }
2479
-
2480
- .tds-input.tds-input--invalid,.tds-input:has(:is(input,textarea):is(:user-invalid,[aria-invalid="true"])){
2481
- --tds-input-background-color:var(--t-form-background-color-error);
2482
- --tds-input-border-color:var(--t-form-border-color-error);
2483
- --tds-input-border-color-hover:var(--t-form-border-color-error-hover);
2484
- --tds-input-description-color:var(--t-text-color-status-error);
2485
- --tds-input-description-invalid-icon-display:inline-block;
2486
- }
2487
-
2488
- .tds-input:has(:is(input,textarea):required) label::after{
2489
- margin-left:.25ch;
2490
- color:var(--t-text-color-status-error);
2491
- content:"*";
2492
- }
2493
-
2494
- .tds-input:where(:has(:is(input,textarea):disabled)){
2495
- --tds-input-border-color:var(--t-form-border-color-disabled);
2496
- --tds-input-background-color:var(--t-form-background-color-disabled);
2497
- --tds-input-color:var(--t-form-color-disabled);
2498
- }
2499
-
2500
- .tds-input:where(:has(:is(input,textarea):disabled)) :is(input,textarea){
2501
- cursor:not-allowed;
2502
- }
2503
-
2504
- .tds-input:where(:has(:is(input,textarea)[readonly])){
2505
- --tds-input-border-color:var(--t-form-border-color-readonly);
2506
- --tds-input-background-color:var(--t-form-background-color-readonly);
2507
- }
2508
-
2509
- .tds-input:where(:has(:is(input,textarea)[readonly])) :is(input,textarea):focus{
2510
- border-color:var(--tds-input-border-color-hover);
2511
- }
2512
-
2513
- .tds-input.tds-input--lg{
2514
- --tds-input-min-height:var(--t-container-size-lg);
2515
- --tds-input-font-size:var(--t-font-size-lg);
2516
- }
2517
-
2518
- .tds-input-description{
2519
- display:flex;
2520
- gap:var(--t-spacing-half);
2521
- align-items:flex-start;
2522
- margin:0;
2523
- font-size:var(--t-font-size-sm);
2524
- line-height:1.35;
2525
- color:var(--tds-input-description-color, var(--t-text-color-secondary));
2526
- cursor:text;
2527
- }
2528
-
2529
- .tds-input-description .tds-input-description-invalid-icon{
2530
- display:var(--tds-input-description-invalid-icon-display, none);
2531
- flex-shrink:0;
2532
- margin-block-start:calc(.5lh - .5em);
2533
- line-height:1.35;
2534
- }
2535
-
2536
- @layer t-critical{
2537
- tds-page-header:not(.hydrated){
2538
- display:none;
2539
- }
2540
- }
2541
-
2542
- @layer t-component{
2543
- .tds-page-header{
2544
- --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
2545
- --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
2546
- --tds-page-header-color:var(--t-text-color);
2547
- --tds-page-header-bottom-border-color:transparent;
2548
- --tds-page-header-headline-color:var(--t-text-color-headline);
2549
- --tds-page-header-headline-font-size:var(--t-font-size-2xl);
2550
- --tds-page-header-padding-x:var(--t-spacing-2);
2551
- --tds-page-header-padding-y:var(--t-spacing-2);
2552
- --tds-page-header-nav-padding-x:var(--tds-page-header-padding-x, var(--t-spacing-3));
2553
- --tds-page-header-nav-gap:var(--t-spacing-1);
2554
- --tds-page-header-nav-background:linear-gradient(180deg, var(--tds-page-header-nav-background-start, rgba(0, 0, 0, 0)) 0%, var(--tds-page-header-nav-background-end, rgba(0, 0, 0, .1)) 100%);
2555
- --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
2556
- --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
2557
- --tds-page-header-nav-item-color:var(--t-text-color-secondary);
2558
- --tds-page-header-nav-item-background-color:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 35%);
2559
- --tds-page-header-nav-item-border-width:1px;
2560
-
2561
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
2562
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color);
2563
-
2564
- --tds-page-header-nav-item-color-hover:var(--t-text-color);
2565
- --tds-page-header-nav-item-background-color-hover:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 20%);
2566
- --tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
2567
-
2568
- --tds-page-header-nav-item-background-color-active:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 10%);
2569
- --tds-page-header-nav-item-border-color-active:var(--tds-page-header-nav-item-background-color-active);
2570
-
2571
- --tds-page-header-nav-item-color-disabled:var(--t-text-color-disabled);
2572
- --tds-page-header-nav-item-background-color-disabled:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 50%);
2573
- --tds-page-header-nav-item-border-color-disabled:var(--tds-page-header-nav-item-background-color-disabled);
2574
-
2575
- --tds-page-header-nav-item-color-selected:var(--t-text-color);
2576
- --tds-page-header-nav-item-background-color-selected:var(--t-surface-color-canvas);
2577
- --tds-page-header-nav-item-border-color-selected:var(--tds-page-header-nav-item-background-color-selected);
2578
- --tds-page-header-nav-item-border-bottom-color-selected:var(--tds-page-header-nav-item-background-color-selected);
2579
- --tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning);
2580
- }
2581
-
2582
- .tds-page-header--profile{
2583
- --tds-page-header-padding-y:20px;
2584
- }
2585
-
2586
- @supports (color: light-dark(#fff, #000)){
2587
- .tds-page-header{
2588
- --tds-page-header-nav-background-start:light-dark(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0));
2589
- --tds-page-header-nav-background-end:light-dark(rgba(0, 0, 0, .05), rgba(255, 255, 255, .1));
2590
- }
2591
- }
2592
-
2593
- @media (min-width: 600px){
2594
- .tds-page-header{
2595
- --tds-page-header-background-color:var(--t-surface-color-canvas);
2596
- --tds-page-header-color:var(--t-text-color-secondary);
2597
- --tds-page-header-bottom-border-color:var(--t-border-color);
2598
- --tds-page-header-padding-x:var(--t-spacing-3);
2599
- --tds-page-header-headline-font-size:var(--t-font-size-3xl);
2600
- --tds-page-header-nav-gap:var(--t-spacing-half);
2601
- --tds-page-header-nav-background:transparent;
2602
- --tds-page-header-nav-item-padding-x:var(--t-spacing-2);
2603
- --tds-page-header-nav-item-border-width:1px;
2604
- --tds-page-header-nav-item-color:var(--t-text-color);
2605
- --tds-page-header-nav-item-background-color:var(--t-fill-color-neutral-070);
2606
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-bottom-border-color);
2607
- --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-060);
2608
- --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-050);
2609
- --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
2610
- --tds-page-header-nav-item-border-color-selected:var(--t-border-color);
2611
- }
2612
- }
2613
- }
2614
-
2615
- .tds-page-header{
2616
- display:flex;
2617
- flex-direction:column;
2618
- padding-top:var(--tds-page-header-padding-y);
2619
- color:var(--tds-page-header-color);
2620
- background:var(--tds-page-header-background-color);
2621
- border-bottom:1px solid var(--tds-page-header-bottom-border-color);
2622
- }
2623
-
2624
- .tds-page-header:not(.has-nav){
2625
- padding-bottom:var(--tds-page-header-padding-y);
2626
- }
2627
-
2628
- .tds-page-header.inactive{
2629
- background:var(--tds-page-header-background-color-inactive);
2630
- }
2631
-
2632
- .tds-page-header :is([slot="actions"],.tds-page-header__actions){
2633
- width:100%;
2634
- }
2635
-
2636
- .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
2637
- display:flex;
2638
- flex-flow:row wrap;
2639
- gap:var(--t-spacing-half) var(--t-spacing-1);
2640
- align-items:flex-start;
2641
- justify-content:flex-start;
2642
- min-width:0;
2643
- }
2644
-
2645
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)):not(:has(ul)),:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) ul{
2646
- display:flex;
2647
- gap:var(--tds-page-header-nav-gap);
2648
- padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
2649
- margin:0 0 -1px;
2650
- overflow:auto;
2651
- list-style:none;
2652
- background:var(--tds-page-header-nav-background);
2653
- }
2654
-
2655
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button){
2656
- position:relative;
2657
- display:inline-flex;
2658
- padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
2659
- font-size:var(--t-font-size-sm);
2660
- line-height:22px;
2661
- color:var(--tds-page-header-nav-item-color);
2662
- white-space:nowrap;
2663
- text-decoration:none;
2664
- -webkit-appearance:none;
2665
- -moz-appearance:none;
2666
- appearance:none;
2667
- cursor:pointer;
2668
- outline-offset:-2px;
2669
- background-color:var(--tds-page-header-nav-item-background-color);
2670
- background-clip:padding-box;
2671
- border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
2672
- border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
2673
- border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
2674
- }
2675
-
2676
- .selected:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)){
2677
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-selected);
2678
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-selected);
2679
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-selected);
2680
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-selected);
2681
- }
2682
-
2683
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):hover{
2684
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
2685
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
2686
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
2687
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-hover);
2688
- }
2689
-
2690
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):active{
2691
- background-color:var(--tds-page-header-nav-item-background-color-active);
2692
- border-color:var(--tds-page-header-nav-item-border-color-active);
2693
- border-bottom-color:var(--tds-page-header-nav-item-background-color-active);
2694
- }
2695
-
2696
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):disabled{
2697
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-disabled);
2698
- color:var(--tds-page-header-nav-item-color-disabled);
2699
- cursor:not-allowed;
2700
- background-color:var(--tds-page-header-nav-item-background-color-disabled);
2701
- opacity:1;
2702
- }
2703
-
2704
- @media (min-width: 600px){
2705
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected)::after{
2706
- position:absolute;
2707
- inset:auto -1px -1px;
2708
- height:1px;
2709
- pointer-events:none;
2710
- content:"";
2711
- background-color:var(--tds-page-header-bottom-border-color);
2712
- }
2713
- }
2714
-
2715
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
2716
- position:relative;
2596
+ color:var(--t-form-placeholder-color);
2597
+ -moz-user-select:none;
2598
+ user-select:none;
2717
2599
  }
2718
2600
 
2719
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator)) :is(a,button){
2720
- -webkit-mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
2721
- mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
2722
- }
2723
-
2724
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::before,:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
2725
- position:absolute;
2726
- top:-5px;
2727
- right:-2px;
2728
- width:10px;
2729
- height:10px;
2730
- content:"";
2731
- background:var(--tds-page-header-nav-item-indicator-color);
2732
- border-radius:50%;
2733
- }
2601
+ :is(.tds-input :is(input,textarea))::placeholder{
2602
+ color:var(--t-form-placeholder-color);
2603
+ -webkit-user-select:none;
2604
+ -moz-user-select:none;
2605
+ user-select:none;
2606
+ }
2734
2607
 
2735
- @media (prefers-reduced-motion: no-preference){
2736
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
2737
- animation:indicator-pulse 1.25s ease infinite;
2738
- }
2739
- }
2608
+ @media (prefers-reduced-motion: reduce){
2740
2609
 
2741
- .tds-page-header__title-bar{
2742
- display:flex;
2743
- flex-direction:column;
2744
- gap:var(--t-spacing-2) var(--t-spacing-1);
2745
- align-items:flex-start;
2746
- justify-content:space-between;
2747
- padding:0 var(--tds-page-header-padding-x);
2748
- }
2610
+ .tds-input :is(input,textarea){
2611
+ --tds-input-transition-property:none;
2612
+ }
2613
+ }
2749
2614
 
2750
- .tds-page-header--profile > .tds-page-header__title-bar{
2751
- align-items:center;
2615
+ .tds-input.tds-input--invalid,.tds-input:has(:is(input,textarea):is(:user-invalid,[aria-invalid="true"])){
2616
+ --tds-input-background-color:var(--t-form-background-color-error);
2617
+ --tds-input-border-color:var(--t-form-border-color-error);
2618
+ --tds-input-border-color-hover:var(--t-form-border-color-error-hover);
2619
+ --tds-input-description-color:var(--t-text-color-status-error);
2620
+ --tds-input-description-invalid-icon-display:inline-block;
2752
2621
  }
2753
2622
 
2754
- .tds-page-header__primary{
2755
- width:100%;
2756
- }
2623
+ .tds-input:has(:is(input,textarea):required) label::after{
2624
+ margin-left:.25ch;
2625
+ color:var(--t-text-color-status-error);
2626
+ content:"*";
2627
+ }
2757
2628
 
2758
- .tds-page-header__primary h1{
2759
- margin:0;
2760
- font-size:var(--tds-page-header-headline-font-size);
2761
- font-weight:var(--t-font-weight-normal);
2762
- line-height:32px;
2763
- color:var(--tds-page-header-headline-color);
2764
- overflow-wrap:break-word;
2629
+ .tds-input:where(:has(:is(input,textarea):disabled)){
2630
+ --tds-input-border-color:var(--t-form-border-color-disabled);
2631
+ --tds-input-background-color:var(--t-form-background-color-disabled);
2632
+ --tds-input-color:var(--t-form-color-disabled);
2765
2633
  }
2766
2634
 
2767
- @media (min-width: 960px){
2768
- .tds-page-header__primary{
2769
- flex:1 1 max-content;
2770
- width:auto;
2771
- min-width:0;
2772
- max-width:100%;
2773
- }
2635
+ .tds-input:where(:has(:is(input,textarea):disabled)) :is(input,textarea){
2636
+ cursor:not-allowed;
2637
+ }
2774
2638
 
2775
- .tds-page-header__title-bar,
2776
- .tds-page-header--profile .tds-page-header__title-bar{
2777
- flex-flow:row nowrap;
2778
- row-gap:12px;
2779
- align-items:flex-start;
2639
+ .tds-input:where(:has(:is(input,textarea)[readonly])){
2640
+ --tds-input-border-color:var(--t-form-border-color-readonly);
2641
+ --tds-input-background-color:var(--t-form-background-color-readonly);
2780
2642
  }
2781
- .tds-page-header :is([slot="actions"],.tds-page-header__actions){
2782
- width:auto;
2783
- }
2784
2643
 
2785
- .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
2786
- justify-content:flex-end;
2644
+ .tds-input:where(:has(:is(input,textarea)[readonly])) :is(input,textarea):focus{
2645
+ border-color:var(--tds-input-border-color-hover);
2787
2646
  }
2788
- }
2789
2647
 
2790
- .tds-page-header-phone,
2791
- .tds-page-header-email{
2792
- color:var(--tds-page-header-color);
2793
- white-space:nowrap;
2794
- }
2648
+ .tds-input.tds-input--lg{
2649
+ --tds-input-min-height:var(--t-container-size-lg);
2650
+ --tds-input-font-size:var(--t-font-size-lg);
2651
+ }
2795
2652
 
2796
- .tds-page-header-email{
2797
- max-width:100%;
2798
- overflow:hidden;
2799
- text-overflow:ellipsis;
2653
+ .tds-input-description{
2654
+ display:flex;
2655
+ gap:var(--t-spacing-half);
2656
+ align-items:flex-start;
2657
+ margin:0;
2658
+ font-size:var(--t-font-size-sm);
2659
+ line-height:1.35;
2660
+ color:var(--tds-input-description-color, var(--t-text-color-secondary));
2661
+ cursor:text;
2800
2662
  }
2801
2663
 
2802
- @keyframes indicator-pulse{
2803
- 0%{
2804
- opacity:.3;
2805
- transform:scale(.9);
2806
- }
2807
-
2808
- 100%{
2809
- opacity:0;
2810
- transform:scale(1.75);
2664
+ .tds-input-description .tds-input-description-invalid-icon{
2665
+ display:var(--tds-input-description-invalid-icon-display, none);
2666
+ flex-shrink:0;
2667
+ margin-block-start:calc(.5lh - .5em);
2668
+ line-height:1.35;
2811
2669
  }
2812
- }
2813
2670
 
2814
2671
  @layer t-critical, t-component;
2815
2672
 
@@ -3718,206 +3575,121 @@ a.tds-dropdown-item:is(:hover, :active){
3718
3575
  .tds-flex{ display:flex; }
3719
3576
 
3720
3577
  [data-flex-inline]{ display:inline-flex; }
3721
-
3722
3578
  [data-flex-expand]{
3723
3579
  flex:1 1 0%;
3724
3580
  min-width:0;
3725
3581
  }
3726
3582
 
3727
3583
  [data-flex-direction="row"]{ flex-direction:row; }
3728
-
3729
3584
  [data-flex-direction="row-reverse"]{ flex-direction:row-reverse; }
3730
-
3731
3585
  [data-flex-direction="column"]{ flex-direction:column; }
3732
-
3733
3586
  [data-flex-direction="column-reverse"]{ flex-direction:column-reverse; }
3734
3587
 
3735
3588
  [data-flex-align="stretch"]{ align-items:stretch; }
3736
-
3737
3589
  [data-flex-align="start"]{ align-items:start; }
3738
-
3739
3590
  [data-flex-align="center"]{ align-items:center; }
3740
-
3741
3591
  [data-flex-align="end"]{ align-items:end; }
3742
-
3743
3592
  [data-flex-align="baseline"]{ align-items:baseline; }
3744
3593
 
3745
3594
  [data-flex-align-self="auto"]{ align-self:auto; }
3746
-
3747
3595
  [data-flex-align-self="stretch"]{ align-self:stretch; }
3748
-
3749
3596
  [data-flex-align-self="start"]{ align-self:start; }
3750
-
3751
3597
  [data-flex-align-self="center"]{ align-self:center; }
3752
-
3753
3598
  [data-flex-align-self="end"]{ align-self:end; }
3754
-
3755
3599
  [data-flex-align-self="baseline"]{ align-self:baseline; }
3756
3600
 
3757
3601
  [data-flex-justify="start"]{ justify-content:start; }
3758
-
3759
3602
  [data-flex-justify="center"]{ justify-content:center; }
3760
-
3761
3603
  [data-flex-justify="end"]{ justify-content:end; }
3762
-
3763
3604
  [data-flex-justify="space-between"]{ justify-content:space-between; }
3764
-
3765
3605
  [data-flex-justify="space-around"]{ justify-content:space-around; }
3766
-
3767
3606
  [data-flex-justify="space-evenly"]{ justify-content:space-evenly; }
3768
3607
 
3769
3608
  [data-flex-wrap="nowrap"]{ flex-wrap:nowrap; }
3770
-
3771
3609
  [data-flex-wrap="wrap"]{ flex-wrap:wrap; }
3772
-
3773
3610
  [data-flex-wrap="wrap-reverse"]{ flex-wrap:wrap-reverse; }
3774
3611
 
3775
3612
  [data-flex-grow="0"]{ flex-grow:0; }
3776
-
3777
3613
  [data-flex-grow="1"]{ flex-grow:1; }
3778
3614
 
3779
3615
  [data-flex-shrink="0"]{ flex-shrink:0; }
3780
-
3781
3616
  [data-flex-shrink="1"]{ flex-shrink:1; }
3782
3617
 
3783
3618
  [data-flex-gap="0"]{ gap:0; }
3784
-
3785
3619
  [data-flex-gap="0.25"]{ gap:var(--t-spacing-fourth); }
3786
-
3787
3620
  [data-flex-gap="0.5"]{ gap:var(--t-spacing-half); }
3788
-
3789
3621
  [data-flex-gap="1"]{ gap:var(--t-spacing-1); }
3790
-
3791
3622
  [data-flex-gap="1.5"]{ gap:var(--t-spacing-1-half); }
3792
-
3793
3623
  [data-flex-gap="2"]{ gap:var(--t-spacing-2); }
3794
-
3795
3624
  [data-flex-gap="3"]{ gap:var(--t-spacing-3); }
3796
-
3797
3625
  [data-flex-gap="4"]{ gap:var(--t-spacing-4); }
3798
-
3799
3626
  [data-flex-gap="5"]{ gap:var(--t-spacing-5); }
3800
-
3801
3627
  [data-flex-gap="6"]{ gap:var(--t-spacing-6); }
3802
-
3803
3628
  [data-flex-gap="7"]{ gap:var(--t-spacing-7); }
3804
3629
 
3805
3630
  [data-flex-row-gap="0"]{ row-gap:0; }
3806
-
3807
3631
  [data-flex-row-gap="0.25"]{ row-gap:var(--t-spacing-fourth); }
3808
-
3809
3632
  [data-flex-row-gap="0.5"]{ row-gap:var(--t-spacing-half); }
3810
-
3811
3633
  [data-flex-row-gap="1"]{ row-gap:var(--t-spacing-1); }
3812
-
3813
3634
  [data-flex-row-gap="1.5"]{ row-gap:var(--t-spacing-1-half); }
3814
-
3815
3635
  [data-flex-row-gap="2"]{ row-gap:var(--t-spacing-2); }
3816
-
3817
3636
  [data-flex-row-gap="3"]{ row-gap:var(--t-spacing-3); }
3818
-
3819
3637
  [data-flex-row-gap="4"]{ row-gap:var(--t-spacing-4); }
3820
-
3821
3638
  [data-flex-row-gap="5"]{ row-gap:var(--t-spacing-5); }
3822
-
3823
3639
  [data-flex-row-gap="6"]{ row-gap:var(--t-spacing-6); }
3824
-
3825
3640
  [data-flex-row-gap="7"]{ row-gap:var(--t-spacing-7); }
3826
3641
 
3827
3642
  [data-flex-column-gap="0"]{ -moz-column-gap:0; column-gap:0; }
3828
-
3829
3643
  [data-flex-column-gap="0.25"]{ -moz-column-gap:var(--t-spacing-fourth); column-gap:var(--t-spacing-fourth); }
3830
-
3831
3644
  [data-flex-column-gap="0.5"]{ -moz-column-gap:var(--t-spacing-half); column-gap:var(--t-spacing-half); }
3832
-
3833
3645
  [data-flex-column-gap="1"]{ -moz-column-gap:var(--t-spacing-1); column-gap:var(--t-spacing-1); }
3834
-
3835
3646
  [data-flex-column-gap="1.5"]{ -moz-column-gap:var(--t-spacing-1-half); column-gap:var(--t-spacing-1-half); }
3836
-
3837
3647
  [data-flex-column-gap="2"]{ -moz-column-gap:var(--t-spacing-2); column-gap:var(--t-spacing-2); }
3838
-
3839
3648
  [data-flex-column-gap="3"]{ -moz-column-gap:var(--t-spacing-3); column-gap:var(--t-spacing-3); }
3840
-
3841
3649
  [data-flex-column-gap="4"]{ -moz-column-gap:var(--t-spacing-4); column-gap:var(--t-spacing-4); }
3842
-
3843
3650
  [data-flex-column-gap="5"]{ -moz-column-gap:var(--t-spacing-5); column-gap:var(--t-spacing-5); }
3844
-
3845
3651
  [data-flex-column-gap="6"]{ -moz-column-gap:var(--t-spacing-6); column-gap:var(--t-spacing-6); }
3846
-
3847
3652
  [data-flex-column-gap="7"]{ -moz-column-gap:var(--t-spacing-7); column-gap:var(--t-spacing-7); }
3848
3653
 
3849
3654
  [data-flex-basis="auto"]{ flex-basis:auto; }
3850
-
3851
3655
  [data-flex-basis="0"]{ flex-basis:0; }
3852
-
3853
3656
  [data-flex-basis="100%"]{ flex-basis:100%; }
3854
3657
 
3855
3658
  [data-padding="0"]{ padding:0; }
3856
-
3857
3659
  [data-padding="0.25"]{ padding:var(--t-spacing-fourth); }
3858
-
3859
3660
  [data-padding="0.5"]{ padding:var(--t-spacing-half); }
3860
-
3861
3661
  [data-padding="1"]{ padding:var(--t-spacing-1); }
3862
-
3863
3662
  [data-padding="1.5"]{ padding:var(--t-spacing-1-half); }
3864
-
3865
3663
  [data-padding="2"]{ padding:var(--t-spacing-2); }
3866
-
3867
3664
  [data-padding="3"]{ padding:var(--t-spacing-3); }
3868
-
3869
3665
  [data-padding="4"]{ padding:var(--t-spacing-4); }
3870
-
3871
3666
  [data-padding="5"]{ padding:var(--t-spacing-5); }
3872
-
3873
3667
  [data-padding="6"]{ padding:var(--t-spacing-6); }
3874
-
3875
3668
  [data-padding="7"]{ padding:var(--t-spacing-7); }
3876
3669
 
3877
3670
  [data-padding-block="0"]{ padding-block:0; }
3878
-
3879
3671
  [data-padding-block="0.25"]{ padding-block:var(--t-spacing-fourth); }
3880
-
3881
3672
  [data-padding-block="0.5"]{ padding-block:var(--t-spacing-half); }
3882
-
3883
3673
  [data-padding-block="1"]{ padding-block:var(--t-spacing-1); }
3884
-
3885
3674
  [data-padding-block="1.5"]{ padding-block:var(--t-spacing-1-half); }
3886
-
3887
3675
  [data-padding-block="2"]{ padding-block:var(--t-spacing-2); }
3888
-
3889
3676
  [data-padding-block="3"]{ padding-block:var(--t-spacing-3); }
3890
-
3891
3677
  [data-padding-block="4"]{ padding-block:var(--t-spacing-4); }
3892
-
3893
3678
  [data-padding-block="5"]{ padding-block:var(--t-spacing-5); }
3894
-
3895
3679
  [data-padding-block="6"]{ padding-block:var(--t-spacing-6); }
3896
-
3897
3680
  [data-padding-block="7"]{ padding-block:var(--t-spacing-7); }
3898
3681
 
3899
3682
  [data-padding-inline="0"]{ padding-inline:0; }
3900
-
3901
3683
  [data-padding-inline="0.25"]{ padding-inline:var(--t-spacing-fourth); }
3902
-
3903
3684
  [data-padding-inline="0.5"]{ padding-inline:var(--t-spacing-half); }
3904
-
3905
3685
  [data-padding-inline="1"]{ padding-inline:var(--t-spacing-1); }
3906
-
3907
3686
  [data-padding-inline="1.5"]{ padding-inline:var(--t-spacing-1-half); }
3908
-
3909
3687
  [data-padding-inline="2"]{ padding-inline:var(--t-spacing-2); }
3910
-
3911
3688
  [data-padding-inline="3"]{ padding-inline:var(--t-spacing-3); }
3912
-
3913
3689
  [data-padding-inline="4"]{ padding-inline:var(--t-spacing-4); }
3914
-
3915
3690
  [data-padding-inline="5"]{ padding-inline:var(--t-spacing-5); }
3916
-
3917
3691
  [data-padding-inline="6"]{ padding-inline:var(--t-spacing-6); }
3918
-
3919
3692
  [data-padding-inline="7"]{ padding-inline:var(--t-spacing-7); }
3920
-
3921
3693
  @media (min-width: 480px){
3922
3694
  [data-flex-direction-xs="row"]{ flex-direction:row; }
3923
3695
  [data-flex-direction-xs="row-reverse"]{ flex-direction:row-reverse; }
@@ -4030,7 +3802,6 @@ a.tds-dropdown-item:is(:hover, :active){
4030
3802
  [data-padding-inline-xs="6"]{ padding-inline:var(--t-spacing-6); }
4031
3803
  [data-padding-inline-xs="7"]{ padding-inline:var(--t-spacing-7); }
4032
3804
  }
4033
-
4034
3805
  @media (min-width: 600px){
4035
3806
  [data-flex-direction-sm="row"]{ flex-direction:row; }
4036
3807
  [data-flex-direction-sm="row-reverse"]{ flex-direction:row-reverse; }
@@ -4143,7 +3914,6 @@ a.tds-dropdown-item:is(:hover, :active){
4143
3914
  [data-padding-inline-sm="6"]{ padding-inline:var(--t-spacing-6); }
4144
3915
  [data-padding-inline-sm="7"]{ padding-inline:var(--t-spacing-7); }
4145
3916
  }
4146
-
4147
3917
  @media (min-width: 720px){
4148
3918
  [data-flex-direction-md="row"]{ flex-direction:row; }
4149
3919
  [data-flex-direction-md="row-reverse"]{ flex-direction:row-reverse; }
@@ -4256,7 +4026,6 @@ a.tds-dropdown-item:is(:hover, :active){
4256
4026
  [data-padding-inline-md="6"]{ padding-inline:var(--t-spacing-6); }
4257
4027
  [data-padding-inline-md="7"]{ padding-inline:var(--t-spacing-7); }
4258
4028
  }
4259
-
4260
4029
  @media (min-width: 960px){
4261
4030
  [data-flex-direction-lg="row"]{ flex-direction:row; }
4262
4031
  [data-flex-direction-lg="row-reverse"]{ flex-direction:row-reverse; }
@@ -4369,7 +4138,6 @@ a.tds-dropdown-item:is(:hover, :active){
4369
4138
  [data-padding-inline-lg="6"]{ padding-inline:var(--t-spacing-6); }
4370
4139
  [data-padding-inline-lg="7"]{ padding-inline:var(--t-spacing-7); }
4371
4140
  }
4372
-
4373
4141
  @media (min-width: 1200px){
4374
4142
  [data-flex-direction-xl="row"]{ flex-direction:row; }
4375
4143
  [data-flex-direction-xl="row-reverse"]{ flex-direction:row-reverse; }
@@ -4483,29 +4251,55 @@ a.tds-dropdown-item:is(:hover, :active){
4483
4251
  [data-padding-inline-xl="7"]{ padding-inline:var(--t-spacing-7); }
4484
4252
  }
4485
4253
 
4486
- .tds-data-table-wrapper{
4254
+ .tds-data-table{
4487
4255
  --tds-data-table-background-color:var(--t-surface-color-canvas);
4488
4256
  --tds-data-table-border-color:var(--t-border-color);
4489
4257
  --tds-data-table-column-background-color:var(--t-fill-color-neutral-090);
4490
4258
  --tds-data-table-cell-padding-inline:var(--t-spacing-2);
4491
4259
  --tds-data-table-cell-padding-block:var(--t-spacing-1-half);
4492
- position:relative;
4260
+ }
4261
+ .tds-data-table-frame{
4493
4262
  overflow:hidden;
4494
4263
 
4495
- background-color:var(--tds-data-table-column-background-color);
4496
4264
  border:1px solid var(--tds-data-table-border-color);
4497
4265
  border-radius:var(--t-border-radius);
4498
4266
  }
4499
- @supports (animation-timeline: scroll()){
4500
- .tds-data-table-wrapper--sticky-header{
4501
- overflow:clip;
4267
+ .tds-data-table-frame-header{
4268
+ display:flex;
4269
+ gap:var(--t-spacing-1-half);
4270
+ align-items:center;
4271
+ padding-block:var(--tds-data-table-cell-padding-block);
4272
+ padding-inline:var(--tds-data-table-cell-padding-inline);
4273
+ }
4274
+
4275
+ .tds-data-table-results-count{
4276
+ margin:0;
4277
+ font-size:var(--t-font-size-md);
4278
+ line-height:1;
4279
+ color:var(--t-text-color-secondary);
4280
+ }
4281
+ .tds-data-table-scroll-wrapper{
4282
+ position:relative;
4283
+ overflow:hidden;
4284
+ background-color:var(--tds-data-table-column-background-color);
4285
+ }
4286
+ .tds-data-table-scroll-wrapper:not(:first-child){
4287
+ border-top:1px solid var(--tds-data-table-border-color);
4502
4288
  }
4289
+ .tds-data-table-scroll{
4290
+ overflow-x:auto;
4291
+ scrollbar-color:var(--t-fill-color-transparency-dark-030) transparent;
4292
+ }
4293
+ @supports (animation-timeline: scroll()){
4294
+ .tds-data-table--sticky-header .tds-data-table-scroll-wrapper{
4295
+ overflow:clip;
4296
+ }
4503
4297
 
4504
- .tds-data-table-wrapper--sticky-header .tds-data-table-scroll{
4298
+ .tds-data-table--sticky-header .tds-data-table-scroll{
4505
4299
  overflow-y:clip;
4506
4300
  }
4507
4301
 
4508
- .tds-data-table-wrapper--sticky-header .tds-data-table-header{
4302
+ .tds-data-table--sticky-header .tds-data-table-header{
4509
4303
  z-index:1;
4510
4304
  animation-name:tds-data-table-sticky-header;
4511
4305
  animation-duration:auto;
@@ -4520,18 +4314,15 @@ a.tds-dropdown-item:is(:hover, :active){
4520
4314
  to{ transform:translateY(var(--_sticky-header-scroll-max, 0)); }
4521
4315
  }
4522
4316
  }
4523
- .tds-data-table-scroll{
4524
- overflow-x:auto;
4525
- scrollbar-color:var(--t-fill-color-transparency-dark-030) transparent;
4526
- }
4317
+
4527
4318
  @supports (timeline-scope: --tds){
4528
- .tds-data-table-wrapper{
4319
+ .tds-data-table-scroll-wrapper{
4529
4320
  --tds-data-table-scroll-shadow-size:var(--t-spacing-1);
4530
4321
 
4531
4322
  timeline-scope:--tds-data-table-scroll-timeline;
4532
4323
  }
4533
4324
 
4534
- .tds-data-table-wrapper::before,.tds-data-table-wrapper::after{
4325
+ .tds-data-table-scroll-wrapper::before,.tds-data-table-scroll-wrapper::after{
4535
4326
  position:absolute;
4536
4327
  inset-block:0;
4537
4328
  z-index:1;
@@ -4545,14 +4336,14 @@ a.tds-dropdown-item:is(:hover, :active){
4545
4336
  animation-fill-mode:both;
4546
4337
  }
4547
4338
 
4548
- .tds-data-table-wrapper::before{
4339
+ .tds-data-table-scroll-wrapper::before{
4549
4340
  inset-inline-start:0;
4550
4341
  background:linear-gradient(to right, var(--t-shadow-overflow-color), transparent);
4551
4342
  animation-name:tds-data-table-scroll-shadow;
4552
4343
  animation-range:0 var(--tds-data-table-scroll-shadow-size);
4553
4344
  }
4554
4345
 
4555
- .tds-data-table-wrapper::after{
4346
+ .tds-data-table-scroll-wrapper::after{
4556
4347
  inset-inline-end:0;
4557
4348
  background:linear-gradient(to left, var(--t-shadow-overflow-color), transparent);
4558
4349
  animation-name:tds-data-table-scroll-shadow;
@@ -4569,7 +4360,7 @@ a.tds-dropdown-item:is(:hover, :active){
4569
4360
  to{ opacity:1; }
4570
4361
  }
4571
4362
  }
4572
- .tds-data-table{
4363
+ .tds-data-table-grid{
4573
4364
  width:100%;
4574
4365
  font-size:var(--t-font-size-md);
4575
4366
  color:var(--t-text-color);
@@ -4577,7 +4368,7 @@ a.tds-dropdown-item:is(:hover, :active){
4577
4368
  border-collapse:separate;
4578
4369
  background-color:var(--tds-data-table-background-color);
4579
4370
  }
4580
- .tds-data-table th,.tds-data-table td{
4371
+ .tds-data-table-grid th,.tds-data-table-grid td{
4581
4372
  white-space:nowrap;
4582
4373
  }
4583
4374
  .tds-data-table-column{
@@ -4605,6 +4396,7 @@ a.tds-dropdown-item:is(:hover, :active){
4605
4396
  .tds-data-table-column[data-sort-direction="descending"]{
4606
4397
  --_sort-icon-rotate:.5turn;
4607
4398
  }
4399
+
4608
4400
  .tds-data-table-column-icon{
4609
4401
  margin-inline-start:var(--t-spacing-1);
4610
4402
  }
@@ -4616,6 +4408,7 @@ a.tds-dropdown-item:is(:hover, :active){
4616
4408
  transition-duration:var(--t-duration-300);
4617
4409
  transition-property:color, opacity, transform;
4618
4410
  }
4411
+
4619
4412
  .tds-data-table-column-label--hidden,
4620
4413
  .tds-data-table-cell-label--hidden{
4621
4414
  position:absolute;
@@ -4643,12 +4436,14 @@ a.tds-dropdown-item:is(:hover, :active){
4643
4436
  outline:var(--t-focus-ring-outline);
4644
4437
  outline-offset:calc(-1 * var(--t-focus-ring-width));
4645
4438
  }
4439
+
4646
4440
  .tds-data-table-empty{
4647
4441
  padding:var(--tds-data-table-cell-padding-block);
4648
4442
  padding-inline:var(--tds-data-table-cell-padding-inline);
4649
4443
  text-align:center;
4650
4444
  white-space:normal;
4651
4445
  }
4446
+
4652
4447
  .tds-data-table-loading{
4653
4448
  display:flex;
4654
4449
  align-items:center;
@@ -4656,6 +4451,7 @@ a.tds-dropdown-item:is(:hover, :active){
4656
4451
  padding:var(--tds-data-table-cell-padding-block);
4657
4452
  padding-inline:var(--tds-data-table-cell-padding-inline);
4658
4453
  }
4454
+
4659
4455
  @keyframes tds-data-table-loading-fade-in{
4660
4456
  from{
4661
4457
  opacity:0;
@@ -4697,14 +4493,17 @@ a.tds-dropdown-item:is(:hover, :active){
4697
4493
  .tds-data-table-cell{
4698
4494
  text-align:start;
4699
4495
  }
4496
+
4700
4497
  .tds-data-table-column--align-center,
4701
4498
  .tds-data-table-cell--align-center{
4702
4499
  text-align:center;
4703
4500
  }
4501
+
4704
4502
  .tds-data-table-column--align-end,
4705
4503
  .tds-data-table-cell--align-end{
4706
4504
  text-align:end;
4707
4505
  }
4506
+
4708
4507
  .tds-data-table-cell--numeric{
4709
4508
  font-variant-numeric:tabular-nums;
4710
4509
  }
@@ -4783,7 +4582,6 @@ a.tds-dropdown-item:is(:hover, :active){
4783
4582
  .t-banner-icon{
4784
4583
  margin-top:1px;
4785
4584
  }
4786
-
4787
4585
  .t-banner-icon svg{
4788
4586
  fill:var(--t-banner-icon-fill-color);
4789
4587
  }
@@ -4939,20 +4737,17 @@ a.tds-dropdown-item:is(:hover, :active){
4939
4737
  transition:none;
4940
4738
  }
4941
4739
  }
4942
-
4943
4740
  .tds-btn--xl{
4944
4741
  --tds-btn-padding-y:11px;
4945
4742
  --tds-btn-padding-x:18px;
4946
4743
  --tds-btn-padding-truncated-x:12px;
4947
4744
  --tds-btn-min-height:48px;
4948
4745
  }
4949
-
4950
4746
  .tds-btn--lg{
4951
4747
  --tds-btn-padding-y:7px;
4952
4748
  --tds-btn-padding-x:14px;
4953
4749
  --tds-btn-min-height:40px;
4954
4750
  }
4955
-
4956
4751
  .tds-btn--sm{
4957
4752
  --tds-btn-padding-y:.5px;
4958
4753
  --tds-btn-padding-x:7px;
@@ -4961,7 +4756,6 @@ a.tds-dropdown-item:is(:hover, :active){
4961
4756
  --tds-btn-font-size:var(--t-font-size-sm);
4962
4757
  --tds-btn-loading-spinner-track-width:3px;
4963
4758
  }
4964
-
4965
4759
  .tds-btn--xs{
4966
4760
  --tds-btn-padding-y:0;
4967
4761
  --tds-btn-padding-x:5px;
@@ -5542,7 +5336,6 @@ a.tds-dropdown-item:is(:hover, :active){
5542
5336
  margin-block-start:calc(.5lh - .5em);
5543
5337
  line-height:var(--tds-field-description-line-height);
5544
5338
  }
5545
-
5546
5339
  .tds-field-date-segment{
5547
5340
  padding-inline:var(--tds-field-date-segment-padding-inline, 2px);
5548
5341
  text-align:end;
@@ -5550,17 +5343,14 @@ a.tds-dropdown-item:is(:hover, :active){
5550
5343
  caret-color:transparent;
5551
5344
  border-radius:var(--t-border-radius-sm);
5552
5345
  }
5553
-
5554
5346
  .tds-field-date-segment[data-placeholder]{
5555
5347
  color:var(--tds-field-placeholder-color);
5556
5348
  }
5557
-
5558
5349
  .tds-field-date-segment[data-focused]{
5559
5350
  color:var(--t-text-color-inverted);
5560
5351
  outline:0;
5561
5352
  background-color:var(--t-fill-color-interaction);
5562
5353
  }
5563
-
5564
5354
  .tds-field-date-segment-separator{
5565
5355
  padding-inline:0;
5566
5356
  color:var(--tds-field-placeholder-color);
@@ -5570,6 +5360,193 @@ a.tds-dropdown-item:is(:hover, :active){
5570
5360
  color:var(--tds-field-color);
5571
5361
  }
5572
5362
 
5363
+ .tds-combo-box{
5364
+ --tds-combo-box-button-offset:4px;
5365
+ }
5366
+
5367
+ .tds-combo-box[data-open] .tds-combo-box-button > svg{
5368
+ transform:rotate(.5turn);
5369
+ }
5370
+
5371
+ .tds-combo-box--lg{
5372
+ --tds-combo-box-button-offset:5px;
5373
+ }
5374
+ .tds-combo-box-field:has([readonly]) .tds-combo-box-button{
5375
+ display:none;
5376
+ }
5377
+ .tds-combo-box-input{
5378
+ display:flex;
5379
+ flex:1;
5380
+ align-items:center;
5381
+ padding-block:var(--tds-field-padding-block);
5382
+ padding-inline:var(--tds-field-padding-inline);
5383
+ font-family:inherit;
5384
+ font-size:inherit;
5385
+ color:inherit;
5386
+ outline:0;
5387
+ background:transparent;
5388
+ border:0;
5389
+ }
5390
+ .tds-combo-box-input:has( + .tds-combo-box-button){
5391
+ padding-inline-end:0;
5392
+ }
5393
+ .tds-combo-box-input::-moz-placeholder{
5394
+ color:var(--tds-field-placeholder-color);
5395
+ -moz-user-select:none;
5396
+ user-select:none;
5397
+ }
5398
+ .tds-combo-box-input::placeholder{
5399
+ color:var(--tds-field-placeholder-color);
5400
+ -webkit-user-select:none;
5401
+ -moz-user-select:none;
5402
+ user-select:none;
5403
+ }
5404
+ .tds-combo-box-button{
5405
+ flex-shrink:0;
5406
+ align-self:center;
5407
+ inline-size:calc(var(--tds-field-min-height) - (var(--tds-combo-box-button-offset) * 2));
5408
+ block-size:calc(var(--tds-field-min-height) - (var(--tds-combo-box-button-offset) * 2));
5409
+ padding:0;
5410
+ margin-inline-end:var(--tds-combo-box-button-offset);
5411
+ }
5412
+ .tds-combo-box-button > svg{
5413
+ inline-size:var(--tds-field-font-size);
5414
+ block-size:var(--tds-field-font-size);
5415
+ transition:transform var(--t-duration-300) var(--t-ease-in-out);
5416
+ }
5417
+ .tds-combo-box-popover{
5418
+ width:var(--trigger-width);
5419
+ max-block-size:inherit;
5420
+ padding:var(--t-spacing-1);
5421
+ overflow:auto;
5422
+ scroll-behavior:smooth;
5423
+ overscroll-behavior:none;
5424
+ -webkit-user-select:none;
5425
+ -moz-user-select:none;
5426
+ user-select:none;
5427
+ outline:0;
5428
+ scrollbar-color:#0004 var(--t-surface-color-card);
5429
+ scrollbar-width:thin;
5430
+ background:var(--t-surface-color-card);
5431
+ background-clip:padding-box;
5432
+ border:1px solid var(--t-border-color);
5433
+ border-radius:var(--t-border-radius);
5434
+ box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
5435
+ }
5436
+ .tds-combo-box-popover[data-entering]{
5437
+ animation:tds-combo-box-popover var(--t-duration-300) var(--t-ease-out);
5438
+ }
5439
+ .tds-combo-box-popover[data-exiting]{
5440
+ animation:tds-combo-box-popover var(--t-duration-200) var(--t-ease-in) reverse;
5441
+ }
5442
+ .tds-combo-box-popover[data-entering],.tds-combo-box-popover[data-exiting]{
5443
+ will-change:opacity, transform;
5444
+ }
5445
+
5446
+ @keyframes tds-combo-box-popover{
5447
+ from{
5448
+ opacity:0;
5449
+ transform:translateY(-8px);
5450
+ }
5451
+ }
5452
+
5453
+ @media (prefers-reduced-motion: reduce){
5454
+ .tds-combo-box-popover[data-entering],.tds-combo-box-popover[data-exiting]{
5455
+ animation:none;
5456
+ }
5457
+
5458
+ .tds-combo-box-button > svg{
5459
+ transition:none;
5460
+ }
5461
+ }
5462
+ .tds-combo-box-list{
5463
+ padding:0;
5464
+ margin:0;
5465
+ }
5466
+ .tds-combo-box-list-item{
5467
+ display:block;
5468
+ padding-block:var(--t-spacing-1);
5469
+ padding-inline:var(--t-spacing-1-half);
5470
+ overflow:hidden;
5471
+ text-overflow:ellipsis;
5472
+ font-size:1rem;
5473
+ color:var(--t-text-color);
5474
+ white-space:nowrap;
5475
+ cursor:default;
5476
+ border-radius:var(--t-border-radius);
5477
+ }
5478
+ .tds-combo-box-list-item[data-hovered]:not([data-disabled]),.tds-combo-box-list-item[data-focus-visible]{
5479
+ background:var(--t-fill-color-neutral-070);
5480
+ }
5481
+ .tds-combo-box-list-item[data-selected]{
5482
+ background:var(--t-fill-color-button-interaction-ghost-active);
5483
+ }
5484
+ .tds-combo-box-list-item[data-pressed]:not([data-disabled]){
5485
+ background:var(--t-fill-color-neutral-060);
5486
+ }
5487
+ .tds-combo-box-list-item[data-disabled]{
5488
+ color:var(--t-form-color-disabled);
5489
+ cursor:not-allowed;
5490
+ }
5491
+ .tds-combo-box-list-item[data-disabled][data-hovered]{
5492
+ background:transparent;
5493
+ }
5494
+ .tds-combo-box-empty-state{
5495
+ position:relative;
5496
+ min-block-size:var(--t-spacing-3);
5497
+ padding-block:var(--t-spacing-1);
5498
+ padding-inline:var(--t-spacing-2);
5499
+ font-size:var(--t-font-size-md);
5500
+ color:var(--t-text-color-secondary);
5501
+ }
5502
+ .tds-combo-box-load-more{
5503
+ position:relative;
5504
+ min-block-size:calc(var(--t-spacing-3) + var(--t-spacing-1));
5505
+ }
5506
+
5507
+ .tds-combo-box-empty-state,
5508
+ .tds-combo-box-load-more{
5509
+ --tds-loading-spinner-visibility:visible;
5510
+ --tds-loading-spinner-animation-play-state:running;
5511
+ }
5512
+ .tds-combo-box-list-section:not(:first-child){
5513
+ margin-block-start:var(--t-spacing-half);
5514
+ }
5515
+ .tds-combo-box-section-header{
5516
+ padding-block:var(--t-spacing-1);
5517
+ padding-inline:var(--t-spacing-half);
5518
+ font-size:var(--t-font-size-sm);
5519
+ font-weight:var(--t-font-weight-semibold);
5520
+ color:var(--t-text-color-secondary);
5521
+ }
5522
+
5523
+ .tds-loading-spinner{
5524
+ position:absolute;
5525
+ right:0;
5526
+ left:0;
5527
+ visibility:var(--tds-loading-spinner-visibility, hidden);
5528
+ width:var(--tds-loading-spinner-size, 1.25em);
5529
+ height:var(--tds-loading-spinner-size, 1.25em);
5530
+ margin:auto;
5531
+ border:var(--tds-loading-spinner-track-width, 4px) solid var(--tds-loading-spinner-track-color, var(--t-fill-color-transparency-dark-020));
5532
+ border-top-color:var(--tds-loading-spinner-color, currentcolor);
5533
+ border-radius:50%;
5534
+ animation:spinner-rotate 500ms infinite linear;
5535
+ animation-play-state:var(--tds-loading-spinner-animation-play-state, paused);
5536
+ }
5537
+
5538
+ @keyframes spinner-rotate{
5539
+ to{
5540
+ transform:rotate(360deg);
5541
+ }
5542
+ }
5543
+
5544
+ @media (prefers-reduced-motion: reduce){
5545
+ [class*="--loading"] .tds-loading-spinner{
5546
+ --tds-loading-spinner-animation-play-state:paused;
5547
+ }
5548
+ }
5549
+
5573
5550
  .tds-date-picker{
5574
5551
  --tds-date-picker-button-offset:4px;
5575
5552
  }
@@ -5577,17 +5554,14 @@ a.tds-dropdown-item:is(:hover, :active){
5577
5554
  .tds-date-picker--lg{
5578
5555
  --tds-date-picker-button-offset:5px;
5579
5556
  }
5580
-
5581
5557
  .tds-date-picker-field[data-focus-within]:has(.tds-date-picker-button[data-focused]){
5582
5558
  outline-color:transparent;
5583
5559
  outline-offset:0;
5584
5560
  border-color:var(--tds-field-border-color);
5585
5561
  }
5586
-
5587
5562
  .tds-date-picker-field:has(.tds-date-picker-input[data-readonly]) .tds-date-picker-button{
5588
5563
  display:none;
5589
5564
  }
5590
-
5591
5565
  .tds-date-picker-input{
5592
5566
  flex:1;
5593
5567
  padding-block:var(--tds-field-padding-block);
@@ -5597,11 +5571,9 @@ a.tds-dropdown-item:is(:hover, :active){
5597
5571
  text-wrap:nowrap;
5598
5572
  scrollbar-width:none;
5599
5573
  }
5600
-
5601
5574
  .tds-date-picker-input:has( + .tds-date-picker-button){
5602
5575
  padding-inline-end:0;
5603
5576
  }
5604
-
5605
5577
  .tds-date-picker-button{
5606
5578
  flex-shrink:0;
5607
5579
  align-self:center;
@@ -5610,7 +5582,6 @@ a.tds-dropdown-item:is(:hover, :active){
5610
5582
  padding:0;
5611
5583
  margin-inline-end:var(--tds-date-picker-button-offset);
5612
5584
  }
5613
-
5614
5585
  .tds-date-picker-popover{
5615
5586
  --tds-date-picker-popover-font-size:var(--t-font-size-md);
5616
5587
  --tds-date-picker-popover-padding:var(--t-spacing-1-half);
@@ -5627,15 +5598,12 @@ a.tds-dropdown-item:is(:hover, :active){
5627
5598
  border-radius:var(--t-border-radius);
5628
5599
  box-shadow:var(--tds-date-picker-popover-shadow);
5629
5600
  }
5630
-
5631
5601
  .tds-date-picker-popover[data-entering]{
5632
5602
  animation:tds-date-picker-popover var(--t-duration-300) var(--t-ease-out);
5633
5603
  }
5634
-
5635
5604
  .tds-date-picker-popover[data-exiting]{
5636
5605
  animation:tds-date-picker-popover var(--t-duration-200) var(--t-ease-in) reverse;
5637
5606
  }
5638
-
5639
5607
  .tds-date-picker-popover[data-entering],.tds-date-picker-popover[data-exiting]{
5640
5608
  will-change:opacity, transform;
5641
5609
  }
@@ -5652,7 +5620,6 @@ a.tds-dropdown-item:is(:hover, :active){
5652
5620
  animation:none;
5653
5621
  }
5654
5622
  }
5655
-
5656
5623
  .tds-date-picker-overlay{
5657
5624
  position:absolute;
5658
5625
  inset:0;
@@ -5660,7 +5627,6 @@ a.tds-dropdown-item:is(:hover, :active){
5660
5627
  display:flex;
5661
5628
  background-color:var(--tds-date-picker-popover-background-color);
5662
5629
  }
5663
-
5664
5630
  .tds-date-picker-overlay-list{
5665
5631
  display:grid;
5666
5632
  flex:1;
@@ -5683,7 +5649,6 @@ a.tds-dropdown-item:is(:hover, :active){
5683
5649
  overflow-y:auto;
5684
5650
  scroll-padding-block:calc(var(--t-focus-ring-width) + var(--t-focus-ring-offset));
5685
5651
  }
5686
-
5687
5652
  .tds-date-picker-overlay-cell{
5688
5653
  display:flex;
5689
5654
  align-items:center;
@@ -5700,29 +5665,23 @@ a.tds-dropdown-item:is(:hover, :active){
5700
5665
  transition-duration:var(--t-duration-100);
5701
5666
  transition-property:var(--tds-date-picker-popover-interactive-property);
5702
5667
  }
5703
-
5704
5668
  .tds-date-picker-overlay-cell[data-hovered]{
5705
5669
  background-color:var(--t-fill-color-button-neutral-outline-hover);
5706
5670
  }
5707
-
5708
5671
  .tds-date-picker-overlay-cell[data-pressed]{
5709
5672
  background-color:var(--t-fill-color-button-neutral-outline-active);
5710
5673
  }
5711
-
5712
5674
  .tds-date-picker-overlay-cell[data-selected]{
5713
5675
  font-weight:var(--t-font-weight-semibold);
5714
5676
  color:var(--t-text-color-inverted);
5715
5677
  background-color:var(--t-fill-color-interaction);
5716
5678
  }
5717
-
5718
5679
  .tds-date-picker-overlay-cell[data-focus-visible]{
5719
5680
  outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
5720
5681
  }
5721
-
5722
5682
  .tds-date-picker-overlay-cell[data-selected][data-focus-visible]{
5723
5683
  outline-offset:var(--t-focus-ring-offset);
5724
5684
  }
5725
-
5726
5685
  .tds-date-picker-calendar-heading{
5727
5686
  display:flex;
5728
5687
  flex:1;
@@ -5731,7 +5690,6 @@ a.tds-dropdown-item:is(:hover, :active){
5731
5690
  justify-content:flex-start;
5732
5691
  padding-inline-start:4px;
5733
5692
  }
5734
-
5735
5693
  .tds-date-picker-calendar-overlay-trigger{
5736
5694
  --_background-color:transparent;
5737
5695
  position:relative;
@@ -5751,7 +5709,6 @@ a.tds-dropdown-item:is(:hover, :active){
5751
5709
  transition-duration:var(--tds-date-picker-popover-interactive-duration);
5752
5710
  transition-property:var(--tds-date-picker-popover-interactive-property);
5753
5711
  }
5754
-
5755
5712
  .tds-date-picker-calendar-overlay-trigger::before{
5756
5713
  position:absolute;
5757
5714
  inset:calc(var(--t-spacing-half) * -1);
@@ -5761,32 +5718,26 @@ a.tds-dropdown-item:is(:hover, :active){
5761
5718
  background-color:var(--_background-color);
5762
5719
  border-radius:inherit;
5763
5720
  }
5764
-
5765
5721
  .tds-date-picker-calendar-overlay-trigger[data-hovered]{
5766
5722
  --_background-color:var(--t-fill-color-button-neutral-outline-hover);
5767
5723
  }
5768
-
5769
5724
  .tds-date-picker-calendar-overlay-trigger[data-pressed]{
5770
5725
  --_background-color:var(--t-fill-color-button-neutral-outline-active);
5771
5726
  }
5772
-
5773
5727
  .tds-date-picker-calendar-overlay-trigger[data-focus-visible]{
5774
5728
  outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
5775
5729
  outline-offset:var(--t-focus-ring-offset);
5776
5730
  }
5777
-
5778
5731
  .tds-date-picker-calendar{
5779
5732
  inline-size:-moz-fit-content;
5780
5733
  inline-size:fit-content;
5781
5734
  font-size:var(--tds-date-picker-popover-font-size);
5782
5735
  }
5783
-
5784
5736
  .tds-date-picker-calendar-body{
5785
5737
  position:relative;
5786
5738
  padding:var(--tds-date-picker-popover-padding);
5787
5739
  padding-block-start:0;
5788
5740
  }
5789
-
5790
5741
  .tds-date-picker-calendar-header{
5791
5742
  display:flex;
5792
5743
  align-items:center;
@@ -5799,7 +5750,6 @@ a.tds-dropdown-item:is(:hover, :active){
5799
5750
  font-size:var(--tds-date-picker-popover-font-size);
5800
5751
  font-weight:var(--t-font-weight-semibold);
5801
5752
  }
5802
-
5803
5753
  .tds-date-picker-calendar-nav{
5804
5754
  display:flex;
5805
5755
  align-items:center;
@@ -5816,30 +5766,24 @@ a.tds-dropdown-item:is(:hover, :active){
5816
5766
  transition-duration:var(--tds-date-picker-popover-interactive-duration);
5817
5767
  transition-property:var(--tds-date-picker-popover-interactive-property);
5818
5768
  }
5819
-
5820
5769
  .tds-date-picker-calendar-nav[data-hovered]{
5821
5770
  background-color:var(--t-fill-color-button-neutral-outline-hover);
5822
5771
  }
5823
-
5824
5772
  .tds-date-picker-calendar-nav[data-pressed]{
5825
5773
  background-color:var(--t-fill-color-button-neutral-outline-active);
5826
5774
  }
5827
-
5828
5775
  .tds-date-picker-calendar-nav[data-focus-visible]{
5829
5776
  outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
5830
5777
  outline-offset:var(--t-focus-ring-offset);
5831
5778
  }
5832
-
5833
5779
  .tds-date-picker-calendar-nav[data-disabled]{
5834
5780
  color:var(--t-text-color-disabled);
5835
5781
  cursor:not-allowed;
5836
5782
  }
5837
-
5838
5783
  .tds-date-picker-calendar-grid{
5839
5784
  font-feature-settings:"ss01", "ss02";
5840
5785
  border-collapse:collapse;
5841
5786
  }
5842
-
5843
5787
  .tds-date-picker-calendar-grid :where(thead,tbody,tr,td,th){
5844
5788
  padding:0;
5845
5789
  border:0;
@@ -5855,7 +5799,6 @@ a.tds-dropdown-item:is(:hover, :active){
5855
5799
  -moz-user-select:none;
5856
5800
  user-select:none;
5857
5801
  }
5858
-
5859
5802
  .tds-date-picker-calendar-cell-button{
5860
5803
  position:relative;
5861
5804
  display:flex;
@@ -5870,7 +5813,6 @@ a.tds-dropdown-item:is(:hover, :active){
5870
5813
  user-select:none;
5871
5814
  outline:0;
5872
5815
  }
5873
-
5874
5816
  .tds-date-picker-calendar-cell-button::before{
5875
5817
  position:absolute;
5876
5818
  inset:0;
@@ -5879,45 +5821,36 @@ a.tds-dropdown-item:is(:hover, :active){
5879
5821
  background-color:var(--_background-color);
5880
5822
  border-radius:50%;
5881
5823
  }
5882
-
5883
5824
  .tds-date-picker-calendar-cell-button[data-today]::before{
5884
5825
  box-shadow:inset 0 0 0 1.5px var(--t-border-color);
5885
5826
  }
5886
-
5887
5827
  .tds-date-picker-calendar-cell-button[data-outside-month]{
5888
5828
  display:none;
5889
5829
  }
5890
-
5891
5830
  .tds-date-picker-calendar-cell-button[data-hovered]{
5892
5831
  --_background-color:var(--t-fill-color-button-neutral-outline-hover);
5893
5832
  }
5894
-
5895
5833
  .tds-date-picker-calendar-cell-button[data-pressed]{
5896
5834
  --_background-color:var(--t-fill-color-button-neutral-outline-active);
5897
5835
  }
5898
-
5899
5836
  .tds-date-picker-calendar-cell-button[data-selected]{
5900
5837
  --_background-color:var(--t-fill-color-interaction);
5901
5838
  font-weight:var(--t-font-weight-semibold);
5902
5839
  color:var(--t-text-color-inverted);
5903
5840
  border-color:transparent;
5904
5841
  }
5905
-
5906
5842
  .tds-date-picker-calendar-cell-button[data-unavailable]{
5907
5843
  color:var(--t-text-color-disabled);
5908
5844
  text-decoration:line-through;
5909
5845
  cursor:not-allowed;
5910
5846
  }
5911
-
5912
5847
  .tds-date-picker-calendar-cell-button[data-disabled]{
5913
5848
  color:var(--t-text-color-disabled);
5914
5849
  }
5915
-
5916
5850
  .tds-date-picker-calendar-cell-button[data-focus-visible]{
5917
5851
  outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
5918
5852
  outline-offset:-2px;
5919
5853
  }
5920
-
5921
5854
  .tds-date-picker-calendar-cell-button[data-focus-visible][data-selected]{
5922
5855
  outline-offset:var(--t-focus-ring-offset);
5923
5856
  }
@@ -5935,11 +5868,9 @@ a.tds-dropdown-item:is(:hover, :active){
5935
5868
  --tds-number-stepper-button-offset:5px;
5936
5869
  --tds-number-stepper-button-gap:4px;
5937
5870
  }
5938
-
5939
5871
  .tds-number-stepper-field:has([readonly]) .tds-number-stepper-button{
5940
5872
  display:none;
5941
5873
  }
5942
-
5943
5874
  .tds-number-stepper-input{
5944
5875
  display:flex;
5945
5876
  flex:1;
@@ -5954,13 +5885,11 @@ a.tds-dropdown-item:is(:hover, :active){
5954
5885
  background:transparent;
5955
5886
  border:0;
5956
5887
  }
5957
-
5958
5888
  .tds-number-stepper-input::-webkit-inner-spin-button,.tds-number-stepper-input::-webkit-outer-spin-button{
5959
5889
  margin:0;
5960
5890
  -webkit-appearance:none;
5961
5891
  appearance:none;
5962
5892
  }
5963
-
5964
5893
  .tds-number-stepper-button{
5965
5894
  flex-shrink:0;
5966
5895
  align-self:center;
@@ -5968,11 +5897,9 @@ a.tds-dropdown-item:is(:hover, :active){
5968
5897
  block-size:calc(var(--tds-field-min-height) - (var(--tds-number-stepper-button-offset) * 2));
5969
5898
  padding:0;
5970
5899
  }
5971
-
5972
5900
  .tds-number-stepper-button + .tds-number-stepper-button{
5973
5901
  margin-inline-start:var(--tds-number-stepper-button-gap);
5974
5902
  }
5975
-
5976
5903
  .tds-number-stepper-button:last-of-type{
5977
5904
  margin-inline-end:var(--tds-number-stepper-button-offset);
5978
5905
  }
@@ -6011,7 +5938,7 @@ a.tds-dropdown-item:is(:hover, :active){
6011
5938
 
6012
5939
  --tds-select-option-gap:var(--t-spacing-1);
6013
5940
  --tds-select-option-padding-block:var(--t-spacing-fourth);
6014
- --tds-select-option-padding-inline:var(--t-spacing-2) var(--t-spacing-1);
5941
+ --tds-select-option-padding-inline:var(--t-spacing-1-half);
6015
5942
  --tds-select-option-font-size:1rem;
6016
5943
  --tds-select-option-color:var(--t-text-color);
6017
5944
  --tds-select-option-background-hover:var(--t-fill-color-neutral-070);
@@ -6020,7 +5947,7 @@ a.tds-dropdown-item:is(:hover, :active){
6020
5947
 
6021
5948
  --tds-select-group-label-padding-block-start:var(--t-spacing-2);
6022
5949
  --tds-select-group-label-padding-block:var(--tds-select-group-label-padding-block-start) var(--t-spacing-1);
6023
- --tds-select-group-label-padding-inline:var(--t-spacing-1);
5950
+ --tds-select-group-label-padding-inline:var(--t-spacing-half);
6024
5951
  --tds-select-group-label-font-size:var(--t-font-size-sm);
6025
5952
  --tds-select-group-label-font-weight:var(--t-font-weight-semibold);
6026
5953
  --tds-select-group-label-letter-spacing:0;
@@ -6128,7 +6055,7 @@ a.tds-dropdown-item:is(:hover, :active){
6128
6055
  .tds-select :is(li[role="option"],option:not([hidden])){
6129
6056
  display:block;
6130
6057
  align-content:center;
6131
- min-height:var(--t-container-size-md);
6058
+ min-height:38px;
6132
6059
  padding-block:var(--tds-select-option-padding-block);
6133
6060
  padding-inline:var(--tds-select-option-padding-inline);
6134
6061
  overflow:hidden;
@@ -6243,11 +6170,9 @@ a.tds-dropdown-item:is(:hover, :active){
6243
6170
  pointer-events:none;
6244
6171
  opacity:0;
6245
6172
  }
6246
-
6247
6173
  .tds-select:has(> button){
6248
6174
  anchor-scope:--tds-select-anchor;
6249
6175
  }
6250
-
6251
6176
  .tds-select:has( > button) > button{
6252
6177
  display:block;
6253
6178
  padding-inline-end:calc(var(--tds-select-caret-size) + var(--tds-select-caret-inline-offset) + .75ch);
@@ -6260,7 +6185,6 @@ a.tds-dropdown-item:is(:hover, :active){
6260
6185
  transition:background-color var(--t-duration-300) var(--t-ease-in-out), border-color var(--t-duration-300) var(--t-ease-in-out), outline-color var(--t-duration-300) var(--t-ease-in-out), outline-offset var(--t-duration-300) var(--t-ease-in-out), transform var(--t-duration-100) var(--t-ease-in-out);
6261
6186
  -webkit-tap-highlight-color:transparent;
6262
6187
  }
6263
-
6264
6188
  :is(.tds-select:has( > button) > button)::after{
6265
6189
  position:absolute;
6266
6190
  inset-block:0;
@@ -6274,11 +6198,9 @@ a.tds-dropdown-item:is(:hover, :active){
6274
6198
  transform:rotate(0);
6275
6199
  transition:var(--tds-select-caret-transition);
6276
6200
  }
6277
-
6278
6201
  .tds-select:has( > button):has([role="option"][aria-selected="true"]) > button{
6279
6202
  color:var(--tds-select-color);
6280
6203
  }
6281
-
6282
6204
  .tds-select:has( > button) [popover]{
6283
6205
  inset:auto;
6284
6206
  inline-size:-moz-max-content;
@@ -6307,18 +6229,15 @@ a.tds-dropdown-item:is(:hover, :active){
6307
6229
  translate:var(--tds-select-dropdown-open-translate);
6308
6230
  transition:var(--tds-select-dropdown-transition);
6309
6231
  }
6310
-
6311
6232
  :is(.tds-select:has( > button) [popover]):not(:popover-open){
6312
6233
  opacity:var(--tds-select-dropdown-closed-opacity);
6313
6234
  translate:var(--tds-select-dropdown-closed-translate);
6314
6235
  }
6315
-
6316
6236
  :is(.tds-select:has( > button) [popover]) ul{
6317
6237
  padding:0;
6318
6238
  margin:0;
6319
6239
  list-style:none;
6320
6240
  }
6321
-
6322
6241
  @starting-style{
6323
6242
  :is(.tds-select:has( > button) [popover]):popover-open{
6324
6243
  opacity:var(--tds-select-dropdown-closed-opacity);