@planningcenter/tapestry 3.2.2-rc.3 → 3.2.2-rc.5

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 (5) hide show
  1. package/dist/reactRender.css +743 -743
  2. package/dist/reactRender.css.map +1 -1
  3. package/dist/reactRenderLegacy.css +743 -743
  4. package/dist/reactRenderLegacy.css.map +1 -1
  5. package/package.json +2 -2
package/dist/reactRender.css CHANGED
@@ -1,628 +1,739 @@
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
-
240
- .tds-page-header-phone,
241
- .tds-page-header-email{
242
- color:var(--tds-page-header-color);
243
- white-space:nowrap;
244
- }
245
319
 
246
- .tds-page-header-email{
247
- max-width:100%;
248
- overflow:hidden;
249
- text-overflow:ellipsis;
250
- }
320
+ .tds-sidenav-collapse:not(:popover-open){
321
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
322
+ transition:var(--tds-sidenav-collapse-transition-exit);
323
+ }
251
324
 
252
- @keyframes indicator-pulse{
253
- 0%{
254
- opacity:.3;
255
- transform:scale(.9);
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
+ }
256
331
  }
332
+ @supports not selector(:popover-open){
333
+ .tds-sidenav-collapse.\:popover-open{
334
+ display:flex;
335
+ }
257
336
 
258
- 100%{
259
- opacity:0;
260
- transform:scale(1.75);
337
+ .tds-sidenav-collapse:not(.\:popover-open){
338
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
339
+ transition:var(--tds-sidenav-collapse-transition-exit);
340
+ }
261
341
  }
262
342
  }
263
343
 
264
-
265
- @media (prefers-reduced-motion: no-preference){
266
-
267
- :root{
268
- interpolate-size:allow-keywords;
269
- }
344
+ @media (min-width: 720px){
345
+ .tds-sidenav-responsive-header{
346
+ display:none;
270
347
  }
348
+ }
271
349
 
272
- @layer tds-component{
273
- tds-sidenav,
274
- .tds-sidenav{
275
- --tds-sidenav-indent:12px;
276
- --tds-sidenav-item-depth:0;
277
-
278
- --tds-sidenav-item-transition:background-color var(--t-duration-200) var(--t-ease-in-out);
350
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
351
+ display:none;
352
+ }
279
353
 
280
- --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;
281
- --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;
282
- --tds-sidenav-collapse-closed-opacity:0;
283
- --tds-sidenav-collapse-open-opacity:1;
284
- --tds-sidenav-collapse-closed-transform:translateY(-8px);
285
- --tds-sidenav-collapse-open-transform:translateY(0);
354
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
355
+ display:block;
356
+ }
286
357
 
287
- --tds-sidenav-item-icon-size:var(--t-element-size-md);
288
- --tds-sidenav-item-background-hover:var(--t-fill-color-button-interaction-ghost-hover);
289
- --tds-sidenav-item-background-active:var(--t-fill-color-button-interaction-ghost-active);
290
- --tds-sidenav-item-background-selected:var(--t-fill-color-button-interaction-ghost-active);
358
+ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
359
+ display:flex;
360
+ flex-direction:column;
361
+ }
291
362
 
292
- --tds-sidenav-item-nested-background-hover:var(--tds-sidenav-item-background-hover);
293
- --tds-sidenav-item-nested-background-active:var(--tds-sidenav-item-background-hover);
294
- --tds-sidenav-item-nested-background-selected:transparent;
363
+ @layer t-critical{
364
+ tds-page-header:not(.hydrated){
365
+ display:none;
366
+ }
367
+ }
295
368
 
296
- --tds-sidenav-item-nested-border-color:var(--t-fill-color-neutral-050);
297
- --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
298
- --tds-sidenav-item-nested-border-color-selected:var(--t-border-color-status-info);
369
+ @layer t-component{
370
+ .tds-page-header{
371
+ --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
372
+ --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
373
+ --tds-page-header-color:var(--t-text-color);
374
+ --tds-page-header-bottom-border-color:var(--t-surface-color-canvas);
375
+ --tds-page-header-headline-color:var(--t-text-color-headline);
376
+ --tds-page-header-headline-font-size:var(--t-font-size-2xl);
377
+ --tds-page-header-padding-x:var(--t-spacing-2);
378
+ --tds-page-header-padding-y:var(--t-spacing-2);
379
+ --tds-page-header-nav-padding-x:var(--tds-page-header-padding-x, var(--t-spacing-3));
380
+ --tds-page-header-nav-gap:var(--t-spacing-1);
381
+ --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%);
382
+ --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
383
+ --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
384
+ --tds-page-header-nav-item-color:var(--t-text-color-secondary);
385
+ --tds-page-header-nav-item-background-color:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 35%);
386
+ --tds-page-header-nav-item-border-width:1px;
299
387
 
300
- --tds-sidenav-item-icon-color:var(--t-icon-color-secondary);
301
- --tds-sidenav-item-icon-color-selected:var(--t-icon-color);
302
- }
388
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
389
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-bottom-border-color);
303
390
 
304
- @media (prefers-reduced-motion: reduce){
305
- tds-sidenav,
306
- .tds-sidenav{
307
- --tds-sidenav-collapse-transition-enter:none;
308
- --tds-sidenav-collapse-transition-exit:none;
309
- --tds-sidenav-collapse-closed-transform:none;
310
- --tds-sidenav-collapse-open-transform:none;
311
- }
312
- }
391
+ --tds-page-header-nav-item-color-hover:var(--t-text-color);
392
+ --tds-page-header-nav-item-background-color-hover:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 20%);
393
+ --tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
313
394
 
