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

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 +1164 -1164
  2. package/dist/reactRender.css.map +1 -1
  3. package/dist/reactRenderLegacy.css +1164 -1164
  4. package/dist/reactRenderLegacy.css.map +1 -1
  5. package/package.json +2 -2
package/dist/reactRender.css CHANGED
@@ -1,519 +1,327 @@
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:transparent;
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: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;
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-bottom-border-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) var(--t-spacing-1);
29
- line-height:var(--tds-checkbox-line-height);
30
- cursor:var(--tds-checkbox-cursor);
31
- -webkit-user-select:none;
32
- -moz-user-select:none;
33
- user-select:none;
34
- }
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);
35
35
 
36
- .tds-checkbox label{
37
- grid-area:1 / 2;
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%);
85
- }
86
-
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);
90
- }
91
-
92
- :is(.tds-checkbox input[type="checkbox"]):focus-visible{
93
- outline:var(--t-focus-ring-outline);
94
- outline-offset:var(--t-focus-ring-offset);
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));
95
55
  }
56
+ }
96
57
 
97
- :is(.tds-checkbox input[type="checkbox"]):disabled{
98
- pointer-events:none;
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);
99
75
  }
100
-
101
- @media (prefers-reduced-motion: reduce){
102
-
103
- .tds-checkbox input[type="checkbox"]{
104
- --tds-checkbox-transition-property:none;
105
76
  }
106
- }
77
+ }
107
78
 
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;
113
- }
79
+ .tds-page-header{
80
+ 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);
86
+ }
114
87
 
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);
118
- }
88
+ .tds-page-header:not(.has-nav){
89
+ padding-bottom:var(--tds-page-header-padding-y);
90
+ }
119
91
 
120
- .tds-checkbox:has(input:checked){
121
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
92
+ .tds-page-header.inactive{
93
+ background:var(--tds-page-header-background-color-inactive);
122
94
  }
123
95
 
124
- .tds-checkbox:has(input:indeterminate){
125
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
96
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
97
+ width:100%;
126
98
  }
127
99
 
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;
100
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
101
+ 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;
132
107
  }
133
108
 
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);
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);
137
117
  }
138
118
 
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);
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;
127
+ text-decoration:none;
128
+ -webkit-appearance:none;
129
+ -moz-appearance:none;
130
+ appearance:none;
131
+ cursor:pointer;
132
+ outline-offset:-2px;
133
+ background-color:var(--tds-page-header-nav-item-background-color);
134
+ background-clip:padding-box;
135
+ border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
136
+ border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
137
+ border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
142
138
  }
143
139
 
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);
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);
147
145
  }
148
146
 
149
- .tds-checkbox:has(input:required) label::after{
150
- margin-left:.25ch;
151
- color:var(--t-text-color-status-error);
152
- content:"*";
153
- }
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
+ }
154
152
 
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);
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
+ }
158
157
 
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;
162
- }
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
+ }
163
164
 
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);
165
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
166
+ position:relative;
166
167
  }
167
168
 
168
- .tds-checkbox-description{
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);
172
+ }
173
+
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{
175
+ position:absolute;
176
+ top:-5px;
177
+ right:-2px;
178
+ width:10px;
179
+ height:10px;
180
+ content:"";
181
+ background:var(--tds-page-header-nav-item-indicator-color);
182
+ border-radius:50%;
183
+ }
184
+
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
+ }
189
+ }
190
+
191
+ .tds-page-header__title-bar{
169
192
  display:flex;
170
- grid-area:2 / 2;
171
- gap:var(--t-spacing-half);
193
+ flex-direction:column;
194
+ gap:var(--t-spacing-2) var(--t-spacing-1);
172
195
  align-items:flex-start;
173
- margin:0;
174
- font-size:var(--tds-checkbox-description-font-size);
175
- line-height:var(--tds-checkbox-description-line-height);
176
- color:var(--tds-checkbox-description-color);
177
- cursor:text;
196
+ justify-content:space-between;
197
+ padding:0 var(--tds-page-header-padding-x);
178
198
  }
179
199
 
180
- .tds-checkbox-description .tds-checkbox-description-invalid-icon{
181
- display:var(--tds-checkbox-description-invalid-icon-display);
182
- flex-shrink:0;
183
- margin-top:calc(.5lh - .5em);
184
- line-height:var(--tds-checkbox-description-line-height);
200
+ .tds-page-header--profile > .tds-page-header__title-bar{
201
+ align-items:center;
185
202
  }
186
203
 
187
- .tds-checkbox--sm{
188
- --tds-checkbox-line-height:1.35;
189
- --tds-checkbox-input-size:var(--t-element-size-sm);
190
- --tds-checkbox-font-size:var(--t-font-size-sm);
191
- --tds-checkbox-description-font-size:var(--t-font-size-xs);
192
- --tds-checkbox-description-line-height:1.3;
204
+ .tds-page-header__primary{
205
+ width:100%;
193
206
  }
194
207
 
208
+ .tds-page-header__primary h1{
209
+ margin:0;
210
+ font-size:var(--tds-page-header-headline-font-size);
211
+ font-weight:var(--t-font-weight-normal);
212
+ line-height:32px;
213
+ color:var(--tds-page-header-headline-color);
214
+ overflow-wrap:break-word;
215
+ }
195
216
 
196
- :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{
197
- -webkit-appearance:none;
198
- appearance:none;
199
- }
200
-
201
- [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
202
- inline-size:1em;
203
- block-size:2em;
204
- }
205
-
206
- @supports (field-sizing: content){
207
- .tds-input--auto-width{
208
- inline-size:-moz-fit-content;
209
- inline-size:fit-content;
210
- min-inline-size:min(100%, 122px);
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%;
211
223
  }
212
224
 
213
- .tds-input--auto-width input{
214
- field-sizing:content;
215
- inline-size:auto;
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;
216
230
  }
217
- }
231
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
232
+ width:auto;
233
+ }
218
234
 
219
- .tds-input:has(textarea){
220
- --tds-input-padding-block:6px;
221
- --tds-input-resizer-size:var(--t-element-size-sm);
222
- --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");
235
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
236
+ justify-content:flex-end;
237
+ }
223
238
  }
224
239
 
225
- @supports (x: attr(x type(*))){
240
+ .tds-page-header-phone,
241
+ .tds-page-header-email{
242
+ color:var(--tds-page-header-color);
243
+ white-space:nowrap;
244
+ }
226
245
 
227
- .tds-input:has(textarea){
228
- --tds-input-min-height:calc((attr(rows type(<number>), 3) * 1lh) + (var(--tds-input-padding-block) * 2) + 2px);
246
+ .tds-page-header-email{
247
+ max-width:100%;
248
+ overflow:hidden;
249
+ text-overflow:ellipsis;
229
250
  }
230
- }
231
251
 
232
- .tds-input.tds-textarea--resize-vertical textarea{
233
- resize:vertical;
234
- }
252
+ @keyframes indicator-pulse{
253
+ 0%{
254
+ opacity:.3;
255
+ transform:scale(.9);
256
+ }
235
257
 
236
- .tds-input.tds-textarea--resize-none textarea{
237
- resize:none;
238
- }
258
+ 100%{
259
+ opacity:0;
260
+ transform:scale(1.75);
261
+ }
262
+ }
239
263
 
240
- .tds-input.tds-textarea--resize-auto textarea{
241
- resize:vertical;
242
- }
243
264
 
244
- @supports (field-sizing: content){
245
- .tds-input.tds-textarea--resize-auto textarea{
246
- field-sizing:content;
247
- resize:none;
248
- }
249
- }
265
+ @media (prefers-reduced-motion: no-preference){
250
266
 
251
- .tds-input textarea{
252
- --tds-input-scrollbar-thumb-color-default:var(--t-fill-color-neutral-040);
253
- --tds-input-scrollbar-thumb-color-hidden:transparent;
254
- --tds-input-scrollbar-thumb-color-hover:var(--t-fill-color-neutral-030);
255
- --tds-input-scrollbar-thumb-color-thumb-hover:var(--t-fill-color-neutral-020);
256
- --tds-input-scrollbar-thumb-color-thumb-active:var(--t-fill-color-neutral-010);
257
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-default);
258
- --tds-input-scrollbar-surface-color:rgba(0, 0, 0, 0);
259
- --tds-input-scrollbar-thumb-border-radius:999px;
260
- --tds-input-scrollbar-thumb-border-width:3px;
261
- --tds-input-scrollbar-track-margin-block:.125rem;
262
- scrollbar-color:initial;
263
- transition-timing-function:var(--t-ease-in-out);
264
- transition-duration:var(--t-duration-200);
265
- transition-property:var(--tds-input-transition-property), --tds-input-scrollbar-thumb-color;
267
+ :root{
268
+ interpolate-size:allow-keywords;
266
269
  }
270
+ }
267
271
 
268
- @media (pointer: fine){
269
- :is(.tds-input textarea)::-webkit-scrollbar{
270
- width:12px;
271
- height:12px;
272
- cursor:default;
273
- }
272
+ @layer tds-component{
273
+ tds-sidenav,
274
+ .tds-sidenav{
275
+ --tds-sidenav-indent:12px;
276
+ --tds-sidenav-item-depth:0;
274
277
 
275
- :is(.tds-input textarea)::-webkit-scrollbar-thumb{
276
- cursor:default;
277
- background:var(--tds-input-scrollbar-thumb-color);
278
- background-clip:content-box;
279
- border:var(--tds-input-scrollbar-thumb-border-width) solid var(--tds-input-scrollbar-surface-color);
280
- border-radius:var(--tds-input-scrollbar-thumb-border-radius);
281
- }
278
+ --tds-sidenav-item-transition:background-color var(--t-duration-200) var(--t-ease-in-out);
282
279
 
283
- :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
284
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
285
- }
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);
286
286
 
287
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
288
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
289
- }
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);
290
291
 
291
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
292
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
293
- }
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;
294
295
 
295
- :is(.tds-input textarea)::-webkit-scrollbar-corner{
296
- background:var(--tds-input-scrollbar-surface-color);
297
- }
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);
298
299
 
299
- :is(.tds-input textarea)::-webkit-resizer{
300
- background:var(--tds-input-resizer-icon) no-repeat;
301
- background-position:right bottom;
302
- background-size:var(--tds-input-resizer-size) var(--tds-input-resizer-size);
303
- }
300
+ --tds-sidenav-item-icon-color:var(--t-icon-color-secondary);
301
+ --tds-sidenav-item-icon-color-selected:var(--t-icon-color);
302
+ }
304
303
 
305
- :is(.tds-input textarea)::-webkit-scrollbar-track{
306
- margin-block:var(--tds-input-scrollbar-track-margin-block);
307
- cursor:default;
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
+ }
308
312
  }
309
313
 
310
- @supports (-moz-appearance: none){
311
- :is(.tds-input textarea){
312
- scrollbar-color:var(--tds-input-scrollbar-thumb-color-default) var(--tds-input-scrollbar-surface-color);
313
- scrollbar-width:thin;
314
- }
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);
320
+ }
321
+ }
315
322
 
