@planningcenter/tapestry 3.4.1-qa-928.0 → 3.4.1-rc.1

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 +803 -803
  2. package/dist/reactRender.css.map +1 -1
  3. package/dist/reactRenderLegacy.css +803 -803
  4. package/dist/reactRenderLegacy.css.map +1 -1
  5. package/package.json +5 -5
package/dist/reactRender.css CHANGED
@@ -1,196 +1,279 @@
1
- .tds-checkbox{
2
- --tds-checkbox-font-size:var(--t-font-size-md);
3
- --tds-checkbox-cursor:pointer;
4
- --tds-checkbox-line-height:1.4;
5
- --tds-checkbox-transition-property:background-color, border-color;
6
-
7
- --tds-checkbox-input-size:var(--t-element-size-md);
8
- --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
9
- --tds-checkbox-input-border-color:var(--t-form-border-color);
10
- --tds-checkbox-input-background-color:var(--t-form-background-color);
1
+ @layer t-critical{
2
+ tds-page-header:not(.hydrated){
3
+ display:none;
4
+ }
5
+ }
11
6
 
12
- --tds-checkbox-input-icon:none;
13
- --tds-checkbox-input-icon-visibility:hidden;
14
- --tds-checkbox-input-icon-opacity:0;
15
- --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
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:transparent;
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;
16
25
 
17
- --tds-checkbox-label-color:var(--t-form-color);
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-nav-item-background-color);
18
28
 
19
- --tds-checkbox-description-font-size:var(--t-font-size-sm);
20
- --tds-checkbox-description-line-height:1.35;
21
- --tds-checkbox-description-color:var(--t-text-color-secondary);
22
- --tds-checkbox-description-invalid-icon-display:none;
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);
23
32
 
24
- position:relative;
25
- display:inline-grid;
26
- grid-template-columns:auto;
27
- grid-auto-columns:1fr;
28
- gap:var(--t-spacing-fourth) 0;
29
- line-height:var(--tds-checkbox-line-height);
30
- -webkit-user-select:none;
31
- -moz-user-select:none;
32
- user-select:none;
33
- }
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);
34
35
 
35
- .tds-checkbox label{
36
- grid-area:1 / 2;
37
- padding-inline-start:var(--t-spacing-1);
38
- font-size:var(--tds-checkbox-font-size);
39
- font-weight:var(--t-font-weight-normal);
40
- color:var(--tds-checkbox-label-color);
41
- cursor:var(--tds-checkbox-cursor);
42
- }
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);
43
39
 
44
- .tds-checkbox tds-indeterminate{
45
- display:flex;
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);
46
45
  }
47
46
 
48
- .tds-checkbox input[type="checkbox"]{
49
- position:relative;
50
- width:1em;
51
- height:1em;
52
- margin:calc((1lh - 1em) / 2) 0 0;
53
- font-size:var(--tds-checkbox-font-size);
54
- line-height:inherit;
55
- -webkit-appearance:none;
56
- -moz-appearance:none;
57
- appearance:none;
58
- cursor:var(--tds-checkbox-cursor);
59
- background-color:var(--tds-checkbox-input-background-color);
60
- border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
61
- border-radius:var(--tds-checkbox-input-border-radius);
62
- transition-timing-function:var(--t-ease-in-out);
63
- transition-duration:var(--t-duration-200);
64
- transition-property:var(--tds-checkbox-transition-property);
47
+ .tds-page-header--profile{
48
+ --tds-page-header-padding-y:20px;
65
49
  }
66
50
 
67
- :is(.tds-checkbox input[type="checkbox"])::before{
68
- position:absolute;
69
- top:50%;
70
- left:50%;
71
- visibility:var(--tds-checkbox-input-icon-visibility);
72
- width:100%;
73
- height:100%;
74
- content:"";
75
- background-color:var(--tds-checkbox-input-icon-fill);
76
- border-radius:var(--tds-checkbox-input-border-radius);
77
- opacity:var(--tds-checkbox-input-icon-opacity);
78
- -webkit-mask-image:var(--tds-checkbox-input-icon);
79
- mask-image:var(--tds-checkbox-input-icon);
80
- -webkit-mask-repeat:no-repeat;
81
- mask-repeat:no-repeat;
82
- -webkit-mask-size:contain;
83
- mask-size:contain;
84
- transform:translate(-50%, -50%);
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));
85
55
  }
56
+ }
86
57
 
87
- :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
88
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
89
- --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
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-border-bottom-color:var(--tds-page-header-bottom-border-color);
72
+ --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-060);
73
+ --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-050);
74
+ --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
75
+ --tds-page-header-nav-item-border-color-selected:var(--t-border-color);
90
76
  }
77
+ }
78
+ }
91
79
 
92
- :is(.tds-checkbox input[type="checkbox"]):focus-visible{
93
- outline:var(--t-focus-ring-outline);
94
- outline-offset:var(--t-focus-ring-offset);
95
- }
80
+ .tds-page-header{
81
+ display:flex;
82
+ flex-direction:column;
83
+ padding-top:var(--tds-page-header-padding-y);
84
+ color:var(--tds-page-header-color);
85
+ background:var(--tds-page-header-background-color);
86
+ border-bottom:1px solid var(--tds-page-header-bottom-border-color);
87
+ }
96
88
 
97
- :is(.tds-checkbox input[type="checkbox"]):disabled{
98
- pointer-events:none;
99
- }
89
+ .tds-page-header:not(.has-nav){
90
+ padding-bottom:var(--tds-page-header-padding-y);
91
+ }
100
92
 
101
- @media (prefers-reduced-motion: reduce){
93
+ .tds-page-header.inactive{
94
+ background:var(--tds-page-header-background-color-inactive);
95
+ }
102
96
 
103
- .tds-checkbox input[type="checkbox"]{
104
- --tds-checkbox-transition-property:none;
97
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
98
+ width:100%;
105
99
  }
106
- }
107
100
 
108
- .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
109
- --tds-checkbox-input-background-color:var(--t-fill-color-control);
110
- --tds-checkbox-input-border-color:var(--t-border-color-control-info);
111
- --tds-checkbox-input-icon-visibility:visible;
112
- --tds-checkbox-input-icon-opacity:1;
101
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
102
+ display:flex;
103
+ flex-flow:row wrap;
104
+ gap:var(--t-spacing-half) var(--t-spacing-1);
105
+ align-items:flex-start;
106
+ justify-content:flex-start;
107
+ min-width:0;
113
108
  }
114
109
 
115
- :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
116
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
117
- --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
110
+ :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{
111
+ display:flex;
112
+ gap:var(--tds-page-header-nav-gap);
113
+ padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
114
+ margin:0 0 -1px;
115
+ overflow:auto;
116
+ list-style:none;
117
+ background:var(--tds-page-header-nav-background);
118
118
  }
119
119
 
120
- .tds-checkbox:has(input:checked){
121
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
122
- }
120
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button){
121
+ position:relative;
122
+ display:inline-flex;
123
+ padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
124
+ font-size:var(--t-font-size-sm);
125
+ line-height:22px;
126
+ color:var(--tds-page-header-nav-item-color);
127
+ white-space:nowrap;
128
+ text-decoration:none;
129
+ -webkit-appearance:none;
130
+ -moz-appearance:none;
131
+ appearance:none;
132
+ cursor:pointer;
133
+ outline-offset:-2px;
134
+ background-color:var(--tds-page-header-nav-item-background-color);
135
+ background-clip:padding-box;
136
+ border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
137
+ border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
138
+ border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
139
+ }
123
140
 
124
- .tds-checkbox:has(input:indeterminate){
125
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
126
- }
141
+ .selected:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)){
142
+ --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-selected);
143
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-selected);
144
+ --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-selected);
145
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-selected);
146
+ }
127
147
 
128
- .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
129
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
130
- --tds-checkbox-description-color:var(--t-text-color-status-error);
131
- --tds-checkbox-description-invalid-icon-display:inline-block;
132
- }
148
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):hover{
149
+ --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
150
+ --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
151
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
152
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-hover);
153
+ }
133
154
 
