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

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 +1705 -1705
  2. package/dist/reactRender.css.map +1 -1
  3. package/dist/reactRenderLegacy.css +1705 -1705
  4. package/dist/reactRenderLegacy.css.map +1 -1
  5. package/package.json +2 -2
package/dist/reactRender.css CHANGED
@@ -1,1052 +1,1051 @@
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
- display:flex;
170
- grid-area:2 / 2;
171
- gap:var(--t-spacing-half);
172
- 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;
178
- }
179
-
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);
185
- }
186
-
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;
193
- }
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
+ }
194
173
 
195
- .tds-radio-group{
196
- --tds-radio-group-font-size:var(--t-font-size-md);
197
- --tds-radio-group-line-height:1.4;
198
- --tds-radio-group-gap:var(--t-spacing-1);
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
+ }
199
184
 
200
- --tds-radio-group-legend-margin-bottom:var(--tds-radio-group-gap);
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
+ }
201
190
 
202
- --tds-radio-group-description-font-size:var(--t-font-size-sm);
203
- --tds-radio-group-description-line-height:1.35;
204
- --tds-radio-group-description-color:var(--t-text-color-secondary);
205
- --tds-radio-group-description-invalid-icon-display:none;
191
+ .tds-page-header__title-bar{
206
192
  display:flex;
207
193
  flex-direction:column;
208
- gap:var(--tds-radio-group-gap);
209
- padding:0;
210
- margin:0;
211
-
212
- font-size:var(--tds-radio-group-font-size);
213
- line-height:var(--tds-radio-group-line-height);
214
- border:0;
194
+ gap:var(--t-spacing-2) var(--t-spacing-1);
195
+ align-items:flex-start;
196
+ justify-content:space-between;
197
+ padding:0 var(--tds-page-header-padding-x);
215
198
  }
216
199
 
217
- .tds-radio-group legend{
218
- padding:0;
219
- margin-bottom:var(--tds-radio-group-legend-margin-bottom);
200
+ .tds-page-header--profile > .tds-page-header__title-bar{
201
+ align-items:center;
220
202
  }
221
203
 
222
- .tds-radio-group:has(.tds-radio-group-description){
223
- --tds-radio-group-legend-margin-bottom:var(--t-spacing-fourth);
204
+ .tds-page-header__primary{
205
+ width:100%;
206
+ }
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;
224
215
  }
225
216
 
226
- .tds-radio-group[aria-invalid="true"]{
227
- --tds-radio-group-description-color:var(--t-text-color-status-error);
228
- --tds-radio-group-description-invalid-icon-display:inline-block;
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%;
229
223
  }
230
224
 
231
- .tds-radio-group[aria-invalid="true"] .tds-radio{
232
- --tds-radio-input-border-color:var(--t-form-border-color-error);
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;
230
+ }
231
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
232
+ width:auto;
233
233
  }
234
234
 
235
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
236
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
237
- --tds-radio-input-background-color:var(--t-form-background-color-error);
238
- }
239
-
240
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
241
- --tds-radio-input-background-color:var(--t-form-background-color);
242
- }
243
-
244
- .tds-radio-group:has(input:required) legend::after{
245
- margin-left:.25ch;
246
- color:var(--t-text-color-status-error);
247
- content:"*";
235
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
236
+ justify-content:flex-end;
248
237
  }
238
+ }
249
239
 
250
- .tds-radio-group-fields{
251
- display:flex;
252
- flex-direction:column;
253
- gap:var(--tds-radio-group-gap);
254
- align-items:flex-start;
240
+ .tds-page-header-phone,
241
+ .tds-page-header-email{
242
+ color:var(--tds-page-header-color);
243
+ white-space:nowrap;
255
244
  }
256
245
 
257
- .tds-radio-group-description{
258
- display:flex;
259
- gap:var(--t-spacing-half);
260
- align-items:flex-start;
261
- margin:0;
262
- font-size:var(--tds-radio-group-description-font-size);
263
- line-height:var(--tds-radio-group-description-line-height);
264
- color:var(--tds-radio-group-description-color);
265
- cursor:text;
246
+ .tds-page-header-email{
247
+ max-width:100%;
248
+ overflow:hidden;
249
+ text-overflow:ellipsis;
266
250
  }
267
251
 
268
- .tds-radio-group-description .tds-radio-group-description-invalid-icon{
269
- display:var(--tds-radio-group-description-invalid-icon-display);
270
- flex-shrink:0;
271
- margin-top:calc(.5lh - .5em);
272
- line-height:var(--tds-radio-group-description-line-height);
252
+ @keyframes indicator-pulse{
253
+ 0%{
254
+ opacity:.3;
255
+ transform:scale(.9);
273
256
  }
274
257
 
275
- .tds-radio-group--sm{
276
- --tds-radio-group-line-height:1.35;
277
- --tds-radio-group-font-size:var(--t-font-size-sm);
278
- --tds-radio-group-description-font-size:var(--t-font-size-xs);
279
- --tds-radio-group-description-line-height:1.3;
258
+ 100%{
259
+ opacity:0;
260
+ transform:scale(1.75);
261
+ }
280
262
  }
281
263
 
282
- .tds-radio{
283
- --tds-radio-font-size:var(--t-font-size-md);
284
- --tds-radio-cursor:pointer;
285
- --tds-radio-line-height:1.4;
286
- --tds-radio-transition-property:border-width;
287
-
288
- --tds-radio-input-size:var(--t-element-size-md);
289
- --tds-radio-input-border-radius:var(--t-border-radius-round);
290
- --tds-radio-input-border-color:var(--t-form-border-color);
291
- --tds-radio-input-border-width:var(--t-form-border-width);
292
- --tds-radio-input-background-color:transparent;
293
-
294
- --tds-radio-label-color:var(--t-form-color);
295
264
 
296
- --tds-radio-description-font-size:var(--t-font-size-sm);
297
- --tds-radio-description-line-height:1.35;
298
- --tds-radio-description-color:var(--t-text-color-secondary);
265
+ @media (prefers-reduced-motion: no-preference){
299
266
 
300
- position:relative;
301
- display:inline-grid;
302
- grid-template-columns:auto;
303
- grid-auto-columns:1fr;
304
- gap:var(--t-spacing-fourth) var(--t-spacing-1);
305
- line-height:var(--tds-radio-line-height);
306
- cursor:var(--tds-radio-cursor);
307
- -webkit-user-select:none;
308
- -moz-user-select:none;
309
- user-select:none;
267
+ :root{
268
+ interpolate-size:allow-keywords;
310
269
  }
311
-
312
- .tds-radio label{
313
- grid-area:1 / 2;
314
- font-size:var(--tds-radio-font-size);
315
- font-weight:var(--t-font-weight-normal);
316
- color:var(--tds-radio-label-color);
317
- cursor:var(--tds-radio-cursor);
318
270
  }
319
271
 
320
- .tds-radio input[type="radio"]{
321
- position:relative;
322
- width:1em;
323
- height:1em;
324
- margin:calc((1lh - 1em) / 2) 0 0;
325
- font-size:var(--tds-radio-font-size);
326
- line-height:inherit;
327
- -webkit-appearance:none;
328
- -moz-appearance:none;
329
- appearance:none;
330
- cursor:var(--tds-radio-cursor);
331
- background-color:var(--tds-radio-input-background-color);
332
- border:var(--tds-radio-input-border-width) solid var(--tds-radio-input-border-color);
333
- border-radius:var(--tds-radio-input-border-radius);
334
- transition-timing-function:var(--t-ease-in-out);
335
- transition-duration:var(--t-duration-200);
336
- transition-property:var(--tds-radio-transition-property);
337
- }
272
+ @layer tds-component{
273
+ tds-sidenav,
274
+ .tds-sidenav{
275
+ --tds-sidenav-indent:12px;
276
+ --tds-sidenav-item-depth:0;
338
277
 
339
- :is(.tds-radio input[type="radio"]):hover:not(:disabled){
340
- --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
341
- --tds-radio-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
342
- }
278
+ --tds-sidenav-item-transition:background-color var(--t-duration-200) var(--t-ease-in-out);
343
279
 
344
- :is(.tds-radio input[type="radio"]):focus-visible{
345
- outline:var(--t-focus-ring-outline);
346
- outline-offset:var(--t-focus-ring-offset);
347
- }
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);
348
286
 
349
- :is(.tds-radio input[type="radio"]):disabled{
350
- pointer-events:none;
351
- }
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);
352
291
 
353
- @media (prefers-reduced-motion: reduce){
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;
354
295
 
355
- .tds-radio input[type="radio"]{
356
- --tds-radio-transition-property:none;
357
- }
358
- }
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);
359
299
 
360
- .tds-radio:has(input:checked){
361
- --tds-radio-input-background-color:var(--t-form-background-color);
362
- --tds-radio-input-border-color:var(--t-border-color-control-info);
363
- --tds-radio-input-border-width:4px;
300
+ --tds-sidenav-item-icon-color:var(--t-icon-color-secondary);
301
+ --tds-sidenav-item-icon-color-selected:var(--t-icon-color);
364
302
  }
365
303
 
366
- .tds-radio:has(input:checked) input:hover:not(:disabled){
367
- --tds-radio-input-background-color:var(--t-form-background-color);
368
- --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
369
- }
370
-
371
- .tds-radio:has(input:user-invalid){
372
- --tds-radio-input-border-color:var(--t-form-border-color-error);
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;
373
311
  }
374
-
375
- .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
376
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
377
- --tds-radio-input-background-color:var(--t-form-background-color-error);
378
312
  }
379
313
 
380
- .tds-radio:has(input:disabled){
381
- --tds-radio-input-background-color:var(--t-form-background-color-disabled);
382
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
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
+ }
383
322
 
384
- --tds-radio-label-color:var(--t-form-color-disabled);
385
- --tds-radio-description-color:var(--t-form-color-disabled);
386
- --tds-radio-cursor:not-allowed;
323
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section){
324
+ display:flex;
387
325
  }
388
326
 
389
- .tds-radio:has(input:disabled) input:checked{
390
- --tds-radio-input-background-color:var(--t-form-background-color);
391
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
392
- }
327
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section,.tds-sidenav-collapse){
328
+ flex-direction:column;
329
+ gap:var(--t-spacing-half);
330
+ width:100%;
331
+ }
393
332
 
394
- .tds-radio-description{
395
- display:flex;
396
- grid-area:2 / 2;
397
- gap:var(--t-spacing-half);
398
- align-items:flex-start;
333
+ .tds-sidenav-section-list{
334
+ width:100%;
335
+ padding:0;
399
336
  margin:0;
400
- font-size:var(--tds-radio-description-font-size);
401
- line-height:var(--tds-radio-description-line-height);
402
- color:var(--tds-radio-description-color);
403
- cursor:text;
337
+ list-style:none;
404
338
  }
405
339
 
406
- .tds-radio--sm{
407
- --tds-radio-line-height:1.35;
408
- --tds-radio-input-size:var(--t-element-size-sm);
409
- --tds-radio-font-size:var(--t-font-size-sm);
410
- --tds-radio-description-font-size:var(--t-font-size-xs);
411
- --tds-radio-description-line-height:1.3;
340
+ .tds-sidenav-section-header{
341
+ display:flex;
342
+ align-items:baseline;
343
+ justify-content:space-between;
344
+ padding-top:var(--t-spacing-2);
412
345
  }
413
346
 
414
-
415
- :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{
416
- -webkit-appearance:none;
417
- appearance:none;
418
- }
419
-
420
- [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
421
- inline-size:1em;
422
- block-size:2em;
423
- }
424
-
425
- @supports (field-sizing: content){
426
- .tds-input--auto-width{
427
- inline-size:-moz-fit-content;
428
- inline-size:fit-content;
429
- min-inline-size:min(100%, 122px);
347
+ .tds-sidenav-section-header h2{
348
+ margin:0;
349
+ font-size:var(--t-font-size-sm);
350
+ font-weight:var(--t-font-weight-semibold);
351
+ line-height:1.35;
352
+ color:var(--t-text-color-secondary);
353
+ text-transform:uppercase;
430
354
  }
431
355
 
432
- .tds-input--auto-width input{
433
- field-sizing:content;
434
- inline-size:auto;
356
+ .tds-sidenav-section:first-of-type .tds-sidenav-section-header{
357
+ padding-top:0;
435
358
  }
436
- }
437
-
438
- .tds-select{
439
- --tds-select-border-color:var(--t-form-border-color);
440
- --tds-select-border-color-hover:var(--t-form-border-color-hover);
441
- --tds-select-border-color-active:var(--t-form-border-color-hover);
442
- --tds-select-background-color:var(--t-form-background-color);
443
- --tds-select-color:var(--t-form-color);
444
- --tds-select-placeholder-color:var(--t-form-placeholder-color);
445
- --tds-select-font-size:var(--t-font-size-md);
446
- --tds-select-min-height:var(--t-container-size-md);
447
- --tds-select-padding-block:6px;
448
- --tds-select-description-color:var(--t-text-color-secondary);
449
- --tds-select-description-invalid-icon-display:none;
450
- --tds-select-transition-property:background-color, border-color, outline-color, outline-offset;
451
- --tds-select-background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTEzLDZsLTUsNWwtNSwtNXoiIGZpbGw9IiMzRDNEM0QiLz48L3N2Zz4=");
452
- --tds-select-caret-size:1em;
453
- --tds-select-caret-inline-offset:.75em;
454
- --tds-select-caret-transition:transform var(--t-duration-300) var(--t-ease-in-out);
455
-
456
- --tds-select-dropdown-background-color:var(--t-surface-color-card);
457
- --tds-select-dropdown-border:1px solid var(--t-border-color);
458
- --tds-select-dropdown-padding:var(--t-spacing-1);
459
- --tds-select-dropdown-margin-block:5px;
460
- --tds-select-dropdown-scrollbar-color:#0004 #0000;
461
- --tds-select-dropdown-scrollbar-width:thin;
462
- --tds-select-dropdown-border-radius:var(--t-border-radius);
463
- --tds-select-dropdown-box-shadow:hsl(0, 0%, 0%, .05) 0 10px 15px -3px, hsl(0, 0%, 0%, .05) 0 4px 6px -4px;
464
- --tds-select-dropdown-scroll-behavior:smooth;
465
- --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;
466
- --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;
467
- --tds-select-dropdown-closed-opacity:0;
468
- --tds-select-dropdown-open-opacity:1;
469
- --tds-select-dropdown-closed-transform:translateY(-8px);
470
- --tds-select-dropdown-open-transform:translateY(0);
471
-
472
- --tds-select-option-gap:var(--t-spacing-1);
473
- --tds-select-option-padding-block:var(--t-spacing-1);
474
- --tds-select-option-padding-inline:var(--t-spacing-2) var(--t-spacing-1);
475
- --tds-select-option-font-size:1rem;
476
- --tds-select-option-color:var(--t-text-color);
477
- --tds-select-option-background-hover:var(--t-fill-color-neutral-070);
478
- --tds-select-option-background-active:var(--t-fill-color-button-interaction-ghost-active);
479
- --tds-select-option-border-radius:var(--t-border-radius);
480
359
 
481
- --tds-select-group-label-padding-block-start:var(--t-spacing-2);
482
- --tds-select-group-label-padding-block:var(--tds-select-group-label-padding-block-start) var(--t-spacing-1);
483
- --tds-select-group-label-padding-inline:var(--t-spacing-1);
484
- --tds-select-group-label-font-size:var(--t-font-size-sm);
485
- --tds-select-group-label-font-weight:var(--t-font-weight-semibold);
486
- --tds-select-group-label-letter-spacing:0;
487
- --tds-select-group-label-color:var(--t-text-color-secondary);
488
- --tds-select-group-label-color-stuck:var(--t-text-color-headline);
489
- --tds-select-group-label-background:var(--tds-select-dropdown-background-color);
490
- --tds-select-group-label-transition:color var(--t-duration-200) var(--t-ease-in-out);
360
+ .tds-sidenav-section-header [slot="label-actions"]{
361
+ display:flex;
362
+ gap:var(--t-spacing-half);
363
+ align-items:center;
364
+ }
491
365
 
492
- position:relative;
366
+ .tds-sidenav-section [slot="section-actions"]{
493
367
  display:flex;
494
- flex-direction:column;
495
- gap:var(--t-spacing-half);
368
+ gap:12px;
369
+ align-items:center;
370
+ min-height:42px;
371
+ padding:var(--t-spacing-1) 0;
496
372
  }
497
373
 
498
- .tds-select :is(label,.tds-select-label){
499
- font-size:var(--t-font-size-md);
500
- font-weight:var(--t-font-weight-normal);
501
- color:var(--t-text-color);
502
- cursor:default;
503
- }
374
+ .tds-sidenav-section-list,
375
+ .tds-sidenav-item{
376
+ width:100%;
377
+ padding:0;
378
+ margin:0;
379
+ }
504
380
 
505
- .tds-select :is(select,button){
381
+ .tds-sidenav-item :is(a,button){
506
382
  position:relative;
507
- place-items:center;
508
- inline-size:100%;
509
- min-block-size:var(--tds-select-min-height);
510
- padding-block:var(--tds-select-padding-block);
511
- padding-inline:var(--t-spacing-1);
512
- padding-inline-end:calc(var(--t-spacing-1) + var(--tds-select-caret-size) + .5em);
513
- font-family:inherit;
514
- font-size:var(--tds-select-font-size);
515
- line-height:1;
516
- color:var(--tds-select-color);
517
- text-align:left;
383
+ display:flex;
384
+ gap:12px;
385
+ align-items:center;
386
+ width:100%;
387
+ padding:12px;
388
+ overflow:hidden;
389
+ font-size:var(--t-font-size-sm);
390
+ line-height:18px;
391
+ color:var(--t-text-color-headline);
392
+ white-space:nowrap;
393
+ text-decoration:none;
518
394
  -webkit-appearance:none;
519
395
  -moz-appearance:none;
520
396
  appearance:none;
521
- cursor:var(--tds-select-cursor, default);
522
- outline:var(--t-focus-ring-width) solid transparent;
523
- outline-offset:0;
524
- background-color:var(--tds-select-background-color);
525
- background-image:var(--tds-select-background-image);
526
- background-repeat:no-repeat;
527
- background-position:right var(--tds-select-caret-inline-offset) top 50%;
528
- background-size:var(--tds-select-caret-size);
529
- border:var(--t-form-border-width) solid var(--tds-select-border-color);
530
- border-radius:var(--t-form-border-radius);
531
- transition-timing-function:var(--t-ease-in-out);
532
- transition-duration:var(--t-duration-300);
533
- transition-property:var(--tds-select-transition-property);
397
+ cursor:pointer;
398
+ background-color:var(--tds-sidenav-item-background, transparent);
399
+ border:0;
400
+ border-radius:var(--t-border-radius);
401
+ transition:var(--tds-sidenav-item-transition);
534
402
  }
535
403
 
536
- :is(.tds-select :is(select,button)):hover:not(:disabled,:focus,:focus-visible,:focus-within,:active,:open){
537
- border-color:var(--tds-select-border-color-hover);
404
+ :is(.tds-sidenav-item :is(a,button)):not(:has(.prefix,.suffix)),:is(.tds-sidenav-item :is(a,button)) :is(:not(.prefix,.suffix)){
405
+ display:block;
406
+ flex:1;
407
+ overflow:hidden;
408
+ text-overflow:ellipsis;
409
+ text-align:left;
410
+ white-space:nowrap;
538
411
  }
539
412
 
540
- :is(.tds-select :is(select,button)):focus{
541
- outline-color:var(--t-focus-ring-color);
542
- outline-offset:var(--t-focus-ring-offset);
543
- border-color:var(--tds-select-border-color-active);
413
+ :is(.tds-sidenav-item :is(a,button)):hover,:is(.tds-sidenav-item :is(a,button)):focus-visible{
414
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-hover);
415
+ color:var(--t-text-color-headline);
416
+ text-decoration:none;
544
417
  }
545
418
 
546
- :is(.tds-select :is(select,button)):required:invalid,:is(.tds-select :is(select,button)):has(option[hidden][disabled][value=""]:checked){
547
- color:var(--tds-select-placeholder-color);
419
+ :is(.tds-sidenav-item :is(a,button)):active{
420
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-active);
548
421
  }
549
422
 
550
- .tds-select:has(select:user-invalid,[aria-invalid="true"]),.tds-select.tds-select--invalid{
551
- --tds-select-border-color:var(--t-form-border-color-error);
552
- --tds-select-border-color-hover:var(--t-form-border-color-error-hover);
553
- --tds-select-border-color-active:var(--t-form-border-color-error-hover);
554
- --tds-select-background-color:var(--t-form-background-color-error);
555
- --tds-select-description-color:var(--t-text-color-status-error);
556
- --tds-select-description-invalid-icon-display:inline-block;
557
- }
558
-
559
- .tds-select:has(select:required,[aria-required="true"]) :is(label,.tds-select-label)::after{
560
- margin-left:.25ch;
561
- color:var(--t-text-color-status-error);
562
- content:"*";
423
+ :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]){
424
+ overflow:hidden;
425
+ color:var(--tds-sidenav-item-icon-color);
563
426
  }
564
427
 
565
- .tds-select:has(:is(select,button[role="combobox"]):is(:disabled,[aria-disabled="true"])){
566
- --tds-select-border-color:var(--t-form-border-color-disabled);
567
- --tds-select-background-color:var(--t-form-background-color-disabled);
568
- --tds-select-color:var(--t-form-color-disabled);
569
- --tds-select-cursor:not-allowed;
570
- }
428
+ :is(:is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"])),:is(:is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"])) svg{
429
+ display:block;
430
+ width:var(--tds-sidenav-item-icon-size);
431
+ height:var(--tds-sidenav-item-icon-size);
432
+ }
571
433
 
572
- .tds-select:has( > [popover]:popover-open) > button{
573
- border-color:var(--tds-select-border-color-active);
574
- }
434
+ :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section{
435
+ --tds-sidenav-indent:19px;
436
+ }
575
437
 
576
- :is(.tds-select:has( > [popover]:popover-open) > button)::after{
577
- transform:rotate(.5turn);
438
+ [aria-expanded="true"]:is(.tds-sidenav-item :is(a,button)) + .tds-sidenav-section-list{
439
+ visibility:visible;
440
+ block-size:auto;
441
+ opacity:1;
578
442
  }
579
443
 
580
- .tds-select :is(hr,li[role="separator"]){
581
- margin-block:var(--t-spacing-half);
582
- color:var(--tds-select-border-color);
583
- border:0;
584
- border-top:1px solid;
444
+ .tds-sidenav-item.selected > :is(a,button),.tds-sidenav-item:has(.tds-sidenav-section):has(.selected) > :is(a,button){
445
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-selected);
446
+ --tds-sidenav-item-icon-color:var(--tds-sidenav-item-icon-color-selected);
447
+
448
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-selected);
449
+ font-weight:var(--t-font-weight-semibold);
585
450
  }
586
451
 
587
- .tds-select :is(li[role="option"],option:not([hidden])){
588
- display:block;
589
- padding-block:var(--tds-select-option-padding-block);
590
- padding-inline:var(--tds-select-option-padding-inline);
591
- overflow:hidden;
592
- text-overflow:ellipsis;
593
- font-size:var(--tds-select-option-font-size);
594
- color:var(--tds-select-option-color);
595
- white-space:nowrap;
596
- cursor:default;
597
- border-radius:var(--tds-select-option-border-radius);
452
+ .tds-sidenav-item:has(.tds-sidenav-section){
453
+ display:flex;
454
+ flex-direction:column;
455
+ gap:var(--t-spacing-half);
598
456
  }
599
457
 
600
- :is(.tds-select :is(li[role="option"],option:not([hidden]))):focus-visible{
601
- outline:none;
602
- }
458
+ .tds-sidenav-item .tds-sidenav-section-list{
459
+ --tds-sidenav-item-depth:1;
460
+ gap:0;
461
+ }
603
462
 
604
- :is(.tds-select :is(li[role="option"],option:not([hidden]))):is(:focus,:hover,.tds-select-option--active):not([disabled],[aria-disabled="true"]){
605
- background:var(--tds-select-option-background-hover);
463
+ .tds-sidenav-action--toggle + :is(.tds-sidenav-item .tds-sidenav-section-list){
464
+ visibility:hidden;
465
+ block-size:0;
466
+ overflow-y:clip;
467
+ opacity:0;
468
+ transition:content-visibility var(--t-duration-400) allow-discrete, opacity var(--t-duration-400), block-size var(--t-duration-400);
606
469
  }
607
470
 
608
- :is(.tds-select :is(li[role="option"],option:not([hidden]))):is([aria-selected="true"],:checked):not([disabled],[aria-disabled="true"]){
609
- background:var(--tds-select-option-background-active);
471
+ :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list{
472
+ --tds-sidenav-item-depth:2;
610
473
  }
611
474
 
612
- :is(.tds-select :is(li[role="option"],option:not([hidden]))):is([aria-disabled="true"],:disabled){
613
- color:var(--t-form-color-disabled);
614
- cursor:not-allowed;
475
+ :is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
476
+ min-height:var(--t-element-size-2xl);
477
+ padding-block:9px;
478
+ padding-left:calc((var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth)) + var(--tds-sidenav-indent) + var(--t-spacing-fourth));
479
+ line-height:1;
480
+ background-color:transparent;
615
481
  }
616
482
 
617
- :is(.tds-select :is(li[role="option"],option:not([hidden]))):is([aria-disabled="true"],:disabled):is(:focus,:hover){
618
- background:transparent;
483
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::before{
484
+ position:absolute;
485
+ top:0;
486
+ bottom:0;
487
+ left:calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
488
+ width:2px;
489
+ content:"";
490
+ background-color:var(--tds-sidenav-item-nested-border-color);
491
+ transition:var(--tds-sidenav-item-transition);
619
492
  }
620
493
 
621
- .tds-select :is(li[role="presentation"],legend){
622
- position:sticky;
623
- inset-block-start:calc(var(--tds-select-dropdown-padding) * -1);
624
- z-index:1;
625
- float:inline-start;
626
- inline-size:100%;
627
- padding-block:var(--tds-select-group-label-padding-block);
628
- padding-inline:var(--tds-select-group-label-padding-inline);
629
- container-type:scroll-state;
630
- font-size:var(--tds-select-group-label-font-size);
631
- font-weight:var(--tds-select-group-label-font-weight);
632
- letter-spacing:var(--tds-select-group-label-letter-spacing);
633
- background:var(--tds-select-group-label-background);
634
- text-box:trim-both cap alphabetic;
635
- }
636
-
637
- :is(.tds-select :is(li[role="presentation"],legend)) span{
638
- display:inline-flex;
639
- gap:var(--t-spacing-half);
640
- align-items:center;
641
- color:var(--tds-select-group-label-color);
642
- transition:var(--tds-select-group-label-transition);
643
- }
644
-
645
- @container scroll-state(stuck){
646
-
647
- :is(.tds-select :is(li[role="presentation"],legend)) span{
648
- color:var(--tds-select-group-label-color-stuck);
649
- }
650
-
651
- @media (forced-colors: active){
494
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::after{
495
+ position:absolute;
496
+ inset:0 0 0 calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
497
+ z-index:-1;
498
+ height:100%;
499
+ content:"";
500
+ background-color:var(--tds-sidenav-item-nested-background);
501
+ border-radius:0 var(--t-border-radius) var(--t-border-radius) 0;
502
+ transition:var(--tds-sidenav-item-transition);
503
+ }
652
504
 
653
- :is(.tds-select :is(li[role="presentation"],legend)) span{
654
- color:var(--tds-select-group-label-color-stuck);
655
- }
656
- }
505
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):not(:has(.prefix,.suffix)),:is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)) :is(:not(.prefix,.suffix)){
506
+ display:block;
507
+ text-align:left;
508
+ white-space:normal;
657
509
  }
658
510
 
659
- .tds-select.tds-select--lg{
660
- --tds-select-min-height:var(--t-container-size-lg);
661
- --tds-select-font-size:var(--t-font-size-lg);
662
- }
511
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):hover,:is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):focus-visible{
512
+ --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-hover);
513
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-hover);
514
+ }
663
515
 
664
- @media (prefers-reduced-motion: reduce){
516
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):active{
517
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-active);
518
+ }
665
519
 
666
- .tds-select{
667
- --tds-select-transition-property:none;
668
- --tds-select-dropdown-transition-enter:none;
669
- --tds-select-dropdown-transition-exit:none;
670
- --tds-select-dropdown-scroll-behavior:auto;
671
- --tds-select-dropdown-closed-transform:none;
672
- --tds-select-dropdown-open-transform:none;
673
- --tds-select-caret-transition:none;
674
- }
675
- }
520
+ .selected:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
521
+ --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-selected);
522
+ font-weight:var(--t-font-weight-medium);
523
+ }
676
524
 
