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

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 +109 -31
  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 +1491 -1516
  46. package/dist/reactRender.css.map +1 -1
  47. package/dist/reactRenderLegacy.css +1491 -1516
  48. package/dist/reactRenderLegacy.css.map +1 -1
  49. package/dist/unstable.css +2803 -2828
  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
@@ -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,395 +677,357 @@
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
+ }
878
788
 
879
- .tds-sidenav-section-list,
880
- .tds-sidenav-item{
881
- width:100%;
882
- padding:0;
883
- margin:0;
884
- }
885
-
886
- .tds-sidenav-item :is(a,button){
887
- position:relative;
888
- display:flex;
889
- gap:12px;
890
- align-items:center;
891
- width:100%;
892
- padding:12px;
893
- overflow:hidden;
894
- font-size:var(--t-font-size-sm);
895
- line-height:18px;
896
- color:var(--t-text-color-headline);
897
- white-space:nowrap;
898
- text-decoration:none;
899
- -webkit-appearance:none;
900
- -moz-appearance:none;
901
- appearance:none;
902
- cursor:pointer;
903
- background-color:var(--tds-sidenav-item-background, transparent);
904
- border:0;
905
- border-radius:var(--t-border-radius);
906
- transition:var(--tds-sidenav-item-transition);
907
- }
908
-
909
- :is(.tds-sidenav-item :is(a,button)):not(:has(.prefix,.suffix)),:is(.tds-sidenav-item :is(a,button)) :is(:not(.prefix,.suffix)){
910
- display:block;
911
- flex:1;
912
- overflow:hidden;
913
- text-overflow:ellipsis;
914
- text-align:left;
915
- white-space:nowrap;
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);
916
797
  }
917
798
 
918
- :is(.tds-sidenav-item :is(a,button)):hover,:is(.tds-sidenav-item :is(a,button)):focus-visible{
919
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-hover);
920
- color:var(--t-text-color-headline);
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;
921
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;
922
818
  }
923
819
 
924
- :is(.tds-sidenav-item :is(a,button)):active{
925
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-active);
926
- }
927
-
928
- :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]){
929
- overflow:hidden;
930
- color:var(--tds-sidenav-item-icon-color);
931
- }
932
-
933
- :is(:is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"])),:is(:is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"])) svg{
934
- display:block;
935
- width:var(--tds-sidenav-item-icon-size);
936
- height:var(--tds-sidenav-item-icon-size);
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);
937
825
  }
938
826
 
939
- :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section{
940
- --tds-sidenav-indent:19px;
941
- }
942
-
943
- [aria-expanded="true"]:is(.tds-sidenav-item :is(a,button)) + .tds-sidenav-section-list{
944
- visibility:visible;
945
- block-size:auto;
946
- opacity:1;
947
- }
948
-
949
- .tds-sidenav-item.selected > :is(a,button),.tds-sidenav-item:has(.tds-sidenav-section):has(.selected) > :is(a,button){
950
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-selected);
951
- --tds-sidenav-item-icon-color:var(--tds-sidenav-item-icon-color-selected);
952
-
953
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-selected);
954
- font-weight:var(--t-font-weight-semibold);
955
- }
956
-
957
- .tds-sidenav-item:has(.tds-sidenav-section){
958
- display:flex;
959
- flex-direction:column;
960
- gap:var(--t-spacing-half);
961
- }
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
+ }
962
833
 
963
- .tds-sidenav-item .tds-sidenav-section-list{
964
- --tds-sidenav-item-depth:1;
965
- gap:0;
966
- }
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
+ }
967
839
 
968
- .tds-sidenav-action--toggle + :is(.tds-sidenav-item .tds-sidenav-section-list){
969
- visibility:hidden;
970
- block-size:0;
971
- overflow-y:clip;
972
- opacity:0;
973
- transition:content-visibility var(--t-duration-400) allow-discrete, opacity var(--t-duration-400), block-size var(--t-duration-400);
974
- }
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
+ }
975
847
 
976
- :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list{
977
- --tds-sidenav-item-depth:2;
978
- }
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
+ }
979
858
 
980
- :is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
981
- min-height:var(--t-element-size-2xl);
982
- padding-block:9px;
983
- padding-left:calc((var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth)) + var(--tds-sidenav-indent) + var(--t-spacing-fourth));
984
- line-height:1;
985
- background-color:transparent;
859
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
860
+ position:relative;
986
861
  }
987
862
 
988
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::before{
989
- position:absolute;
990
- top:0;
991
- bottom:0;
992
- left:calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
993
- width:2px;
994
- content:"";
995
- background-color:var(--tds-sidenav-item-nested-border-color);
996
- transition:var(--tds-sidenav-item-transition);
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);
997
866
  }
998
867
 
999
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::after{
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{
1000
869
  position:absolute;
1001
- inset:0 0 0 calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
1002
- z-index:-1;
1003
- height:100%;
870
+ top:-5px;
871
+ right:-2px;
872
+ width:10px;
873
+ height:10px;
1004
874
  content:"";
1005
- background-color:var(--tds-sidenav-item-nested-background);
1006
- border-radius:0 var(--t-border-radius) var(--t-border-radius) 0;
1007
- transition:var(--tds-sidenav-item-transition);
1008
- }
1009
-
1010
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):not(:has(.prefix,.suffix)),:is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)) :is(:not(.prefix,.suffix)){
1011
- display:block;
1012
- text-align:left;
1013
- white-space:normal;
875
+ background:var(--tds-page-header-nav-item-indicator-color);
876
+ border-radius:50%;
1014
877
  }
1015
878
 
1016
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):hover,:is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):focus-visible{
1017
- --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-hover);
1018
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-hover);
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
+ }
1019
883
  }
1020
884
 
1021
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):active{
1022
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-active);
1023
- }
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
+ }
1024
893
 
1025
- .selected:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
1026
- --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-selected);
1027
- font-weight:var(--t-font-weight-medium);
1028
- }
894
+ .tds-page-header--profile > .tds-page-header__title-bar{
895
+ align-items:center;
896
+ }
1029
897
 
1030
- .tds-sidenav-responsive-header{
1031
- display:flex;
1032
- gap:var(--t-spacing-2);
1033
- align-items:center;
898
+ .tds-page-header__primary{
1034
899
  width:100%;
1035
900
  }
1036
901
 
1037
- .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle{
1038
- order:0;
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;
1039
909
  }
1040
910
 
1041
- .tds-sidenav-responsive-header .tds-sidenav-responsive-header-label{
1042
- flex:1;
1043
- order:1;
1044
- margin:0;
1045
- font-size:var(--t-font-size-lg);
1046
- font-weight:var(--t-font-weight-medium);
1047
- color:var(--t-text-color-headline);
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%;
1048
917
  }
1049
918
 
1050
- @media (max-width: 719px){
1051
- .tds-sidenav-collapse{
1052
- z-index:10001;
1053
- display:none;
1054
- max-width:min(448px, calc(100vw - 48px));
1055
- padding:0;
1056
- margin:12px 0;
1057
- position-area:bottom span-right;
1058
- overflow:hidden;
1059
- outline:0;
1060
- background:var(--t-surface-color-card);
1061
- border:0;
1062
- border-radius:6px;
1063
- box-shadow:0 8px 20px 0 rgba(0, 0, 0, .25);
1064
- opacity:var(--tds-sidenav-collapse-open-opacity);
1065
- transform:var(--tds-sidenav-collapse-open-transform);
1066
- transition:var(--tds-sidenav-collapse-transition-enter);
1067
- will-change:transform;
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;
1068
924
  }
925
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
926
+ width:auto;
927
+ }
1069
928
 
1070
- .tds-sidenav-scroll-container{
1071
- --webkit-overflow-scrolling:touch;
1072
- display:block;
1073
- width:100%;
1074
- height:-moz-fit-content;
1075
- height:fit-content;
1076
- padding:var(--t-spacing-2);
1077
- overflow-y:auto;
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);
1078
949
  }
1079
950
 
1080
- .tds-sidenav-item :is(a, button) :is(.prefix){
1081
- display:none;
951
+ 100%{
952
+ opacity:0;
953
+ transform:scale(1.75);
1082
954
  }
1083
- @supports selector(:popover-open){
1084
- .tds-sidenav-collapse:popover-open{
1085
- display:flex;
1086
- }
955
+ }
1087
956
 
1088
- .tds-sidenav-collapse:not(:popover-open){
1089
- opacity:var(--tds-sidenav-collapse-closed-opacity);
1090
- transition:var(--tds-sidenav-collapse-transition-exit);
1091
- }
957
+ .tds-checkbox-group{
958
+ --tds-checkbox-group-font-size:var(--t-font-size-md);
959
+ --tds-checkbox-group-line-height:1.4;
960
+ --tds-checkbox-group-gap:var(--t-spacing-1);
1092
961
 
1093
- @starting-style{
1094
- .tds-sidenav-collapse:popover-open{
1095
- opacity:var(--tds-sidenav-collapse-closed-opacity);
1096
- transform:var(--tds-sidenav-collapse-closed-transform);
1097
- }
1098
- }
1099
- }
1100
- @supports not selector(:popover-open){
1101
- .tds-sidenav-collapse.\:popover-open{
1102
- display:flex;
1103
- }
962
+ --tds-checkbox-group-description-font-size:var(--t-font-size-sm);
963
+ --tds-checkbox-group-description-line-height:1.35;
964
+ --tds-checkbox-group-description-color:var(--t-text-color-secondary);
965
+ --tds-checkbox-group-description-invalid-icon-display:none;
966
+ display:flex;
967
+ flex-direction:column;
968
+ gap:0;
969
+ padding:0;
970
+ margin:0;
1104
971
 
1105
- .tds-sidenav-collapse:not(.\:popover-open){
1106
- opacity:var(--tds-sidenav-collapse-closed-opacity);
1107
- transition:var(--tds-sidenav-collapse-transition-exit);
1108
- }
1109
- }
972
+ font-size:var(--tds-checkbox-group-font-size);
973
+ line-height:var(--tds-checkbox-group-line-height);
974
+ border:0;
1110
975
  }
1111
976
 
1112
- @media (min-width: 720px){
1113
- .tds-sidenav-responsive-header{
1114
- display:none;
977
+ .tds-checkbox-group legend{
978
+ float:left;
979
+ padding:0;
980
+ margin:0;
1115
981
  }
1116
- }
1117
982
 
1118
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
1119
- display:none;
1120
- }
983
+ .tds-checkbox-group[aria-invalid="true"]{
984
+ --tds-checkbox-group-description-color:var(--t-text-color-status-error);
985
+ --tds-checkbox-group-description-invalid-icon-display:inline-block;
986
+ }
1121
987
 
1122
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
1123
- display:block;
988
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) legend::after{
989
+ margin-left:.25ch;
990
+ color:var(--t-text-color-status-error);
991
+ content:"*";
1124
992
  }
1125
993
 
1126
- tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1127
- display:flex;
1128
- flex-direction:column;
994
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
995
+ content:none;
1129
996
  }
1130
997
 
1131
- .tds-button-group{
1132
- display:inline-flex;
998
+ .tds-checkbox-group-fields{
999
+ display:flex;
1000
+ flex-direction:column;
1001
+ gap:var(--tds-checkbox-group-gap);
1002
+ align-items:flex-start;
1003
+ margin-top:var(--t-spacing-1);
1133
1004
  }
1134
- .tds-button-group > .tds-btn{
1135
- --tds-button-group-item-z-index:1;
1136
1005
 
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);
1006
+ .tds-checkbox-group-description{
1007
+ display:flex;
1008
+ gap:var(--t-spacing-half);
1009
+ align-items:flex-start;
1010
+ margin:var(--t-spacing-fourth) 0 0;
1011
+ font-size:var(--tds-checkbox-group-description-font-size);
1012
+ line-height:var(--tds-checkbox-group-description-line-height);
1013
+ color:var(--tds-checkbox-group-description-color);
1014
+ cursor:text;
1015
+ }
1016
+
1017
+ .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
1018
+ display:var(--tds-checkbox-group-description-invalid-icon-display);
1019
+ flex-shrink:0;
1020
+ margin-top:calc(.5lh - .5em);
1021
+ line-height:var(--tds-checkbox-group-description-line-height);
1156
1022
  }
1157
1023
 
1024
+ .tds-checkbox-group--sm{
1025
+ --tds-checkbox-group-line-height:1.35;
1026
+ --tds-checkbox-group-font-size:var(--t-font-size-sm);
1027
+ --tds-checkbox-group-description-font-size:var(--t-font-size-xs);
1028
+ --tds-checkbox-group-description-line-height:1.3;
1029
+ }
1030
+
1158
1031
  .tds-checkbox{
1159
1032
  --tds-checkbox-font-size:var(--t-font-size-md);
1160
1033
  --tds-checkbox-cursor:pointer;
@@ -1350,74 +1223,53 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1350
1223
  --tds-checkbox-description-line-height:1.3;
1351
1224
  }
1352
1225
 
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;
1226
+ .tds-button-group{
1227
+ display:inline-flex;
1381
1228
  }
1229
+ .tds-button-group > .tds-btn{
1230
+ --tds-button-group-item-z-index:1;
1382
1231
 
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;
1232
+ position:relative;
1233
+ z-index:var(--tds-button-group-item-z-index);
1234
+ border-radius:0;
1391
1235
  }
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;
1236
+ :is(.tds-button-group > .tds-btn):not(:first-child){
1237
+ margin-inline-start:calc(var(--tds-btn-border-width) * -1);
1238
+ }
1239
+ :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{
1240
+ position:absolute;
1241
+ inset-block:calc(var(--tds-btn-border-width) * -1);
1242
+ width:var(--tds-btn-border-width);
1243
+ pointer-events:none;
1244
+ content:"";
1245
+ background-color:var(--t-border-color-white);
1246
+ }
1247
+ :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:first-child)::before{
1248
+ inset-inline-start:calc(var(--tds-btn-border-width) * -1);
1249
+ }
1250
+ :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:last-child)::after{
1251
+ inset-inline-end:calc(var(--tds-btn-border-width) * -1);
1252
+ }
1253
+ :is(.tds-button-group > .tds-btn):hover{
1254
+ --tds-button-group-item-z-index:2;
1255
+ }
1256
+ :is(.tds-button-group > .tds-btn):focus-visible{
1257
+ --tds-button-group-item-z-index:5;
1258
+ }
1259
+ .tds-button-group > .tds-btn:first-child{
1260
+ border-start-start-radius:var(--tds-btn-border-radius);
1261
+ border-end-start-radius:var(--tds-btn-border-radius);
1398
1262
  }
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);
1263
+ .tds-button-group > .tds-btn:last-child{
1264
+ border-start-end-radius:var(--tds-btn-border-radius);
1265
+ border-end-end-radius:var(--tds-btn-border-radius);
1413
1266
  }