134
- :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
135
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
136
- --tds-checkbox-input-background-color:var(--t-form-background-color-error);
137
- }
155
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):active{
156
+ background-color:var(--tds-page-header-nav-item-background-color-active);
157
+ border-color:var(--tds-page-header-nav-item-border-color-active);
158
+ border-bottom-color:var(--tds-page-header-nav-item-background-color-active);
159
+ }
138
160
 
139
- :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:checked,:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:indeterminate{
140
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
141
- --tds-checkbox-input-background-color:var(--t-form-border-color-error);
161
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):disabled{
162
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-disabled);
163
+ color:var(--tds-page-header-nav-item-color-disabled);
164
+ cursor:not-allowed;
165
+ background-color:var(--tds-page-header-nav-item-background-color-disabled);
166
+ opacity:1;
167
+ }
168
+
169
+ @media (min-width: 600px){
170
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected)::after{
171
+ position:absolute;
172
+ inset:auto -1px -1px;
173
+ height:1px;
174
+ pointer-events:none;
175
+ content:"";
176
+ background-color:var(--tds-page-header-bottom-border-color);
177
+ }
178
+ }
179
+
180
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
181
+ position:relative;
142
182
  }
143
183
 
144
- :is(:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:checked,:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:indeterminate):hover:not(:disabled){
145
- --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
146
- --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
184
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator)) :is(a,button){
185
+ -webkit-mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
186
+ mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
147
187
  }
148
188
 
149
- .tds-checkbox:has(input:required) label::after{
150
- margin-left:.25ch;
151
- color:var(--t-text-color-status-error);
152
- content:"*";
153
- }
189
+ :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{
190
+ position:absolute;
191
+ top:-5px;
192
+ right:-2px;
193
+ width:10px;
194
+ height:10px;
195
+ content:"";
196
+ background:var(--tds-page-header-nav-item-indicator-color);
197
+ border-radius:50%;
198
+ }
154
199
 
155
- .tds-checkbox:has(input:disabled){
156
- --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
157
- --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
200
+ @media (prefers-reduced-motion: no-preference){
201
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
202
+ animation:indicator-pulse 1.25s ease infinite;
203
+ }
204
+ }
205
+
206
+ .tds-page-header__title-bar{
207
+ display:flex;
208
+ flex-direction:column;
209
+ gap:var(--t-spacing-2) var(--t-spacing-1);
210
+ align-items:flex-start;
211
+ justify-content:space-between;
212
+ padding:0 var(--tds-page-header-padding-x);
213
+ }
214
+
215
+ .tds-page-header--profile > .tds-page-header__title-bar{
216
+ align-items:center;
217
+ }
218
+
219
+ .tds-page-header__primary{
220
+ width:100%;
221
+ }
222
+
223
+ .tds-page-header__primary h1{
224
+ margin:0;
225
+ font-size:var(--tds-page-header-headline-font-size);
226
+ font-weight:var(--t-font-weight-normal);
227
+ line-height:32px;
228
+ color:var(--tds-page-header-headline-color);
229
+ overflow-wrap:break-word;
230
+ }
231
+
232
+ @media (min-width: 960px){
233
+ .tds-page-header__primary{
234
+ flex:1 1 max-content;
235
+ width:auto;
236
+ min-width:0;
237
+ max-width:100%;
238
+ }
158
239
 
159
- --tds-checkbox-label-color:var(--t-form-color-disabled);
160
- --tds-checkbox-description-color:var(--t-form-color-disabled);
161
- --tds-checkbox-cursor:not-allowed;
240
+ .tds-page-header__title-bar,
241
+ .tds-page-header--profile .tds-page-header__title-bar{
242
+ flex-flow:row nowrap;
243
+ row-gap:12px;
244
+ align-items:flex-start;
162
245
  }
246
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
247
+ width:auto;
248
+ }
163
249
 
164
- .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
165
- --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
250
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
251
+ justify-content:flex-end;
166
252
  }
253
+ }
167
254
 
168
- .tds-checkbox-description{
169
- display:flex;
170
- grid-area:2 / 2;
171
- gap:var(--t-spacing-half);
172
- align-items:flex-start;
173
- padding-inline-start:var(--t-spacing-1);
174
- margin:0;
175
- font-size:var(--tds-checkbox-description-font-size);
176
- line-height:var(--tds-checkbox-description-line-height);
177
- color:var(--tds-checkbox-description-color);
178
- cursor:text;
255
+ .tds-page-header-phone,
256
+ .tds-page-header-email{
257
+ color:var(--tds-page-header-color);
258
+ white-space:nowrap;
179
259
  }
180
260
 
181
- .tds-checkbox-description .tds-checkbox-description-invalid-icon{
182
- display:var(--tds-checkbox-description-invalid-icon-display);
183
- flex-shrink:0;
184
- margin-top:calc(.5lh - .5em);
185
- line-height:var(--tds-checkbox-description-line-height);
261
+ .tds-page-header-email{
262
+ max-width:100%;
263
+ overflow:hidden;
264
+ text-overflow:ellipsis;
265
+ }
266
+
267
+ @keyframes indicator-pulse{
268
+ 0%{
269
+ opacity:.3;
270
+ transform:scale(.9);
186
271
  }
187
272
 
188
- .tds-checkbox--sm{
189
- --tds-checkbox-line-height:1.35;
190
- --tds-checkbox-input-size:var(--t-element-size-sm);
191
- --tds-checkbox-font-size:var(--t-font-size-sm);
192
- --tds-checkbox-description-font-size:var(--t-font-size-xs);
193
- --tds-checkbox-description-line-height:1.3;
273
+ 100%{
274
+ opacity:0;
275
+ transform:scale(1.75);
276
+ }
194
277
  }
195
278
 
196
279
 
@@ -429,432 +512,204 @@
429
512
  z-index:-1;
430
513
  height:100%;
431
514
  content:"";
432
- background-color:var(--tds-sidenav-item-nested-background);
433
- border-radius:0 var(--t-border-radius) var(--t-border-radius) 0;
434
- transition:var(--tds-sidenav-item-transition);
435
- }
436
-
437
- :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)){
438
- display:block;
439
- text-align:left;
440
- white-space:normal;
441
- }
442
-
443
- :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{
444
- --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-hover);
445
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-hover);
446
- }
447
-
448
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):active{
449
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-active);
450
- }
451
-
452
- .selected:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
453
- --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-selected);
454
- font-weight:var(--t-font-weight-medium);
455
- }
456
-
457
- .tds-sidenav-responsive-header{
458
- display:flex;
459
- gap:var(--t-spacing-2);
460
- align-items:center;
461
- width:100%;
462
- }
463
-
464
- .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle{
465
- order:0;
466
- }
467
-
468
- .tds-sidenav-responsive-header .tds-sidenav-responsive-header-label{
469
- flex:1;
470
- order:1;
471
- margin:0;
472
- font-size:var(--t-font-size-lg);
473
- font-weight:var(--t-font-weight-medium);
474
- color:var(--t-text-color-headline);
475
- }
476
-
477
- @media (max-width: 719px){
478
- .tds-sidenav-collapse{
479
- z-index:10001;
480
- display:none;
481
- max-width:min(448px, calc(100vw - 48px));
482
- padding:0;
483
- margin:12px 0;
484
- position-area:bottom span-right;
485
- overflow:hidden;
486
- outline:0;
487
- background:var(--t-surface-color-card);
488
- border:0;
489
- border-radius:6px;
490
- box-shadow:0 8px 20px 0 rgba(0, 0, 0, .25);
491
- opacity:var(--tds-sidenav-collapse-open-opacity);
492
- transform:var(--tds-sidenav-collapse-open-transform);
493
- transition:var(--tds-sidenav-collapse-transition-enter);
494
- will-change:transform;
495
- }
496
-
497
- .tds-sidenav-scroll-container{
498
- --webkit-overflow-scrolling:touch;
499
- display:block;
500
- width:100%;
501
- height:-moz-fit-content;
502
- height:fit-content;
503
- padding:var(--t-spacing-2);
504
- overflow-y:auto;
505
- }
506
-
507
- .tds-sidenav-item :is(a, button) :is(.prefix){
508
- display:none;
509
- }
510
- @supports selector(:popover-open){
511
- .tds-sidenav-collapse:popover-open{
512
- display:flex;
513
- }
514
-
515
- .tds-sidenav-collapse:not(:popover-open){
516
- opacity:var(--tds-sidenav-collapse-closed-opacity);
517
- transition:var(--tds-sidenav-collapse-transition-exit);
518
- }
519
-
520
- @starting-style{
521
- .tds-sidenav-collapse:popover-open{
522
- opacity:var(--tds-sidenav-collapse-closed-opacity);
523
- transform:var(--tds-sidenav-collapse-closed-transform);
524
- }
525
- }
526
- }
527
- @supports not selector(:popover-open){
528
- .tds-sidenav-collapse.\:popover-open{
529
- display:flex;
530
- }
531
-
532
- .tds-sidenav-collapse:not(.\:popover-open){
533
- opacity:var(--tds-sidenav-collapse-closed-opacity);
534
- transition:var(--tds-sidenav-collapse-transition-exit);
535
- }
536
- }
537
- }
538
-
539
- @media (min-width: 720px){
540
- .tds-sidenav-responsive-header{
541
- display:none;
542
- }
543
- }
544
-
545
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
546
- display:none;
547
- }
548
-
549
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
550
- display:block;
551
- }
552
-
553
- tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
554
- display:flex;
555
- flex-direction:column;
556
- }
557
-
558
-
559
- :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{
560
- -webkit-appearance:none;
561
- appearance:none;
562
- }
563
-
564
- [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
565
- inline-size:1em;
566
- block-size:2em;
567
- }
568
-
569
- @supports (field-sizing: content){
570
- .tds-input--auto-width{
571
- inline-size:-moz-fit-content;
572
- inline-size:fit-content;
573
- min-inline-size:min(100%, 122px);
574
- }
575
-
576
- .tds-input--auto-width input{
577
- field-sizing:content;
578
- inline-size:auto;
579
- }
580
- }
581
-
582
- @layer t-critical{
583
- tds-page-header:not(.hydrated){
584
- display:none;
585
- }
586
- }
587
-
588
- @layer t-component{
589
- .tds-page-header{
590
- --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
591
- --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
592
- --tds-page-header-color:var(--t-text-color);
593
- --tds-page-header-bottom-border-color:transparent;
594
- --tds-page-header-headline-color:var(--t-text-color-headline);
595
- --tds-page-header-headline-font-size:var(--t-font-size-2xl);
596
- --tds-page-header-padding-x:var(--t-spacing-2);
597
- --tds-page-header-padding-y:var(--t-spacing-2);
598
- --tds-page-header-nav-padding-x:var(--tds-page-header-padding-x, var(--t-spacing-3));
599
- --tds-page-header-nav-gap:var(--t-spacing-1);
600
- --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%);
601
- --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
602
- --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
603
- --tds-page-header-nav-item-color:var(--t-text-color-secondary);
604
- --tds-page-header-nav-item-background-color:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 35%);
605
- --tds-page-header-nav-item-border-width:1px;
606
-
607
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
608
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color);
609
-
610
- --tds-page-header-nav-item-color-hover:var(--t-text-color);
611
- --tds-page-header-nav-item-background-color-hover:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 20%);
612
- --tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
613
-
614
- --tds-page-header-nav-item-background-color-active:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 10%);
615
- --tds-page-header-nav-item-border-color-active:var(--tds-page-header-nav-item-background-color-active);
616
-
617
- --tds-page-header-nav-item-color-disabled:var(--t-text-color-disabled);
618
- --tds-page-header-nav-item-background-color-disabled:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 50%);
619
- --tds-page-header-nav-item-border-color-disabled:var(--tds-page-header-nav-item-background-color-disabled);
620
-
621
- --tds-page-header-nav-item-color-selected:var(--t-text-color);
622
- --tds-page-header-nav-item-background-color-selected:var(--t-surface-color-canvas);
623
- --tds-page-header-nav-item-border-color-selected:var(--tds-page-header-nav-item-background-color-selected);
624
- --tds-page-header-nav-item-border-bottom-color-selected:var(--tds-page-header-nav-item-background-color-selected);
625
- --tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning);
626
- }
515
+ background-color:var(--tds-sidenav-item-nested-background);
516
+ border-radius:0 var(--t-border-radius) var(--t-border-radius) 0;
517
+ transition:var(--tds-sidenav-item-transition);
518
+ }
627
519
 