316
- @media (hover){
317
- :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
318
- scrollbar-color:var(--tds-input-scrollbar-thumb-color-hover) var(--tds-input-scrollbar-surface-color);
319
- }
320
- }
321
- }
322
- }
323
-
324
- .tds-radio{
325
- --tds-radio-font-size:var(--t-font-size-md);
326
- --tds-radio-cursor:pointer;
327
- --tds-radio-line-height:1.4;
328
- --tds-radio-transition-property:border-width;
329
-
330
- --tds-radio-input-size:var(--t-element-size-md);
331
- --tds-radio-input-border-radius:var(--t-border-radius-round);
332
- --tds-radio-input-border-color:var(--t-form-border-color);
333
- --tds-radio-input-border-width:var(--t-form-border-width);
334
- --tds-radio-input-background-color:transparent;
335
-
336
- --tds-radio-label-color:var(--t-form-color);
337
-
338
- --tds-radio-description-font-size:var(--t-font-size-sm);
339
- --tds-radio-description-line-height:1.35;
340
- --tds-radio-description-color:var(--t-text-color-secondary);
341
-
342
- position:relative;
343
- display:inline-grid;
344
- grid-template-columns:auto;
345
- grid-auto-columns:1fr;
346
- gap:var(--t-spacing-fourth) var(--t-spacing-1);
347
- line-height:var(--tds-radio-line-height);
348
- cursor:var(--tds-radio-cursor);
349
- -webkit-user-select:none;
350
- -moz-user-select:none;
351
- user-select:none;
352
- }
353
-
354
- .tds-radio label{
355
- grid-area:1 / 2;
356
- font-size:var(--tds-radio-font-size);
357
- font-weight:var(--t-font-weight-normal);
358
- color:var(--tds-radio-label-color);
359
- cursor:var(--tds-radio-cursor);
360
- }
361
-
362
- .tds-radio input[type="radio"]{
363
- position:relative;
364
- width:1em;
365
- height:1em;
366
- margin:calc((1lh - 1em) / 2) 0 0;
367
- font-size:var(--tds-radio-font-size);
368
- line-height:inherit;
369
- -webkit-appearance:none;
370
- -moz-appearance:none;
371
- appearance:none;
372
- cursor:var(--tds-radio-cursor);
373
- background-color:var(--tds-radio-input-background-color);
374
- border:var(--tds-radio-input-border-width) solid var(--tds-radio-input-border-color);
375
- border-radius:var(--tds-radio-input-border-radius);
376
- transition-timing-function:var(--t-ease-in-out);
377
- transition-duration:var(--t-duration-200);
378
- transition-property:var(--tds-radio-transition-property);
379
- }
380
-
381
- :is(.tds-radio input[type="radio"]):hover:not(:disabled){
382
- --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
383
- --tds-radio-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
384
- }
385
-
386
- :is(.tds-radio input[type="radio"]):focus-visible{
387
- outline:var(--t-focus-ring-outline);
388
- outline-offset:var(--t-focus-ring-offset);
389
- }
390
-
391
- :is(.tds-radio input[type="radio"]):disabled{
392
- pointer-events:none;
393
- }
394
-
395
- @media (prefers-reduced-motion: reduce){
396
-
397
- .tds-radio input[type="radio"]{
398
- --tds-radio-transition-property:none;
399
- }
400
- }
401
-
402
- .tds-radio:has(input:checked){
403
- --tds-radio-input-background-color:var(--t-form-background-color);
404
- --tds-radio-input-border-color:var(--t-border-color-control-info);
405
- --tds-radio-input-border-width:4px;
406
- }
407
-
408
- .tds-radio:has(input:checked) input:hover:not(:disabled){
409
- --tds-radio-input-background-color:var(--t-form-background-color);
410
- --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
411
- }
412
-
413
- .tds-radio:has(input:user-invalid){
414
- --tds-radio-input-border-color:var(--t-form-border-color-error);
415
- }
416
-
417
- .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
418
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
419
- --tds-radio-input-background-color:var(--t-form-background-color-error);
420
- }
421
-
422
- .tds-radio:has(input:disabled){
423
- --tds-radio-input-background-color:var(--t-form-background-color-disabled);
424
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
425
-
426
- --tds-radio-label-color:var(--t-form-color-disabled);
427
- --tds-radio-description-color:var(--t-form-color-disabled);
428
- --tds-radio-cursor:not-allowed;
429
- }
430
-
431
- .tds-radio:has(input:disabled) input:checked{
432
- --tds-radio-input-background-color:var(--t-form-background-color);
433
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
434
- }
435
-
436
- .tds-radio-description{
437
- display:flex;
438
- grid-area:2 / 2;
439
- gap:var(--t-spacing-half);
440
- align-items:flex-start;
441
- margin:0;
442
- font-size:var(--tds-radio-description-font-size);
443
- line-height:var(--tds-radio-description-line-height);
444
- color:var(--tds-radio-description-color);
445
- cursor:text;
446
- }
447
-
448
- .tds-radio--sm{
449
- --tds-radio-line-height:1.35;
450
- --tds-radio-input-size:var(--t-element-size-sm);
451
- --tds-radio-font-size:var(--t-font-size-sm);
452
- --tds-radio-description-font-size:var(--t-font-size-xs);
453
- --tds-radio-description-line-height:1.3;
454
- }
455
-
456
-
457
- @media (prefers-reduced-motion: no-preference){
458
-
459
- :root{
460
- interpolate-size:allow-keywords;
461
- }
462
- }
463
-
464
- @layer tds-component{
465
- tds-sidenav,
466
- .tds-sidenav{
467
- --tds-sidenav-indent:12px;
468
- --tds-sidenav-item-depth:0;
469
-
470
- --tds-sidenav-item-transition:background-color var(--t-duration-200) var(--t-ease-in-out);
471
-
472
- --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;
473
- --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;
474
- --tds-sidenav-collapse-closed-opacity:0;
475
- --tds-sidenav-collapse-open-opacity:1;
476
- --tds-sidenav-collapse-closed-transform:translateY(-8px);
477
- --tds-sidenav-collapse-open-transform:translateY(0);
478
-
479
- --tds-sidenav-item-icon-size:var(--t-element-size-md);
480
- --tds-sidenav-item-background-hover:var(--t-fill-color-button-interaction-ghost-hover);
481
- --tds-sidenav-item-background-active:var(--t-fill-color-button-interaction-ghost-active);
482
- --tds-sidenav-item-background-selected:var(--t-fill-color-button-interaction-ghost-active);
483
-
484
- --tds-sidenav-item-nested-background-hover:var(--tds-sidenav-item-background-hover);
485
- --tds-sidenav-item-nested-background-active:var(--tds-sidenav-item-background-hover);
486
- --tds-sidenav-item-nested-background-selected:transparent;
487
-
488
- --tds-sidenav-item-nested-border-color:var(--t-fill-color-neutral-050);
489
- --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
490
- --tds-sidenav-item-nested-border-color-selected:var(--t-border-color-status-info);
491
-
492
- --tds-sidenav-item-icon-color:var(--t-icon-color-secondary);
493
- --tds-sidenav-item-icon-color-selected:var(--t-icon-color);
494
- }
495
-
496
- @media (prefers-reduced-motion: reduce){
497
- tds-sidenav,
498
- .tds-sidenav{
499
- --tds-sidenav-collapse-transition-enter:none;
500
- --tds-sidenav-collapse-transition-exit:none;
501
- --tds-sidenav-collapse-closed-transform:none;
502
- --tds-sidenav-collapse-open-transform:none;
503
- }
504
- }
505
-
506
- .tds-sidenav--theme-gray{
507
- --tds-sidenav-item-background-hover:var(--t-fill-color-neutral-080);
508
- --tds-sidenav-item-background-active:var(--t-fill-color-neutral-070);
509
- --tds-sidenav-item-background-selected:var(--t-fill-color-neutral-050);
510
- --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
511
- --tds-sidenav-item-nested-border-color-selected:var(--t-fill-color-neutral-010);
512
- }
513
- }
514
-
515
- .tds-sidenav :where(nav,ul,.tds-sidenav-section){
516
- display:flex;
323
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section){
324
+ display:flex;
517
325
  }
518
326
 
519
327
  .tds-sidenav :where(nav,ul,.tds-sidenav-section,.tds-sidenav-collapse){
@@ -815,927 +623,1119 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
815
623
  flex-direction:column;
816
624
  }
817
625
 
818
- .tds-radio-group{
819
- --tds-radio-group-font-size:var(--t-font-size-md);
820
- --tds-radio-group-line-height:1.4;
821
- --tds-radio-group-gap:var(--t-spacing-1);
626
+ .tds-checkbox{
627
+ --tds-checkbox-font-size:var(--t-font-size-md);
628
+ --tds-checkbox-cursor:pointer;
629
+ --tds-checkbox-line-height:1.4;
630
+ --tds-checkbox-transition-property:background-color, border-color;
822
631
 
823
- --tds-radio-group-legend-margin-bottom:var(--tds-radio-group-gap);
632
+ --tds-checkbox-input-size:var(--t-element-size-md);
633
+ --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
634
+ --tds-checkbox-input-border-color:var(--t-form-border-color);
635
+ --tds-checkbox-input-background-color:transparent;
824
636
 
825
- --tds-radio-group-description-font-size:var(--t-font-size-sm);
826
- --tds-radio-group-description-line-height:1.35;
827
- --tds-radio-group-description-color:var(--t-text-color-secondary);
828
- --tds-radio-group-description-invalid-icon-display:none;
829
- display:flex;
830
- flex-direction:column;
831
- gap:var(--tds-radio-group-gap);
832
- padding:0;
833
- margin:0;
637
+ --tds-checkbox-input-icon:none;
638
+ --tds-checkbox-input-icon-visibility:hidden;
639
+ --tds-checkbox-input-icon-opacity:0;
640
+ --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
834
641
 
835
- font-size:var(--tds-radio-group-font-size);
836
- line-height:var(--tds-radio-group-line-height);
837
- border:0;
642
+ --tds-checkbox-label-color:var(--t-form-color);
643
+
644
+ --tds-checkbox-description-font-size:var(--t-font-size-sm);
645
+ --tds-checkbox-description-line-height:1.35;
646
+ --tds-checkbox-description-color:var(--t-text-color-secondary);
647
+ --tds-checkbox-description-invalid-icon-display:none;
648
+
649
+ position:relative;
650
+ display:inline-grid;
651
+ grid-template-columns:auto;
652
+ grid-auto-columns:1fr;
653
+ gap:var(--t-spacing-fourth) var(--t-spacing-1);
654
+ line-height:var(--tds-checkbox-line-height);
655
+ cursor:var(--tds-checkbox-cursor);
656
+ -webkit-user-select:none;
657
+ -moz-user-select:none;
658
+ user-select:none;
838
659
  }
839
660
 
840
- .tds-radio-group legend{
841
- padding:0;
842
- margin-bottom:var(--tds-radio-group-legend-margin-bottom);
661
+ .tds-checkbox label{
662
+ grid-area:1 / 2;
663
+ font-size:var(--tds-checkbox-font-size);
664
+ font-weight:var(--t-font-weight-normal);
665
+ color:var(--tds-checkbox-label-color);
666
+ cursor:var(--tds-checkbox-cursor);
843
667
  }
844
668
 
845
- .tds-radio-group:has(.tds-radio-group-description){
846
- --tds-radio-group-legend-margin-bottom:var(--t-spacing-fourth);
669
+ .tds-checkbox tds-indeterminate{
670
+ display:flex;
847
671
  }
848
672
 
849
- .tds-radio-group[aria-invalid="true"]{
850
- --tds-radio-group-description-color:var(--t-text-color-status-error);
851
- --tds-radio-group-description-invalid-icon-display:inline-block;
852
- }
673
+ .tds-checkbox input[type="checkbox"]{
674
+ position:relative;
675
+ width:1em;
676
+ height:1em;
677
+ margin:calc((1lh - 1em) / 2) 0 0;
678
+ font-size:var(--tds-checkbox-font-size);
679
+ line-height:inherit;
680
+ -webkit-appearance:none;
681
+ -moz-appearance:none;
682
+ appearance:none;
683
+ cursor:var(--tds-checkbox-cursor);
684
+ background-color:var(--tds-checkbox-input-background-color);
685
+ border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
686
+ border-radius:var(--tds-checkbox-input-border-radius);
687
+ transition-timing-function:var(--t-ease-in-out);
688
+ transition-duration:var(--t-duration-200);
689
+ transition-property:var(--tds-checkbox-transition-property);
690
+ }
853
691
 
854
- .tds-radio-group[aria-invalid="true"] .tds-radio{
855
- --tds-radio-input-border-color:var(--t-form-border-color-error);
692
+ :is(.tds-checkbox input[type="checkbox"])::before{
693
+ position:absolute;
694
+ top:50%;
695
+ left:50%;
696
+ visibility:var(--tds-checkbox-input-icon-visibility);
697
+ width:100%;
698
+ height:100%;
699
+ content:"";
700
+ background-color:var(--tds-checkbox-input-icon-fill);
701
+ border-radius:var(--tds-checkbox-input-border-radius);
702
+ opacity:var(--tds-checkbox-input-icon-opacity);
703
+ -webkit-mask-image:var(--tds-checkbox-input-icon);
704
+ mask-image:var(--tds-checkbox-input-icon);
705
+ -webkit-mask-repeat:no-repeat;
706
+ mask-repeat:no-repeat;
707
+ -webkit-mask-size:contain;
708
+ mask-size:contain;
709
+ transform:translate(-50%, -50%);
856
710
  }
857
711
 
858
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
859
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
860
- --tds-radio-input-background-color:var(--t-form-background-color-error);
861
- }
712
+ :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
713
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
714
+ --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
715
+ }
862
716
 
863
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
864
- --tds-radio-input-background-color:var(--t-form-background-color);
717
+ :is(.tds-checkbox input[type="checkbox"]):focus-visible{
718
+ outline:var(--t-focus-ring-outline);
719
+ outline-offset:var(--t-focus-ring-offset);
720
+ }
721
+
722
+ :is(.tds-checkbox input[type="checkbox"]):disabled{
723
+ pointer-events:none;
724
+ }
725
+
726
+ @media (prefers-reduced-motion: reduce){
727
+
728
+ .tds-checkbox input[type="checkbox"]{
729
+ --tds-checkbox-transition-property:none;
730
+ }
731
+ }
732
+
733
+ .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
734
+ --tds-checkbox-input-background-color:var(--t-fill-color-control);
735
+ --tds-checkbox-input-border-color:var(--t-border-color-control-info);
736
+ --tds-checkbox-input-icon-visibility:visible;
737
+ --tds-checkbox-input-icon-opacity:1;
738
+ }
739
+
740
+ :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
741
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
742
+ --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
743
+ }
744
+
745
+ .tds-checkbox:has(input:checked){
746
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
747
+ }
748
+
749
+ .tds-checkbox:has(input:indeterminate){
750
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
751
+ }
752
+
753
+ .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
754
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
755
+ --tds-checkbox-description-color:var(--t-text-color-status-error);
756
+ --tds-checkbox-description-invalid-icon-display:inline-block;
757
+ }
758
+
759
+ :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
760
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
761
+ --tds-checkbox-input-background-color:var(--t-form-background-color-error);
762
+ }
763
+
764
+ :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{
765
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
766
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error);
767
+ }
768
+
769
+ :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){
770
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
771
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
865
772
  }
866
773
 
