@planningcenter/tapestry 3.2.2-rc.1 → 3.2.2-rc.11

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 (17) hide show
  1. package/dist/components/combo-box/ComboBox.d.ts +21 -40
  2. package/dist/components/combo-box/ComboBox.d.ts.map +1 -1
  3. package/dist/components/combo-box/ComboBox.js +12 -10
  4. package/dist/components/combo-box/ComboBox.js.map +1 -1
  5. package/dist/components/combo-box/index.d.ts +1 -1
  6. package/dist/components/combo-box/index.d.ts.map +1 -1
  7. package/dist/index.css +2 -0
  8. package/dist/index.css.map +1 -1
  9. package/dist/reactRender.css +863 -861
  10. package/dist/reactRender.css.map +1 -1
  11. package/dist/reactRenderLegacy.css +863 -861
  12. package/dist/reactRenderLegacy.css.map +1 -1
  13. package/dist/unstable.css +2 -0
  14. package/dist/unstable.css.map +1 -1
  15. package/dist/utilities/reactAriaProps.d.ts +7 -0
  16. package/dist/utilities/reactAriaProps.d.ts.map +1 -0
  17. package/package.json +3 -3
package/dist/reactRender.css CHANGED
@@ -1,266 +1,365 @@
1
- @layer t-critical{
2
- tds-page-header:not(.hydrated){
3
- display:none;
4
- }
1
+
2
+ @media (prefers-reduced-motion: no-preference){
3
+
4
+ :root{
5
+ interpolate-size:allow-keywords;
5
6
  }
7
+ }
6
8
 
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;
9
+ @layer tds-component{
10
+ tds-sidenav,
11
+ .tds-sidenav{
12
+ --tds-sidenav-indent:12px;
13
+ --tds-sidenav-item-depth:0;
25
14
 
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);
15
+ --tds-sidenav-item-transition:background-color var(--t-duration-200) var(--t-ease-in-out);
28
16
 
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);
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);
32
23
 
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);
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);
35
28
 
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);
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;
39
32
 
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);
45
- }
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);
46
36
 
47
- .tds-page-header--profile{
48
- --tds-page-header-padding-y:20px;
37
+ --tds-sidenav-item-icon-color:var(--t-icon-color-secondary);
38
+ --tds-sidenav-item-icon-color-selected:var(--t-icon-color);
49
39
  }
50
40
 
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));
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;
48
+ }
55
49
  }
50
+
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);
56
57
  }
58
+ }
57
59
 
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
- }
60
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section){
61
+ display:flex;
62
+ }
63
+
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%;
76
68
  }
69
+
70
+ .tds-sidenav-section-list{
71
+ width:100%;
72
+ padding:0;
73
+ margin:0;
74
+ list-style:none;
77
75
  }
78
76
 
79
- .tds-page-header{
77
+ .tds-sidenav-section-header{
80
78
  display:flex;
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);
79
+ align-items:baseline;
80
+ justify-content:space-between;
81
+ padding-top:var(--t-spacing-2);
86
82
  }
87
83
 
88
- .tds-page-header:not(.has-nav){
89
- padding-bottom:var(--tds-page-header-padding-y);
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;
90
91
  }
91
92
 
92
- .tds-page-header.inactive{
93
- background:var(--tds-page-header-background-color-inactive);
93
+ .tds-sidenav-section:first-of-type .tds-sidenav-section-header{
94
+ padding-top:0;
94
95
  }
95
96
 
96
- .tds-page-header :is([slot="actions"],.tds-page-header__actions){
97
- width:100%;
97
+ .tds-sidenav-section-header [slot="label-actions"]{
98
+ display:flex;
99
+ gap:var(--t-spacing-half);
100
+ align-items:center;
98
101
  }
99
102
 
100
- .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
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;
101
120
  display:flex;
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;
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);
107
139
  }
108
140
 
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);
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;
117
148
  }
118
149
 
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;
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);
127
153
  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;
138
154
  }
139
155
 
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);
145
- }
156
+ :is(.tds-sidenav-item :is(a,button)):active{
157
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-active);
158
+ }
146
159
 
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
- }
160
+ :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]){
161
+ overflow:hidden;
162
+ color:var(--tds-sidenav-item-icon-color);
163
+ }
152
164
 
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
- }
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);
169
+ }
157
170
 
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
- }
171
+ :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section{
172
+ --tds-sidenav-indent:19px;
173
+ }
164
174
 
165
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
166
- position:relative;
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;
167
179
  }
168
180
 
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);
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
+ }
199
+
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
+ }
207
+
208
+ :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list{
209
+ --tds-sidenav-item-depth:2;
210
+ }
211
+
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;
218
+ }
219
+
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);
172
229
  }
173
230
 
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{
231
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::after{
175
232
  position:absolute;
176
- top:-5px;
177
- right:-2px;
178
- width:10px;
179
- height:10px;
233
+ inset:0 0 0 calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
234
+ z-index:-1;
235
+ height:100%;
180
236
  content:"";
181
- background:var(--tds-page-header-nav-item-indicator-color);
182
- border-radius:50%;
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);
183
240
  }
184
241
 
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
- }
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;
189
246
  }
190
247
 
191
- .tds-page-header__title-bar{
192
- display:flex;
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);
198
- }
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);
251
+ }
199
252
 
200
- .tds-page-header--profile > .tds-page-header__title-bar{
201
- align-items:center;
202
- }
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);
255
+ }
203
256
 
204
- .tds-page-header__primary{
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{
263
+ display:flex;
264
+ gap:var(--t-spacing-2);
265
+ align-items:center;
205
266
  width:100%;
206
267
  }
207
268
 
208
- .tds-page-header__primary h1{
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;
209
276
  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;
277
+ font-size:var(--t-font-size-lg);
278
+ font-weight:var(--t-font-weight-medium);
279
+ color:var(--t-text-color-headline);
215
280
  }
216
281
 
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%;
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;
223
300
  }
224
301
 
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;
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;
230
310
  }
231
- .tds-page-header :is([slot="actions"],.tds-page-header__actions){
232
- width:auto;
233
- }
234
311
 
235
- .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
236
- justify-content:flex-end;
312
+ .tds-sidenav-item :is(a, button) :is(.prefix){
313
+ display:none;
314
+ }
315
+ @supports selector(:popover-open){
316
+ .tds-sidenav-collapse:popover-open{
317
+ display:flex;
237
318
  }
238
- }
239
319
 
240
- .tds-page-header-phone,
241
- .tds-page-header-email{
242
- color:var(--tds-page-header-color);
243
- white-space:nowrap;
244
- }
320
+ .tds-sidenav-collapse:not(:popover-open){
321
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
322
+ transition:var(--tds-sidenav-collapse-transition-exit);
323
+ }
245
324
 
246
- .tds-page-header-email{
247
- max-width:100%;
248
- overflow:hidden;
249
- text-overflow:ellipsis;
250
- }
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
+ }
331
+ }
332
+ @supports not selector(:popover-open){
333
+ .tds-sidenav-collapse.\:popover-open{
334
+ display:flex;
335
+ }
251
336
 
252
- @keyframes indicator-pulse{
253
- 0%{
254
- opacity:.3;
255
- transform:scale(.9);
337
+ .tds-sidenav-collapse:not(.\:popover-open){
338
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
339
+ transition:var(--tds-sidenav-collapse-transition-exit);
340
+ }
256
341
  }
342
+ }
257
343
 
258
- 100%{
259
- opacity:0;
260
- transform:scale(1.75);
344
+ @media (min-width: 720px){
345
+ .tds-sidenav-responsive-header{
346
+ display:none;
261
347
  }
262
348
  }
263
349
 
350
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
351
+ display:none;
352
+ }
353
+
354
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
355
+ display:block;
356
+ }
357
+
358
+ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
359
+ display:flex;
360
+ flex-direction:column;
361
+ }
362
+
264
363
  .tds-checkbox{
265
364
  --tds-checkbox-font-size:var(--t-font-size-md);
266
365
  --tds-checkbox-cursor:pointer;
@@ -455,831 +554,732 @@
455
554
  --tds-checkbox-description-line-height:1.3;
456
555
  }