628
- .tds-page-header--profile{
629
- --tds-page-header-padding-y:20px;
630
- }
520
+ :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)){
521
+ display:block;
522
+ text-align:left;
523
+ white-space:normal;
524
+ }
631
525
 
632
- @supports (color: light-dark(#fff, #000)){
633
- .tds-page-header{
634
- --tds-page-header-nav-background-start:light-dark(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0));
635
- --tds-page-header-nav-background-end:light-dark(rgba(0, 0, 0, .05), rgba(255, 255, 255, .1));
636
- }
637
- }
526
+ :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{
527
+ --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-hover);
528
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-hover);
529
+ }
638
530
 
639
- @media (min-width: 600px){
640
- .tds-page-header{
641
- --tds-page-header-background-color:var(--t-surface-color-canvas);
642
- --tds-page-header-color:var(--t-text-color-secondary);
643
- --tds-page-header-bottom-border-color:var(--t-border-color);
644
- --tds-page-header-padding-x:var(--t-spacing-3);
645
- --tds-page-header-headline-font-size:var(--t-font-size-3xl);
646
- --tds-page-header-nav-gap:var(--t-spacing-half);
647
- --tds-page-header-nav-background:transparent;
648
- --tds-page-header-nav-item-padding-x:var(--t-spacing-2);
649
- --tds-page-header-nav-item-border-width:1px;
650
- --tds-page-header-nav-item-color:var(--t-text-color);
651
- --tds-page-header-nav-item-background-color:var(--t-fill-color-neutral-070);
652
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-bottom-border-color);
653
- --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-060);
654
- --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-050);
655
- --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
656
- --tds-page-header-nav-item-border-color-selected:var(--t-border-color);
531
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):active{
532
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-active);
533
+ }
534
+
535
+ .selected:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
536
+ --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-selected);
537
+ font-weight:var(--t-font-weight-medium);
657
538
  }
658
- }
659
- }
660
539
 