1414
1267
 
1415
- .tds-combo-box-popover{
1416
- width:var(--trigger-width);
1417
- max-block-size:inherit;
1268
+ .tds-dropdown-popover{
1269
+ min-inline-size:10rem;
1270
+ max-inline-size:24rem;
1418
1271
  padding:var(--t-spacing-1);
1419
1272
  overflow:auto;
1420
- scroll-behavior:smooth;
1421
1273
  overscroll-behavior:none;
1422
1274
  -webkit-user-select:none;
1423
1275
  -moz-user-select:none;
@@ -1431,20 +1283,17 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1431
1283
  border-radius:var(--t-border-radius);
1432
1284
  box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
1433
1285
  }
1434
-
1435
- .tds-combo-box-popover[data-entering]{
1436
- animation:tds-combo-box-popover var(--t-duration-300) var(--t-ease-out);
1286
+ .tds-dropdown-popover[data-entering]{
1287
+ animation:tds-dropdown-popover var(--t-duration-300) var(--t-ease-out);
1437
1288
  }
1438
-
1439
- .tds-combo-box-popover[data-exiting]{
1440
- animation:tds-combo-box-popover var(--t-duration-200) var(--t-ease-in) reverse;
1289
+ .tds-dropdown-popover[data-exiting]{
1290
+ animation:tds-dropdown-popover var(--t-duration-200) var(--t-ease-in) reverse;
1441
1291
  }
1442
-
1443
- .tds-combo-box-popover[data-entering],.tds-combo-box-popover[data-exiting]{
1292
+ .tds-dropdown-popover[data-entering],.tds-dropdown-popover[data-exiting]{
1444
1293
  will-change:opacity, transform;
1445
1294
  }
1446
1295
 
1447
- @keyframes tds-combo-box-popover{
1296
+ @keyframes tds-dropdown-popover{
1448
1297
  from{
1449
1298
  opacity:0;
1450
1299
  transform:translateY(-8px);
@@ -1452,158 +1301,331 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1452
1301
  }
1453
1302
 
1454
1303
  @media (prefers-reduced-motion: reduce){
1455
- .tds-combo-box-popover[data-entering],.tds-combo-box-popover[data-exiting]{
1304
+ .tds-dropdown-popover[data-entering],.tds-dropdown-popover[data-exiting]{
1456
1305
  animation:none;
1457
1306
  }
1458
-
1459
- .tds-combo-box-button > svg{
1460
- transition:none;
1461
- }
1462
1307
  }
1463
1308
 
1464
- .tds-combo-box-list{
1465
- padding:0;
1466
- margin:0;
1309
+ .tds-dropdown-popover [role="menu"]{
1310
+ outline:0;
1467
1311
  }
1312
+ .tds-dropdown-item{
1313
+ --tds-dropdown-item-color:var(--t-text-color);
1314
+ --tds-dropdown-item-row-gap:0;
1315
+ --tds-dropdown-item-column-gap:var(--t-spacing-1);
1468
1316
 
1469
- .tds-combo-box-list-item{
1470
- display:block;
1317
+ display:flex;
1318
+ row-gap:var(--tds-dropdown-item-row-gap);
1319
+ -moz-column-gap:var(--tds-dropdown-item-column-gap);
1320
+ column-gap:var(--tds-dropdown-item-column-gap);
1321
+ align-items:center;
1471
1322
  padding-block:var(--t-spacing-1);
1472
- padding-inline:var(--t-spacing-2) var(--t-spacing-1);
1473
- overflow:hidden;
1474
- text-overflow:ellipsis;
1323
+ padding-inline:var(--t-spacing-1-half);
1475
1324
  font-size:1rem;
1476
- color:var(--t-text-color);
1477
- white-space:nowrap;
1325
+ color:var(--tds-dropdown-item-color);
1326
+ text-decoration:none;
1478
1327
  cursor:default;
1328
+ outline:0;
1479
1329
  border-radius:var(--t-border-radius);
1480
1330
  }
1481
-
1482
- .tds-combo-box-list-item[data-hovered]:not([data-disabled]),.tds-combo-box-list-item[data-focus-visible]{
1331
+ .tds-dropdown-item[data-hovered]:not([data-disabled]),.tds-dropdown-item[data-focus-visible]{
1483
1332
  background:var(--t-fill-color-neutral-070);
1484
1333
  }
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]){
1334
+ .tds-dropdown-item[data-pressed]:not([data-disabled]){
1491
1335
  background:var(--t-fill-color-neutral-060);
1492
1336
  }
1337
+ .tds-dropdown-item[data-disabled]{
1338
+ --tds-dropdown-item-color:var(--t-form-color-disabled);
1493
1339
 
1494
- .tds-combo-box-list-item[data-disabled]{
1495
- color:var(--t-form-color-disabled);
1496
1340
  cursor:not-allowed;
1497
1341
  }
1498
1342
 
1499
- .tds-combo-box-list-item[data-disabled][data-hovered]{
1500
- background:transparent;
1501
- }
1343
+ .tds-dropdown-item--destructive{
1344
+ --tds-dropdown-item-color:var(--t-text-color-status-error);
1345
+ }
1502
1346
 
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);
1347
+ .tds-dropdown-item--staff-only{
1348
+ --tds-dropdown-item-color:var(--t-fill-color-product-staff);
1349
+ }
1350
+ a.tds-dropdown-item:is(:hover, :active){
1351
+ color:var(--tds-dropdown-item-color);
1352
+ }
1353
+ .tds-dropdown-item [slot="prefix"],
1354
+ .tds-dropdown-item [slot="suffix"]{
1355
+ flex-shrink:0;
1356
+ }
1357
+
1358
+ .tds-dropdown-item [slot="label"]{
1359
+ flex:1;
1360
+ min-width:0;
1361
+ overflow:hidden;
1362
+ text-overflow:ellipsis;
1363
+ white-space:nowrap;
1364
+ }
1365
+
1366
+ .tds-dropdown-item [slot="description"]{
1367
+ font-size:var(--t-font-size-sm);
1509
1368
  color:var(--t-text-color-secondary);
1510
1369
  }
1511
1370
 
1512
- .tds-combo-box-load-more{
1513
- position:relative;
1514
- min-block-size:calc(var(--t-spacing-3) + var(--t-spacing-1));
1371
+ .tds-dropdown-item:has([slot="description"]){
1372
+ --tds-dropdown-item-row-gap:var(--t-spacing-half);
1373
+ --tds-dropdown-item-column-gap:0;
1374
+
1375
+ display:grid;
1376
+ grid-template-areas:"prefix label suffix" ". description .";
1377
+ grid-template-columns:auto 1fr auto;
1515
1378
  }
1516
1379
 
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;
1380
+ .tds-dropdown-item:has([slot="description"]) [slot="prefix"]{
1381
+ grid-area:prefix;
1382
+ margin-inline-end:var(--t-spacing-1);
1521
1383
  }
1522
1384
 
1523
- .tds-combo-box-list-section:not(:first-child){
1524
- margin-block-start:var(--t-spacing-half);
1525
- }
1385
+ .tds-dropdown-item:has([slot="description"]) [slot="label"]{
1386
+ grid-area:label;
1387
+ }
1526
1388
 
1527
- .tds-combo-box-section-header{
1389
+ .tds-dropdown-item:has([slot="description"]) [slot="description"]{
1390
+ grid-area:description;
1391
+ }
1392
+
1393
+ .tds-dropdown-item:has([slot="description"]) [slot="suffix"]{
1394
+ grid-area:suffix;
1395
+ margin-inline-start:var(--t-spacing-1);
1396
+ }
1397
+ .tds-dropdown-section:not(:first-child){
1398
+ margin-block-start:var(--t-spacing-half);
1399
+ }
1400
+
1401
+ .tds-dropdown-section-label{
1528
1402
  padding-block:var(--t-spacing-1);
1529
- padding-inline:var(--t-spacing-1);
1403
+ padding-inline:var(--t-spacing-half);
1530
1404
  font-size:var(--t-font-size-sm);
1531
1405
  font-weight:var(--t-font-weight-semibold);
1532
1406
  color:var(--t-text-color-secondary);
1533
1407
  }
1408
+ .tds-dropdown-separator{
1409
+ margin-block:var(--t-spacing-half);
1410
+ margin-inline:0;
1411
+ border:0;
1412
+ border-top:1px solid var(--t-border-color);
1413
+ }
1534
1414
 
1535
- .tds-checkbox-group{
1536
- --tds-checkbox-group-font-size:var(--t-font-size-md);
1537
- --tds-checkbox-group-line-height:1.4;
1538
- --tds-checkbox-group-gap:var(--t-spacing-1);
1415
+ .tds-radio-group{
1416
+ --tds-radio-group-font-size:var(--t-font-size-md);
1417
+ --tds-radio-group-line-height:1.4;
1418
+ --tds-radio-group-gap:var(--t-spacing-1);
1539
1419
 
1540
- --tds-checkbox-group-description-font-size:var(--t-font-size-sm);
1541
- --tds-checkbox-group-description-line-height:1.35;
1542
- --tds-checkbox-group-description-color:var(--t-text-color-secondary);
1543
- --tds-checkbox-group-description-invalid-icon-display:none;
1420
+ --tds-radio-group-description-font-size:var(--t-font-size-sm);
1421
+ --tds-radio-group-description-line-height:1.35;
1422
+ --tds-radio-group-description-color:var(--t-text-color-secondary);
1423
+ --tds-radio-group-description-invalid-icon-display:none;
1544
1424
  display:flex;
1545
1425
  flex-direction:column;
1546
1426
  gap:0;
1547
1427
  padding:0;
1548
1428
  margin:0;
1549
1429
 
1550
- font-size:var(--tds-checkbox-group-font-size);
1551
- line-height:var(--tds-checkbox-group-line-height);
1430
+ font-size:var(--tds-radio-group-font-size);
1431
+ line-height:var(--tds-radio-group-line-height);
1552
1432
  border:0;
1553
1433
  }
1554
1434
 
1555
- .tds-checkbox-group legend{
1435
+ .tds-radio-group legend{
1556
1436
  float:left;
1557
1437
  padding:0;
1558
1438
  margin:0;
1559
1439
  }
1560
1440
 
1561
- .tds-checkbox-group[aria-invalid="true"]{
1562
- --tds-checkbox-group-description-color:var(--t-text-color-status-error);
1563
- --tds-checkbox-group-description-invalid-icon-display:inline-block;
1441
+ .tds-radio-group[aria-invalid="true"]{
1442
+ --tds-radio-group-description-color:var(--t-text-color-status-error);
1443
+ --tds-radio-group-description-invalid-icon-display:inline-block;
1444
+ }
1445
+
1446
+ .tds-radio-group[aria-invalid="true"] .tds-radio{
1447
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
1448
+ }
1449
+
1450
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
1451
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1452
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
1453
+ }
1454
+
1455
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
1456
+ --tds-radio-input-background-color:var(--t-icon-color-inverted);
1457
+ }
1458
+
1459
+ .tds-radio-group:has(input:required) legend::after{
1460
+ margin-left:.25ch;
1461
+ color:var(--t-text-color-status-error);
1462
+ content:"*";
1463
+ }
1464
+
1465
+ .tds-radio-group-fields{
1466
+ display:flex;
1467
+ flex-direction:column;
1468
+ gap:var(--tds-radio-group-gap);
1469
+ align-items:flex-start;
1470
+ margin-top:var(--t-spacing-1);
1471
+ }
1472
+
1473
+ .tds-radio-group-description{
1474
+ display:flex;
1475
+ gap:var(--t-spacing-half);
1476
+ align-items:flex-start;
1477
+ margin:var(--t-spacing-fourth) 0 0;
1478
+ font-size:var(--tds-radio-group-description-font-size);
1479
+ line-height:var(--tds-radio-group-description-line-height);
1480
+ color:var(--tds-radio-group-description-color);
1481
+ cursor:text;
1482
+ }
1483
+
1484
+ .tds-radio-group-description .tds-radio-group-description-invalid-icon{
1485
+ display:var(--tds-radio-group-description-invalid-icon-display);
1486
+ flex-shrink:0;
1487
+ margin-top:calc(.5lh - .5em);
1488
+ line-height:var(--tds-radio-group-description-line-height);
1489
+ }
1490
+
1491
+ .tds-radio-group--sm{
1492
+ --tds-radio-group-line-height:1.35;
1493
+ --tds-radio-group-font-size:var(--t-font-size-sm);
1494
+ --tds-radio-group-description-font-size:var(--t-font-size-xs);
1495
+ --tds-radio-group-description-line-height:1.3;
1496
+ }
1497
+
1498
+ .tds-radio{
1499
+ --tds-radio-font-size:var(--t-font-size-md);
1500
+ --tds-radio-cursor:pointer;
1501
+ --tds-radio-line-height:1.4;
1502
+ --tds-radio-transition-property:border-width;
1503
+
1504
+ --tds-radio-input-size:var(--t-element-size-md);
1505
+ --tds-radio-input-border-radius:var(--t-border-radius-round);
1506
+ --tds-radio-input-border-color:var(--t-form-border-color);
1507
+ --tds-radio-input-border-width:var(--t-form-border-width);
1508
+ --tds-radio-input-background-color:var(--t-form-background-color);
1509
+
1510
+ --tds-radio-label-color:var(--t-form-color);
1511
+
1512
+ --tds-radio-description-font-size:var(--t-font-size-sm);
1513
+ --tds-radio-description-line-height:1.35;
1514
+ --tds-radio-description-color:var(--t-text-color-secondary);
1515
+
1516
+ position:relative;
1517
+ display:inline-grid;
1518
+ grid-template-columns:auto;
1519
+ grid-auto-columns:1fr;
1520
+ gap:var(--t-spacing-fourth) 0;
1521
+ line-height:var(--tds-radio-line-height);
1522
+ -webkit-user-select:none;
1523
+ -moz-user-select:none;
1524
+ user-select:none;
1525
+ }
1526
+
1527
+ .tds-radio label{
1528
+ grid-area:1 / 2;
1529
+ padding-inline-start:var(--t-spacing-1);
1530
+ font-size:var(--tds-radio-font-size);
1531
+ font-weight:var(--t-font-weight-normal);
1532
+ color:var(--tds-radio-label-color);
1533
+ cursor:var(--tds-radio-cursor);
1534
+ }
1535
+
1536
+ .tds-radio input[type="radio"]{
1537
+ position:relative;
1538
+ width:1em;
1539
+ height:1em;
1540
+ margin:calc((1lh - 1em) / 2) 0 0;
1541
+ font-size:var(--tds-radio-font-size);
1542
+ line-height:inherit;
1543
+ -webkit-appearance:none;
1544
+ -moz-appearance:none;
1545
+ appearance:none;
1546
+ cursor:var(--tds-radio-cursor);
1547
+ background-color:var(--tds-radio-input-background-color);
1548
+ border:var(--tds-radio-input-border-width) solid var(--tds-radio-input-border-color);
1549
+ border-radius:var(--tds-radio-input-border-radius);
1550
+ transition-timing-function:var(--t-ease-in-out);
1551
+ transition-duration:var(--t-duration-200);
1552
+ transition-property:var(--tds-radio-transition-property);
1553
+ }
1554
+
1555
+ :is(.tds-radio input[type="radio"]):hover:not(:disabled){
1556
+ --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
1557
+ --tds-radio-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
1558
+ }
1559
+
1560
+ :is(.tds-radio input[type="radio"]):focus-visible{
1561
+ outline:var(--t-focus-ring-outline);
1562
+ outline-offset:var(--t-focus-ring-offset);
1563
+ }
1564
+
1565
+ :is(.tds-radio input[type="radio"]):disabled{
1566
+ pointer-events:none;
1567
+ }
1568
+
1569
+ @media (prefers-reduced-motion: reduce){
1570
+
1571
+ .tds-radio input[type="radio"]{
1572
+ --tds-radio-transition-property:none;
1573
+ }
1574
+ }
1575
+
1576
+ .tds-radio:has(input:checked){
1577
+ --tds-radio-input-background-color:var(--t-icon-color-inverted);
1578
+ --tds-radio-input-border-color:var(--t-border-color-control-info);
1579
+ --tds-radio-input-border-width:4px;
1564
1580
  }
1565
1581
 
1566
- .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) legend::after{
1567
- margin-left:.25ch;
1568
- color:var(--t-text-color-status-error);
1569
- content:"*";
1582
+ .tds-radio:has(input:checked) input:hover:not(:disabled){
1583
+ --tds-radio-input-background-color:var(--t-icon-color-inverted);
1584
+ --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
1570
1585
  }
1571
1586
 
1572
- .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
1573
- content:none;
1587
+ .tds-radio:has(input:user-invalid){
1588
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
1589
+ }
1590
+
1591
+ .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
1592
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1593
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
1574
1594
  }
1575
1595
 
1576
- .tds-checkbox-group-fields{
1577
- display:flex;
1578
- flex-direction:column;
1579
- gap:var(--tds-checkbox-group-gap);
1580
- align-items:flex-start;
1581
- margin-top:var(--t-spacing-1);
1582
- }
1596
+ .tds-radio:has(input:disabled){
1597
+ --tds-radio-input-background-color:var(--t-form-background-color-disabled);
1598
+ --tds-radio-input-border-color:var(--t-form-border-color-disabled);
1583
1599
 
1584
- .tds-checkbox-group-description{
1600
+ --tds-radio-label-color:var(--t-form-color-disabled);
1601
+ --tds-radio-description-color:var(--t-form-color-disabled);
1602
+ --tds-radio-cursor:not-allowed;
1603
+ }
1604
+
1605
+ .tds-radio:has(input:disabled) input:checked{
1606
+ --tds-radio-input-background-color:var(--t-form-background-color);
1607
+ --tds-radio-input-border-color:var(--t-form-border-color-disabled);
1608
+ }
1609
+
1610
+ .tds-radio-description{
1585
1611
  display:flex;
1612
+ grid-area:2 / 2;
1586
1613
  gap:var(--t-spacing-half);
1587
1614
  align-items:flex-start;
1588
- margin:var(--t-spacing-fourth) 0 0;
1589
- font-size:var(--tds-checkbox-group-description-font-size);
1590
- line-height:var(--tds-checkbox-group-description-line-height);
1591
- color:var(--tds-checkbox-group-description-color);
1615
+ padding-inline-start:var(--t-spacing-1);
1616
+ margin:0;
1617
+ font-size:var(--tds-radio-description-font-size);
1618
+ line-height:var(--tds-radio-description-line-height);
1619
+ color:var(--tds-radio-description-color);
1592
1620
  cursor:text;
1593
1621
  }
1594
1622
 
1595
- .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
1596
- display:var(--tds-checkbox-group-description-invalid-icon-display);
1597
- flex-shrink:0;
1598
- margin-top:calc(.5lh - .5em);
1599
- line-height:var(--tds-checkbox-group-description-line-height);
1600
- }
1601
-
1602
- .tds-checkbox-group--sm{
1603
- --tds-checkbox-group-line-height:1.35;
1604
- --tds-checkbox-group-font-size:var(--t-font-size-sm);
1605
- --tds-checkbox-group-description-font-size:var(--t-font-size-xs);
1606
- --tds-checkbox-group-description-line-height:1.3;
1623
+ .tds-radio--sm{
1624
+ --tds-radio-line-height:1.35;
1625
+ --tds-radio-input-size:var(--t-element-size-sm);
1626
+ --tds-radio-font-size:var(--t-font-size-sm);
1627
+ --tds-radio-description-font-size:var(--t-font-size-xs);
1628
+ --tds-radio-description-line-height:1.3;
1607
1629
  }
1608
1630
 
1609
1631
 
@@ -1616,7 +1638,6 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1616
1638
  inline-size:1em;
1617
1639
  block-size:2em;
1618
1640
  }
1619
-
1620
1641
  @supports (field-sizing: content){
1621
1642
  .tds-input--auto-width{
1622
1643
  inline-size:-moz-fit-content;
@@ -1774,244 +1795,135 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1774
1795
  margin-inline-end:auto;
1775
1796
  }
1776
1797
 
1777
- .tds-radio{
1778
- --tds-radio-font-size:var(--t-font-size-md);
1779
- --tds-radio-cursor:pointer;
1780
- --tds-radio-line-height:1.4;
1781
- --tds-radio-transition-property:border-width;
1782
-
1783
- --tds-radio-input-size:var(--t-element-size-md);
1784
- --tds-radio-input-border-radius:var(--t-border-radius-round);
1785
- --tds-radio-input-border-color:var(--t-form-border-color);
1786
- --tds-radio-input-border-width:var(--t-form-border-width);
1787
- --tds-radio-input-background-color:var(--t-form-background-color);
1788
-
1789
- --tds-radio-label-color:var(--t-form-color);
1790
-
1791
- --tds-radio-description-font-size:var(--t-font-size-sm);
1792
- --tds-radio-description-line-height:1.35;
1793
- --tds-radio-description-color:var(--t-text-color-secondary);
1794
-
1795
- position:relative;
1796
- display:inline-grid;
1797
- grid-template-columns:auto;
1798
- grid-auto-columns:1fr;
1799
- gap:var(--t-spacing-fourth) 0;
1800
- line-height:var(--tds-radio-line-height);
1801
- -webkit-user-select:none;
1802
- -moz-user-select:none;
1803
- user-select:none;
1804
- }
1805
-
1806
- .tds-radio label{
1807
- grid-area:1 / 2;
1808
- padding-inline-start:var(--t-spacing-1);
1809
- font-size:var(--tds-radio-font-size);
1810
- font-weight:var(--t-font-weight-normal);
1811
- color:var(--tds-radio-label-color);
1812
- cursor:var(--tds-radio-cursor);
1813
- }
1814
-
1815
- .tds-radio input[type="radio"]{
1816
- position:relative;
1817
- width:1em;
1818
- height:1em;
1819
- margin:calc((1lh - 1em) / 2) 0 0;
1820
- font-size:var(--tds-radio-font-size);
1821
- line-height:inherit;
1822
- -webkit-appearance:none;
1823
- -moz-appearance:none;
1824
- appearance:none;
1825
- cursor:var(--tds-radio-cursor);
1826
- background-color:var(--tds-radio-input-background-color);
1827
- border:var(--tds-radio-input-border-width) solid var(--tds-radio-input-border-color);
1828
- border-radius:var(--tds-radio-input-border-radius);
1829
- transition-timing-function:var(--t-ease-in-out);
1830
- transition-duration:var(--t-duration-200);
1831
- transition-property:var(--tds-radio-transition-property);
1832
- }
1833
-
1834
- :is(.tds-radio input[type="radio"]):hover:not(:disabled){
1835
- --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
1836
- --tds-radio-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
1837
- }
1838
-
1839
- :is(.tds-radio input[type="radio"]):focus-visible{
1840
- outline:var(--t-focus-ring-outline);
1841
- outline-offset:var(--t-focus-ring-offset);
1842
- }
1843
-
1844
- :is(.tds-radio input[type="radio"]):disabled{
1845
- pointer-events:none;
1846
- }
1847
-
1848
- @media (prefers-reduced-motion: reduce){
1849
-
1850
- .tds-radio input[type="radio"]{
1851
- --tds-radio-transition-property:none;
1852
- }
1853
- }
1854
-
1855
- .tds-radio:has(input:checked){
1856
- --tds-radio-input-background-color:var(--t-icon-color-inverted);
1857
- --tds-radio-input-border-color:var(--t-border-color-control-info);
1858
- --tds-radio-input-border-width:4px;
1859
- }
1860
-
1861
- .tds-radio:has(input:checked) input:hover:not(:disabled){
1862
- --tds-radio-input-background-color:var(--t-icon-color-inverted);
1863
- --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
1864
- }
1865
-
1866
- .tds-radio:has(input:user-invalid){
1867
- --tds-radio-input-border-color:var(--t-form-border-color-error);
1868
- }
1869
-
1870
- .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
1871
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1872
- --tds-radio-input-background-color:var(--t-form-background-color-error);
1873
- }
1874
-
1875
- .tds-radio:has(input:disabled){
1876
- --tds-radio-input-background-color:var(--t-form-background-color-disabled);
1877
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
1878
-
1879
- --tds-radio-label-color:var(--t-form-color-disabled);
1880
- --tds-radio-description-color:var(--t-form-color-disabled);
1881
- --tds-radio-cursor:not-allowed;
1882
- }
1883
-
1884
- .tds-radio:has(input:disabled) input:checked{
1885
- --tds-radio-input-background-color:var(--t-form-background-color);
1886
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
1887
- }
1798
+ .tds-search-input-control{
1799
+ --tds-search-input-outline-color:rgb(from var(--t-focus-ring-color) r g b / 0);
1800
+ --tds-search-input-outline-offset:0;
1801
+ --tds-search-input-cursor:text;
1888
1802
 
1889
- .tds-radio-description{
1890
1803
  display:flex;
1891
- grid-area:2 / 2;
1892
- gap:var(--t-spacing-half);
1893
- align-items:flex-start;
1894
- padding-inline-start:var(--t-spacing-1);
1895
- margin:0;
1896
- font-size:var(--tds-radio-description-font-size);
1897
- line-height:var(--tds-radio-description-line-height);
1898
- color:var(--tds-radio-description-color);
1899
- cursor:text;
1900
- }
1901
-
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;
1908
- }
1909
-
1910
- .tds-input:has(textarea){
1911
- --tds-input-padding-block:6px;
1912
- --tds-input-resizer-size:var(--t-element-size-sm);
1913
- --tds-input-resizer-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cg fill='none' stroke='%236f7784' stroke-linecap='round' stroke-width='1.25'%3E%3Cpath d='M5.5 13l7.5-7.5'/%3E%3Cpath d='M9 13l4-4'/%3E%3C/g%3E%3C/svg%3E");
1914
- }
1915
-
1916
- @supports (x: attr(x type(*))){
1917
-
1918
- .tds-input textarea{
1919
- --tds-input-min-height:calc((attr(rows type(<number>), 3) * 1lh) + (var(--tds-input-padding-block) * 2) + 2px);
1920
- }
1921
- }
1922
-
1923
- .tds-input.tds-textarea--resize-vertical textarea{
1924
- resize:vertical;
1925
- }
1926
-
1927
- .tds-input.tds-textarea--resize-none textarea{
1928
- resize:none;
1929
- }
1930
-
1931
- .tds-input.tds-textarea--resize-auto textarea{
1932
- resize:vertical;
1933
- }
1934
-
1935
- @supports (field-sizing: content){
1936
- .tds-input.tds-textarea--resize-auto textarea{
1937
- field-sizing:content;
1938
- resize:none;
1939
- }
1940
- }
1941
-
1942
- .tds-input textarea{
1943
- --tds-input-scrollbar-thumb-color-default:var(--t-fill-color-neutral-040);
1944
- --tds-input-scrollbar-thumb-color-hidden:transparent;
1945
- --tds-input-scrollbar-thumb-color-hover:var(--t-fill-color-neutral-030);
1946
- --tds-input-scrollbar-thumb-color-thumb-hover:var(--t-fill-color-neutral-020);
1947
- --tds-input-scrollbar-thumb-color-thumb-active:var(--t-fill-color-neutral-010);
1948
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-default);
1949
- --tds-input-scrollbar-surface-color:rgba(0, 0, 0, 0);
1950
- --tds-input-scrollbar-thumb-border-radius:999px;
1951
- --tds-input-scrollbar-thumb-border-width:3px;
1952
- --tds-input-scrollbar-track-margin-block:.125rem;
1953
- scrollbar-color:initial;
1804
+ gap:var(--tds-field-padding-inline);
1805
+ align-items:center;
1806
+ inline-size:100%;
1807
+ min-block-size:var(--tds-field-min-height);
1808
+ padding-inline:var(--tds-field-padding-inline);
1809
+ font-size:var(--tds-field-font-size);
1810
+ color:var(--tds-field-color);
1811
+ cursor:var(--tds-search-input-cursor);
1812
+ outline:var(--t-focus-ring-width) solid transparent;
1813
+ outline-color:var(--tds-search-input-outline-color);
1814
+ outline-offset:var(--tds-search-input-outline-offset);
1815
+ background-color:var(--tds-field-background-color);
1816
+ border:var(--t-form-border-width) solid var(--tds-field-border-color);
1817
+ border-radius:var(--t-form-border-radius);
1954
1818
  transition-timing-function:var(--t-ease-in-out);
1955
1819
  transition-duration:var(--t-duration-200);
1956
- transition-property:var(--tds-input-transition-property), --tds-input-scrollbar-thumb-color;
1820
+ transition-property:background-color, border-color, outline-color, outline-offset;
1957
1821
  }
1958
1822
 
1959
- @media (pointer: fine){
1960
- :is(.tds-input textarea)::-webkit-scrollbar{
1961
- width:12px;
1962
- height:12px;
1963
- cursor:default;
1964
- }
1823
+ .tds-search-input-control:hover:not(:has(input:focus),:has(:disabled,[readonly])){
1824
+ border-color:var(--tds-field-border-color-hover);
1825
+ }
1965
1826
 
1966
- :is(.tds-input textarea)::-webkit-scrollbar-thumb{
1967
- cursor:default;
1968
- background:var(--tds-input-scrollbar-thumb-color);
1969
- background-clip:content-box;
1970
- border:var(--tds-input-scrollbar-thumb-border-width) solid var(--tds-input-scrollbar-surface-color);
1971
- border-radius:var(--tds-input-scrollbar-thumb-border-radius);
1972
- }
1827
+ .tds-search-input-control:has(input:focus){
1828
+ --tds-search-input-outline-color:var(--t-focus-ring-color);
1829
+ --tds-search-input-outline-offset:var(--t-focus-ring-offset);
1973
1830
 
1974
- :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1975
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
1976
- }
1831
+ border-color:var(--t-form-border-color-focus);
1832
+ }
1977
1833
 
1978
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
1979
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
1980
- }
1834
+ .tds-search-input-control input{
1835
+ flex:1;
1836
+ min-inline-size:0;
1837
+ padding:0;
1838
+ overflow:hidden;
1839
+ text-overflow:ellipsis;
1840
+ font-family:inherit;
1841
+ font-size:inherit;
1842
+ color:inherit;
1843
+ white-space:nowrap;
1844
+ -webkit-appearance:none;
1845
+ -moz-appearance:none;
1846
+ appearance:none;
1847
+ outline:0;
1848
+ background-color:transparent;
1849
+ border:0;
1850
+ }
1981
1851
 
1982
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
1983
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
1852
+ :is(.tds-search-input-control input)::-moz-placeholder{
1853
+ color:var(--tds-field-placeholder-color);
1854
+ -moz-user-select:none;
1855
+ user-select:none;
1984
1856
  }
1985
1857
 
1986
- :is(.tds-input textarea)::-webkit-scrollbar-corner{
1987
- background:var(--tds-input-scrollbar-surface-color);
1858
+ :is(.tds-search-input-control input)::placeholder{
1859
+ color:var(--tds-field-placeholder-color);
1860
+ -webkit-user-select:none;
1861
+ -moz-user-select:none;
1862
+ user-select:none;
1988
1863
  }
1989
1864
 
1990
- :is(.tds-input textarea)::-webkit-resizer{
1991
- background:var(--tds-input-resizer-icon) no-repeat;
1992
- background-position:right bottom;
1993
- background-size:var(--tds-input-resizer-size) var(--tds-input-resizer-size);
1865
+ :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{
1866
+ -webkit-appearance:none;
1867
+ appearance:none;
1994
1868
  }
1995
1869
 
1996
- :is(.tds-input textarea)::-webkit-scrollbar-track{
1997
- margin-block:var(--tds-input-scrollbar-track-margin-block);
1998
- cursor:default;
1999
- }
1870
+ .tds-search-input-control .tds-search-input-icon{
1871
+ flex-shrink:0;
1872
+ inline-size:1em;
1873
+ color:var(--t-icon-color-dim);
1874
+ }
2000
1875
 
2001
- @supports (-moz-appearance: none){
2002
- :is(.tds-input textarea){
2003
- scrollbar-color:var(--tds-input-scrollbar-thumb-color-default) var(--tds-input-scrollbar-surface-color);
2004
- scrollbar-width:thin;
2005
- }
1876
+ .tds-search-input-control .tds-search-input-clear-icon{
1877
+ inline-size:calc(var(--tds-field-font-size) * .8);
1878
+ block-size:calc(var(--tds-field-font-size) * .8);
1879
+ }
2006
1880
 
2007
- @media (hover){
2008
- :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
2009
- scrollbar-color:var(--tds-input-scrollbar-thumb-color-hover) var(--tds-input-scrollbar-surface-color);
2010
- }
2011
- }
1881
+ .tds-search-input-control .tds-btn{
1882
+ --tds-btn-color:var(--t-icon-color-dim);
1883
+ --tds-btn-padding-truncated-x:0;
1884
+ --tds-search-input-clear-button-visibility:hidden;
1885
+
1886
+ visibility:var(--tds-search-input-clear-button-visibility);
1887
+ flex-shrink:0;
1888
+ }
1889
+
1890
+ .tds-search-input-control:has(input:is(:user-invalid,[aria-invalid="true"])){
1891
+ --tds-field-background-color:var(--t-form-background-color-error);
1892
+ --tds-field-border-color:var(--t-form-border-color-error);
1893
+ --tds-field-border-color-hover:var(--t-form-border-color-error-hover);
1894
+ }
1895
+
1896
+ .tds-search-input-control:has(:disabled){
1897
+ --tds-field-border-color:var(--t-form-border-color-disabled);
1898
+ --tds-field-background-color:var(--t-form-background-color-disabled);
1899
+ --tds-field-color:var(--t-form-color-disabled);
1900
+ --tds-search-input-cursor:not-allowed;
1901
+ }
1902
+
1903
+ .tds-search-input-control:has([readonly]){
1904
+ --tds-field-border-color:var(--t-form-border-color-readonly);
1905
+ --tds-field-border-color-hover:var(--t-form-border-color-readonly);
1906
+ --tds-field-background-color:var(--t-form-background-color-readonly);
1907
+ --tds-field-color:var(--t-form-color-readonly);
1908
+ }
1909
+
1910
+ .tds-search-input-control:has([readonly]):has(input:focus){
1911
+ border-color:var(--t-form-border-color-hover);
2012
1912
  }
1913
+
1914
+ @media (prefers-reduced-motion: reduce){
1915
+
1916
+ .tds-search-input-control{
1917
+ transition-property:none;
1918
+ }
2013
1919
  }
2014
1920
 
1921
+ .tds-search-input-control--has-value:is(:hover, :has(input:focus)):not(
1922
+ :has(:disabled, [readonly])
1923
+ ) .tds-btn{
1924
+ --tds-search-input-clear-button-visibility:visible;
1925
+ }
1926
+
2015
1927
  .tds-toggle-switch{
2016
1928
  --tds-toggle-switch-font-size:var(--t-font-size-md);
2017
1929
  --tds-toggle-switch-cursor:pointer;
@@ -2152,665 +2064,610 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
2152
2064
  --tds-toggle-switch-display:inline-flex;
2153
2065
  }
2154
2066
 
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;
2067
+ .tds-input:has(textarea){
2068
+ --tds-input-padding-block:6px;
2069
+ --tds-input-resizer-size:var(--t-element-size-sm);
2070
+ --tds-input-resizer-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cg fill='none' stroke='%236f7784' stroke-linecap='round' stroke-width='1.25'%3E%3Cpath d='M5.5 13l7.5-7.5'/%3E%3Cpath d='M9 13l4-4'/%3E%3C/g%3E%3C/svg%3E");
2195
2071
  }
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
2072
 
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);
2073
+ @supports (x: attr(x type(*))){
2074
+
2075
+ .tds-input textarea{
2076
+ --tds-input-min-height:calc((attr(rows type(<number>), 3) * 1lh) + (var(--tds-input-padding-block) * 2) + 2px);
2214
2077
  }
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
2078
  }
2221
- .tds-dropdown-item[data-disabled]{
2222
- --tds-dropdown-item-color:var(--t-form-color-disabled);
2223
2079
 
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;
2080
+ .tds-input.tds-textarea--resize-vertical textarea{
2081
+ resize:vertical;
2082
+ }
2253
2083
 
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);
2084
+ .tds-input.tds-textarea--resize-none textarea{
2085
+ resize:none;
2086
+ }
2087
+
2088
+ .tds-input.tds-textarea--resize-auto textarea{
2089
+ resize:vertical;
2090
+ }
2091
+
2092
+ @supports (field-sizing: content){
2093
+ .tds-input.tds-textarea--resize-auto textarea{
2094
+ field-sizing:content;
2095
+ resize:none;
2096
+ }
2097
+ }
2098
+
2099
+ .tds-input textarea{
2100
+ --tds-input-scrollbar-thumb-color-default:var(--t-fill-color-neutral-040);
2101
+ --tds-input-scrollbar-thumb-color-hidden:transparent;
2102
+ --tds-input-scrollbar-thumb-color-hover:var(--t-fill-color-neutral-030);
2103
+ --tds-input-scrollbar-thumb-color-thumb-hover:var(--t-fill-color-neutral-020);
2104
+ --tds-input-scrollbar-thumb-color-thumb-active:var(--t-fill-color-neutral-010);
2105
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-default);
2106
+ --tds-input-scrollbar-surface-color:rgba(0, 0, 0, 0);
2107
+ --tds-input-scrollbar-thumb-border-radius:999px;
2108
+ --tds-input-scrollbar-thumb-border-width:3px;
2109
+ --tds-input-scrollbar-track-margin-block:.125rem;
2110
+ scrollbar-color:initial;
2111
+ transition-timing-function:var(--t-ease-in-out);
2112
+ transition-duration:var(--t-duration-200);
2113
+ transition-property:var(--tds-input-transition-property), --tds-input-scrollbar-thumb-color;
2287
2114
  }
2288
2115
 
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);
2116
+ @media (pointer: fine){
2117
+ :is(.tds-input textarea)::-webkit-scrollbar{
2118
+ width:12px;
2119
+ height:12px;
2120
+ cursor:default;
2121
+ }
2293
2122
 
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;
2123
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb{
2124
+ cursor:default;
2125
+ background:var(--tds-input-scrollbar-thumb-color);
2126
+ background-clip:content-box;
2127
+ border:var(--tds-input-scrollbar-thumb-border-width) solid var(--tds-input-scrollbar-surface-color);
2128
+ border-radius:var(--tds-input-scrollbar-thumb-border-radius);
2129
+ }
2303
2130
 
2304
- font-size:var(--tds-radio-group-font-size);
2305
- line-height:var(--tds-radio-group-line-height);
2306
- border:0;
2307
- }
2131
+ :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
2132
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
2133
+ }
2308
2134
 
2309
- .tds-radio-group legend{
2310
- float:left;
2311
- padding:0;
2312
- margin:0;
2313
- }
2135
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
2136
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
2137
+ }
2314
2138
 
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
- }
2139
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
2140
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
2141
+ }
2319
2142
 
2320
- .tds-radio-group[aria-invalid="true"] .tds-radio{
2321
- --tds-radio-input-border-color:var(--t-form-border-color-error);
2143
+ :is(.tds-input textarea)::-webkit-scrollbar-corner{
2144
+ background:var(--tds-input-scrollbar-surface-color);
2322
2145
  }
2323
2146
 
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
- }
2147
+ :is(.tds-input textarea)::-webkit-resizer{
2148
+ background:var(--tds-input-resizer-icon) no-repeat;
2149
+ background-position:right bottom;
2150
+ background-size:var(--tds-input-resizer-size) var(--tds-input-resizer-size);
2151
+ }
2328
2152
 
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);
2153
+ :is(.tds-input textarea)::-webkit-scrollbar-track{
2154
+ margin-block:var(--tds-input-scrollbar-track-margin-block);
2155
+ cursor:default;
2156
+ }
2157
+
2158
+ @supports (-moz-appearance: none){
2159
+ :is(.tds-input textarea){
2160
+ scrollbar-color:var(--tds-input-scrollbar-thumb-color-default) var(--tds-input-scrollbar-surface-color);
2161
+ scrollbar-width:thin;
2331
2162
  }
2332
2163
 
2333
- .tds-radio-group:has(input:required) legend::after{
2334
- margin-left:.25ch;
2335
- color:var(--t-text-color-status-error);
2336
- content:"*";
2164
+ @media (hover){
2165
+ :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
2166
+ scrollbar-color:var(--tds-input-scrollbar-thumb-color-hover) var(--tds-input-scrollbar-surface-color);
2167
+ }
2168
+ }
2337
2169
  }
2170
+ }
2338
2171
 
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
2172
 
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
- }
2173
+ @media (prefers-reduced-motion: no-preference){
2357
2174
 
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);
2175
+ :root{
2176
+ interpolate-size:allow-keywords;
2177
+ }
2363
2178
  }
