@planningcenter/tapestry 3.2.3-rc.6 → 3.2.3-rc.8

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 (49) hide show
  1. package/dist/components/button/BaseButton.d.ts +4 -0
  2. package/dist/components/button/BaseButton.d.ts.map +1 -1
  3. package/dist/components/button/BaseButton.js.map +1 -1
  4. package/dist/components/button/Button.d.ts +2 -0
  5. package/dist/components/button/Button.d.ts.map +1 -1
  6. package/dist/components/button/Button.js.map +1 -1
  7. package/dist/components/button/DropdownButton.d.ts +2 -0
  8. package/dist/components/button/DropdownButton.d.ts.map +1 -1
  9. package/dist/components/button/DropdownButton.js.map +1 -1
  10. package/dist/components/button/IconButton.d.ts +4 -0
  11. package/dist/components/button/IconButton.d.ts.map +1 -1
  12. package/dist/components/button/IconButton.js.map +1 -1
  13. package/dist/components/button/LoadingButton.d.ts +2 -0
  14. package/dist/components/button/LoadingButton.d.ts.map +1 -1
  15. package/dist/components/button/LoadingButton.js.map +1 -1
  16. package/dist/components/button/PageHeaderActionsDropdownButton.d.ts +2 -0
  17. package/dist/components/button/PageHeaderActionsDropdownButton.d.ts.map +1 -1
  18. package/dist/components/button/PageHeaderActionsDropdownButton.js.map +1 -1
  19. package/dist/components/checkbox/Checkbox.d.ts +4 -0
  20. package/dist/components/checkbox/Checkbox.d.ts.map +1 -1
  21. package/dist/components/checkbox/Checkbox.js.map +1 -1
  22. package/dist/components/checkbox-group/CheckboxGroup.d.ts +4 -0
  23. package/dist/components/checkbox-group/CheckboxGroup.d.ts.map +1 -1
  24. package/dist/components/checkbox-group/CheckboxGroup.js.map +1 -1
  25. package/dist/components/link/IconLink.d.ts +2 -0
  26. package/dist/components/link/IconLink.d.ts.map +1 -1
  27. package/dist/components/link/IconLink.js.map +1 -1
  28. package/dist/components/page-header/PageHeader.d.ts +6 -3
  29. package/dist/components/page-header/PageHeader.d.ts.map +1 -1
  30. package/dist/components/page-header/PageHeader.js.map +1 -1
  31. package/dist/components/radio/Radio.d.ts +3 -0
  32. package/dist/components/radio/Radio.d.ts.map +1 -1
  33. package/dist/components/radio/Radio.js.map +1 -1
  34. package/dist/components/radio-group/RadioGroup.d.ts +4 -0
  35. package/dist/components/radio-group/RadioGroup.d.ts.map +1 -1
  36. package/dist/components/radio-group/RadioGroup.js.map +1 -1
  37. package/dist/components/toggle-switch/ToggleSwitch.d.ts +10 -4
  38. package/dist/components/toggle-switch/ToggleSwitch.d.ts.map +1 -1
  39. package/dist/components/toggle-switch/ToggleSwitch.js.map +1 -1
  40. package/dist/reactRender.css +1002 -1000
  41. package/dist/reactRender.css.map +1 -1
  42. package/dist/reactRenderLegacy.css +1002 -1000
  43. package/dist/reactRenderLegacy.css.map +1 -1
  44. package/dist/unstable.css +6 -4
  45. package/dist/unstable.css.map +1 -1
  46. package/dist/utilities/buttonLinkShared.d.ts +5 -0
  47. package/dist/utilities/buttonLinkShared.d.ts.map +1 -1
  48. package/dist/utilities/buttonLinkShared.js.map +1 -1
  49. package/package.json +2 -2
package/dist/reactRender.css CHANGED
@@ -1,364 +1,265 @@
1
-
2
- @media (prefers-reduced-motion: no-preference){
3
-
4
- :root{
5
- interpolate-size:allow-keywords;
6
- }
1
+ @layer t-critical{
2
+ tds-page-header:not(.hydrated){
3
+ display:none;
7
4
  }
5
+ }
8
6
 
9
- @layer tds-component{
10
- tds-sidenav,
11
- .tds-sidenav{
12
- --tds-sidenav-indent:12px;
13
- --tds-sidenav-item-depth:0;
14
-
15
- --tds-sidenav-item-transition:background-color var(--t-duration-200) var(--t-ease-in-out);
16
-
17
- --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;
18
- --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;
19
- --tds-sidenav-collapse-closed-opacity:0;
20
- --tds-sidenav-collapse-open-opacity:1;
21
- --tds-sidenav-collapse-closed-transform:translateY(-8px);
22
- --tds-sidenav-collapse-open-transform:translateY(0);
7
+ @layer t-component{
8
+ .tds-page-header{
9
+ --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
10
+ --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
11
+ --tds-page-header-color:var(--t-text-color);
12
+ --tds-page-header-bottom-border-color:var(--t-surface-color-canvas);
13
+ --tds-page-header-headline-color:var(--t-text-color-headline);
14
+ --tds-page-header-headline-font-size:var(--t-font-size-2xl);
15
+ --tds-page-header-padding-x:var(--t-spacing-2);
16
+ --tds-page-header-padding-y:var(--t-spacing-2);
17
+ --tds-page-header-nav-padding-x:var(--tds-page-header-padding-x, var(--t-spacing-3));
18
+ --tds-page-header-nav-gap:var(--t-spacing-1);
19
+ --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%);
20
+ --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
21
+ --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
22
+ --tds-page-header-nav-item-color:var(--t-text-color-secondary);
23
+ --tds-page-header-nav-item-background-color:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 35%);
24
+ --tds-page-header-nav-item-border-width:1px;
23
25
 
24
- --tds-sidenav-item-icon-size:var(--t-element-size-md);
25
- --tds-sidenav-item-background-hover:var(--t-fill-color-button-interaction-ghost-hover);
26
- --tds-sidenav-item-background-active:var(--t-fill-color-button-interaction-ghost-active);
27
- --tds-sidenav-item-background-selected:var(--t-fill-color-button-interaction-ghost-active);
26
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
27
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-bottom-border-color);
28
28
 
29
- --tds-sidenav-item-nested-background-hover:var(--tds-sidenav-item-background-hover);
30
- --tds-sidenav-item-nested-background-active:var(--tds-sidenav-item-background-hover);
31
- --tds-sidenav-item-nested-background-selected:transparent;
29
+ --tds-page-header-nav-item-color-hover:var(--t-text-color);
30
+ --tds-page-header-nav-item-background-color-hover:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 20%);
31
+ --tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
32
32
 
33
- --tds-sidenav-item-nested-border-color:var(--t-fill-color-neutral-050);
34
- --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
35
- --tds-sidenav-item-nested-border-color-selected:var(--t-border-color-status-info);
33
+ --tds-page-header-nav-item-background-color-active:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 10%);
34
+ --tds-page-header-nav-item-border-color-active:var(--tds-page-header-nav-item-background-color-active);
36
35
 
37
- --tds-sidenav-item-icon-color:var(--t-icon-color-secondary);
38
- --tds-sidenav-item-icon-color-selected:var(--t-icon-color);
39
- }
36
+ --tds-page-header-nav-item-color-disabled:var(--t-text-color-disabled);
37
+ --tds-page-header-nav-item-background-color-disabled:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 50%);
38
+ --tds-page-header-nav-item-border-color-disabled:var(--tds-page-header-nav-item-background-color-disabled);
40
39
 
41
- @media (prefers-reduced-motion: reduce){
42
- tds-sidenav,
43
- .tds-sidenav{
44
- --tds-sidenav-collapse-transition-enter:none;
45
- --tds-sidenav-collapse-transition-exit:none;
46
- --tds-sidenav-collapse-closed-transform:none;
47
- --tds-sidenav-collapse-open-transform:none;
40
+ --tds-page-header-nav-item-color-selected:var(--t-text-color);
41
+ --tds-page-header-nav-item-background-color-selected:var(--t-surface-color-canvas);
42
+ --tds-page-header-nav-item-border-color-selected:var(--tds-page-header-nav-item-background-color-selected);
43
+ --tds-page-header-nav-item-border-bottom-color-selected:var(--tds-page-header-nav-item-background-color-selected);
44
+ --tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning);
48
45
  }
49
- }
50
46
 
51
- .tds-sidenav--theme-gray{
52
- --tds-sidenav-item-background-hover:var(--t-fill-color-neutral-080);
53
- --tds-sidenav-item-background-active:var(--t-fill-color-neutral-070);
54
- --tds-sidenav-item-background-selected:var(--t-fill-color-neutral-050);
55
- --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
56
- --tds-sidenav-item-nested-border-color-selected:var(--t-fill-color-neutral-010);
47
+ .tds-page-header--profile{
48
+ --tds-page-header-padding-y:20px;
57
49
  }
58
- }
59
50
 
60
- .tds-sidenav :where(nav,ul,.tds-sidenav-section){
61
- display:flex;
51
+ @supports (color: light-dark(#fff, #000)){
52
+ .tds-page-header{
53
+ --tds-page-header-nav-background-start:light-dark(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0));
54
+ --tds-page-header-nav-background-end:light-dark(rgba(0, 0, 0, .05), rgba(255, 255, 255, .1));
55
+ }
62
56
  }
63
57
 
64
- .tds-sidenav :where(nav,ul,.tds-sidenav-section,.tds-sidenav-collapse){
65
- flex-direction:column;
66
- gap:var(--t-spacing-half);
67
- width:100%;
58
+ @media (min-width: 600px){
59
+ .tds-page-header{
60
+ --tds-page-header-background-color:var(--t-surface-color-canvas);
61
+ --tds-page-header-color:var(--t-text-color-secondary);
62
+ --tds-page-header-bottom-border-color:var(--t-border-color);
63
+ --tds-page-header-padding-x:var(--t-spacing-3);
64
+ --tds-page-header-headline-font-size:var(--t-font-size-3xl);
65
+ --tds-page-header-nav-gap:var(--t-spacing-half);
66
+ --tds-page-header-nav-background:transparent;
67
+ --tds-page-header-nav-item-padding-x:var(--t-spacing-2);
68
+ --tds-page-header-nav-item-border-width:1px;
69
+ --tds-page-header-nav-item-color:var(--t-text-color);
70
+ --tds-page-header-nav-item-background-color:var(--t-fill-color-neutral-070);
71
+ --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-060);
72
+ --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-050);
73
+ --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
74
+ --tds-page-header-nav-item-border-color-selected:var(--t-border-color);
75
+ }
68
76
  }
69
-
70
- .tds-sidenav-section-list{
71
- width:100%;
72
- padding:0;
73
- margin:0;
74
- list-style:none;
75
77
  }
76
78
 