314
- .tds-sidenav--theme-gray{
315
- --tds-sidenav-item-background-hover:var(--t-fill-color-neutral-080);
316
- --tds-sidenav-item-background-active:var(--t-fill-color-neutral-070);
317
- --tds-sidenav-item-background-selected:var(--t-fill-color-neutral-050);
318
- --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
319
- --tds-sidenav-item-nested-border-color-selected:var(--t-fill-color-neutral-010);
395
+ --tds-page-header-nav-item-background-color-active:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 10%);
396
+ --tds-page-header-nav-item-border-color-active:var(--tds-page-header-nav-item-background-color-active);
397
+
398
+ --tds-page-header-nav-item-color-disabled:var(--t-text-color-disabled);
399
+ --tds-page-header-nav-item-background-color-disabled:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 50%);
400
+ --tds-page-header-nav-item-border-color-disabled:var(--tds-page-header-nav-item-background-color-disabled);
401
+
402
+ --tds-page-header-nav-item-color-selected:var(--t-text-color);
403
+ --tds-page-header-nav-item-background-color-selected:var(--t-surface-color-canvas);
404
+ --tds-page-header-nav-item-border-color-selected:var(--tds-page-header-nav-item-background-color-selected);
405
+ --tds-page-header-nav-item-border-bottom-color-selected:var(--tds-page-header-nav-item-background-color-selected);
406
+ --tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning);
320
407
  }
321
- }
322
408
 
323
- .tds-sidenav :where(nav,ul,.tds-sidenav-section){
324
- display:flex;
409
+ .tds-page-header--profile{
410
+ --tds-page-header-padding-y:20px;
325
411
  }
326
412
 
327
- .tds-sidenav :where(nav,ul,.tds-sidenav-section,.tds-sidenav-collapse){
328
- flex-direction:column;
329
- gap:var(--t-spacing-half);
330
- width:100%;
413
+ @supports (color: light-dark(#fff, #000)){
414
+ .tds-page-header{
415
+ --tds-page-header-nav-background-start:light-dark(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0));
416
+ --tds-page-header-nav-background-end:light-dark(rgba(0, 0, 0, .05), rgba(255, 255, 255, .1));
417
+ }
331
418
  }
332
419
 
333
- .tds-sidenav-section-list{
334
- width:100%;
335
- padding:0;
336
- margin:0;
337
- list-style:none;
420
+ @media (min-width: 600px){
421
+ .tds-page-header{
422
+ --tds-page-header-background-color:var(--t-surface-color-canvas);
423
+ --tds-page-header-color:var(--t-text-color-secondary);
424
+ --tds-page-header-bottom-border-color:var(--t-border-color);
425
+ --tds-page-header-padding-x:var(--t-spacing-3);
426
+ --tds-page-header-headline-font-size:var(--t-font-size-3xl);
427
+ --tds-page-header-nav-gap:var(--t-spacing-half);
428
+ --tds-page-header-nav-background:transparent;
429
+ --tds-page-header-nav-item-padding-x:var(--t-spacing-2);
430
+ --tds-page-header-nav-item-border-width:1px;
431
+ --tds-page-header-nav-item-color:var(--t-text-color);
432
+ --tds-page-header-nav-item-background-color:var(--t-fill-color-neutral-070);
433
+ --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-060);
434
+ --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-050);
435
+ --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
436
+ --tds-page-header-nav-item-border-color-selected:var(--t-border-color);
437
+ }
438
+ }
338
439
  }
339
440
 
