@planningcenter/tapestry 3.2.2-rc.16 → 3.2.2-rc.17

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 +679 -679
  2. package/dist/reactRender.css.map +1 -1
  3. package/dist/reactRenderLegacy.css +679 -679
  4. package/dist/reactRenderLegacy.css.map +1 -1
  5. package/package.json +2 -2
package/dist/reactRender.css CHANGED
@@ -1,627 +1,627 @@
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
- }
422
-
423
- :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]){
424
- overflow:hidden;
425
- color:var(--tds-sidenav-item-icon-color);
426
- }
427
-
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);
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);
432
507
  }
433
508
 
434
- :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section{
435
- --tds-sidenav-indent:19px;
436
- }
437
-
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
- }
443
-
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);
447
-
448
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-selected);
449
- font-weight:var(--t-font-weight-semibold);
450
- }
451
-
452
- .tds-sidenav-item:has(.tds-sidenav-section){
453
- display:flex;
454
- flex-direction:column;
455
- gap:var(--t-spacing-half);
456
- }
457
-
458
- .tds-sidenav-item .tds-sidenav-section-list{
459
- --tds-sidenav-item-depth:1;
460
- gap:0;
461
- }
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
+ }
462
514
 
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
- }
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
+ }
470
519
 
471
- :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list{
472
- --tds-sidenav-item-depth:2;
473
- }
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
+ }
474
526
 
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;
527
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
528
+ position:relative;
481
529
  }
482
530
 
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);
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);
492
534
  }
493
535
 
494
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::after{
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{
495
537
  position:absolute;
496
- inset:0 0 0 calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
497
- z-index:-1;
498
- height:100%;
538
+ top:-5px;
539
+ right:-2px;
540
+ width:10px;
541
+ height:10px;
499
542
  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
- }
504
-
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
- }
510
-
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);
543
+ background:var(--tds-page-header-nav-item-indicator-color);
544
+ border-radius:50%;
514
545
  }
515
546
 
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);
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
+ }
518
551
  }
519
552
 
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
- }
524
-
525
- .tds-sidenav-responsive-header{
553
+ .tds-page-header__title-bar{
526
554
  display:flex;
527
- gap:var(--t-spacing-2);
528
- align-items:center;
529
- width:100%;
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);
530
560
  }
531
561
 
532
- .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle{
533
- order:0;
534
- }
535
-
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);
562
+ .tds-page-header--profile > .tds-page-header__title-bar{
563
+ align-items:center;
543
564
  }
544
565
 
545
- @media (max-width: 719px){
546
- .tds-sidenav-collapse{
547
- z-index:10001;
548
- display:none;
549
- max-width:min(448px, calc(100vw - 48px));
550
- 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;
563
- }
566
+ .tds-page-header__primary{
567
+ width:100%;
568
+ }
564
569
 
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;
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;
573
577
  }
574
578
 
575
- .tds-sidenav-item :is(a, button) :is(.prefix){
576
- display:none;
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%;
577
585
  }
578
- @supports selector(:popover-open){
579
- .tds-sidenav-collapse:popover-open{
580
- display:flex;
581
- }
582
-
583
- .tds-sidenav-collapse:not(:popover-open){
584
- opacity:var(--tds-sidenav-collapse-closed-opacity);
585
- transition:var(--tds-sidenav-collapse-transition-exit);
586
- }
587
586
 
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);
592
- }
593
- }
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;
594
592
  }
595
- @supports not selector(:popover-open){
596
- .tds-sidenav-collapse.\:popover-open{
597
- display:flex;
593
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
594
+ width:auto;
598
595
  }
599
596
 
600
- .tds-sidenav-collapse:not(.\:popover-open){
601
- opacity:var(--tds-sidenav-collapse-closed-opacity);
602
- transition:var(--tds-sidenav-collapse-transition-exit);
597
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
598
+ justify-content:flex-end;
603
599
  }
604
- }
605
600
  }
606
601
 
607
- @media (min-width: 720px){
608
- .tds-sidenav-responsive-header{
609
- display:none;
610
- }
602
+ .tds-page-header-phone,
603
+ .tds-page-header-email{
604
+ color:var(--tds-page-header-color);
605
+ white-space:nowrap;
611
606
  }
612
607
 
613
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
614
- display:none;
615
- }
608
+ .tds-page-header-email{
609
+ max-width:100%;
610
+ overflow:hidden;
611
+ text-overflow:ellipsis;
612
+ }
616
613
 