77
- .tds-sidenav-section-header{
79
+ .tds-page-header{
78
80
  display:flex;
79
- align-items:baseline;
80
- justify-content:space-between;
81
- padding-top:var(--t-spacing-2);
81
+ flex-direction:column;
82
+ padding-top:var(--tds-page-header-padding-y);
83
+ color:var(--tds-page-header-color);
84
+ background:var(--tds-page-header-background-color);
85
+ border-bottom:1px solid var(--tds-page-header-bottom-border-color);
82
86
  }
83
87
 
84
- .tds-sidenav-section-header h2{
85
- margin:0;
86
- font-size:var(--t-font-size-sm);
87
- font-weight:var(--t-font-weight-semibold);
88
- line-height:1.35;
89
- color:var(--t-text-color-secondary);
90
- text-transform:uppercase;
88
+ .tds-page-header:not(.has-nav){
89
+ padding-bottom:var(--tds-page-header-padding-y);
91
90
  }
92
91
 
93
- .tds-sidenav-section:first-of-type .tds-sidenav-section-header{
94
- padding-top:0;
92
+ .tds-page-header.inactive{
93
+ background:var(--tds-page-header-background-color-inactive);
95
94
  }
96
95
 
97
- .tds-sidenav-section-header [slot="label-actions"]{
98
- display:flex;
99
- gap:var(--t-spacing-half);
100
- align-items:center;
96
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
97
+ width:100%;
101
98
  }
102
99
 
103
- .tds-sidenav-section [slot="section-actions"]{
104
- display:flex;
105
- gap:12px;
106
- align-items:center;
107
- min-height:42px;
108
- padding:var(--t-spacing-1) 0;
109
- }
110
-
111
- .tds-sidenav-section-list,
112
- .tds-sidenav-item{
113
- width:100%;
114
- padding:0;
115
- margin:0;
116
- }
117
-
118
- .tds-sidenav-item :is(a,button){
119
- position:relative;
100
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
120
101
  display:flex;
121
- gap:12px;
122
- align-items:center;
123
- width:100%;
124
- padding:12px;
125
- overflow:hidden;
126
- font-size:var(--t-font-size-sm);
127
- line-height:18px;
128
- color:var(--t-text-color-headline);
129
- white-space:nowrap;
130
- text-decoration:none;
131
- -webkit-appearance:none;
132
- -moz-appearance:none;
133
- appearance:none;
134
- cursor:pointer;
135
- background-color:var(--tds-sidenav-item-background, transparent);
136
- border:0;
137
- border-radius:var(--t-border-radius);
138
- transition:var(--tds-sidenav-item-transition);
102
+ flex-flow:row wrap;
103
+ gap:var(--t-spacing-half) var(--t-spacing-1);
104
+ align-items:flex-start;
105
+ justify-content:flex-start;
106
+ min-width:0;
139
107
  }
140
108
 
141
- :is(.tds-sidenav-item :is(a,button)):not(:has(.prefix,.suffix)),:is(.tds-sidenav-item :is(a,button)) :is(:not(.prefix,.suffix)){
142
- display:block;
143
- flex:1;
144
- overflow:hidden;
145
- text-overflow:ellipsis;
146
- text-align:left;
147
- white-space:nowrap;
109
+ :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{
110
+ display:flex;
111
+ gap:var(--tds-page-header-nav-gap);
112
+ padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
113
+ margin:0 0 -1px;
114
+ overflow:auto;
115
+ list-style:none;
116
+ background:var(--tds-page-header-nav-background);
148
117
  }
149
118
 
150
- :is(.tds-sidenav-item :is(a,button)):hover,:is(.tds-sidenav-item :is(a,button)):focus-visible{
151
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-hover);
152
- color:var(--t-text-color-headline);
119
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button){
120
+ position:relative;
121
+ display:inline-flex;
122
+ padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
123
+ font-size:var(--t-font-size-sm);
124
+ line-height:22px;
125
+ color:var(--tds-page-header-nav-item-color);
126
+ white-space:nowrap;
153
127
  text-decoration:none;
128
+ -webkit-appearance:none;
129
+ -moz-appearance:none;
130
+ appearance:none;
131
+ cursor:pointer;
132
+ outline-offset:-2px;
133
+ background-color:var(--tds-page-header-nav-item-background-color);
134
+ background-clip:padding-box;
135
+ border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
136
+ border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
137
+ border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
154
138
  }
155
139
 
156
- :is(.tds-sidenav-item :is(a,button)):active{
157
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-active);
158
- }
159
-
160
- :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]){
161
- overflow:hidden;
162
- color:var(--tds-sidenav-item-icon-color);
163
- }
164
-
165
- :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{
166
- display:block;
167
- width:var(--tds-sidenav-item-icon-size);
168
- height:var(--tds-sidenav-item-icon-size);
140
+ .selected:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)){
141
+ --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-selected);
142
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-selected);
143
+ --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-selected);
144
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-selected);
169
145
  }
170
146
 
171
- :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section{
172
- --tds-sidenav-indent:19px;
173
- }
174
-
175
- [aria-expanded="true"]:is(.tds-sidenav-item :is(a,button)) + .tds-sidenav-section-list{
176
- visibility:visible;
177
- block-size:auto;
178
- opacity:1;
179
- }
180
-
181
- .tds-sidenav-item.selected > :is(a,button),.tds-sidenav-item:has(.tds-sidenav-section):has(.selected) > :is(a,button){
182
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-selected);
183
- --tds-sidenav-item-icon-color:var(--tds-sidenav-item-icon-color-selected);
184
-
185
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-selected);
186
- font-weight:var(--t-font-weight-semibold);
187
- }
188
-
189
- .tds-sidenav-item:has(.tds-sidenav-section){
190
- display:flex;
191
- flex-direction:column;
192
- gap:var(--t-spacing-half);
193
- }
194
-
195
- .tds-sidenav-item .tds-sidenav-section-list{
196
- --tds-sidenav-item-depth:1;
197
- gap:0;
198
- }
147
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):hover{
148
+ --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
149
+ --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
150
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
151
+ }
199
152
 
200
- .tds-sidenav-action--toggle + :is(.tds-sidenav-item .tds-sidenav-section-list){
201
- visibility:hidden;
202
- block-size:0;
203
- overflow-y:clip;
204
- opacity:0;
205
- transition:content-visibility var(--t-duration-400) allow-discrete, opacity var(--t-duration-400), block-size var(--t-duration-400);
206
- }
153
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):active{
154
+ background-color:var(--tds-page-header-nav-item-background-color-active);
155
+ border-color:var(--tds-page-header-nav-item-border-color-active);
156
+ }
207
157
 
208
- :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list{
209
- --tds-sidenav-item-depth:2;
210
- }
158
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):disabled{
159
+ color:var(--tds-page-header-nav-item-color-disabled);
160
+ cursor:not-allowed;
161
+ background-color:var(--tds-page-header-nav-item-background-color-disabled);
162
+ opacity:1;
163
+ }
211
164
 
212
- :is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
213
- min-height:var(--t-element-size-2xl);
214
- padding-block:9px;
215
- padding-left:calc((var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth)) + var(--tds-sidenav-indent) + var(--t-spacing-fourth));
216
- line-height:1;
217
- background-color:transparent;
165
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
166
+ position:relative;
218
167
  }
219
168
 
220
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::before{
221
- position:absolute;
222
- top:0;
223
- bottom:0;
224
- left:calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
225
- width:2px;
226
- content:"";
227
- background-color:var(--tds-sidenav-item-nested-border-color);
228
- transition:var(--tds-sidenav-item-transition);
169
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator)) :is(a,button){
170
+ -webkit-mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
171
+ mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
229
172
  }
230
173
 
231
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::after{
174
+ :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{
232
175
  position:absolute;
233
- inset:0 0 0 calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
234
- z-index:-1;
235
- height:100%;
176
+ top:-5px;
177
+ right:-2px;
178
+ width:10px;
179
+ height:10px;
236
180
  content:"";
237
- background-color:var(--tds-sidenav-item-nested-background);
238
- border-radius:0 var(--t-border-radius) var(--t-border-radius) 0;
239
- transition:var(--tds-sidenav-item-transition);
240
- }
241
-
242
- :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)){
243
- display:block;
244
- text-align:left;
245
- white-space:normal;
246
- }
247
-
248
- :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{
249
- --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-hover);
250
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-hover);
181
+ background:var(--tds-page-header-nav-item-indicator-color);
182
+ border-radius:50%;
251
183
  }
252
184
 
253
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):active{
254
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-active);
185
+ @media (prefers-reduced-motion: no-preference){
186
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
187
+ animation:indicator-pulse 1.25s ease infinite;
188
+ }
255
189
  }
256
190
 