661
- .tds-page-header{
540
+ .tds-sidenav-responsive-header{
662
541
  display:flex;
663
- flex-direction:column;
664
- padding-top:var(--tds-page-header-padding-y);
665
- color:var(--tds-page-header-color);
666
- background:var(--tds-page-header-background-color);
667
- border-bottom:1px solid var(--tds-page-header-bottom-border-color);
542
+ gap:var(--t-spacing-2);
543
+ align-items:center;
544
+ width:100%;
668
545
  }
669
546
 
670
- .tds-page-header:not(.has-nav){
671
- padding-bottom:var(--tds-page-header-padding-y);
547
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle{
548
+ order:0;
672
549
  }
673
550
 
674
- .tds-page-header.inactive{
675
- background:var(--tds-page-header-background-color-inactive);
551
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-label{
552
+ flex:1;
553
+ order:1;
554
+ margin:0;
555
+ font-size:var(--t-font-size-lg);
556
+ font-weight:var(--t-font-weight-medium);
557
+ color:var(--t-text-color-headline);
676
558
  }
677
559
 
678
- .tds-page-header :is([slot="actions"],.tds-page-header__actions){
679
- width:100%;
560
+ @media (max-width: 719px){
561
+ .tds-sidenav-collapse{
562
+ z-index:10001;
563
+ display:none;
564
+ max-width:min(448px, calc(100vw - 48px));
565
+ padding:0;
566
+ margin:12px 0;
567
+ position-area:bottom span-right;
568
+ overflow:hidden;
569
+ outline:0;
570
+ background:var(--t-surface-color-card);
571
+ border:0;
572
+ border-radius:6px;
573
+ box-shadow:0 8px 20px 0 rgba(0, 0, 0, .25);
574
+ opacity:var(--tds-sidenav-collapse-open-opacity);
575
+ transform:var(--tds-sidenav-collapse-open-transform);
576
+ transition:var(--tds-sidenav-collapse-transition-enter);
577
+ will-change:transform;
680
578
  }
681
579
 
682
- .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
683
- display:flex;
684
- flex-flow:row wrap;
685
- gap:var(--t-spacing-half) var(--t-spacing-1);
686
- align-items:flex-start;
687
- justify-content:flex-start;
688
- min-width:0;
580
+ .tds-sidenav-scroll-container{
581
+ --webkit-overflow-scrolling:touch;
582
+ display:block;
583
+ width:100%;
584
+ height:-moz-fit-content;
585
+ height:fit-content;
586
+ padding:var(--t-spacing-2);
587
+ overflow-y:auto;
689
588
  }
690
589
 
691
- :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{
590
+ .tds-sidenav-item :is(a, button) :is(.prefix){
591
+ display:none;
592
+ }
593
+ @supports selector(:popover-open){
594
+ .tds-sidenav-collapse:popover-open{
692
595
  display:flex;
693
- gap:var(--tds-page-header-nav-gap);
694
- padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
695
- margin:0 0 -1px;
696
- overflow:auto;
697
- list-style:none;
698
- background:var(--tds-page-header-nav-background);
699
596
  }
700
597
 
701
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button){
702
- position:relative;
703
- display:inline-flex;
704
- padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
705
- font-size:var(--t-font-size-sm);
706
- line-height:22px;
707
- color:var(--tds-page-header-nav-item-color);
708
- white-space:nowrap;
709
- text-decoration:none;
710
- -webkit-appearance:none;
711
- -moz-appearance:none;
712
- appearance:none;
713
- cursor:pointer;
714
- outline-offset:-2px;
715
- background-color:var(--tds-page-header-nav-item-background-color);
716
- background-clip:padding-box;
717
- border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
718
- border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
719
- border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
598
+ .tds-sidenav-collapse:not(:popover-open){
599
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
600
+ transition:var(--tds-sidenav-collapse-transition-exit);
720
601
  }
721
602
 
722
- .selected:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)){
723
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-selected);
724
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-selected);
725
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-selected);
726
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-selected);
603
+ @starting-style{
604
+ .tds-sidenav-collapse:popover-open{
605
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
606
+ transform:var(--tds-sidenav-collapse-closed-transform);
727
607
  }
608
+ }
609
+ }
610
+ @supports not selector(:popover-open){
611
+ .tds-sidenav-collapse.\:popover-open{
612
+ display:flex;
613
+ }
728
614
 
729
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):hover{
730
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
731
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
732
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
733
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-hover);
734
- }
735
-
736
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):active{
737
- background-color:var(--tds-page-header-nav-item-background-color-active);
738
- border-color:var(--tds-page-header-nav-item-border-color-active);
739
- border-bottom-color:var(--tds-page-header-nav-item-background-color-active);
740
- }
741
-
742
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):disabled{
743
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-disabled);
744
- color:var(--tds-page-header-nav-item-color-disabled);
745
- cursor:not-allowed;
746
- background-color:var(--tds-page-header-nav-item-background-color-disabled);
747
- opacity:1;
748
- }
615
+ .tds-sidenav-collapse:not(.\:popover-open){
616
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
617
+ transition:var(--tds-sidenav-collapse-transition-exit);
618
+ }
619
+ }
620
+ }
749
621
 
750
- @media (min-width: 600px){
751
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected)::after{
752
- position:absolute;
753
- inset:auto -1px -1px;
754
- height:1px;
755
- pointer-events:none;
756
- content:"";
757
- background-color:var(--tds-page-header-bottom-border-color);
758
- }
759
- }
622
+ @media (min-width: 720px){
623
+ .tds-sidenav-responsive-header{
624
+ display:none;
625
+ }
626
+ }
760
627
 
761
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
762
- position:relative;
628
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
629
+ display:none;
763
630
  }
764
631
 
765
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator)) :is(a,button){
766
- -webkit-mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
767
- mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
768
- }
632
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
633
+ display:block;
634
+ }
769
635
 
770
- :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{
771
- position:absolute;
772
- top:-5px;
773
- right:-2px;
774
- width:10px;
775
- height:10px;
776
- content:"";
777
- background:var(--tds-page-header-nav-item-indicator-color);
778
- border-radius:50%;
779
- }
636
+ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
637
+ display:flex;
638
+ flex-direction:column;
639
+ }
780
640
 