617
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
618
- display:block;
619
- }
614
+ @keyframes indicator-pulse{
615
+ 0%{
616
+ opacity:.3;
617
+ transform:scale(.9);
618
+ }
620
619
 
621
- tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
622
- display:flex;
623
- flex-direction:column;
624
- }
620
+ 100%{
621
+ opacity:0;
622
+ transform:scale(1.75);
623
+ }
624
+ }
625
625
 
626
626
  .tds-checkbox{
627
627
  --tds-checkbox-font-size:var(--t-font-size-md);
@@ -817,30 +817,6 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
817
817
  --tds-checkbox-description-line-height:1.3;
818
818
  }
819
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
820
  .tds-radio{
845
821
  --tds-radio-font-size:var(--t-font-size-md);
846
822
  --tds-radio-cursor:pointer;
@@ -973,6 +949,93 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
973
949
  --tds-radio-description-line-height:1.3;
974
950
  }
975
951
 
952
+ .tds-radio-group{
953
+ --tds-radio-group-font-size:var(--t-font-size-md);
954
+ --tds-radio-group-line-height:1.4;
955
+ --tds-radio-group-gap:var(--t-spacing-1);
956
+
957
+ --tds-radio-group-legend-margin-bottom:var(--tds-radio-group-gap);
958
+
959
+ --tds-radio-group-description-font-size:var(--t-font-size-sm);
960
+ --tds-radio-group-description-line-height:1.35;
961
+ --tds-radio-group-description-color:var(--t-text-color-secondary);
962
+ --tds-radio-group-description-invalid-icon-display:none;
963
+ display:flex;
964
+ flex-direction:column;
965
+ gap:var(--tds-radio-group-gap);
966
+ padding:0;
967
+ margin:0;
968
+
969
+ font-size:var(--tds-radio-group-font-size);
970
+ line-height:var(--tds-radio-group-line-height);
971
+ border:0;
972
+ }
973
+
974
+ .tds-radio-group legend{
975
+ padding:0;
976
+ margin-bottom:var(--tds-radio-group-legend-margin-bottom);
977
+ }
978
+
979
+ .tds-radio-group:has(.tds-radio-group-description){
980
+ --tds-radio-group-legend-margin-bottom:var(--t-spacing-fourth);
981
+ }
982
+
983
+ .tds-radio-group[aria-invalid="true"]{
984
+ --tds-radio-group-description-color:var(--t-text-color-status-error);
985
+ --tds-radio-group-description-invalid-icon-display:inline-block;
986
+ }
987
+
988
+ .tds-radio-group[aria-invalid="true"] .tds-radio{
989
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
990
+ }
991
+
992
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
993
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
994
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
995
+ }
996
+
997
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
998
+ --tds-radio-input-background-color:var(--t-form-background-color);
999
+ }
1000
+
1001
+ .tds-radio-group:has(input:required) legend::after{
1002
+ margin-left:.25ch;
1003
+ color:var(--t-text-color-status-error);
1004
+ content:"*";
1005
+ }
1006
+
1007
+ .tds-radio-group-fields{
1008
+ display:flex;
1009
+ flex-direction:column;
1010
+ gap:var(--tds-radio-group-gap);
1011
+ align-items:flex-start;
1012
+ }
1013
+
1014
+ .tds-radio-group-description{
1015
+ display:flex;
1016
+ gap:var(--t-spacing-half);
1017
+ align-items:flex-start;
1018
+ margin:0;
1019
+ font-size:var(--tds-radio-group-description-font-size);
1020
+ line-height:var(--tds-radio-group-description-line-height);
1021
+ color:var(--tds-radio-group-description-color);
1022
+ cursor:text;
1023
+ }
1024
+
1025
+ .tds-radio-group-description .tds-radio-group-description-invalid-icon{
1026
+ display:var(--tds-radio-group-description-invalid-icon-display);
1027
+ flex-shrink:0;
1028
+ margin-top:calc(.5lh - .5em);
1029
+ line-height:var(--tds-radio-group-description-line-height);
1030
+ }
1031
+
1032
+ .tds-radio-group--sm{
1033
+ --tds-radio-group-line-height:1.35;
1034
+ --tds-radio-group-font-size:var(--t-font-size-sm);
1035
+ --tds-radio-group-description-font-size:var(--t-font-size-xs);
1036
+ --tds-radio-group-description-line-height:1.3;
1037
+ }
1038
+
976
1039
  .tds-toggle-switch{
977
1040
  --tds-toggle-switch-font-size:var(--t-font-size-md);
978
1041
  --tds-toggle-switch-column-gap:var(--t-spacing-1);
@@ -1110,8 +1173,32 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1110
1173
  --tds-toggle-switch-description-line-height:1.3;
1111
1174
  }