257
- .selected:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
258
- --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-selected);
259
- font-weight:var(--t-font-weight-medium);
260
- }
261
-
262
- .tds-sidenav-responsive-header{
191
+ .tds-page-header__title-bar{
263
192
  display:flex;
264
- gap:var(--t-spacing-2);
265
- align-items:center;
266
- width:100%;
193
+ flex-direction:column;
194
+ gap:var(--t-spacing-2) var(--t-spacing-1);
195
+ align-items:flex-start;
196
+ justify-content:space-between;
197
+ padding:0 var(--tds-page-header-padding-x);
267
198
  }
268
199
 
269
- .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle{
270
- order:0;
271
- }
272
-
273
- .tds-sidenav-responsive-header .tds-sidenav-responsive-header-label{
274
- flex:1;
275
- order:1;
276
- margin:0;
277
- font-size:var(--t-font-size-lg);
278
- font-weight:var(--t-font-weight-medium);
279
- color:var(--t-text-color-headline);
200
+ .tds-page-header--profile > .tds-page-header__title-bar{
201
+ align-items:center;
280
202
  }
281
203
 
282
- @media (max-width: 719px){
283
- .tds-sidenav-collapse{
284
- z-index:10001;
285
- display:none;
286
- max-width:min(448px, calc(100vw - 48px));
287
- padding:0;
288
- margin:12px 0;
289
- position-area:bottom span-right;
290
- overflow:hidden;
291
- outline:0;
292
- background:var(--t-surface-color-card);
293
- border:0;
294
- border-radius:6px;
295
- box-shadow:0 8px 20px 0 rgba(0, 0, 0, .25);
296
- opacity:var(--tds-sidenav-collapse-open-opacity);
297
- transform:var(--tds-sidenav-collapse-open-transform);
298
- transition:var(--tds-sidenav-collapse-transition-enter);
299
- will-change:transform;
300
- }
204
+ .tds-page-header__primary{
205
+ width:100%;
206
+ }
301
207
 
302
- .tds-sidenav-scroll-container{
303
- --webkit-overflow-scrolling:touch;
304
- display:block;
305
- width:100%;
306
- height:-moz-fit-content;
307
- height:fit-content;
308
- padding:var(--t-spacing-2);
309
- overflow-y:auto;
208
+ .tds-page-header__primary h1{
209
+ margin:0;
210
+ font-size:var(--tds-page-header-headline-font-size);
211
+ font-weight:var(--t-font-weight-normal);
212
+ line-height:32px;
213
+ color:var(--tds-page-header-headline-color);
214
+ overflow-wrap:break-word;
310
215
  }
311
216
 
312
- .tds-sidenav-item :is(a, button) :is(.prefix){
313
- display:none;
217
+ @media (min-width: 960px){
218
+ .tds-page-header__primary{
219
+ flex:1 1 max-content;
220
+ width:auto;
221
+ min-width:0;
222
+ max-width:100%;
314
223
  }
315
- @supports selector(:popover-open){
316
- .tds-sidenav-collapse:popover-open{
317
- display:flex;
318
- }
319
224
 
320
- .tds-sidenav-collapse:not(:popover-open){
321
- opacity:var(--tds-sidenav-collapse-closed-opacity);
322
- transition:var(--tds-sidenav-collapse-transition-exit);
323
- }
324
-
325
- @starting-style{
326
- .tds-sidenav-collapse:popover-open{
327
- opacity:var(--tds-sidenav-collapse-closed-opacity);
328
- transform:var(--tds-sidenav-collapse-closed-transform);
329
- }
330
- }
225
+ .tds-page-header__title-bar,
226
+ .tds-page-header--profile .tds-page-header__title-bar{
227
+ flex-flow:row nowrap;
228
+ row-gap:12px;
229
+ align-items:flex-start;
331
230
  }
332
- @supports not selector(:popover-open){
333
- .tds-sidenav-collapse.\:popover-open{
334
- display:flex;
231
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
232
+ width:auto;
335
233
  }
336
234
 
337
- .tds-sidenav-collapse:not(.\:popover-open){
338
- opacity:var(--tds-sidenav-collapse-closed-opacity);
339
- transition:var(--tds-sidenav-collapse-transition-exit);
235
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
236
+ justify-content:flex-end;
340
237
  }
341
- }
342
238
  }
343
239
 
344
- @media (min-width: 720px){
345
- .tds-sidenav-responsive-header{
346
- display:none;
347
- }
240
+ .tds-page-header-phone,
241
+ .tds-page-header-email{
242
+ color:var(--tds-page-header-color);
243
+ white-space:nowrap;
348
244
  }
349
245
 
350
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
351
- display:none;
352
- }
246
+ .tds-page-header-email{
247
+ max-width:100%;
248
+ overflow:hidden;
249
+ text-overflow:ellipsis;
250
+ }
353
251
 
354
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
355
- display:block;
356
- }
252
+ @keyframes indicator-pulse{
253
+ 0%{
254
+ opacity:.3;
255
+ transform:scale(.9);
256
+ }
357
257
 
358
- tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
359
- display:flex;
360
- flex-direction:column;
361
- }
258
+ 100%{
259
+ opacity:0;
260
+ transform:scale(1.75);
261
+ }
262
+ }
362
263
 
363
264
  .tds-checkbox{
364
265
  --tds-checkbox-font-size:var(--t-font-size-md);
@@ -554,269 +455,368 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
554
455
  --tds-checkbox-description-line-height:1.3;
555
456
  }
556
457
 
557
- @layer t-critical{
558
- tds-page-header:not(.hydrated){
559
- display:none;
560
- }
458
+
459
+ @media (prefers-reduced-motion: no-preference){
460
+
461
+ :root{
462
+ interpolate-size:allow-keywords;
561
463
  }
464
+ }
562
465
 
563
- @layer t-component{
564
- .tds-page-header{
565
- --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
566
- --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
567
- --tds-page-header-color:var(--t-text-color);
568
- --tds-page-header-bottom-border-color:var(--t-surface-color-canvas);
569
- --tds-page-header-headline-color:var(--t-text-color-headline);
570
- --tds-page-header-headline-font-size:var(--t-font-size-2xl);
571
- --tds-page-header-padding-x:var(--t-spacing-2);
572
- --tds-page-header-padding-y:var(--t-spacing-2);
573
- --tds-page-header-nav-padding-x:var(--tds-page-header-padding-x, var(--t-spacing-3));
574
- --tds-page-header-nav-gap:var(--t-spacing-1);
575
- --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%);
576
- --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
577
- --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
578
- --tds-page-header-nav-item-color:var(--t-text-color-secondary);
579
- --tds-page-header-nav-item-background-color:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 35%);
580
- --tds-page-header-nav-item-border-width:1px;
466
+ @layer tds-component{
467
+ tds-sidenav,
468
+ .tds-sidenav{
469
+ --tds-sidenav-indent:12px;
470
+ --tds-sidenav-item-depth:0;
581
471
 
582
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
583
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-bottom-border-color);
472
+ --tds-sidenav-item-transition:background-color var(--t-duration-200) var(--t-ease-in-out);
584
473
 
585
- --tds-page-header-nav-item-color-hover:var(--t-text-color);
586
- --tds-page-header-nav-item-background-color-hover:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 20%);
587
- --tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
474
+ --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;
475
+ --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;
476
+ --tds-sidenav-collapse-closed-opacity:0;
477
+ --tds-sidenav-collapse-open-opacity:1;
478
+ --tds-sidenav-collapse-closed-transform:translateY(-8px);
479
+ --tds-sidenav-collapse-open-transform:translateY(0);
588
480
 
589
- --tds-page-header-nav-item-background-color-active:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 10%);
590
- --tds-page-header-nav-item-border-color-active:var(--tds-page-header-nav-item-background-color-active);
481
+ --tds-sidenav-item-icon-size:var(--t-element-size-md);
482
+ --tds-sidenav-item-background-hover:var(--t-fill-color-button-interaction-ghost-hover);
483
+ --tds-sidenav-item-background-active:var(--t-fill-color-button-interaction-ghost-active);
484
+ --tds-sidenav-item-background-selected:var(--t-fill-color-button-interaction-ghost-active);
591
485
 
592
- --tds-page-header-nav-item-color-disabled:var(--t-text-color-disabled);
593
- --tds-page-header-nav-item-background-color-disabled:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 50%);
594
- --tds-page-header-nav-item-border-color-disabled:var(--tds-page-header-nav-item-background-color-disabled);
486
+ --tds-sidenav-item-nested-background-hover:var(--tds-sidenav-item-background-hover);
487
+ --tds-sidenav-item-nested-background-active:var(--tds-sidenav-item-background-hover);
488
+ --tds-sidenav-item-nested-background-selected:transparent;
595
489
 
596
- --tds-page-header-nav-item-color-selected:var(--t-text-color);
597
- --tds-page-header-nav-item-background-color-selected:var(--t-surface-color-canvas);
598
- --tds-page-header-nav-item-border-color-selected:var(--tds-page-header-nav-item-background-color-selected);
599
- --tds-page-header-nav-item-border-bottom-color-selected:var(--tds-page-header-nav-item-background-color-selected);
600
- --tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning);
601
- }
490
+ --tds-sidenav-item-nested-border-color:var(--t-fill-color-neutral-050);
491
+ --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
492
+ --tds-sidenav-item-nested-border-color-selected:var(--t-border-color-status-info);
602
493
 
603
- .tds-page-header--profile{
604
- --tds-page-header-padding-y:20px;
494
+ --tds-sidenav-item-icon-color:var(--t-icon-color-secondary);
495
+ --tds-sidenav-item-icon-color-selected:var(--t-icon-color);
605
496
  }
606
497
 
607
- @supports (color: light-dark(#fff, #000)){
608
- .tds-page-header{
609
- --tds-page-header-nav-background-start:light-dark(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0));
610
- --tds-page-header-nav-background-end:light-dark(rgba(0, 0, 0, .05), rgba(255, 255, 255, .1));
498
+ @media (prefers-reduced-motion: reduce){
499
+ tds-sidenav,
500
+ .tds-sidenav{
501
+ --tds-sidenav-collapse-transition-enter:none;
502
+ --tds-sidenav-collapse-transition-exit:none;
503
+ --tds-sidenav-collapse-closed-transform:none;
504
+ --tds-sidenav-collapse-open-transform:none;
505
+ }
611
506
  }
507
+
508
+ .tds-sidenav--theme-gray{
509
+ --tds-sidenav-item-background-hover:var(--t-fill-color-neutral-080);
510
+ --tds-sidenav-item-background-active:var(--t-fill-color-neutral-070);
511
+ --tds-sidenav-item-background-selected:var(--t-fill-color-neutral-050);
512
+ --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
513
+ --tds-sidenav-item-nested-border-color-selected:var(--t-fill-color-neutral-010);
612
514
  }
515
+ }
613
516
 
614
- @media (min-width: 600px){
615
- .tds-page-header{
616
- --tds-page-header-background-color:var(--t-surface-color-canvas);
617
- --tds-page-header-color:var(--t-text-color-secondary);
618
- --tds-page-header-bottom-border-color:var(--t-border-color);
619
- --tds-page-header-padding-x:var(--t-spacing-3);
620
- --tds-page-header-headline-font-size:var(--t-font-size-3xl);
621
- --tds-page-header-nav-gap:var(--t-spacing-half);
622
- --tds-page-header-nav-background:transparent;
623
- --tds-page-header-nav-item-padding-x:var(--t-spacing-2);
624
- --tds-page-header-nav-item-border-width:1px;
625
- --tds-page-header-nav-item-color:var(--t-text-color);
626
- --tds-page-header-nav-item-background-color:var(--t-fill-color-neutral-070);
627
- --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-060);
628
- --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-050);
629
- --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
630
- --tds-page-header-nav-item-border-color-selected:var(--t-border-color);
631
- }
517
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section){
518
+ display:flex;
519
+ }
520
+
521
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section,.tds-sidenav-collapse){
522
+ flex-direction:column;
523
+ gap:var(--t-spacing-half);
524
+ width:100%;
632
525
  }
526
+
527
+ .tds-sidenav-section-list{
528
+ width:100%;
529
+ padding:0;
530
+ margin:0;
531
+ list-style:none;
633
532
  }
634
533
 
635
- .tds-page-header{
534
+ .tds-sidenav-section-header{
636
535
  display:flex;
637
- flex-direction:column;
638
- padding-top:var(--tds-page-header-padding-y);
639
- color:var(--tds-page-header-color);
640
- background:var(--tds-page-header-background-color);
641
- border-bottom:1px solid var(--tds-page-header-bottom-border-color);
536
+ align-items:baseline;
537
+ justify-content:space-between;
538
+ padding-top:var(--t-spacing-2);
642
539
  }
643
540
 
644
- .tds-page-header:not(.has-nav){
645
- padding-bottom:var(--tds-page-header-padding-y);
541
+ .tds-sidenav-section-header h2{
542
+ margin:0;
543
+ font-size:var(--t-font-size-sm);
544
+ font-weight:var(--t-font-weight-semibold);
545
+ line-height:1.35;
546
+ color:var(--t-text-color-secondary);
547
+ text-transform:uppercase;
548
+ }
549
+
550
+ .tds-sidenav-section:first-of-type .tds-sidenav-section-header{
551
+ padding-top:0;
552
+ }
553
+
554
+ .tds-sidenav-section-header [slot="label-actions"]{
555
+ display:flex;
556
+ gap:var(--t-spacing-half);
557
+ align-items:center;
558
+ }
559
+
560
+ .tds-sidenav-section [slot="section-actions"]{
561
+ display:flex;
562
+ gap:12px;
563
+ align-items:center;
564
+ min-height:42px;
565
+ padding:var(--t-spacing-1) 0;
566
+ }
567
+
568
+ .tds-sidenav-section-list,
569
+ .tds-sidenav-item{
570
+ width:100%;
571
+ padding:0;
572
+ margin:0;
573
+ }
574
+
575
+ .tds-sidenav-item :is(a,button){
576
+ position:relative;
577
+ display:flex;
578
+ gap:12px;
579
+ align-items:center;
580
+ width:100%;
581
+ padding:12px;
582
+ overflow:hidden;
583
+ font-size:var(--t-font-size-sm);
584
+ line-height:18px;
585
+ color:var(--t-text-color-headline);
586
+ white-space:nowrap;
587
+ text-decoration:none;
588
+ -webkit-appearance:none;
589
+ -moz-appearance:none;
590
+ appearance:none;
591
+ cursor:pointer;
592
+ background-color:var(--tds-sidenav-item-background, transparent);
593
+ border:0;
594
+ border-radius:var(--t-border-radius);
595
+ transition:var(--tds-sidenav-item-transition);
646
596
  }
647
597
 
648
- .tds-page-header.inactive{
649
- background:var(--tds-page-header-background-color-inactive);
598
+ :is(.tds-sidenav-item :is(a,button)):not(:has(.prefix,.suffix)),:is(.tds-sidenav-item :is(a,button)) :is(:not(.prefix,.suffix)){
599
+ display:block;
600
+ flex:1;
601
+ overflow:hidden;
602
+ text-overflow:ellipsis;
603
+ text-align:left;
604
+ white-space:nowrap;
605
+ }
606
+
607
+ :is(.tds-sidenav-item :is(a,button)):hover,:is(.tds-sidenav-item :is(a,button)):focus-visible{
608
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-hover);
609
+ color:var(--t-text-color-headline);
610
+ text-decoration:none;
611
+ }
612
+
613
+ :is(.tds-sidenav-item :is(a,button)):active{
614
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-active);
615
+ }
616
+
617
+ :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]){
618
+ overflow:hidden;
619
+ color:var(--tds-sidenav-item-icon-color);
620
+ }
621
+
622
+ :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{
623
+ display:block;
624
+ width:var(--tds-sidenav-item-icon-size);
625
+ height:var(--tds-sidenav-item-icon-size);
626
+ }
627
+
628
+ :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section{
629
+ --tds-sidenav-indent:19px;
630
+ }
631
+
632
+ [aria-expanded="true"]:is(.tds-sidenav-item :is(a,button)) + .tds-sidenav-section-list{
633
+ visibility:visible;
634
+ block-size:auto;
635
+ opacity:1;
636
+ }
637
+
638
+ .tds-sidenav-item.selected > :is(a,button),.tds-sidenav-item:has(.tds-sidenav-section):has(.selected) > :is(a,button){
639
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-selected);
640
+ --tds-sidenav-item-icon-color:var(--tds-sidenav-item-icon-color-selected);
641
+
642
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-selected);
643
+ font-weight:var(--t-font-weight-semibold);
650
644
  }
651
645
 