457
556
 
458
- .tds-radio{
459
- --tds-radio-font-size:var(--t-font-size-md);
460
- --tds-radio-cursor:pointer;
461
- --tds-radio-line-height:1.4;
462
- --tds-radio-transition-property:border-width;
463
-
464
- --tds-radio-input-size:var(--t-element-size-md);
465
- --tds-radio-input-border-radius:var(--t-border-radius-round);
466
- --tds-radio-input-border-color:var(--t-form-border-color);
467
- --tds-radio-input-border-width:var(--t-form-border-width);
468
- --tds-radio-input-background-color:transparent;
469
-
470
- --tds-radio-label-color:var(--t-form-color);
471
-
472
- --tds-radio-description-font-size:var(--t-font-size-sm);
473
- --tds-radio-description-line-height:1.35;
474
- --tds-radio-description-color:var(--t-text-color-secondary);
557
+ @layer t-critical{
558
+ tds-page-header:not(.hydrated){
559
+ display:none;
560
+ }
561
+ }
475
562
 
476
- position:relative;
477
- display:inline-grid;
478
- grid-template-columns:auto;
479
- grid-auto-columns:1fr;
480
- gap:var(--t-spacing-fourth) var(--t-spacing-1);
481
- line-height:var(--tds-radio-line-height);
482
- cursor:var(--tds-radio-cursor);
483
- -webkit-user-select:none;
484
- -moz-user-select:none;
485
- user-select:none;
486
- }
487
-
488
- .tds-radio label{
489
- grid-area:1 / 2;
490
- font-size:var(--tds-radio-font-size);
491
- font-weight:var(--t-font-weight-normal);
492
- color:var(--tds-radio-label-color);
493
- cursor:var(--tds-radio-cursor);
494
- }
495
-
496
- .tds-radio input[type="radio"]{
497
- position:relative;
498
- width:1em;
499
- height:1em;
500
- margin:calc((1lh - 1em) / 2) 0 0;
501
- font-size:var(--tds-radio-font-size);
502
- line-height:inherit;
503
- -webkit-appearance:none;
504
- -moz-appearance:none;
505
- appearance:none;
506
- cursor:var(--tds-radio-cursor);
507
- background-color:var(--tds-radio-input-background-color);
508
- border:var(--tds-radio-input-border-width) solid var(--tds-radio-input-border-color);
509
- border-radius:var(--tds-radio-input-border-radius);
510
- transition-timing-function:var(--t-ease-in-out);
511
- transition-duration:var(--t-duration-200);
512
- transition-property:var(--tds-radio-transition-property);
513
- }
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;
514
581
 
515
- :is(.tds-radio input[type="radio"]):hover:not(:disabled){
516
- --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
517
- --tds-radio-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
518
- }
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);
519
584
 
520
- :is(.tds-radio input[type="radio"]):focus-visible{
521
- outline:var(--t-focus-ring-outline);
522
- outline-offset:var(--t-focus-ring-offset);
523
- }
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);
524
588
 
525
- :is(.tds-radio input[type="radio"]):disabled{
526
- pointer-events:none;
527
- }
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);
528
591
 
529
- @media (prefers-reduced-motion: reduce){
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);
530
595
 
531
- .tds-radio input[type="radio"]{
532
- --tds-radio-transition-property:none;
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);
533
601
  }
534
- }
535
602
 
536
- .tds-radio:has(input:checked){
537
- --tds-radio-input-background-color:var(--t-form-background-color);
538
- --tds-radio-input-border-color:var(--t-border-color-control-info);
539
- --tds-radio-input-border-width:4px;
603
+ .tds-page-header--profile{
604
+ --tds-page-header-padding-y:20px;
540
605
  }
541
606
 
542
- .tds-radio:has(input:checked) input:hover:not(:disabled){
543
- --tds-radio-input-background-color:var(--t-form-background-color);
544
- --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
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));
545
611
  }
546
-
547
- .tds-radio:has(input:user-invalid){
548
- --tds-radio-input-border-color:var(--t-form-border-color-error);
549
612
  }
550
613
 
551
- .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
552
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
553
- --tds-radio-input-background-color:var(--t-form-background-color-error);
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);
554
631
  }
555
-
556
- .tds-radio:has(input:disabled){
557
- --tds-radio-input-background-color:var(--t-form-background-color-disabled);
558
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
559
-
560
- --tds-radio-label-color:var(--t-form-color-disabled);
561
- --tds-radio-description-color:var(--t-form-color-disabled);
562
- --tds-radio-cursor:not-allowed;
563
632
  }
564
-
565
- .tds-radio:has(input:disabled) input:checked{
566
- --tds-radio-input-background-color:var(--t-form-background-color);
567
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
568
- }
569
-
570
- .tds-radio-description{
571
- display:flex;
572
- grid-area:2 / 2;
573
- gap:var(--t-spacing-half);
574
- align-items:flex-start;
575
- margin:0;
576
- font-size:var(--tds-radio-description-font-size);
577
- line-height:var(--tds-radio-description-line-height);
578
- color:var(--tds-radio-description-color);
579
- cursor:text;
580
- }
581
-
582
- .tds-radio--sm{
583
- --tds-radio-line-height:1.35;
584
- --tds-radio-input-size:var(--t-element-size-sm);
585
- --tds-radio-font-size:var(--t-font-size-sm);
586
- --tds-radio-description-font-size:var(--t-font-size-xs);
587
- --tds-radio-description-line-height:1.3;
588
633
  }
589
634
 
590
- .tds-toggle-switch{
591
- --tds-toggle-switch-font-size:var(--t-font-size-md);
592
- --tds-toggle-switch-column-gap:var(--t-spacing-1);
593
- --tds-toggle-switch-cursor:pointer;
594
- --tds-toggle-switch-display:inline-grid;
595
- --tds-toggle-switch-line-height:1.4;
596
-
597
- --tds-toggle-switch-label-color:var(--t-form-color);
598
-
599
- --tds-toggle-switch-track-width:var(--t-container-size-md);
600
- --tds-toggle-switch-track-outline:none;
601
- --tds-toggle-switch-track-height:var(--t-container-size-xs);
602
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color);
603
- --tds-toggle-switch-track-transition:background-color var(--t-duration-100) var(--t-ease-in-out);
604
-
605
- --tds-toggle-switch-thumb-size:var(--t-element-size-md);
606
- --tds-toggle-switch-thumb-transform:translateX(0);
607
- --tds-toggle-switch-thumb-transition:transform var(--t-duration-200) var(--t-ease-in-out);
608
-
609
- --tds-toggle-switch-description-font-size:var(--t-font-size-sm);
610
- --tds-toggle-switch-description-line-height:1.35;
611
- --tds-toggle-switch-description-color:var(--t-text-color-secondary);
612
- position:relative;
613
-
614
- display:var(--tds-toggle-switch-display);
615
- grid-template-columns:auto;
616
- grid-auto-columns:1fr;
617
- gap:var(--t-spacing-fourth) var(--tds-toggle-switch-column-gap);
618
- -webkit-user-select:none;
619
- -moz-user-select:none;
620
- user-select:none;
635
+ .tds-page-header{
636
+ 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);
621
642
  }
622
643
 