1112
1175
 
1113
- .tds-toggle-switch--hide-label{
1114
- --tds-toggle-switch-display:inline-flex;
1176
+ .tds-toggle-switch--hide-label{
1177
+ --tds-toggle-switch-display:inline-flex;
1178
+ }
1179
+
1180
+
1181
+ :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{
1182
+ -webkit-appearance:none;
1183
+ appearance:none;
1184
+ }
1185
+
1186
+ [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
1187
+ inline-size:1em;
1188
+ block-size:2em;
1189
+ }
1190
+
1191
+ @supports (field-sizing: content){
1192
+ .tds-input--auto-width{
1193
+ inline-size:-moz-fit-content;
1194
+ inline-size:fit-content;
1195
+ min-inline-size:min(100%, 122px);
1196
+ }
1197
+
1198
+ .tds-input--auto-width input{
1199
+ field-sizing:content;
1200
+ inline-size:auto;
1201
+ }
1115
1202
  }
1116
1203
 
1117
1204
  .tds-input:has(textarea){
@@ -1219,93 +1306,6 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1219
1306
  }
1220
1307
  }
1221
1308
 
1222
- .tds-radio-group{
1223
- --tds-radio-group-font-size:var(--t-font-size-md);
1224
- --tds-radio-group-line-height:1.4;
1225
- --tds-radio-group-gap:var(--t-spacing-1);
1226
-
1227
- --tds-radio-group-legend-margin-bottom:var(--tds-radio-group-gap);
1228
-
1229
- --tds-radio-group-description-font-size:var(--t-font-size-sm);
1230
- --tds-radio-group-description-line-height:1.35;
1231
- --tds-radio-group-description-color:var(--t-text-color-secondary);
1232
- --tds-radio-group-description-invalid-icon-display:none;
1233
- display:flex;
1234
- flex-direction:column;
1235
- gap:var(--tds-radio-group-gap);
1236
- padding:0;
1237
- margin:0;
1238
-
1239
- font-size:var(--tds-radio-group-font-size);
1240
- line-height:var(--tds-radio-group-line-height);
1241
- border:0;
1242
- }
1243
-
1244
- .tds-radio-group legend{
1245
- padding:0;
1246
- margin-bottom:var(--tds-radio-group-legend-margin-bottom);
1247
- }
1248
-
1249
- .tds-radio-group:has(.tds-radio-group-description){
1250
- --tds-radio-group-legend-margin-bottom:var(--t-spacing-fourth);
1251
- }
1252
-
1253
- .tds-radio-group[aria-invalid="true"]{
1254
- --tds-radio-group-description-color:var(--t-text-color-status-error);
1255
- --tds-radio-group-description-invalid-icon-display:inline-block;
1256
- }
1257
-
1258
- .tds-radio-group[aria-invalid="true"] .tds-radio{
1259
- --tds-radio-input-border-color:var(--t-form-border-color-error);
1260
- }
1261
-
1262
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
1263
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1264
- --tds-radio-input-background-color:var(--t-form-background-color-error);
1265
- }
1266
-
1267
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
1268
- --tds-radio-input-background-color:var(--t-form-background-color);
1269
- }
1270
-
1271
- .tds-radio-group:has(input:required) legend::after{
1272
- margin-left:.25ch;
1273
- color:var(--t-text-color-status-error);
1274
- content:"*";
1275
- }
1276
-
1277
- .tds-radio-group-fields{
1278
- display:flex;
1279
- flex-direction:column;
1280
- gap:var(--tds-radio-group-gap);
1281
- align-items:flex-start;
1282
- }
1283
-
1284
- .tds-radio-group-description{
1285
- display:flex;
1286
- gap:var(--t-spacing-half);
1287
- align-items:flex-start;
1288
- margin:0;
1289
- font-size:var(--tds-radio-group-description-font-size);
1290
- line-height:var(--tds-radio-group-description-line-height);
1291
- color:var(--tds-radio-group-description-color);
1292
- cursor:text;
1293
- }
1294
-
1295
- .tds-radio-group-description .tds-radio-group-description-invalid-icon{
1296
- display:var(--tds-radio-group-description-invalid-icon-display);
1297
- flex-shrink:0;
1298
- margin-top:calc(.5lh - .5em);
1299
- line-height:var(--tds-radio-group-description-line-height);
1300
- }
1301
-
1302
- .tds-radio-group--sm{
1303
- --tds-radio-group-line-height:1.35;
1304
- --tds-radio-group-font-size:var(--t-font-size-sm);
1305
- --tds-radio-group-description-font-size:var(--t-font-size-xs);
1306
- --tds-radio-group-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);
@@ -3605,84 +3605,6 @@ a[class="tds-btn"]{
3605
3605
  line-height:1.35;
3606
3606
  }