652
- .tds-page-header :is([slot="actions"],.tds-page-header__actions){
653
- width:100%;
646
+ .tds-sidenav-item:has(.tds-sidenav-section){
647
+ display:flex;
648
+ flex-direction:column;
649
+ gap:var(--t-spacing-half);
654
650
  }
655
651
 
656
- .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
657
- display:flex;
658
- flex-flow:row wrap;
659
- gap:var(--t-spacing-half) var(--t-spacing-1);
660
- align-items:flex-start;
661
- justify-content:flex-start;
662
- min-width:0;
652
+ .tds-sidenav-item .tds-sidenav-section-list{
653
+ --tds-sidenav-item-depth:1;
654
+ gap:0;
663
655
  }
664
656
 
665
- :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{
666
- display:flex;
667
- gap:var(--tds-page-header-nav-gap);
668
- padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
669
- margin:0 0 -1px;
670
- overflow:auto;
671
- list-style:none;
672
- background:var(--tds-page-header-nav-background);
657
+ .tds-sidenav-action--toggle + :is(.tds-sidenav-item .tds-sidenav-section-list){
658
+ visibility:hidden;
659
+ block-size:0;
660
+ overflow-y:clip;
661
+ opacity:0;
662
+ transition:content-visibility var(--t-duration-400) allow-discrete, opacity var(--t-duration-400), block-size var(--t-duration-400);
673
663
  }
674
664
 
675
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button){
676
- position:relative;
677
- display:inline-flex;
678
- padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
679
- font-size:var(--t-font-size-sm);
680
- line-height:22px;
681
- color:var(--tds-page-header-nav-item-color);
682
- white-space:nowrap;
683
- text-decoration:none;
684
- -webkit-appearance:none;
685
- -moz-appearance:none;
686
- appearance:none;
687
- cursor:pointer;
688
- outline-offset:-2px;
689
- background-color:var(--tds-page-header-nav-item-background-color);
690
- background-clip:padding-box;
691
- border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
692
- border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
693
- border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
665
+ :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list{
666
+ --tds-sidenav-item-depth:2;
694
667
  }
695
668
 
696
- .selected:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)){
697
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-selected);
698
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-selected);
699
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-selected);
700
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-selected);
701
- }
702
-
703
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):hover{
704
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
705
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
706
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
707
- }
708
-
709
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):active{
710
- background-color:var(--tds-page-header-nav-item-background-color-active);
711
- border-color:var(--tds-page-header-nav-item-border-color-active);
712
- }
713
-
714
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):disabled{
715
- color:var(--tds-page-header-nav-item-color-disabled);
716
- cursor:not-allowed;
717
- background-color:var(--tds-page-header-nav-item-background-color-disabled);
718
- opacity:1;
719
- }
720
-
721
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
722
- position:relative;
669
+ :is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
670
+ min-height:var(--t-element-size-2xl);
671
+ padding-block:9px;
672
+ padding-left:calc((var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth)) + var(--tds-sidenav-indent) + var(--t-spacing-fourth));
673
+ line-height:1;
674
+ background-color:transparent;
723
675
  }
724
676
 
725
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator)) :is(a,button){
726
- -webkit-mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
727
- mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
677
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::before{
678
+ position:absolute;
679
+ top:0;
680
+ bottom:0;
681
+ left:calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
682
+ width:2px;
683
+ content:"";
684
+ background-color:var(--tds-sidenav-item-nested-border-color);
685
+ transition:var(--tds-sidenav-item-transition);
728
686
  }
729
687
 
730
- :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{
688
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::after{
731
689
  position:absolute;
732
- top:-5px;
733
- right:-2px;
734
- width:10px;
735
- height:10px;
690
+ inset:0 0 0 calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
691
+ z-index:-1;
692
+ height:100%;
736
693
  content:"";
737
- background:var(--tds-page-header-nav-item-indicator-color);
738
- border-radius:50%;
694
+ background-color:var(--tds-sidenav-item-nested-background);
695
+ border-radius:0 var(--t-border-radius) var(--t-border-radius) 0;
696
+ transition:var(--tds-sidenav-item-transition);
739
697
  }
740
698
 
741
- @media (prefers-reduced-motion: no-preference){
742
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
743
- animation:indicator-pulse 1.25s ease infinite;
744
- }
699
+ :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)){
700
+ display:block;
701
+ text-align:left;
702
+ white-space:normal;
745
703
  }
746
704
 
747
- .tds-page-header__title-bar{
748
- display:flex;
749
- flex-direction:column;
750
- gap:var(--t-spacing-2) var(--t-spacing-1);
751
- align-items:flex-start;
752
- justify-content:space-between;
753
- padding:0 var(--tds-page-header-padding-x);
754
- }
705
+ :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{
706
+ --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-hover);
707
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-hover);
708
+ }
755
709
 
756
- .tds-page-header--profile > .tds-page-header__title-bar{
757
- align-items:center;
758
- }
710
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):active{
711
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-active);
712
+ }
759
713
 
760
- .tds-page-header__primary{
714
+ .selected:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
715
+ --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-selected);
716
+ font-weight:var(--t-font-weight-medium);
717
+ }
718
+
719
+ .tds-sidenav-responsive-header{
720
+ display:flex;
721
+ gap:var(--t-spacing-2);
722
+ align-items:center;
761
723
  width:100%;
762
724
  }
763
725
 
764
- .tds-page-header__primary h1{
726
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle{
727
+ order:0;
728
+ }
729
+
730
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-label{
731
+ flex:1;
732
+ order:1;
765
733
  margin:0;
766
- font-size:var(--tds-page-header-headline-font-size);
767
- font-weight:var(--t-font-weight-normal);
768
- line-height:32px;
769
- color:var(--tds-page-header-headline-color);
770
- overflow-wrap:break-word;
734
+ font-size:var(--t-font-size-lg);
735
+ font-weight:var(--t-font-weight-medium);
736
+ color:var(--t-text-color-headline);
771
737
  }
772
738
 
773
- @media (min-width: 960px){
774
- .tds-page-header__primary{
775
- flex:1 1 max-content;
776
- width:auto;
777
- min-width:0;
778
- max-width:100%;
739
+ @media (max-width: 719px){
740
+ .tds-sidenav-collapse{
741
+ z-index:10001;
742
+ display:none;
743
+ max-width:min(448px, calc(100vw - 48px));
744
+ padding:0;
745
+ margin:12px 0;
746
+ position-area:bottom span-right;
747
+ overflow:hidden;
748
+ outline:0;
749
+ background:var(--t-surface-color-card);
750
+ border:0;
751
+ border-radius:6px;
752
+ box-shadow:0 8px 20px 0 rgba(0, 0, 0, .25);
753
+ opacity:var(--tds-sidenav-collapse-open-opacity);
754
+ transform:var(--tds-sidenav-collapse-open-transform);
755
+ transition:var(--tds-sidenav-collapse-transition-enter);
756
+ will-change:transform;
779
757
  }
780
758
 
781
- .tds-page-header__title-bar,
782
- .tds-page-header--profile .tds-page-header__title-bar{
783
- flex-flow:row nowrap;
784
- row-gap:12px;
785
- align-items:flex-start;
759
+ .tds-sidenav-scroll-container{
760
+ --webkit-overflow-scrolling:touch;
761
+ display:block;
762
+ width:100%;
763
+ height:-moz-fit-content;
764
+ height:fit-content;
765
+ padding:var(--t-spacing-2);
766
+ overflow-y:auto;
786
767
  }
787
- .tds-page-header :is([slot="actions"],.tds-page-header__actions){
788
- width:auto;
789
- }
790
768
 
791
- .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
792
- justify-content:flex-end;
769
+ .tds-sidenav-item :is(a, button) :is(.prefix){
770
+ display:none;
771
+ }
772
+ @supports selector(:popover-open){
773
+ .tds-sidenav-collapse:popover-open{
774
+ display:flex;
793
775
  }
794
- }
795
776
 
796
- .tds-page-header-phone,
797
- .tds-page-header-email{
798
- color:var(--tds-page-header-color);
799
- white-space:nowrap;
800
- }
777
+ .tds-sidenav-collapse:not(:popover-open){
778
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
779
+ transition:var(--tds-sidenav-collapse-transition-exit);
780
+ }
801
781
 
802
- .tds-page-header-email{
803
- max-width:100%;
804
- overflow:hidden;
805
- text-overflow:ellipsis;
806
- }
782
+ @starting-style{
783
+ .tds-sidenav-collapse:popover-open{
784
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
785
+ transform:var(--tds-sidenav-collapse-closed-transform);
786
+ }
787
+ }
788
+ }
789
+ @supports not selector(:popover-open){
790
+ .tds-sidenav-collapse.\:popover-open{
791
+ display:flex;
792
+ }
807
793
 
808
- @keyframes indicator-pulse{
809
- 0%{
810
- opacity:.3;
811
- transform:scale(.9);
794
+ .tds-sidenav-collapse:not(.\:popover-open){
795
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
796
+ transition:var(--tds-sidenav-collapse-transition-exit);
797
+ }
812
798
  }
799
+ }
813
800
 
814
- 100%{
815
- opacity:0;
816
- transform:scale(1.75);
801
+ @media (min-width: 720px){
802
+ .tds-sidenav-responsive-header{
803
+ display:none;
817
804
  }
818
805
  }
819
806
 
807
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
808
+ display:none;
809
+ }
810
+
811
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
812
+ display:block;
813
+ }
814
+
815
+ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
816
+ display:flex;
817
+ flex-direction:column;
818
+ }
819
+
820
820
 
821
821
  :is(.tds-input input)::-webkit-search-decoration,:is(.tds-input input)::-webkit-search-cancel-button,:is(.tds-input input)::-webkit-search-results-button,:is(.tds-input input)::-webkit-search-results-decoration{
822
822
  -webkit-appearance:none;
@@ -1060,147 +1060,6 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1060
1060
  --tds-radio-description-line-height:1.3;
1061
1061
  }
1062
1062
 
1063
- .tds-toggle-switch{
1064
- --tds-toggle-switch-font-size:var(--t-font-size-md);
1065
- --tds-toggle-switch-column-gap:var(--t-spacing-1);
1066
- --tds-toggle-switch-cursor:pointer;
1067
- --tds-toggle-switch-display:inline-grid;
1068
- --tds-toggle-switch-line-height:1.4;
1069
-
1070
- --tds-toggle-switch-label-color:var(--t-form-color);
1071
-
1072
- --tds-toggle-switch-track-width:var(--t-container-size-md);
1073
- --tds-toggle-switch-track-outline:none;
1074
- --tds-toggle-switch-track-height:var(--t-container-size-xs);
1075
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color);
1076
- --tds-toggle-switch-track-transition:background-color var(--t-duration-100) var(--t-ease-in-out);
1077
-
1078
- --tds-toggle-switch-thumb-size:var(--t-element-size-md);
1079
- --tds-toggle-switch-thumb-transform:translateX(0);
1080
- --tds-toggle-switch-thumb-transition:transform var(--t-duration-200) var(--t-ease-in-out);
1081
-
1082
- --tds-toggle-switch-description-font-size:var(--t-font-size-sm);
1083
- --tds-toggle-switch-description-line-height:1.35;
1084
- --tds-toggle-switch-description-color:var(--t-text-color-secondary);
1085
- position:relative;
1086
-
1087
- display:var(--tds-toggle-switch-display);
1088
- grid-template-columns:auto;
1089
- grid-auto-columns:1fr;
1090
- gap:var(--t-spacing-fourth) var(--tds-toggle-switch-column-gap);
1091
- -webkit-user-select:none;
1092
- -moz-user-select:none;
1093
- user-select:none;
1094
- }
1095
-
1096
- .tds-toggle-switch input[type="checkbox"]{
1097
- position:absolute;
1098
- width:var(--tds-toggle-switch-track-width);
1099
- height:var(--tds-toggle-switch-track-height);
1100
- margin:0;
1101
- -webkit-appearance:none;
1102
- -moz-appearance:none;
1103
- appearance:none;
1104
- cursor:var(--tds-toggle-switch-cursor);
1105
- outline:var(--tds-toggle-switch-track-outline);
1106
- outline-offset:var(--t-focus-ring-offset);
1107
- background-color:transparent;
1108
- border:0;
1109
- border-radius:var(--t-border-radius-round);
1110
- }
1111
-
1112
- :is(.tds-toggle-switch input[type="checkbox"]):focus-visible{
1113
- --tds-toggle-switch-track-outline:var(--t-focus-ring-outline);
1114
- }
1115
-
1116
- .tds-toggle-switch label{
1117
- display:inline-flex;
1118
- grid-area:1 / 2;
1119
- -moz-column-gap:var(--tds-toggle-switch-column-gap);
1120
- column-gap:var(--tds-toggle-switch-column-gap);
1121
- margin-top:-.09375em;
1122
- font-size:var(--tds-toggle-switch-font-size);
1123
- font-weight:var(--t-font-weight-normal);
1124
- line-height:var(--tds-toggle-switch-line-height);
1125
- color:var(--tds-toggle-switch-label-color);
1126
- cursor:var(--tds-toggle-switch-cursor);
1127
- }
1128
-
1129
- .tds-toggle-switch:not(:has(input:disabled)):has(input:hover){
1130
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-hover);
1131
- }
1132
-
1133
- .tds-toggle-switch:has(input:checked){
1134
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on);
1135
- --tds-toggle-switch-thumb-transform:translateX(calc(var(--tds-toggle-switch-track-width) - var(--tds-toggle-switch-thumb-size) - var(--t-spacing-half)));
1136
- }
1137
-
1138
- .tds-toggle-switch:has(input:checked):not(:has(input:disabled)):has(input:hover){
1139
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on-hover);
1140
- }
1141
-
1142
- .tds-toggle-switch:has(input:disabled){
1143
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-disabled);
1144
- --tds-toggle-switch-label-color:var(--t-form-color-disabled);
1145
- --tds-toggle-switch-description-color:var(--t-form-color-disabled);
1146
- --tds-toggle-switch-cursor:not-allowed;
1147
- }
1148
-
1149
- .tds-toggle-switch-track{
1150
- position:relative;
1151
- flex-shrink:0;
1152
- width:var(--tds-toggle-switch-track-width);
1153
- height:var(--tds-toggle-switch-track-height);
1154
- background-color:var(--tds-toggle-switch-track-background-color);
1155
- border-radius:var(--t-border-radius-round);
1156
- transition:var(--tds-toggle-switch-track-transition);
1157
- }
1158
-
1159
- .tds-toggle-switch-track::before{
1160
- position:absolute;
1161
- top:var(--t-spacing-fourth);
1162
- left:var(--t-spacing-fourth);
1163
- width:var(--tds-toggle-switch-thumb-size);
1164
- height:var(--tds-toggle-switch-thumb-size);
1165
- content:"";
1166
- background-color:#fff;
1167
- border-radius:var(--t-border-radius-round);
1168
- transform:var(--tds-toggle-switch-thumb-transform);
1169
- transition:var(--tds-toggle-switch-thumb-transition);
1170
- }
1171
-
1172
- @media (prefers-reduced-motion: reduce){
1173
-
1174
- .tds-toggle-switch-track{
1175
- --tds-toggle-switch-track-transition:none;
1176
- --tds-toggle-switch-thumb-transition:none;
1177
- }
1178
- }
1179
-
1180
- .tds-toggle-switch-description{
1181
- display:flex;
1182
- grid-area:2 / 2;
1183
- align-items:flex-start;
1184
- margin:0;
1185
- font-size:var(--tds-toggle-switch-description-font-size);
1186
- line-height:var(--tds-toggle-switch-description-line-height);
1187
- color:var(--tds-toggle-switch-description-color);
1188
- cursor:text;
1189
- }
1190
-
1191
- .tds-toggle-switch--sm{
1192
- --tds-toggle-switch-font-size:var(--t-font-size-sm);
1193
- --tds-toggle-switch-line-height:1.35;
1194
- --tds-toggle-switch-track-height:var(--t-element-size-lg);
1195
- --tds-toggle-switch-thumb-size:var(--t-element-size-sm);
1196
- --tds-toggle-switch-description-font-size:var(--t-font-size-xs);
1197
- --tds-toggle-switch-description-line-height:1.3;
1198
- }
1199
-
1200
- .tds-toggle-switch--hide-label{
1201
- --tds-toggle-switch-display:inline-flex;
1202
- }
1203
-
1204
1063
  .tds-input:has(textarea){
1205
1064
  --tds-input-padding-block:6px;
1206
1065
  --tds-input-resizer-size:var(--t-element-size-sm);
@@ -1265,47 +1124,188 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1265
1124
  border-radius:var(--tds-input-scrollbar-thumb-border-radius);
1266
1125
  }