677
- .tds-select-description{
525
+ .tds-sidenav-responsive-header{
678
526
  display:flex;
679
- gap:var(--t-spacing-half);
680
- align-items:flex-start;
681
- margin:0;
682
- font-size:var(--t-font-size-sm);
683
- line-height:1.35;
684
- color:var(--tds-select-description-color, var(--t-text-color-secondary));
685
- cursor:text;
527
+ gap:var(--t-spacing-2);
528
+ align-items:center;
529
+ width:100%;
686
530
  }
687
531
 
688
- .tds-select-description .tds-select-description-invalid-icon{
689
- display:var(--tds-select-description-invalid-icon-display, none);
690
- flex-shrink:0;
691
- margin-block-start:calc(.5lh - .5em);
692
- line-height:1.35;
532
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle{
533
+ order:0;
693
534
  }
694
535
 
695
- .tds-select > .tds-select-hidden-select{
696
- position:absolute;
697
- inline-size:1px;
698
- block-size:1px;
699
- padding:0;
700
- margin:0;
701
- pointer-events:none;
702
- opacity:0;
703
- }
536
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-label{
537
+ flex:1;
538
+ order:1;
539
+ margin:0;
540
+ font-size:var(--t-font-size-lg);
541
+ font-weight:var(--t-font-weight-medium);
542
+ color:var(--t-text-color-headline);
543
+ }
704
544
 
705
- .tds-select:has( > button) > button{
706
- display:block;
707
- padding-inline-end:calc(var(--tds-select-caret-size) + var(--tds-select-caret-inline-offset) + .75ch);
545
+ @media (max-width: 719px){
546
+ .tds-sidenav-collapse{
547
+ z-index:10001;
548
+ display:none;
549
+ max-width:min(448px, calc(100vw - 48px));
550
+ padding:0;
551
+ margin:12px 0;
552
+ position-area:bottom span-right;
708
553
  overflow:hidden;
709
- text-overflow:ellipsis;
710
- color:var(--tds-select-placeholder-color);
711
- white-space:nowrap;
712
- background-image:none;
713
- 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);
714
- -webkit-tap-highlight-color:transparent;
554
+ outline:0;
555
+ background:var(--t-surface-color-card);
556
+ border:0;
557
+ border-radius:6px;
558
+ box-shadow:0 8px 20px 0 rgba(0, 0, 0, .25);
559
+ opacity:var(--tds-sidenav-collapse-open-opacity);
560
+ transform:var(--tds-sidenav-collapse-open-transform);
561
+ transition:var(--tds-sidenav-collapse-transition-enter);
562
+ will-change:transform;
715
563
  }
716
564
 
717
- :is(.tds-select:has( > button) > button)::after{
718
- position:absolute;
719
- inset-block:0;
720
- inset-inline-end:var(--tds-select-caret-inline-offset);
721
- width:var(--tds-select-caret-size);
722
- height:var(--tds-select-caret-size);
723
- margin-block:auto;
724
- pointer-events:none;
725
- content:var(--tds-select-background-image);
726
- transform:rotate(0);
727
- transition:var(--tds-select-caret-transition);
728
- }
565
+ .tds-sidenav-scroll-container{
566
+ --webkit-overflow-scrolling:touch;
567
+ display:block;
568
+ width:100%;
569
+ height:-moz-fit-content;
570
+ height:fit-content;
571
+ padding:var(--t-spacing-2);
572
+ overflow-y:auto;
573
+ }
729
574
 
730
- .tds-select:has( > button):has([role="option"][aria-selected="true"]) > button{
731
- color:var(--tds-select-color);
732
- }
733
-
734
- .tds-select:has( > button) [popover]{
735
- inset:auto;
736
- inline-size:-moz-max-content;
737
- inline-size:max-content;
738
- min-inline-size:anchor-size(width);
739
- max-inline-size:100vi;
740
- max-block-size:min(50vh, 20rem);
741
- padding:var(--tds-select-dropdown-padding);
742
- margin-block:var(--tds-select-dropdown-margin-block);
743
- position-area:block-end span-inline-start;
744
- position-try-fallbacks:flip-block, flip-inline;
745
- overflow:auto;
746
- overflow-x:hidden;
747
- scroll-behavior:var(--tds-select-dropdown-scroll-behavior);
748
- overscroll-behavior:none;
749
- -webkit-user-select:none;
750
- -moz-user-select:none;
751
- user-select:none;
752
- scroll-padding-top:calc(var(--tds-select-group-label-padding-block-start) + var(--tds-select-group-label-font-size) + var(--t-spacing-2));
753
- scrollbar-color:var(--tds-select-dropdown-scrollbar-color);
754
- scrollbar-width:var(--tds-select-dropdown-scrollbar-width);
755
- background:var(--tds-select-dropdown-background-color);
756
- border:var(--tds-select-dropdown-border);
757
- border-radius:var(--tds-select-dropdown-border-radius);
758
- box-shadow:var(--tds-select-dropdown-box-shadow);
759
- opacity:var(--tds-select-dropdown-open-opacity);
760
- transform:var(--tds-select-dropdown-open-transform);
761
- transition:var(--tds-select-dropdown-transition-enter);
575
+ .tds-sidenav-item :is(a, button) :is(.prefix){
576
+ display:none;
762
577
  }
763
-
764
- :is(.tds-select:has( > button) [popover]):not(:popover-open){
765
- opacity:var(--tds-select-dropdown-closed-opacity);
766
- transform:var(--tds-select-dropdown-closed-transform);
767
- transition:var(--tds-select-dropdown-transition-exit);
578
+ @supports selector(:popover-open){
579
+ .tds-sidenav-collapse:popover-open{
580
+ display:flex;
768
581
  }
769
582
 
770
- :is(.tds-select:has( > button) [popover]) ul{
771
- padding:0;
772
- margin:0;
773
- list-style:none;
583
+ .tds-sidenav-collapse:not(:popover-open){
584
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
585
+ transition:var(--tds-sidenav-collapse-transition-exit);
774
586
  }
775
587
 
776
- @starting-style{
777
- :is(.tds-select:has( > button) [popover]):popover-open{
778
- opacity:var(--tds-select-dropdown-closed-opacity);
779
- transform:var(--tds-select-dropdown-closed-transform);
588
+ @starting-style{
589
+ .tds-sidenav-collapse:popover-open{
590
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
591
+ transform:var(--tds-sidenav-collapse-closed-transform);
780
592
  }
781
593
  }
782
-
783
- @supports ((-webkit-appearance: base-select) or (-moz-appearance: base-select) or (appearance: base-select)){
784
- .tds-select select:has(> button){
785
- padding-inline-end:0;
786
- background-image:none;
787
594
  }
788
- @media (hover) and (pointer: fine){
789
- :is(.tds-select select:has( > button)),:is(.tds-select select:has( > button))::picker(select){
790
- padding-block:0;
791
- -webkit-appearance:base-select;
792
- -moz-appearance:base-select;
793
- appearance:base-select;
794
- }
795
- }
796
- :is(.tds-select select:has( > button))::picker-icon{
797
- flex-shrink:0;
798
- width:var(--tds-select-caret-size);
799
- height:var(--tds-select-caret-size);
800
- margin-inline-end:var(--tds-select-caret-inline-offset);
801
- content:var(--tds-select-background-image);
802
- transition:var(--tds-select-caret-transition);
595
+ @supports not selector(:popover-open){
596
+ .tds-sidenav-collapse.\:popover-open{
597
+ display:flex;
803
598
  }
804
599
 
805
- :is(.tds-select select:has( > button))::picker(select):not(:popover-open){
806
- opacity:var(--tds-select-dropdown-closed-opacity);
807
- transform:var(--tds-select-dropdown-closed-transform);
808
- transition:var(--tds-select-dropdown-transition-exit);
600
+ .tds-sidenav-collapse:not(.\:popover-open){
601
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
602
+ transition:var(--tds-sidenav-collapse-transition-exit);
809
603
  }
604
+ }
605
+ }
810
606
 
811
- :is(.tds-select select:has( > button)):open,:is(.tds-select select:has( > button)):focus-within{
812
- outline-color:var(--t-focus-ring-color);
813
- outline-offset:var(--t-focus-ring-offset);
814
- border-color:var(--tds-select-border-color-active);
815
- }
607
+ @media (min-width: 720px){
608
+ .tds-sidenav-responsive-header{
609
+ display:none;
610
+ }
611
+ }
816
612
 
817
- :is(.tds-select select:has( > button)):open::picker-icon{
818
- opacity:1;
819
- transform:rotate(.5turn);
613
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
614
+ display:none;
820
615
  }
821
616
 
822
- :is(.tds-select select:has( > button)) selectedcontent{
823
- overflow:hidden;
824
- text-overflow:ellipsis;
825
- line-height:calc(var(--tds-select-min-height) - 2px);
826
- white-space:nowrap;
617
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
618
+ display:block;
827
619
  }
828
620
 
829
- :is(.tds-select select:has( > button)):has(option[hidden][disabled][value=""]:checked) > button{
830
- color:var(--tds-select-placeholder-color);
621
+ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
622
+ display:flex;
623
+ flex-direction:column;
831
624
  }
832
625
 
833
- :is(.tds-select select:has( > button))::picker(select){
834
- inset:auto;
835
- inline-size:-moz-max-content;
836
- inline-size:max-content;
837
- min-inline-size:anchor-size(width);
838
- max-inline-size:100vi;
839
- padding:var(--tds-select-dropdown-padding);
840
- margin-block:var(--tds-select-dropdown-margin-block);
841
- position-try-fallbacks:flip-block, flip-inline;
842
- overflow:auto;
843
- overflow-x:hidden;
844
- scroll-behavior:var(--tds-select-dropdown-scroll-behavior);
845
- overscroll-behavior:none;
846
- -webkit-user-select:none;
847
- -moz-user-select:none;
848
- user-select:none;
849
- scrollbar-color:var(--tds-select-dropdown-scrollbar-color);
850
- scrollbar-width:var(--tds-select-dropdown-scrollbar-width);
851
- background:var(--tds-select-dropdown-background-color);
852
- border:var(--tds-select-dropdown-border);
853
- border-radius:var(--tds-select-dropdown-border-radius);
854
- box-shadow:var(--tds-select-dropdown-box-shadow);
855
- opacity:var(--tds-select-dropdown-open-opacity);
856
- transform:var(--tds-select-dropdown-open-transform);
857
- transition:var(--tds-select-dropdown-transition-enter);
858
- }
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;
859
631
 
860
- :is(.tds-select select:has( > button)) option::checkmark{
861
- display:none;
862
- }
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;
863
636
 
864
- @starting-style{
865
- :is(.tds-select select:has( > button))::picker(select):popover-open{
866
- opacity:var(--tds-select-dropdown-closed-opacity);
867
- transform:var(--tds-select-dropdown-closed-transform);
868
- }
869
- }
870
- }
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);
871
641
 
872
- .tds-input:has(textarea){
873
- --tds-input-padding-block:6px;
874
- --tds-input-resizer-size:var(--t-element-size-sm);
875
- --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");
876
- }
642
+ --tds-checkbox-label-color:var(--t-form-color);
877
643
 
878
- @supports (x: attr(x type(*))){
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;
879
648
 
880
- .tds-input:has(textarea){
881
- --tds-input-min-height:calc((attr(rows type(<number>), 3) * 1lh) + (var(--tds-input-padding-block) * 2) + 2px);
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;
882
659
  }
660
+
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);
883
667
  }
884
668
 
885
- .tds-input.tds-textarea--resize-vertical textarea{
886
- resize:vertical;
669
+ .tds-checkbox tds-indeterminate{
670
+ display:flex;
671
+ }
672
+
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
+ }
691
+
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%);
887
710
  }
888
711
 
889
- .tds-input.tds-textarea--resize-none textarea{
890
- resize:none;
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);
891
715
  }
892
716
 
893
- .tds-input.tds-textarea--resize-auto textarea{
894
- resize:vertical;
717
+ :is(.tds-checkbox input[type="checkbox"]):focus-visible{
718
+ outline:var(--t-focus-ring-outline);
719
+ outline-offset:var(--t-focus-ring-offset);
895
720
  }
896
721
 
897
- @supports (field-sizing: content){
898
- .tds-input.tds-textarea--resize-auto textarea{
899
- field-sizing:content;
900
- resize:none;
901
- }
722
+ :is(.tds-checkbox input[type="checkbox"]):disabled{
723
+ pointer-events:none;
902
724
  }
903
725
 
904
- .tds-input textarea{
905
- --tds-input-scrollbar-thumb-color-default:var(--t-fill-color-neutral-040);
906
- --tds-input-scrollbar-thumb-color-hidden:transparent;
907
- --tds-input-scrollbar-thumb-color-hover:var(--t-fill-color-neutral-030);
908
- --tds-input-scrollbar-thumb-color-thumb-hover:var(--t-fill-color-neutral-020);
909
- --tds-input-scrollbar-thumb-color-thumb-active:var(--t-fill-color-neutral-010);
910
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-default);
911
- --tds-input-scrollbar-surface-color:rgba(0, 0, 0, 0);
912
- --tds-input-scrollbar-thumb-border-radius:999px;
913
- --tds-input-scrollbar-thumb-border-width:3px;
914
- --tds-input-scrollbar-track-margin-block:.125rem;
915
- scrollbar-color:initial;
916
- transition-timing-function:var(--t-ease-in-out);
917
- transition-duration:var(--t-duration-200);
918
- transition-property:var(--tds-input-transition-property), --tds-input-scrollbar-thumb-color;
919
- }
726
+ @media (prefers-reduced-motion: reduce){
920
727
 
921
- @media (pointer: fine){
922
- :is(.tds-input textarea)::-webkit-scrollbar{
923
- width:12px;
924
- height:12px;
925
- cursor:default;
728
+ .tds-checkbox input[type="checkbox"]{
729
+ --tds-checkbox-transition-property:none;
730
+ }
926
731
  }
927
732
 
928
- :is(.tds-input textarea)::-webkit-scrollbar-thumb{
929
- cursor:default;
930
- background:var(--tds-input-scrollbar-thumb-color);
931
- background-clip:content-box;
932
- border:var(--tds-input-scrollbar-thumb-border-width) solid var(--tds-input-scrollbar-surface-color);
933
- border-radius:var(--tds-input-scrollbar-thumb-border-radius);
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);
934
743
  }
935
744
 
936
- :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
937
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
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);
938
762
  }
939
763
 
940
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
941
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
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);
942
767
  }
943
768
 
944
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
945
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
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);
772
+ }
773
+
774
+ .tds-checkbox:has(input:required) label::after{
775
+ margin-left:.25ch;
776
+ color:var(--t-text-color-status-error);
777
+ content:"*";
946
778
  }
947
779
 
948
- :is(.tds-input textarea)::-webkit-scrollbar-corner{
949
- background:var(--tds-input-scrollbar-surface-color);
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);
783
+
784
+ --tds-checkbox-label-color:var(--t-form-color-disabled);
785
+ --tds-checkbox-description-color:var(--t-form-color-disabled);
786
+ --tds-checkbox-cursor:not-allowed;
787
+ }
788
+
789
+ .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
790
+ --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
950
791
  }