3607
3607
 
3608
- .tds-checkbox-group{
3609
- --tds-checkbox-group-font-size:var(--t-font-size-md);
3610
- --tds-checkbox-group-line-height:1.4;
3611
- --tds-checkbox-group-gap:var(--t-spacing-1);
3612
-
3613
- --tds-checkbox-group-legend-margin-bottom:var(--tds-checkbox-group-gap);
3614
-
3615
- --tds-checkbox-group-description-font-size:var(--t-font-size-sm);
3616
- --tds-checkbox-group-description-line-height:1.35;
3617
- --tds-checkbox-group-description-color:var(--t-text-color-secondary);
3618
- --tds-checkbox-group-description-invalid-icon-display:none;
3619
- display:flex;
3620
- flex-direction:column;
3621
- gap:var(--tds-checkbox-group-gap);
3622
- padding:0;
3623
- margin:0;
3624
-
3625
- font-size:var(--tds-checkbox-group-font-size);
3626
- line-height:var(--tds-checkbox-group-line-height);
3627
- border:0;
3628
- }
3629
-
3630
- .tds-checkbox-group legend{
3631
- padding:0;
3632
- margin-bottom:var(--tds-checkbox-group-legend-margin-bottom);
3633
- }
3634
-
3635
- .tds-checkbox-group:has(.tds-checkbox-group-description){
3636
- --tds-checkbox-group-legend-margin-bottom:var(--t-spacing-fourth);
3637
- }
3638
-
3639
- .tds-checkbox-group[aria-invalid="true"]{
3640
- --tds-checkbox-group-description-color:var(--t-text-color-status-error);
3641
- --tds-checkbox-group-description-invalid-icon-display:inline-block;
3642
- }
3643
-
3644
- .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) legend::after{
3645
- margin-left:.25ch;
3646
- color:var(--t-text-color-status-error);
3647
- content:"*";
3648
- }
3649
-
3650
- .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
3651
- content:none;
3652
- }
3653
-
3654
- .tds-checkbox-group-fields{
3655
- display:flex;
3656
- flex-direction:column;
3657
- gap:var(--tds-checkbox-group-gap);
3658
- align-items:flex-start;
3659
- }
3660
-
3661
- .tds-checkbox-group-description{
3662
- display:flex;
3663
- gap:var(--t-spacing-half);
3664
- align-items:flex-start;
3665
- margin:0;
3666
- font-size:var(--tds-checkbox-group-description-font-size);
3667
- line-height:var(--tds-checkbox-group-description-line-height);
3668
- color:var(--tds-checkbox-group-description-color);
3669
- cursor:text;
3670
- }
3671
-
3672
- .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
3673
- display:var(--tds-checkbox-group-description-invalid-icon-display);
3674
- flex-shrink:0;
3675
- margin-top:calc(.5lh - .5em);
3676
- line-height:var(--tds-checkbox-group-description-line-height);
3677
- }
3678
-
3679
- .tds-checkbox-group--sm{
3680
- --tds-checkbox-group-line-height:1.35;
3681
- --tds-checkbox-group-font-size:var(--t-font-size-sm);
3682
- --tds-checkbox-group-description-font-size:var(--t-font-size-xs);
3683
- --tds-checkbox-group-description-line-height:1.3;
3684
- }
3685
-
3686
3608
  .tds-date-picker{
3687
3609
  --tds-date-picker-border-color:var(--t-form-border-color);
3688
3610
  --tds-date-picker-border-color-hover:var(--t-form-border-color-hover);
@@ -4141,6 +4063,84 @@ a[class="tds-btn"]{
4141
4063
  line-height:1.35;
4142
4064
  }
4143
4065
 
4066
+ .tds-checkbox-group{
4067
+ --tds-checkbox-group-font-size:var(--t-font-size-md);
4068
+ --tds-checkbox-group-line-height:1.4;
4069
+ --tds-checkbox-group-gap:var(--t-spacing-1);
4070
+
4071
+ --tds-checkbox-group-legend-margin-bottom:var(--tds-checkbox-group-gap);
4072
+
4073
+ --tds-checkbox-group-description-font-size:var(--t-font-size-sm);
4074
+ --tds-checkbox-group-description-line-height:1.35;
4075
+ --tds-checkbox-group-description-color:var(--t-text-color-secondary);
4076
+ --tds-checkbox-group-description-invalid-icon-display:none;
4077
+ display:flex;
4078
+ flex-direction:column;
4079
+ gap:var(--tds-checkbox-group-gap);
4080
+ padding:0;
4081
+ margin:0;
4082
+
4083
+ font-size:var(--tds-checkbox-group-font-size);
4084
+ line-height:var(--tds-checkbox-group-line-height);
4085
+ border:0;
4086
+ }
4087
+
4088
+ .tds-checkbox-group legend{
4089
+ padding:0;
4090
+ margin-bottom:var(--tds-checkbox-group-legend-margin-bottom);
4091
+ }
4092
+
4093
+ .tds-checkbox-group:has(.tds-checkbox-group-description){
4094
+ --tds-checkbox-group-legend-margin-bottom:var(--t-spacing-fourth);
4095
+ }
4096
+
4097
+ .tds-checkbox-group[aria-invalid="true"]{
4098
+ --tds-checkbox-group-description-color:var(--t-text-color-status-error);
4099
+ --tds-checkbox-group-description-invalid-icon-display:inline-block;
4100
+ }
4101
+
4102
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) legend::after{
4103
+ margin-left:.25ch;
4104
+ color:var(--t-text-color-status-error);
4105
+ content:"*";
4106
+ }
4107
+
4108
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
4109
+ content:none;
4110
+ }
4111
+
4112
+ .tds-checkbox-group-fields{
4113
+ display:flex;
4114
+ flex-direction:column;
4115
+ gap:var(--tds-checkbox-group-gap);
4116
+ align-items:flex-start;
4117
+ }
4118
+
4119
+ .tds-checkbox-group-description{
4120
+ display:flex;
4121
+ gap:var(--t-spacing-half);
4122
+ align-items:flex-start;
4123
+ margin:0;
4124
+ font-size:var(--tds-checkbox-group-description-font-size);
4125
+ line-height:var(--tds-checkbox-group-description-line-height);
4126
+ color:var(--tds-checkbox-group-description-color);
4127
+ cursor:text;
4128
+ }
4129
+
4130
+ .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
4131
+ display:var(--tds-checkbox-group-description-invalid-icon-display);
4132
+ flex-shrink:0;
4133
+ margin-top:calc(.5lh - .5em);
4134
+ line-height:var(--tds-checkbox-group-description-line-height);
4135
+ }
4136
+
4137
+ .tds-checkbox-group--sm{
4138
+ --tds-checkbox-group-line-height:1.35;
4139
+ --tds-checkbox-group-font-size:var(--t-font-size-sm);
4140
+ --tds-checkbox-group-description-font-size:var(--t-font-size-xs);
4141
+ --tds-checkbox-group-description-line-height:1.3;
4142
+ }
4143
+
4144
4144
  .tds-time-field{
4145
4145
  --tds-time-field-border-color:var(--t-form-border-color);
4146
4146
  --tds-time-field-border-color-hover:var(--t-form-border-color-hover);