1267
1126
 
1268
- :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1269
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
1270
- }
1127
+ :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1128
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
1129
+ }
1130
+
1131
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
1132
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
1133
+ }
1134
+
1135
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
1136
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
1137
+ }
1138
+
1139
+ :is(.tds-input textarea)::-webkit-scrollbar-corner{
1140
+ background:var(--tds-input-scrollbar-surface-color);
1141
+ }
1142
+
1143
+ :is(.tds-input textarea)::-webkit-resizer{
1144
+ background:var(--tds-input-resizer-icon) no-repeat;
1145
+ background-position:right bottom;
1146
+ background-size:var(--tds-input-resizer-size) var(--tds-input-resizer-size);
1147
+ }
1148
+
1149
+ :is(.tds-input textarea)::-webkit-scrollbar-track{
1150
+ margin-block:var(--tds-input-scrollbar-track-margin-block);
1151
+ cursor:default;
1152
+ }
1153
+
1154
+ @supports (-moz-appearance: none){
1155
+ :is(.tds-input textarea){
1156
+ scrollbar-color:var(--tds-input-scrollbar-thumb-color-default) var(--tds-input-scrollbar-surface-color);
1157
+ scrollbar-width:thin;
1158
+ }
1159
+
1160
+ @media (hover){
1161
+ :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1162
+ scrollbar-color:var(--tds-input-scrollbar-thumb-color-hover) var(--tds-input-scrollbar-surface-color);
1163
+ }
1164
+ }
1165
+ }
1166
+ }
1167
+
1168
+ .tds-toggle-switch{
1169
+ --tds-toggle-switch-font-size:var(--t-font-size-md);
1170
+ --tds-toggle-switch-column-gap:var(--t-spacing-1);
1171
+ --tds-toggle-switch-cursor:pointer;
1172
+ --tds-toggle-switch-display:inline-grid;
1173
+ --tds-toggle-switch-line-height:1.4;
1174
+
1175
+ --tds-toggle-switch-label-color:var(--t-form-color);
1176
+
1177
+ --tds-toggle-switch-track-width:var(--t-container-size-md);
1178
+ --tds-toggle-switch-track-outline:none;
1179
+ --tds-toggle-switch-track-height:var(--t-container-size-xs);
1180
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color);
1181
+ --tds-toggle-switch-track-transition:background-color var(--t-duration-100) var(--t-ease-in-out);
1182
+
1183
+ --tds-toggle-switch-thumb-size:var(--t-element-size-md);
1184
+ --tds-toggle-switch-thumb-transform:translateX(0);
1185
+ --tds-toggle-switch-thumb-transition:transform var(--t-duration-200) var(--t-ease-in-out);
1186
+
1187
+ --tds-toggle-switch-description-font-size:var(--t-font-size-sm);
1188
+ --tds-toggle-switch-description-line-height:1.35;
1189
+ --tds-toggle-switch-description-color:var(--t-text-color-secondary);
1190
+ position:relative;
1191
+
1192
+ display:var(--tds-toggle-switch-display);
1193
+ grid-template-columns:auto;
1194
+ grid-auto-columns:1fr;
1195
+ gap:var(--t-spacing-fourth) var(--tds-toggle-switch-column-gap);
1196
+ -webkit-user-select:none;
1197
+ -moz-user-select:none;
1198
+ user-select:none;
1199
+ }
1200
+
1201
+ .tds-toggle-switch input[type="checkbox"]{
1202
+ position:absolute;
1203
+ width:var(--tds-toggle-switch-track-width);
1204
+ height:var(--tds-toggle-switch-track-height);
1205
+ margin:0;
1206
+ -webkit-appearance:none;
1207
+ -moz-appearance:none;
1208
+ appearance:none;
1209
+ cursor:var(--tds-toggle-switch-cursor);
1210
+ outline:var(--tds-toggle-switch-track-outline);
1211
+ outline-offset:var(--t-focus-ring-offset);
1212
+ background-color:transparent;
1213
+ border:0;
1214
+ border-radius:var(--t-border-radius-round);
1215
+ }
1216
+
1217
+ :is(.tds-toggle-switch input[type="checkbox"]):focus-visible{
1218
+ --tds-toggle-switch-track-outline:var(--t-focus-ring-outline);
1219
+ }
1220
+
1221
+ .tds-toggle-switch label{
1222
+ display:inline-flex;
1223
+ grid-area:1 / 2;
1224
+ -moz-column-gap:var(--tds-toggle-switch-column-gap);
1225
+ column-gap:var(--tds-toggle-switch-column-gap);
1226
+ margin-top:-.09375em;
1227
+ font-size:var(--tds-toggle-switch-font-size);
1228
+ font-weight:var(--t-font-weight-normal);
1229
+ line-height:var(--tds-toggle-switch-line-height);
1230
+ color:var(--tds-toggle-switch-label-color);
1231
+ cursor:var(--tds-toggle-switch-cursor);
1232
+ }
1233
+
1234
+ .tds-toggle-switch:not(:has(input:disabled)):has(input:hover){
1235
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-hover);
1236
+ }
1271
1237
 
1272
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
1273
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
1274
- }
1238
+ .tds-toggle-switch:has(input:checked){
1239
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on);
1240
+ --tds-toggle-switch-thumb-transform:translateX(calc(var(--tds-toggle-switch-track-width) - var(--tds-toggle-switch-thumb-size) - var(--t-spacing-half)));
1241
+ }
1275
1242
 
1276
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
1277
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
1243
+ .tds-toggle-switch:has(input:checked):not(:has(input:disabled)):has(input:hover){
1244
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on-hover);
1278
1245
  }
1279
1246
 
1280
- :is(.tds-input textarea)::-webkit-scrollbar-corner{
1281
- background:var(--tds-input-scrollbar-surface-color);
1282
- }
1247
+ .tds-toggle-switch:has(input:disabled){
1248
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-disabled);
1249
+ --tds-toggle-switch-label-color:var(--t-form-color-disabled);
1250
+ --tds-toggle-switch-description-color:var(--t-form-color-disabled);
1251
+ --tds-toggle-switch-cursor:not-allowed;
1252
+ }
1283
1253
 
1284
- :is(.tds-input textarea)::-webkit-resizer{
1285
- background:var(--tds-input-resizer-icon) no-repeat;
1286
- background-position:right bottom;
1287
- background-size:var(--tds-input-resizer-size) var(--tds-input-resizer-size);
1288
- }
1254
+ .tds-toggle-switch-track{
1255
+ position:relative;
1256
+ flex-shrink:0;
1257
+ width:var(--tds-toggle-switch-track-width);
1258
+ height:var(--tds-toggle-switch-track-height);
1259
+ background-color:var(--tds-toggle-switch-track-background-color);
1260
+ border-radius:var(--t-border-radius-round);
1261
+ transition:var(--tds-toggle-switch-track-transition);
1262
+ }
1289
1263
 
1290
- :is(.tds-input textarea)::-webkit-scrollbar-track{
1291
- margin-block:var(--tds-input-scrollbar-track-margin-block);
1292
- cursor:default;
1293
- }
1264
+ .tds-toggle-switch-track::before{
1265
+ position:absolute;
1266
+ top:var(--t-spacing-fourth);
1267
+ left:var(--t-spacing-fourth);
1268
+ width:var(--tds-toggle-switch-thumb-size);
1269
+ height:var(--tds-toggle-switch-thumb-size);
1270
+ content:"";
1271
+ background-color:#fff;
1272
+ border-radius:var(--t-border-radius-round);
1273
+ transform:var(--tds-toggle-switch-thumb-transform);
1274
+ transition:var(--tds-toggle-switch-thumb-transition);
1275
+ }
1294
1276
 
1295
- @supports (-moz-appearance: none){
1296
- :is(.tds-input textarea){
1297
- scrollbar-color:var(--tds-input-scrollbar-thumb-color-default) var(--tds-input-scrollbar-surface-color);
1298
- scrollbar-width:thin;
1299
- }
1277
+ @media (prefers-reduced-motion: reduce){
1300
1278
 
1301
- @media (hover){
1302
- :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1303
- scrollbar-color:var(--tds-input-scrollbar-thumb-color-hover) var(--tds-input-scrollbar-surface-color);
1304
- }
1305
- }
1306
- }
1279
+ .tds-toggle-switch-track{
1280
+ --tds-toggle-switch-track-transition:none;
1281
+ --tds-toggle-switch-thumb-transition:none;
1282
+ }
1307
1283
  }
1308
1284
 
1285
+ .tds-toggle-switch-description{
1286
+ display:flex;
1287
+ grid-area:2 / 2;
1288
+ align-items:flex-start;
1289
+ margin:0;
1290
+ font-size:var(--tds-toggle-switch-description-font-size);
1291
+ line-height:var(--tds-toggle-switch-description-line-height);
1292
+ color:var(--tds-toggle-switch-description-color);
1293
+ cursor:text;
1294
+ }
1295
+
1296
+ .tds-toggle-switch--sm{
1297
+ --tds-toggle-switch-font-size:var(--t-font-size-sm);
1298
+ --tds-toggle-switch-line-height:1.35;
1299
+ --tds-toggle-switch-track-height:var(--t-element-size-lg);
1300
+ --tds-toggle-switch-thumb-size:var(--t-element-size-sm);
1301
+ --tds-toggle-switch-description-font-size:var(--t-font-size-xs);
1302
+ --tds-toggle-switch-description-line-height:1.3;
1303
+ }
1304
+
1305
+ .tds-toggle-switch--hide-label{
1306
+ --tds-toggle-switch-display:inline-flex;
1307
+ }
1308
+
1309
1309
  .tds-select{
1310
1310
  --tds-select-border-color:var(--t-form-border-color);
1311
1311
  --tds-select-border-color-hover:var(--t-form-border-color-hover);
@@ -3393,301 +3393,160 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
3393
3393
  line-height:var(--tds-checkbox-group-description-line-height);
3394
3394
  }