340
- .tds-sidenav-section-header{
441
+ .tds-page-header{
341
442
  display:flex;
342
- align-items:baseline;
343
- justify-content:space-between;
344
- padding-top:var(--t-spacing-2);
443
+ flex-direction:column;
444
+ padding-top:var(--tds-page-header-padding-y);
445
+ color:var(--tds-page-header-color);
446
+ background:var(--tds-page-header-background-color);
447
+ border-bottom:1px solid var(--tds-page-header-bottom-border-color);
345
448
  }
346
449
 
347
- .tds-sidenav-section-header h2{
348
- margin:0;
349
- font-size:var(--t-font-size-sm);
350
- font-weight:var(--t-font-weight-semibold);
351
- line-height:1.35;
352
- color:var(--t-text-color-secondary);
353
- text-transform:uppercase;
450
+ .tds-page-header:not(.has-nav){
451
+ padding-bottom:var(--tds-page-header-padding-y);
354
452
  }
355
453
 
356
- .tds-sidenav-section:first-of-type .tds-sidenav-section-header{
357
- padding-top:0;
454
+ .tds-page-header.inactive{
455
+ background:var(--tds-page-header-background-color-inactive);
358
456
  }
359
457
 
360
- .tds-sidenav-section-header [slot="label-actions"]{
361
- display:flex;
362
- gap:var(--t-spacing-half);
363
- align-items:center;
458
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
459
+ width:100%;
364
460
  }
365
461
 
366
- .tds-sidenav-section [slot="section-actions"]{
367
- display:flex;
368
- gap:12px;
369
- align-items:center;
370
- min-height:42px;
371
- padding:var(--t-spacing-1) 0;
372
- }
373
-
374
- .tds-sidenav-section-list,
375
- .tds-sidenav-item{
376
- width:100%;
377
- padding:0;
378
- margin:0;
379
- }
380
-
381
- .tds-sidenav-item :is(a,button){
382
- position:relative;
462
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
383
463
  display:flex;
384
- gap:12px;
385
- align-items:center;
386
- width:100%;
387
- padding:12px;
388
- overflow:hidden;
389
- font-size:var(--t-font-size-sm);
390
- line-height:18px;
391
- color:var(--t-text-color-headline);
392
- white-space:nowrap;
393
- text-decoration:none;
394
- -webkit-appearance:none;
395
- -moz-appearance:none;
396
- appearance:none;
397
- cursor:pointer;
398
- background-color:var(--tds-sidenav-item-background, transparent);
399
- border:0;
400
- border-radius:var(--t-border-radius);
401
- transition:var(--tds-sidenav-item-transition);
464
+ flex-flow:row wrap;
465
+ gap:var(--t-spacing-half) var(--t-spacing-1);
466
+ align-items:flex-start;
467
+ justify-content:flex-start;
468
+ min-width:0;
402
469
  }
403
470
 
404
- :is(.tds-sidenav-item :is(a,button)):not(:has(.prefix,.suffix)),:is(.tds-sidenav-item :is(a,button)) :is(:not(.prefix,.suffix)){
405
- display:block;
406
- flex:1;
407
- overflow:hidden;
408
- text-overflow:ellipsis;
409
- text-align:left;
410
- white-space:nowrap;
471
+ :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{
472
+ display:flex;
473
+ gap:var(--tds-page-header-nav-gap);
474
+ padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
475
+ margin:0 0 -1px;
476
+ overflow:auto;
477
+ list-style:none;
478
+ background:var(--tds-page-header-nav-background);
411
479
  }
412
480
 
413
- :is(.tds-sidenav-item :is(a,button)):hover,:is(.tds-sidenav-item :is(a,button)):focus-visible{
414
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-hover);
415
- color:var(--t-text-color-headline);
481
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button){
482
+ position:relative;
483
+ display:inline-flex;
484
+ padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
485
+ font-size:var(--t-font-size-sm);
486
+ line-height:22px;
487
+ color:var(--tds-page-header-nav-item-color);
488
+ white-space:nowrap;
416
489
  text-decoration:none;
490
+ -webkit-appearance:none;
491
+ -moz-appearance:none;
492
+ appearance:none;
493
+ cursor:pointer;
494
+ outline-offset:-2px;
495
+ background-color:var(--tds-page-header-nav-item-background-color);
496
+ background-clip:padding-box;
497
+ border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
498
+ border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
499
+ border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
417
500
  }
418
501
 
419
- :is(.tds-sidenav-item :is(a,button)):active{
420
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-active);
421
- }
502
+ .selected:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)){
503
+ --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-selected);
504
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-selected);
505
+ --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-selected);
506
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-selected);
507
+ }
422
508
 
423
- :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]){
424
- overflow:hidden;
425
- color:var(--tds-sidenav-item-icon-color);
509
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):hover{
510
+ --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
511
+ --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
512
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
513
+ }
514
+
515
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):active{
516
+ background-color:var(--tds-page-header-nav-item-background-color-active);
517
+ border-color:var(--tds-page-header-nav-item-border-color-active);
518
+ }
519
+
520
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):disabled{
521
+ color:var(--tds-page-header-nav-item-color-disabled);
522
+ cursor:not-allowed;
523
+ background-color:var(--tds-page-header-nav-item-background-color-disabled);
524
+ opacity:1;
525
+ }
526
+
527
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
528
+ position:relative;
426
529
  }
427
530
 
428
- :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{
429
- display:block;
430
- width:var(--tds-sidenav-item-icon-size);
431
- height:var(--tds-sidenav-item-icon-size);
531
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator)) :is(a,button){
532
+ -webkit-mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
533
+ mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
432
534
  }
433
535
 
434
- :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section{
435
- --tds-sidenav-indent:19px;
436
- }
536
+ :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{
537
+ position:absolute;
538
+ top:-5px;
539
+ right:-2px;
540
+ width:10px;
541
+ height:10px;
542
+ content:"";
543
+ background:var(--tds-page-header-nav-item-indicator-color);
544
+ border-radius:50%;
545
+ }
437
546
 
438
- [aria-expanded="true"]:is(.tds-sidenav-item :is(a,button)) + .tds-sidenav-section-list{
439
- visibility:visible;
440
- block-size:auto;
441
- opacity:1;
442
- }
547
+ @media (prefers-reduced-motion: no-preference){
548
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
549
+ animation:indicator-pulse 1.25s ease infinite;
550
+ }
551
+ }
443
552
 
444
- .tds-sidenav-item.selected > :is(a,button),.tds-sidenav-item:has(.tds-sidenav-section):has(.selected) > :is(a,button){
445
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-selected);
446
- --tds-sidenav-item-icon-color:var(--tds-sidenav-item-icon-color-selected);
553
+ .tds-page-header__title-bar{
554
+ display:flex;
555
+ flex-direction:column;
556
+ gap:var(--t-spacing-2) var(--t-spacing-1);
557
+ align-items:flex-start;
558
+ justify-content:space-between;
559
+ padding:0 var(--tds-page-header-padding-x);
560
+ }
447
561
 
448
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-selected);
449
- font-weight:var(--t-font-weight-semibold);
562
+ .tds-page-header--profile > .tds-page-header__title-bar{
563
+ align-items:center;
450
564
  }
451
565
 
452
- .tds-sidenav-item:has(.tds-sidenav-section){
453
- display:flex;
454
- flex-direction:column;
455
- gap:var(--t-spacing-half);
456
- }
566
+ .tds-page-header__primary{
567
+ width:100%;
568
+ }
457
569
 