2364
2179
 
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
- }
2180
+ @layer tds-component{
2181
+ tds-sidenav,
2182
+ .tds-sidenav{
2183
+ --tds-sidenav-indent:12px;
2184
+ --tds-sidenav-item-depth:0;
2371
2185
 
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
- }
2186
+ --tds-sidenav-item-transition:background-color var(--t-duration-200) var(--t-ease-in-out);
2386
2187
 
2387
- @keyframes spinner-rotate{
2388
- to{
2389
- transform:rotate(360deg);
2188
+ --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;
2189
+ --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;
2190
+ --tds-sidenav-collapse-closed-opacity:0;
2191
+ --tds-sidenav-collapse-open-opacity:1;
2192
+ --tds-sidenav-collapse-closed-transform:translateY(-8px);
2193
+ --tds-sidenav-collapse-open-transform:translateY(0);
2194
+
2195
+ --tds-sidenav-item-icon-size:var(--t-element-size-md);
2196
+ --tds-sidenav-item-background-hover:var(--t-fill-color-button-interaction-ghost-hover);
2197
+ --tds-sidenav-item-background-active:var(--t-fill-color-button-interaction-ghost-active);
2198
+ --tds-sidenav-item-background-selected:var(--t-fill-color-button-interaction-ghost-active);
2199
+
2200
+ --tds-sidenav-item-nested-background-hover:var(--tds-sidenav-item-background-hover);
2201
+ --tds-sidenav-item-nested-background-active:var(--tds-sidenav-item-background-hover);
2202
+ --tds-sidenav-item-nested-background-selected:transparent;
2203
+
2204
+ --tds-sidenav-item-nested-border-color:var(--t-fill-color-neutral-050);
2205
+ --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
2206
+ --tds-sidenav-item-nested-border-color-selected:var(--t-border-color-status-info);
2207
+
2208
+ --tds-sidenav-item-icon-color:var(--t-icon-color-secondary);
2209
+ --tds-sidenav-item-icon-color-selected:var(--t-icon-color);
2390
2210
  }
2391
- }
2392
2211
 
2393
- @media (prefers-reduced-motion: reduce){
2394
- [class*="--loading"] .tds-loading-spinner{
2395
- --tds-loading-spinner-animation-play-state:paused;
2212
+ @media (prefers-reduced-motion: reduce){
2213
+ tds-sidenav,
2214
+ .tds-sidenav{
2215
+ --tds-sidenav-collapse-transition-enter:none;
2216
+ --tds-sidenav-collapse-transition-exit:none;
2217
+ --tds-sidenav-collapse-closed-transform:none;
2218
+ --tds-sidenav-collapse-open-transform:none;
2219
+ }
2220
+ }
2221
+
2222
+ .tds-sidenav--theme-gray{
2223
+ --tds-sidenav-item-background-hover:var(--t-fill-color-neutral-080);
2224
+ --tds-sidenav-item-background-active:var(--t-fill-color-neutral-070);
2225
+ --tds-sidenav-item-background-selected:var(--t-fill-color-neutral-050);
2226
+ --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
2227
+ --tds-sidenav-item-nested-border-color-selected:var(--t-fill-color-neutral-010);
2396
2228
  }
2397
2229
  }
2398
2230
 
2399
- .tds-input{
2400
- --tds-input-border-color:var(--t-form-border-color);
2401
- --tds-input-border-color-hover:var(--t-form-border-color-hover);
2402
- --tds-input-background-color:var(--t-form-background-color);
2403
- --tds-input-color:var(--t-form-color);
2404
- --tds-input-font-size:var(--t-font-size-md);
2405
- --tds-input-description-color:var(--t-text-color-secondary);
2406
- --tds-input-description-invalid-icon-display:none;
2407
- --tds-input-min-height:var(--t-container-size-md);
2408
- --tds-input-padding-inline:var(--t-spacing-1);
2231
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section){
2232
+ display:flex;
2233
+ }
2409
2234
 
2410
- --tds-input-transition-property:background-color, border-color, outline-color, outline-offset;
2235
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section,.tds-sidenav-collapse){
2236
+ flex-direction:column;
2237
+ gap:var(--t-spacing-half);
2238
+ width:100%;
2239
+ }
2240
+
2241
+ .tds-sidenav-section-list{
2242
+ width:100%;
2243
+ padding:0;
2244
+ margin:0;
2245
+ list-style:none;
2246
+ }
2411
2247
 
2248
+ .tds-sidenav-section-header{
2412
2249
  display:flex;
2413
- flex-direction:column;
2414
- gap:var(--t-spacing-half);
2250
+ align-items:baseline;
2251
+ justify-content:space-between;
2252
+ padding-top:var(--t-spacing-2);
2415
2253
  }
2416
2254
 
2417
- .tds-input label{
2418
- font-size:var(--t-font-size-md);
2419
- font-weight:var(--t-font-weight-normal);
2420
- color:var(--t-text-color);
2255
+ .tds-sidenav-section-header h2{
2256
+ margin:0;
2257
+ font-size:var(--t-font-size-sm);
2258
+ font-weight:var(--t-font-weight-semibold);
2259
+ line-height:1.35;
2260
+ color:var(--t-text-color-secondary);
2261
+ text-transform:uppercase;
2421
2262
  }
2422
2263
 
2423
- .tds-input :is(input,textarea){
2424
- inline-size:100%;
2425
- block-size:auto;
2426
- min-block-size:var(--tds-input-min-height);
2427
- padding-block:var(--tds-input-padding-block);
2428
- padding-inline:var(--tds-input-padding-inline);
2429
- font-family:inherit;
2430
- font-size:var(--tds-input-font-size);
2431
- color:var(--tds-input-color);
2264
+ .tds-sidenav-section:first-of-type .tds-sidenav-section-header{
2265
+ padding-top:0;
2266
+ }
2267
+
2268
+ .tds-sidenav-section-header [slot="label-actions"]{
2269
+ display:flex;
2270
+ gap:var(--t-spacing-half);
2271
+ align-items:center;
2272
+ }
2273
+
2274
+ .tds-sidenav-section [slot="section-actions"]{
2275
+ display:flex;
2276
+ gap:12px;
2277
+ align-items:center;
2278
+ min-height:42px;
2279
+ padding:var(--t-spacing-1) 0;
2280
+ }
2281
+
2282
+ .tds-sidenav-section-list,
2283
+ .tds-sidenav-item{
2284
+ width:100%;
2285
+ padding:0;
2286
+ margin:0;
2287
+ }
2288
+
2289
+ .tds-sidenav-item :is(a,button){
2290
+ position:relative;
2291
+ display:flex;
2292
+ gap:12px;
2293
+ align-items:center;
2294
+ width:100%;
2295
+ padding:12px;
2296
+ overflow:hidden;
2297
+ font-size:var(--t-font-size-sm);
2298
+ line-height:18px;
2299
+ color:var(--t-text-color-headline);
2300
+ white-space:nowrap;
2301
+ text-decoration:none;
2432
2302
  -webkit-appearance:none;
2433
2303
  -moz-appearance:none;
2434
2304
  appearance:none;
2435
- outline:var(--t-focus-ring-width) solid transparent;
2436
- outline-color:rgb(from var(--t-focus-ring-color) r g b / 0);
2437
- outline-offset:0;
2438
- background-color:var(--tds-input-background-color);
2439
- border:var(--t-form-border-width) solid var(--tds-input-border-color);
2440
- border-radius:var(--t-form-border-radius);
2441
- transition-timing-function:var(--t-ease-in-out);
2442
- transition-duration:var(--t-duration-200);
2443
- transition-property:var(--tds-input-transition-property);
2305
+ cursor:pointer;
2306
+ background-color:var(--tds-sidenav-item-background, transparent);
2307
+ border:0;
2308
+ border-radius:var(--t-border-radius);
2309
+ transition:var(--tds-sidenav-item-transition);
2444
2310
  }
2445
2311
 
2446
- :is(.tds-input :is(input,textarea)):hover:not(:disabled,:focus-visible,[readonly]){
2447
- border-color:var(--tds-input-border-color-hover);
2448
- }
2449
-
2450
- :is(.tds-input :is(input,textarea)):focus{
2451
- outline-color:rgb(from var(--t-focus-ring-color) r g b / 0);
2452
- }
2453
-
2454
- :is(.tds-input :is(input,textarea)):focus-visible{
2455
- outline-color:var(--t-focus-ring-color);
2456
- outline-offset:var(--t-focus-ring-offset);
2457
- border-color:var(--t-form-border-color-focus);
2312
+ :is(.tds-sidenav-item :is(a,button)):not(:has(.prefix,.suffix)),:is(.tds-sidenav-item :is(a,button)) :is(:not(.prefix,.suffix)){
2313
+ display:block;
2314
+ flex:1;
2315
+ overflow:hidden;
2316
+ text-overflow:ellipsis;
2317
+ text-align:left;
2318
+ white-space:nowrap;
2458
2319
  }
2459
2320
 
2460
- :is(.tds-input :is(input,textarea))::-moz-placeholder{
2461
- color:var(--t-form-placeholder-color);
2462
- -moz-user-select:none;
2463
- user-select:none;
2321
+ :is(.tds-sidenav-item :is(a,button)):hover,:is(.tds-sidenav-item :is(a,button)):focus-visible{
2322
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-hover);
2323
+ color:var(--t-text-color-headline);
2324
+ text-decoration:none;
2464
2325
  }
2465
2326
 
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;
2327
+ :is(.tds-sidenav-item :is(a,button)):active{
2328
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-active);
2471
2329
  }
2472
2330
 
2473
- @media (prefers-reduced-motion: reduce){
2474
-
2475
- .tds-input :is(input,textarea){
2476
- --tds-input-transition-property:none;
2477
- }
2331
+ :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]){
2332
+ overflow:hidden;
2333
+ color:var(--tds-sidenav-item-icon-color);
2478
2334
  }
2479
2335
 
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
- }
2336
+ :is(:is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"])),:is(:is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"])) svg{
2337
+ display:block;
2338
+ width:var(--tds-sidenav-item-icon-size);
2339
+ height:var(--tds-sidenav-item-icon-size);
2340
+ }
2487
2341
 