3395
3395
 
3396
- .tds-checkbox-group--sm{
3397
- --tds-checkbox-group-line-height:1.35;
3398
- --tds-checkbox-group-font-size:var(--t-font-size-sm);
3399
- --tds-checkbox-group-description-font-size:var(--t-font-size-xs);
3400
- --tds-checkbox-group-description-line-height:1.3;
3401
- }
3402
-
3403
- .tds-combo-box{
3404
- --tds-combo-box-border-color:var(--t-form-border-color);
3405
- --tds-combo-box-border-color-hover:var(--t-form-border-color-hover);
3406
- --tds-combo-box-border-color-active:var(--t-form-border-color-focus);
3407
- --tds-combo-box-background-color:var(--t-form-background-color);
3408
- --tds-combo-box-color:var(--t-form-color);
3409
- --tds-combo-box-placeholder-color:var(--t-form-placeholder-color);
3410
- --tds-combo-box-font-size:var(--t-font-size-md);
3411
- --tds-combo-box-min-height:var(--t-container-size-md);
3412
- --tds-combo-box-padding-block:6px;
3413
- --tds-combo-box-button-offset:4px;
3414
- --tds-combo-box-description-color:var(--t-text-color-secondary);
3415
- --tds-combo-box-description-invalid-icon-display:none;
3416
-
3417
- position:relative;
3418
- display:flex;
3419
- flex-direction:column;
3420
- gap:var(--t-spacing-half);
3421
- }
3422
-
3423
- .tds-combo-box[data-required] .tds-combo-box-label::after{
3424
- margin-left:.25ch;
3425
- color:var(--t-text-color-status-error);
3426
- content:"*";
3427
- }
3428
-
3429
- .tds-combo-box[data-invalid]{
3430
- --tds-combo-box-border-color:var(--t-form-border-color-error);
3431
- --tds-combo-box-border-color-hover:var(--t-form-border-color-error-hover);
3432
- --tds-combo-box-border-color-active:var(--t-form-border-color-error-hover);
3433
- --tds-combo-box-background-color:var(--t-form-background-color-error);
3434
- --tds-combo-box-description-color:var(--t-text-color-status-error);
3435
- --tds-combo-box-description-invalid-icon-display:inline-block;
3436
- }
3437
-
3438
- .tds-combo-box[data-disabled]{
3439
- --tds-combo-box-border-color:var(--t-form-border-color-disabled);
3440
- --tds-combo-box-background-color:var(--t-form-background-color-disabled);
3441
- --tds-combo-box-color:var(--t-form-color-disabled);
3442
- }
3443
-
3444
- .tds-combo-box[data-disabled] .tds-combo-box-label{
3445
- color:var(--t-form-color-disabled);
3446
- }
3447
-
3448
- .tds-combo-box[data-disabled] .tds-combo-box-field{
3449
- cursor:not-allowed;
3450
- }
3451
-
3452
- .tds-combo-box[data-open] .tds-combo-box-button > svg{
3453
- transform:rotate(.5turn);
3454
- }
3455
-
3456
- .tds-combo-box--lg{
3457
- --tds-combo-box-min-height:var(--t-container-size-lg);
3458
- --tds-combo-box-font-size:var(--t-font-size-lg);
3459
- --tds-combo-box-button-offset:5px;
3460
- }
3461
-
3462
- .tds-combo-box-label{
3463
- font-size:var(--t-font-size-md);
3464
- font-weight:var(--t-font-weight-normal);
3465
- color:var(--t-text-color);
3466
- cursor:default;
3467
- }
3468
-
3469
- .tds-combo-box-field{
3470
- display:flex;
3471
- align-items:center;
3472
- inline-size:100%;
3473
- min-block-size:var(--tds-combo-box-min-height);
3474
- font-family:inherit;
3475
- font-size:var(--tds-combo-box-font-size);
3476
- line-height:1;
3477
- color:var(--tds-combo-box-color);
3478
- -webkit-appearance:none;
3479
- -moz-appearance:none;
3480
- appearance:none;
3481
- cursor:default;
3482
- outline:var(--t-focus-ring-width) solid transparent;
3483
- outline-offset:0;
3484
- background-color:var(--tds-combo-box-background-color);
3485
- border:var(--t-form-border-width) solid var(--tds-combo-box-border-color);
3486
- border-radius:var(--t-form-border-radius);
3487
- }
3488
-
3489
- .tds-combo-box-field[data-hovered]:not([data-focus-visible],[data-focus-within],[data-disabled]){
3490
- border-color:var(--tds-combo-box-border-color-hover);
3491
- }
3492
-
3493
- .tds-combo-box-field[data-focus-within]{
3494
- outline-color:var(--t-focus-ring-color);
3495
- outline-offset:var(--t-focus-ring-offset);
3496
- border-color:var(--tds-combo-box-border-color-active);
3497
- }
3498
-
3499
- .tds-combo-box-field:has([readonly]){
3500
- --tds-input-border-color:var(--t-form-border-color-readonly);
3501
- --tds-combo-box-background-color:var(--t-form-background-color-readonly);
3502
- }
3503
-
3504
- .tds-combo-box-field[data-focus-within]:has([readonly]){
3505
- border-color:var(--t-form-border-color-hover);
3506
- }
3507
-
3508
- .tds-combo-box-input{
3509
- display:flex;
3510
- flex:1;
3511
- align-items:center;
3512
- padding-block:var(--tds-combo-box-padding-block);
3513
- padding-inline-start:var(--t-spacing-1);
3514
- font-family:inherit;
3515
- font-size:inherit;
3516
- color:inherit;
3517
- outline:0;
3518
- background:transparent;
3519
- border:0;
3520
- }
3521
-
3522
- .tds-combo-box-input::-moz-placeholder{
3523
- color:var(--tds-combo-box-placeholder-color);
3524
- -moz-user-select:none;
3525
- user-select:none;
3526
- }
3527
-
3528
- .tds-combo-box-input::placeholder{
3529
- color:var(--tds-combo-box-placeholder-color);
3530
- -webkit-user-select:none;
3531
- -moz-user-select:none;
3532
- user-select:none;
3533
- }
3534
-
3535
- .tds-combo-box-button{
3536
- flex-shrink:0;
3537
- align-self:center;
3538
- inline-size:calc(var(--tds-combo-box-min-height) - (var(--tds-combo-box-button-offset) * 2));
3539
- block-size:calc(var(--tds-combo-box-min-height) - (var(--tds-combo-box-button-offset) * 2));
3540
- padding:0;
3541
- margin-inline-end:var(--tds-combo-box-button-offset);
3542
- }
3543
-
3544
- .tds-combo-box-button > svg{
3545
- inline-size:var(--tds-combo-box-font-size);
3546
- block-size:var(--tds-combo-box-font-size);
3547
- transition:transform var(--t-duration-300) var(--t-ease-in-out);
3548
- }
3549
-
3550
- .tds-combo-box-button:not(.tds-btn){
3551
- display:inline-flex;
3552
- align-items:center;
3553
- justify-content:center;
3554
- inline-size:auto;
3555
- block-size:auto;
3556
- margin-inline-end:.75em;
3557
- color:var(--t-icon-color);
3558
- cursor:default;
3559
- background:transparent;
3560
- border:0;
3561
- }
3396
+ .tds-checkbox-group--sm{
3397
+ --tds-checkbox-group-line-height:1.35;
3398
+ --tds-checkbox-group-font-size:var(--t-font-size-sm);
3399
+ --tds-checkbox-group-description-font-size:var(--t-font-size-xs);
3400
+ --tds-checkbox-group-description-line-height:1.3;
3401
+ }
3562
3402
 