458
- .tds-sidenav-item .tds-sidenav-section-list{
459
- --tds-sidenav-item-depth:1;
460
- gap:0;
570
+ .tds-page-header__primary h1{
571
+ margin:0;
572
+ font-size:var(--tds-page-header-headline-font-size);
573
+ font-weight:var(--t-font-weight-normal);
574
+ line-height:32px;
575
+ color:var(--tds-page-header-headline-color);
576
+ overflow-wrap:break-word;
461
577
  }
462
578
 
463
- .tds-sidenav-action--toggle + :is(.tds-sidenav-item .tds-sidenav-section-list){
464
- visibility:hidden;
465
- block-size:0;
466
- overflow-y:clip;
467
- opacity:0;
468
- transition:content-visibility var(--t-duration-400) allow-discrete, opacity var(--t-duration-400), block-size var(--t-duration-400);
469
- }
579
+ @media (min-width: 960px){
580
+ .tds-page-header__primary{
581
+ flex:1 1 max-content;
582
+ width:auto;
583
+ min-width:0;
584
+ max-width:100%;
585
+ }
470
586
 
471
- :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list{
472
- --tds-sidenav-item-depth:2;
587
+ .tds-page-header__title-bar,
588
+ .tds-page-header--profile .tds-page-header__title-bar{
589
+ flex-flow:row nowrap;
590
+ row-gap:12px;
591
+ align-items:flex-start;
592
+ }
593
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
594
+ width:auto;
473
595
  }
474
596
 
475
- :is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
476
- min-height:var(--t-element-size-2xl);
477
- padding-block:9px;
478
- padding-left:calc((var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth)) + var(--tds-sidenav-indent) + var(--t-spacing-fourth));
479
- line-height:1;
480
- background-color:transparent;
597
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
598
+ justify-content:flex-end;
481
599
  }
600
+ }
482
601
 
483
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::before{
484
- position:absolute;
485
- top:0;
486
- bottom:0;
487
- left:calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
488
- width:2px;
489
- content:"";
490
- background-color:var(--tds-sidenav-item-nested-border-color);
491
- transition:var(--tds-sidenav-item-transition);
492
- }
602
+ .tds-page-header-phone,
603
+ .tds-page-header-email{
604
+ color:var(--tds-page-header-color);
605
+ white-space:nowrap;
606
+ }
493
607
 
494
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::after{
495
- position:absolute;
496
- inset:0 0 0 calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
497
- z-index:-1;
498
- height:100%;
499
- content:"";
500
- background-color:var(--tds-sidenav-item-nested-background);
501
- border-radius:0 var(--t-border-radius) var(--t-border-radius) 0;
502
- transition:var(--tds-sidenav-item-transition);
503
- }
608
+ .tds-page-header-email{
609
+ max-width:100%;
610
+ overflow:hidden;
611
+ text-overflow:ellipsis;
612
+ }
504
613
 
505
- :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)){
506
- display:block;
507
- text-align:left;
508
- white-space:normal;
509
- }
614
+ @keyframes indicator-pulse{
615
+ 0%{
616
+ opacity:.3;
617
+ transform:scale(.9);
618
+ }
510
619
 
511
- :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{
512
- --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-hover);
513
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-hover);
514
- }
620
+ 100%{
621
+ opacity:0;
622
+ transform:scale(1.75);
623
+ }
624
+ }
515
625
 
516
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):active{
517
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-active);
518
- }
626
+ .tds-radio-group{
627
+ --tds-radio-group-font-size:var(--t-font-size-md);
628
+ --tds-radio-group-line-height:1.4;
629
+ --tds-radio-group-gap:var(--t-spacing-1);
519
630
 
520
- .selected:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
521
- --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-selected);
522
- font-weight:var(--t-font-weight-medium);
523
- }
631
+ --tds-radio-group-legend-margin-bottom:var(--tds-radio-group-gap);
524
632
 
525
- .tds-sidenav-responsive-header{
633
+ --tds-radio-group-description-font-size:var(--t-font-size-sm);
634
+ --tds-radio-group-description-line-height:1.35;
635
+ --tds-radio-group-description-color:var(--t-text-color-secondary);
636
+ --tds-radio-group-description-invalid-icon-display:none;
526
637
  display:flex;
527
- gap:var(--t-spacing-2);
528
- align-items:center;
529
- width:100%;
530
- }
531
-
532
- .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle{
533
- order:0;
534
- }
638
+ flex-direction:column;
639
+ gap:var(--tds-radio-group-gap);
640
+ padding:0;
641
+ margin:0;
535
642
 
536
- .tds-sidenav-responsive-header .tds-sidenav-responsive-header-label{
537
- flex:1;
538
- order:1;
539
- margin:0;
540
- font-size:var(--t-font-size-lg);
541
- font-weight:var(--t-font-weight-medium);
542
- color:var(--t-text-color-headline);
543
- }
643
+ font-size:var(--tds-radio-group-font-size);
644
+ line-height:var(--tds-radio-group-line-height);
645
+ border:0;
646
+ }
544
647
 