781
- @media (prefers-reduced-motion: no-preference){
782
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
783
- animation:indicator-pulse 1.25s ease infinite;
784
- }
785
- }
641
+ .tds-checkbox-group{
642
+ --tds-checkbox-group-font-size:var(--t-font-size-md);
643
+ --tds-checkbox-group-line-height:1.4;
644
+ --tds-checkbox-group-gap:var(--t-spacing-1);
786
645
 
787
- .tds-page-header__title-bar{
646
+ --tds-checkbox-group-description-font-size:var(--t-font-size-sm);
647
+ --tds-checkbox-group-description-line-height:1.35;
648
+ --tds-checkbox-group-description-color:var(--t-text-color-secondary);
649
+ --tds-checkbox-group-description-invalid-icon-display:none;
788
650
  display:flex;
789
651
  flex-direction:column;
790
- gap:var(--t-spacing-2) var(--t-spacing-1);
791
- align-items:flex-start;
792
- justify-content:space-between;
793
- padding:0 var(--tds-page-header-padding-x);
794
- }
795
-
796
- .tds-page-header--profile > .tds-page-header__title-bar{
797
- align-items:center;
798
- }
652
+ gap:0;
653
+ padding:0;
654
+ margin:0;
799
655
 
800
- .tds-page-header__primary{
801
- width:100%;
656
+ font-size:var(--tds-checkbox-group-font-size);
657
+ line-height:var(--tds-checkbox-group-line-height);
658
+ border:0;
802
659
  }
803
660
 
804
- .tds-page-header__primary h1{
661
+ .tds-checkbox-group legend{
662
+ float:left;
663
+ padding:0;
805
664
  margin:0;
806
- font-size:var(--tds-page-header-headline-font-size);
807
- font-weight:var(--t-font-weight-normal);
808
- line-height:32px;
809
- color:var(--tds-page-header-headline-color);
810
- overflow-wrap:break-word;
811
665
  }
812
666
 
813
- @media (min-width: 960px){
814
- .tds-page-header__primary{
815
- flex:1 1 max-content;
816
- width:auto;
817
- min-width:0;
818
- max-width:100%;
667
+ .tds-checkbox-group[aria-invalid="true"]{
668
+ --tds-checkbox-group-description-color:var(--t-text-color-status-error);
669
+ --tds-checkbox-group-description-invalid-icon-display:inline-block;
819
670
  }
820
671
 
821
- .tds-page-header__title-bar,
822
- .tds-page-header--profile .tds-page-header__title-bar{
823
- flex-flow:row nowrap;
824
- row-gap:12px;
825
- align-items:flex-start;
826
- }
827
- .tds-page-header :is([slot="actions"],.tds-page-header__actions){
828
- width:auto;
672
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) legend::after{
673
+ margin-left:.25ch;
674
+ color:var(--t-text-color-status-error);
675
+ content:"*";
829
676
  }
830
677
 
831
- .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
832
- justify-content:flex-end;
678
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
679
+ content:none;
833
680
  }
834
- }
835
681
 
836
- .tds-page-header-phone,
837
- .tds-page-header-email{
838
- color:var(--tds-page-header-color);
839
- white-space:nowrap;
682
+ .tds-checkbox-group-fields{
683
+ display:flex;
684
+ flex-direction:column;
685
+ gap:var(--tds-checkbox-group-gap);
686
+ align-items:flex-start;
687
+ margin-top:var(--t-spacing-1);
840
688
  }
841
689
 
842
- .tds-page-header-email{
843
- max-width:100%;
844
- overflow:hidden;
845
- text-overflow:ellipsis;
690
+ .tds-checkbox-group-description{
691
+ display:flex;
692
+ gap:var(--t-spacing-half);
693
+ align-items:flex-start;
694
+ margin:var(--t-spacing-fourth) 0 0;
695
+ font-size:var(--tds-checkbox-group-description-font-size);
696
+ line-height:var(--tds-checkbox-group-description-line-height);
697
+ color:var(--tds-checkbox-group-description-color);
698
+ cursor:text;
846
699
  }
847
700
 
848
- @keyframes indicator-pulse{
849
- 0%{
850
- opacity:.3;
851
- transform:scale(.9);
701
+ .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
702
+ display:var(--tds-checkbox-group-description-invalid-icon-display);
703
+ flex-shrink:0;
704
+ margin-top:calc(.5lh - .5em);
705
+ line-height:var(--tds-checkbox-group-description-line-height);
852
706
  }
853
707
 
854
- 100%{
855
- opacity:0;
856
- transform:scale(1.75);
857
- }
708
+ .tds-checkbox-group--sm{
709
+ --tds-checkbox-group-line-height:1.35;
710
+ --tds-checkbox-group-font-size:var(--t-font-size-sm);
711
+ --tds-checkbox-group-description-font-size:var(--t-font-size-xs);
712
+ --tds-checkbox-group-description-line-height:1.3;
858
713
  }
859
714
 
860
715
  .tds-combo-box{
@@ -966,153 +821,325 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
966
821
  .tds-combo-box-button > svg{
967
822
  transition:none;
968
823
  }
969
- }
970
-
971
- .tds-combo-box-list{
972
- padding:0;
973
- margin:0;
974
- }
824
+ }
825
+
826
+ .tds-combo-box-list{
827
+ padding:0;
828
+ margin:0;
829
+ }
830
+
831
+ .tds-combo-box-list-item{
832
+ display:block;
833
+ padding-block:var(--t-spacing-1);
834
+ padding-inline:var(--t-spacing-2) var(--t-spacing-1);
835
+ overflow:hidden;
836
+ text-overflow:ellipsis;
837
+ font-size:1rem;
838
+ color:var(--t-text-color);
839
+ white-space:nowrap;
840
+ cursor:default;
841
+ border-radius:var(--t-border-radius);
842
+ }
843
+
844
+ .tds-combo-box-list-item[data-hovered]:not([data-disabled]),.tds-combo-box-list-item[data-focus-visible]{
845
+ background:var(--t-fill-color-neutral-070);
846
+ }
847
+
848
+ .tds-combo-box-list-item[data-selected]{
849
+ background:var(--t-fill-color-button-interaction-ghost-active);
850
+ }
851
+
852
+ .tds-combo-box-list-item[data-pressed]:not([data-disabled]){
853
+ background:var(--t-fill-color-neutral-060);
854
+ }
855
+
856
+ .tds-combo-box-list-item[data-disabled]{
857
+ color:var(--t-form-color-disabled);
858
+ cursor:not-allowed;
859
+ }
860
+
861
+ .tds-combo-box-list-item[data-disabled][data-hovered]{
862
+ background:transparent;
863
+ }
864
+
865
+ .tds-combo-box-empty-state{
866
+ position:relative;
867
+ min-block-size:var(--t-spacing-3);
868
+ padding-block:var(--t-spacing-1);
869
+ padding-inline:var(--t-spacing-2);
870
+ font-size:var(--t-font-size-md);
871
+ color:var(--t-text-color-secondary);
872
+ }
873
+
874
+ .tds-combo-box-load-more{
875
+ position:relative;
876
+ min-block-size:calc(var(--t-spacing-3) + var(--t-spacing-1));
877
+ }
878
+
879
+ .tds-combo-box-empty-state,
880
+ .tds-combo-box-load-more{
881
+ --tds-loading-spinner-visibility:visible;
882
+ --tds-loading-spinner-animation-play-state:running;
883
+ }
884
+
885
+ .tds-combo-box-list-section:not(:first-child){
886
+ margin-block-start:var(--t-spacing-half);
887
+ }
888
+
889
+ .tds-combo-box-section-header{
890
+ padding-block:var(--t-spacing-1);
891
+ padding-inline:var(--t-spacing-1);
892
+ font-size:var(--t-font-size-sm);
893
+ font-weight:var(--t-font-weight-semibold);
894
+ color:var(--t-text-color-secondary);
895
+ }
896
+
897
+ .tds-checkbox{
898
+ --tds-checkbox-font-size:var(--t-font-size-md);
899
+ --tds-checkbox-cursor:pointer;
900
+ --tds-checkbox-line-height:1.4;
901
+ --tds-checkbox-transition-property:background-color, border-color;
902
+
903
+ --tds-checkbox-input-size:var(--t-element-size-md);
904
+ --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
905
+ --tds-checkbox-input-border-color:var(--t-form-border-color);
906
+ --tds-checkbox-input-background-color:var(--t-form-background-color);
907
+
908
+ --tds-checkbox-input-icon:none;
909
+ --tds-checkbox-input-icon-visibility:hidden;
910
+ --tds-checkbox-input-icon-opacity:0;
911
+ --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
912
+
913
+ --tds-checkbox-label-color:var(--t-form-color);
914
+
915
+ --tds-checkbox-description-font-size:var(--t-font-size-sm);
916
+ --tds-checkbox-description-line-height:1.35;
917
+ --tds-checkbox-description-color:var(--t-text-color-secondary);
918
+ --tds-checkbox-description-invalid-icon-display:none;
919
+
920
+ position:relative;
921
+ display:inline-grid;
922
+ grid-template-columns:auto;
923
+ grid-auto-columns:1fr;
924
+ gap:var(--t-spacing-fourth) 0;
925
+ line-height:var(--tds-checkbox-line-height);
926
+ -webkit-user-select:none;
927
+ -moz-user-select:none;
928
+ user-select:none;
929
+ }
930
+
931
+ .tds-checkbox label{
932
+ grid-area:1 / 2;
933
+ padding-inline-start:var(--t-spacing-1);
934
+ font-size:var(--tds-checkbox-font-size);
935
+ font-weight:var(--t-font-weight-normal);
936
+ color:var(--tds-checkbox-label-color);
937
+ cursor:var(--tds-checkbox-cursor);
938
+ }
939
+
940
+ .tds-checkbox tds-indeterminate{
941
+ display:flex;
942
+ }
943
+
944
+ .tds-checkbox input[type="checkbox"]{
945
+ position:relative;
946
+ width:1em;
947
+ height:1em;
948
+ margin:calc((1lh - 1em) / 2) 0 0;
949
+ font-size:var(--tds-checkbox-font-size);
950
+ line-height:inherit;
951
+ -webkit-appearance:none;
952
+ -moz-appearance:none;
953
+ appearance:none;
954
+ cursor:var(--tds-checkbox-cursor);
955
+ background-color:var(--tds-checkbox-input-background-color);
956
+ border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
957
+ border-radius:var(--tds-checkbox-input-border-radius);
958
+ transition-timing-function:var(--t-ease-in-out);
959
+ transition-duration:var(--t-duration-200);
960
+ transition-property:var(--tds-checkbox-transition-property);
961
+ }
962
+
963
+ :is(.tds-checkbox input[type="checkbox"])::before{
964
+ position:absolute;
965
+ top:50%;
966
+ left:50%;
967
+ visibility:var(--tds-checkbox-input-icon-visibility);
968
+ width:100%;
969
+ height:100%;
970
+ content:"";
971
+ background-color:var(--tds-checkbox-input-icon-fill);
972
+ border-radius:var(--tds-checkbox-input-border-radius);
973
+ opacity:var(--tds-checkbox-input-icon-opacity);
974
+ -webkit-mask-image:var(--tds-checkbox-input-icon);
975
+ mask-image:var(--tds-checkbox-input-icon);
976
+ -webkit-mask-repeat:no-repeat;
977
+ mask-repeat:no-repeat;
978
+ -webkit-mask-size:contain;
979
+ mask-size:contain;
980
+ transform:translate(-50%, -50%);
981
+ }
982
+
983
+ :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
984
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
985
+ --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
986
+ }
987
+
988
+ :is(.tds-checkbox input[type="checkbox"]):focus-visible{
989
+ outline:var(--t-focus-ring-outline);
990
+ outline-offset:var(--t-focus-ring-offset);
991
+ }
992
+
993
+ :is(.tds-checkbox input[type="checkbox"]):disabled{
994
+ pointer-events:none;
995
+ }
996
+
997
+ @media (prefers-reduced-motion: reduce){
998
+
999
+ .tds-checkbox input[type="checkbox"]{
1000
+ --tds-checkbox-transition-property:none;
1001
+ }
1002
+ }
1003
+
1004
+ .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
1005
+ --tds-checkbox-input-background-color:var(--t-fill-color-control);
1006
+ --tds-checkbox-input-border-color:var(--t-border-color-control-info);
1007
+ --tds-checkbox-input-icon-visibility:visible;
1008
+ --tds-checkbox-input-icon-opacity:1;
1009
+ }
975
1010
 
976
- .tds-combo-box-list-item{
977
- display:block;
978
- padding-block:var(--t-spacing-1);
979
- padding-inline:var(--t-spacing-2) var(--t-spacing-1);
980
- overflow:hidden;
981
- text-overflow:ellipsis;
982
- font-size:1rem;
983
- color:var(--t-text-color);
984
- white-space:nowrap;
985
- cursor:default;
986
- border-radius:var(--t-border-radius);
987
- }
1011
+ :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
1012
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
1013
+ --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
1014
+ }
988
1015
 
989
- .tds-combo-box-list-item[data-hovered]:not([data-disabled]),.tds-combo-box-list-item[data-focus-visible]{
990
- background:var(--t-fill-color-neutral-070);
1016
+ .tds-checkbox:has(input:checked){
1017
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
991
1018
  }
992
1019
 
993
- .tds-combo-box-list-item[data-selected]{
994
- background:var(--t-fill-color-button-interaction-ghost-active);
1020
+ .tds-checkbox:has(input:indeterminate){
1021
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
995
1022
  }
996
1023
 
997
- .tds-combo-box-list-item[data-pressed]:not([data-disabled]){
998
- background:var(--t-fill-color-neutral-060);
1024
+ .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
1025
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1026
+ --tds-checkbox-description-color:var(--t-text-color-status-error);
1027
+ --tds-checkbox-description-invalid-icon-display:inline-block;
999
1028
  }
1000
1029
 
1001
- .tds-combo-box-list-item[data-disabled]{
1002
- color:var(--t-form-color-disabled);
1003
- cursor:not-allowed;
1004
- }
1030
+ :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
1031
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1032
+ --tds-checkbox-input-background-color:var(--t-form-background-color-error);
1033
+ }
1005
1034
 
1006
- .tds-combo-box-list-item[data-disabled][data-hovered]{
1007
- background:transparent;
1035
+ :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:checked,:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:indeterminate{
1036
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1037
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error);
1008
1038
  }
1009
1039
 
1010
- .tds-combo-box-empty-state{
1011
- position:relative;
1012
- min-block-size:var(--t-spacing-3);
1013
- padding-block:var(--t-spacing-1);
1014
- padding-inline:var(--t-spacing-2);
1015
- font-size:var(--t-font-size-md);
1016
- color:var(--t-text-color-secondary);
1017
- }
1040
+ :is(:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:checked,:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:indeterminate):hover:not(:disabled){
1041
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
1042
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
1043
+ }
1018
1044
 
1019
- .tds-combo-box-load-more{
1020
- position:relative;
1021
- min-block-size:calc(var(--t-spacing-3) + var(--t-spacing-1));
1022
- }
1045
+ .tds-checkbox:has(input:required) label::after{
1046
+ margin-left:.25ch;
1047
+ color:var(--t-text-color-status-error);
1048
+ content:"*";
1049
+ }
1023
1050
 
1024
- .tds-combo-box-empty-state,
1025
- .tds-combo-box-load-more{
1026
- --tds-loading-spinner-visibility:visible;
1027
- --tds-loading-spinner-animation-play-state:running;
1028
- }
1051
+ .tds-checkbox:has(input:disabled){
1052
+ --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
1053
+ --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
1029
1054
 
1030
- .tds-combo-box-list-section:not(:first-child){
1031
- margin-block-start:var(--t-spacing-half);
1055
+ --tds-checkbox-label-color:var(--t-form-color-disabled);
1056
+ --tds-checkbox-description-color:var(--t-form-color-disabled);
1057
+ --tds-checkbox-cursor:not-allowed;
1032
1058
  }
1033
1059
 
1034
- .tds-combo-box-section-header{
1035
- padding-block:var(--t-spacing-1);
1036
- padding-inline:var(--t-spacing-1);
1037
- font-size:var(--t-font-size-sm);
1038
- font-weight:var(--t-font-weight-semibold);
1039
- color:var(--t-text-color-secondary);
1040
- }
1041
-
1042
- .tds-checkbox-group{
1043
- --tds-checkbox-group-font-size:var(--t-font-size-md);
1044
- --tds-checkbox-group-line-height:1.4;
1045
- --tds-checkbox-group-gap:var(--t-spacing-1);
1060
+ .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
1061
+ --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
1062
+ }
1046
1063
 
1047
- --tds-checkbox-group-description-font-size:var(--t-font-size-sm);
1048
- --tds-checkbox-group-description-line-height:1.35;
1049
- --tds-checkbox-group-description-color:var(--t-text-color-secondary);
1050
- --tds-checkbox-group-description-invalid-icon-display:none;
1064
+ .tds-checkbox-description{
1051
1065
  display:flex;
1052
- flex-direction:column;
1053
- gap:0;
1054
- padding:0;
1066
+ grid-area:2 / 2;
1067
+ gap:var(--t-spacing-half);
1068
+ align-items:flex-start;
1069
+ padding-inline-start:var(--t-spacing-1);
1055
1070
  margin:0;
1056
-
1057
- font-size:var(--tds-checkbox-group-font-size);
1058
- line-height:var(--tds-checkbox-group-line-height);
1059
- border:0;
1071
+ font-size:var(--tds-checkbox-description-font-size);
1072
+ line-height:var(--tds-checkbox-description-line-height);
1073
+ color:var(--tds-checkbox-description-color);
1074
+ cursor:text;
1060
1075
  }
1061
1076
 
1062
- .tds-checkbox-group legend{
1063
- float:left;
1064
- padding:0;
1065
- margin:0;
1077
+ .tds-checkbox-description .tds-checkbox-description-invalid-icon{
1078
+ display:var(--tds-checkbox-description-invalid-icon-display);
1079
+ flex-shrink:0;
1080
+ margin-top:calc(.5lh - .5em);
1081
+ line-height:var(--tds-checkbox-description-line-height);
1066
1082
  }
1067
1083
 
1068
- .tds-checkbox-group[aria-invalid="true"]{
1069
- --tds-checkbox-group-description-color:var(--t-text-color-status-error);
1070
- --tds-checkbox-group-description-invalid-icon-display:inline-block;
1071
- }
1084
+ .tds-checkbox--sm{
1085
+ --tds-checkbox-line-height:1.35;
1086
+ --tds-checkbox-input-size:var(--t-element-size-sm);
1087
+ --tds-checkbox-font-size:var(--t-font-size-sm);
1088
+ --tds-checkbox-description-font-size:var(--t-font-size-xs);
1089
+ --tds-checkbox-description-line-height:1.3;
1090
+ }
1072
1091
 
1073
- .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) legend::after{
1074
- margin-left:.25ch;
1075
- color:var(--t-text-color-status-error);
1076
- content:"*";
1077
- }
1092
+ .tds-number-stepper{
1093
+ --tds-number-stepper-button-offset:4px;
1094
+ --tds-number-stepper-button-gap:2px;
1095
+ }
1078
1096
 
1079
- .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
1080
- content:none;
1081
- }
1097
+ .tds-number-stepper--lg{
1098
+ --tds-number-stepper-button-offset:5px;
1099
+ --tds-number-stepper-button-gap:4px;
1100
+ }
1082
1101
 
1083
- .tds-checkbox-group-fields{
1084
- display:flex;
1085
- flex-direction:column;
1086
- gap:var(--tds-checkbox-group-gap);
1087
- align-items:flex-start;
1088
- margin-top:var(--t-spacing-1);
1102
+ .tds-number-stepper-field:has([readonly]) .tds-number-stepper-button{
1103
+ display:none;
1089
1104
  }
1090
1105
 
1091
- .tds-checkbox-group-description{
1106
+ .tds-number-stepper-input{
1092
1107
  display:flex;
1093
- gap:var(--t-spacing-half);
1094
- align-items:flex-start;
1095
- margin:var(--t-spacing-fourth) 0 0;
1096
- font-size:var(--tds-checkbox-group-description-font-size);
1097
- line-height:var(--tds-checkbox-group-description-line-height);
1098
- color:var(--tds-checkbox-group-description-color);
1099
- cursor:text;
1108
+ flex:1;
1109
+ align-items:center;
1110
+ min-inline-size:0;
1111
+ padding-block:var(--tds-field-padding-block);
1112
+ padding-inline:var(--tds-field-padding-inline);
1113
+ font-family:inherit;
1114
+ font-size:inherit;
1115
+ color:inherit;
1116
+ outline:0;
1117
+ background:transparent;
1118
+ border:0;
1100
1119
  }
1101
1120
 
1102
- .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
1103
- display:var(--tds-checkbox-group-description-invalid-icon-display);
1104
- flex-shrink:0;
1105
- margin-top:calc(.5lh - .5em);
1106
- line-height:var(--tds-checkbox-group-description-line-height);
1121
+ .tds-number-stepper-input::-webkit-inner-spin-button,.tds-number-stepper-input::-webkit-outer-spin-button{
1122
+ margin:0;
1123
+ -webkit-appearance:none;
1124
+ appearance:none;
1107
1125
  }
1108
1126
 
1109
- .tds-checkbox-group--sm{
1110
- --tds-checkbox-group-line-height:1.35;
1111
- --tds-checkbox-group-font-size:var(--t-font-size-sm);
1112
- --tds-checkbox-group-description-font-size:var(--t-font-size-xs);
1113
- --tds-checkbox-group-description-line-height:1.3;
1127
+ .tds-number-stepper-button{
1128
+ flex-shrink:0;
1129
+ align-self:center;
1130
+ inline-size:calc(var(--tds-field-min-height) - (var(--tds-number-stepper-button-offset) * 2));
1131
+ block-size:calc(var(--tds-field-min-height) - (var(--tds-number-stepper-button-offset) * 2));
1132
+ padding:0;
1114
1133
  }
1115
1134
 
1135
+ .tds-number-stepper-button + .tds-number-stepper-button{
1136
+ margin-inline-start:var(--tds-number-stepper-button-gap);
1137
+ }
1138
+
1139
+ .tds-number-stepper-button:last-of-type{
1140
+ margin-inline-end:var(--tds-number-stepper-button-offset);
1141
+ }
1142
+
1116
1143
  .tds-date-picker{
1117
1144
  --tds-date-picker-button-offset:4px;
1118
1145
  }
@@ -1461,64 +1488,37 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1461
1488
  outline-offset:-2px;
1462
1489
  }
1463
1490
 
1464
- .tds-date-picker-calendar-cell-button[data-focus-visible][data-selected]{
1465
- outline-offset:var(--t-focus-ring-offset);
1466
- }
1467
-
1468
- .tds-date-picker-popover--lg{
1469
- --tds-date-picker-popover-font-size:var(--t-font-size-lg);
1470
- }
1471
-
1472
- .tds-number-stepper{
1473
- --tds-number-stepper-button-offset:4px;
1474
- --tds-number-stepper-button-gap:2px;
1475
- }
1476
-
1477
- .tds-number-stepper--lg{
1478
- --tds-number-stepper-button-offset:5px;
1479
- --tds-number-stepper-button-gap:4px;
1480
- }
1481
-
1482
- .tds-number-stepper-field:has([readonly]) .tds-number-stepper-button{
1483
- display:none;
1484
- }
1485
-
1486
- .tds-number-stepper-input{
1487
- display:flex;
1488
- flex:1;
1489
- align-items:center;
1490
- min-inline-size:0;
1491
- padding-block:var(--tds-field-padding-block);
1492
- padding-inline:var(--tds-field-padding-inline);
1493
- font-family:inherit;
1494
- font-size:inherit;
1495
- color:inherit;
1496
- outline:0;
1497
- background:transparent;
1498
- border:0;
1499
- }
1500
-
1501
- .tds-number-stepper-input::-webkit-inner-spin-button,.tds-number-stepper-input::-webkit-outer-spin-button{
1502
- margin:0;
1503
- -webkit-appearance:none;
1504
- appearance:none;
1505
- }
1506
-
1507
- .tds-number-stepper-button{
1508
- flex-shrink:0;
1509
- align-self:center;
1510
- inline-size:calc(var(--tds-field-min-height) - (var(--tds-number-stepper-button-offset) * 2));
1511
- block-size:calc(var(--tds-field-min-height) - (var(--tds-number-stepper-button-offset) * 2));
1512
- padding:0;
1491
+ .tds-date-picker-calendar-cell-button[data-focus-visible][data-selected]{
1492
+ outline-offset:var(--t-focus-ring-offset);
1493
+ }
1494
+
1495
+ .tds-date-picker-popover--lg{
1496
+ --tds-date-picker-popover-font-size:var(--t-font-size-lg);
1513
1497
  }
1514
1498
 
1515
- .tds-number-stepper-button + .tds-number-stepper-button{
1516
- margin-inline-start:var(--tds-number-stepper-button-gap);
1499
+
1500
+ :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{
1501
+ -webkit-appearance:none;
1502
+ appearance:none;
1503
+ }
1504
+
1505
+ [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
1506
+ inline-size:1em;
1507
+ block-size:2em;
1508
+ }
1509
+
1510
+ @supports (field-sizing: content){
1511
+ .tds-input--auto-width{
1512
+ inline-size:-moz-fit-content;
1513
+ inline-size:fit-content;
1514
+ min-inline-size:min(100%, 122px);
1517
1515
  }
1518
1516
 
1519
- .tds-number-stepper-button:last-of-type{
1520
- margin-inline-end:var(--tds-number-stepper-button-offset);
1517
+ .tds-input--auto-width input{
1518
+ field-sizing:content;
1519
+ inline-size:auto;
1521
1520
  }
1521
+ }
1522
1522
 
1523
1523
  .tds-radio-group{
1524
1524
  --tds-radio-group-font-size:var(--t-font-size-md);
@@ -1603,6 +1603,111 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1603
1603
  --tds-radio-group-description-line-height:1.3;
1604
1604
  }
1605
1605
 
1606
+ .tds-input:has(textarea){
1607
+ --tds-input-padding-block:6px;
1608
+ --tds-input-resizer-size:var(--t-element-size-sm);
1609
+ --tds-input-resizer-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cg fill='none' stroke='%236f7784' stroke-linecap='round' stroke-width='1.25'%3E%3Cpath d='M5.5 13l7.5-7.5'/%3E%3Cpath d='M9 13l4-4'/%3E%3C/g%3E%3C/svg%3E");
1610
+ }
1611
+
1612
+ @supports (x: attr(x type(*))){
1613
+
1614
+ .tds-input textarea{
1615
+ --tds-input-min-height:calc((attr(rows type(<number>), 3) * 1lh) + (var(--tds-input-padding-block) * 2) + 2px);
1616
+ }
1617
+ }
1618
+
1619
+ .tds-input.tds-textarea--resize-vertical textarea{
1620
+ resize:vertical;
1621
+ }
1622
+
1623
+ .tds-input.tds-textarea--resize-none textarea{
1624
+ resize:none;
1625
+ }
1626
+
1627
+ .tds-input.tds-textarea--resize-auto textarea{
1628
+ resize:vertical;
1629
+ }
1630
+
1631
+ @supports (field-sizing: content){
1632
+ .tds-input.tds-textarea--resize-auto textarea{
1633
+ field-sizing:content;
1634
+ resize:none;
1635
+ }
1636
+ }
1637
+
1638
+ .tds-input textarea{
1639
+ --tds-input-scrollbar-thumb-color-default:var(--t-fill-color-neutral-040);
1640
+ --tds-input-scrollbar-thumb-color-hidden:transparent;
1641
+ --tds-input-scrollbar-thumb-color-hover:var(--t-fill-color-neutral-030);
1642
+ --tds-input-scrollbar-thumb-color-thumb-hover:var(--t-fill-color-neutral-020);
1643
+ --tds-input-scrollbar-thumb-color-thumb-active:var(--t-fill-color-neutral-010);
1644
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-default);
1645
+ --tds-input-scrollbar-surface-color:rgba(0, 0, 0, 0);
1646
+ --tds-input-scrollbar-thumb-border-radius:999px;
1647
+ --tds-input-scrollbar-thumb-border-width:3px;
1648
+ --tds-input-scrollbar-track-margin-block:.125rem;
1649
+ scrollbar-color:initial;
1650
+ transition-timing-function:var(--t-ease-in-out);
1651
+ transition-duration:var(--t-duration-200);
1652
+ transition-property:var(--tds-input-transition-property), --tds-input-scrollbar-thumb-color;
1653
+ }
1654
+
1655
+ @media (pointer: fine){
1656
+ :is(.tds-input textarea)::-webkit-scrollbar{
1657
+ width:12px;
1658
+ height:12px;
1659
+ cursor:default;
1660
+ }
1661
+
1662
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb{
1663
+ cursor:default;
1664
+ background:var(--tds-input-scrollbar-thumb-color);
1665
+ background-clip:content-box;
1666
+ border:var(--tds-input-scrollbar-thumb-border-width) solid var(--tds-input-scrollbar-surface-color);
1667
+ border-radius:var(--tds-input-scrollbar-thumb-border-radius);
1668
+ }
1669
+
1670
+ :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1671
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
1672
+ }
1673
+
1674
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
1675
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
1676
+ }
1677
+
1678
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
1679
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
1680
+ }
1681
+
1682
+ :is(.tds-input textarea)::-webkit-scrollbar-corner{
1683
+ background:var(--tds-input-scrollbar-surface-color);
1684
+ }
1685
+
1686
+ :is(.tds-input textarea)::-webkit-resizer{
1687
+ background:var(--tds-input-resizer-icon) no-repeat;
1688
+ background-position:right bottom;
1689
+ background-size:var(--tds-input-resizer-size) var(--tds-input-resizer-size);
1690
+ }
1691
+
1692
+ :is(.tds-input textarea)::-webkit-scrollbar-track{
1693
+ margin-block:var(--tds-input-scrollbar-track-margin-block);
1694
+ cursor:default;
1695
+ }
1696
+
1697
+ @supports (-moz-appearance: none){
1698
+ :is(.tds-input textarea){
1699
+ scrollbar-color:var(--tds-input-scrollbar-thumb-color-default) var(--tds-input-scrollbar-surface-color);
1700
+ scrollbar-width:thin;
1701
+ }
1702
+
1703
+ @media (hover){
1704
+ :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1705
+ scrollbar-color:var(--tds-input-scrollbar-thumb-color-hover) var(--tds-input-scrollbar-surface-color);
1706
+ }
1707
+ }
1708
+ }
1709
+ }
1710
+
1606
1711
  .tds-radio{
1607
1712
  --tds-radio-font-size:var(--t-font-size-md);
1608
1713
  --tds-radio-cursor:pointer;
@@ -1736,111 +1841,13 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1736
1841
  --tds-radio-description-line-height:1.3;
1737
1842
  }
1738
1843
 
1739
- .tds-input:has(textarea){
1740
- --tds-input-padding-block:6px;
1741
- --tds-input-resizer-size:var(--t-element-size-sm);
1742
- --tds-input-resizer-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cg fill='none' stroke='%236f7784' stroke-linecap='round' stroke-width='1.25'%3E%3Cpath d='M5.5 13l7.5-7.5'/%3E%3Cpath d='M9 13l4-4'/%3E%3C/g%3E%3C/svg%3E");
1743
- }
1744
-
1745
- @supports (x: attr(x type(*))){
1746
-
1747
- .tds-input textarea{
1748
- --tds-input-min-height:calc((attr(rows type(<number>), 3) * 1lh) + (var(--tds-input-padding-block) * 2) + 2px);
1749
- }
1750
- }
1751
-
1752
- .tds-input.tds-textarea--resize-vertical textarea{
1753
- resize:vertical;
1754
- }
1755
-
1756
- .tds-input.tds-textarea--resize-none textarea{
1757
- resize:none;
1758
- }
1759
-
1760
- .tds-input.tds-textarea--resize-auto textarea{
1761
- resize:vertical;
1762
- }
1763
-
1764
- @supports (field-sizing: content){
1765
- .tds-input.tds-textarea--resize-auto textarea{
1766
- field-sizing:content;
1767
- resize:none;
1768
- }
1769
- }
1770
-
1771
- .tds-input textarea{
1772
- --tds-input-scrollbar-thumb-color-default:var(--t-fill-color-neutral-040);
1773
- --tds-input-scrollbar-thumb-color-hidden:transparent;
1774
- --tds-input-scrollbar-thumb-color-hover:var(--t-fill-color-neutral-030);
1775
- --tds-input-scrollbar-thumb-color-thumb-hover:var(--t-fill-color-neutral-020);
1776
- --tds-input-scrollbar-thumb-color-thumb-active:var(--t-fill-color-neutral-010);
1777
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-default);
1778
- --tds-input-scrollbar-surface-color:rgba(0, 0, 0, 0);
1779
- --tds-input-scrollbar-thumb-border-radius:999px;
1780
- --tds-input-scrollbar-thumb-border-width:3px;
1781
- --tds-input-scrollbar-track-margin-block:.125rem;
1782
- scrollbar-color:initial;
1783
- transition-timing-function:var(--t-ease-in-out);
1784
- transition-duration:var(--t-duration-200);
1785
- transition-property:var(--tds-input-transition-property), --tds-input-scrollbar-thumb-color;
1844
+ .tds-time-field-input{
1845
+ --tds-field-date-segment-padding-inline:1px;
1846
+ padding-block:var(--tds-field-padding-block);
1847
+ padding-inline:var(--tds-field-padding-inline);
1848
+ font-variant-numeric:tabular-nums;
1786
1849
  }
1787
1850
 
1788
- @media (pointer: fine){
1789
- :is(.tds-input textarea)::-webkit-scrollbar{
1790
- width:12px;
1791
- height:12px;
1792
- cursor:default;
1793
- }
1794
-
1795
- :is(.tds-input textarea)::-webkit-scrollbar-thumb{
1796
- cursor:default;
1797
- background:var(--tds-input-scrollbar-thumb-color);
1798
- background-clip:content-box;
1799
- border:var(--tds-input-scrollbar-thumb-border-width) solid var(--tds-input-scrollbar-surface-color);
1800
- border-radius:var(--tds-input-scrollbar-thumb-border-radius);
1801
- }
1802
-
1803
- :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1804
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
1805
- }
1806
-
1807
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
1808
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
1809
- }
1810
-
1811
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
1812
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
1813
- }
1814
-
1815
- :is(.tds-input textarea)::-webkit-scrollbar-corner{
1816
- background:var(--tds-input-scrollbar-surface-color);
1817
- }
1818
-
1819
- :is(.tds-input textarea)::-webkit-resizer{
1820
- background:var(--tds-input-resizer-icon) no-repeat;
1821
- background-position:right bottom;
1822
- background-size:var(--tds-input-resizer-size) var(--tds-input-resizer-size);
1823
- }
1824
-
1825
- :is(.tds-input textarea)::-webkit-scrollbar-track{
1826
- margin-block:var(--tds-input-scrollbar-track-margin-block);
1827
- cursor:default;
1828
- }
1829
-
1830
- @supports (-moz-appearance: none){
1831
- :is(.tds-input textarea){
1832
- scrollbar-color:var(--tds-input-scrollbar-thumb-color-default) var(--tds-input-scrollbar-surface-color);
1833
- scrollbar-width:thin;
1834
- }
1835
-
1836
- @media (hover){
1837
- :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1838
- scrollbar-color:var(--tds-input-scrollbar-thumb-color-hover) var(--tds-input-scrollbar-surface-color);
1839
- }
1840
- }
1841
- }
1842
- }
1843
-
1844
1851
  .tds-toggle-switch{
1845
1852
  --tds-toggle-switch-font-size:var(--t-font-size-md);
1846
1853
  --tds-toggle-switch-cursor:pointer;
@@ -2265,13 +2272,6 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
2265
2272
  color:var(--tds-field-color);
2266
2273
  }
2267
2274
 
2268
- .tds-time-field-input{
2269
- --tds-field-date-segment-padding-inline:1px;
2270
- padding-block:var(--tds-field-padding-block);
2271
- padding-inline:var(--tds-field-padding-inline);
2272
- font-variant-numeric:tabular-nums;
2273
- }
2274
-
2275
2275
  .tds-select{
2276
2276
  --tds-select-border-color:var(--t-form-border-color);
2277
2277
  --tds-select-border-color-hover:var(--t-form-border-color-hover);