2488
- .tds-input:has(:is(input,textarea):required) label::after{
2489
- margin-left:.25ch;
2490
- color:var(--t-text-color-status-error);
2491
- content:"*";
2342
+ :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section{
2343
+ --tds-sidenav-indent:19px;
2492
2344
  }
2493
2345
 
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;
2346
+ [aria-expanded="true"]:is(.tds-sidenav-item :is(a,button)) + .tds-sidenav-section-list{
2347
+ visibility:visible;
2348
+ block-size:auto;
2349
+ opacity:1;
2502
2350
  }
2503
2351
 
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
- }
2352
+ .tds-sidenav-item.selected > :is(a,button),.tds-sidenav-item:has(.tds-sidenav-section):has(.selected) > :is(a,button){
2353
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-selected);
2354
+ --tds-sidenav-item-icon-color:var(--tds-sidenav-item-icon-color-selected);
2512
2355
 
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);
2356
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-selected);
2357
+ font-weight:var(--t-font-weight-semibold);
2516
2358
  }
2517
2359
 
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;
2360
+ .tds-sidenav-item:has(.tds-sidenav-section){
2361
+ display:flex;
2362
+ flex-direction:column;
2363
+ gap:var(--t-spacing-half);
2534
2364
  }
2535
2365
 
2536
- @layer t-critical{
2537
- tds-page-header:not(.hydrated){
2538
- display:none;
2366
+ .tds-sidenav-item .tds-sidenav-section-list{
2367
+ --tds-sidenav-item-depth:1;
2368
+ gap:0;
2539
2369
  }
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
2370
 
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);
2371
+ .tds-sidenav-action--toggle + :is(.tds-sidenav-item .tds-sidenav-section-list){
2372
+ visibility:hidden;
2373
+ block-size:0;
2374
+ overflow-y:clip;
2375
+ opacity:0;
2376
+ transition:content-visibility var(--t-duration-400) allow-discrete, opacity var(--t-duration-400), block-size var(--t-duration-400);
2377
+ }
2567
2378
 
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);
2379
+ :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list{
2380
+ --tds-sidenav-item-depth:2;
2381
+ }
2570
2382
 
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);
2383
+ :is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
2384
+ min-height:var(--t-element-size-2xl);
2385
+ padding-block:9px;
2386
+ padding-left:calc((var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth)) + var(--tds-sidenav-indent) + var(--t-spacing-fourth));
2387
+ line-height:1;
2388
+ background-color:transparent;
2389
+ }
2574
2390
 
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
- }
2391
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::before{
2392
+ position:absolute;
2393
+ top:0;
2394
+ bottom:0;
2395
+ left:calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
2396
+ width:2px;
2397
+ content:"";
2398
+ background-color:var(--tds-sidenav-item-nested-border-color);
2399
+ transition:var(--tds-sidenav-item-transition);
2400
+ }
2581
2401
 