545
- @media (max-width: 719px){
546
- .tds-sidenav-collapse{
547
- z-index:10001;
548
- display:none;
549
- max-width:min(448px, calc(100vw - 48px));
648
+ .tds-radio-group legend{
550
649
  padding:0;
551
- margin:12px 0;
552
- position-area:bottom span-right;
553
- overflow:hidden;
554
- outline:0;
555
- background:var(--t-surface-color-card);
556
- border:0;
557
- border-radius:6px;
558
- box-shadow:0 8px 20px 0 rgba(0, 0, 0, .25);
559
- opacity:var(--tds-sidenav-collapse-open-opacity);
560
- transform:var(--tds-sidenav-collapse-open-transform);
561
- transition:var(--tds-sidenav-collapse-transition-enter);
562
- will-change:transform;
650
+ margin-bottom:var(--tds-radio-group-legend-margin-bottom);
563
651
  }
564
652
 
565
- .tds-sidenav-scroll-container{
566
- --webkit-overflow-scrolling:touch;
567
- display:block;
568
- width:100%;
569
- height:-moz-fit-content;
570
- height:fit-content;
571
- padding:var(--t-spacing-2);
572
- overflow-y:auto;
653
+ .tds-radio-group:has(.tds-radio-group-description){
654
+ --tds-radio-group-legend-margin-bottom:var(--t-spacing-fourth);
573
655
  }
574
656
 
575
- .tds-sidenav-item :is(a, button) :is(.prefix){
576
- display:none;
577
- }
578
- @supports selector(:popover-open){
579
- .tds-sidenav-collapse:popover-open{
580
- display:flex;
581
- }
657
+ .tds-radio-group[aria-invalid="true"]{
658
+ --tds-radio-group-description-color:var(--t-text-color-status-error);
659
+ --tds-radio-group-description-invalid-icon-display:inline-block;
660
+ }
582
661
 
583
- .tds-sidenav-collapse:not(:popover-open){
584
- opacity:var(--tds-sidenav-collapse-closed-opacity);
585
- transition:var(--tds-sidenav-collapse-transition-exit);
662
+ .tds-radio-group[aria-invalid="true"] .tds-radio{
663
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
586
664
  }
587
665
 
588
- @starting-style{
589
- .tds-sidenav-collapse:popover-open{
590
- opacity:var(--tds-sidenav-collapse-closed-opacity);
591
- transform:var(--tds-sidenav-collapse-closed-transform);
666
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
667
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
668
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
592
669
  }
593
- }
594
- }
595
- @supports not selector(:popover-open){
596
- .tds-sidenav-collapse.\:popover-open{
597
- display:flex;
598
- }
599
670
 
600
- .tds-sidenav-collapse:not(.\:popover-open){
601
- opacity:var(--tds-sidenav-collapse-closed-opacity);
602
- transition:var(--tds-sidenav-collapse-transition-exit);
671
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
672
+ --tds-radio-input-background-color:var(--t-form-background-color);
673
+ }
674
+
675
+ .tds-radio-group:has(input:required) legend::after{
676
+ margin-left:.25ch;
677
+ color:var(--t-text-color-status-error);
678
+ content:"*";
603
679
  }
604
- }
680
+
681
+ .tds-radio-group-fields{
682
+ display:flex;
683
+ flex-direction:column;
684
+ gap:var(--tds-radio-group-gap);
685
+ align-items:flex-start;
605
686
  }
606
687
 
607
- @media (min-width: 720px){
608
- .tds-sidenav-responsive-header{
609
- display:none;
688
+ .tds-radio-group-description{
689
+ display:flex;
690
+ gap:var(--t-spacing-half);
691
+ align-items:flex-start;
692
+ margin:0;
693
+ font-size:var(--tds-radio-group-description-font-size);
694
+ line-height:var(--tds-radio-group-description-line-height);
695
+ color:var(--tds-radio-group-description-color);
696
+ cursor:text;
697
+ }
698
+
699
+ .tds-radio-group-description .tds-radio-group-description-invalid-icon{
700
+ display:var(--tds-radio-group-description-invalid-icon-display);
701
+ flex-shrink:0;
702
+ margin-top:calc(.5lh - .5em);
703
+ line-height:var(--tds-radio-group-description-line-height);
610
704
  }
705
+
706
+ .tds-radio-group--sm{
707
+ --tds-radio-group-line-height:1.35;
708
+ --tds-radio-group-font-size:var(--t-font-size-sm);
709
+ --tds-radio-group-description-font-size:var(--t-font-size-xs);
710
+ --tds-radio-group-description-line-height:1.3;
611
711
  }
612
712
 
613
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
614
- display:none;
615
- }
616
713
 
617
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
618
- display:block;
714
+ :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{
715
+ -webkit-appearance:none;
716
+ appearance:none;
619
717
  }
620
718
 
621
- tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
622
- display:flex;
623
- flex-direction:column;
719
+ [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
720
+ inline-size:1em;
721
+ block-size:2em;
624
722
  }
625
723
 
724
+ @supports (field-sizing: content){
725
+ .tds-input--auto-width{
726
+ inline-size:-moz-fit-content;
727
+ inline-size:fit-content;
728
+ min-inline-size:min(100%, 122px);
729
+ }
730
+
731
+ .tds-input--auto-width input{
732
+ field-sizing:content;
733
+ inline-size:auto;
734
+ }
735
+ }
736
+
626
737
  .tds-checkbox{
627
738
  --tds-checkbox-font-size:var(--t-font-size-md);
628
739
  --tds-checkbox-cursor:pointer;
@@ -779,198 +890,42 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
779
890
 
780
891
  .tds-checkbox:has(input:disabled){
781
892
  --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
782
- --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
783
-
784
- --tds-checkbox-label-color:var(--t-form-color-disabled);
785
- --tds-checkbox-description-color:var(--t-form-color-disabled);
786
- --tds-checkbox-cursor:not-allowed;
787
- }
788
-
789
- .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
790
- --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
791
- }
792
-
793
- .tds-checkbox-description{
794
- display:flex;
795
- grid-area:2 / 2;
796
- gap:var(--t-spacing-half);
797
- align-items:flex-start;
798
- margin:0;
799
- font-size:var(--tds-checkbox-description-font-size);
800
- line-height:var(--tds-checkbox-description-line-height);
801
- color:var(--tds-checkbox-description-color);
802
- cursor:text;
803
- }
804
-
805
- .tds-checkbox-description .tds-checkbox-description-invalid-icon{
806
- display:var(--tds-checkbox-description-invalid-icon-display);
807
- flex-shrink:0;
808
- margin-top:calc(.5lh - .5em);
809
- line-height:var(--tds-checkbox-description-line-height);
810
- }
811
-
812
- .tds-checkbox--sm{
813
- --tds-checkbox-line-height:1.35;
814
- --tds-checkbox-input-size:var(--t-element-size-sm);
815
- --tds-checkbox-font-size:var(--t-font-size-sm);
816
- --tds-checkbox-description-font-size:var(--t-font-size-xs);
817
- --tds-checkbox-description-line-height:1.3;
818
- }
819
-
820
-
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
- -webkit-appearance:none;
823
- appearance:none;
824
- }
825
-
826
- [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
827
- inline-size:1em;
828
- block-size:2em;
829
- }
830
-
831
- @supports (field-sizing: content){
832
- .tds-input--auto-width{
833
- inline-size:-moz-fit-content;
834
- inline-size:fit-content;
835
- min-inline-size:min(100%, 122px);
836
- }
837
-
838
- .tds-input--auto-width input{
839
- field-sizing:content;
840
- inline-size:auto;
841
- }
842
- }
843
-
844
- .tds-radio{
845
- --tds-radio-font-size:var(--t-font-size-md);
846
- --tds-radio-cursor:pointer;
847
- --tds-radio-line-height:1.4;
848
- --tds-radio-transition-property:border-width;
849
-
850
- --tds-radio-input-size:var(--t-element-size-md);
851
- --tds-radio-input-border-radius:var(--t-border-radius-round);
852
- --tds-radio-input-border-color:var(--t-form-border-color);
853
- --tds-radio-input-border-width:var(--t-form-border-width);
854
- --tds-radio-input-background-color:transparent;
855
-
856
- --tds-radio-label-color:var(--t-form-color);
857
-
858
- --tds-radio-description-font-size:var(--t-font-size-sm);
859
- --tds-radio-description-line-height:1.35;
860
- --tds-radio-description-color:var(--t-text-color-secondary);
861
-
862
- position:relative;
863
- display:inline-grid;
864
- grid-template-columns:auto;
865
- grid-auto-columns:1fr;
866
- gap:var(--t-spacing-fourth) var(--t-spacing-1);
867
- line-height:var(--tds-radio-line-height);
868
- cursor:var(--tds-radio-cursor);
869
- -webkit-user-select:none;
870
- -moz-user-select:none;
871
- user-select:none;
872
- }
873
-
874
- .tds-radio label{
875
- grid-area:1 / 2;
876
- font-size:var(--tds-radio-font-size);
877
- font-weight:var(--t-font-weight-normal);
878
- color:var(--tds-radio-label-color);
879
- cursor:var(--tds-radio-cursor);
880
- }
881
-
882
- .tds-radio input[type="radio"]{
883
- position:relative;
884
- width:1em;
885
- height:1em;
886
- margin:calc((1lh - 1em) / 2) 0 0;
887
- font-size:var(--tds-radio-font-size);
888
- line-height:inherit;
889
- -webkit-appearance:none;
890
- -moz-appearance:none;
891
- appearance:none;
892
- cursor:var(--tds-radio-cursor);
893
- background-color:var(--tds-radio-input-background-color);
894
- border:var(--tds-radio-input-border-width) solid var(--tds-radio-input-border-color);
895
- border-radius:var(--tds-radio-input-border-radius);
896
- transition-timing-function:var(--t-ease-in-out);
897
- transition-duration:var(--t-duration-200);
898
- transition-property:var(--tds-radio-transition-property);
899
- }
900
-
901
- :is(.tds-radio input[type="radio"]):hover:not(:disabled){
902
- --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
903
- --tds-radio-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
904
- }
905
-
906
- :is(.tds-radio input[type="radio"]):focus-visible{
907
- outline:var(--t-focus-ring-outline);
908
- outline-offset:var(--t-focus-ring-offset);
909
- }
910
-
911
- :is(.tds-radio input[type="radio"]):disabled{
912
- pointer-events:none;
913
- }
914
-
915
- @media (prefers-reduced-motion: reduce){
916
-
917
- .tds-radio input[type="radio"]{
918
- --tds-radio-transition-property:none;
919
- }
920
- }
921
-
922
- .tds-radio:has(input:checked){
923
- --tds-radio-input-background-color:var(--t-form-background-color);
924
- --tds-radio-input-border-color:var(--t-border-color-control-info);
925
- --tds-radio-input-border-width:4px;
926
- }
927
-
928
- .tds-radio:has(input:checked) input:hover:not(:disabled){
929
- --tds-radio-input-background-color:var(--t-form-background-color);
930
- --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
931
- }
932
-
933
- .tds-radio:has(input:user-invalid){
934
- --tds-radio-input-border-color:var(--t-form-border-color-error);
935
- }
936
-
937
- .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
938
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
939
- --tds-radio-input-background-color:var(--t-form-background-color-error);
940
- }
941
-
942
- .tds-radio:has(input:disabled){
943
- --tds-radio-input-background-color:var(--t-form-background-color-disabled);
944
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
945
-
946
- --tds-radio-label-color:var(--t-form-color-disabled);
947
- --tds-radio-description-color:var(--t-form-color-disabled);
948
- --tds-radio-cursor:not-allowed;
893
+ --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
894
+
895
+ --tds-checkbox-label-color:var(--t-form-color-disabled);
896
+ --tds-checkbox-description-color:var(--t-form-color-disabled);
897
+ --tds-checkbox-cursor:not-allowed;
949
898
  }
950
899
 
951
- .tds-radio:has(input:disabled) input:checked{
952
- --tds-radio-input-background-color:var(--t-form-background-color);
953
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
900
+ .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
901
+ --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
954
902
  }
955
903
 
956
- .tds-radio-description{
904
+ .tds-checkbox-description{
957
905
  display:flex;
958
906
  grid-area:2 / 2;
959
907
  gap:var(--t-spacing-half);
960
908
  align-items:flex-start;
961
909
  margin:0;
962
- font-size:var(--tds-radio-description-font-size);
963
- line-height:var(--tds-radio-description-line-height);
964
- color:var(--tds-radio-description-color);
910
+ font-size:var(--tds-checkbox-description-font-size);
911
+ line-height:var(--tds-checkbox-description-line-height);
912
+ color:var(--tds-checkbox-description-color);
965
913
  cursor:text;
966
914
  }
967
915
 
968
- .tds-radio--sm{
969
- --tds-radio-line-height:1.35;
970
- --tds-radio-input-size:var(--t-element-size-sm);
971
- --tds-radio-font-size:var(--t-font-size-sm);
972
- --tds-radio-description-font-size:var(--t-font-size-xs);
973
- --tds-radio-description-line-height:1.3;
916
+ .tds-checkbox-description .tds-checkbox-description-invalid-icon{
917
+ display:var(--tds-checkbox-description-invalid-icon-display);
918
+ flex-shrink:0;
919
+ margin-top:calc(.5lh - .5em);
920
+ line-height:var(--tds-checkbox-description-line-height);
921
+ }
922
+
923
+ .tds-checkbox--sm{
924
+ --tds-checkbox-line-height:1.35;
925
+ --tds-checkbox-input-size:var(--t-element-size-sm);
926
+ --tds-checkbox-font-size:var(--t-font-size-sm);
927
+ --tds-checkbox-description-font-size:var(--t-font-size-xs);
928
+ --tds-checkbox-description-line-height:1.3;
974
929
  }
975
930
 
976
931
  .tds-input:has(textarea){
@@ -1078,93 +1033,6 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1078
1033
  }
1079
1034
  }
1080
1035
 
1081
- .tds-radio-group{
1082
- --tds-radio-group-font-size:var(--t-font-size-md);
1083
- --tds-radio-group-line-height:1.4;
1084
- --tds-radio-group-gap:var(--t-spacing-1);
1085
-
1086
- --tds-radio-group-legend-margin-bottom:var(--tds-radio-group-gap);
1087
-
1088
- --tds-radio-group-description-font-size:var(--t-font-size-sm);
1089
- --tds-radio-group-description-line-height:1.35;
1090
- --tds-radio-group-description-color:var(--t-text-color-secondary);
1091
- --tds-radio-group-description-invalid-icon-display:none;
1092
- display:flex;
1093
- flex-direction:column;
1094
- gap:var(--tds-radio-group-gap);
1095
- padding:0;
1096
- margin:0;
1097
-
1098
- font-size:var(--tds-radio-group-font-size);
1099
- line-height:var(--tds-radio-group-line-height);
1100
- border:0;
1101
- }
1102
-
1103
- .tds-radio-group legend{
1104
- padding:0;
1105
- margin-bottom:var(--tds-radio-group-legend-margin-bottom);
1106
- }
1107
-
1108
- .tds-radio-group:has(.tds-radio-group-description){
1109
- --tds-radio-group-legend-margin-bottom:var(--t-spacing-fourth);
1110
- }
1111
-
1112
- .tds-radio-group[aria-invalid="true"]{
1113
- --tds-radio-group-description-color:var(--t-text-color-status-error);
1114
- --tds-radio-group-description-invalid-icon-display:inline-block;
1115
- }
1116
-
1117
- .tds-radio-group[aria-invalid="true"] .tds-radio{
1118
- --tds-radio-input-border-color:var(--t-form-border-color-error);
1119
- }
1120
-
1121
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
1122
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1123
- --tds-radio-input-background-color:var(--t-form-background-color-error);
1124
- }
1125
-
1126
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
1127
- --tds-radio-input-background-color:var(--t-form-background-color);
1128
- }
1129
-
1130
- .tds-radio-group:has(input:required) legend::after{
1131
- margin-left:.25ch;
1132
- color:var(--t-text-color-status-error);
1133
- content:"*";
1134
- }
1135
-
1136
- .tds-radio-group-fields{
1137
- display:flex;
1138
- flex-direction:column;
1139
- gap:var(--tds-radio-group-gap);
1140
- align-items:flex-start;
1141
- }
1142
-
1143
- .tds-radio-group-description{
1144
- display:flex;
1145
- gap:var(--t-spacing-half);
1146
- align-items:flex-start;
1147
- margin:0;
1148
- font-size:var(--tds-radio-group-description-font-size);
1149
- line-height:var(--tds-radio-group-description-line-height);
1150
- color:var(--tds-radio-group-description-color);
1151
- cursor:text;
1152
- }
1153
-
1154
- .tds-radio-group-description .tds-radio-group-description-invalid-icon{
1155
- display:var(--tds-radio-group-description-invalid-icon-display);
1156
- flex-shrink:0;
1157
- margin-top:calc(.5lh - .5em);
1158
- line-height:var(--tds-radio-group-description-line-height);
1159
- }
1160
-
1161
- .tds-radio-group--sm{
1162
- --tds-radio-group-line-height:1.35;
1163
- --tds-radio-group-font-size:var(--t-font-size-sm);
1164
- --tds-radio-group-description-font-size:var(--t-font-size-xs);
1165
- --tds-radio-group-description-line-height:1.3;
1166
- }
1167
-
1168
1036
  .tds-toggle-switch{
1169
1037
  --tds-toggle-switch-font-size:var(--t-font-size-md);
1170
1038
  --tds-toggle-switch-column-gap:var(--t-spacing-1);
@@ -1306,6 +1174,138 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1306
1174
  --tds-toggle-switch-display:inline-flex;
1307
1175
  }
1308
1176
 
1177
+ .tds-radio{
1178
+ --tds-radio-font-size:var(--t-font-size-md);
1179
+ --tds-radio-cursor:pointer;
1180
+ --tds-radio-line-height:1.4;
1181
+ --tds-radio-transition-property:border-width;
1182
+
1183
+ --tds-radio-input-size:var(--t-element-size-md);
1184
+ --tds-radio-input-border-radius:var(--t-border-radius-round);
1185
+ --tds-radio-input-border-color:var(--t-form-border-color);
1186
+ --tds-radio-input-border-width:var(--t-form-border-width);
1187
+ --tds-radio-input-background-color:transparent;
1188
+
1189
+ --tds-radio-label-color:var(--t-form-color);
1190
+
1191
+ --tds-radio-description-font-size:var(--t-font-size-sm);
1192
+ --tds-radio-description-line-height:1.35;
1193
+ --tds-radio-description-color:var(--t-text-color-secondary);
1194
+
1195
+ position:relative;
1196
+ display:inline-grid;
1197
+ grid-template-columns:auto;
1198
+ grid-auto-columns:1fr;
1199
+ gap:var(--t-spacing-fourth) var(--t-spacing-1);
1200
+ line-height:var(--tds-radio-line-height);
1201
+ cursor:var(--tds-radio-cursor);
1202
+ -webkit-user-select:none;
1203
+ -moz-user-select:none;
1204
+ user-select:none;
1205
+ }
1206
+
1207
+ .tds-radio label{
1208
+ grid-area:1 / 2;
1209
+ font-size:var(--tds-radio-font-size);
1210
+ font-weight:var(--t-font-weight-normal);
1211
+ color:var(--tds-radio-label-color);
1212
+ cursor:var(--tds-radio-cursor);
1213
+ }
1214
+
1215
+ .tds-radio input[type="radio"]{
1216
+ position:relative;
1217
+ width:1em;
1218
+ height:1em;
1219
+ margin:calc((1lh - 1em) / 2) 0 0;
1220
+ font-size:var(--tds-radio-font-size);
1221
+ line-height:inherit;
1222
+ -webkit-appearance:none;
1223
+ -moz-appearance:none;
1224
+ appearance:none;
1225
+ cursor:var(--tds-radio-cursor);
1226
+ background-color:var(--tds-radio-input-background-color);
1227
+ border:var(--tds-radio-input-border-width) solid var(--tds-radio-input-border-color);
1228
+ border-radius:var(--tds-radio-input-border-radius);
1229
+ transition-timing-function:var(--t-ease-in-out);
1230
+ transition-duration:var(--t-duration-200);
1231
+ transition-property:var(--tds-radio-transition-property);
1232
+ }
1233
+
1234
+ :is(.tds-radio input[type="radio"]):hover:not(:disabled){
1235
+ --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
1236
+ --tds-radio-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
1237
+ }
1238
+
1239
+ :is(.tds-radio input[type="radio"]):focus-visible{
1240
+ outline:var(--t-focus-ring-outline);
1241
+ outline-offset:var(--t-focus-ring-offset);
1242
+ }
1243
+
1244
+ :is(.tds-radio input[type="radio"]):disabled{
1245
+ pointer-events:none;
1246
+ }
1247
+
1248
+ @media (prefers-reduced-motion: reduce){
1249
+
1250
+ .tds-radio input[type="radio"]{
1251
+ --tds-radio-transition-property:none;
1252
+ }
1253
+ }
1254
+
1255
+ .tds-radio:has(input:checked){
1256
+ --tds-radio-input-background-color:var(--t-form-background-color);
1257
+ --tds-radio-input-border-color:var(--t-border-color-control-info);
1258
+ --tds-radio-input-border-width:4px;
1259
+ }
1260
+
1261
+ .tds-radio:has(input:checked) input:hover:not(:disabled){
1262
+ --tds-radio-input-background-color:var(--t-form-background-color);
1263
+ --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
1264
+ }
1265
+
1266
+ .tds-radio:has(input:user-invalid){
1267
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
1268
+ }
1269
+
1270
+ .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
1271
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1272
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
1273
+ }
1274
+
1275
+ .tds-radio:has(input:disabled){
1276
+ --tds-radio-input-background-color:var(--t-form-background-color-disabled);
1277
+ --tds-radio-input-border-color:var(--t-form-border-color-disabled);
1278
+
1279
+ --tds-radio-label-color:var(--t-form-color-disabled);
1280
+ --tds-radio-description-color:var(--t-form-color-disabled);
1281
+ --tds-radio-cursor:not-allowed;
1282
+ }
1283
+
1284
+ .tds-radio:has(input:disabled) input:checked{
1285
+ --tds-radio-input-background-color:var(--t-form-background-color);
1286
+ --tds-radio-input-border-color:var(--t-form-border-color-disabled);
1287
+ }
1288
+
1289
+ .tds-radio-description{
1290
+ display:flex;
1291
+ grid-area:2 / 2;
1292
+ gap:var(--t-spacing-half);
1293
+ align-items:flex-start;
1294
+ margin:0;
1295
+ font-size:var(--tds-radio-description-font-size);
1296
+ line-height:var(--tds-radio-description-line-height);
1297
+ color:var(--tds-radio-description-color);
1298
+ cursor:text;
1299
+ }
1300
+
1301
+ .tds-radio--sm{
1302
+ --tds-radio-line-height:1.35;
1303
+ --tds-radio-input-size:var(--t-element-size-sm);
1304
+ --tds-radio-font-size:var(--t-font-size-sm);
1305
+ --tds-radio-description-font-size:var(--t-font-size-xs);
1306
+ --tds-radio-description-line-height:1.3;
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);