867
- .tds-radio-group:has(input:required) legend::after{
774
+ .tds-checkbox:has(input:required) label::after{
868
775
  margin-left:.25ch;
869
776
  color:var(--t-text-color-status-error);
870
777
  content:"*";
871
778
  }
872
779
 
873
- .tds-radio-group-fields{
874
- display:flex;
875
- flex-direction:column;
876
- gap:var(--tds-radio-group-gap);
877
- align-items:flex-start;
878
- }
780
+ .tds-checkbox:has(input:disabled){
781
+ --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
782
+ --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
879
783
 
880
- .tds-radio-group-description{
784
+ --tds-checkbox-label-color:var(--t-form-color-disabled);
785
+ --tds-checkbox-description-color:var(--t-form-color-disabled);
786
+ --tds-checkbox-cursor:not-allowed;
787
+ }
788
+
789
+ .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
790
+ --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
791
+ }
792
+
793
+ .tds-checkbox-description{
881
794
  display:flex;
795
+ grid-area:2 / 2;
882
796
  gap:var(--t-spacing-half);
883
797
  align-items:flex-start;
884
798
  margin:0;
885
- font-size:var(--tds-radio-group-description-font-size);
886
- line-height:var(--tds-radio-group-description-line-height);
887
- color:var(--tds-radio-group-description-color);
799
+ font-size:var(--tds-checkbox-description-font-size);
800
+ line-height:var(--tds-checkbox-description-line-height);
801
+ color:var(--tds-checkbox-description-color);
888
802
  cursor:text;
889
803
  }
890
804
 
891
- .tds-radio-group-description .tds-radio-group-description-invalid-icon{
892
- display:var(--tds-radio-group-description-invalid-icon-display);
805
+ .tds-checkbox-description .tds-checkbox-description-invalid-icon{
806
+ display:var(--tds-checkbox-description-invalid-icon-display);
893
807
  flex-shrink:0;
894
808
  margin-top:calc(.5lh - .5em);
895
- line-height:var(--tds-radio-group-description-line-height);
809
+ line-height:var(--tds-checkbox-description-line-height);
896
810
  }
897
811
 
898
- .tds-radio-group--sm{
899
- --tds-radio-group-line-height:1.35;
900
- --tds-radio-group-font-size:var(--t-font-size-sm);
901
- --tds-radio-group-description-font-size:var(--t-font-size-xs);
902
- --tds-radio-group-description-line-height:1.3;
812
+ .tds-checkbox--sm{
813
+ --tds-checkbox-line-height:1.35;
814
+ --tds-checkbox-input-size:var(--t-element-size-sm);
815
+ --tds-checkbox-font-size:var(--t-font-size-sm);
816
+ --tds-checkbox-description-font-size:var(--t-font-size-xs);
817
+ --tds-checkbox-description-line-height:1.3;
903
818
  }
904
819
 
905
- .tds-toggle-switch{
906
- --tds-toggle-switch-font-size:var(--t-font-size-md);
907
- --tds-toggle-switch-column-gap:var(--t-spacing-1);
908
- --tds-toggle-switch-cursor:pointer;
909
- --tds-toggle-switch-display:inline-grid;
910
- --tds-toggle-switch-line-height:1.4;
911
820
 
912
- --tds-toggle-switch-label-color:var(--t-form-color);
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
+ }
913
825
 
914
- --tds-toggle-switch-track-width:var(--t-container-size-md);
915
- --tds-toggle-switch-track-outline:none;
916
- --tds-toggle-switch-track-height:var(--t-container-size-xs);
917
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color);
918
- --tds-toggle-switch-track-transition:background-color var(--t-duration-100) var(--t-ease-in-out);
826
+ [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
827
+ inline-size:1em;
828
+ block-size:2em;
829
+ }
919
830
 
920
- --tds-toggle-switch-thumb-size:var(--t-element-size-md);
921
- --tds-toggle-switch-thumb-transform:translateX(0);
922
- --tds-toggle-switch-thumb-transition:transform var(--t-duration-200) var(--t-ease-in-out);
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
+ }
923
837
 
924
- --tds-toggle-switch-description-font-size:var(--t-font-size-sm);
925
- --tds-toggle-switch-description-line-height:1.35;
926
- --tds-toggle-switch-description-color:var(--t-text-color-secondary);
927
- position:relative;
838
+ .tds-input--auto-width input{
839
+ field-sizing:content;
840
+ inline-size:auto;
841
+ }
842
+ }
928
843
 
929
- display:var(--tds-toggle-switch-display);
844
+ .tds-radio{
845
+ --tds-radio-font-size:var(--t-font-size-md);
846
+ --tds-radio-cursor:pointer;
847
+ --tds-radio-line-height:1.4;
848
+ --tds-radio-transition-property:border-width;
849
+
850
+ --tds-radio-input-size:var(--t-element-size-md);
851
+ --tds-radio-input-border-radius:var(--t-border-radius-round);
852
+ --tds-radio-input-border-color:var(--t-form-border-color);
853
+ --tds-radio-input-border-width:var(--t-form-border-width);
854
+ --tds-radio-input-background-color:transparent;
855
+
856
+ --tds-radio-label-color:var(--t-form-color);
857
+
858
+ --tds-radio-description-font-size:var(--t-font-size-sm);
859
+ --tds-radio-description-line-height:1.35;
860
+ --tds-radio-description-color:var(--t-text-color-secondary);
861
+
862
+ position:relative;
863
+ display:inline-grid;
930
864
  grid-template-columns:auto;
931
865
  grid-auto-columns:1fr;
932
- gap:var(--t-spacing-fourth) var(--tds-toggle-switch-column-gap);
866
+ gap:var(--t-spacing-fourth) var(--t-spacing-1);
867
+ line-height:var(--tds-radio-line-height);
868
+ cursor:var(--tds-radio-cursor);
933
869
  -webkit-user-select:none;
934
870
  -moz-user-select:none;
935
871
  user-select:none;
936
872
  }
937
873
 
938
- .tds-toggle-switch input[type="checkbox"]{
939
- position:absolute;
940
- width:var(--tds-toggle-switch-track-width);
941
- height:var(--tds-toggle-switch-track-height);
942
- margin:0;
874
+ .tds-radio label{
875
+ grid-area:1 / 2;
876
+ font-size:var(--tds-radio-font-size);
877
+ font-weight:var(--t-font-weight-normal);
878
+ color:var(--tds-radio-label-color);
879
+ cursor:var(--tds-radio-cursor);
880
+ }
881
+
882
+ .tds-radio input[type="radio"]{
883
+ position:relative;
884
+ width:1em;
885
+ height:1em;
886
+ margin:calc((1lh - 1em) / 2) 0 0;
887
+ font-size:var(--tds-radio-font-size);
888
+ line-height:inherit;
943
889
  -webkit-appearance:none;
944
890
  -moz-appearance:none;
945
891
  appearance:none;
946
- cursor:var(--tds-toggle-switch-cursor);
947
- outline:var(--tds-toggle-switch-track-outline);
948
- outline-offset:var(--t-focus-ring-offset);
949
- background-color:transparent;
950
- border:0;
951
- border-radius:var(--t-border-radius-round);
892
+ cursor:var(--tds-radio-cursor);
893
+ background-color:var(--tds-radio-input-background-color);
894
+ border:var(--tds-radio-input-border-width) solid var(--tds-radio-input-border-color);
895
+ border-radius:var(--tds-radio-input-border-radius);
896
+ transition-timing-function:var(--t-ease-in-out);
897
+ transition-duration:var(--t-duration-200);
898
+ transition-property:var(--tds-radio-transition-property);
952
899
  }
953
900
 
954
- :is(.tds-toggle-switch input[type="checkbox"]):focus-visible{
955
- --tds-toggle-switch-track-outline:var(--t-focus-ring-outline);
901
+ :is(.tds-radio input[type="radio"]):hover:not(:disabled){
902
+ --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
903
+ --tds-radio-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
956
904
  }
957
905
 
958
- .tds-toggle-switch label{
959
- display:inline-flex;
960
- grid-area:1 / 2;
961
- -moz-column-gap:var(--tds-toggle-switch-column-gap);
962
- column-gap:var(--tds-toggle-switch-column-gap);
963
- margin-top:-.09375em;
964
- font-size:var(--tds-toggle-switch-font-size);
965
- font-weight:var(--t-font-weight-normal);
966
- line-height:var(--tds-toggle-switch-line-height);
967
- color:var(--tds-toggle-switch-label-color);
968
- cursor:var(--tds-toggle-switch-cursor);
969
- }
906
+ :is(.tds-radio input[type="radio"]):focus-visible{
907
+ outline:var(--t-focus-ring-outline);
908
+ outline-offset:var(--t-focus-ring-offset);
909
+ }
970
910
 
971
- .tds-toggle-switch:not(:has(input:disabled)):has(input:hover){
972
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-hover);
973
- }
911
+ :is(.tds-radio input[type="radio"]):disabled{
912
+ pointer-events:none;
913
+ }
974
914
 
975
- .tds-toggle-switch:has(input:checked){
976
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on);
977
- --tds-toggle-switch-thumb-transform:translateX(calc(var(--tds-toggle-switch-track-width) - var(--tds-toggle-switch-thumb-size) - var(--t-spacing-half)));
978
- }
915
+ @media (prefers-reduced-motion: reduce){
979
916
 
980
- .tds-toggle-switch:has(input:checked):not(:has(input:disabled)):has(input:hover){
981
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on-hover);
917
+ .tds-radio input[type="radio"]{
918
+ --tds-radio-transition-property:none;
919
+ }
982
920
  }
983
921
 
984
- .tds-toggle-switch:has(input:disabled){
985
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-disabled);
986
- --tds-toggle-switch-label-color:var(--t-form-color-disabled);
987
- --tds-toggle-switch-description-color:var(--t-form-color-disabled);
988
- --tds-toggle-switch-cursor:not-allowed;
922
+ .tds-radio:has(input:checked){
923
+ --tds-radio-input-background-color:var(--t-form-background-color);
924
+ --tds-radio-input-border-color:var(--t-border-color-control-info);
925
+ --tds-radio-input-border-width:4px;
989
926
  }
990
927
 
991
- .tds-toggle-switch-track{
992
- position:relative;
993
- flex-shrink:0;
994
- width:var(--tds-toggle-switch-track-width);
995
- height:var(--tds-toggle-switch-track-height);
996
- background-color:var(--tds-toggle-switch-track-background-color);
997
- border-radius:var(--t-border-radius-round);
998
- transition:var(--tds-toggle-switch-track-transition);
999
- }
928
+ .tds-radio:has(input:checked) input:hover:not(:disabled){
929
+ --tds-radio-input-background-color:var(--t-form-background-color);
930
+ --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
931
+ }
1000
932
 