951
792
 
952
- :is(.tds-input textarea)::-webkit-resizer{
953
- background:var(--tds-input-resizer-icon) no-repeat;
954
- background-position:right bottom;
955
- background-size:var(--tds-input-resizer-size) var(--tds-input-resizer-size);
793
+ .tds-checkbox-description{
794
+ display:flex;
795
+ grid-area:2 / 2;
796
+ gap:var(--t-spacing-half);
797
+ align-items:flex-start;
798
+ margin:0;
799
+ font-size:var(--tds-checkbox-description-font-size);
800
+ line-height:var(--tds-checkbox-description-line-height);
801
+ color:var(--tds-checkbox-description-color);
802
+ cursor:text;
803
+ }
804
+
805
+ .tds-checkbox-description .tds-checkbox-description-invalid-icon{
806
+ display:var(--tds-checkbox-description-invalid-icon-display);
807
+ flex-shrink:0;
808
+ margin-top:calc(.5lh - .5em);
809
+ line-height:var(--tds-checkbox-description-line-height);
810
+ }
811
+
812
+ .tds-checkbox--sm{
813
+ --tds-checkbox-line-height:1.35;
814
+ --tds-checkbox-input-size:var(--t-element-size-sm);
815
+ --tds-checkbox-font-size:var(--t-font-size-sm);
816
+ --tds-checkbox-description-font-size:var(--t-font-size-xs);
817
+ --tds-checkbox-description-line-height:1.3;
818
+ }
819
+
820
+
821
+ :is(.tds-input input)::-webkit-search-decoration,:is(.tds-input input)::-webkit-search-cancel-button,:is(.tds-input input)::-webkit-search-results-button,:is(.tds-input input)::-webkit-search-results-decoration{
822
+ -webkit-appearance:none;
823
+ appearance:none;
956
824
  }
957
825
 
958
- :is(.tds-input textarea)::-webkit-scrollbar-track{
959
- margin-block:var(--tds-input-scrollbar-track-margin-block);
960
- cursor:default;
826
+ [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
827
+ inline-size:1em;
828
+ block-size:2em;
961
829
  }
962
830
 
963
- @supports (-moz-appearance: none){
964
- :is(.tds-input textarea){
965
- scrollbar-color:var(--tds-input-scrollbar-thumb-color-default) var(--tds-input-scrollbar-surface-color);
966
- scrollbar-width:thin;
967
- }
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
+ }
968
837
 
969
- @media (hover){
970
- :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
971
- scrollbar-color:var(--tds-input-scrollbar-thumb-color-hover) var(--tds-input-scrollbar-surface-color);
972
- }
973
- }
974
- }
838
+ .tds-input--auto-width input{
839
+ field-sizing:content;
840
+ inline-size:auto;
975
841
  }
842
+ }
976
843
 
977
- .tds-toggle-switch{
978
- --tds-toggle-switch-font-size:var(--t-font-size-md);
979
- --tds-toggle-switch-column-gap:var(--t-spacing-1);
980
- --tds-toggle-switch-cursor:pointer;
981
- --tds-toggle-switch-display:inline-grid;
982
- --tds-toggle-switch-line-height:1.4;
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;
983
849
 
984
- --tds-toggle-switch-label-color:var(--t-form-color);
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;
985
855
 
986
- --tds-toggle-switch-track-width:var(--t-container-size-md);
987
- --tds-toggle-switch-track-outline:none;
988
- --tds-toggle-switch-track-height:var(--t-container-size-xs);
989
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color);
990
- --tds-toggle-switch-track-transition:background-color var(--t-duration-100) var(--t-ease-in-out);
856
+ --tds-radio-label-color:var(--t-form-color);
991
857
 
992
- --tds-toggle-switch-thumb-size:var(--t-element-size-md);
993
- --tds-toggle-switch-thumb-transform:translateX(0);
994
- --tds-toggle-switch-thumb-transition:transform var(--t-duration-200) var(--t-ease-in-out);
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);
995
861
 
996
- --tds-toggle-switch-description-font-size:var(--t-font-size-sm);
997
- --tds-toggle-switch-description-line-height:1.35;
998
- --tds-toggle-switch-description-color:var(--t-text-color-secondary);
999
862
  position:relative;
1000
-
1001
- display:var(--tds-toggle-switch-display);
863
+ display:inline-grid;
1002
864
  grid-template-columns:auto;
1003
865
  grid-auto-columns:1fr;
1004
- 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);
1005
869
  -webkit-user-select:none;
1006
870
  -moz-user-select:none;
1007
871
  user-select:none;
1008
872
  }
1009
873
 
1010
- .tds-toggle-switch input[type="checkbox"]{
1011
- position:absolute;
1012
- width:var(--tds-toggle-switch-track-width);
1013
- height:var(--tds-toggle-switch-track-height);
1014
- 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;
1015
889
  -webkit-appearance:none;
1016
890
  -moz-appearance:none;
1017
891
  appearance:none;
1018
- cursor:var(--tds-toggle-switch-cursor);
1019
- outline:var(--tds-toggle-switch-track-outline);
1020
- outline-offset:var(--t-focus-ring-offset);
1021
- background-color:transparent;
1022
- border:0;
1023
- 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);
1024
899
  }
1025
900
 
1026
- :is(.tds-toggle-switch input[type="checkbox"]):focus-visible{
1027
- --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);
1028
904
  }
1029
905
 
1030
- .tds-toggle-switch label{
1031
- display:inline-flex;
1032
- grid-area:1 / 2;
1033
- -moz-column-gap:var(--tds-toggle-switch-column-gap);
1034
- column-gap:var(--tds-toggle-switch-column-gap);
1035
- margin-top:-.09375em;
1036
- font-size:var(--tds-toggle-switch-font-size);
1037
- font-weight:var(--t-font-weight-normal);
1038
- line-height:var(--tds-toggle-switch-line-height);
1039
- color:var(--tds-toggle-switch-label-color);
1040
- cursor:var(--tds-toggle-switch-cursor);
1041
- }
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
+ }
1042
910
 
1043
- .tds-toggle-switch:not(:has(input:disabled)):has(input:hover){
1044
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-hover);
1045
- }
911
+ :is(.tds-radio input[type="radio"]):disabled{
912
+ pointer-events:none;
913
+ }
1046
914
 