623
- .tds-toggle-switch input[type="checkbox"]{
624
- position:absolute;
625
- width:var(--tds-toggle-switch-track-width);
626
- height:var(--tds-toggle-switch-track-height);
627
- margin:0;
628
- -webkit-appearance:none;
629
- -moz-appearance:none;
630
- appearance:none;
631
- cursor:var(--tds-toggle-switch-cursor);
632
- outline:var(--tds-toggle-switch-track-outline);
633
- outline-offset:var(--t-focus-ring-offset);
634
- background-color:transparent;
635
- border:0;
636
- border-radius:var(--t-border-radius-round);
644
+ .tds-page-header:not(.has-nav){
645
+ padding-bottom:var(--tds-page-header-padding-y);
637
646
  }
638
647
 
639
- :is(.tds-toggle-switch input[type="checkbox"]):focus-visible{
640
- --tds-toggle-switch-track-outline:var(--t-focus-ring-outline);
641
- }
642
-
643
- .tds-toggle-switch label{
644
- display:inline-flex;
645
- grid-area:1 / 2;
646
- -moz-column-gap:var(--tds-toggle-switch-column-gap);
647
- column-gap:var(--tds-toggle-switch-column-gap);
648
- margin-top:-.09375em;
649
- font-size:var(--tds-toggle-switch-font-size);
650
- font-weight:var(--t-font-weight-normal);
651
- line-height:var(--tds-toggle-switch-line-height);
652
- color:var(--tds-toggle-switch-label-color);
653
- cursor:var(--tds-toggle-switch-cursor);
648
+ .tds-page-header.inactive{
649
+ background:var(--tds-page-header-background-color-inactive);
654
650
  }
655
651
 
656
- .tds-toggle-switch:not(:has(input:disabled)):has(input:hover){
657
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-hover);
652
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
653
+ width:100%;
658
654
  }
659
655
 
660
- .tds-toggle-switch:has(input:checked){
661
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on);
662
- --tds-toggle-switch-thumb-transform:translateX(calc(var(--tds-toggle-switch-track-width) - var(--tds-toggle-switch-thumb-size) - var(--t-spacing-half)));
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;
663
663
  }
664
664
 
665
- .tds-toggle-switch:has(input:checked):not(:has(input:disabled)):has(input:hover){
666
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on-hover);
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);
667
673
  }
668
674
 
669
- .tds-toggle-switch:has(input:disabled){
670
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-disabled);
671
- --tds-toggle-switch-label-color:var(--t-form-color-disabled);
672
- --tds-toggle-switch-description-color:var(--t-form-color-disabled);
673
- --tds-toggle-switch-cursor:not-allowed;
674
- }
675
-
676
- .tds-toggle-switch-track{
677
- position:relative;
678
- flex-shrink:0;
679
- width:var(--tds-toggle-switch-track-width);
680
- height:var(--tds-toggle-switch-track-height);
681
- background-color:var(--tds-toggle-switch-track-background-color);
682
- border-radius:var(--t-border-radius-round);
683
- transition:var(--tds-toggle-switch-track-transition);
684
- }
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;
694
+ }
685
695
 
686
- .tds-toggle-switch-track::before{
687
- position:absolute;
688
- top:var(--t-spacing-fourth);
689
- left:var(--t-spacing-fourth);
690
- width:var(--tds-toggle-switch-thumb-size);
691
- height:var(--tds-toggle-switch-thumb-size);
692
- content:"";
693
- background-color:#fff;
694
- border-radius:var(--t-border-radius-round);
695
- transform:var(--tds-toggle-switch-thumb-transform);
696
- transition:var(--tds-toggle-switch-thumb-transition);
697
- }
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
+ }
698
702
 
699
- @media (prefers-reduced-motion: reduce){
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
+ }
700
708
 
701
- .tds-toggle-switch-track{
702
- --tds-toggle-switch-track-transition:none;
703
- --tds-toggle-switch-thumb-transition:none;
704
- }
705
- }
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
+ }
706
713
 
707
- .tds-toggle-switch-description{
708
- display:flex;
709
- grid-area:2 / 2;
710
- align-items:flex-start;
711
- margin:0;
712
- font-size:var(--tds-toggle-switch-description-font-size);
713
- line-height:var(--tds-toggle-switch-description-line-height);
714
- color:var(--tds-toggle-switch-description-color);
715
- cursor:text;
716
- }
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
+ }
717
720
 
718
- .tds-toggle-switch--sm{
719
- --tds-toggle-switch-font-size:var(--t-font-size-sm);
720
- --tds-toggle-switch-line-height:1.35;
721
- --tds-toggle-switch-track-height:var(--t-element-size-lg);
722
- --tds-toggle-switch-thumb-size:var(--t-element-size-sm);
723
- --tds-toggle-switch-description-font-size:var(--t-font-size-xs);
724
- --tds-toggle-switch-description-line-height:1.3;
725
- }
721
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
722
+ position:relative;
723
+ }
726
724
 
727
- .tds-toggle-switch--hide-label{
728
- --tds-toggle-switch-display:inline-flex;
729
- }
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);
728
+ }
730
729
 
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{
731
+ position:absolute;
732
+ top:-5px;
733
+ right:-2px;
734
+ width:10px;
735
+ height:10px;
736
+ content:"";
737
+ background:var(--tds-page-header-nav-item-indicator-color);
738
+ border-radius:50%;
739
+ }
731
740
 
732
- @media (prefers-reduced-motion: no-preference){
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
+ }
745
+ }
733
746
 
734
- :root{
735
- interpolate-size:allow-keywords;
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);
736
754
  }
737
- }
738
-
739
- @layer tds-component{
740
- tds-sidenav,
741
- .tds-sidenav{
742
- --tds-sidenav-indent:12px;
743
- --tds-sidenav-item-depth:0;
744
-
745
- --tds-sidenav-item-transition:background-color var(--t-duration-200) var(--t-ease-in-out);
746
-
747
- --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;
748
- --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;
749
- --tds-sidenav-collapse-closed-opacity:0;
750
- --tds-sidenav-collapse-open-opacity:1;
751
- --tds-sidenav-collapse-closed-transform:translateY(-8px);
752
- --tds-sidenav-collapse-open-transform:translateY(0);
753
-
754
- --tds-sidenav-item-icon-size:var(--t-element-size-md);
755
- --tds-sidenav-item-background-hover:var(--t-fill-color-button-interaction-ghost-hover);
756
- --tds-sidenav-item-background-active:var(--t-fill-color-button-interaction-ghost-active);
757
- --tds-sidenav-item-background-selected:var(--t-fill-color-button-interaction-ghost-active);
758
-
759
- --tds-sidenav-item-nested-background-hover:var(--tds-sidenav-item-background-hover);
760
- --tds-sidenav-item-nested-background-active:var(--tds-sidenav-item-background-hover);
761
- --tds-sidenav-item-nested-background-selected:transparent;
762
755
 
763
- --tds-sidenav-item-nested-border-color:var(--t-fill-color-neutral-050);
764
- --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
765
- --tds-sidenav-item-nested-border-color-selected:var(--t-border-color-status-info);
766
-
767
- --tds-sidenav-item-icon-color:var(--t-icon-color-secondary);
768
- --tds-sidenav-item-icon-color-selected:var(--t-icon-color);
756
+ .tds-page-header--profile > .tds-page-header__title-bar{
757
+ align-items:center;
769
758
  }
770
759
 
771
- @media (prefers-reduced-motion: reduce){
772
- tds-sidenav,
773
- .tds-sidenav{
774
- --tds-sidenav-collapse-transition-enter:none;
775
- --tds-sidenav-collapse-transition-exit:none;
776
- --tds-sidenav-collapse-closed-transform:none;
777
- --tds-sidenav-collapse-open-transform:none;
778
- }
779
- }
760
+ .tds-page-header__primary{
761
+ width:100%;
762
+ }
780
763
 
781
- .tds-sidenav--theme-gray{
782
- --tds-sidenav-item-background-hover:var(--t-fill-color-neutral-080);
783
- --tds-sidenav-item-background-active:var(--t-fill-color-neutral-070);
784
- --tds-sidenav-item-background-selected:var(--t-fill-color-neutral-050);
785
- --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
786
- --tds-sidenav-item-nested-border-color-selected:var(--t-fill-color-neutral-010);
764
+ .tds-page-header__primary h1{
765
+ 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;
787
771
  }
788
- }
789
772
 
790
- .tds-sidenav :where(nav,ul,.tds-sidenav-section){
791
- display:flex;
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%;
792
779
  }
793
780
 
794
- .tds-sidenav :where(nav,ul,.tds-sidenav-section,.tds-sidenav-collapse){
795
- flex-direction:column;
796
- gap:var(--t-spacing-half);
797
- width:100%;
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;
798
786
  }
787
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
788
+ width:auto;
789
+ }
799
790
 
800
- .tds-sidenav-section-list{
801
- width:100%;
802
- padding:0;
803
- margin:0;
804
- list-style:none;
791
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
792
+ justify-content:flex-end;
793
+ }
805
794
  }