2582
- .tds-page-header--profile{
2583
- --tds-page-header-padding-y:20px;
2584
- }
2402
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::after{
2403
+ position:absolute;
2404
+ inset:0 0 0 calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
2405
+ z-index:-1;
2406
+ height:100%;
2407
+ content:"";
2408
+ background-color:var(--tds-sidenav-item-nested-background);
2409
+ border-radius:0 var(--t-border-radius) var(--t-border-radius) 0;
2410
+ transition:var(--tds-sidenav-item-transition);
2411
+ }
2585
2412
 
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
- }
2413
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):not(:has(.prefix,.suffix)),:is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)) :is(:not(.prefix,.suffix)){
2414
+ display:block;
2415
+ text-align:left;
2416
+ white-space:normal;
2417
+ }
2592
2418
 
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);
2419
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):hover,:is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):focus-visible{
2420
+ --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-hover);
2421
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-hover);
2422
+ }
2423
+
2424
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):active{
2425
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-active);
2426
+ }
2427
+
2428
+ .selected:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
2429
+ --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-selected);
2430
+ font-weight:var(--t-font-weight-medium);
2611
2431
  }
2612
- }
2613
- }
2614
2432
 
2615
- .tds-page-header{
2433
+ .tds-sidenav-responsive-header{
2616
2434
  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);
2435
+ gap:var(--t-spacing-2);
2436
+ align-items:center;
2437
+ width:100%;
2622
2438
  }
2623
2439
 
2624
- .tds-page-header:not(.has-nav){
2625
- padding-bottom:var(--tds-page-header-padding-y);
2440
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle{
2441
+ order:0;
2626
2442
  }
2627
2443
 
2628
- .tds-page-header.inactive{
2629
- background:var(--tds-page-header-background-color-inactive);
2444
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-label{
2445
+ flex:1;
2446
+ order:1;
2447
+ margin:0;
2448
+ font-size:var(--t-font-size-lg);
2449
+ font-weight:var(--t-font-weight-medium);
2450
+ color:var(--t-text-color-headline);
2630
2451
  }
2631
2452
 
2632
- .tds-page-header :is([slot="actions"],.tds-page-header__actions){
2633
- width:100%;
2453
+ @media (max-width: 719px){
2454
+ .tds-sidenav-collapse{
2455
+ z-index:10001;
2456
+ display:none;
2457
+ max-width:min(448px, calc(100vw - 48px));
2458
+ padding:0;
2459
+ margin:12px 0;
2460
+ position-area:bottom span-right;
2461
+ overflow:hidden;
2462
+ outline:0;
2463
+ background:var(--t-surface-color-card);
2464
+ border:0;
2465
+ border-radius:6px;
2466
+ box-shadow:0 8px 20px 0 rgba(0, 0, 0, .25);
2467
+ opacity:var(--tds-sidenav-collapse-open-opacity);
2468
+ transform:var(--tds-sidenav-collapse-open-transform);
2469
+ transition:var(--tds-sidenav-collapse-transition-enter);
2470
+ will-change:transform;
2634
2471
  }
2635
2472
 
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;
2473
+ .tds-sidenav-scroll-container{
2474
+ --webkit-overflow-scrolling:touch;
2475
+ display:block;
2476
+ width:100%;
2477
+ height:-moz-fit-content;
2478
+ height:fit-content;
2479
+ padding:var(--t-spacing-2);
2480
+ overflow-y:auto;
2643
2481
  }
2644
2482
 
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{
2483
+ .tds-sidenav-item :is(a, button) :is(.prefix){
2484
+ display:none;
2485
+ }
2486
+ @supports selector(:popover-open){
2487
+ .tds-sidenav-collapse:popover-open{
2646
2488
  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
2489
  }
2654
2490
 
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;
2491
+ .tds-sidenav-collapse:not(:popover-open){
2492
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
2493
+ transition:var(--tds-sidenav-collapse-transition-exit);
2674
2494
  }
2675
2495
 
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);
2496
+ @starting-style{
2497
+ .tds-sidenav-collapse:popover-open{
2498
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
2499
+ transform:var(--tds-sidenav-collapse-closed-transform);
2681
2500
  }
2501
+ }
2502
+ }
2503
+ @supports not selector(:popover-open){
2504
+ .tds-sidenav-collapse.\:popover-open{
2505
+ display:flex;
2506
+ }
2682
2507
 
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
- }
2508
+ .tds-sidenav-collapse:not(.\:popover-open){
2509
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
2510
+ transition:var(--tds-sidenav-collapse-transition-exit);
2511
+ }
2512
+ }
2513
+ }
2695
2514
 
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
- }
2515
+ @media (min-width: 720px){
2516
+ .tds-sidenav-responsive-header{
2517
+ display:none;
2518
+ }
2519
+ }
2703
2520
 
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
- }
2521
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
2522
+ display:none;
2523
+ }
2714
2524
 