1001
- .tds-toggle-switch-track::before{
1002
- position:absolute;
1003
- top:var(--t-spacing-fourth);
1004
- left:var(--t-spacing-fourth);
1005
- width:var(--tds-toggle-switch-thumb-size);
1006
- height:var(--tds-toggle-switch-thumb-size);
1007
- content:"";
1008
- background-color:#fff;
1009
- border-radius:var(--t-border-radius-round);
1010
- transform:var(--tds-toggle-switch-thumb-transform);
1011
- transition:var(--tds-toggle-switch-thumb-transition);
933
+ .tds-radio:has(input:user-invalid){
934
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
1012
935
  }
1013
936
 
1014
- @media (prefers-reduced-motion: reduce){
937
+ .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
938
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
939
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
940
+ }
1015
941
 
1016
- .tds-toggle-switch-track{
1017
- --tds-toggle-switch-track-transition:none;
1018
- --tds-toggle-switch-thumb-transition:none;
1019
- }
942
+ .tds-radio:has(input:disabled){
943
+ --tds-radio-input-background-color:var(--t-form-background-color-disabled);
944
+ --tds-radio-input-border-color:var(--t-form-border-color-disabled);
945
+
946
+ --tds-radio-label-color:var(--t-form-color-disabled);
947
+ --tds-radio-description-color:var(--t-form-color-disabled);
948
+ --tds-radio-cursor:not-allowed;
1020
949
  }
1021
950
 
1022
- .tds-toggle-switch-description{
951
+ .tds-radio:has(input:disabled) input:checked{
952
+ --tds-radio-input-background-color:var(--t-form-background-color);
953
+ --tds-radio-input-border-color:var(--t-form-border-color-disabled);
954
+ }
955
+
956
+ .tds-radio-description{
1023
957
  display:flex;
1024
958
  grid-area:2 / 2;
959
+ gap:var(--t-spacing-half);
1025
960
  align-items:flex-start;
1026
961
  margin:0;
1027
- font-size:var(--tds-toggle-switch-description-font-size);
1028
- line-height:var(--tds-toggle-switch-description-line-height);
1029
- color:var(--tds-toggle-switch-description-color);
962
+ font-size:var(--tds-radio-description-font-size);
963
+ line-height:var(--tds-radio-description-line-height);
964
+ color:var(--tds-radio-description-color);
1030
965
  cursor:text;
1031
966
  }
1032
967
 
1033
- .tds-toggle-switch--sm{
1034
- --tds-toggle-switch-font-size:var(--t-font-size-sm);
1035
- --tds-toggle-switch-line-height:1.35;
1036
- --tds-toggle-switch-track-height:var(--t-element-size-lg);
1037
- --tds-toggle-switch-thumb-size:var(--t-element-size-sm);
1038
- --tds-toggle-switch-description-font-size:var(--t-font-size-xs);
1039
- --tds-toggle-switch-description-line-height:1.3;
968
+ .tds-radio--sm{
969
+ --tds-radio-line-height:1.35;
970
+ --tds-radio-input-size:var(--t-element-size-sm);
971
+ --tds-radio-font-size:var(--t-font-size-sm);
972
+ --tds-radio-description-font-size:var(--t-font-size-xs);
973
+ --tds-radio-description-line-height:1.3;
1040
974
  }
1041
975
 
1042
- .tds-toggle-switch--hide-label{
1043
- --tds-toggle-switch-display:inline-flex;
976
+ .tds-input:has(textarea){
977
+ --tds-input-padding-block:6px;
978
+ --tds-input-resizer-size:var(--t-element-size-sm);
979
+ --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");
1044
980
  }
1045
981
 
1046
- .tds-select{
1047
- --tds-select-border-color:var(--t-form-border-color);
1048
- --tds-select-border-color-hover:var(--t-form-border-color-hover);
1049
- --tds-select-border-color-active:var(--t-form-border-color-hover);
1050
- --tds-select-background-color:var(--t-form-background-color);
1051
- --tds-select-color:var(--t-form-color);
1052
- --tds-select-placeholder-color:var(--t-form-placeholder-color);
1053
- --tds-select-font-size:var(--t-font-size-md);
1054
- --tds-select-min-height:var(--t-container-size-md);
1055
- --tds-select-padding-block:6px;
1056
- --tds-select-description-color:var(--t-text-color-secondary);
1057
- --tds-select-description-invalid-icon-display:none;
1058
- --tds-select-transition-property:background-color, border-color, outline-color, outline-offset;
1059
- --tds-select-background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTEzLDZsLTUsNWwtNSwtNXoiIGZpbGw9IiMzRDNEM0QiLz48L3N2Zz4=");
1060
- --tds-select-caret-size:1em;
1061
- --tds-select-caret-inline-offset:.75em;
1062
- --tds-select-caret-transition:transform var(--t-duration-300) var(--t-ease-in-out);
1063
-
1064
- --tds-select-dropdown-background-color:var(--t-surface-color-card);
1065
- --tds-select-dropdown-border:1px solid var(--t-border-color);
1066
- --tds-select-dropdown-padding:var(--t-spacing-1);
1067
- --tds-select-dropdown-margin-block:5px;
1068
- --tds-select-dropdown-scrollbar-color:#0004 #0000;
1069
- --tds-select-dropdown-scrollbar-width:thin;
1070
- --tds-select-dropdown-border-radius:var(--t-border-radius);
1071
- --tds-select-dropdown-box-shadow:hsl(0, 0%, 0%, .05) 0 10px 15px -3px, hsl(0, 0%, 0%, .05) 0 4px 6px -4px;
1072
- --tds-select-dropdown-scroll-behavior:smooth;
1073
- --tds-select-dropdown-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;
1074
- --tds-select-dropdown-transition-exit:opacity var(--t-duration-200) var(--t-ease-in), transform var(--t-duration-200) var(--t-ease-in), display var(--t-duration-200) allow-discrete, overlay var(--t-duration-200) allow-discrete;
1075
- --tds-select-dropdown-closed-opacity:0;
1076
- --tds-select-dropdown-open-opacity:1;
1077
- --tds-select-dropdown-closed-transform:translateY(-8px);
1078
- --tds-select-dropdown-open-transform:translateY(0);
1079
-
1080
- --tds-select-option-gap:var(--t-spacing-1);
1081
- --tds-select-option-padding-block:var(--t-spacing-1);
1082
- --tds-select-option-padding-inline:var(--t-spacing-2) var(--t-spacing-1);
1083
- --tds-select-option-font-size:1rem;
1084
- --tds-select-option-color:var(--t-text-color);
1085
- --tds-select-option-background-hover:var(--t-fill-color-neutral-070);
1086
- --tds-select-option-background-active:var(--t-fill-color-button-interaction-ghost-active);
1087
- --tds-select-option-border-radius:var(--t-border-radius);
1088
-
1089
- --tds-select-group-label-padding-block-start:var(--t-spacing-2);
1090
- --tds-select-group-label-padding-block:var(--tds-select-group-label-padding-block-start) var(--t-spacing-1);
1091
- --tds-select-group-label-padding-inline:var(--t-spacing-1);
1092
- --tds-select-group-label-font-size:var(--t-font-size-sm);
1093
- --tds-select-group-label-font-weight:var(--t-font-weight-semibold);
1094
- --tds-select-group-label-letter-spacing:0;
1095
- --tds-select-group-label-color:var(--t-text-color-secondary);
1096
- --tds-select-group-label-color-stuck:var(--t-text-color-headline);
1097
- --tds-select-group-label-background:var(--tds-select-dropdown-background-color);
1098
- --tds-select-group-label-transition:color var(--t-duration-200) var(--t-ease-in-out);
982
+ @supports (x: attr(x type(*))){
1099
983
 
1100
- position:relative;
1101
- display:flex;
1102
- flex-direction:column;
1103
- gap:var(--t-spacing-half);
984
+ .tds-input:has(textarea){
985
+ --tds-input-min-height:calc((attr(rows type(<number>), 3) * 1lh) + (var(--tds-input-padding-block) * 2) + 2px);
1104
986
  }
1105
-
1106
- .tds-select :is(label,.tds-select-label){
1107
- font-size:var(--t-font-size-md);
1108
- font-weight:var(--t-font-weight-normal);
1109
- color:var(--t-text-color);
1110
- cursor:default;
1111
- }
1112
-
1113
- .tds-select :is(select,button){
1114
- position:relative;
1115
- place-items:center;
1116
- inline-size:100%;
1117
- min-block-size:var(--tds-select-min-height);
1118
- padding-block:var(--tds-select-padding-block);
1119
- padding-inline:var(--t-spacing-1);
1120
- padding-inline-end:calc(var(--t-spacing-1) + var(--tds-select-caret-size) + .5em);
1121
- font-family:inherit;
1122
- font-size:var(--tds-select-font-size);
1123
- line-height:1;
1124
- color:var(--tds-select-color);
1125
- text-align:left;
1126
- -webkit-appearance:none;
1127
- -moz-appearance:none;
1128
- appearance:none;
1129
- cursor:var(--tds-select-cursor, default);
1130
- outline:var(--t-focus-ring-width) solid transparent;
1131
- outline-offset:0;
1132
- background-color:var(--tds-select-background-color);
1133
- background-image:var(--tds-select-background-image);
1134
- background-repeat:no-repeat;
1135
- background-position:right var(--tds-select-caret-inline-offset) top 50%;
1136
- background-size:var(--tds-select-caret-size);
1137
- border:var(--t-form-border-width) solid var(--tds-select-border-color);
1138
- border-radius:var(--t-form-border-radius);
1139
- transition-timing-function:var(--t-ease-in-out);
1140
- transition-duration:var(--t-duration-300);
1141
- transition-property:var(--tds-select-transition-property);
1142
987
  }
1143
988
 
1144
- :is(.tds-select :is(select,button)):hover:not(:disabled,:focus,:focus-visible,:focus-within,:active,:open){
1145
- border-color:var(--tds-select-border-color-hover);
1146
- }
1147
-
1148
- :is(.tds-select :is(select,button)):focus{
1149
- outline-color:var(--t-focus-ring-color);
1150
- outline-offset:var(--t-focus-ring-offset);
1151
- border-color:var(--tds-select-border-color-active);
989
+ .tds-input.tds-textarea--resize-vertical textarea{
990
+ resize:vertical;
1152
991
  }
1153
992
 
1154
- :is(.tds-select :is(select,button)):required:invalid,:is(.tds-select :is(select,button)):has(option[hidden][disabled][value=""]:checked){
1155
- color:var(--tds-select-placeholder-color);
993
+ .tds-input.tds-textarea--resize-none textarea{
994
+ resize:none;
1156
995
  }
1157
996
 
1158
- .tds-select:has(select:user-invalid,[aria-invalid="true"]),.tds-select.tds-select--invalid{
1159
- --tds-select-border-color:var(--t-form-border-color-error);
1160
- --tds-select-border-color-hover:var(--t-form-border-color-error-hover);
1161
- --tds-select-border-color-active:var(--t-form-border-color-error-hover);
1162
- --tds-select-background-color:var(--t-form-background-color-error);
1163
- --tds-select-description-color:var(--t-text-color-status-error);
1164
- --tds-select-description-invalid-icon-display:inline-block;
1165
- }
1166
-
1167
- .tds-select:has(select:required,[aria-required="true"]) :is(label,.tds-select-label)::after{
1168
- margin-left:.25ch;
1169
- color:var(--t-text-color-status-error);
1170
- content:"*";
997
+ .tds-input.tds-textarea--resize-auto textarea{
998
+ resize:vertical;
1171
999
  }
1172
1000
 
1173
- .tds-select:has(:is(select,button[role="combobox"]):is(:disabled,[aria-disabled="true"])){
1174
- --tds-select-border-color:var(--t-form-border-color-disabled);
1175
- --tds-select-background-color:var(--t-form-background-color-disabled);
1176
- --tds-select-color:var(--t-form-color-disabled);
1177
- --tds-select-cursor:not-allowed;
1178
- }
1179
-
1180
- .tds-select:has( > [popover]:popover-open) > button{
1181
- border-color:var(--tds-select-border-color-active);
1182
- }
1183
-
1184
- :is(.tds-select:has( > [popover]:popover-open) > button)::after{
1185
- transform:rotate(.5turn);
1001
+ @supports (field-sizing: content){
1002
+ .tds-input.tds-textarea--resize-auto textarea{
1003
+ field-sizing:content;
1004
+ resize:none;
1005
+ }
1186
1006
  }
1187
1007
 
1188
- .tds-select :is(hr,li[role="separator"]){
1189
- margin-block:var(--t-spacing-half);
1190
- color:var(--tds-select-border-color);
1191
- border:0;
1192
- border-top:1px solid;
1193
- }
1008
+ .tds-input textarea{
1009
+ --tds-input-scrollbar-thumb-color-default:var(--t-fill-color-neutral-040);
1010
+ --tds-input-scrollbar-thumb-color-hidden:transparent;
1011
+ --tds-input-scrollbar-thumb-color-hover:var(--t-fill-color-neutral-030);
1012
+ --tds-input-scrollbar-thumb-color-thumb-hover:var(--t-fill-color-neutral-020);
1013
+ --tds-input-scrollbar-thumb-color-thumb-active:var(--t-fill-color-neutral-010);
1014
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-default);
1015
+ --tds-input-scrollbar-surface-color:rgba(0, 0, 0, 0);
1016
+ --tds-input-scrollbar-thumb-border-radius:999px;
1017
+ --tds-input-scrollbar-thumb-border-width:3px;
1018
+ --tds-input-scrollbar-track-margin-block:.125rem;
1019
+ scrollbar-color:initial;
1020
+ transition-timing-function:var(--t-ease-in-out);
1021
+ transition-duration:var(--t-duration-200);
1022
+ transition-property:var(--tds-input-transition-property), --tds-input-scrollbar-thumb-color;
1023
+ }
1194
1024
 
1195
- .tds-select :is(li[role="option"],option:not([hidden])){
1196
- display:block;
1197
- padding-block:var(--tds-select-option-padding-block);
1198
- padding-inline:var(--tds-select-option-padding-inline);
1199
- overflow:hidden;
1200
- text-overflow:ellipsis;
1201
- font-size:var(--tds-select-option-font-size);
1202
- color:var(--tds-select-option-color);
1203
- white-space:nowrap;
1204
- cursor:default;
1205
- border-radius:var(--tds-select-option-border-radius);
1206
- }
1025
+ @media (pointer: fine){
1026
+ :is(.tds-input textarea)::-webkit-scrollbar{
1027
+ width:12px;
1028
+ height:12px;
1029
+ cursor:default;
1030
+ }
1207
1031
 
1208
- :is(.tds-select :is(li[role="option"],option:not([hidden]))):focus-visible{
1209
- outline:none;
1032
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb{
1033
+ cursor:default;
1034
+ background:var(--tds-input-scrollbar-thumb-color);
1035
+ background-clip:content-box;
1036
+ border:var(--tds-input-scrollbar-thumb-border-width) solid var(--tds-input-scrollbar-surface-color);
1037
+ border-radius:var(--tds-input-scrollbar-thumb-border-radius);
1210
1038
  }
1211
1039
 
1212
- :is(.tds-select :is(li[role="option"],option:not([hidden]))):is(:focus,:hover,.tds-select-option--active):not([disabled],[aria-disabled="true"]){
1213
- background:var(--tds-select-option-background-hover);
1040
+ :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1041
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
1214
1042
  }
1215
1043
 
1216
- :is(.tds-select :is(li[role="option"],option:not([hidden]))):is([aria-selected="true"],:checked):not([disabled],[aria-disabled="true"]){
1217
- background:var(--tds-select-option-background-active);
1044
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
1045
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
1218
1046
  }
1219
1047
 
1220
- :is(.tds-select :is(li[role="option"],option:not([hidden]))):is([aria-disabled="true"],:disabled){
1221
- color:var(--t-form-color-disabled);
1222
- cursor:not-allowed;
1048
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
1049
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
1223
1050
  }
1224
1051
 
1225
- :is(.tds-select :is(li[role="option"],option:not([hidden]))):is([aria-disabled="true"],:disabled):is(:focus,:hover){
1226
- background:transparent;
1227
- }
1052
+ :is(.tds-input textarea)::-webkit-scrollbar-corner{
1053
+ background:var(--tds-input-scrollbar-surface-color);
1054
+ }
1228
1055
 
1229
- .tds-select :is(li[role="presentation"],legend){
1230
- position:sticky;
1231
- inset-block-start:calc(var(--tds-select-dropdown-padding) * -1);
1232
- z-index:1;
1233
- float:inline-start;
1234
- inline-size:100%;
1235
- padding-block:var(--tds-select-group-label-padding-block);
1236
- padding-inline:var(--tds-select-group-label-padding-inline);
1237
- container-type:scroll-state;
1238
- font-size:var(--tds-select-group-label-font-size);
1239
- font-weight:var(--tds-select-group-label-font-weight);
1240
- letter-spacing:var(--tds-select-group-label-letter-spacing);
1241
- background:var(--tds-select-group-label-background);
1242
- text-box:trim-both cap alphabetic;
1243
- }
1056
+ :is(.tds-input textarea)::-webkit-resizer{
1057
+ background:var(--tds-input-resizer-icon) no-repeat;
1058
+ background-position:right bottom;
1059
+ background-size:var(--tds-input-resizer-size) var(--tds-input-resizer-size);
1060
+ }
1244
1061
 
1245
- :is(.tds-select :is(li[role="presentation"],legend)) span{
1246
- display:inline-flex;
1247
- gap:var(--t-spacing-half);
1248
- align-items:center;
1249
- color:var(--tds-select-group-label-color);
1250
- transition:var(--tds-select-group-label-transition);
1062
+ :is(.tds-input textarea)::-webkit-scrollbar-track{
1063
+ margin-block:var(--tds-input-scrollbar-track-margin-block);
1064
+ cursor:default;
1251
1065
  }
1252
1066
 
1253
- @container scroll-state(stuck){
1067
+ @supports (-moz-appearance: none){
1068
+ :is(.tds-input textarea){
1069
+ scrollbar-color:var(--tds-input-scrollbar-thumb-color-default) var(--tds-input-scrollbar-surface-color);
1070
+ scrollbar-width:thin;
1071
+ }
1254
1072
 
1255
- :is(.tds-select :is(li[role="presentation"],legend)) span{
1256
- color:var(--tds-select-group-label-color-stuck);
1073
+ @media (hover){
1074
+ :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1075
+ scrollbar-color:var(--tds-input-scrollbar-thumb-color-hover) var(--tds-input-scrollbar-surface-color);
1076
+ }
1077
+ }
1257
1078
  }
1079
+ }
1258
1080
 
1259
- @media (forced-colors: active){
1081
+ .tds-radio-group{
1082
+ --tds-radio-group-font-size:var(--t-font-size-md);
1083
+ --tds-radio-group-line-height:1.4;
1084
+ --tds-radio-group-gap:var(--t-spacing-1);
1260
1085
 
1261
- :is(.tds-select :is(li[role="presentation"],legend)) span{
1262
- color:var(--tds-select-group-label-color-stuck);
1086
+ --tds-radio-group-legend-margin-bottom:var(--tds-radio-group-gap);
1087
+
1088
+ --tds-radio-group-description-font-size:var(--t-font-size-sm);
1089
+ --tds-radio-group-description-line-height:1.35;
1090
+ --tds-radio-group-description-color:var(--t-text-color-secondary);
1091
+ --tds-radio-group-description-invalid-icon-display:none;
1092
+ display:flex;
1093
+ flex-direction:column;
1094
+ gap:var(--tds-radio-group-gap);
1095
+ padding:0;
1096
+ margin:0;
1097
+
1098
+ font-size:var(--tds-radio-group-font-size);
1099
+ line-height:var(--tds-radio-group-line-height);
1100
+ border:0;
1101
+ }
1102
+
1103
+ .tds-radio-group legend{
1104
+ padding:0;
1105
+ margin-bottom:var(--tds-radio-group-legend-margin-bottom);
1106
+ }
1107
+
1108
+ .tds-radio-group:has(.tds-radio-group-description){
1109
+ --tds-radio-group-legend-margin-bottom:var(--t-spacing-fourth);
1110
+ }
1111
+
1112
+ .tds-radio-group[aria-invalid="true"]{
1113
+ --tds-radio-group-description-color:var(--t-text-color-status-error);
1114
+ --tds-radio-group-description-invalid-icon-display:inline-block;
1115
+ }
1116
+
1117
+ .tds-radio-group[aria-invalid="true"] .tds-radio{
1118
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
1263
1119
  }
1264
- }
1120
+
1121
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
1122
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1123
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
1265
1124
  }
1266
1125
 
1267
- .tds-select.tds-select--lg{
1268
- --tds-select-min-height:var(--t-container-size-lg);
1269
- --tds-select-font-size:var(--t-font-size-lg);
1270
- }
1126
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
1127
+ --tds-radio-input-background-color:var(--t-form-background-color);
1128
+ }
1271
1129
 
1272
- @media (prefers-reduced-motion: reduce){
1130
+ .tds-radio-group:has(input:required) legend::after{
1131
+ margin-left:.25ch;
1132
+ color:var(--t-text-color-status-error);
1133
+ content:"*";
1134
+ }
1273
1135
 
1274
- .tds-select{
1275
- --tds-select-transition-property:none;
1276
- --tds-select-dropdown-transition-enter:none;
1277
- --tds-select-dropdown-transition-exit:none;
1278
- --tds-select-dropdown-scroll-behavior:auto;
1279
- --tds-select-dropdown-closed-transform:none;
1280
- --tds-select-dropdown-open-transform:none;
1281
- --tds-select-caret-transition:none;
1136
+ .tds-radio-group-fields{
1137
+ display:flex;
1138
+ flex-direction:column;
1139
+ gap:var(--tds-radio-group-gap);
1140
+ align-items:flex-start;
1282
1141
  }
1283
- }
1284
1142
 
1285
- .tds-select-description{
1143
+ .tds-radio-group-description{
1286
1144
  display:flex;
1287
1145
  gap:var(--t-spacing-half);
1288
1146
  align-items:flex-start;
1289
1147
  margin:0;
1290
- font-size:var(--t-font-size-sm);
1291
- line-height:1.35;
1292
- color:var(--tds-select-description-color, var(--t-text-color-secondary));
1148
+ font-size:var(--tds-radio-group-description-font-size);
1149
+ line-height:var(--tds-radio-group-description-line-height);
1150
+ color:var(--tds-radio-group-description-color);
1293
1151
  cursor:text;
1294
1152
  }
1295
1153
 
1296
- .tds-select-description .tds-select-description-invalid-icon{
1297
- display:var(--tds-select-description-invalid-icon-display, none);
1154
+ .tds-radio-group-description .tds-radio-group-description-invalid-icon{
1155
+ display:var(--tds-radio-group-description-invalid-icon-display);
1298
1156
  flex-shrink:0;
1299
- margin-block-start:calc(.5lh - .5em);
1300
- line-height:1.35;
1157
+ margin-top:calc(.5lh - .5em);
1158
+ line-height:var(--tds-radio-group-description-line-height);
1301
1159
  }
1302
1160
 
1303
- .tds-select > .tds-select-hidden-select{
1304
- position:absolute;
1305
- inline-size:1px;
1306
- block-size:1px;
1307
- padding:0;
1308
- margin:0;
1309
- pointer-events:none;
1310
- opacity:0;
1161
+ .tds-radio-group--sm{
1162
+ --tds-radio-group-line-height:1.35;
1163
+ --tds-radio-group-font-size:var(--t-font-size-sm);
1164
+ --tds-radio-group-description-font-size:var(--t-font-size-xs);
1165
+ --tds-radio-group-description-line-height:1.3;
1311
1166
  }
1312
1167
 
1313
- .tds-select:has( > button) > button{
1314
- display:block;
1315
- padding-inline-end:calc(var(--tds-select-caret-size) + var(--tds-select-caret-inline-offset) + .75ch);
1316
- overflow:hidden;
1317
- text-overflow:ellipsis;
1318
- color:var(--tds-select-placeholder-color);
1319
- white-space:nowrap;
1320
- background-image:none;
1321
- transition:background-color var(--t-duration-300) var(--t-ease-in-out), border-color var(--t-duration-300) var(--t-ease-in-out), outline-color var(--t-duration-300) var(--t-ease-in-out), outline-offset var(--t-duration-300) var(--t-ease-in-out), transform var(--t-duration-100) var(--t-ease-in-out);
1322
- -webkit-tap-highlight-color:transparent;
1323
- }
1168
+ .tds-toggle-switch{
1169
+ --tds-toggle-switch-font-size:var(--t-font-size-md);
1170
+ --tds-toggle-switch-column-gap:var(--t-spacing-1);
1171
+ --tds-toggle-switch-cursor:pointer;
1172
+ --tds-toggle-switch-display:inline-grid;
1173
+ --tds-toggle-switch-line-height:1.4;
1324
1174
 
1325
- :is(.tds-select:has( > button) > button)::after{
1326
- position:absolute;
1327
- inset-block:0;
1328
- inset-inline-end:var(--tds-select-caret-inline-offset);
1329
- width:var(--tds-select-caret-size);
1330
- height:var(--tds-select-caret-size);
1331
- margin-block:auto;
1332
- pointer-events:none;
1333
- content:var(--tds-select-background-image);
1334
- transform:rotate(0);
1335
- transition:var(--tds-select-caret-transition);
1336
- }
1175
+ --tds-toggle-switch-label-color:var(--t-form-color);
1337
1176
 
1338
- .tds-select:has( > button):has([role="option"][aria-selected="true"]) > button{
1339
- color:var(--tds-select-color);
1340
- }
1177
+ --tds-toggle-switch-track-width:var(--t-container-size-md);
1178
+ --tds-toggle-switch-track-outline:none;
1179
+ --tds-toggle-switch-track-height:var(--t-container-size-xs);
1180
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color);
1181
+ --tds-toggle-switch-track-transition:background-color var(--t-duration-100) var(--t-ease-in-out);
1341
1182
 
1342
- .tds-select:has( > button) [popover]{
1343
- inset:auto;
1344
- inline-size:-moz-max-content;
1345
- inline-size:max-content;
1346
- min-inline-size:anchor-size(width);
1347
- max-inline-size:100vi;
1348
- max-block-size:min(50vh, 20rem);
1349
- padding:var(--tds-select-dropdown-padding);
1350
- margin-block:var(--tds-select-dropdown-margin-block);
1351
- position-area:block-end span-inline-start;
1352
- position-try-fallbacks:flip-block, flip-inline;
1353
- overflow:auto;
1354
- overflow-x:hidden;
1355
- scroll-behavior:var(--tds-select-dropdown-scroll-behavior);
1356
- -webkit-user-select:none;
1357
- -moz-user-select:none;
1358
- user-select:none;
1359
- scroll-padding-top:calc(var(--tds-select-group-label-padding-block-start) + var(--tds-select-group-label-font-size) + var(--t-spacing-2));
1360
- scrollbar-color:var(--tds-select-dropdown-scrollbar-color);
1361
- scrollbar-width:var(--tds-select-dropdown-scrollbar-width);
1362
- background:var(--tds-select-dropdown-background-color);
1363
- border:var(--tds-select-dropdown-border);
1364
- border-radius:var(--tds-select-dropdown-border-radius);
1365
- box-shadow:var(--tds-select-dropdown-box-shadow);
1366
- opacity:var(--tds-select-dropdown-open-opacity);
1367
- transform:var(--tds-select-dropdown-open-transform);
1368
- transition:var(--tds-select-dropdown-transition-enter);
1183
+ --tds-toggle-switch-thumb-size:var(--t-element-size-md);
1184
+ --tds-toggle-switch-thumb-transform:translateX(0);
1185
+ --tds-toggle-switch-thumb-transition:transform var(--t-duration-200) var(--t-ease-in-out);
1186
+
1187
+ --tds-toggle-switch-description-font-size:var(--t-font-size-sm);
1188
+ --tds-toggle-switch-description-line-height:1.35;
1189
+ --tds-toggle-switch-description-color:var(--t-text-color-secondary);
1190
+ position:relative;
1191
+
1192
+ display:var(--tds-toggle-switch-display);
1193
+ grid-template-columns:auto;
1194
+ grid-auto-columns:1fr;
1195
+ gap:var(--t-spacing-fourth) var(--tds-toggle-switch-column-gap);
1196
+ -webkit-user-select:none;
1197
+ -moz-user-select:none;
1198
+ user-select:none;
1199
+ }
1200
+
1201
+ .tds-toggle-switch input[type="checkbox"]{
1202
+ position:absolute;
1203
+ width:var(--tds-toggle-switch-track-width);
1204
+ height:var(--tds-toggle-switch-track-height);
1205
+ margin:0;
1206
+ -webkit-appearance:none;
1207
+ -moz-appearance:none;
1208
+ appearance:none;
1209
+ cursor:var(--tds-toggle-switch-cursor);
1210
+ outline:var(--tds-toggle-switch-track-outline);
1211
+ outline-offset:var(--t-focus-ring-offset);
1212
+ background-color:transparent;
1213
+ border:0;
1214
+ border-radius:var(--t-border-radius-round);
1369
1215
  }
1370
1216
 
1371
- :is(.tds-select:has( > button) [popover]):not(:popover-open){
1372
- opacity:var(--tds-select-dropdown-closed-opacity);
1373
- transform:var(--tds-select-dropdown-closed-transform);
1374
- transition:var(--tds-select-dropdown-transition-exit);
1217
+ :is(.tds-toggle-switch input[type="checkbox"]):focus-visible{
1218
+ --tds-toggle-switch-track-outline:var(--t-focus-ring-outline);
1375
1219
  }
1376
1220
 
1377
- :is(.tds-select:has( > button) [popover]) ul{
1378
- padding:0;
1379
- margin:0;
1380
- list-style:none;
1381
- }
1221
+ .tds-toggle-switch label{
1222
+ display:inline-flex;
1223
+ grid-area:1 / 2;
1224
+ -moz-column-gap:var(--tds-toggle-switch-column-gap);
1225
+ column-gap:var(--tds-toggle-switch-column-gap);
1226
+ margin-top:-.09375em;
1227
+ font-size:var(--tds-toggle-switch-font-size);
1228
+ font-weight:var(--t-font-weight-normal);
1229
+ line-height:var(--tds-toggle-switch-line-height);
1230
+ color:var(--tds-toggle-switch-label-color);
1231
+ cursor:var(--tds-toggle-switch-cursor);
1232
+ }
1382
1233
 
1383
- @starting-style{
1384
- :is(.tds-select:has( > button) [popover]):popover-open{
1385
- opacity:var(--tds-select-dropdown-closed-opacity);
1386
- transform:var(--tds-select-dropdown-closed-transform);
1387
- }
1388
- }
1234
+ .tds-toggle-switch:not(:has(input:disabled)):has(input:hover){
1235
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-hover);
1236
+ }
1389
1237
 
1390
- @supports ((-webkit-appearance: base-select) or (-moz-appearance: base-select) or (appearance: base-select)){
1391
- .tds-select select:has(> button){
1392
- padding-inline-end:0;
1393
- background-image:none;
1238
+ .tds-toggle-switch:has(input:checked){
1239
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on);
1240
+ --tds-toggle-switch-thumb-transform:translateX(calc(var(--tds-toggle-switch-track-width) - var(--tds-toggle-switch-thumb-size) - var(--t-spacing-half)));
1394
1241
  }
1395
- @media (hover) and (pointer: fine){
1396
- :is(.tds-select select:has( > button)),:is(.tds-select select:has( > button))::picker(select){
1397
- padding-block:0;
1398
- -webkit-appearance:base-select;
1399
- -moz-appearance:base-select;
1400
- appearance:base-select;
1401
- }
1402
- }
1403
- :is(.tds-select select:has( > button))::picker-icon{
1404
- flex-shrink:0;
1405
- width:var(--tds-select-caret-size);
1406
- height:var(--tds-select-caret-size);
1407
- margin-inline-end:var(--tds-select-caret-inline-offset);
1408
- content:var(--tds-select-background-image);
1409
- transition:var(--tds-select-caret-transition);
1410
- }
1411
1242
 
1412
- :is(.tds-select select:has( > button))::picker(select):not(:popover-open){
1413
- opacity:var(--tds-select-dropdown-closed-opacity);
1414
- transform:var(--tds-select-dropdown-closed-transform);
1415
- transition:var(--tds-select-dropdown-transition-exit);
1243
+ .tds-toggle-switch:has(input:checked):not(:has(input:disabled)):has(input:hover){
1244
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on-hover);
1416
1245
  }
1417
1246
 
1418
- :is(.tds-select select:has( > button)):open,:is(.tds-select select:has( > button)):focus-within{
1419
- outline-color:var(--t-focus-ring-color);
1420
- outline-offset:var(--t-focus-ring-offset);
1421
- border-color:var(--tds-select-border-color-active);
1422
- }
1247
+ .tds-toggle-switch:has(input:disabled){
1248
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-disabled);
1249
+ --tds-toggle-switch-label-color:var(--t-form-color-disabled);
1250
+ --tds-toggle-switch-description-color:var(--t-form-color-disabled);
1251
+ --tds-toggle-switch-cursor:not-allowed;
1252
+ }
1423
1253
 
1424
- :is(.tds-select select:has( > button)):open::picker-icon{
1425
- opacity:1;
1426
- transform:rotate(.5turn);
1427
- }
1254
+ .tds-toggle-switch-track{
1255
+ position:relative;
1256
+ flex-shrink:0;
1257
+ width:var(--tds-toggle-switch-track-width);
1258
+ height:var(--tds-toggle-switch-track-height);
1259
+ background-color:var(--tds-toggle-switch-track-background-color);
1260
+ border-radius:var(--t-border-radius-round);
1261
+ transition:var(--tds-toggle-switch-track-transition);
1262
+ }
1428
1263
 
1429
- :is(.tds-select select:has( > button)) selectedcontent{
1430
- overflow:hidden;
1431
- text-overflow:ellipsis;
1432
- line-height:calc(var(--tds-select-min-height) - 2px);
1433
- white-space:nowrap;
1434
- }
1264
+ .tds-toggle-switch-track::before{
1265
+ position:absolute;
1266
+ top:var(--t-spacing-fourth);
1267
+ left:var(--t-spacing-fourth);
1268
+ width:var(--tds-toggle-switch-thumb-size);
1269
+ height:var(--tds-toggle-switch-thumb-size);
1270
+ content:"";
1271
+ background-color:#fff;
1272
+ border-radius:var(--t-border-radius-round);
1273
+ transform:var(--tds-toggle-switch-thumb-transform);
1274
+ transition:var(--tds-toggle-switch-thumb-transition);
1275
+ }
1435
1276
 
1436
- :is(.tds-select select:has( > button)):has(option[hidden][disabled][value=""]:checked) > button{
1437
- color:var(--tds-select-placeholder-color);
1438
- }
1277
+ @media (prefers-reduced-motion: reduce){
1439
1278
 
1440
- :is(.tds-select select:has( > button))::picker(select){
1441
- inset:auto;
1442
- inline-size:-moz-max-content;
1443
- inline-size:max-content;
1444
- min-inline-size:anchor-size(width);
1445
- max-inline-size:100vi;
1446
- padding:var(--tds-select-dropdown-padding);
1447
- margin-block:var(--tds-select-dropdown-margin-block);
1448
- position-try-fallbacks:flip-block, flip-inline;
1449
- overflow:auto;
1450
- overflow-x:hidden;
1451
- scroll-behavior:var(--tds-select-dropdown-scroll-behavior);
1452
- -webkit-user-select:none;
1453
- -moz-user-select:none;
1454
- user-select:none;
1455
- scrollbar-color:var(--tds-select-dropdown-scrollbar-color);
1456
- scrollbar-width:var(--tds-select-dropdown-scrollbar-width);
1457
- background:var(--tds-select-dropdown-background-color);
1458
- border:var(--tds-select-dropdown-border);
1459
- border-radius:var(--tds-select-dropdown-border-radius);
1460
- box-shadow:var(--tds-select-dropdown-box-shadow);
1461
- opacity:var(--tds-select-dropdown-open-opacity);
1462
- transform:var(--tds-select-dropdown-open-transform);
1463
- transition:var(--tds-select-dropdown-transition-enter);
1464
- }
1279
+ .tds-toggle-switch-track{
1280
+ --tds-toggle-switch-track-transition:none;
1281
+ --tds-toggle-switch-thumb-transition:none;
1282
+ }
1283
+ }
1465
1284
 
1466
- :is(.tds-select select:has( > button)) option::checkmark{
1467
- display:none;
1468
- }
1285
+ .tds-toggle-switch-description{
1286
+ display:flex;
1287
+ grid-area:2 / 2;
1288
+ align-items:flex-start;
1289
+ margin:0;
1290
+ font-size:var(--tds-toggle-switch-description-font-size);
1291
+ line-height:var(--tds-toggle-switch-description-line-height);
1292
+ color:var(--tds-toggle-switch-description-color);
1293
+ cursor:text;
1294
+ }
1469
1295
 
1470
- @starting-style{
1471
- :is(.tds-select select:has( > button))::picker(select):popover-open{
1472
- opacity:var(--tds-select-dropdown-closed-opacity);
1473
- transform:var(--tds-select-dropdown-closed-transform);
1474
- }
1475
- }
1296
+ .tds-toggle-switch--sm{
1297
+ --tds-toggle-switch-font-size:var(--t-font-size-sm);
1298
+ --tds-toggle-switch-line-height:1.35;
1299
+ --tds-toggle-switch-track-height:var(--t-element-size-lg);
1300
+ --tds-toggle-switch-thumb-size:var(--t-element-size-sm);
1301
+ --tds-toggle-switch-description-font-size:var(--t-font-size-xs);
1302
+ --tds-toggle-switch-description-line-height:1.3;
1476
1303
  }
1477
1304
 
1478
- @layer t-critical{
1479
- tds-page-header:not(.hydrated){
1480
- display:none;
1481
- }
1305
+ .tds-toggle-switch--hide-label{
1306
+ --tds-toggle-switch-display:inline-flex;
1482
1307
  }
1483
1308
 
1484
- @layer t-component{
1485
- .tds-page-header{
1486
- --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
1487
- --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
1488
- --tds-page-header-color:var(--t-text-color);
1489
- --tds-page-header-bottom-border-color:var(--t-surface-color-canvas);
1490
- --tds-page-header-headline-color:var(--t-text-color-headline);
1491
- --tds-page-header-headline-font-size:var(--t-font-size-2xl);
1492
- --tds-page-header-padding-x:var(--t-spacing-2);
1493
- --tds-page-header-padding-y:var(--t-spacing-2);
1494
- --tds-page-header-nav-padding-x:var(--tds-page-header-padding-x, var(--t-spacing-3));
1495
- --tds-page-header-nav-gap:var(--t-spacing-1);
1496
- --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%);
1497
- --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
1498
- --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
1499
- --tds-page-header-nav-item-color:var(--t-text-color-secondary);
1500
- --tds-page-header-nav-item-background-color:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 35%);
1501
- --tds-page-header-nav-item-border-width:1px;
1309
+ .tds-select{
1310
+ --tds-select-border-color:var(--t-form-border-color);
1311
+ --tds-select-border-color-hover:var(--t-form-border-color-hover);
1312
+ --tds-select-border-color-active:var(--t-form-border-color-hover);
1313
+ --tds-select-background-color:var(--t-form-background-color);
1314
+ --tds-select-color:var(--t-form-color);
1315
+ --tds-select-placeholder-color:var(--t-form-placeholder-color);
1316
+ --tds-select-font-size:var(--t-font-size-md);
1317
+ --tds-select-min-height:var(--t-container-size-md);
1318
+ --tds-select-padding-block:6px;
1319
+ --tds-select-description-color:var(--t-text-color-secondary);
1320
+ --tds-select-description-invalid-icon-display:none;
1321
+ --tds-select-transition-property:background-color, border-color, outline-color, outline-offset;
1322
+ --tds-select-background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTEzLDZsLTUsNWwtNSwtNXoiIGZpbGw9IiMzRDNEM0QiLz48L3N2Zz4=");
1323
+ --tds-select-caret-size:1em;
1324
+ --tds-select-caret-inline-offset:.75em;
1325
+ --tds-select-caret-transition:transform var(--t-duration-300) var(--t-ease-in-out);
1502
1326
 
1503
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
1504
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-bottom-border-color);
1327
+ --tds-select-dropdown-background-color:var(--t-surface-color-card);
1328
+ --tds-select-dropdown-border:1px solid var(--t-border-color);
1329
+ --tds-select-dropdown-padding:var(--t-spacing-1);
1330
+ --tds-select-dropdown-margin-block:5px;
1331
+ --tds-select-dropdown-scrollbar-color:#0004 #0000;
1332
+ --tds-select-dropdown-scrollbar-width:thin;
1333
+ --tds-select-dropdown-border-radius:var(--t-border-radius);
1334
+ --tds-select-dropdown-box-shadow:hsl(0, 0%, 0%, .05) 0 10px 15px -3px, hsl(0, 0%, 0%, .05) 0 4px 6px -4px;
1335
+ --tds-select-dropdown-scroll-behavior:smooth;
1336
+ --tds-select-dropdown-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;
1337
+ --tds-select-dropdown-transition-exit:opacity var(--t-duration-200) var(--t-ease-in), transform var(--t-duration-200) var(--t-ease-in), display var(--t-duration-200) allow-discrete, overlay var(--t-duration-200) allow-discrete;
1338
+ --tds-select-dropdown-closed-opacity:0;
1339
+ --tds-select-dropdown-open-opacity:1;
1340
+ --tds-select-dropdown-closed-transform:translateY(-8px);
1341
+ --tds-select-dropdown-open-transform:translateY(0);
1505
1342
 
1506
- --tds-page-header-nav-item-color-hover:var(--t-text-color);
1507
- --tds-page-header-nav-item-background-color-hover:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 20%);
1508
- --tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
1343
+ --tds-select-option-gap:var(--t-spacing-1);
1344
+ --tds-select-option-padding-block:var(--t-spacing-1);
1345
+ --tds-select-option-padding-inline:var(--t-spacing-2) var(--t-spacing-1);
1346
+ --tds-select-option-font-size:1rem;
1347
+ --tds-select-option-color:var(--t-text-color);
1348
+ --tds-select-option-background-hover:var(--t-fill-color-neutral-070);
1349
+ --tds-select-option-background-active:var(--t-fill-color-button-interaction-ghost-active);
1350
+ --tds-select-option-border-radius:var(--t-border-radius);
1509
1351
 
1510
- --tds-page-header-nav-item-background-color-active:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 10%);
1511
- --tds-page-header-nav-item-border-color-active:var(--tds-page-header-nav-item-background-color-active);
1352
+ --tds-select-group-label-padding-block-start:var(--t-spacing-2);
1353
+ --tds-select-group-label-padding-block:var(--tds-select-group-label-padding-block-start) var(--t-spacing-1);
1354
+ --tds-select-group-label-padding-inline:var(--t-spacing-1);
1355
+ --tds-select-group-label-font-size:var(--t-font-size-sm);
1356
+ --tds-select-group-label-font-weight:var(--t-font-weight-semibold);
1357
+ --tds-select-group-label-letter-spacing:0;
1358
+ --tds-select-group-label-color:var(--t-text-color-secondary);
1359
+ --tds-select-group-label-color-stuck:var(--t-text-color-headline);
1360
+ --tds-select-group-label-background:var(--tds-select-dropdown-background-color);
1361
+ --tds-select-group-label-transition:color var(--t-duration-200) var(--t-ease-in-out);
1512
1362
 
1513
- --tds-page-header-nav-item-color-disabled:var(--t-text-color-disabled);
1514
- --tds-page-header-nav-item-background-color-disabled:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 50%);
1515
- --tds-page-header-nav-item-border-color-disabled:var(--tds-page-header-nav-item-background-color-disabled);
1363
+ position:relative;
1364
+ display:flex;
1365
+ flex-direction:column;
1366
+ gap:var(--t-spacing-half);
1367
+ }
1516
1368
 
1517
- --tds-page-header-nav-item-color-selected:var(--t-text-color);
1518
- --tds-page-header-nav-item-background-color-selected:var(--t-surface-color-canvas);
1519
- --tds-page-header-nav-item-border-color-selected:var(--tds-page-header-nav-item-background-color-selected);
1520
- --tds-page-header-nav-item-border-bottom-color-selected:var(--tds-page-header-nav-item-background-color-selected);
1521
- --tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning);
1369
+ .tds-select :is(label,.tds-select-label){
1370
+ font-size:var(--t-font-size-md);
1371
+ font-weight:var(--t-font-weight-normal);
1372
+ color:var(--t-text-color);
1373
+ cursor:default;
1522
1374
  }
1523
1375
 
1524
- .tds-page-header--profile{
1525
- --tds-page-header-padding-y:20px;
1376
+ .tds-select :is(select,button){
1377
+ position:relative;
1378
+ place-items:center;
1379
+ inline-size:100%;
1380
+ min-block-size:var(--tds-select-min-height);
1381
+ padding-block:var(--tds-select-padding-block);
1382
+ padding-inline:var(--t-spacing-1);
1383
+ padding-inline-end:calc(var(--t-spacing-1) + var(--tds-select-caret-size) + .5em);
1384
+ font-family:inherit;
1385
+ font-size:var(--tds-select-font-size);
1386
+ line-height:1;
1387
+ color:var(--tds-select-color);
1388
+ text-align:left;
1389
+ -webkit-appearance:none;
1390
+ -moz-appearance:none;
1391
+ appearance:none;
1392
+ cursor:var(--tds-select-cursor, default);
1393
+ outline:var(--t-focus-ring-width) solid transparent;
1394
+ outline-offset:0;
1395
+ background-color:var(--tds-select-background-color);
1396
+ background-image:var(--tds-select-background-image);
1397
+ background-repeat:no-repeat;
1398
+ background-position:right var(--tds-select-caret-inline-offset) top 50%;
1399
+ background-size:var(--tds-select-caret-size);
1400
+ border:var(--t-form-border-width) solid var(--tds-select-border-color);
1401
+ border-radius:var(--t-form-border-radius);
1402
+ transition-timing-function:var(--t-ease-in-out);
1403
+ transition-duration:var(--t-duration-300);
1404
+ transition-property:var(--tds-select-transition-property);
1526
1405
  }
1527
1406
 
1528
- @supports (color: light-dark(#fff, #000)){
1529
- .tds-page-header{
1530
- --tds-page-header-nav-background-start:light-dark(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0));
1531
- --tds-page-header-nav-background-end:light-dark(rgba(0, 0, 0, .05), rgba(255, 255, 255, .1));
1407
+ :is(.tds-select :is(select,button)):hover:not(:disabled,:focus,:focus-visible,:focus-within,:active,:open){
1408
+ border-color:var(--tds-select-border-color-hover);
1532
1409
  }
1533
- }
1534
1410
 
1535
- @media (min-width: 600px){
1536
- .tds-page-header{
1537
- --tds-page-header-background-color:var(--t-surface-color-canvas);
1538
- --tds-page-header-color:var(--t-text-color-secondary);
1539
- --tds-page-header-bottom-border-color:var(--t-border-color);
1540
- --tds-page-header-padding-x:var(--t-spacing-3);
1541
- --tds-page-header-headline-font-size:var(--t-font-size-3xl);
1542
- --tds-page-header-nav-gap:var(--t-spacing-half);
1543
- --tds-page-header-nav-background:transparent;
1544
- --tds-page-header-nav-item-padding-x:var(--t-spacing-2);
1545
- --tds-page-header-nav-item-border-width:1px;
1546
- --tds-page-header-nav-item-color:var(--t-text-color);
1547
- --tds-page-header-nav-item-background-color:var(--t-fill-color-neutral-070);
1548
- --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-060);
1549
- --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-050);
1550
- --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
1551
- --tds-page-header-nav-item-border-color-selected:var(--t-border-color);
1411
+ :is(.tds-select :is(select,button)):focus{
1412
+ outline-color:var(--t-focus-ring-color);
1413
+ outline-offset:var(--t-focus-ring-offset);
1414
+ border-color:var(--tds-select-border-color-active);
1552
1415
  }
1553
- }
1554
- }
1555
1416
 
1556
- .tds-page-header{
1557
- display:flex;
1558
- flex-direction:column;
1559
- padding-top:var(--tds-page-header-padding-y);
1560
- color:var(--tds-page-header-color);
1561
- background:var(--tds-page-header-background-color);
1562
- border-bottom:1px solid var(--tds-page-header-bottom-border-color);
1563
- }
1417
+ :is(.tds-select :is(select,button)):required:invalid,:is(.tds-select :is(select,button)):has(option[hidden][disabled][value=""]:checked){
1418
+ color:var(--tds-select-placeholder-color);
1419
+ }
1564
1420
 
1565
- .tds-page-header:not(.has-nav){
1566
- padding-bottom:var(--tds-page-header-padding-y);
1421
+ .tds-select:has(select:user-invalid,[aria-invalid="true"]),.tds-select.tds-select--invalid{
1422
+ --tds-select-border-color:var(--t-form-border-color-error);
1423
+ --tds-select-border-color-hover:var(--t-form-border-color-error-hover);
1424
+ --tds-select-border-color-active:var(--t-form-border-color-error-hover);
1425
+ --tds-select-background-color:var(--t-form-background-color-error);
1426
+ --tds-select-description-color:var(--t-text-color-status-error);
1427
+ --tds-select-description-invalid-icon-display:inline-block;
1567
1428
  }
1568
1429
 
1569
- .tds-page-header.inactive{
1570
- background:var(--tds-page-header-background-color-inactive);
1571
- }
1430
+ .tds-select:has(select:required,[aria-required="true"]) :is(label,.tds-select-label)::after{
1431
+ margin-left:.25ch;
1432
+ color:var(--t-text-color-status-error);
1433
+ content:"*";
1434
+ }
1572
1435
 
1573
- .tds-page-header :is([slot="actions"],.tds-page-header__actions){
1574
- width:100%;
1436
+ .tds-select:has(:is(select,button[role="combobox"]):is(:disabled,[aria-disabled="true"])){
1437
+ --tds-select-border-color:var(--t-form-border-color-disabled);
1438
+ --tds-select-background-color:var(--t-form-background-color-disabled);
1439
+ --tds-select-color:var(--t-form-color-disabled);
1440
+ --tds-select-cursor:not-allowed;
1575
1441
  }
1576
1442
 
1577
- .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
1578
- display:flex;
1579
- flex-flow:row wrap;
1580
- gap:var(--t-spacing-half) var(--t-spacing-1);
1581
- align-items:flex-start;
1582
- justify-content:flex-start;
1583
- min-width:0;
1443
+ .tds-select:has( > [popover]:popover-open) > button{
1444
+ border-color:var(--tds-select-border-color-active);
1584
1445
  }
1585
1446
 
1586
- :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{
1587
- display:flex;
1588
- gap:var(--tds-page-header-nav-gap);
1589
- padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
1590
- margin:0 0 -1px;
1591
- overflow:auto;
1592
- list-style:none;
1593
- background:var(--tds-page-header-nav-background);
1447
+ :is(.tds-select:has( > [popover]:popover-open) > button)::after{
1448
+ transform:rotate(.5turn);
1594
1449
  }
1595
1450
 
1596
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button){
1597
- position:relative;
1598
- display:inline-flex;
1599
- padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
1600
- font-size:var(--t-font-size-sm);
1601
- line-height:22px;
1602
- color:var(--tds-page-header-nav-item-color);
1603
- white-space:nowrap;
1604
- text-decoration:none;
1605
- -webkit-appearance:none;
1606
- -moz-appearance:none;
1607
- appearance:none;
1608
- cursor:pointer;
1609
- outline-offset:-2px;
1610
- background-color:var(--tds-page-header-nav-item-background-color);
1611
- background-clip:padding-box;
1612
- border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
1613
- border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
1614
- border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
1615
- }
1451
+ .tds-select :is(hr,li[role="separator"]){
1452
+ margin-block:var(--t-spacing-half);
1453
+ color:var(--tds-select-border-color);
1454
+ border:0;
1455
+ border-top:1px solid;
1456
+ }
1616
1457
 
1617
- .selected:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)){
1618
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-selected);
1619
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-selected);
1620
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-selected);
1621
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-selected);
1622
- }
1458
+ .tds-select :is(li[role="option"],option:not([hidden])){
1459
+ display:block;
1460
+ padding-block:var(--tds-select-option-padding-block);
1461
+ padding-inline:var(--tds-select-option-padding-inline);
1462
+ overflow:hidden;
1463
+ text-overflow:ellipsis;
1464
+ font-size:var(--tds-select-option-font-size);
1465
+ color:var(--tds-select-option-color);
1466
+ white-space:nowrap;
1467
+ cursor:default;
1468
+ border-radius:var(--tds-select-option-border-radius);
1469
+ }
1623
1470
 
1624
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):hover{
1625
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
1626
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
1627
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
1628
- }
1471
+ :is(.tds-select :is(li[role="option"],option:not([hidden]))):focus-visible{
1472
+ outline:none;
1473
+ }
1629
1474
 
1630
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):active{
1631
- background-color:var(--tds-page-header-nav-item-background-color-active);
1632
- border-color:var(--tds-page-header-nav-item-border-color-active);
1633
- }
1475
+ :is(.tds-select :is(li[role="option"],option:not([hidden]))):is(:focus,:hover,.tds-select-option--active):not([disabled],[aria-disabled="true"]){
1476
+ background:var(--tds-select-option-background-hover);
1477
+ }
1634
1478
 
1635
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):disabled{
1636
- color:var(--tds-page-header-nav-item-color-disabled);
1637
- cursor:not-allowed;
1638
- background-color:var(--tds-page-header-nav-item-background-color-disabled);
1639
- opacity:1;
1640
- }
1479
+ :is(.tds-select :is(li[role="option"],option:not([hidden]))):is([aria-selected="true"],:checked):not([disabled],[aria-disabled="true"]){
1480
+ background:var(--tds-select-option-background-active);
1481
+ }
1641
1482
 
1642
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
1643
- position:relative;
1483
+ :is(.tds-select :is(li[role="option"],option:not([hidden]))):is([aria-disabled="true"],:disabled){
1484
+ color:var(--t-form-color-disabled);
1485
+ cursor:not-allowed;
1644
1486
  }
1645
1487
 
1646
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator)) :is(a,button){
1647
- -webkit-mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
1648
- mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
1488
+ :is(.tds-select :is(li[role="option"],option:not([hidden]))):is([aria-disabled="true"],:disabled):is(:focus,:hover){
1489
+ background:transparent;
1649
1490
  }
1650
1491
 
1651
- :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{
1652
- position:absolute;
1653
- top:-5px;
1654
- right:-2px;
1655
- width:10px;
1656
- height:10px;
1657
- content:"";
1658
- background:var(--tds-page-header-nav-item-indicator-color);
1659
- border-radius:50%;
1660
- }
1492
+ .tds-select :is(li[role="presentation"],legend){
1493
+ position:sticky;
1494
+ inset-block-start:calc(var(--tds-select-dropdown-padding) * -1);
1495
+ z-index:1;
1496
+ float:inline-start;
1497
+ inline-size:100%;
1498
+ padding-block:var(--tds-select-group-label-padding-block);
1499
+ padding-inline:var(--tds-select-group-label-padding-inline);
1500
+ container-type:scroll-state;
1501
+ font-size:var(--tds-select-group-label-font-size);
1502
+ font-weight:var(--tds-select-group-label-font-weight);
1503
+ letter-spacing:var(--tds-select-group-label-letter-spacing);
1504
+ background:var(--tds-select-group-label-background);
1505
+ text-box:trim-both cap alphabetic;
1506
+ }
1507
+
1508
+ :is(.tds-select :is(li[role="presentation"],legend)) span{
1509
+ display:inline-flex;
1510
+ gap:var(--t-spacing-half);
1511
+ align-items:center;
1512
+ color:var(--tds-select-group-label-color);
1513
+ transition:var(--tds-select-group-label-transition);
1514
+ }
1661
1515
 
1662
- @media (prefers-reduced-motion: no-preference){
1663
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
1664
- animation:indicator-pulse 1.25s ease infinite;
1516
+ @container scroll-state(stuck){
1517
+
1518
+ :is(.tds-select :is(li[role="presentation"],legend)) span{
1519
+ color:var(--tds-select-group-label-color-stuck);
1520
+ }
1521
+
1522
+ @media (forced-colors: active){
1523
+
1524
+ :is(.tds-select :is(li[role="presentation"],legend)) span{
1525
+ color:var(--tds-select-group-label-color-stuck);
1526
+ }
1665
1527
  }
1666
1528
  }
1667
1529
 
1668
- .tds-page-header__title-bar{
1530
+ .tds-select.tds-select--lg{
1531
+ --tds-select-min-height:var(--t-container-size-lg);
1532
+ --tds-select-font-size:var(--t-font-size-lg);
1533
+ }
1534
+
1535
+ @media (prefers-reduced-motion: reduce){
1536
+
1537
+ .tds-select{
1538
+ --tds-select-transition-property:none;
1539
+ --tds-select-dropdown-transition-enter:none;
1540
+ --tds-select-dropdown-transition-exit:none;
1541
+ --tds-select-dropdown-scroll-behavior:auto;
1542
+ --tds-select-dropdown-closed-transform:none;
1543
+ --tds-select-dropdown-open-transform:none;
1544
+ --tds-select-caret-transition:none;
1545
+ }
1546
+ }
1547
+
1548
+ .tds-select-description{
1669
1549
  display:flex;
1670
- flex-direction:column;
1671
- gap:var(--t-spacing-2) var(--t-spacing-1);
1550
+ gap:var(--t-spacing-half);
1672
1551
  align-items:flex-start;
1673
- justify-content:space-between;
1674
- padding:0 var(--tds-page-header-padding-x);
1552
+ margin:0;
1553
+ font-size:var(--t-font-size-sm);
1554
+ line-height:1.35;
1555
+ color:var(--tds-select-description-color, var(--t-text-color-secondary));
1556
+ cursor:text;
1675
1557
  }
1676
1558
 
1677
- .tds-page-header--profile > .tds-page-header__title-bar{
1678
- align-items:center;
1559
+ .tds-select-description .tds-select-description-invalid-icon{
1560
+ display:var(--tds-select-description-invalid-icon-display, none);
1561
+ flex-shrink:0;
1562
+ margin-block-start:calc(.5lh - .5em);
1563
+ line-height:1.35;
1679
1564
  }
1680
1565
 
1681
- .tds-page-header__primary{
1682
- width:100%;
1566
+ .tds-select > .tds-select-hidden-select{
1567
+ position:absolute;
1568
+ inline-size:1px;
1569
+ block-size:1px;
1570
+ padding:0;
1571
+ margin:0;
1572
+ pointer-events:none;
1573
+ opacity:0;
1683
1574
  }
1684
1575
 
1685
- .tds-page-header__primary h1{
1686
- margin:0;
1687
- font-size:var(--tds-page-header-headline-font-size);
1688
- font-weight:var(--t-font-weight-normal);
1689
- line-height:32px;
1690
- color:var(--tds-page-header-headline-color);
1691
- overflow-wrap:break-word;
1576
+ .tds-select:has( > button) > button{
1577
+ display:block;
1578
+ padding-inline-end:calc(var(--tds-select-caret-size) + var(--tds-select-caret-inline-offset) + .75ch);
1579
+ overflow:hidden;
1580
+ text-overflow:ellipsis;
1581
+ color:var(--tds-select-placeholder-color);
1582
+ white-space:nowrap;
1583
+ background-image:none;
1584
+ transition:background-color var(--t-duration-300) var(--t-ease-in-out), border-color var(--t-duration-300) var(--t-ease-in-out), outline-color var(--t-duration-300) var(--t-ease-in-out), outline-offset var(--t-duration-300) var(--t-ease-in-out), transform var(--t-duration-100) var(--t-ease-in-out);
1585
+ -webkit-tap-highlight-color:transparent;
1692
1586
  }
1693
1587
 
1694
- @media (min-width: 960px){
1695
- .tds-page-header__primary{
1696
- flex:1 1 max-content;
1697
- width:auto;
1698
- min-width:0;
1699
- max-width:100%;
1588
+ :is(.tds-select:has( > button) > button)::after{
1589
+ position:absolute;
1590
+ inset-block:0;
1591
+ inset-inline-end:var(--tds-select-caret-inline-offset);
1592
+ width:var(--tds-select-caret-size);
1593
+ height:var(--tds-select-caret-size);
1594
+ margin-block:auto;
1595
+ pointer-events:none;
1596
+ content:var(--tds-select-background-image);
1597
+ transform:rotate(0);
1598
+ transition:var(--tds-select-caret-transition);
1599
+ }
1600
+
1601
+ .tds-select:has( > button):has([role="option"][aria-selected="true"]) > button{
1602
+ color:var(--tds-select-color);
1700
1603
  }
1701
1604
 
1702
- .tds-page-header__title-bar,
1703
- .tds-page-header--profile .tds-page-header__title-bar{
1704
- flex-flow:row nowrap;
1705
- row-gap:12px;
1706
- align-items:flex-start;
1605
+ .tds-select:has( > button) [popover]{
1606
+ inset:auto;
1607
+ inline-size:-moz-max-content;
1608
+ inline-size:max-content;
1609
+ min-inline-size:anchor-size(width);
1610
+ max-inline-size:100vi;
1611
+ max-block-size:min(50vh, 20rem);
1612
+ padding:var(--tds-select-dropdown-padding);
1613
+ margin-block:var(--tds-select-dropdown-margin-block);
1614
+ position-area:block-end span-inline-start;
1615
+ position-try-fallbacks:flip-block, flip-inline;
1616
+ overflow:auto;
1617
+ overflow-x:hidden;
1618
+ scroll-behavior:var(--tds-select-dropdown-scroll-behavior);
1619
+ -webkit-user-select:none;
1620
+ -moz-user-select:none;
1621
+ user-select:none;
1622
+ scroll-padding-top:calc(var(--tds-select-group-label-padding-block-start) + var(--tds-select-group-label-font-size) + var(--t-spacing-2));
1623
+ scrollbar-color:var(--tds-select-dropdown-scrollbar-color);
1624
+ scrollbar-width:var(--tds-select-dropdown-scrollbar-width);
1625
+ background:var(--tds-select-dropdown-background-color);
1626
+ border:var(--tds-select-dropdown-border);
1627
+ border-radius:var(--tds-select-dropdown-border-radius);
1628
+ box-shadow:var(--tds-select-dropdown-box-shadow);
1629
+ opacity:var(--tds-select-dropdown-open-opacity);
1630
+ transform:var(--tds-select-dropdown-open-transform);
1631
+ transition:var(--tds-select-dropdown-transition-enter);
1707
1632
  }
1708
- .tds-page-header :is([slot="actions"],.tds-page-header__actions){
1709
- width:auto;
1710
- }
1711
1633
 
1712
- .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
1713
- justify-content:flex-end;
1634
+ :is(.tds-select:has( > button) [popover]):not(:popover-open){
1635
+ opacity:var(--tds-select-dropdown-closed-opacity);
1636
+ transform:var(--tds-select-dropdown-closed-transform);
1637
+ transition:var(--tds-select-dropdown-transition-exit);
1714
1638
  }
1715
- }
1716
1639
 
1717
- .tds-page-header-phone,
1718
- .tds-page-header-email{
1719
- color:var(--tds-page-header-color);
1720
- white-space:nowrap;
1721
- }
1640
+ :is(.tds-select:has( > button) [popover]) ul{
1641
+ padding:0;
1642
+ margin:0;
1643
+ list-style:none;
1644
+ }
1722
1645
 
1723
- .tds-page-header-email{
1724
- max-width:100%;
1725
- overflow:hidden;
1726
- text-overflow:ellipsis;
1727
- }
1646
+ @starting-style{
1647
+ :is(.tds-select:has( > button) [popover]):popover-open{
1648
+ opacity:var(--tds-select-dropdown-closed-opacity);
1649
+ transform:var(--tds-select-dropdown-closed-transform);
1650
+ }
1651
+ }
1728
1652
 
1729
- @keyframes indicator-pulse{
1730
- 0%{
1731
- opacity:.3;
1732
- transform:scale(.9);
1653
+ @supports ((-webkit-appearance: base-select) or (-moz-appearance: base-select) or (appearance: base-select)){
1654
+ .tds-select select:has(> button){
1655
+ padding-inline-end:0;
1656
+ background-image:none;
1733
1657
  }
1658
+ @media (hover) and (pointer: fine){
1659
+ :is(.tds-select select:has( > button)),:is(.tds-select select:has( > button))::picker(select){
1660
+ padding-block:0;
1661
+ -webkit-appearance:base-select;
1662
+ -moz-appearance:base-select;
1663
+ appearance:base-select;
1664
+ }
1665
+ }
1666
+ :is(.tds-select select:has( > button))::picker-icon{
1667
+ flex-shrink:0;
1668
+ width:var(--tds-select-caret-size);
1669
+ height:var(--tds-select-caret-size);
1670
+ margin-inline-end:var(--tds-select-caret-inline-offset);
1671
+ content:var(--tds-select-background-image);
1672
+ transition:var(--tds-select-caret-transition);
1673
+ }
1734
1674
 
1735
- 100%{
1736
- opacity:0;
1737
- transform:scale(1.75);
1738
- }
1675
+ :is(.tds-select select:has( > button))::picker(select):not(:popover-open){
1676
+ opacity:var(--tds-select-dropdown-closed-opacity);
1677
+ transform:var(--tds-select-dropdown-closed-transform);
1678
+ transition:var(--tds-select-dropdown-transition-exit);
1679
+ }
1680
+
1681
+ :is(.tds-select select:has( > button)):open,:is(.tds-select select:has( > button)):focus-within{
1682
+ outline-color:var(--t-focus-ring-color);
1683
+ outline-offset:var(--t-focus-ring-offset);
1684
+ border-color:var(--tds-select-border-color-active);
1685
+ }
1686
+
1687
+ :is(.tds-select select:has( > button)):open::picker-icon{
1688
+ opacity:1;
1689
+ transform:rotate(.5turn);
1690
+ }
1691
+
1692
+ :is(.tds-select select:has( > button)) selectedcontent{
1693
+ overflow:hidden;
1694
+ text-overflow:ellipsis;
1695
+ line-height:calc(var(--tds-select-min-height) - 2px);
1696
+ white-space:nowrap;
1697
+ }
1698
+
1699
+ :is(.tds-select select:has( > button)):has(option[hidden][disabled][value=""]:checked) > button{
1700
+ color:var(--tds-select-placeholder-color);
1701
+ }
1702
+
1703
+ :is(.tds-select select:has( > button))::picker(select){
1704
+ inset:auto;
1705
+ inline-size:-moz-max-content;
1706
+ inline-size:max-content;
1707
+ min-inline-size:anchor-size(width);
1708
+ max-inline-size:100vi;
1709
+ padding:var(--tds-select-dropdown-padding);
1710
+ margin-block:var(--tds-select-dropdown-margin-block);
1711
+ position-try-fallbacks:flip-block, flip-inline;
1712
+ overflow:auto;
1713
+ overflow-x:hidden;
1714
+ scroll-behavior:var(--tds-select-dropdown-scroll-behavior);
1715
+ -webkit-user-select:none;
1716
+ -moz-user-select:none;
1717
+ user-select:none;
1718
+ scrollbar-color:var(--tds-select-dropdown-scrollbar-color);
1719
+ scrollbar-width:var(--tds-select-dropdown-scrollbar-width);
1720
+ background:var(--tds-select-dropdown-background-color);
1721
+ border:var(--tds-select-dropdown-border);
1722
+ border-radius:var(--tds-select-dropdown-border-radius);
1723
+ box-shadow:var(--tds-select-dropdown-box-shadow);
1724
+ opacity:var(--tds-select-dropdown-open-opacity);
1725
+ transform:var(--tds-select-dropdown-open-transform);
1726
+ transition:var(--tds-select-dropdown-transition-enter);
1727
+ }
1728
+
1729
+ :is(.tds-select select:has( > button)) option::checkmark{
1730
+ display:none;
1731
+ }
1732
+
1733
+ @starting-style{
1734
+ :is(.tds-select select:has( > button))::picker(select):popover-open{
1735
+ opacity:var(--tds-select-dropdown-closed-opacity);
1736
+ transform:var(--tds-select-dropdown-closed-transform);
1737
+ }
1738
+ }
1739
1739
  }
1740
1740
 
1741
1741
  .tds-input{