806
795
 
807
- .tds-sidenav-section-header{
808
- display:flex;
809
- align-items:baseline;
810
- justify-content:space-between;
811
- padding-top:var(--t-spacing-2);
796
+ .tds-page-header-phone,
797
+ .tds-page-header-email{
798
+ color:var(--tds-page-header-color);
799
+ white-space:nowrap;
812
800
  }
813
801
 
814
- .tds-sidenav-section-header h2{
815
- margin:0;
816
- font-size:var(--t-font-size-sm);
817
- font-weight:var(--t-font-weight-semibold);
818
- line-height:1.35;
819
- color:var(--t-text-color-secondary);
820
- text-transform:uppercase;
821
- }
802
+ .tds-page-header-email{
803
+ max-width:100%;
804
+ overflow:hidden;
805
+ text-overflow:ellipsis;
806
+ }
822
807
 
823
- .tds-sidenav-section:first-of-type .tds-sidenav-section-header{
824
- padding-top:0;
808
+ @keyframes indicator-pulse{
809
+ 0%{
810
+ opacity:.3;
811
+ transform:scale(.9);
825
812
  }
826
813
 
827
- .tds-sidenav-section-header [slot="label-actions"]{
828
- display:flex;
829
- gap:var(--t-spacing-half);
830
- align-items:center;
814
+ 100%{
815
+ opacity:0;
816
+ transform:scale(1.75);
831
817
  }
832
-
833
- .tds-sidenav-section [slot="section-actions"]{
834
- display:flex;
835
- gap:12px;
836
- align-items:center;
837
- min-height:42px;
838
- padding:var(--t-spacing-1) 0;
839
818
  }
840
819
 
841
- .tds-sidenav-section-list,
842
- .tds-sidenav-item{
843
- width:100%;
844
- padding:0;
845
- margin:0;
820
+ .tds-input:has(textarea){
821
+ --tds-input-padding-block:6px;
822
+ --tds-input-resizer-size:var(--t-element-size-sm);
823
+ --tds-input-resizer-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cg fill='none' stroke='%236f7784' stroke-linecap='round' stroke-width='1.25'%3E%3Cpath d='M5.5 13l7.5-7.5'/%3E%3Cpath d='M9 13l4-4'/%3E%3C/g%3E%3C/svg%3E");
846
824
  }
847
825
 
848
- .tds-sidenav-item :is(a,button){
849
- position:relative;
850
- display:flex;
851
- gap:12px;
852
- align-items:center;
853
- width:100%;
854
- padding:12px;
855
- overflow:hidden;
856
- font-size:var(--t-font-size-sm);
857
- line-height:18px;
858
- color:var(--t-text-color-headline);
859
- white-space:nowrap;
860
- text-decoration:none;
861
- -webkit-appearance:none;
862
- -moz-appearance:none;
863
- appearance:none;
864
- cursor:pointer;
865
- background-color:var(--tds-sidenav-item-background, transparent);
866
- border:0;
867
- border-radius:var(--t-border-radius);
868
- transition:var(--tds-sidenav-item-transition);
826
+ @supports (x: attr(x type(*))){
827
+
828
+ .tds-input:has(textarea){
829
+ --tds-input-min-height:calc((attr(rows type(<number>), 3) * 1lh) + (var(--tds-input-padding-block) * 2) + 2px);
830
+ }
869
831
  }
870
832
 
871
- :is(.tds-sidenav-item :is(a,button)):not(:has(.prefix,.suffix)),:is(.tds-sidenav-item :is(a,button)) :is(:not(.prefix,.suffix)){
872
- display:block;
873
- flex:1;
874
- overflow:hidden;
875
- text-overflow:ellipsis;
876
- text-align:left;
877
- white-space:nowrap;
833
+ .tds-input.tds-textarea--resize-vertical textarea{
834
+ resize:vertical;
878
835
  }
879
836
 
880
- :is(.tds-sidenav-item :is(a,button)):hover,:is(.tds-sidenav-item :is(a,button)):focus-visible{
881
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-hover);
882
- color:var(--t-text-color-headline);
883
- text-decoration:none;
837
+ .tds-input.tds-textarea--resize-none textarea{
838
+ resize:none;
884
839
  }
885
840
 
886
- :is(.tds-sidenav-item :is(a,button)):active{
887
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-active);
841
+ .tds-input.tds-textarea--resize-auto textarea{
842
+ resize:vertical;
888
843
  }
889
844
 
890
- :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]){
891
- overflow:hidden;
892
- color:var(--tds-sidenav-item-icon-color);
845
+ @supports (field-sizing: content){
846
+ .tds-input.tds-textarea--resize-auto textarea{
847
+ field-sizing:content;
848
+ resize:none;
849
+ }
893
850
  }
894
851
 
895
- :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{
896
- display:block;
897
- width:var(--tds-sidenav-item-icon-size);
898
- height:var(--tds-sidenav-item-icon-size);
899
- }
852
+ .tds-input textarea{
853
+ --tds-input-scrollbar-thumb-color-default:var(--t-fill-color-neutral-040);
854
+ --tds-input-scrollbar-thumb-color-hidden:transparent;
855
+ --tds-input-scrollbar-thumb-color-hover:var(--t-fill-color-neutral-030);
856
+ --tds-input-scrollbar-thumb-color-thumb-hover:var(--t-fill-color-neutral-020);
857
+ --tds-input-scrollbar-thumb-color-thumb-active:var(--t-fill-color-neutral-010);
858
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-default);
859
+ --tds-input-scrollbar-surface-color:rgba(0, 0, 0, 0);
860
+ --tds-input-scrollbar-thumb-border-radius:999px;
861
+ --tds-input-scrollbar-thumb-border-width:3px;
862
+ --tds-input-scrollbar-track-margin-block:.125rem;
863
+ scrollbar-color:initial;
864
+ transition-timing-function:var(--t-ease-in-out);
865
+ transition-duration:var(--t-duration-200);
866
+ transition-property:var(--tds-input-transition-property), --tds-input-scrollbar-thumb-color;
867
+ }
900
868
 
901
- :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section{
902
- --tds-sidenav-indent:19px;
869
+ @media (pointer: fine){
870
+ :is(.tds-input textarea)::-webkit-scrollbar{
871
+ width:12px;
872
+ height:12px;
873
+ cursor:default;
903
874
  }
904
875
 
905
- [aria-expanded="true"]:is(.tds-sidenav-item :is(a,button)) + .tds-sidenav-section-list{
906
- visibility:visible;
907
- block-size:auto;
908
- opacity:1;
876
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb{
877
+ cursor:default;
878
+ background:var(--tds-input-scrollbar-thumb-color);
879
+ background-clip:content-box;
880
+ border:var(--tds-input-scrollbar-thumb-border-width) solid var(--tds-input-scrollbar-surface-color);
881
+ border-radius:var(--tds-input-scrollbar-thumb-border-radius);
909
882
  }
910
883
 
911
- .tds-sidenav-item.selected > :is(a,button),.tds-sidenav-item:has(.tds-sidenav-section):has(.selected) > :is(a,button){
912
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-selected);
913
- --tds-sidenav-item-icon-color:var(--tds-sidenav-item-icon-color-selected);
914
-
915
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-selected);
916
- font-weight:var(--t-font-weight-semibold);
917
- }
884
+ :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
885
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
886
+ }
918
887
 
919
- .tds-sidenav-item:has(.tds-sidenav-section){
920
- display:flex;
921
- flex-direction:column;
922
- gap:var(--t-spacing-half);
923
- }
888
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
889
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
890
+ }
924
891
 
925
- .tds-sidenav-item .tds-sidenav-section-list{
926
- --tds-sidenav-item-depth:1;
927
- gap:0;
928
- }
892
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
893
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
894
+ }
929
895
 
930
- .tds-sidenav-action--toggle + :is(.tds-sidenav-item .tds-sidenav-section-list){
931
- visibility:hidden;
932
- block-size:0;
933
- overflow-y:clip;
934
- opacity:0;
935
- transition:content-visibility var(--t-duration-400) allow-discrete, opacity var(--t-duration-400), block-size var(--t-duration-400);
896
+ :is(.tds-input textarea)::-webkit-scrollbar-corner{
897
+ background:var(--tds-input-scrollbar-surface-color);
936
898
  }
937
899
 
938
- :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list{
939
- --tds-sidenav-item-depth:2;
900
+ :is(.tds-input textarea)::-webkit-resizer{
901
+ background:var(--tds-input-resizer-icon) no-repeat;
902
+ background-position:right bottom;
903
+ background-size:var(--tds-input-resizer-size) var(--tds-input-resizer-size);
940
904
  }
941
905
 
942
- :is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
943
- min-height:var(--t-element-size-2xl);
944
- padding-block:9px;
945
- padding-left:calc((var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth)) + var(--tds-sidenav-indent) + var(--t-spacing-fourth));
946
- line-height:1;
947
- background-color:transparent;
906
+ :is(.tds-input textarea)::-webkit-scrollbar-track{
907
+ margin-block:var(--tds-input-scrollbar-track-margin-block);
908
+ cursor:default;
948
909
  }
949
910
 
950
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::before{
951
- position:absolute;
952
- top:0;
953
- bottom:0;
954
- left:calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
955
- width:2px;
956
- content:"";
957
- background-color:var(--tds-sidenav-item-nested-border-color);
958
- transition:var(--tds-sidenav-item-transition);
911
+ @supports (-moz-appearance: none){
912
+ :is(.tds-input textarea){
913
+ scrollbar-color:var(--tds-input-scrollbar-thumb-color-default) var(--tds-input-scrollbar-surface-color);
914
+ scrollbar-width:thin;
959
915
  }
960
916
 
961
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::after{
962
- position:absolute;
963
- inset:0 0 0 calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
964
- z-index:-1;
965
- height:100%;
966
- content:"";
967
- background-color:var(--tds-sidenav-item-nested-background);
968
- border-radius:0 var(--t-border-radius) var(--t-border-radius) 0;
969
- transition:var(--tds-sidenav-item-transition);
970
- }
917
+ @media (hover){
918
+ :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
919
+ scrollbar-color:var(--tds-input-scrollbar-thumb-color-hover) var(--tds-input-scrollbar-surface-color);
920
+ }
921
+ }
922
+ }
923
+ }
924
+
925
+ .tds-radio-group{
926
+ --tds-radio-group-font-size:var(--t-font-size-md);
927
+ --tds-radio-group-line-height:1.4;
928
+ --tds-radio-group-gap:var(--t-spacing-1);
929
+
930
+ --tds-radio-group-legend-margin-bottom:var(--tds-radio-group-gap);
931
+
932
+ --tds-radio-group-description-font-size:var(--t-font-size-sm);
933
+ --tds-radio-group-description-line-height:1.35;
934
+ --tds-radio-group-description-color:var(--t-text-color-secondary);
935
+ --tds-radio-group-description-invalid-icon-display:none;
936
+ display:flex;
937
+ flex-direction:column;
938
+ gap:var(--tds-radio-group-gap);
939
+ padding:0;
940
+ margin:0;
941
+
942
+ font-size:var(--tds-radio-group-font-size);
943
+ line-height:var(--tds-radio-group-line-height);
944
+ border:0;
945
+ }
946
+
947
+ .tds-radio-group legend{
948
+ padding:0;
949
+ margin-bottom:var(--tds-radio-group-legend-margin-bottom);
950
+ }
951
+
952
+ .tds-radio-group:has(.tds-radio-group-description){
953
+ --tds-radio-group-legend-margin-bottom:var(--t-spacing-fourth);
954
+ }
971
955
 
972
- :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)){
973
- display:block;
974
- text-align:left;
975
- white-space:normal;
976
- }
956
+ .tds-radio-group[aria-invalid="true"]{
957
+ --tds-radio-group-description-color:var(--t-text-color-status-error);
958
+ --tds-radio-group-description-invalid-icon-display:inline-block;
959
+ }
977
960
 
978
- :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{
979
- --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-hover);
980
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-hover);
961
+ .tds-radio-group[aria-invalid="true"] .tds-radio{
962
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
963
+ }
964
+
965
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
966
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
967
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
981
968
  }