3563
- .tds-combo-box-button[data-focus-visible]:not(.tds-btn){
3564
- outline:0;
3565
- }
3403
+ .tds-time-field{
3404
+ --tds-time-field-border-color:var(--t-form-border-color);
3405
+ --tds-time-field-border-color-hover:var(--t-form-border-color-hover);
3406
+ --tds-time-field-border-color-active:var(--t-form-border-color-focus);
3407
+ --tds-time-field-background-color:var(--t-form-background-color);
3408
+ --tds-time-field-color:var(--t-form-color);
3409
+ --tds-time-field-placeholder-color:var(--t-form-placeholder-color);
3410
+ --tds-time-field-font-size:var(--t-font-size-md);
3411
+ --tds-time-field-min-height:var(--t-container-size-md);
3412
+ --tds-time-field-padding-block:6px;
3413
+ --tds-time-field-description-color:var(--t-text-color-secondary);
3414
+ --tds-time-field-description-invalid-icon-display:none;
3566
3415
 
3567
- .tds-combo-box-popover{
3568
- width:var(--trigger-width);
3569
- max-block-size:inherit;
3570
- padding:var(--t-spacing-1);
3571
- overflow:auto;
3572
- outline:0;
3573
- scrollbar-color:#0004 #0000;
3574
- scrollbar-width:thin;
3575
- background:var(--t-surface-color-card);
3576
- background-clip:padding-box;
3577
- border:1px solid var(--t-border-color);
3578
- border-radius:var(--t-border-radius);
3579
- box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
3416
+ position:relative;
3417
+ display:flex;
3418
+ flex-direction:column;
3419
+ gap:var(--t-spacing-half);
3580
3420
  }
3581
3421
 
3582
- .tds-combo-box-popover[data-entering]{
3583
- animation:tds-combo-box-popover-enter 160ms ease;
3584
- }
3585
-
3586
- .tds-combo-box-popover[data-exiting]{
3587
- animation:tds-combo-box-popover-exit 130ms ease;
3422
+ .tds-time-field[data-required] .tds-time-field-label::after{
3423
+ margin-left:.25ch;
3424
+ color:var(--t-text-color-status-error);
3425
+ content:"*";
3588
3426
  }
3589
3427
 
3590
- @keyframes tds-combo-box-popover-enter{
3591
- from{
3592
- opacity:0;
3593
- transform:translateY(-8px);
3428
+ .tds-time-field[data-invalid]{
3429
+ --tds-time-field-border-color:var(--t-form-border-color-error);
3430
+ --tds-time-field-border-color-hover:var(--t-form-border-color-error-hover);
3431
+ --tds-time-field-border-color-active:var(--t-form-border-color-error-hover);
3432
+ --tds-time-field-background-color:var(--t-form-background-color-error);
3433
+ --tds-time-field-description-color:var(--t-text-color-status-error);
3434
+ --tds-time-field-description-invalid-icon-display:inline-block;
3594
3435
  }
3595
- }
3596
3436
 
3597
- @keyframes tds-combo-box-popover-exit{
3598
- to{
3599
- opacity:0;
3600
- transform:translateY(-8px);
3437
+ .tds-time-field[data-disabled]{
3438
+ --tds-time-field-border-color:var(--t-form-border-color-disabled);
3439
+ --tds-time-field-background-color:var(--t-form-background-color-disabled);
3440
+ --tds-time-field-color:var(--t-form-color-disabled);
3441
+ --tds-time-field-placeholder-color:var(--t-form-color-disabled);
3601
3442
  }
3602
- }
3603
3443
 
3604
- @media (prefers-reduced-motion: reduce){
3605
- .tds-combo-box-popover[data-entering],.tds-combo-box-popover[data-exiting]{
3606
- animation:none;
3444
+ .tds-time-field[data-disabled] .tds-time-field-label{
3445
+ color:var(--t-form-color-disabled);
3607
3446
  }
3608
3447
 
3609
- .tds-combo-box-button > svg{
3610
- transition:none;
3611
- }
3612
- }
3448
+ .tds-time-field[data-disabled] .tds-time-field-input{
3449
+ cursor:not-allowed;
3450
+ }
3613
3451
 
3614
- .tds-combo-box-list{
3615
- padding:0;
3616
- margin:0;
3452
+ .tds-time-field--lg{
3453
+ --tds-time-field-min-height:var(--t-container-size-lg);
3454
+ --tds-time-field-font-size:var(--t-font-size-lg);
3617
3455
  }
3618
3456
 
3619
- .tds-combo-box-list-item{
3620
- display:block;
3621
- padding-block:var(--t-spacing-1);
3622
- padding-inline:var(--t-spacing-2) var(--t-spacing-1);
3623
- overflow:hidden;
3624
- text-overflow:ellipsis;
3625
- font-size:1rem;
3457
+ .tds-time-field-label{
3458
+ font-size:var(--t-font-size-md);
3459
+ font-weight:var(--t-font-weight-normal);
3626
3460
  color:var(--t-text-color);
3627
- white-space:nowrap;
3628
3461
  cursor:default;
3629
- outline-offset:-1px;
3630
- border-radius:var(--t-border-radius);
3631
3462
  }
3632
3463
 
3633
- .tds-combo-box-list-item[data-hovered]:not([data-disabled]){
3634
- background:var(--t-fill-color-neutral-070);
3635
- }
3464
+ .tds-time-field-input{
3465
+ display:flex;
3466
+ align-items:center;
3467
+ inline-size:100%;
3468
+ min-block-size:var(--tds-time-field-min-height);
3469
+ padding-block:var(--tds-time-field-padding-block);
3470
+ padding-inline:var(--t-spacing-1);
3471
+ font-family:inherit;
3472
+ font-size:var(--tds-time-field-font-size);
3473
+ font-variant-numeric:tabular-nums;
3474
+ line-height:1;
3475
+ color:var(--tds-time-field-color);
3476
+ cursor:text;
3477
+ outline:var(--t-focus-ring-width) solid transparent;
3478
+ outline-offset:0;
3479
+ background-color:var(--tds-time-field-background-color);
3480
+ border:var(--t-form-border-width) solid var(--tds-time-field-border-color);
3481
+ border-radius:var(--t-form-border-radius);
3482
+ }
3636
3483
 
3637
- .tds-combo-box-list-item[data-selected]{
3638
- background:var(--t-fill-color-button-interaction-ghost-active);
3484
+ .tds-time-field-input[data-hovered]:not([data-focus-visible],[data-focused],[data-disabled]){
3485
+ border-color:var(--tds-time-field-border-color-hover);
3639
3486
  }
3640
3487
 
3641
- .tds-combo-box-list-item[data-focus-visible]{
3642
- outline:var(--t-focus-ring-outline);
3643
- outline-offset:-1px;
3488
+ .tds-time-field-input[data-focus-within]{
3489
+ outline-color:var(--t-focus-ring-color);
3490
+ outline-offset:var(--t-focus-ring-offset);
3491
+ border-color:var(--tds-time-field-border-color-active);
3644
3492
  }
3645
3493
 
3646
- .tds-combo-box-list-item[data-disabled]{
3647
- color:var(--t-form-color-disabled);
3648
- cursor:not-allowed;
3494
+ .tds-time-field-input[data-readonly]{
3495
+ color:var(--t-form-color-readonly);
3496
+ background-color:var(--t-form-background-color-readonly);
3497
+ border-color:var(--t-form-border-color-readonly);
3649
3498
  }
3650
3499
 
3651
- .tds-combo-box-list-item[data-disabled][data-hovered]{
3652
- background:transparent;
3500
+ .tds-time-field-input[data-readonly][data-hovered]{
3501
+ border-color:var(--t-form-border-color-readonly);
3653
3502
  }
3654
3503
 
3655
- .tds-combo-box-empty-state{
3656
- padding-block:var(--t-spacing-1);
3657
- padding-inline:var(--t-spacing-2);
3658
- font-size:var(--t-font-size-md);
3659
- color:var(--t-text-color-secondary);
3504
+ .tds-time-field-input[data-readonly][data-focus-within]{
3505
+ outline-color:var(--t-focus-ring-color);
3506
+ outline-offset:var(--t-focus-ring-offset);
3507
+ border-color:var(--t-form-border-color-hover);
3508
+ }
3509
+
3510
+ .tds-time-field-segment{
3511
+ padding-inline:1px;
3512
+ font-variant-numeric:tabular-nums;
3513
+ cursor:text;
3514
+ caret-color:transparent;
3515
+ border-radius:var(--t-border-radius-sm);
3660
3516
  }
3661
3517
 
3662
- .tds-combo-box-list-section:not(:first-child){
3663
- margin-block-start:var(--t-spacing-half);
3518
+ .tds-time-field-segment[data-placeholder]{
3519
+ color:var(--tds-time-field-placeholder-color);
3664
3520
  }
3665
3521
 
3666
- .tds-combo-box-section-header{
3667
- padding-block:var(--t-spacing-1);
3668
- padding-inline:var(--t-spacing-1);
3669
- font-size:var(--t-font-size-sm);
3670
- font-weight:var(--t-font-weight-semibold);
3671
- color:var(--t-text-color-secondary);
3522
+ .tds-time-field-segment[data-focused]{
3523
+ color:var(--t-text-color-inverted);
3524
+ outline:0;
3525
+ background:var(--t-fill-color-interaction);
3526
+ }
3527
+
3528
+ .tds-time-field-segment-separator{
3529
+ padding-inline:0;
3530
+ color:var(--tds-time-field-placeholder-color);
3672
3531
  }
3673
3532
 
3674
- .tds-combo-box-description{
3533
+ .tds-time-field-description{
3675
3534
  display:flex;
3676
3535
  gap:var(--t-spacing-half);
3677
3536
  align-items:flex-start;
3678
3537
  margin:0;
3679
3538
  font-size:var(--t-font-size-sm);
3680
3539
  line-height:1.35;
3681
- color:var(--tds-combo-box-description-color, var(--t-text-color-secondary));
3540
+ color:var(--tds-time-field-description-color, var(--t-text-color-secondary));
3682
3541
  cursor:text;
3683
3542
  }
3684
3543
 
3685
- .tds-combo-box-description-invalid-icon{
3686
- display:var(--tds-combo-box-description-invalid-icon-display, none);
3687
- flex-shrink:0;
3688
- margin-block-start:calc(.5lh - .5em);
3689
- line-height:1.35;
3690
- }
3544
+ .tds-time-field-description .tds-time-field-description-invalid-icon{
3545
+ display:var(--tds-time-field-description-invalid-icon-display, none);
3546
+ flex-shrink:0;
3547
+ margin-block-start:calc(.5lh - .5em);
3548
+ line-height:1.35;
3549
+ }
3691
3550
 
3692
3551
  .tds-number-stepper{
3693
3552
  --tds-number-stepper-border-color:var(--t-form-border-color);
@@ -3730,10 +3589,6 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
3730
3589
  --tds-number-stepper-color:var(--t-form-color-disabled);
3731
3590
  }
3732
3591
 
3733
- .tds-number-stepper[data-disabled] .tds-number-stepper-label{
3734
- color:var(--t-form-color-disabled);
3735
- }
3736
-
3737
3592
  .tds-number-stepper[data-disabled] .tds-number-stepper-field{
3738
3593
  cursor:not-allowed;
3739
3594
  }
@@ -3784,6 +3639,8 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
3784
3639
  }
3785
3640
 
3786
3641
  .tds-number-stepper-field:has([readonly]){
3642
+ --tds-number-stepper-border-color:var(--t-form-border-color-readonly);
3643
+ --tds-number-stepper-border-color-hover:var(--t-form-border-color-readonly);
3787
3644
  --tds-number-stepper-background-color:var(--t-form-background-color-readonly);
3788
3645
  }
3789
3646
 
@@ -3791,6 +3648,10 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
3791
3648
  border-color:var(--t-form-border-color-hover);
3792
3649
  }
3793
3650
 
3651
+ .tds-number-stepper-field:has([readonly]) .tds-number-stepper-button{
3652
+ display:none;
3653
+ }
3654
+
3794
3655
  .tds-number-stepper-input{
3795
3656
  display:flex;
3796
3657
  flex:1;
@@ -4252,18 +4113,19 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
4252
4113
  color:var(--t-text-color-secondary);
4253
4114
  }
4254
4115
 
4255
- .tds-time-field{
4256
- --tds-time-field-border-color:var(--t-form-border-color);
4257
- --tds-time-field-border-color-hover:var(--t-form-border-color-hover);
4258
- --tds-time-field-border-color-active:var(--t-form-border-color-focus);
4259
- --tds-time-field-background-color:var(--t-form-background-color);
4260
- --tds-time-field-color:var(--t-form-color);
4261
- --tds-time-field-placeholder-color:var(--t-form-placeholder-color);
4262
- --tds-time-field-font-size:var(--t-font-size-md);
4263
- --tds-time-field-min-height:var(--t-container-size-md);
4264
- --tds-time-field-padding-block:6px;
4265
- --tds-time-field-description-color:var(--t-text-color-secondary);
4266
- --tds-time-field-description-invalid-icon-display:none;
4116
+ .tds-combo-box{
4117
+ --tds-combo-box-border-color:var(--t-form-border-color);
4118
+ --tds-combo-box-border-color-hover:var(--t-form-border-color-hover);
4119
+ --tds-combo-box-border-color-active:var(--t-form-border-color-focus);
4120
+ --tds-combo-box-background-color:var(--t-form-background-color);
4121
+ --tds-combo-box-color:var(--t-form-color);
4122
+ --tds-combo-box-placeholder-color:var(--t-form-placeholder-color);
4123
+ --tds-combo-box-font-size:var(--t-font-size-md);
4124
+ --tds-combo-box-min-height:var(--t-container-size-md);
4125
+ --tds-combo-box-padding-block:6px;
4126
+ --tds-combo-box-button-offset:4px;
4127
+ --tds-combo-box-description-color:var(--t-text-color-secondary);
4128
+ --tds-combo-box-description-invalid-icon-display:none;
4267
4129
 
4268
4130
  position:relative;
4269
4131
  display:flex;
@@ -4271,134 +4133,274 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
4271
4133
  gap:var(--t-spacing-half);
4272
4134
  }
4273
4135
 
4274
- .tds-time-field[data-required] .tds-time-field-label::after{
4136
+ .tds-combo-box[data-required] .tds-combo-box-label::after{
4275
4137
  margin-left:.25ch;
4276
4138
  color:var(--t-text-color-status-error);
4277
4139
  content:"*";
4278
4140
  }
4279
4141
 
4280
- .tds-time-field[data-invalid]{
4281
- --tds-time-field-border-color:var(--t-form-border-color-error);
4282
- --tds-time-field-border-color-hover:var(--t-form-border-color-error-hover);
4283
- --tds-time-field-border-color-active:var(--t-form-border-color-error-hover);
4284
- --tds-time-field-background-color:var(--t-form-background-color-error);
4285
- --tds-time-field-description-color:var(--t-text-color-status-error);
4286
- --tds-time-field-description-invalid-icon-display:inline-block;
4142
+ .tds-combo-box[data-invalid]{
4143
+ --tds-combo-box-border-color:var(--t-form-border-color-error);
4144
+ --tds-combo-box-border-color-hover:var(--t-form-border-color-error-hover);
4145
+ --tds-combo-box-border-color-active:var(--t-form-border-color-error-hover);
4146
+ --tds-combo-box-background-color:var(--t-form-background-color-error);
4147
+ --tds-combo-box-description-color:var(--t-text-color-status-error);
4148
+ --tds-combo-box-description-invalid-icon-display:inline-block;
4287
4149
  }
4288
4150
 
4289
- .tds-time-field[data-disabled]{
4290
- --tds-time-field-border-color:var(--t-form-border-color-disabled);
4291
- --tds-time-field-background-color:var(--t-form-background-color-disabled);
4292
- --tds-time-field-color:var(--t-form-color-disabled);
4293
- --tds-time-field-placeholder-color:var(--t-form-color-disabled);
4151
+ .tds-combo-box[data-disabled]{
4152
+ --tds-combo-box-border-color:var(--t-form-border-color-disabled);
4153
+ --tds-combo-box-background-color:var(--t-form-background-color-disabled);
4154
+ --tds-combo-box-color:var(--t-form-color-disabled);
4294
4155
  }
4295
4156
 
4296
- .tds-time-field[data-disabled] .tds-time-field-label{
4157
+ .tds-combo-box[data-disabled] .tds-combo-box-label{
4297
4158
  color:var(--t-form-color-disabled);
4298
4159
  }
4299
4160
 
4300
- .tds-time-field[data-disabled] .tds-time-field-input{
4161
+ .tds-combo-box[data-disabled] .tds-combo-box-field{
4301
4162
  cursor:not-allowed;
4302
4163
  }
4303
4164
 
4304
- .tds-time-field--lg{
4305
- --tds-time-field-min-height:var(--t-container-size-lg);
4306
- --tds-time-field-font-size:var(--t-font-size-lg);
4165
+ .tds-combo-box[data-open] .tds-combo-box-button > svg{
4166
+ transform:rotate(.5turn);
4167
+ }
4168
+
4169
+ .tds-combo-box--lg{
4170
+ --tds-combo-box-min-height:var(--t-container-size-lg);
4171
+ --tds-combo-box-font-size:var(--t-font-size-lg);
4172
+ --tds-combo-box-button-offset:5px;
4307
4173
  }
4308
4174
 
4309
- .tds-time-field-label{
4175
+ .tds-combo-box-label{
4310
4176
  font-size:var(--t-font-size-md);
4311
4177
  font-weight:var(--t-font-weight-normal);
4312
4178
  color:var(--t-text-color);
4313
4179
  cursor:default;
4314
4180
  }
4315
4181
 
4316
- .tds-time-field-input{
4182
+ .tds-combo-box-field{
4317
4183
  display:flex;
4318
4184
  align-items:center;
4319
4185
  inline-size:100%;
4320
- min-block-size:var(--tds-time-field-min-height);
4321
- padding-block:var(--tds-time-field-padding-block);
4322
- padding-inline:var(--t-spacing-1);
4186
+ min-block-size:var(--tds-combo-box-min-height);
4323
4187
  font-family:inherit;
4324
- font-size:var(--tds-time-field-font-size);
4325
- font-variant-numeric:tabular-nums;
4188
+ font-size:var(--tds-combo-box-font-size);
4326
4189
  line-height:1;
4327
- color:var(--tds-time-field-color);
4328
- cursor:text;
4190
+ color:var(--tds-combo-box-color);
4191
+ -webkit-appearance:none;
4192
+ -moz-appearance:none;
4193
+ appearance:none;
4194
+ cursor:default;
4329
4195
  outline:var(--t-focus-ring-width) solid transparent;
4330
4196
  outline-offset:0;
4331
- background-color:var(--tds-time-field-background-color);
4332
- border:var(--t-form-border-width) solid var(--tds-time-field-border-color);
4197
+ background-color:var(--tds-combo-box-background-color);
4198
+ border:var(--t-form-border-width) solid var(--tds-combo-box-border-color);
4333
4199
  border-radius:var(--t-form-border-radius);
4334
4200
  }
4335
4201
 
4336
- .tds-time-field-input[data-hovered]:not([data-focus-visible],[data-focused],[data-disabled]){
4337
- border-color:var(--tds-time-field-border-color-hover);
4202
+ .tds-combo-box-field[data-hovered]:not([data-focus-visible],[data-focus-within],[data-disabled]){
4203
+ border-color:var(--tds-combo-box-border-color-hover);
4338
4204
  }
4339
4205
 
4340
- .tds-time-field-input[data-focus-within]{
4206
+ .tds-combo-box-field[data-focus-within]{
4341
4207
  outline-color:var(--t-focus-ring-color);
4342
4208
  outline-offset:var(--t-focus-ring-offset);
4343
- border-color:var(--tds-time-field-border-color-active);
4209
+ border-color:var(--tds-combo-box-border-color-active);
4344
4210
  }
4345
4211
 
4346
- .tds-time-field-input[data-readonly]{
4347
- color:var(--t-form-color-readonly);
4348
- background-color:var(--t-form-background-color-readonly);
4349
- border-color:var(--t-form-border-color-readonly);
4212
+ .tds-combo-box-field:has([readonly]){
4213
+ --tds-input-border-color:var(--t-form-border-color-readonly);
4214
+ --tds-combo-box-background-color:var(--t-form-background-color-readonly);
4350
4215
  }
4351
4216
 
4352
- .tds-time-field-input[data-readonly][data-hovered]{
4353
- border-color:var(--t-form-border-color-readonly);
4217
+ .tds-combo-box-field[data-focus-within]:has([readonly]){
4218
+ border-color:var(--t-form-border-color-hover);
4354
4219
  }
4355
4220
 
4356
- .tds-time-field-input[data-readonly][data-focus-within]{
4357
- outline-color:var(--t-focus-ring-color);
4358
- outline-offset:var(--t-focus-ring-offset);
4359
- border-color:var(--t-form-border-color-hover);
4221
+ .tds-combo-box-input{
4222
+ display:flex;
4223
+ flex:1;
4224
+ align-items:center;
4225
+ padding-block:var(--tds-combo-box-padding-block);
4226
+ padding-inline-start:var(--t-spacing-1);
4227
+ font-family:inherit;
4228
+ font-size:inherit;
4229
+ color:inherit;
4230
+ outline:0;
4231
+ background:transparent;
4232
+ border:0;
4233
+ }
4234
+
4235
+ .tds-combo-box-input::-moz-placeholder{
4236
+ color:var(--tds-combo-box-placeholder-color);
4237
+ -moz-user-select:none;
4238
+ user-select:none;
4239
+ }
4240
+
4241
+ .tds-combo-box-input::placeholder{
4242
+ color:var(--tds-combo-box-placeholder-color);
4243
+ -webkit-user-select:none;
4244
+ -moz-user-select:none;
4245
+ user-select:none;
4246
+ }
4247
+
4248
+ .tds-combo-box-button{
4249
+ flex-shrink:0;
4250
+ align-self:center;
4251
+ inline-size:calc(var(--tds-combo-box-min-height) - (var(--tds-combo-box-button-offset) * 2));
4252
+ block-size:calc(var(--tds-combo-box-min-height) - (var(--tds-combo-box-button-offset) * 2));
4253
+ padding:0;
4254
+ margin-inline-end:var(--tds-combo-box-button-offset);
4255
+ }
4256
+
4257
+ .tds-combo-box-button > svg{
4258
+ inline-size:var(--tds-combo-box-font-size);
4259
+ block-size:var(--tds-combo-box-font-size);
4260
+ transition:transform var(--t-duration-300) var(--t-ease-in-out);
4261
+ }
4262
+
4263
+ .tds-combo-box-button:not(.tds-btn){
4264
+ display:inline-flex;
4265
+ align-items:center;
4266
+ justify-content:center;
4267
+ inline-size:auto;
4268
+ block-size:auto;
4269
+ margin-inline-end:.75em;
4270
+ color:var(--t-icon-color);
4271
+ cursor:default;
4272
+ background:transparent;
4273
+ border:0;
4274
+ }
4275
+
4276
+ .tds-combo-box-button[data-focus-visible]:not(.tds-btn){
4277
+ outline:0;
4360
4278
  }
4361
4279
 
4362
- .tds-time-field-segment{
4363
- padding-inline:1px;
4364
- font-variant-numeric:tabular-nums;
4365
- cursor:text;
4366
- caret-color:transparent;
4367
- border-radius:var(--t-border-radius-sm);
4280
+ .tds-combo-box-popover{
4281
+ width:var(--trigger-width);
4282
+ max-block-size:inherit;
4283
+ padding:var(--t-spacing-1);
4284
+ overflow:auto;
4285
+ outline:0;
4286
+ scrollbar-color:#0004 #0000;
4287
+ scrollbar-width:thin;
4288
+ background:var(--t-surface-color-card);
4289
+ background-clip:padding-box;
4290
+ border:1px solid var(--t-border-color);
4291
+ border-radius:var(--t-border-radius);
4292
+ box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
4368
4293
  }
4369
4294
 
4370
- .tds-time-field-segment[data-placeholder]{
4371
- color:var(--tds-time-field-placeholder-color);
4295
+ .tds-combo-box-popover[data-entering]{
4296
+ animation:tds-combo-box-popover-enter 160ms ease;
4372
4297
  }
4373
4298
 
4374
- .tds-time-field-segment[data-focused]{
4375
- color:var(--t-text-color-inverted);
4376
- outline:0;
4377
- background:var(--t-fill-color-interaction);
4299
+ .tds-combo-box-popover[data-exiting]{
4300
+ animation:tds-combo-box-popover-exit 130ms ease;
4378
4301
  }
4379
4302
 
4380
- .tds-time-field-segment-separator{
4381
- padding-inline:0;
4382
- color:var(--tds-time-field-placeholder-color);
4303
+ @keyframes tds-combo-box-popover-enter{
4304
+ from{
4305
+ opacity:0;
4306
+ transform:translateY(-8px);
4307
+ }
4383
4308
  }
4384
4309
 
4385
- .tds-time-field-description{
4310
+ @keyframes tds-combo-box-popover-exit{
4311
+ to{
4312
+ opacity:0;
4313
+ transform:translateY(-8px);
4314
+ }
4315
+ }
4316
+
4317
+ @media (prefers-reduced-motion: reduce){
4318
+ .tds-combo-box-popover[data-entering],.tds-combo-box-popover[data-exiting]{
4319
+ animation:none;
4320
+ }
4321
+
4322
+ .tds-combo-box-button > svg{
4323
+ transition:none;
4324
+ }
4325
+ }
4326
+
4327
+ .tds-combo-box-list{
4328
+ padding:0;
4329
+ margin:0;
4330
+ }
4331
+
4332
+ .tds-combo-box-list-item{
4333
+ display:block;
4334
+ padding-block:var(--t-spacing-1);
4335
+ padding-inline:var(--t-spacing-2) var(--t-spacing-1);
4336
+ overflow:hidden;
4337
+ text-overflow:ellipsis;
4338
+ font-size:1rem;
4339
+ color:var(--t-text-color);
4340
+ white-space:nowrap;
4341
+ cursor:default;
4342
+ outline-offset:-1px;
4343
+ border-radius:var(--t-border-radius);
4344
+ }
4345
+
4346
+ .tds-combo-box-list-item[data-hovered]:not([data-disabled]){
4347
+ background:var(--t-fill-color-neutral-070);
4348
+ }
4349
+
4350
+ .tds-combo-box-list-item[data-selected]{
4351
+ background:var(--t-fill-color-button-interaction-ghost-active);
4352
+ }
4353
+
4354
+ .tds-combo-box-list-item[data-focus-visible]{
4355
+ outline:var(--t-focus-ring-outline);
4356
+ outline-offset:-1px;
4357
+ }
4358
+
4359
+ .tds-combo-box-list-item[data-disabled]{
4360
+ color:var(--t-form-color-disabled);
4361
+ cursor:not-allowed;
4362
+ }
4363
+
4364
+ .tds-combo-box-list-item[data-disabled][data-hovered]{
4365
+ background:transparent;
4366
+ }
4367
+
4368
+ .tds-combo-box-empty-state{
4369
+ padding-block:var(--t-spacing-1);
4370
+ padding-inline:var(--t-spacing-2);
4371
+ font-size:var(--t-font-size-md);
4372
+ color:var(--t-text-color-secondary);
4373
+ }
4374
+
4375
+ .tds-combo-box-list-section:not(:first-child){
4376
+ margin-block-start:var(--t-spacing-half);
4377
+ }
4378
+
4379
+ .tds-combo-box-section-header{
4380
+ padding-block:var(--t-spacing-1);
4381
+ padding-inline:var(--t-spacing-1);
4382
+ font-size:var(--t-font-size-sm);
4383
+ font-weight:var(--t-font-weight-semibold);
4384
+ color:var(--t-text-color-secondary);
4385
+ }
4386
+
4387
+ .tds-combo-box-description{
4386
4388
  display:flex;
4387
4389
  gap:var(--t-spacing-half);
4388
4390
  align-items:flex-start;
4389
4391
  margin:0;
4390
4392
  font-size:var(--t-font-size-sm);
4391
4393
  line-height:1.35;
4392
- color:var(--tds-time-field-description-color, var(--t-text-color-secondary));
4394
+ color:var(--tds-combo-box-description-color, var(--t-text-color-secondary));
4393
4395
  cursor:text;
4394
4396
  }
4395
4397
 
4396
- .tds-time-field-description .tds-time-field-description-invalid-icon{
4397
- display:var(--tds-time-field-description-invalid-icon-display, none);
4398
- flex-shrink:0;
4399
- margin-block-start:calc(.5lh - .5em);
4400
- line-height:1.35;
4401
- }
4398
+ .tds-combo-box-description-invalid-icon{
4399
+ display:var(--tds-combo-box-description-invalid-icon-display, none);
4400
+ flex-shrink:0;
4401
+ margin-block-start:calc(.5lh - .5em);
4402
+ line-height:1.35;
4403
+ }
4402
4404
 
4403
4405
  .t-banner{
4404
4406
  --t-banner-font-size:var(--t-font-size-md);