1047
- .tds-toggle-switch:has(input:checked){
1048
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on);
1049
- --tds-toggle-switch-thumb-transform:translateX(calc(var(--tds-toggle-switch-track-width) - var(--tds-toggle-switch-thumb-size) - var(--t-spacing-half)));
915
+ @media (prefers-reduced-motion: reduce){
916
+
917
+ .tds-radio input[type="radio"]{
918
+ --tds-radio-transition-property:none;
919
+ }
920
+ }
921
+
922
+ .tds-radio:has(input:checked){
923
+ --tds-radio-input-background-color:var(--t-form-background-color);
924
+ --tds-radio-input-border-color:var(--t-border-color-control-info);
925
+ --tds-radio-input-border-width:4px;
926
+ }
927
+
928
+ .tds-radio:has(input:checked) input:hover:not(:disabled){
929
+ --tds-radio-input-background-color:var(--t-form-background-color);
930
+ --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
931
+ }
932
+
933
+ .tds-radio:has(input:user-invalid){
934
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
935
+ }
936
+
937
+ .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
938
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
939
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
940
+ }
941
+
942
+ .tds-radio:has(input:disabled){
943
+ --tds-radio-input-background-color:var(--t-form-background-color-disabled);
944
+ --tds-radio-input-border-color:var(--t-form-border-color-disabled);
945
+
946
+ --tds-radio-label-color:var(--t-form-color-disabled);
947
+ --tds-radio-description-color:var(--t-form-color-disabled);
948
+ --tds-radio-cursor:not-allowed;
949
+ }
950
+
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{
957
+ display:flex;
958
+ grid-area:2 / 2;
959
+ gap:var(--t-spacing-half);
960
+ align-items:flex-start;
961
+ margin:0;
962
+ font-size:var(--tds-radio-description-font-size);
963
+ line-height:var(--tds-radio-description-line-height);
964
+ color:var(--tds-radio-description-color);
965
+ cursor:text;
966
+ }
967
+
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;
974
+ }
975
+
976
+ .tds-toggle-switch{
977
+ --tds-toggle-switch-font-size:var(--t-font-size-md);
978
+ --tds-toggle-switch-column-gap:var(--t-spacing-1);
979
+ --tds-toggle-switch-cursor:pointer;
980
+ --tds-toggle-switch-display:inline-grid;
981
+ --tds-toggle-switch-line-height:1.4;
982
+
983
+ --tds-toggle-switch-label-color:var(--t-form-color);
984
+
985
+ --tds-toggle-switch-track-width:var(--t-container-size-md);
986
+ --tds-toggle-switch-track-outline:none;
987
+ --tds-toggle-switch-track-height:var(--t-container-size-xs);
988
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color);
989
+ --tds-toggle-switch-track-transition:background-color var(--t-duration-100) var(--t-ease-in-out);
990
+
991
+ --tds-toggle-switch-thumb-size:var(--t-element-size-md);
992
+ --tds-toggle-switch-thumb-transform:translateX(0);
993
+ --tds-toggle-switch-thumb-transition:transform var(--t-duration-200) var(--t-ease-in-out);
994
+
995
+ --tds-toggle-switch-description-font-size:var(--t-font-size-sm);
996
+ --tds-toggle-switch-description-line-height:1.35;
997
+ --tds-toggle-switch-description-color:var(--t-text-color-secondary);
998
+ position:relative;
999
+
1000
+ display:var(--tds-toggle-switch-display);
1001
+ grid-template-columns:auto;
1002
+ grid-auto-columns:1fr;
1003
+ gap:var(--t-spacing-fourth) var(--tds-toggle-switch-column-gap);
1004
+ -webkit-user-select:none;
1005
+ -moz-user-select:none;
1006
+ user-select:none;
1007
+ }
1008
+
1009
+ .tds-toggle-switch input[type="checkbox"]{
1010
+ position:absolute;
1011
+ width:var(--tds-toggle-switch-track-width);
1012
+ height:var(--tds-toggle-switch-track-height);
1013
+ margin:0;
1014
+ -webkit-appearance:none;
1015
+ -moz-appearance:none;
1016
+ appearance:none;
1017
+ cursor:var(--tds-toggle-switch-cursor);
1018
+ outline:var(--tds-toggle-switch-track-outline);
1019
+ outline-offset:var(--t-focus-ring-offset);
1020
+ background-color:transparent;
1021
+ border:0;
1022
+ border-radius:var(--t-border-radius-round);
1023
+ }
1024
+
1025
+ :is(.tds-toggle-switch input[type="checkbox"]):focus-visible{
1026
+ --tds-toggle-switch-track-outline:var(--t-focus-ring-outline);
1027
+ }
1028
+
1029
+ .tds-toggle-switch label{
1030
+ display:inline-flex;
1031
+ grid-area:1 / 2;
1032
+ -moz-column-gap:var(--tds-toggle-switch-column-gap);
1033
+ column-gap:var(--tds-toggle-switch-column-gap);
1034
+ margin-top:-.09375em;
1035
+ font-size:var(--tds-toggle-switch-font-size);
1036
+ font-weight:var(--t-font-weight-normal);
1037
+ line-height:var(--tds-toggle-switch-line-height);
1038
+ color:var(--tds-toggle-switch-label-color);
1039
+ cursor:var(--tds-toggle-switch-cursor);
1040
+ }
1041
+
1042
+ .tds-toggle-switch:not(:has(input:disabled)):has(input:hover){
1043
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-hover);
1044
+ }
1045
+
1046
+ .tds-toggle-switch:has(input:checked){
1047
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on);
1048
+ --tds-toggle-switch-thumb-transform:translateX(calc(var(--tds-toggle-switch-track-width) - var(--tds-toggle-switch-thumb-size) - var(--t-spacing-half)));
1050
1049
  }
1051
1050
 
1052
1051
  .tds-toggle-switch:has(input:checked):not(:has(input:disabled)):has(input:hover){
@@ -1115,629 +1114,630 @@
1115
1114
  --tds-toggle-switch-display:inline-flex;
1116
1115
  }
1117
1116
 
1117
+ .tds-input:has(textarea){
1118
+ --tds-input-padding-block:6px;
1119
+ --tds-input-resizer-size:var(--t-element-size-sm);
1120
+ --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");
1121
+ }
1118
1122
 
1119
- @media (prefers-reduced-motion: no-preference){
1123
+ @supports (x: attr(x type(*))){
1120
1124
 
1121
- :root{
1122
- interpolate-size:allow-keywords;
1125
+ .tds-input:has(textarea){
1126
+ --tds-input-min-height:calc((attr(rows type(<number>), 3) * 1lh) + (var(--tds-input-padding-block) * 2) + 2px);
1123
1127
  }
1124
1128
  }
1125
1129
 
1126
- @layer tds-component{
1127
- tds-sidenav,
1128
- .tds-sidenav{
1129
- --tds-sidenav-indent:12px;
1130
- --tds-sidenav-item-depth:0;
1130
+ .tds-input.tds-textarea--resize-vertical textarea{
1131
+ resize:vertical;
1132
+ }
1131
1133
 
1132
- --tds-sidenav-item-transition:background-color var(--t-duration-200) var(--t-ease-in-out);
1134
+ .tds-input.tds-textarea--resize-none textarea{
1135
+ resize:none;
1136
+ }
1133
1137
 
1134
- --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;
1135
- --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;
1136
- --tds-sidenav-collapse-closed-opacity:0;
1137
- --tds-sidenav-collapse-open-opacity:1;
1138
- --tds-sidenav-collapse-closed-transform:translateY(-8px);
1139
- --tds-sidenav-collapse-open-transform:translateY(0);
1138
+ .tds-input.tds-textarea--resize-auto textarea{
1139
+ resize:vertical;
1140
+ }
1140
1141
 
1141
- --tds-sidenav-item-icon-size:var(--t-element-size-md);
1142
- --tds-sidenav-item-background-hover:var(--t-fill-color-button-interaction-ghost-hover);
1143
- --tds-sidenav-item-background-active:var(--t-fill-color-button-interaction-ghost-active);
1144
- --tds-sidenav-item-background-selected:var(--t-fill-color-button-interaction-ghost-active);
1142
+ @supports (field-sizing: content){
1143
+ .tds-input.tds-textarea--resize-auto textarea{
1144
+ field-sizing:content;
1145
+ resize:none;
1146
+ }
1147
+ }
1145
1148
 
1146
- --tds-sidenav-item-nested-background-hover:var(--tds-sidenav-item-background-hover);
1147
- --tds-sidenav-item-nested-background-active:var(--tds-sidenav-item-background-hover);
1148
- --tds-sidenav-item-nested-background-selected:transparent;
1149
+ .tds-input textarea{
1150
+ --tds-input-scrollbar-thumb-color-default:var(--t-fill-color-neutral-040);
1151
+ --tds-input-scrollbar-thumb-color-hidden:transparent;
1152
+ --tds-input-scrollbar-thumb-color-hover:var(--t-fill-color-neutral-030);
1153
+ --tds-input-scrollbar-thumb-color-thumb-hover:var(--t-fill-color-neutral-020);
1154
+ --tds-input-scrollbar-thumb-color-thumb-active:var(--t-fill-color-neutral-010);
1155
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-default);
1156
+ --tds-input-scrollbar-surface-color:rgba(0, 0, 0, 0);
1157
+ --tds-input-scrollbar-thumb-border-radius:999px;
1158
+ --tds-input-scrollbar-thumb-border-width:3px;
1159
+ --tds-input-scrollbar-track-margin-block:.125rem;
1160
+ scrollbar-color:initial;
1161
+ transition-timing-function:var(--t-ease-in-out);
1162
+ transition-duration:var(--t-duration-200);
1163
+ transition-property:var(--tds-input-transition-property), --tds-input-scrollbar-thumb-color;
1164
+ }
1149
1165
 
1150
- --tds-sidenav-item-nested-border-color:var(--t-fill-color-neutral-050);
1151
- --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
1152
- --tds-sidenav-item-nested-border-color-selected:var(--t-border-color-status-info);
1166
+ @media (pointer: fine){
1167
+ :is(.tds-input textarea)::-webkit-scrollbar{
1168
+ width:12px;
1169
+ height:12px;
1170
+ cursor:default;
1171
+ }
1153
1172
 
1154
- --tds-sidenav-item-icon-color:var(--t-icon-color-secondary);
1155
- --tds-sidenav-item-icon-color-selected:var(--t-icon-color);
1156
- }
1173
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb{
1174
+ cursor:default;
1175
+ background:var(--tds-input-scrollbar-thumb-color);
1176
+ background-clip:content-box;
1177
+ border:var(--tds-input-scrollbar-thumb-border-width) solid var(--tds-input-scrollbar-surface-color);
1178
+ border-radius:var(--tds-input-scrollbar-thumb-border-radius);
1179
+ }
1157
1180
 
1158
- @media (prefers-reduced-motion: reduce){
1159
- tds-sidenav,
1160
- .tds-sidenav{
1161
- --tds-sidenav-collapse-transition-enter:none;
1162
- --tds-sidenav-collapse-transition-exit:none;
1163
- --tds-sidenav-collapse-closed-transform:none;
1164
- --tds-sidenav-collapse-open-transform:none;
1165
- }
1181
+ :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1182
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
1166
1183
  }
1167
1184
 
1168
- .tds-sidenav--theme-gray{
1169
- --tds-sidenav-item-background-hover:var(--t-fill-color-neutral-080);
1170
- --tds-sidenav-item-background-active:var(--t-fill-color-neutral-070);
1171
- --tds-sidenav-item-background-selected:var(--t-fill-color-neutral-050);
1172
- --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
1173
- --tds-sidenav-item-nested-border-color-selected:var(--t-fill-color-neutral-010);
1174
- }
1175
- }
1185
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
1186
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
1187
+ }
1176
1188
 
1177
- .tds-sidenav :where(nav,ul,.tds-sidenav-section){
1178
- display:flex;
1179
- }
1189
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
1190
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
1191
+ }
1180
1192
 
1181
- .tds-sidenav :where(nav,ul,.tds-sidenav-section,.tds-sidenav-collapse){
1182
- flex-direction:column;
1183
- gap:var(--t-spacing-half);
1184
- width:100%;
1185
- }
1193
+ :is(.tds-input textarea)::-webkit-scrollbar-corner{
1194
+ background:var(--tds-input-scrollbar-surface-color);
1195
+ }
1186
1196
 
1187
- .tds-sidenav-section-list{
1188
- width:100%;
1189
- padding:0;
1190
- margin:0;
1191
- list-style:none;
1192
- }
1197
+ :is(.tds-input textarea)::-webkit-resizer{
1198
+ background:var(--tds-input-resizer-icon) no-repeat;
1199
+ background-position:right bottom;
1200
+ background-size:var(--tds-input-resizer-size) var(--tds-input-resizer-size);
1201
+ }
1193
1202
 
1194
- .tds-sidenav-section-header{
1195
- display:flex;
1196
- align-items:baseline;
1197
- justify-content:space-between;
1198
- padding-top:var(--t-spacing-2);
1199
- }
1203
+ :is(.tds-input textarea)::-webkit-scrollbar-track{
1204
+ margin-block:var(--tds-input-scrollbar-track-margin-block);
1205
+ cursor:default;
1206
+ }
1200
1207
 
1201
- .tds-sidenav-section-header h2{
1202
- margin:0;
1203
- font-size:var(--t-font-size-sm);
1204
- font-weight:var(--t-font-weight-semibold);
1205
- line-height:1.35;
1206
- color:var(--t-text-color-secondary);
1207
- text-transform:uppercase;
1208
- }
1208
+ @supports (-moz-appearance: none){
1209
+ :is(.tds-input textarea){
1210
+ scrollbar-color:var(--tds-input-scrollbar-thumb-color-default) var(--tds-input-scrollbar-surface-color);
1211
+ scrollbar-width:thin;
1212
+ }
1209
1213
 
1210
- .tds-sidenav-section:first-of-type .tds-sidenav-section-header{
1211
- padding-top:0;
1214
+ @media (hover){
1215
+ :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1216
+ scrollbar-color:var(--tds-input-scrollbar-thumb-color-hover) var(--tds-input-scrollbar-surface-color);
1217
+ }
1218
+ }
1219
+ }
1212
1220
  }
1213
1221
 
1214
- .tds-sidenav-section-header [slot="label-actions"]{
1215
- display:flex;
1216
- gap:var(--t-spacing-half);
1217
- align-items:center;
1218
- }
1222
+ .tds-radio-group{
1223
+ --tds-radio-group-font-size:var(--t-font-size-md);
1224
+ --tds-radio-group-line-height:1.4;
1225
+ --tds-radio-group-gap:var(--t-spacing-1);
1219
1226
 
1220
- .tds-sidenav-section [slot="section-actions"]{
1221
- display:flex;
1222
- gap:12px;
1223
- align-items:center;
1224
- min-height:42px;
1225
- padding:var(--t-spacing-1) 0;
1226
- }
1227
+ --tds-radio-group-legend-margin-bottom:var(--tds-radio-group-gap);
1227
1228
 
1228
- .tds-sidenav-section-list,
1229
- .tds-sidenav-item{
1230
- width:100%;
1229
+ --tds-radio-group-description-font-size:var(--t-font-size-sm);
1230
+ --tds-radio-group-description-line-height:1.35;
1231
+ --tds-radio-group-description-color:var(--t-text-color-secondary);
1232
+ --tds-radio-group-description-invalid-icon-display:none;
1233
+ display:flex;
1234
+ flex-direction:column;
1235
+ gap:var(--tds-radio-group-gap);
1231
1236
  padding:0;
1232
1237
  margin:0;
1233
- }
1234
-
1235
- .tds-sidenav-item :is(a,button){
1236
- position:relative;
1237
- display:flex;
1238
- gap:12px;
1239
- align-items:center;
1240
- width:100%;
1241
- padding:12px;
1242
- overflow:hidden;
1243
- font-size:var(--t-font-size-sm);
1244
- line-height:18px;
1245
- color:var(--t-text-color-headline);
1246
- white-space:nowrap;
1247
- text-decoration:none;
1248
- -webkit-appearance:none;
1249
- -moz-appearance:none;
1250
- appearance:none;
1251
- cursor:pointer;
1252
- background-color:var(--tds-sidenav-item-background, transparent);
1253
- border:0;
1254
- border-radius:var(--t-border-radius);
1255
- transition:var(--tds-sidenav-item-transition);
1256
- }
1257
-
1258
- :is(.tds-sidenav-item :is(a,button)):not(:has(.prefix,.suffix)),:is(.tds-sidenav-item :is(a,button)) :is(:not(.prefix,.suffix)){
1259
- display:block;
1260
- flex:1;
1261
- overflow:hidden;
1262
- text-overflow:ellipsis;
1263
- text-align:left;
1264
- white-space:nowrap;
1265
- }
1266
-
1267
- :is(.tds-sidenav-item :is(a,button)):hover,:is(.tds-sidenav-item :is(a,button)):focus-visible{
1268
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-hover);
1269
- color:var(--t-text-color-headline);
1270
- text-decoration:none;
1271
- }
1272
1238
 