982
969
 
983
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):active{
984
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-active);
970
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
971
+ --tds-radio-input-background-color:var(--t-form-background-color);
985
972
  }
986
973
 
987
- .selected:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
988
- --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-selected);
989
- font-weight:var(--t-font-weight-medium);
974
+ .tds-radio-group:has(input:required) legend::after{
975
+ margin-left:.25ch;
976
+ color:var(--t-text-color-status-error);
977
+ content:"*";
990
978
  }
991
979
 
992
- .tds-sidenav-responsive-header{
980
+ .tds-radio-group-fields{
993
981
  display:flex;
994
- gap:var(--t-spacing-2);
995
- align-items:center;
996
- width:100%;
982
+ flex-direction:column;
983
+ gap:var(--tds-radio-group-gap);
984
+ align-items:flex-start;
997
985
  }
998
986
 
999
- .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle{
1000
- order:0;
987
+ .tds-radio-group-description{
988
+ display:flex;
989
+ gap:var(--t-spacing-half);
990
+ align-items:flex-start;
991
+ margin:0;
992
+ font-size:var(--tds-radio-group-description-font-size);
993
+ line-height:var(--tds-radio-group-description-line-height);
994
+ color:var(--tds-radio-group-description-color);
995
+ cursor:text;
996
+ }
997
+
998
+ .tds-radio-group-description .tds-radio-group-description-invalid-icon{
999
+ display:var(--tds-radio-group-description-invalid-icon-display);
1000
+ flex-shrink:0;
1001
+ margin-top:calc(.5lh - .5em);
1002
+ line-height:var(--tds-radio-group-description-line-height);
1001
1003
  }
1002
1004
 
1003
- .tds-sidenav-responsive-header .tds-sidenav-responsive-header-label{
1004
- flex:1;
1005
- order:1;
1005
+ .tds-radio-group--sm{
1006
+ --tds-radio-group-line-height:1.35;
1007
+ --tds-radio-group-font-size:var(--t-font-size-sm);
1008
+ --tds-radio-group-description-font-size:var(--t-font-size-xs);
1009
+ --tds-radio-group-description-line-height:1.3;
1010
+ }
1011
+
1012
+ .tds-toggle-switch{
1013
+ --tds-toggle-switch-font-size:var(--t-font-size-md);
1014
+ --tds-toggle-switch-column-gap:var(--t-spacing-1);
1015
+ --tds-toggle-switch-cursor:pointer;
1016
+ --tds-toggle-switch-display:inline-grid;
1017
+ --tds-toggle-switch-line-height:1.4;
1018
+
1019
+ --tds-toggle-switch-label-color:var(--t-form-color);
1020
+
1021
+ --tds-toggle-switch-track-width:var(--t-container-size-md);
1022
+ --tds-toggle-switch-track-outline:none;
1023
+ --tds-toggle-switch-track-height:var(--t-container-size-xs);
1024
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color);
1025
+ --tds-toggle-switch-track-transition:background-color var(--t-duration-100) var(--t-ease-in-out);
1026
+
1027
+ --tds-toggle-switch-thumb-size:var(--t-element-size-md);
1028
+ --tds-toggle-switch-thumb-transform:translateX(0);
1029
+ --tds-toggle-switch-thumb-transition:transform var(--t-duration-200) var(--t-ease-in-out);
1030
+
1031
+ --tds-toggle-switch-description-font-size:var(--t-font-size-sm);
1032
+ --tds-toggle-switch-description-line-height:1.35;
1033
+ --tds-toggle-switch-description-color:var(--t-text-color-secondary);
1034
+ position:relative;
1035
+
1036
+ display:var(--tds-toggle-switch-display);
1037
+ grid-template-columns:auto;
1038
+ grid-auto-columns:1fr;
1039
+ gap:var(--t-spacing-fourth) var(--tds-toggle-switch-column-gap);
1040
+ -webkit-user-select:none;
1041
+ -moz-user-select:none;
1042
+ user-select:none;
1043
+ }
1044
+
1045
+ .tds-toggle-switch input[type="checkbox"]{
1046
+ position:absolute;
1047
+ width:var(--tds-toggle-switch-track-width);
1048
+ height:var(--tds-toggle-switch-track-height);
1006
1049
  margin:0;
1007
- font-size:var(--t-font-size-lg);
1008
- font-weight:var(--t-font-weight-medium);
1009
- color:var(--t-text-color-headline);
1050
+ -webkit-appearance:none;
1051
+ -moz-appearance:none;
1052
+ appearance:none;
1053
+ cursor:var(--tds-toggle-switch-cursor);
1054
+ outline:var(--tds-toggle-switch-track-outline);
1055
+ outline-offset:var(--t-focus-ring-offset);
1056
+ background-color:transparent;
1057
+ border:0;
1058
+ border-radius:var(--t-border-radius-round);
1010
1059
  }
1011
1060
 
1012
- @media (max-width: 719px){
1013
- .tds-sidenav-collapse{
1014
- z-index:10001;
1015
- display:none;
1016
- max-width:min(448px, calc(100vw - 48px));
1017
- padding:0;
1018
- margin:12px 0;
1019
- position-area:bottom span-right;
1020
- overflow:hidden;
1021
- outline:0;
1022
- background:var(--t-surface-color-card);
1023
- border:0;
1024
- border-radius:6px;
1025
- box-shadow:0 8px 20px 0 rgba(0, 0, 0, .25);
1026
- opacity:var(--tds-sidenav-collapse-open-opacity);
1027
- transform:var(--tds-sidenav-collapse-open-transform);
1028
- transition:var(--tds-sidenav-collapse-transition-enter);
1029
- will-change:transform;
1061
+ :is(.tds-toggle-switch input[type="checkbox"]):focus-visible{
1062
+ --tds-toggle-switch-track-outline:var(--t-focus-ring-outline);
1063
+ }
1064
+
1065
+ .tds-toggle-switch label{
1066
+ display:inline-flex;
1067
+ grid-area:1 / 2;
1068
+ -moz-column-gap:var(--tds-toggle-switch-column-gap);
1069
+ column-gap:var(--tds-toggle-switch-column-gap);
1070
+ margin-top:-.09375em;
1071
+ font-size:var(--tds-toggle-switch-font-size);
1072
+ font-weight:var(--t-font-weight-normal);
1073
+ line-height:var(--tds-toggle-switch-line-height);
1074
+ color:var(--tds-toggle-switch-label-color);
1075
+ cursor:var(--tds-toggle-switch-cursor);
1030
1076
  }
1031
1077
 
1032
- .tds-sidenav-scroll-container{
1033
- --webkit-overflow-scrolling:touch;
1034
- display:block;
1035
- width:100%;
1036
- height:-moz-fit-content;
1037
- height:fit-content;
1038
- padding:var(--t-spacing-2);
1039
- overflow-y:auto;
1078
+ .tds-toggle-switch:not(:has(input:disabled)):has(input:hover){
1079
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-hover);
1040
1080
  }
1041
1081
 
1042
- .tds-sidenav-item :is(a, button) :is(.prefix){
1043
- display:none;
1082
+ .tds-toggle-switch:has(input:checked){
1083
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on);
1084
+ --tds-toggle-switch-thumb-transform:translateX(calc(var(--tds-toggle-switch-track-width) - var(--tds-toggle-switch-thumb-size) - var(--t-spacing-half)));
1044
1085
  }
1045
- @supports selector(:popover-open){
1046
- .tds-sidenav-collapse:popover-open{
1047
- display:flex;
1048
- }
1049
1086
 
1050
- .tds-sidenav-collapse:not(:popover-open){
1051
- opacity:var(--tds-sidenav-collapse-closed-opacity);
1052
- transition:var(--tds-sidenav-collapse-transition-exit);
1087
+ .tds-toggle-switch:has(input:checked):not(:has(input:disabled)):has(input:hover){
1088
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on-hover);
1053
1089
  }
1054
1090
 
1055
- @starting-style{
1056
- .tds-sidenav-collapse:popover-open{
1057
- opacity:var(--tds-sidenav-collapse-closed-opacity);
1058
- transform:var(--tds-sidenav-collapse-closed-transform);
1059
- }
1060
- }
1091
+ .tds-toggle-switch:has(input:disabled){
1092
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-disabled);
1093
+ --tds-toggle-switch-label-color:var(--t-form-color-disabled);
1094
+ --tds-toggle-switch-description-color:var(--t-form-color-disabled);
1095
+ --tds-toggle-switch-cursor:not-allowed;
1061
1096
  }
1062
- @supports not selector(:popover-open){
1063
- .tds-sidenav-collapse.\:popover-open{
1064
- display:flex;
1065
- }
1066
1097
 
1067
- .tds-sidenav-collapse:not(.\:popover-open){
1068
- opacity:var(--tds-sidenav-collapse-closed-opacity);
1069
- transition:var(--tds-sidenav-collapse-transition-exit);
1070
- }
1071
- }
1098
+ .tds-toggle-switch-track{
1099
+ position:relative;
1100
+ flex-shrink:0;
1101
+ width:var(--tds-toggle-switch-track-width);
1102
+ height:var(--tds-toggle-switch-track-height);
1103
+ background-color:var(--tds-toggle-switch-track-background-color);
1104
+ border-radius:var(--t-border-radius-round);
1105
+ transition:var(--tds-toggle-switch-track-transition);
1072
1106
  }
1073
1107
 
1074
- @media (min-width: 720px){
1075
- .tds-sidenav-responsive-header{
1076
- display:none;
1108
+ .tds-toggle-switch-track::before{
1109
+ position:absolute;
1110
+ top:var(--t-spacing-fourth);
1111
+ left:var(--t-spacing-fourth);
1112
+ width:var(--tds-toggle-switch-thumb-size);
1113
+ height:var(--tds-toggle-switch-thumb-size);
1114
+ content:"";
1115
+ background-color:#fff;
1116
+ border-radius:var(--t-border-radius-round);
1117
+ transform:var(--tds-toggle-switch-thumb-transform);
1118
+ transition:var(--tds-toggle-switch-thumb-transition);
1077
1119
  }
1078
- }
1079
-
1080
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
1081
- display:none;
1082
- }
1083
1120
 
1084
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
1085
- display:block;
1086
- }
1121
+ @media (prefers-reduced-motion: reduce){
1087
1122
 
1088
- tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1089
- display:flex;
1090
- flex-direction:column;
1091
- }
1123
+ .tds-toggle-switch-track{
1124
+ --tds-toggle-switch-track-transition:none;
1125
+ --tds-toggle-switch-thumb-transition:none;
1126
+ }
1127
+ }
1092
1128
 
1093
- .tds-input:has(textarea){
1094
- --tds-input-padding-block:6px;
1095
- --tds-input-resizer-size:var(--t-element-size-sm);
1096
- --tds-input-resizer-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cg fill='none' stroke='%236f7784' stroke-linecap='round' stroke-width='1.25'%3E%3Cpath d='M5.5 13l7.5-7.5'/%3E%3Cpath d='M9 13l4-4'/%3E%3C/g%3E%3C/svg%3E");
1129
+ .tds-toggle-switch-description{
1130
+ display:flex;
1131
+ grid-area:2 / 2;
1132
+ align-items:flex-start;
1133
+ margin:0;
1134
+ font-size:var(--tds-toggle-switch-description-font-size);
1135
+ line-height:var(--tds-toggle-switch-description-line-height);
1136
+ color:var(--tds-toggle-switch-description-color);
1137
+ cursor:text;
1097
1138
  }
1098
1139
 
1099
- @supports (x: attr(x type(*))){
1140
+ .tds-toggle-switch--sm{
1141
+ --tds-toggle-switch-font-size:var(--t-font-size-sm);
1142
+ --tds-toggle-switch-line-height:1.35;
1143
+ --tds-toggle-switch-track-height:var(--t-element-size-lg);
1144
+ --tds-toggle-switch-thumb-size:var(--t-element-size-sm);
1145
+ --tds-toggle-switch-description-font-size:var(--t-font-size-xs);
1146
+ --tds-toggle-switch-description-line-height:1.3;
1147
+ }
1100
1148
 
1101
- .tds-input:has(textarea){
1102
- --tds-input-min-height:calc((attr(rows type(<number>), 3) * 1lh) + (var(--tds-input-padding-block) * 2) + 2px);
1149
+ .tds-toggle-switch--hide-label{
1150
+ --tds-toggle-switch-display:inline-flex;
1103
1151
  }
1104
- }
1105
1152
 
1106
- .tds-input.tds-textarea--resize-vertical textarea{
1107
- resize:vertical;
1108
- }
1153
+ .tds-radio{
1154
+ --tds-radio-font-size:var(--t-font-size-md);
1155
+ --tds-radio-cursor:pointer;
1156
+ --tds-radio-line-height:1.4;
1157
+ --tds-radio-transition-property:border-width;
1109
1158
 
1110
- .tds-input.tds-textarea--resize-none textarea{
1111
- resize:none;
1112
- }
1159
+ --tds-radio-input-size:var(--t-element-size-md);
1160
+ --tds-radio-input-border-radius:var(--t-border-radius-round);
1161
+ --tds-radio-input-border-color:var(--t-form-border-color);
1162
+ --tds-radio-input-border-width:var(--t-form-border-width);
1163
+ --tds-radio-input-background-color:transparent;
1113
1164
 
1114
- .tds-input.tds-textarea--resize-auto textarea{
1115
- resize:vertical;
1116
- }
1165
+ --tds-radio-label-color:var(--t-form-color);
1117
1166
 
1118
- @supports (field-sizing: content){
1119
- .tds-input.tds-textarea--resize-auto textarea{
1120
- field-sizing:content;
1121
- resize:none;
1122
- }
1123
- }
1167
+ --tds-radio-description-font-size:var(--t-font-size-sm);
1168
+ --tds-radio-description-line-height:1.35;
1169
+ --tds-radio-description-color:var(--t-text-color-secondary);
1124
1170
 
1125
- .tds-input textarea{
1126
- --tds-input-scrollbar-thumb-color-default:var(--t-fill-color-neutral-040);
1127
- --tds-input-scrollbar-thumb-color-hidden:transparent;
1128
- --tds-input-scrollbar-thumb-color-hover:var(--t-fill-color-neutral-030);
1129
- --tds-input-scrollbar-thumb-color-thumb-hover:var(--t-fill-color-neutral-020);
1130
- --tds-input-scrollbar-thumb-color-thumb-active:var(--t-fill-color-neutral-010);
1131
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-default);
1132
- --tds-input-scrollbar-surface-color:rgba(0, 0, 0, 0);
1133
- --tds-input-scrollbar-thumb-border-radius:999px;
1134
- --tds-input-scrollbar-thumb-border-width:3px;
1135
- --tds-input-scrollbar-track-margin-block:.125rem;
1136
- scrollbar-color:initial;
1137
- transition-timing-function:var(--t-ease-in-out);
1138
- transition-duration:var(--t-duration-200);
1139
- transition-property:var(--tds-input-transition-property), --tds-input-scrollbar-thumb-color;
1171
+ position:relative;
1172
+ display:inline-grid;
1173
+ grid-template-columns:auto;
1174
+ grid-auto-columns:1fr;
1175
+ gap:var(--t-spacing-fourth) var(--t-spacing-1);
1176
+ line-height:var(--tds-radio-line-height);
1177
+ cursor:var(--tds-radio-cursor);
1178
+ -webkit-user-select:none;
1179
+ -moz-user-select:none;
1180
+ user-select:none;
1140
1181
  }
1141
1182
 
1142
- @media (pointer: fine){
1143
- :is(.tds-input textarea)::-webkit-scrollbar{
1144
- width:12px;
1145
- height:12px;
1146
- cursor:default;
1147
- }
1148
-
1149
- :is(.tds-input textarea)::-webkit-scrollbar-thumb{
1150
- cursor:default;
1151
- background:var(--tds-input-scrollbar-thumb-color);
1152
- background-clip:content-box;
1153
- border:var(--tds-input-scrollbar-thumb-border-width) solid var(--tds-input-scrollbar-surface-color);
1154
- border-radius:var(--tds-input-scrollbar-thumb-border-radius);
1155
- }
1156
-
1157
- :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1158
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
1159
- }
1160
-
1161
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
1162
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
1163
- }
1183
+ .tds-radio label{
1184
+ grid-area:1 / 2;
1185
+ font-size:var(--tds-radio-font-size);
1186
+ font-weight:var(--t-font-weight-normal);
1187
+ color:var(--tds-radio-label-color);
1188
+ cursor:var(--tds-radio-cursor);
1189
+ }
1164
1190
 
1165
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
1166
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
1167
- }
1191
+ .tds-radio input[type="radio"]{
1192
+ position:relative;
1193
+ width:1em;
1194
+ height:1em;
1195
+ margin:calc((1lh - 1em) / 2) 0 0;
1196
+ font-size:var(--tds-radio-font-size);
1197
+ line-height:inherit;
1198
+ -webkit-appearance:none;
1199
+ -moz-appearance:none;
1200
+ appearance:none;
1201
+ cursor:var(--tds-radio-cursor);
1202
+ background-color:var(--tds-radio-input-background-color);
1203
+ border:var(--tds-radio-input-border-width) solid var(--tds-radio-input-border-color);
1204
+ border-radius:var(--tds-radio-input-border-radius);
1205
+ transition-timing-function:var(--t-ease-in-out);
1206
+ transition-duration:var(--t-duration-200);
1207
+ transition-property:var(--tds-radio-transition-property);
1208
+ }
1168
1209
 
1169
- :is(.tds-input textarea)::-webkit-scrollbar-corner{
1170
- background:var(--tds-input-scrollbar-surface-color);
1210
+ :is(.tds-radio input[type="radio"]):hover:not(:disabled){
1211
+ --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
1212
+ --tds-radio-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
1171
1213
  }
1172
1214
 
1173
- :is(.tds-input textarea)::-webkit-resizer{
1174
- background:var(--tds-input-resizer-icon) no-repeat;
1175
- background-position:right bottom;
1176
- background-size:var(--tds-input-resizer-size) var(--tds-input-resizer-size);
1215
+ :is(.tds-radio input[type="radio"]):focus-visible{
1216
+ outline:var(--t-focus-ring-outline);
1217
+ outline-offset:var(--t-focus-ring-offset);
1177
1218
  }
1178
1219
 
1179
- :is(.tds-input textarea)::-webkit-scrollbar-track{
1180
- margin-block:var(--tds-input-scrollbar-track-margin-block);
1181
- cursor:default;
1220
+ :is(.tds-radio input[type="radio"]):disabled{
1221
+ pointer-events:none;
1182
1222
  }
1183
1223
 
1184
- @supports (-moz-appearance: none){
1185
- :is(.tds-input textarea){
1186
- scrollbar-color:var(--tds-input-scrollbar-thumb-color-default) var(--tds-input-scrollbar-surface-color);
1187
- scrollbar-width:thin;
1188
- }
1224
+ @media (prefers-reduced-motion: reduce){
1189
1225
 
1190
- @media (hover){
1191
- :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1192
- scrollbar-color:var(--tds-input-scrollbar-thumb-color-hover) var(--tds-input-scrollbar-surface-color);
1193
- }
1194
- }
1195
- }
1226
+ .tds-radio input[type="radio"]{
1227
+ --tds-radio-transition-property:none;
1196
1228
  }
1229
+ }
1197
1230
 
1198
- .tds-radio-group{
1199
- --tds-radio-group-font-size:var(--t-font-size-md);
1200
- --tds-radio-group-line-height:1.4;
1201
- --tds-radio-group-gap:var(--t-spacing-1);
1202
-
1203
- --tds-radio-group-legend-margin-bottom:var(--tds-radio-group-gap);
1204
-
1205
- --tds-radio-group-description-font-size:var(--t-font-size-sm);
1206
- --tds-radio-group-description-line-height:1.35;
1207
- --tds-radio-group-description-color:var(--t-text-color-secondary);
1208
- --tds-radio-group-description-invalid-icon-display:none;
1209
- display:flex;
1210
- flex-direction:column;
1211
- gap:var(--tds-radio-group-gap);
1212
- padding:0;
1213
- margin:0;
1214
-
1215
- font-size:var(--tds-radio-group-font-size);
1216
- line-height:var(--tds-radio-group-line-height);
1217
- border:0;
1218
- }
1219
-
1220
- .tds-radio-group legend{
1221
- padding:0;
1222
- margin-bottom:var(--tds-radio-group-legend-margin-bottom);
1231
+ .tds-radio:has(input:checked){
1232
+ --tds-radio-input-background-color:var(--t-form-background-color);
1233
+ --tds-radio-input-border-color:var(--t-border-color-control-info);
1234
+ --tds-radio-input-border-width:4px;
1223
1235
  }
1224
1236
 
1225
- .tds-radio-group:has(.tds-radio-group-description){
1226
- --tds-radio-group-legend-margin-bottom:var(--t-spacing-fourth);
1227
- }
1237
+ .tds-radio:has(input:checked) input:hover:not(:disabled){
1238
+ --tds-radio-input-background-color:var(--t-form-background-color);
1239
+ --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
1240
+ }
1228
1241
 
1229
- .tds-radio-group[aria-invalid="true"]{
1230
- --tds-radio-group-description-color:var(--t-text-color-status-error);
1231
- --tds-radio-group-description-invalid-icon-display:inline-block;
1242
+ .tds-radio:has(input:user-invalid){
1243
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
1232
1244
  }
1233
1245
 
1234
- .tds-radio-group[aria-invalid="true"] .tds-radio{
1235
- --tds-radio-input-border-color:var(--t-form-border-color-error);
1246
+ .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
1247
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1248
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
1236
1249
  }
1237
1250
 
1238
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
1239
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1240
- --tds-radio-input-background-color:var(--t-form-background-color-error);
1241
- }
1251
+ .tds-radio:has(input:disabled){
1252
+ --tds-radio-input-background-color:var(--t-form-background-color-disabled);
1253
+ --tds-radio-input-border-color:var(--t-form-border-color-disabled);
1242
1254
 
1243
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
1244
- --tds-radio-input-background-color:var(--t-form-background-color);
1245
- }
1255
+ --tds-radio-label-color:var(--t-form-color-disabled);
1256
+ --tds-radio-description-color:var(--t-form-color-disabled);
1257
+ --tds-radio-cursor:not-allowed;
1258
+ }
1246
1259
 
1247
- .tds-radio-group:has(input:required) legend::after{
1248
- margin-left:.25ch;
1249
- color:var(--t-text-color-status-error);
1250
- content:"*";
1260
+ .tds-radio:has(input:disabled) input:checked{
1261
+ --tds-radio-input-background-color:var(--t-form-background-color);
1262
+ --tds-radio-input-border-color:var(--t-form-border-color-disabled);
1251
1263
  }
1252
1264
 
1253
- .tds-radio-group-fields{
1254
- display:flex;
1255
- flex-direction:column;
1256
- gap:var(--tds-radio-group-gap);
1257
- align-items:flex-start;
1258
- }
1259
-
1260
- .tds-radio-group-description{
1265
+ .tds-radio-description{
1261
1266
  display:flex;
1267
+ grid-area:2 / 2;
1262
1268
  gap:var(--t-spacing-half);
1263
1269
  align-items:flex-start;
1264
1270
  margin:0;
1265
- font-size:var(--tds-radio-group-description-font-size);
1266
- line-height:var(--tds-radio-group-description-line-height);
1267
- color:var(--tds-radio-group-description-color);
1271
+ font-size:var(--tds-radio-description-font-size);
1272
+ line-height:var(--tds-radio-description-line-height);
1273
+ color:var(--tds-radio-description-color);
1268
1274
  cursor:text;
1269
1275
  }
1270
1276
 
1271
- .tds-radio-group-description .tds-radio-group-description-invalid-icon{
1272
- display:var(--tds-radio-group-description-invalid-icon-display);
1273
- flex-shrink:0;
1274
- margin-top:calc(.5lh - .5em);
1275
- line-height:var(--tds-radio-group-description-line-height);
1276
- }
1277
-
1278
- .tds-radio-group--sm{
1279
- --tds-radio-group-line-height:1.35;
1280
- --tds-radio-group-font-size:var(--t-font-size-sm);
1281
- --tds-radio-group-description-font-size:var(--t-font-size-xs);
1282
- --tds-radio-group-description-line-height:1.3;
1277
+ .tds-radio--sm{
1278
+ --tds-radio-line-height:1.35;
1279
+ --tds-radio-input-size:var(--t-element-size-sm);
1280
+ --tds-radio-font-size:var(--t-font-size-sm);
1281
+ --tds-radio-description-font-size:var(--t-font-size-xs);
1282
+ --tds-radio-description-line-height:1.3;
1283
1283
  }
1284
1284
 
1285
1285
 
@@ -1616,6 +1616,7 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1616
1616
  overflow:auto;
1617
1617
  overflow-x:hidden;
1618
1618
  scroll-behavior:var(--tds-select-dropdown-scroll-behavior);
1619
+ overscroll-behavior:none;
1619
1620
  -webkit-user-select:none;
1620
1621
  -moz-user-select:none;
1621
1622
  user-select:none;
@@ -1712,6 +1713,7 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1712
1713
  overflow:auto;
1713
1714
  overflow-x:hidden;
1714
1715
  scroll-behavior:var(--tds-select-dropdown-scroll-behavior);
1716
+ overscroll-behavior:none;
1715
1717
  -webkit-user-select:none;
1716
1718
  -moz-user-select:none;
1717
1719
  user-select:none;