2715
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
2716
- position:relative;
2525
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
2526
+ display:block;
2717
2527
  }
2718
2528
 
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
- }
2529
+ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
2530
+ display:flex;
2531
+ flex-direction:column;
2532
+ }
2723
2533
 
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
- }
2534
+ .tds-input{
2535
+ --tds-input-border-color:var(--t-form-border-color);
2536
+ --tds-input-border-color-hover:var(--t-form-border-color-hover);
2537
+ --tds-input-background-color:var(--t-form-background-color);
2538
+ --tds-input-color:var(--t-form-color);
2539
+ --tds-input-font-size:var(--t-font-size-md);
2540
+ --tds-input-description-color:var(--t-text-color-secondary);
2541
+ --tds-input-description-invalid-icon-display:none;
2542
+ --tds-input-min-height:var(--t-container-size-md);
2543
+ --tds-input-padding-inline:var(--t-spacing-1);
2734
2544
 
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
- }
2545
+ --tds-input-transition-property:background-color, border-color, outline-color, outline-offset;
2740
2546
 
2741
- .tds-page-header__title-bar{
2742
2547
  display:flex;
2743
2548
  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);
2549
+ gap:var(--t-spacing-half);
2748
2550
  }
2749
2551
 
2750
- .tds-page-header--profile > .tds-page-header__title-bar{
2751
- align-items:center;
2752
- }
2552
+ .tds-input label{
2553
+ font-size:var(--t-font-size-md);
2554
+ font-weight:var(--t-font-weight-normal);
2555
+ color:var(--t-text-color);
2556
+ }
2557
+
2558
+ .tds-input :is(input,textarea){
2559
+ inline-size:100%;
2560
+ block-size:auto;
2561
+ min-block-size:var(--tds-input-min-height);
2562
+ padding-block:var(--tds-input-padding-block);
2563
+ padding-inline:var(--tds-input-padding-inline);
2564
+ font-family:inherit;
2565
+ font-size:var(--tds-input-font-size);
2566
+ color:var(--tds-input-color);
2567
+ -webkit-appearance:none;
2568
+ -moz-appearance:none;
2569
+ appearance:none;
2570
+ outline:var(--t-focus-ring-width) solid transparent;
2571
+ outline-color:rgb(from var(--t-focus-ring-color) r g b / 0);
2572
+ outline-offset:0;
2573
+ background-color:var(--tds-input-background-color);
2574
+ border:var(--t-form-border-width) solid var(--tds-input-border-color);
2575
+ border-radius:var(--t-form-border-radius);
2576
+ transition-timing-function:var(--t-ease-in-out);
2577
+ transition-duration:var(--t-duration-200);
2578
+ transition-property:var(--tds-input-transition-property);
2579
+ }
2580
+
2581
+ :is(.tds-input :is(input,textarea)):hover:not(:disabled,:focus-visible,[readonly]){
2582
+ border-color:var(--tds-input-border-color-hover);
2583
+ }
2584
+
2585
+ :is(.tds-input :is(input,textarea)):focus{
2586
+ outline-color:rgb(from var(--t-focus-ring-color) r g b / 0);
2587
+ }
2588
+
2589
+ :is(.tds-input :is(input,textarea)):focus-visible{
2590
+ outline-color:var(--t-focus-ring-color);
2591
+ outline-offset:var(--t-focus-ring-offset);
2592
+ border-color:var(--t-form-border-color-focus);
2593
+ }
2594
+
2595
+ :is(.tds-input :is(input,textarea))::-moz-placeholder{
2596
+ color:var(--t-form-placeholder-color);
2597
+ -moz-user-select:none;
2598
+ user-select:none;
2599
+ }
2600
+
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
+ }
2753
2607
 
2754
- .tds-page-header__primary{
2755
- width:100%;
2756
- }
2608
+ @media (prefers-reduced-motion: reduce){
2757
2609
 
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;
2610
+ .tds-input :is(input,textarea){
2611
+ --tds-input-transition-property:none;
2765
2612
  }
2613
+ }
2766
2614
 
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%;
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;
2773
2621
  }
2774
2622
 
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;
2780
- }
2781
- .tds-page-header :is([slot="actions"],.tds-page-header__actions){
2782
- width:auto;
2623
+ .tds-input:has(:is(input,textarea):required) label::after{
2624
+ margin-left:.25ch;
2625
+ color:var(--t-text-color-status-error);
2626
+ content:"*";
2783
2627
  }
2784
2628
 
2785
- .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
2786
- justify-content:flex-end;
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);
2633
+ }
2634
+
2635
+ .tds-input:where(:has(:is(input,textarea):disabled)) :is(input,textarea){
2636
+ cursor:not-allowed;
2787
2637
  }
2788
- }
2789
2638
 
2790
- .tds-page-header-phone,
2791
- .tds-page-header-email{
2792
- color:var(--tds-page-header-color);
2793
- white-space:nowrap;
2794
- }
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);
2642
+ }
2795
2643
 
2796
- .tds-page-header-email{
2797
- max-width:100%;
2798
- overflow:hidden;
2799
- text-overflow:ellipsis;
2800
- }
2644
+ .tds-input:where(:has(:is(input,textarea)[readonly])) :is(input,textarea):focus{
2645
+ border-color:var(--tds-input-border-color-hover);
2646
+ }
2801
2647
 
2802
- @keyframes indicator-pulse{
2803
- 0%{
2804
- opacity:.3;
2805
- transform:scale(.9);
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);
2806
2651
  }
2807
2652
 
2808
- 100%{
2809
- opacity:0;
2810
- transform:scale(1.75);
2811
- }
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;
2812
2662
  }
2813
2663
 
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;
2669
+ }
2670
+
2814
2671
  @layer t-critical, t-component;
2815
2672
 
2816
2673
  :root{
@@ -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,50 +4493,109 @@ 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
  }
4510
+
4511
+ .tds-data-table-column--selectable,
4512
+ .tds-data-table-cell--selectable{
4513
+ width:3rem;
4514
+ text-align:center;
4515
+ }
4711
4516
  .tds-data-table-selectable-checkbox{
4517
+ --tds-data-table-selectable-checkbox-background-color:var(--t-form-background-color);
4518
+ --tds-data-table-selectable-checkbox-border-color:var(--t-form-border-color);
4519
+ --tds-data-table-selectable-checkbox-border-radius:var(--t-border-radius-sm);
4520
+ --tds-data-table-selectable-checkbox-cursor:pointer;
4521
+ --tds-data-table-selectable-checkbox-size:var(--t-element-size-md);
4522
+ --tds-data-table-selectable-checkbox-transition-property:background-color, border-color;
4523
+
4524
+ --tds-data-table-selectable-checkbox-icon:none;
4525
+ --tds-data-table-selectable-checkbox-icon-visibility:hidden;
4526
+ --tds-data-table-selectable-checkbox-icon-opacity:0;
4527
+ --tds-data-table-selectable-checkbox-icon-fill:var(--t-icon-color-inverted);
4528
+
4712
4529
  position:relative;
4713
- display:inline-block;
4714
- width:1em;
4715
- height:1em;
4716
- vertical-align:middle;
4717
- cursor:pointer;
4718
- border:var(--t-form-border-width) solid var(--t-form-border-color);
4719
- border-radius:var(--t-border-radius-sm);
4530
+ display:block;
4531
+ width:var(--tds-data-table-selectable-checkbox-size);
4532
+ height:var(--tds-data-table-selectable-checkbox-size);
4533
+ margin-inline:auto;
4534
+ cursor:var(--tds-data-table-selectable-checkbox-cursor);
4535
+ background-color:var(--tds-data-table-selectable-checkbox-background-color);
4536
+ border:var(--t-form-border-width) solid var(--tds-data-table-selectable-checkbox-border-color);
4537
+ border-radius:var(--tds-data-table-selectable-checkbox-border-radius);
4538
+ transition-timing-function:var(--t-ease-in-out);
4539
+ transition-duration:var(--t-duration-200);
4540
+ transition-property:var(--tds-data-table-selectable-checkbox-transition-property);
4720
4541
  }
4542
+ .tds-data-table-selectable-checkbox::after{
4543
+ position:absolute;
4544
+ inset:0;
4545
+ content:"";
4546
+ transform:scale(2);
4547
+ }
4721
4548
  .tds-data-table-selectable-checkbox::before{
4722
4549
  position:absolute;
4723
4550
  inset:0;
4724
- display:flex;
4725
- visibility:hidden;
4726
- align-items:center;
4727
- justify-content:center;
4551
+ visibility:var(--tds-data-table-selectable-checkbox-icon-visibility);
4728
4552
  content:"";
4729
- opacity:0;
4553
+ background-color:var(--tds-data-table-selectable-checkbox-icon-fill);
4554
+ border-radius:var(--tds-data-table-selectable-checkbox-border-radius);
4555
+ opacity:var(--tds-data-table-selectable-checkbox-icon-opacity);
4556
+ -webkit-mask-image:var(--tds-data-table-selectable-checkbox-icon);
4557
+ mask-image:var(--tds-data-table-selectable-checkbox-icon);
4558
+ -webkit-mask-repeat:no-repeat;
4559
+ mask-repeat:no-repeat;
4560
+ -webkit-mask-size:contain;
4561
+ mask-size:contain;
4562
+ }
4563
+ .tds-data-table-selectable-checkbox[data-hovered]{
4564
+ --tds-data-table-selectable-checkbox-border-color:var(--t-fill-color-interaction-hover);
4565
+ --tds-data-table-selectable-checkbox-background-color:var(--t-fill-color-button-interaction-outline-hover);
4730
4566
  }
4731
4567
  .tds-data-table-selectable-checkbox[data-focus-visible]{
4732
4568
  outline:var(--t-focus-ring-outline);
4733
4569
  outline-offset:var(--t-focus-ring-offset);
4734
4570
  }