1273
- :is(.tds-sidenav-item :is(a,button)):active{
1274
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-active);
1275
- }
1276
-
1277
- :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]){
1278
- overflow:hidden;
1279
- color:var(--tds-sidenav-item-icon-color);
1280
- }
1281
-
1282
- :is(:is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"])),:is(:is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"])) svg{
1283
- display:block;
1284
- width:var(--tds-sidenav-item-icon-size);
1285
- height:var(--tds-sidenav-item-icon-size);
1286
- }
1287
-
1288
- :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section{
1289
- --tds-sidenav-indent:19px;
1290
- }
1291
-
1292
- [aria-expanded="true"]:is(.tds-sidenav-item :is(a,button)) + .tds-sidenav-section-list{
1293
- visibility:visible;
1294
- block-size:auto;
1295
- opacity:1;
1296
- }
1297
-
1298
- .tds-sidenav-item.selected > :is(a,button),.tds-sidenav-item:has(.tds-sidenav-section):has(.selected) > :is(a,button){
1299
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-selected);
1300
- --tds-sidenav-item-icon-color:var(--tds-sidenav-item-icon-color-selected);
1239
+ font-size:var(--tds-radio-group-font-size);
1240
+ line-height:var(--tds-radio-group-line-height);
1241
+ border:0;
1242
+ }
1301
1243
 
1302
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-selected);
1303
- font-weight:var(--t-font-weight-semibold);
1244
+ .tds-radio-group legend{
1245
+ padding:0;
1246
+ margin-bottom:var(--tds-radio-group-legend-margin-bottom);
1304
1247
  }
1305
1248
 
1306
- .tds-sidenav-item:has(.tds-sidenav-section){
1307
- display:flex;
1308
- flex-direction:column;
1309
- gap:var(--t-spacing-half);
1249
+ .tds-radio-group:has(.tds-radio-group-description){
1250
+ --tds-radio-group-legend-margin-bottom:var(--t-spacing-fourth);
1310
1251
  }
1311
1252
 
1312
- .tds-sidenav-item .tds-sidenav-section-list{
1313
- --tds-sidenav-item-depth:1;
1314
- gap:0;
1253
+ .tds-radio-group[aria-invalid="true"]{
1254
+ --tds-radio-group-description-color:var(--t-text-color-status-error);
1255
+ --tds-radio-group-description-invalid-icon-display:inline-block;
1315
1256
  }
1316
1257
 
1317
- .tds-sidenav-action--toggle + :is(.tds-sidenav-item .tds-sidenav-section-list){
1318
- visibility:hidden;
1319
- block-size:0;
1320
- overflow-y:clip;
1321
- opacity:0;
1322
- transition:content-visibility var(--t-duration-400) allow-discrete, opacity var(--t-duration-400), block-size var(--t-duration-400);
1323
- }
1324
-
1325
- :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list{
1326
- --tds-sidenav-item-depth:2;
1327
- }
1328
-
1329
- :is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
1330
- min-height:var(--t-element-size-2xl);
1331
- padding-block:9px;
1332
- padding-left:calc((var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth)) + var(--tds-sidenav-indent) + var(--t-spacing-fourth));
1333
- line-height:1;
1334
- background-color:transparent;
1258
+ .tds-radio-group[aria-invalid="true"] .tds-radio{
1259
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
1335
1260
  }
1336
1261
 
1337
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::before{
1338
- position:absolute;
1339
- top:0;
1340
- bottom:0;
1341
- left:calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
1342
- width:2px;
1343
- content:"";
1344
- background-color:var(--tds-sidenav-item-nested-border-color);
1345
- transition:var(--tds-sidenav-item-transition);
1346
- }
1347
-
1348
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::after{
1349
- position:absolute;
1350
- inset:0 0 0 calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
1351
- z-index:-1;
1352
- height:100%;
1353
- content:"";
1354
- background-color:var(--tds-sidenav-item-nested-background);
1355
- border-radius:0 var(--t-border-radius) var(--t-border-radius) 0;
1356
- transition:var(--tds-sidenav-item-transition);
1357
- }
1358
-
1359
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):not(:has(.prefix,.suffix)),:is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)) :is(:not(.prefix,.suffix)){
1360
- display:block;
1361
- text-align:left;
1362
- white-space:normal;
1363
- }
1364
-
1365
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):hover,:is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):focus-visible{
1366
- --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-hover);
1367
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-hover);
1262
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
1263
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1264
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
1368
1265
  }
1369
1266
 
1370
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):active{
1371
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-active);
1267
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
1268
+ --tds-radio-input-background-color:var(--t-form-background-color);
1372
1269
  }
1373
1270
 
1374
- .selected:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
1375
- --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-selected);
1376
- font-weight:var(--t-font-weight-medium);
1271
+ .tds-radio-group:has(input:required) legend::after{
1272
+ margin-left:.25ch;
1273
+ color:var(--t-text-color-status-error);
1274
+ content:"*";
1377
1275
  }
1378
1276
 
1379
- .tds-sidenav-responsive-header{
1277
+ .tds-radio-group-fields{
1380
1278
  display:flex;
1381
- gap:var(--t-spacing-2);
1382
- align-items:center;
1383
- width:100%;
1279
+ flex-direction:column;
1280
+ gap:var(--tds-radio-group-gap);
1281
+ align-items:flex-start;
1384
1282
  }
1385
1283
 
1386
- .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle{
1387
- order:0;
1388
- }
1284
+ .tds-radio-group-description{
1285
+ display:flex;
1286
+ gap:var(--t-spacing-half);
1287
+ align-items:flex-start;
1288
+ margin:0;
1289
+ font-size:var(--tds-radio-group-description-font-size);
1290
+ line-height:var(--tds-radio-group-description-line-height);
1291
+ color:var(--tds-radio-group-description-color);
1292
+ cursor:text;
1293
+ }
1389
1294
 
1390
- .tds-sidenav-responsive-header .tds-sidenav-responsive-header-label{
1391
- flex:1;
1392
- order:1;
1393
- margin:0;
1394
- font-size:var(--t-font-size-lg);
1395
- font-weight:var(--t-font-weight-medium);
1396
- color:var(--t-text-color-headline);
1295
+ .tds-radio-group-description .tds-radio-group-description-invalid-icon{
1296
+ display:var(--tds-radio-group-description-invalid-icon-display);
1297
+ flex-shrink:0;
1298
+ margin-top:calc(.5lh - .5em);
1299
+ line-height:var(--tds-radio-group-description-line-height);
1397
1300
  }
1398
1301
 
1399
- @media (max-width: 719px){
1400
- .tds-sidenav-collapse{
1401
- z-index:10001;
1402
- display:none;
1403
- max-width:min(448px, calc(100vw - 48px));
1404
- padding:0;
1405
- margin:12px 0;
1406
- position-area:bottom span-right;
1407
- overflow:hidden;
1408
- outline:0;
1409
- background:var(--t-surface-color-card);
1410
- border:0;
1411
- border-radius:6px;
1412
- box-shadow:0 8px 20px 0 rgba(0, 0, 0, .25);
1413
- opacity:var(--tds-sidenav-collapse-open-opacity);
1414
- transform:var(--tds-sidenav-collapse-open-transform);
1415
- transition:var(--tds-sidenav-collapse-transition-enter);
1416
- will-change:transform;
1417
- }
1302
+ .tds-radio-group--sm{
1303
+ --tds-radio-group-line-height:1.35;
1304
+ --tds-radio-group-font-size:var(--t-font-size-sm);
1305
+ --tds-radio-group-description-font-size:var(--t-font-size-xs);
1306
+ --tds-radio-group-description-line-height:1.3;
1307
+ }
1418
1308
 
1419
- .tds-sidenav-scroll-container{
1420
- --webkit-overflow-scrolling:touch;
1421
- display:block;
1422
- width:100%;
1423
- height:-moz-fit-content;
1424
- height:fit-content;
1425
- padding:var(--t-spacing-2);
1426
- overflow-y:auto;
1427
- }
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);
1428
1326
 
1429
- .tds-sidenav-item :is(a, button) :is(.prefix){
1430
- display:none;
1431
- }
1432
- @supports selector(:popover-open){
1433
- .tds-sidenav-collapse:popover-open{
1434
- display:flex;
1435
- }
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);
1436
1342
 
1437
- .tds-sidenav-collapse:not(:popover-open){
1438
- opacity:var(--tds-sidenav-collapse-closed-opacity);
1439
- transition:var(--tds-sidenav-collapse-transition-exit);
1440
- }
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);
1441
1351
 
1442
- @starting-style{
1443
- .tds-sidenav-collapse:popover-open{
1444
- opacity:var(--tds-sidenav-collapse-closed-opacity);
1445
- transform:var(--tds-sidenav-collapse-closed-transform);
1446
- }
1447
- }
1448
- }
1449
- @supports not selector(:popover-open){
1450
- .tds-sidenav-collapse.\:popover-open{
1451
- display:flex;
1452
- }
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);
1453
1362
 
1454
- .tds-sidenav-collapse:not(.\:popover-open){
1455
- opacity:var(--tds-sidenav-collapse-closed-opacity);
1456
- transition:var(--tds-sidenav-collapse-transition-exit);
1457
- }
1458
- }
1363
+ position:relative;
1364
+ display:flex;
1365
+ flex-direction:column;
1366
+ gap:var(--t-spacing-half);
1459
1367
  }
1460
1368
 
1461
- @media (min-width: 720px){
1462
- .tds-sidenav-responsive-header{
1463
- display:none;
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;
1464
1374
  }
1465
- }
1466
1375
 
1467
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
1468
- display:none;
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);
1405
+ }
1406
+
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);
1469
1409
  }
1470
1410
 
1471
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
1472
- display:block;
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);
1473
1415
  }
1474
1416
 
1475
- tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1476
- display:flex;
1477
- flex-direction:column;
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);
1478
1419
  }
1479
1420
 
1480
- @layer t-critical{
1481
- tds-page-header:not(.hydrated){
1482
- display:none;
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;
1483
1428
  }
1484
- }
1485
-
1486
- @layer t-component{
1487
- .tds-page-header{
1488
- --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
1489
- --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
1490
- --tds-page-header-color:var(--t-text-color);
1491
- --tds-page-header-bottom-border-color:var(--t-surface-color-canvas);
1492
- --tds-page-header-headline-color:var(--t-text-color-headline);
1493
- --tds-page-header-headline-font-size:var(--t-font-size-2xl);
1494
- --tds-page-header-padding-x:var(--t-spacing-2);
1495
- --tds-page-header-padding-y:var(--t-spacing-2);
1496
- --tds-page-header-nav-padding-x:var(--tds-page-header-padding-x, var(--t-spacing-3));
1497
- --tds-page-header-nav-gap:var(--t-spacing-1);
1498
- --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%);
1499
- --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
1500
- --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
1501
- --tds-page-header-nav-item-color:var(--t-text-color-secondary);
1502
- --tds-page-header-nav-item-background-color:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 35%);
1503
- --tds-page-header-nav-item-border-width:1px;
1504
1429
 
1505
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
1506
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-bottom-border-color);
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
+ }
1507
1435
 
1508
- --tds-page-header-nav-item-color-hover:var(--t-text-color);
1509
- --tds-page-header-nav-item-background-color-hover:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 20%);
1510
- --tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
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;
1441
+ }
1511
1442
 
1512
- --tds-page-header-nav-item-background-color-active:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 10%);
1513
- --tds-page-header-nav-item-border-color-active:var(--tds-page-header-nav-item-background-color-active);
1443
+ .tds-select:has( > [popover]:popover-open) > button{
1444
+ border-color:var(--tds-select-border-color-active);
1445
+ }
1514
1446
 
1515
- --tds-page-header-nav-item-color-disabled:var(--t-text-color-disabled);
1516
- --tds-page-header-nav-item-background-color-disabled:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 50%);
1517
- --tds-page-header-nav-item-border-color-disabled:var(--tds-page-header-nav-item-background-color-disabled);
1447
+ :is(.tds-select:has( > [popover]:popover-open) > button)::after{
1448
+ transform:rotate(.5turn);
1449
+ }
1518
1450
 
1519
- --tds-page-header-nav-item-color-selected:var(--t-text-color);
1520
- --tds-page-header-nav-item-background-color-selected:var(--t-surface-color-canvas);
1521
- --tds-page-header-nav-item-border-color-selected:var(--tds-page-header-nav-item-background-color-selected);
1522
- --tds-page-header-nav-item-border-bottom-color-selected:var(--tds-page-header-nav-item-background-color-selected);
1523
- --tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning);
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;
1524
1456
  }
1525
1457
 
1526
- .tds-page-header--profile{
1527
- --tds-page-header-padding-y:20px;
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);
1528
1469
  }
1529
1470
 
1530
- @supports (color: light-dark(#fff, #000)){
1531
- .tds-page-header{
1532
- --tds-page-header-nav-background-start:light-dark(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0));
1533
- --tds-page-header-nav-background-end:light-dark(rgba(0, 0, 0, .05), rgba(255, 255, 255, .1));
1471
+ :is(.tds-select :is(li[role="option"],option:not([hidden]))):focus-visible{
1472
+ outline:none;
1534
1473
  }
1535
- }
1536
1474
 
1537
- @media (min-width: 600px){
1538
- .tds-page-header{
1539
- --tds-page-header-background-color:var(--t-surface-color-canvas);
1540
- --tds-page-header-color:var(--t-text-color-secondary);
1541
- --tds-page-header-bottom-border-color:var(--t-border-color);
1542
- --tds-page-header-padding-x:var(--t-spacing-3);
1543
- --tds-page-header-headline-font-size:var(--t-font-size-3xl);
1544
- --tds-page-header-nav-gap:var(--t-spacing-half);
1545
- --tds-page-header-nav-background:transparent;
1546
- --tds-page-header-nav-item-padding-x:var(--t-spacing-2);
1547
- --tds-page-header-nav-item-border-width:1px;
1548
- --tds-page-header-nav-item-color:var(--t-text-color);
1549
- --tds-page-header-nav-item-background-color:var(--t-fill-color-neutral-070);
1550
- --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-060);
1551
- --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-050);
1552
- --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
1553
- --tds-page-header-nav-item-border-color-selected:var(--t-border-color);
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);
1554
1477
  }
1555
- }
1556
- }
1557
-
1558
- .tds-page-header{
1559
- display:flex;
1560
- flex-direction:column;
1561
- padding-top:var(--tds-page-header-padding-y);
1562
- color:var(--tds-page-header-color);
1563
- background:var(--tds-page-header-background-color);
1564
- border-bottom:1px solid var(--tds-page-header-bottom-border-color);
1565
- }
1566
1478
 
1567
- .tds-page-header:not(.has-nav){
1568
- padding-bottom:var(--tds-page-header-padding-y);
1569
- }
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
+ }
1570
1482
 
1571
- .tds-page-header.inactive{
1572
- background:var(--tds-page-header-background-color-inactive);
1573
- }
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;
1486
+ }
1574
1487
 
1575
- .tds-page-header :is([slot="actions"],.tds-page-header__actions){
1576
- width:100%;
1577
- }
1488
+ :is(.tds-select :is(li[role="option"],option:not([hidden]))):is([aria-disabled="true"],:disabled):is(:focus,:hover){
1489
+ background:transparent;
1490
+ }
1578
1491
 
1579
- .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
1580
- display:flex;
1581
- flex-flow:row wrap;
1582
- gap:var(--t-spacing-half) var(--t-spacing-1);
1583
- align-items:flex-start;
1584
- justify-content:flex-start;
1585
- min-width:0;
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;
1586
1506
  }
1587
1507
 
1588
- :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{
1589
- display:flex;
1590
- gap:var(--tds-page-header-nav-gap);
1591
- padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
1592
- margin:0 0 -1px;
1593
- overflow:auto;
1594
- list-style:none;
1595
- background:var(--tds-page-header-nav-background);
1596
- }
1597
-
1598
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button){
1599
- position:relative;
1508
+ :is(.tds-select :is(li[role="presentation"],legend)) span{
1600
1509
  display:inline-flex;
1601
- padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
1602
- font-size:var(--t-font-size-sm);
1603
- line-height:22px;
1604
- color:var(--tds-page-header-nav-item-color);
1605
- white-space:nowrap;
1606
- text-decoration:none;
1607
- -webkit-appearance:none;
1608
- -moz-appearance:none;
1609
- appearance:none;
1610
- cursor:pointer;
1611
- outline-offset:-2px;
1612
- background-color:var(--tds-page-header-nav-item-background-color);
1613
- background-clip:padding-box;
1614
- border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
1615
- border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
1616
- border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
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);
1617
1514
  }
1618
1515
 
1619
- .selected:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)){
1620
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-selected);
1621
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-selected);
1622
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-selected);
1623
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-selected);
1624
- }
1625
-
1626
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):hover{
1627
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
1628
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
1629
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
1630
- }
1516
+ @container scroll-state(stuck){
1631
1517
 
1632
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):active{
1633
- background-color:var(--tds-page-header-nav-item-background-color-active);
1634
- border-color:var(--tds-page-header-nav-item-border-color-active);
1635
- }
1518
+ :is(.tds-select :is(li[role="presentation"],legend)) span{
1519
+ color:var(--tds-select-group-label-color-stuck);
1520
+ }
1636
1521
 