4735
- :is(.tds-data-table-selectable-checkbox[data-selected],.tds-data-table-selectable-checkbox[data-indeterminate])::before{
4736
- visibility:visible;
4737
- opacity:1;
4571
+ .tds-data-table-selectable-checkbox[data-selected],.tds-data-table-selectable-checkbox[data-indeterminate]{
4572
+ --tds-data-table-selectable-checkbox-background-color:var(--t-fill-color-control);
4573
+ --tds-data-table-selectable-checkbox-border-color:var(--t-border-color-control-info);
4574
+ --tds-data-table-selectable-checkbox-icon-visibility:visible;
4575
+ --tds-data-table-selectable-checkbox-icon-opacity:1;
4576
+ }
4577
+ [data-hovered]:is(.tds-data-table-selectable-checkbox[data-selected],.tds-data-table-selectable-checkbox[data-indeterminate]){
4578
+ --tds-data-table-selectable-checkbox-border-color:var(--t-fill-color-interaction-hover);
4579
+ --tds-data-table-selectable-checkbox-background-color:var(--t-fill-color-interaction-hover);
4738
4580
  }
4739
- .tds-data-table-selectable-checkbox[data-selected]::before{
4740
- content:"";
4581
+ .tds-data-table-selectable-checkbox[data-selected]{
4582
+ --tds-data-table-selectable-checkbox-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
4583
+ }
4584
+ .tds-data-table-selectable-checkbox[data-indeterminate]{
4585
+ --tds-data-table-selectable-checkbox-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
4586
+ }
4587
+ .tds-data-table-selectable-checkbox[data-disabled]{
4588
+ --tds-data-table-selectable-checkbox-background-color:var(--t-form-background-color-disabled);
4589
+ --tds-data-table-selectable-checkbox-border-color:var(--t-form-border-color-disabled);
4590
+ --tds-data-table-selectable-checkbox-cursor:not-allowed;
4741
4591
  }
4742
- .tds-data-table-selectable-checkbox[data-indeterminate]::before{
4743
- content:"➖";
4592
+ .tds-data-table-selectable-checkbox[data-disabled][data-selected],.tds-data-table-selectable-checkbox[data-disabled][data-indeterminate]{
4593
+ --tds-data-table-selectable-checkbox-background-color:var(--t-border-color-control-disabled);
4594
+ }
4595
+ @media (prefers-reduced-motion: reduce){
4596
+ .tds-data-table-selectable-checkbox{
4597
+ --tds-data-table-selectable-checkbox-transition-property:none;
4598
+ }
4744
4599
  }
4745
4600
 
4746
4601
  .t-banner{
@@ -4783,7 +4638,6 @@ a.tds-dropdown-item:is(:hover, :active){
4783
4638
  .t-banner-icon{
4784
4639
  margin-top:1px;
4785
4640
  }
4786
-
4787
4641
  .t-banner-icon svg{
4788
4642
  fill:var(--t-banner-icon-fill-color);
4789
4643
  }
@@ -4939,20 +4793,17 @@ a.tds-dropdown-item:is(:hover, :active){
4939
4793
  transition:none;
4940
4794
  }
4941
4795
  }
4942
-
4943
4796
  .tds-btn--xl{
4944
4797
  --tds-btn-padding-y:11px;
4945
4798
  --tds-btn-padding-x:18px;
4946
4799
  --tds-btn-padding-truncated-x:12px;
4947
4800
  --tds-btn-min-height:48px;
4948
4801
  }
4949
-
4950
4802
  .tds-btn--lg{
4951
4803
  --tds-btn-padding-y:7px;
4952
4804
  --tds-btn-padding-x:14px;
4953
4805
  --tds-btn-min-height:40px;
4954
4806
  }
4955
-
4956
4807
  .tds-btn--sm{
4957
4808
  --tds-btn-padding-y:.5px;
4958
4809
  --tds-btn-padding-x:7px;
@@ -4961,7 +4812,6 @@ a.tds-dropdown-item:is(:hover, :active){
4961
4812
  --tds-btn-font-size:var(--t-font-size-sm);
4962
4813
  --tds-btn-loading-spinner-track-width:3px;
4963
4814
  }
4964
-
4965
4815
  .tds-btn--xs{
4966
4816
  --tds-btn-padding-y:0;
4967
4817
  --tds-btn-padding-x:5px;
@@ -5542,7 +5392,6 @@ a.tds-dropdown-item:is(:hover, :active){
5542
5392
  margin-block-start:calc(.5lh - .5em);
5543
5393
  line-height:var(--tds-field-description-line-height);
5544
5394
  }
5545
-
5546
5395
  .tds-field-date-segment{
5547
5396
  padding-inline:var(--tds-field-date-segment-padding-inline, 2px);
5548
5397
  text-align:end;
@@ -5550,17 +5399,14 @@ a.tds-dropdown-item:is(:hover, :active){
5550
5399
  caret-color:transparent;
5551
5400
  border-radius:var(--t-border-radius-sm);
5552
5401
  }
5553
-
5554
5402
  .tds-field-date-segment[data-placeholder]{
5555
5403
  color:var(--tds-field-placeholder-color);
5556
5404
  }
5557
-
5558
5405
  .tds-field-date-segment[data-focused]{
5559
5406
  color:var(--t-text-color-inverted);
5560
5407
  outline:0;
5561
5408
  background-color:var(--t-fill-color-interaction);
5562
5409
  }
5563
-
5564
5410
  .tds-field-date-segment-separator{
5565
5411
  padding-inline:0;
5566
5412
  color:var(--tds-field-placeholder-color);
@@ -5570,6 +5416,193 @@ a.tds-dropdown-item:is(:hover, :active){
5570
5416
  color:var(--tds-field-color);
5571
5417
  }
5572
5418
 
5419
+ .tds-combo-box{
5420
+ --tds-combo-box-button-offset:4px;
5421
+ }
5422
+
5423
+ .tds-combo-box[data-open] .tds-combo-box-button > svg{
5424
+ transform:rotate(.5turn);
5425
+ }
5426
+
5427
+ .tds-combo-box--lg{
5428
+ --tds-combo-box-button-offset:5px;
5429
+ }
5430
+ .tds-combo-box-field:has([readonly]) .tds-combo-box-button{
5431
+ display:none;
5432
+ }
5433
+ .tds-combo-box-input{
5434
+ display:flex;
5435
+ flex:1;
5436
+ align-items:center;
5437
+ padding-block:var(--tds-field-padding-block);
5438
+ padding-inline:var(--tds-field-padding-inline);
5439
+ font-family:inherit;
5440
+ font-size:inherit;
5441
+ color:inherit;
5442
+ outline:0;
5443
+ background:transparent;
5444
+ border:0;
5445
+ }
5446
+ .tds-combo-box-input:has( + .tds-combo-box-button){
5447
+ padding-inline-end:0;
5448
+ }
5449
+ .tds-combo-box-input::-moz-placeholder{
5450
+ color:var(--tds-field-placeholder-color);
5451
+ -moz-user-select:none;
5452
+ user-select:none;
5453
+ }
5454
+ .tds-combo-box-input::placeholder{
5455
+ color:var(--tds-field-placeholder-color);
5456
+ -webkit-user-select:none;
5457
+ -moz-user-select:none;
5458
+ user-select:none;
5459
+ }
5460
+ .tds-combo-box-button{
5461
+ flex-shrink:0;
5462
+ align-self:center;
5463
+ inline-size:calc(var(--tds-field-min-height) - (var(--tds-combo-box-button-offset) * 2));
5464
+ block-size:calc(var(--tds-field-min-height) - (var(--tds-combo-box-button-offset) * 2));
5465
+ padding:0;
5466
+ margin-inline-end:var(--tds-combo-box-button-offset);
5467
+ }
5468
+ .tds-combo-box-button > svg{
5469
+ inline-size:var(--tds-field-font-size);
5470
+ block-size:var(--tds-field-font-size);
5471
+ transition:transform var(--t-duration-300) var(--t-ease-in-out);
5472
+ }
5473
+ .tds-combo-box-popover{
5474
+ width:var(--trigger-width);
5475
+ max-block-size:inherit;
5476
+ padding:var(--t-spacing-1);
5477
+ overflow:auto;
5478
+ scroll-behavior:smooth;
5479
+ overscroll-behavior:none;
5480
+ -webkit-user-select:none;
5481
+ -moz-user-select:none;
5482
+ user-select:none;
5483
+ outline:0;
5484
+ scrollbar-color:#0004 var(--t-surface-color-card);
5485
+ scrollbar-width:thin;
5486
+ background:var(--t-surface-color-card);
5487
+ background-clip:padding-box;
5488
+ border:1px solid var(--t-border-color);
5489
+ border-radius:var(--t-border-radius);
5490
+ box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
5491
+ }
5492
+ .tds-combo-box-popover[data-entering]{
5493
+ animation:tds-combo-box-popover var(--t-duration-300) var(--t-ease-out);
5494
+ }
5495
+ .tds-combo-box-popover[data-exiting]{
5496
+ animation:tds-combo-box-popover var(--t-duration-200) var(--t-ease-in) reverse;
5497
+ }
5498
+ .tds-combo-box-popover[data-entering],.tds-combo-box-popover[data-exiting]{
5499
+ will-change:opacity, transform;
5500
+ }
5501
+
5502
+ @keyframes tds-combo-box-popover{
5503
+ from{
5504
+ opacity:0;
5505
+ transform:translateY(-8px);
5506
+ }
5507
+ }
5508
+
5509
+ @media (prefers-reduced-motion: reduce){
5510
+ .tds-combo-box-popover[data-entering],.tds-combo-box-popover[data-exiting]{
5511
+ animation:none;
5512
+ }
5513
+
5514
+ .tds-combo-box-button > svg{
5515
+ transition:none;
5516
+ }
5517
+ }
5518
+ .tds-combo-box-list{
5519
+ padding:0;
5520
+ margin:0;
5521
+ }
5522
+ .tds-combo-box-list-item{
5523
+ display:block;
5524
+ padding-block:var(--t-spacing-1);
5525
+ padding-inline:var(--t-spacing-1-half);
5526
+ overflow:hidden;
5527
+ text-overflow:ellipsis;
5528
+ font-size:1rem;
5529
+ color:var(--t-text-color);
5530
+ white-space:nowrap;
5531
+ cursor:default;
5532
+ border-radius:var(--t-border-radius);
5533
+ }
5534
+ .tds-combo-box-list-item[data-hovered]:not([data-disabled]),.tds-combo-box-list-item[data-focus-visible]{
5535
+ background:var(--t-fill-color-neutral-070);
5536
+ }
5537
+ .tds-combo-box-list-item[data-selected]{
5538
+ background:var(--t-fill-color-button-interaction-ghost-active);
5539
+ }
5540
+ .tds-combo-box-list-item[data-pressed]:not([data-disabled]){
5541
+ background:var(--t-fill-color-neutral-060);
5542
+ }
5543
+ .tds-combo-box-list-item[data-disabled]{
5544
+ color:var(--t-form-color-disabled);
5545
+ cursor:not-allowed;
5546
+ }
5547
+ .tds-combo-box-list-item[data-disabled][data-hovered]{
5548
+ background:transparent;
5549
+ }
5550
+ .tds-combo-box-empty-state{
5551
+ position:relative;
5552
+ min-block-size:var(--t-spacing-3);
5553
+ padding-block:var(--t-spacing-1);
5554
+ padding-inline:var(--t-spacing-2);
5555
+ font-size:var(--t-font-size-md);
5556
+ color:var(--t-text-color-secondary);
5557
+ }
5558
+ .tds-combo-box-load-more{
5559
+ position:relative;
5560
+ min-block-size:calc(var(--t-spacing-3) + var(--t-spacing-1));
5561
+ }
5562
+
5563
+ .tds-combo-box-empty-state,
5564
+ .tds-combo-box-load-more{
5565
+ --tds-loading-spinner-visibility:visible;
5566
+ --tds-loading-spinner-animation-play-state:running;
5567
+ }
5568
+ .tds-combo-box-list-section:not(:first-child){
5569
+ margin-block-start:var(--t-spacing-half);
5570
+ }
5571
+ .tds-combo-box-section-header{
5572
+ padding-block:var(--t-spacing-1);
5573
+ padding-inline:var(--t-spacing-half);
5574
+ font-size:var(--t-font-size-sm);
5575
+ font-weight:var(--t-font-weight-semibold);
5576
+ color:var(--t-text-color-secondary);
5577
+ }
5578
+
5579
+ .tds-loading-spinner{
5580
+ position:absolute;
5581
+ right:0;
5582
+ left:0;
5583
+ visibility:var(--tds-loading-spinner-visibility, hidden);
5584
+ width:var(--tds-loading-spinner-size, 1.25em);
5585
+ height:var(--tds-loading-spinner-size, 1.25em);
5586
+ margin:auto;
5587
+ border:var(--tds-loading-spinner-track-width, 4px) solid var(--tds-loading-spinner-track-color, var(--t-fill-color-transparency-dark-020));
5588
+ border-top-color:var(--tds-loading-spinner-color, currentcolor);
5589
+ border-radius:50%;
5590
+ animation:spinner-rotate 500ms infinite linear;
5591
+ animation-play-state:var(--tds-loading-spinner-animation-play-state, paused);
5592
+ }
5593
+
5594
+ @keyframes spinner-rotate{
5595
+ to{
5596
+ transform:rotate(360deg);
5597
+ }
5598
+ }
5599
+
5600
+ @media (prefers-reduced-motion: reduce){
5601
+ [class*="--loading"] .tds-loading-spinner{
5602
+ --tds-loading-spinner-animation-play-state:paused;
5603
+ }
5604
+ }
5605
+
5573
5606
  .tds-date-picker{
5574
5607
  --tds-date-picker-button-offset:4px;
5575
5608
  }
@@ -5577,17 +5610,14 @@ a.tds-dropdown-item:is(:hover, :active){
5577
5610
  .tds-date-picker--lg{
5578
5611
  --tds-date-picker-button-offset:5px;
5579
5612
  }
5580
-
5581
5613
  .tds-date-picker-field[data-focus-within]:has(.tds-date-picker-button[data-focused]){
5582
5614
  outline-color:transparent;
5583
5615
  outline-offset:0;
5584
5616
  border-color:var(--tds-field-border-color);
5585
5617
  }
5586
-
5587
5618
  .tds-date-picker-field:has(.tds-date-picker-input[data-readonly]) .tds-date-picker-button{
5588
5619
  display:none;
5589
5620
  }
5590
-
5591
5621
  .tds-date-picker-input{
5592
5622
  flex:1;
5593
5623
  padding-block:var(--tds-field-padding-block);
@@ -5597,11 +5627,9 @@ a.tds-dropdown-item:is(:hover, :active){
5597
5627
  text-wrap:nowrap;
5598
5628
  scrollbar-width:none;
5599
5629
  }
5600
-
5601
5630
  .tds-date-picker-input:has( + .tds-date-picker-button){
5602
5631
  padding-inline-end:0;
5603
5632
  }
5604
-
5605
5633
  .tds-date-picker-button{
5606
5634
  flex-shrink:0;
5607
5635
  align-self:center;
@@ -5610,7 +5638,6 @@ a.tds-dropdown-item:is(:hover, :active){
5610
5638
  padding:0;
5611
5639
  margin-inline-end:var(--tds-date-picker-button-offset);
5612
5640
  }
5613
-
5614
5641
  .tds-date-picker-popover{
5615
5642
  --tds-date-picker-popover-font-size:var(--t-font-size-md);
5616
5643
  --tds-date-picker-popover-padding:var(--t-spacing-1-half);
@@ -5627,15 +5654,12 @@ a.tds-dropdown-item:is(:hover, :active){
5627
5654
  border-radius:var(--t-border-radius);
5628
5655
  box-shadow:var(--tds-date-picker-popover-shadow);
5629
5656
  }
5630
-
5631
5657
  .tds-date-picker-popover[data-entering]{
5632
5658
  animation:tds-date-picker-popover var(--t-duration-300) var(--t-ease-out);
5633
5659
  }
5634
-
5635
5660
  .tds-date-picker-popover[data-exiting]{
5636
5661
  animation:tds-date-picker-popover var(--t-duration-200) var(--t-ease-in) reverse;
5637
5662
  }
5638
-
5639
5663
  .tds-date-picker-popover[data-entering],.tds-date-picker-popover[data-exiting]{
5640
5664
  will-change:opacity, transform;
5641
5665
  }
@@ -5652,7 +5676,6 @@ a.tds-dropdown-item:is(:hover, :active){
5652
5676
  animation:none;
5653
5677
  }
5654
5678
  }
5655
-
5656
5679
  .tds-date-picker-overlay{
5657
5680
  position:absolute;
5658
5681
  inset:0;
@@ -5660,7 +5683,6 @@ a.tds-dropdown-item:is(:hover, :active){
5660
5683
  display:flex;
5661
5684
  background-color:var(--tds-date-picker-popover-background-color);
5662
5685
  }
5663
-
5664
5686
  .tds-date-picker-overlay-list{
5665
5687
  display:grid;
5666
5688
  flex:1;
@@ -5683,7 +5705,6 @@ a.tds-dropdown-item:is(:hover, :active){
5683
5705
  overflow-y:auto;
5684
5706
  scroll-padding-block:calc(var(--t-focus-ring-width) + var(--t-focus-ring-offset));
5685
5707
  }
5686
-
5687
5708
  .tds-date-picker-overlay-cell{
5688
5709
  display:flex;
5689
5710
  align-items:center;
@@ -5700,29 +5721,23 @@ a.tds-dropdown-item:is(:hover, :active){
5700
5721
  transition-duration:var(--t-duration-100);
5701
5722
  transition-property:var(--tds-date-picker-popover-interactive-property);
5702
5723
  }
5703
-
5704
5724
  .tds-date-picker-overlay-cell[data-hovered]{
5705
5725
  background-color:var(--t-fill-color-button-neutral-outline-hover);
5706
5726
  }
5707
-
5708
5727
  .tds-date-picker-overlay-cell[data-pressed]{
5709
5728
  background-color:var(--t-fill-color-button-neutral-outline-active);
5710
5729
  }
5711
-
5712
5730
  .tds-date-picker-overlay-cell[data-selected]{
5713
5731
  font-weight:var(--t-font-weight-semibold);
5714
5732
  color:var(--t-text-color-inverted);
5715
5733
  background-color:var(--t-fill-color-interaction);
5716
5734
  }
5717
-
5718
5735
  .tds-date-picker-overlay-cell[data-focus-visible]{
5719
5736
  outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
5720
5737
  }
5721
-
5722
5738
  .tds-date-picker-overlay-cell[data-selected][data-focus-visible]{
5723
5739
  outline-offset:var(--t-focus-ring-offset);
5724
5740
  }
5725
-
5726
5741
  .tds-date-picker-calendar-heading{
5727
5742
  display:flex;
5728
5743
  flex:1;
@@ -5731,7 +5746,6 @@ a.tds-dropdown-item:is(:hover, :active){
5731
5746
  justify-content:flex-start;
5732
5747
  padding-inline-start:4px;
5733
5748
  }
5734
-
5735
5749
  .tds-date-picker-calendar-overlay-trigger{
5736
5750
  --_background-color:transparent;
5737
5751
  position:relative;
@@ -5751,7 +5765,6 @@ a.tds-dropdown-item:is(:hover, :active){
5751
5765
  transition-duration:var(--tds-date-picker-popover-interactive-duration);
5752
5766
  transition-property:var(--tds-date-picker-popover-interactive-property);
5753
5767
  }
5754
-
5755
5768
  .tds-date-picker-calendar-overlay-trigger::before{
5756
5769
  position:absolute;
5757
5770
  inset:calc(var(--t-spacing-half) * -1);
@@ -5761,32 +5774,26 @@ a.tds-dropdown-item:is(:hover, :active){
5761
5774
  background-color:var(--_background-color);
5762
5775
  border-radius:inherit;
5763
5776
  }
5764
-
5765
5777
  .tds-date-picker-calendar-overlay-trigger[data-hovered]{
5766
5778
  --_background-color:var(--t-fill-color-button-neutral-outline-hover);
5767
5779
  }
5768
-
5769
5780
  .tds-date-picker-calendar-overlay-trigger[data-pressed]{
5770
5781
  --_background-color:var(--t-fill-color-button-neutral-outline-active);
5771
5782
  }
5772
-
5773
5783
  .tds-date-picker-calendar-overlay-trigger[data-focus-visible]{
5774
5784
  outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
5775
5785
  outline-offset:var(--t-focus-ring-offset);
5776
5786
  }
5777
-
5778
5787
  .tds-date-picker-calendar{
5779
5788
  inline-size:-moz-fit-content;
5780
5789
  inline-size:fit-content;
5781
5790
  font-size:var(--tds-date-picker-popover-font-size);
5782
5791
  }
5783
-
5784
5792
  .tds-date-picker-calendar-body{
5785
5793
  position:relative;
5786
5794
  padding:var(--tds-date-picker-popover-padding);
5787
5795
  padding-block-start:0;
5788
5796
  }
5789
-
5790
5797
  .tds-date-picker-calendar-header{
5791
5798
  display:flex;
5792
5799
  align-items:center;
@@ -5799,7 +5806,6 @@ a.tds-dropdown-item:is(:hover, :active){
5799
5806
  font-size:var(--tds-date-picker-popover-font-size);
5800
5807
  font-weight:var(--t-font-weight-semibold);
5801
5808
  }
5802
-
5803
5809
  .tds-date-picker-calendar-nav{
5804
5810
  display:flex;
5805
5811
  align-items:center;
@@ -5816,30 +5822,24 @@ a.tds-dropdown-item:is(:hover, :active){
5816
5822
  transition-duration:var(--tds-date-picker-popover-interactive-duration);
5817
5823
  transition-property:var(--tds-date-picker-popover-interactive-property);
5818
5824
  }
5819
-
5820
5825
  .tds-date-picker-calendar-nav[data-hovered]{
5821
5826
  background-color:var(--t-fill-color-button-neutral-outline-hover);
5822
5827
  }
5823
-
5824
5828
  .tds-date-picker-calendar-nav[data-pressed]{
5825
5829
  background-color:var(--t-fill-color-button-neutral-outline-active);
5826
5830
  }
5827
-
5828
5831
  .tds-date-picker-calendar-nav[data-focus-visible]{
5829
5832
  outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
5830
5833
  outline-offset:var(--t-focus-ring-offset);
5831
5834
  }
5832
-
5833
5835
  .tds-date-picker-calendar-nav[data-disabled]{
5834
5836
  color:var(--t-text-color-disabled);
5835
5837
  cursor:not-allowed;
5836
5838
  }
5837
-
5838
5839
  .tds-date-picker-calendar-grid{
5839
5840
  font-feature-settings:"ss01", "ss02";
5840
5841
  border-collapse:collapse;
5841
5842
  }
5842
-
5843
5843
  .tds-date-picker-calendar-grid :where(thead,tbody,tr,td,th){
5844
5844
  padding:0;
5845
5845
  border:0;
@@ -5855,7 +5855,6 @@ a.tds-dropdown-item:is(:hover, :active){
5855
5855
  -moz-user-select:none;
5856
5856
  user-select:none;
5857
5857
  }
5858
-
5859
5858
  .tds-date-picker-calendar-cell-button{
5860
5859
  position:relative;
5861
5860
  display:flex;
@@ -5870,7 +5869,6 @@ a.tds-dropdown-item:is(:hover, :active){
5870
5869
  user-select:none;
5871
5870
  outline:0;
5872
5871
  }
5873
-
5874
5872
  .tds-date-picker-calendar-cell-button::before{
5875
5873
  position:absolute;
5876
5874
  inset:0;
@@ -5879,45 +5877,36 @@ a.tds-dropdown-item:is(:hover, :active){
5879
5877
  background-color:var(--_background-color);
5880
5878
  border-radius:50%;
5881
5879
  }
5882
-
5883
5880
  .tds-date-picker-calendar-cell-button[data-today]::before{
5884
5881
  box-shadow:inset 0 0 0 1.5px var(--t-border-color);
5885
5882
  }
5886
-
5887
5883
  .tds-date-picker-calendar-cell-button[data-outside-month]{
5888
5884
  display:none;
5889
5885
  }
5890
-
5891
5886
  .tds-date-picker-calendar-cell-button[data-hovered]{
5892
5887
  --_background-color:var(--t-fill-color-button-neutral-outline-hover);
5893
5888
  }
5894
-
5895
5889
  .tds-date-picker-calendar-cell-button[data-pressed]{
5896
5890
  --_background-color:var(--t-fill-color-button-neutral-outline-active);
5897
5891
  }
5898
-
5899
5892
  .tds-date-picker-calendar-cell-button[data-selected]{
5900
5893
  --_background-color:var(--t-fill-color-interaction);
5901
5894
  font-weight:var(--t-font-weight-semibold);
5902
5895
  color:var(--t-text-color-inverted);
5903
5896
  border-color:transparent;
5904
5897
  }
5905
-
5906
5898
  .tds-date-picker-calendar-cell-button[data-unavailable]{
5907
5899
  color:var(--t-text-color-disabled);
5908
5900
  text-decoration:line-through;
5909
5901
  cursor:not-allowed;
5910
5902
  }
5911
-
5912
5903
  .tds-date-picker-calendar-cell-button[data-disabled]{
5913
5904
  color:var(--t-text-color-disabled);
5914
5905
  }
5915
-
5916
5906
  .tds-date-picker-calendar-cell-button[data-focus-visible]{
5917
5907
  outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
5918
5908
  outline-offset:-2px;
5919
5909
  }
5920
-
5921
5910
  .tds-date-picker-calendar-cell-button[data-focus-visible][data-selected]{
5922
5911
  outline-offset:var(--t-focus-ring-offset);
5923
5912
  }
@@ -5935,11 +5924,9 @@ a.tds-dropdown-item:is(:hover, :active){
5935
5924
  --tds-number-stepper-button-offset:5px;
5936
5925
  --tds-number-stepper-button-gap:4px;
5937
5926
  }
5938
-
5939
5927
  .tds-number-stepper-field:has([readonly]) .tds-number-stepper-button{
5940
5928
  display:none;
5941
5929
  }
5942
-
5943
5930
  .tds-number-stepper-input{
5944
5931
  display:flex;
5945
5932
  flex:1;
@@ -5954,13 +5941,11 @@ a.tds-dropdown-item:is(:hover, :active){
5954
5941
  background:transparent;
5955
5942
  border:0;
5956
5943
  }
5957
-
5958
5944
  .tds-number-stepper-input::-webkit-inner-spin-button,.tds-number-stepper-input::-webkit-outer-spin-button{
5959
5945
  margin:0;
5960
5946
  -webkit-appearance:none;
5961
5947
  appearance:none;
5962
5948
  }
5963
-
5964
5949
  .tds-number-stepper-button{
5965
5950
  flex-shrink:0;
5966
5951
  align-self:center;
@@ -5968,11 +5953,9 @@ a.tds-dropdown-item:is(:hover, :active){
5968
5953
  block-size:calc(var(--tds-field-min-height) - (var(--tds-number-stepper-button-offset) * 2));
5969
5954
  padding:0;
5970
5955
  }
5971
-
5972
5956
  .tds-number-stepper-button + .tds-number-stepper-button{
5973
5957
  margin-inline-start:var(--tds-number-stepper-button-gap);
5974
5958
  }
5975
-
5976
5959
  .tds-number-stepper-button:last-of-type{
5977
5960
  margin-inline-end:var(--tds-number-stepper-button-offset);
5978
5961
  }
@@ -6011,7 +5994,7 @@ a.tds-dropdown-item:is(:hover, :active){
6011
5994
 
6012
5995
  --tds-select-option-gap:var(--t-spacing-1);
6013
5996
  --tds-select-option-padding-block:var(--t-spacing-fourth);
6014
- --tds-select-option-padding-inline:var(--t-spacing-2) var(--t-spacing-1);
5997
+ --tds-select-option-padding-inline:var(--t-spacing-1-half);
6015
5998
  --tds-select-option-font-size:1rem;
6016
5999
  --tds-select-option-color:var(--t-text-color);
6017
6000
  --tds-select-option-background-hover:var(--t-fill-color-neutral-070);
@@ -6020,7 +6003,7 @@ a.tds-dropdown-item:is(:hover, :active){
6020
6003
 
6021
6004
  --tds-select-group-label-padding-block-start:var(--t-spacing-2);
6022
6005
  --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);
6006
+ --tds-select-group-label-padding-inline:var(--t-spacing-half);
6024
6007
  --tds-select-group-label-font-size:var(--t-font-size-sm);
6025
6008
  --tds-select-group-label-font-weight:var(--t-font-weight-semibold);
6026
6009
  --tds-select-group-label-letter-spacing:0;
@@ -6128,7 +6111,7 @@ a.tds-dropdown-item:is(:hover, :active){
6128
6111
  .tds-select :is(li[role="option"],option:not([hidden])){
6129
6112
  display:block;
6130
6113
  align-content:center;
6131
- min-height:var(--t-container-size-md);
6114
+ min-height:38px;
6132
6115
  padding-block:var(--tds-select-option-padding-block);
6133
6116
  padding-inline:var(--tds-select-option-padding-inline);
6134
6117
  overflow:hidden;
@@ -6243,11 +6226,9 @@ a.tds-dropdown-item:is(:hover, :active){
6243
6226
  pointer-events:none;
6244
6227
  opacity:0;
6245
6228
  }
6246
-
6247
6229
  .tds-select:has(> button){
6248
6230
  anchor-scope:--tds-select-anchor;
6249
6231
  }
6250
-
6251
6232
  .tds-select:has( > button) > button{
6252
6233
  display:block;
6253
6234
  padding-inline-end:calc(var(--tds-select-caret-size) + var(--tds-select-caret-inline-offset) + .75ch);
@@ -6260,7 +6241,6 @@ a.tds-dropdown-item:is(:hover, :active){
6260
6241
  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
6242
  -webkit-tap-highlight-color:transparent;
6262
6243
  }
6263
-
6264
6244
  :is(.tds-select:has( > button) > button)::after{
6265
6245
  position:absolute;
6266
6246
  inset-block:0;
@@ -6274,11 +6254,9 @@ a.tds-dropdown-item:is(:hover, :active){
6274
6254
  transform:rotate(0);
6275
6255
  transition:var(--tds-select-caret-transition);
6276
6256
  }
6277
-
6278
6257
  .tds-select:has( > button):has([role="option"][aria-selected="true"]) > button{
6279
6258
  color:var(--tds-select-color);
6280
6259
  }
6281
-
6282
6260
  .tds-select:has( > button) [popover]{
6283
6261
  inset:auto;
6284
6262
  inline-size:-moz-max-content;
@@ -6307,18 +6285,15 @@ a.tds-dropdown-item:is(:hover, :active){
6307
6285
  translate:var(--tds-select-dropdown-open-translate);
6308
6286
  transition:var(--tds-select-dropdown-transition);
6309
6287
  }
6310
-
6311
6288
  :is(.tds-select:has( > button) [popover]):not(:popover-open){
6312
6289
  opacity:var(--tds-select-dropdown-closed-opacity);
6313
6290
  translate:var(--tds-select-dropdown-closed-translate);
6314
6291
  }
6315
-
6316
6292
  :is(.tds-select:has( > button) [popover]) ul{
6317
6293
  padding:0;
6318
6294
  margin:0;
6319
6295
  list-style:none;
6320
6296
  }
6321
-
6322
6297
  @starting-style{
6323
6298
  :is(.tds-select:has( > button) [popover]):popover-open{
6324
6299
  opacity:var(--tds-select-dropdown-closed-opacity);