1637
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):disabled{
1638
- color:var(--tds-page-header-nav-item-color-disabled);
1639
- cursor:not-allowed;
1640
- background-color:var(--tds-page-header-nav-item-background-color-disabled);
1641
- opacity:1;
1642
- }
1522
+ @media (forced-colors: active){
1643
1523
 
1644
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
1645
- position:relative;
1524
+ :is(.tds-select :is(li[role="presentation"],legend)) span{
1525
+ color:var(--tds-select-group-label-color-stuck);
1646
1526
  }
1647
-
1648
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator)) :is(a,button){
1649
- -webkit-mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
1650
- mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
1527
+ }
1651
1528
  }
1652
1529
 
1653
- :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{
1654
- position:absolute;
1655
- top:-5px;
1656
- right:-2px;
1657
- width:10px;
1658
- height:10px;
1659
- content:"";
1660
- background:var(--tds-page-header-nav-item-indicator-color);
1661
- border-radius:50%;
1662
- }
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
+ }
1663
1534
 
1664
- @media (prefers-reduced-motion: no-preference){
1665
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
1666
- animation:indicator-pulse 1.25s ease infinite;
1667
- }
1668
- }
1535
+ @media (prefers-reduced-motion: reduce){
1669
1536
 
1670
- .tds-page-header__title-bar{
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{
1671
1549
  display:flex;
1672
- flex-direction:column;
1673
- gap:var(--t-spacing-2) var(--t-spacing-1);
1550
+ gap:var(--t-spacing-half);
1674
1551
  align-items:flex-start;
1675
- justify-content:space-between;
1676
- 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;
1677
1557
  }
1678
1558
 
1679
- .tds-page-header--profile > .tds-page-header__title-bar{
1680
- 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;
1681
1564
  }
1682
1565
 
1683
- .tds-page-header__primary{
1684
- 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;
1685
1574
  }
1686
1575
 
1687
- .tds-page-header__primary h1{
1688
- margin:0;
1689
- font-size:var(--tds-page-header-headline-font-size);
1690
- font-weight:var(--t-font-weight-normal);
1691
- line-height:32px;
1692
- color:var(--tds-page-header-headline-color);
1693
- 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;
1694
1586
  }
1695
1587
 
1696
- @media (min-width: 960px){
1697
- .tds-page-header__primary{
1698
- flex:1 1 max-content;
1699
- width:auto;
1700
- min-width:0;
1701
- 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);
1702
1603
  }
1703
1604
 
1704
- .tds-page-header__title-bar,
1705
- .tds-page-header--profile .tds-page-header__title-bar{
1706
- flex-flow:row nowrap;
1707
- row-gap:12px;
1708
- 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
+ overscroll-behavior:none;
1620
+ -webkit-user-select:none;
1621
+ -moz-user-select:none;
1622
+ user-select:none;
1623
+ scroll-padding-top:calc(var(--tds-select-group-label-padding-block-start) + var(--tds-select-group-label-font-size) + var(--t-spacing-2));
1624
+ scrollbar-color:var(--tds-select-dropdown-scrollbar-color);
1625
+ scrollbar-width:var(--tds-select-dropdown-scrollbar-width);
1626
+ background:var(--tds-select-dropdown-background-color);
1627
+ border:var(--tds-select-dropdown-border);
1628
+ border-radius:var(--tds-select-dropdown-border-radius);
1629
+ box-shadow:var(--tds-select-dropdown-box-shadow);
1630
+ opacity:var(--tds-select-dropdown-open-opacity);
1631
+ transform:var(--tds-select-dropdown-open-transform);
1632
+ transition:var(--tds-select-dropdown-transition-enter);
1709
1633
  }
1710
- .tds-page-header :is([slot="actions"],.tds-page-header__actions){
1711
- width:auto;
1634
+
1635
+ :is(.tds-select:has( > button) [popover]):not(:popover-open){
1636
+ opacity:var(--tds-select-dropdown-closed-opacity);
1637
+ transform:var(--tds-select-dropdown-closed-transform);
1638
+ transition:var(--tds-select-dropdown-transition-exit);
1639
+ }
1640
+
1641
+ :is(.tds-select:has( > button) [popover]) ul{
1642
+ padding:0;
1643
+ margin:0;
1644
+ list-style:none;
1645
+ }
1646
+
1647
+ @starting-style{
1648
+ :is(.tds-select:has( > button) [popover]):popover-open{
1649
+ opacity:var(--tds-select-dropdown-closed-opacity);
1650
+ transform:var(--tds-select-dropdown-closed-transform);
1651
+ }
1652
+ }
1653
+
1654
+ @supports ((-webkit-appearance: base-select) or (-moz-appearance: base-select) or (appearance: base-select)){
1655
+ .tds-select select:has(> button){
1656
+ padding-inline-end:0;
1657
+ background-image:none;
1658
+ }
1659
+ @media (hover) and (pointer: fine){
1660
+ :is(.tds-select select:has( > button)),:is(.tds-select select:has( > button))::picker(select){
1661
+ padding-block:0;
1662
+ -webkit-appearance:base-select;
1663
+ -moz-appearance:base-select;
1664
+ appearance:base-select;
1665
+ }
1666
+ }
1667
+ :is(.tds-select select:has( > button))::picker-icon{
1668
+ flex-shrink:0;
1669
+ width:var(--tds-select-caret-size);
1670
+ height:var(--tds-select-caret-size);
1671
+ margin-inline-end:var(--tds-select-caret-inline-offset);
1672
+ content:var(--tds-select-background-image);
1673
+ transition:var(--tds-select-caret-transition);
1674
+ }
1675
+
1676
+ :is(.tds-select select:has( > button))::picker(select):not(:popover-open){
1677
+ opacity:var(--tds-select-dropdown-closed-opacity);
1678
+ transform:var(--tds-select-dropdown-closed-transform);
1679
+ transition:var(--tds-select-dropdown-transition-exit);
1680
+ }
1681
+
1682
+ :is(.tds-select select:has( > button)):open,:is(.tds-select select:has( > button)):focus-within{
1683
+ outline-color:var(--t-focus-ring-color);
1684
+ outline-offset:var(--t-focus-ring-offset);
1685
+ border-color:var(--tds-select-border-color-active);
1686
+ }
1687
+
1688
+ :is(.tds-select select:has( > button)):open::picker-icon{
1689
+ opacity:1;
1690
+ transform:rotate(.5turn);
1691
+ }
1692
+
1693
+ :is(.tds-select select:has( > button)) selectedcontent{
1694
+ overflow:hidden;
1695
+ text-overflow:ellipsis;
1696
+ line-height:calc(var(--tds-select-min-height) - 2px);
1697
+ white-space:nowrap;
1698
+ }
1699
+
1700
+ :is(.tds-select select:has( > button)):has(option[hidden][disabled][value=""]:checked) > button{
1701
+ color:var(--tds-select-placeholder-color);
1702
+ }
1703
+
1704
+ :is(.tds-select select:has( > button))::picker(select){
1705
+ inset:auto;
1706
+ inline-size:-moz-max-content;
1707
+ inline-size:max-content;
1708
+ min-inline-size:anchor-size(width);
1709
+ max-inline-size:100vi;
1710
+ padding:var(--tds-select-dropdown-padding);
1711
+ margin-block:var(--tds-select-dropdown-margin-block);
1712
+ position-try-fallbacks:flip-block, flip-inline;
1713
+ overflow:auto;
1714
+ overflow-x:hidden;
1715
+ scroll-behavior:var(--tds-select-dropdown-scroll-behavior);
1716
+ overscroll-behavior:none;
1717
+ -webkit-user-select:none;
1718
+ -moz-user-select:none;
1719
+ user-select:none;
1720
+ scrollbar-color:var(--tds-select-dropdown-scrollbar-color);
1721
+ scrollbar-width:var(--tds-select-dropdown-scrollbar-width);
1722
+ background:var(--tds-select-dropdown-background-color);
1723
+ border:var(--tds-select-dropdown-border);
1724
+ border-radius:var(--tds-select-dropdown-border-radius);
1725
+ box-shadow:var(--tds-select-dropdown-box-shadow);
1726
+ opacity:var(--tds-select-dropdown-open-opacity);
1727
+ transform:var(--tds-select-dropdown-open-transform);
1728
+ transition:var(--tds-select-dropdown-transition-enter);
1712
1729
  }
1713
1730
 
1714
- .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
1715
- justify-content:flex-end;
1731
+ :is(.tds-select select:has( > button)) option::checkmark{
1732
+ display:none;
1716
1733
  }
1717
- }
1718
-
1719
- .tds-page-header-phone,
1720
- .tds-page-header-email{
1721
- color:var(--tds-page-header-color);
1722
- white-space:nowrap;
1723
- }
1724
-
1725
- .tds-page-header-email{
1726
- max-width:100%;
1727
- overflow:hidden;
1728
- text-overflow:ellipsis;
1729
- }
1730
-
1731
- @keyframes indicator-pulse{
1732
- 0%{
1733
- opacity:.3;
1734
- transform:scale(.9);
1735
- }
1736
1734
 
1737
- 100%{
1738
- opacity:0;
1739
- transform:scale(1.75);
1740
- }
1735
+ @starting-style{
1736
+ :is(.tds-select select:has( > button))::picker(select):popover-open{
1737
+ opacity:var(--tds-select-dropdown-closed-opacity);
1738
+ transform:var(--tds-select-dropdown-closed-transform);
1739
+ }
1740
+ }
1741
1741
  }
1742
1742
 
1743
1743
  .tds-input{
@@ -3323,84 +3323,6 @@ a[class="tds-btn"]{
3323
3323
  @media (prefers-color-scheme: dark){
3324
3324
  }
3325
3325
 
3326
- .tds-checkbox-group{
3327
- --tds-checkbox-group-font-size:var(--t-font-size-md);
3328
- --tds-checkbox-group-line-height:1.4;
3329
- --tds-checkbox-group-gap:var(--t-spacing-1);
3330
-
3331
- --tds-checkbox-group-legend-margin-bottom:var(--tds-checkbox-group-gap);
3332
-
3333
- --tds-checkbox-group-description-font-size:var(--t-font-size-sm);
3334
- --tds-checkbox-group-description-line-height:1.35;
3335
- --tds-checkbox-group-description-color:var(--t-text-color-secondary);
3336
- --tds-checkbox-group-description-invalid-icon-display:none;
3337
- display:flex;
3338
- flex-direction:column;
3339
- gap:var(--tds-checkbox-group-gap);
3340
- padding:0;
3341
- margin:0;
3342
-
3343
- font-size:var(--tds-checkbox-group-font-size);
3344
- line-height:var(--tds-checkbox-group-line-height);
3345
- border:0;
3346
- }
3347
-
3348
- .tds-checkbox-group legend{
3349
- padding:0;
3350
- margin-bottom:var(--tds-checkbox-group-legend-margin-bottom);
3351
- }
3352
-
3353
- .tds-checkbox-group:has(.tds-checkbox-group-description){
3354
- --tds-checkbox-group-legend-margin-bottom:var(--t-spacing-fourth);
3355
- }
3356
-
3357
- .tds-checkbox-group[aria-invalid="true"]{
3358
- --tds-checkbox-group-description-color:var(--t-text-color-status-error);
3359
- --tds-checkbox-group-description-invalid-icon-display:inline-block;
3360
- }
3361
-
3362
- .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) legend::after{
3363
- margin-left:.25ch;
3364
- color:var(--t-text-color-status-error);
3365
- content:"*";
3366
- }
3367
-
3368
- .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
3369
- content:none;
3370
- }
3371
-
3372
- .tds-checkbox-group-fields{
3373
- display:flex;
3374
- flex-direction:column;
3375
- gap:var(--tds-checkbox-group-gap);
3376
- align-items:flex-start;
3377
- }
3378
-
3379
- .tds-checkbox-group-description{
3380
- display:flex;
3381
- gap:var(--t-spacing-half);
3382
- align-items:flex-start;
3383
- margin:0;
3384
- font-size:var(--tds-checkbox-group-description-font-size);
3385
- line-height:var(--tds-checkbox-group-description-line-height);
3386
- color:var(--tds-checkbox-group-description-color);
3387
- cursor:text;
3388
- }
3389
-
3390
- .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
3391
- display:var(--tds-checkbox-group-description-invalid-icon-display);
3392
- flex-shrink:0;
3393
- margin-top:calc(.5lh - .5em);
3394
- line-height:var(--tds-checkbox-group-description-line-height);
3395
- }
3396
-
3397
- .tds-checkbox-group--sm{
3398
- --tds-checkbox-group-line-height:1.35;
3399
- --tds-checkbox-group-font-size:var(--t-font-size-sm);
3400
- --tds-checkbox-group-description-font-size:var(--t-font-size-xs);
3401
- --tds-checkbox-group-description-line-height:1.3;
3402
- }
3403
-
3404
3326
  .tds-combo-box{
3405
3327
  --tds-combo-box-border-color:var(--t-form-border-color);
3406
3328
  --tds-combo-box-border-color-hover:var(--t-form-border-color-hover);
@@ -3683,18 +3605,97 @@ a[class="tds-btn"]{
3683
3605
  line-height:1.35;
3684
3606
  }
3685
3607
 
3686
- .tds-time-field{
3687
- --tds-time-field-border-color:var(--t-form-border-color);
3688
- --tds-time-field-border-color-hover:var(--t-form-border-color-hover);
3689
- --tds-time-field-border-color-active:var(--t-form-border-color-focus);
3690
- --tds-time-field-background-color:var(--t-form-background-color);
3691
- --tds-time-field-color:var(--t-form-color);
3692
- --tds-time-field-placeholder-color:var(--t-form-placeholder-color);
3693
- --tds-time-field-font-size:var(--t-font-size-md);
3694
- --tds-time-field-min-height:var(--t-container-size-md);
3695
- --tds-time-field-padding-block:6px;
3696
- --tds-time-field-description-color:var(--t-text-color-secondary);
3697
- --tds-time-field-description-invalid-icon-display:none;
3608
+ .tds-checkbox-group{
3609
+ --tds-checkbox-group-font-size:var(--t-font-size-md);
3610
+ --tds-checkbox-group-line-height:1.4;
3611
+ --tds-checkbox-group-gap:var(--t-spacing-1);
3612
+
3613
+ --tds-checkbox-group-legend-margin-bottom:var(--tds-checkbox-group-gap);
3614
+
3615
+ --tds-checkbox-group-description-font-size:var(--t-font-size-sm);
3616
+ --tds-checkbox-group-description-line-height:1.35;
3617
+ --tds-checkbox-group-description-color:var(--t-text-color-secondary);
3618
+ --tds-checkbox-group-description-invalid-icon-display:none;
3619
+ display:flex;
3620
+ flex-direction:column;
3621
+ gap:var(--tds-checkbox-group-gap);
3622
+ padding:0;
3623
+ margin:0;
3624
+
3625
+ font-size:var(--tds-checkbox-group-font-size);
3626
+ line-height:var(--tds-checkbox-group-line-height);
3627
+ border:0;
3628
+ }
3629
+
3630
+ .tds-checkbox-group legend{
3631
+ padding:0;
3632
+ margin-bottom:var(--tds-checkbox-group-legend-margin-bottom);
3633
+ }
3634
+
3635
+ .tds-checkbox-group:has(.tds-checkbox-group-description){
3636
+ --tds-checkbox-group-legend-margin-bottom:var(--t-spacing-fourth);
3637
+ }
3638
+
3639
+ .tds-checkbox-group[aria-invalid="true"]{
3640
+ --tds-checkbox-group-description-color:var(--t-text-color-status-error);
3641
+ --tds-checkbox-group-description-invalid-icon-display:inline-block;
3642
+ }
3643
+
3644
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) legend::after{
3645
+ margin-left:.25ch;
3646
+ color:var(--t-text-color-status-error);
3647
+ content:"*";
3648
+ }
3649
+
3650
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
3651
+ content:none;
3652
+ }
3653
+
3654
+ .tds-checkbox-group-fields{
3655
+ display:flex;
3656
+ flex-direction:column;
3657
+ gap:var(--tds-checkbox-group-gap);
3658
+ align-items:flex-start;
3659
+ }
3660
+
3661
+ .tds-checkbox-group-description{
3662
+ display:flex;
3663
+ gap:var(--t-spacing-half);
3664
+ align-items:flex-start;
3665
+ margin:0;
3666
+ font-size:var(--tds-checkbox-group-description-font-size);
3667
+ line-height:var(--tds-checkbox-group-description-line-height);
3668
+ color:var(--tds-checkbox-group-description-color);
3669
+ cursor:text;
3670
+ }
3671
+
3672
+ .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
3673
+ display:var(--tds-checkbox-group-description-invalid-icon-display);
3674
+ flex-shrink:0;
3675
+ margin-top:calc(.5lh - .5em);
3676
+ line-height:var(--tds-checkbox-group-description-line-height);
3677
+ }
3678
+
3679
+ .tds-checkbox-group--sm{
3680
+ --tds-checkbox-group-line-height:1.35;
3681
+ --tds-checkbox-group-font-size:var(--t-font-size-sm);
3682
+ --tds-checkbox-group-description-font-size:var(--t-font-size-xs);
3683
+ --tds-checkbox-group-description-line-height:1.3;
3684
+ }
3685
+
3686
+ .tds-date-picker{
3687
+ --tds-date-picker-border-color:var(--t-form-border-color);
3688
+ --tds-date-picker-border-color-hover:var(--t-form-border-color-hover);
3689
+ --tds-date-picker-border-color-active:var(--t-form-border-color-focus);
3690
+ --tds-date-picker-background-color:var(--t-form-background-color);
3691
+ --tds-date-picker-color:var(--t-form-color);
3692
+ --tds-date-picker-placeholder-color:var(--t-form-placeholder-color);
3693
+ --tds-date-picker-font-size:var(--t-font-size-md);
3694
+ --tds-date-picker-min-height:var(--t-container-size-md);
3695
+ --tds-date-picker-padding-block:6px;
3696
+ --tds-date-picker-button-offset:4px;
3697
+ --tds-date-picker-description-color:var(--t-text-color-secondary);
3698
+ --tds-date-picker-description-invalid-icon-display:none;
3698
3699
 
3699
3700
  position:relative;
3700
3701
  display:flex;
@@ -3702,135 +3703,291 @@ a[class="tds-btn"]{
3702
3703
  gap:var(--t-spacing-half);
3703
3704
  }
3704
3705
 
3705
- .tds-time-field[data-required] .tds-time-field-label::after{
3706
+ .tds-date-picker[data-required] .tds-date-picker-label::after{
3706
3707
  margin-left:.25ch;
3707
3708
  color:var(--t-text-color-status-error);
3708
3709
  content:"*";
3709
3710
  }
3710
3711
 
3711
- .tds-time-field[data-invalid]{
3712
- --tds-time-field-border-color:var(--t-form-border-color-error);
3713
- --tds-time-field-border-color-hover:var(--t-form-border-color-error-hover);
3714
- --tds-time-field-border-color-active:var(--t-form-border-color-error-hover);
3715
- --tds-time-field-background-color:var(--t-form-background-color-error);
3716
- --tds-time-field-description-color:var(--t-text-color-status-error);
3717
- --tds-time-field-description-invalid-icon-display:inline-block;
3712
+ .tds-date-picker[data-invalid]{
3713
+ --tds-date-picker-border-color:var(--t-form-border-color-error);
3714
+ --tds-date-picker-border-color-hover:var(--t-form-border-color-error-hover);
3715
+ --tds-date-picker-border-color-active:var(--t-form-border-color-error-hover);
3716
+ --tds-date-picker-background-color:var(--t-form-background-color-error);
3717
+ --tds-date-picker-description-color:var(--t-text-color-status-error);
3718
+ --tds-date-picker-description-invalid-icon-display:inline-block;
3718
3719
  }
3719
3720
 
3720
- .tds-time-field[data-disabled]{
3721
- --tds-time-field-border-color:var(--t-form-border-color-disabled);
3722
- --tds-time-field-background-color:var(--t-form-background-color-disabled);
3723
- --tds-time-field-color:var(--t-form-color-disabled);
3724
- --tds-time-field-placeholder-color:var(--t-form-color-disabled);
3721
+ .tds-date-picker[data-disabled]{
3722
+ --tds-date-picker-border-color:var(--t-form-border-color-disabled);
3723
+ --tds-date-picker-background-color:var(--t-form-background-color-disabled);
3724
+ --tds-date-picker-color:var(--t-form-color-disabled);
3725
+ --tds-date-picker-placeholder-color:var(--t-form-color-disabled);
3725
3726
  }
3726
3727
 
3727
- .tds-time-field[data-disabled] .tds-time-field-label{
3728
- color:var(--t-form-color-disabled);
3729
- }
3730
-
3731
- .tds-time-field[data-disabled] .tds-time-field-input{
3728
+ .tds-date-picker[data-disabled] .tds-date-picker-field{
3732
3729
  cursor:not-allowed;
3733
3730
  }
3734
3731
 
3735
- .tds-time-field--lg{
3736
- --tds-time-field-min-height:var(--t-container-size-lg);
3737
- --tds-time-field-font-size:var(--t-font-size-lg);
3732
+ .tds-date-picker--lg{
3733
+ --tds-date-picker-min-height:var(--t-container-size-lg);
3734
+ --tds-date-picker-font-size:var(--t-font-size-lg);
3735
+ --tds-date-picker-button-offset:5px;
3738
3736
  }
3739
3737
 
3740
- .tds-time-field-label{
3738
+ .tds-date-picker-label{
3741
3739
  font-size:var(--t-font-size-md);
3742
3740
  font-weight:var(--t-font-weight-normal);
3743
3741
  color:var(--t-text-color);
3744
3742
  cursor:default;
3745
3743
  }
3746
3744
 
3747
- .tds-time-field-input{
3745
+ .tds-date-picker-field{
3748
3746
  display:flex;
3749
3747
  align-items:center;
3750
3748
  inline-size:100%;
3751
- min-block-size:var(--tds-time-field-min-height);
3752
- padding-block:var(--tds-time-field-padding-block);
3753
- padding-inline:var(--t-spacing-1);
3749
+ min-block-size:var(--tds-date-picker-min-height);
3754
3750
  font-family:inherit;
3755
- font-size:var(--tds-time-field-font-size);
3756
- font-variant-numeric:tabular-nums;
3751
+ font-size:var(--tds-date-picker-font-size);
3757
3752
  line-height:1;
3758
- color:var(--tds-time-field-color);
3753
+ color:var(--tds-date-picker-color);
3754
+ -webkit-appearance:none;
3755
+ -moz-appearance:none;
3756
+ appearance:none;
3759
3757
  cursor:text;
3760
3758
  outline:var(--t-focus-ring-width) solid transparent;
3761
3759
  outline-offset:0;
3762
- background-color:var(--tds-time-field-background-color);
3763
- border:var(--t-form-border-width) solid var(--tds-time-field-border-color);
3760
+ background-color:var(--tds-date-picker-background-color);
3761
+ border:var(--t-form-border-width) solid var(--tds-date-picker-border-color);
3764
3762
  border-radius:var(--t-form-border-radius);
3765
3763
  }
3766
3764
 
3767
- .tds-time-field-input[data-hovered]:not([data-focus-visible],[data-focused],[data-disabled]){
3768
- border-color:var(--tds-time-field-border-color-hover);
3765
+ .tds-date-picker-field[data-hovered]:not([data-focus-visible],[data-focus-within],[data-disabled]){
3766
+ border-color:var(--tds-date-picker-border-color-hover);
3769
3767
  }
3770
3768
 
3771
- .tds-time-field-input[data-focus-within]{
3769
+ .tds-date-picker-field[data-focus-within]{
3772
3770
  outline-color:var(--t-focus-ring-color);
3773
3771
  outline-offset:var(--t-focus-ring-offset);
3774
- border-color:var(--tds-time-field-border-color-active);
3772
+ border-color:var(--tds-date-picker-border-color-active);
3775
3773
  }
3776
3774
 
3777
- .tds-time-field-input[data-readonly]{
3775
+ .tds-date-picker-field:has(.tds-date-picker-input[data-readonly]){
3778
3776
  color:var(--t-form-color-readonly);
3779
3777
  background-color:var(--t-form-background-color-readonly);
3780
3778
  border-color:var(--t-form-border-color-readonly);
3781
3779
  }
3782
3780
 
3783
- .tds-time-field-input[data-readonly][data-hovered]{
3781
+ .tds-date-picker-field[data-hovered]:has(.tds-date-picker-input[data-readonly]){
3784
3782
  border-color:var(--t-form-border-color-readonly);
3785
3783
  }
3786
3784
 
3787
- .tds-time-field-input[data-readonly][data-focus-within]{
3785
+ .tds-date-picker-field[data-focus-within]:has(.tds-date-picker-input[data-readonly]){
3788
3786
  outline-color:var(--t-focus-ring-color);
3789
3787
  outline-offset:var(--t-focus-ring-offset);
3790
3788
  border-color:var(--t-form-border-color-hover);
3791
3789
  }
3792
3790
 
3793
- .tds-time-field-segment{
3794
- padding-inline:1px;
3791
+ .tds-date-picker-input{
3792
+ flex:1;
3793
+ padding-block:var(--tds-date-picker-padding-block);
3794
+ padding-inline-start:var(--t-spacing-1);
3795
3795
  font-variant-numeric:tabular-nums;
3796
- cursor:text;
3796
+ }
3797
+
3798
+ .tds-date-picker-segment{
3799
+ padding-inline:2px;
3797
3800
  caret-color:transparent;
3798
3801
  border-radius:var(--t-border-radius-sm);
3799
3802
  }
3800
3803
 
3801
- .tds-time-field-segment[data-placeholder]{
3802
- color:var(--tds-time-field-placeholder-color);
3804
+ .tds-date-picker-segment[data-placeholder]{
3805
+ color:var(--tds-date-picker-placeholder-color);
3803
3806
  }
3804
3807
 
3805
- .tds-time-field-segment[data-focused]{
3808
+ .tds-date-picker-segment[data-focused]{
3806
3809
  color:var(--t-text-color-inverted);
3807
3810
  outline:0;
3808
3811
  background:var(--t-fill-color-interaction);
3809
3812
  }
3810
3813
 
3811
- .tds-time-field-segment-separator{
3814
+ .tds-date-picker-segment-separator{
3812
3815
  padding-inline:0;
3813
- color:var(--tds-time-field-placeholder-color);
3816
+ color:var(--tds-date-picker-placeholder-color);
3814
3817
  }
3815
3818
 
3816
- .tds-time-field-description{
3819
+ .tds-date-picker-description{
3817
3820
  display:flex;
3818
3821
  gap:var(--t-spacing-half);
3819
3822
  align-items:flex-start;
3820
3823
  margin:0;
3821
3824
  font-size:var(--t-font-size-sm);
3822
3825
  line-height:1.35;
3823
- color:var(--tds-time-field-description-color, var(--t-text-color-secondary));
3826
+ color:var(--tds-date-picker-description-color, var(--t-text-color-secondary));
3824
3827
  cursor:text;
3825
3828
  }
3826
3829
 
3827
- .tds-time-field-description .tds-time-field-description-invalid-icon{
3828
- display:var(--tds-time-field-description-invalid-icon-display, none);
3830
+ .tds-date-picker-description .tds-date-picker-description-invalid-icon{
3831
+ display:var(--tds-date-picker-description-invalid-icon-display, none);
3829
3832
  flex-shrink:0;
3830
3833
  margin-block-start:calc(.5lh - .5em);
3831
3834
  line-height:1.35;
3832
3835
  }
3833
3836
 
3837
+ .tds-date-picker-button{
3838
+ flex-shrink:0;
3839
+ align-self:center;
3840
+ inline-size:calc(var(--tds-date-picker-min-height) - (var(--tds-date-picker-button-offset) * 2));
3841
+ block-size:calc(var(--tds-date-picker-min-height) - (var(--tds-date-picker-button-offset) * 2));
3842
+ padding:0;
3843
+ margin-inline-end:var(--tds-date-picker-button-offset);
3844
+ }
3845
+
3846
+ .tds-date-picker-popover{
3847
+ padding:var(--t-spacing-2);
3848
+ background:var(--t-surface-color-card);
3849
+ border:1px solid var(--t-border-color);
3850
+ border-radius:var(--t-border-radius);
3851
+ box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
3852
+ }
3853
+
3854
+ .tds-date-picker-popover[data-entering]{
3855
+ animation:tds-date-picker-popover-enter 160ms ease;
3856
+ }
3857
+
3858
+ .tds-date-picker-popover[data-exiting]{
3859
+ animation:tds-date-picker-popover-exit 130ms ease;
3860
+ }
3861
+
3862
+ @keyframes tds-date-picker-popover-enter{
3863
+ from{
3864
+ opacity:0;
3865
+ transform:translateY(-8px);
3866
+ }
3867
+ }
3868
+
3869
+ @keyframes tds-date-picker-popover-exit{
3870
+ to{
3871
+ opacity:0;
3872
+ transform:translateY(-8px);
3873
+ }
3874
+ }
3875
+
3876
+ @media (prefers-reduced-motion: reduce){
3877
+ .tds-date-picker-popover[data-entering],.tds-date-picker-popover[data-exiting]{
3878
+ animation:none;
3879
+ }
3880
+ }
3881
+
3882
+ .tds-date-picker-calendar{
3883
+ inline-size:-moz-fit-content;
3884
+ inline-size:fit-content;
3885
+ }
3886
+
3887
+ .tds-date-picker-calendar-header{
3888
+ display:flex;
3889
+ align-items:center;
3890
+ justify-content:space-between;
3891
+ padding-block-end:var(--t-spacing-1);
3892
+ }
3893
+
3894
+ .tds-date-picker-calendar-title{
3895
+ flex:1;
3896
+ margin:0;
3897
+ font-size:var(--t-font-size-md);
3898
+ font-weight:var(--t-font-weight-semibold);
3899
+ text-align:center;
3900
+ }
3901
+
3902
+ .tds-date-picker-calendar-nav{
3903
+ display:flex;
3904
+ align-items:center;
3905
+ justify-content:center;
3906
+ padding:var(--t-spacing-half);
3907
+ color:var(--t-text-color);
3908
+ cursor:default;
3909
+ outline:0;
3910
+ background:transparent;
3911
+ border:0;
3912
+ border-radius:var(--t-border-radius-sm);
3913
+ }
3914
+
3915
+ .tds-date-picker-calendar-nav[data-hovered]{
3916
+ background:var(--t-fill-color-neutral-070);
3917
+ }
3918
+
3919
+ .tds-date-picker-calendar-nav[data-pressed]{
3920
+ background:var(--t-fill-color-button-interaction-ghost-active);
3921
+ }
3922
+
3923
+ .tds-date-picker-calendar-nav[data-focus-visible]{
3924
+ outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
3925
+ outline-offset:var(--t-focus-ring-offset);
3926
+ }
3927
+
3928
+ .tds-date-picker-calendar-nav[data-disabled]{
3929
+ color:var(--t-form-color-disabled);
3930
+ cursor:not-allowed;
3931
+ }
3932
+
3933
+ .tds-date-picker-calendar-grid{
3934
+ border-collapse:collapse;
3935
+ }
3936
+
3937
+ .tds-date-picker-calendar-header-cell{
3938
+ padding-block:var(--t-spacing-half);
3939
+ font-size:var(--t-font-size-sm);
3940
+ font-weight:var(--t-font-weight-normal);
3941
+ color:var(--t-text-color-secondary);
3942
+ text-align:center;
3943
+ }
3944
+
3945
+ .tds-date-picker-calendar-cell{
3946
+ display:flex;
3947
+ align-items:center;
3948
+ justify-content:center;
3949
+ inline-size:2.25rem;
3950
+ block-size:2.25rem;
3951
+ font-size:var(--t-font-size-md);
3952
+ color:var(--t-text-color);
3953
+ cursor:default;
3954
+ outline:0;
3955
+ border-radius:var(--t-border-radius-sm);
3956
+ }
3957
+
3958
+ .tds-date-picker-calendar-cell[data-hovered]{
3959
+ background:var(--t-fill-color-neutral-070);
3960
+ }
3961
+
3962
+ .tds-date-picker-calendar-cell[data-pressed]{
3963
+ background:var(--t-fill-color-button-interaction-ghost-active);
3964
+ }
3965
+
3966
+ .tds-date-picker-calendar-cell[data-selected]{
3967
+ color:var(--t-text-color-inverted);
3968
+ background:var(--t-fill-color-interaction);
3969
+ }
3970
+
3971
+ .tds-date-picker-calendar-cell[data-focus-visible]{
3972
+ outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
3973
+ outline-offset:var(--t-focus-ring-offset);
3974
+ }
3975
+
3976
+ .tds-date-picker-calendar-cell[data-unavailable]{
3977
+ color:var(--t-text-color-secondary);
3978
+ text-decoration:line-through;
3979
+ cursor:not-allowed;
3980
+ }
3981
+
3982
+ .tds-date-picker-calendar-cell[data-disabled]{
3983
+ color:var(--t-form-color-disabled);
3984
+ cursor:not-allowed;
3985
+ }
3986
+
3987
+ .tds-date-picker-calendar-cell[data-outside-month]{
3988
+ color:var(--t-text-color-secondary);
3989
+ }
3990
+
3834
3991
  .tds-number-stepper{
3835
3992
  --tds-number-stepper-border-color:var(--t-form-border-color);
3836
3993
  --tds-number-stepper-border-color-hover:var(--t-form-border-color-hover);
@@ -3984,19 +4141,18 @@ a[class="tds-btn"]{
3984
4141
  line-height:1.35;
3985
4142
  }
3986
4143
 
3987
- .tds-date-picker{
3988
- --tds-date-picker-border-color:var(--t-form-border-color);
3989
- --tds-date-picker-border-color-hover:var(--t-form-border-color-hover);
3990
- --tds-date-picker-border-color-active:var(--t-form-border-color-focus);
3991
- --tds-date-picker-background-color:var(--t-form-background-color);
3992
- --tds-date-picker-color:var(--t-form-color);
3993
- --tds-date-picker-placeholder-color:var(--t-form-placeholder-color);
3994
- --tds-date-picker-font-size:var(--t-font-size-md);
3995
- --tds-date-picker-min-height:var(--t-container-size-md);
3996
- --tds-date-picker-padding-block:6px;
3997
- --tds-date-picker-button-offset:4px;
3998
- --tds-date-picker-description-color:var(--t-text-color-secondary);
3999
- --tds-date-picker-description-invalid-icon-display:none;
4144
+ .tds-time-field{
4145
+ --tds-time-field-border-color:var(--t-form-border-color);
4146
+ --tds-time-field-border-color-hover:var(--t-form-border-color-hover);
4147
+ --tds-time-field-border-color-active:var(--t-form-border-color-focus);
4148
+ --tds-time-field-background-color:var(--t-form-background-color);
4149
+ --tds-time-field-color:var(--t-form-color);
4150
+ --tds-time-field-placeholder-color:var(--t-form-placeholder-color);
4151
+ --tds-time-field-font-size:var(--t-font-size-md);
4152
+ --tds-time-field-min-height:var(--t-container-size-md);
4153
+ --tds-time-field-padding-block:6px;
4154
+ --tds-time-field-description-color:var(--t-text-color-secondary);
4155
+ --tds-time-field-description-invalid-icon-display:none;
4000
4156
 
4001
4157
  position:relative;
4002
4158
  display:flex;
@@ -4004,291 +4160,135 @@ a[class="tds-btn"]{
4004
4160
  gap:var(--t-spacing-half);
4005
4161
  }
4006
4162
 
4007
- .tds-date-picker[data-required] .tds-date-picker-label::after{
4163
+ .tds-time-field[data-required] .tds-time-field-label::after{
4008
4164
  margin-left:.25ch;
4009
4165
  color:var(--t-text-color-status-error);
4010
4166
  content:"*";
4011
4167
  }
4012
4168
 
4013
- .tds-date-picker[data-invalid]{
4014
- --tds-date-picker-border-color:var(--t-form-border-color-error);
4015
- --tds-date-picker-border-color-hover:var(--t-form-border-color-error-hover);
4016
- --tds-date-picker-border-color-active:var(--t-form-border-color-error-hover);
4017
- --tds-date-picker-background-color:var(--t-form-background-color-error);
4018
- --tds-date-picker-description-color:var(--t-text-color-status-error);
4019
- --tds-date-picker-description-invalid-icon-display:inline-block;
4169
+ .tds-time-field[data-invalid]{
4170
+ --tds-time-field-border-color:var(--t-form-border-color-error);
4171
+ --tds-time-field-border-color-hover:var(--t-form-border-color-error-hover);
4172
+ --tds-time-field-border-color-active:var(--t-form-border-color-error-hover);
4173
+ --tds-time-field-background-color:var(--t-form-background-color-error);
4174
+ --tds-time-field-description-color:var(--t-text-color-status-error);
4175
+ --tds-time-field-description-invalid-icon-display:inline-block;
4020
4176
  }
4021
4177
 
4022
- .tds-date-picker[data-disabled]{
4023
- --tds-date-picker-border-color:var(--t-form-border-color-disabled);
4024
- --tds-date-picker-background-color:var(--t-form-background-color-disabled);
4025
- --tds-date-picker-color:var(--t-form-color-disabled);
4026
- --tds-date-picker-placeholder-color:var(--t-form-color-disabled);
4178
+ .tds-time-field[data-disabled]{
4179
+ --tds-time-field-border-color:var(--t-form-border-color-disabled);
4180
+ --tds-time-field-background-color:var(--t-form-background-color-disabled);
4181
+ --tds-time-field-color:var(--t-form-color-disabled);
4182
+ --tds-time-field-placeholder-color:var(--t-form-color-disabled);
4027
4183
  }
4028
4184
 
4029
- .tds-date-picker[data-disabled] .tds-date-picker-field{
4185
+ .tds-time-field[data-disabled] .tds-time-field-label{
4186
+ color:var(--t-form-color-disabled);
4187
+ }
4188
+
4189
+ .tds-time-field[data-disabled] .tds-time-field-input{
4030
4190
  cursor:not-allowed;
4031
4191
  }
4032
4192
 
4033
- .tds-date-picker--lg{
4034
- --tds-date-picker-min-height:var(--t-container-size-lg);
4035
- --tds-date-picker-font-size:var(--t-font-size-lg);
4036
- --tds-date-picker-button-offset:5px;
4193
+ .tds-time-field--lg{
4194
+ --tds-time-field-min-height:var(--t-container-size-lg);
4195
+ --tds-time-field-font-size:var(--t-font-size-lg);
4037
4196
  }
4038
4197
 
4039
- .tds-date-picker-label{
4198
+ .tds-time-field-label{
4040
4199
  font-size:var(--t-font-size-md);
4041
4200
  font-weight:var(--t-font-weight-normal);
4042
4201
  color:var(--t-text-color);
4043
4202
  cursor:default;
4044
4203
  }
4045
4204
 
4046
- .tds-date-picker-field{
4205
+ .tds-time-field-input{
4047
4206
  display:flex;
4048
4207
  align-items:center;
4049
4208
  inline-size:100%;
4050
- min-block-size:var(--tds-date-picker-min-height);
4209
+ min-block-size:var(--tds-time-field-min-height);
4210
+ padding-block:var(--tds-time-field-padding-block);
4211
+ padding-inline:var(--t-spacing-1);
4051
4212
  font-family:inherit;
4052
- font-size:var(--tds-date-picker-font-size);
4213
+ font-size:var(--tds-time-field-font-size);
4214
+ font-variant-numeric:tabular-nums;
4053
4215
  line-height:1;
4054
- color:var(--tds-date-picker-color);
4055
- -webkit-appearance:none;
4056
- -moz-appearance:none;
4057
- appearance:none;
4216
+ color:var(--tds-time-field-color);
4058
4217
  cursor:text;
4059
4218
  outline:var(--t-focus-ring-width) solid transparent;
4060
4219
  outline-offset:0;
4061
- background-color:var(--tds-date-picker-background-color);
4062
- border:var(--t-form-border-width) solid var(--tds-date-picker-border-color);
4220
+ background-color:var(--tds-time-field-background-color);
4221
+ border:var(--t-form-border-width) solid var(--tds-time-field-border-color);
4063
4222
  border-radius:var(--t-form-border-radius);
4064
4223
  }
4065
4224
 
4066
- .tds-date-picker-field[data-hovered]:not([data-focus-visible],[data-focus-within],[data-disabled]){
4067
- border-color:var(--tds-date-picker-border-color-hover);
4225
+ .tds-time-field-input[data-hovered]:not([data-focus-visible],[data-focused],[data-disabled]){
4226
+ border-color:var(--tds-time-field-border-color-hover);
4068
4227
  }
4069
4228
 
4070
- .tds-date-picker-field[data-focus-within]{
4229
+ .tds-time-field-input[data-focus-within]{
4071
4230
  outline-color:var(--t-focus-ring-color);
4072
4231
  outline-offset:var(--t-focus-ring-offset);
4073
- border-color:var(--tds-date-picker-border-color-active);
4232
+ border-color:var(--tds-time-field-border-color-active);
4074
4233
  }
4075
4234
 
4076
- .tds-date-picker-field:has(.tds-date-picker-input[data-readonly]){
4235
+ .tds-time-field-input[data-readonly]{
4077
4236
  color:var(--t-form-color-readonly);
4078
4237
  background-color:var(--t-form-background-color-readonly);
4079
4238
  border-color:var(--t-form-border-color-readonly);
4080
4239
  }
4081
4240
 
4082
- .tds-date-picker-field[data-hovered]:has(.tds-date-picker-input[data-readonly]){
4241
+ .tds-time-field-input[data-readonly][data-hovered]{
4083
4242
  border-color:var(--t-form-border-color-readonly);
4084
4243
  }
4085
4244
 
4086
- .tds-date-picker-field[data-focus-within]:has(.tds-date-picker-input[data-readonly]){
4245
+ .tds-time-field-input[data-readonly][data-focus-within]{
4087
4246
  outline-color:var(--t-focus-ring-color);
4088
4247
  outline-offset:var(--t-focus-ring-offset);
4089
4248
  border-color:var(--t-form-border-color-hover);
4090
4249
  }
4091
4250
 
4092
- .tds-date-picker-input{
4093
- flex:1;
4094
- padding-block:var(--tds-date-picker-padding-block);
4095
- padding-inline-start:var(--t-spacing-1);
4251
+ .tds-time-field-segment{
4252
+ padding-inline:1px;
4096
4253
  font-variant-numeric:tabular-nums;
4097
- }
4098
-
4099
- .tds-date-picker-segment{
4100
- padding-inline:2px;
4254
+ cursor:text;
4101
4255
  caret-color:transparent;
4102
4256
  border-radius:var(--t-border-radius-sm);
4103
4257
  }
4104
4258
 
4105
- .tds-date-picker-segment[data-placeholder]{
4106
- color:var(--tds-date-picker-placeholder-color);
4259
+ .tds-time-field-segment[data-placeholder]{
4260
+ color:var(--tds-time-field-placeholder-color);
4107
4261
  }
4108
4262
 
4109
- .tds-date-picker-segment[data-focused]{
4263
+ .tds-time-field-segment[data-focused]{
4110
4264
  color:var(--t-text-color-inverted);
4111
4265
  outline:0;
4112
4266
  background:var(--t-fill-color-interaction);
4113
4267
  }
4114
4268
 
4115
- .tds-date-picker-segment-separator{
4269
+ .tds-time-field-segment-separator{
4116
4270
  padding-inline:0;
4117
- color:var(--tds-date-picker-placeholder-color);
4271
+ color:var(--tds-time-field-placeholder-color);
4118
4272
  }
4119
4273
 
4120
- .tds-date-picker-description{
4274
+ .tds-time-field-description{
4121
4275
  display:flex;
4122
4276
  gap:var(--t-spacing-half);
4123
4277
  align-items:flex-start;
4124
4278
  margin:0;
4125
4279
  font-size:var(--t-font-size-sm);
4126
4280
  line-height:1.35;
4127
- color:var(--tds-date-picker-description-color, var(--t-text-color-secondary));
4281
+ color:var(--tds-time-field-description-color, var(--t-text-color-secondary));
4128
4282
  cursor:text;
4129
4283
  }
4130
4284
 
4131
- .tds-date-picker-description .tds-date-picker-description-invalid-icon{
4132
- display:var(--tds-date-picker-description-invalid-icon-display, none);
4285
+ .tds-time-field-description .tds-time-field-description-invalid-icon{
4286
+ display:var(--tds-time-field-description-invalid-icon-display, none);
4133
4287
  flex-shrink:0;
4134
4288
  margin-block-start:calc(.5lh - .5em);
4135
4289
  line-height:1.35;
4136
4290
  }
4137
4291
 
4138
- .tds-date-picker-button{
4139
- flex-shrink:0;
4140
- align-self:center;
4141
- inline-size:calc(var(--tds-date-picker-min-height) - (var(--tds-date-picker-button-offset) * 2));
4142
- block-size:calc(var(--tds-date-picker-min-height) - (var(--tds-date-picker-button-offset) * 2));
4143
- padding:0;
4144
- margin-inline-end:var(--tds-date-picker-button-offset);
4145
- }
4146
-
4147
- .tds-date-picker-popover{
4148
- padding:var(--t-spacing-2);
4149
- background:var(--t-surface-color-card);
4150
- border:1px solid var(--t-border-color);
4151
- border-radius:var(--t-border-radius);
4152
- box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
4153
- }
4154
-
4155
- .tds-date-picker-popover[data-entering]{
4156
- animation:tds-date-picker-popover-enter 160ms ease;
4157
- }
4158
-
4159
- .tds-date-picker-popover[data-exiting]{
4160
- animation:tds-date-picker-popover-exit 130ms ease;
4161
- }
4162
-
4163
- @keyframes tds-date-picker-popover-enter{
4164
- from{
4165
- opacity:0;
4166
- transform:translateY(-8px);
4167
- }
4168
- }
4169
-
4170
- @keyframes tds-date-picker-popover-exit{
4171
- to{
4172
- opacity:0;
4173
- transform:translateY(-8px);
4174
- }
4175
- }
4176
-
4177
- @media (prefers-reduced-motion: reduce){
4178
- .tds-date-picker-popover[data-entering],.tds-date-picker-popover[data-exiting]{
4179
- animation:none;
4180
- }
4181
- }
4182
-
4183
- .tds-date-picker-calendar{
4184
- inline-size:-moz-fit-content;
4185
- inline-size:fit-content;
4186
- }
4187
-
4188
- .tds-date-picker-calendar-header{
4189
- display:flex;
4190
- align-items:center;
4191
- justify-content:space-between;
4192
- padding-block-end:var(--t-spacing-1);
4193
- }
4194
-
4195
- .tds-date-picker-calendar-title{
4196
- flex:1;
4197
- margin:0;
4198
- font-size:var(--t-font-size-md);
4199
- font-weight:var(--t-font-weight-semibold);
4200
- text-align:center;
4201
- }
4202
-
4203
- .tds-date-picker-calendar-nav{
4204
- display:flex;
4205
- align-items:center;
4206
- justify-content:center;
4207
- padding:var(--t-spacing-half);
4208
- color:var(--t-text-color);
4209
- cursor:default;
4210
- outline:0;
4211
- background:transparent;
4212
- border:0;
4213
- border-radius:var(--t-border-radius-sm);
4214
- }
4215
-
4216
- .tds-date-picker-calendar-nav[data-hovered]{
4217
- background:var(--t-fill-color-neutral-070);
4218
- }
4219
-
4220
- .tds-date-picker-calendar-nav[data-pressed]{
4221
- background:var(--t-fill-color-button-interaction-ghost-active);
4222
- }
4223
-
4224
- .tds-date-picker-calendar-nav[data-focus-visible]{
4225
- outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
4226
- outline-offset:var(--t-focus-ring-offset);
4227
- }
4228
-
4229
- .tds-date-picker-calendar-nav[data-disabled]{
4230
- color:var(--t-form-color-disabled);
4231
- cursor:not-allowed;
4232
- }
4233
-
4234
- .tds-date-picker-calendar-grid{
4235
- border-collapse:collapse;
4236
- }
4237
-
4238
- .tds-date-picker-calendar-header-cell{
4239
- padding-block:var(--t-spacing-half);
4240
- font-size:var(--t-font-size-sm);
4241
- font-weight:var(--t-font-weight-normal);
4242
- color:var(--t-text-color-secondary);
4243
- text-align:center;
4244
- }
4245
-
4246
- .tds-date-picker-calendar-cell{
4247
- display:flex;
4248
- align-items:center;
4249
- justify-content:center;
4250
- inline-size:2.25rem;
4251
- block-size:2.25rem;
4252
- font-size:var(--t-font-size-md);
4253
- color:var(--t-text-color);
4254
- cursor:default;
4255
- outline:0;
4256
- border-radius:var(--t-border-radius-sm);
4257
- }
4258
-
4259
- .tds-date-picker-calendar-cell[data-hovered]{
4260
- background:var(--t-fill-color-neutral-070);
4261
- }
4262
-
4263
- .tds-date-picker-calendar-cell[data-pressed]{
4264
- background:var(--t-fill-color-button-interaction-ghost-active);
4265
- }
4266
-
4267
- .tds-date-picker-calendar-cell[data-selected]{
4268
- color:var(--t-text-color-inverted);
4269
- background:var(--t-fill-color-interaction);
4270
- }
4271
-
4272
- .tds-date-picker-calendar-cell[data-focus-visible]{
4273
- outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
4274
- outline-offset:var(--t-focus-ring-offset);
4275
- }
4276
-
4277
- .tds-date-picker-calendar-cell[data-unavailable]{
4278
- color:var(--t-text-color-secondary);
4279
- text-decoration:line-through;
4280
- cursor:not-allowed;
4281
- }
4282
-
4283
- .tds-date-picker-calendar-cell[data-disabled]{
4284
- color:var(--t-form-color-disabled);
4285
- cursor:not-allowed;
4286
- }
4287
-
4288
- .tds-date-picker-calendar-cell[data-outside-month]{
4289
- color:var(--t-text-color-secondary);
4290
- }
4291
-
4292
4292
  .t-banner{
4293
4293
  --t-banner-font-size:var(--t-font-size-md);
4294
4294
  --t-banner-font-color:var(--t-text-color);