@planningcenter/tapestry 3.4.1-rc.1 → 3.4.1-rc.2

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 (19) hide show
  1. package/dist/components/button/DropdownButton.d.ts.map +1 -1
  2. package/dist/components/button/DropdownButton.js +4 -2
  3. package/dist/components/button/DropdownButton.js.map +1 -1
  4. package/dist/components/button/DropdownIconButton.d.ts.map +1 -1
  5. package/dist/components/button/DropdownIconButton.js +4 -2
  6. package/dist/components/button/DropdownIconButton.js.map +1 -1
  7. package/dist/components/dropdown/Dropdown.d.ts +7 -1
  8. package/dist/components/dropdown/Dropdown.d.ts.map +1 -1
  9. package/dist/components/dropdown/Dropdown.js +4 -2
  10. package/dist/components/dropdown/Dropdown.js.map +1 -1
  11. package/dist/components/dropdown/DropdownTriggerContext.d.ts +5 -0
  12. package/dist/components/dropdown/DropdownTriggerContext.d.ts.map +1 -0
  13. package/dist/components/dropdown/DropdownTriggerContext.js +7 -0
  14. package/dist/components/dropdown/DropdownTriggerContext.js.map +1 -0
  15. package/dist/reactRender.css +1863 -1863
  16. package/dist/reactRender.css.map +1 -1
  17. package/dist/reactRenderLegacy.css +1863 -1863
  18. package/dist/reactRenderLegacy.css.map +1 -1
  19. package/package.json +4 -4
package/dist/reactRender.css CHANGED
@@ -1,812 +1,576 @@
1
- @layer t-critical{
2
- tds-page-header:not(.hydrated){
3
- display:none;
4
- }
5
- }
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
6
 
7
- @layer t-component{
8
- .tds-page-header{
9
- --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
10
- --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
11
- --tds-page-header-color:var(--t-text-color);
12
- --tds-page-header-bottom-border-color:transparent;
13
- --tds-page-header-headline-color:var(--t-text-color-headline);
14
- --tds-page-header-headline-font-size:var(--t-font-size-2xl);
15
- --tds-page-header-padding-x:var(--t-spacing-2);
16
- --tds-page-header-padding-y:var(--t-spacing-2);
17
- --tds-page-header-nav-padding-x:var(--tds-page-header-padding-x, var(--t-spacing-3));
18
- --tds-page-header-nav-gap:var(--t-spacing-1);
19
- --tds-page-header-nav-background:linear-gradient(180deg, var(--tds-page-header-nav-background-start, rgba(0, 0, 0, 0)) 0%, var(--tds-page-header-nav-background-end, rgba(0, 0, 0, .1)) 100%);
20
- --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
21
- --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
22
- --tds-page-header-nav-item-color:var(--t-text-color-secondary);
23
- --tds-page-header-nav-item-background-color:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 35%);
24
- --tds-page-header-nav-item-border-width:1px;
7
+ --tds-checkbox-input-size:var(--t-element-size-md);
8
+ --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
9
+ --tds-checkbox-input-border-color:var(--t-form-border-color);
10
+ --tds-checkbox-input-background-color:var(--t-form-background-color);
25
11
 
26
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
27
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color);
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);
28
16
 
29
- --tds-page-header-nav-item-color-hover:var(--t-text-color);
30
- --tds-page-header-nav-item-background-color-hover:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 20%);
31
- --tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
17
+ --tds-checkbox-label-color:var(--t-form-color);
32
18
 
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);
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;
35
23
 
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);
24
+ position:relative;
25
+ display:inline-grid;
26
+ grid-template-columns:auto;
27
+ grid-auto-columns:1fr;
28
+ gap:var(--t-spacing-fourth) 0;
29
+ line-height:var(--tds-checkbox-line-height);
30
+ -webkit-user-select:none;
31
+ -moz-user-select:none;
32
+ user-select:none;
33
+ }
39
34
 
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);
35
+ .tds-checkbox label{
36
+ grid-area:1 / 2;
37
+ padding-inline-start:var(--t-spacing-1);
38
+ font-size:var(--tds-checkbox-font-size);
39
+ font-weight:var(--t-font-weight-normal);
40
+ color:var(--tds-checkbox-label-color);
41
+ cursor:var(--tds-checkbox-cursor);
45
42
  }
46
43
 
47
- .tds-page-header--profile{
48
- --tds-page-header-padding-y:20px;
44
+ .tds-checkbox tds-indeterminate{
45
+ display:flex;
49
46
  }
50
47
 
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));
55
- }
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);
56
65
  }
57
66
 
58
- @media (min-width: 600px){
59
- .tds-page-header{
60
- --tds-page-header-background-color:var(--t-surface-color-canvas);
61
- --tds-page-header-color:var(--t-text-color-secondary);
62
- --tds-page-header-bottom-border-color:var(--t-border-color);
63
- --tds-page-header-padding-x:var(--t-spacing-3);
64
- --tds-page-header-headline-font-size:var(--t-font-size-3xl);
65
- --tds-page-header-nav-gap:var(--t-spacing-half);
66
- --tds-page-header-nav-background:transparent;
67
- --tds-page-header-nav-item-padding-x:var(--t-spacing-2);
68
- --tds-page-header-nav-item-border-width:1px;
69
- --tds-page-header-nav-item-color:var(--t-text-color);
70
- --tds-page-header-nav-item-background-color:var(--t-fill-color-neutral-070);
71
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-bottom-border-color);
72
- --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-060);
73
- --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-050);
74
- --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
75
- --tds-page-header-nav-item-border-color-selected:var(--t-border-color);
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%);
76
85
  }
77
- }
78
- }
79
86
 
80
- .tds-page-header{
81
- display:flex;
82
- flex-direction:column;
83
- padding-top:var(--tds-page-header-padding-y);
84
- color:var(--tds-page-header-color);
85
- background:var(--tds-page-header-background-color);
86
- border-bottom:1px solid var(--tds-page-header-bottom-border-color);
87
- }
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
+ }
88
91
 
89
- .tds-page-header:not(.has-nav){
90
- padding-bottom:var(--tds-page-header-padding-y);
92
+ :is(.tds-checkbox input[type="checkbox"]):focus-visible{
93
+ outline:var(--t-focus-ring-outline);
94
+ outline-offset:var(--t-focus-ring-offset);
95
+ }
96
+
97
+ :is(.tds-checkbox input[type="checkbox"]):disabled{
98
+ pointer-events:none;
99
+ }
100
+
101
+ @media (prefers-reduced-motion: reduce){
102
+
103
+ .tds-checkbox input[type="checkbox"]{
104
+ --tds-checkbox-transition-property:none;
91
105
  }
106
+ }
92
107
 
93
- .tds-page-header.inactive{
94
- background:var(--tds-page-header-background-color-inactive);
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;
95
113
  }
96
114
 
97
- .tds-page-header :is([slot="actions"],.tds-page-header__actions){
98
- width:100%;
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
+ }
119
+
120
+ .tds-checkbox:has(input:checked){
121
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
99
122
  }
100
123
 
101
- .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
102
- display:flex;
103
- flex-flow:row wrap;
104
- gap:var(--t-spacing-half) var(--t-spacing-1);
105
- align-items:flex-start;
106
- justify-content:flex-start;
107
- min-width:0;
124
+ .tds-checkbox:has(input:indeterminate){
125
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
108
126
  }
109
127
 
110
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)):not(:has(ul)),:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) ul{
111
- display:flex;
112
- gap:var(--tds-page-header-nav-gap);
113
- padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
114
- margin:0 0 -1px;
115
- overflow:auto;
116
- list-style:none;
117
- background:var(--tds-page-header-nav-background);
128
+ .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
129
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
130
+ --tds-checkbox-description-color:var(--t-text-color-status-error);
131
+ --tds-checkbox-description-invalid-icon-display:inline-block;
132
+ }
133
+
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);
118
137
  }
119
138
 
120
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button){
121
- position:relative;
122
- display:inline-flex;
123
- padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
124
- font-size:var(--t-font-size-sm);
125
- line-height:22px;
126
- color:var(--tds-page-header-nav-item-color);
127
- white-space:nowrap;
128
- text-decoration:none;
129
- -webkit-appearance:none;
130
- -moz-appearance:none;
131
- appearance:none;
132
- cursor:pointer;
133
- outline-offset:-2px;
134
- background-color:var(--tds-page-header-nav-item-background-color);
135
- background-clip:padding-box;
136
- border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
137
- border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
138
- border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
139
+ :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);
139
142
  }
140
143
 
141
- .selected:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)){
142
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-selected);
143
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-selected);
144
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-selected);
145
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-selected);
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);
146
147
  }
147
148
 
148
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):hover{
149
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
150
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
151
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
152
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-hover);
153
- }
149
+ .tds-checkbox:has(input:required) label::after{
150
+ margin-left:.25ch;
151
+ color:var(--t-text-color-status-error);
152
+ content:"*";
153
+ }
154
154
 
155
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):active{
156
- background-color:var(--tds-page-header-nav-item-background-color-active);
157
- border-color:var(--tds-page-header-nav-item-border-color-active);
158
- border-bottom-color:var(--tds-page-header-nav-item-background-color-active);
159
- }
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);
160
158
 
161
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):disabled{
162
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-disabled);
163
- color:var(--tds-page-header-nav-item-color-disabled);
164
- cursor:not-allowed;
165
- background-color:var(--tds-page-header-nav-item-background-color-disabled);
166
- opacity:1;
167
- }
168
-
169
- @media (min-width: 600px){
170
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected)::after{
171
- position:absolute;
172
- inset:auto -1px -1px;
173
- height:1px;
174
- pointer-events:none;
175
- content:"";
176
- background-color:var(--tds-page-header-bottom-border-color);
177
- }
178
- }
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
+ }
179
163
 
180
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
181
- position:relative;
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);
182
166
  }
183
167
 
184
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator)) :is(a,button){
185
- -webkit-mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
186
- mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
187
- }
188
-
189
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::before,:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
190
- position:absolute;
191
- top:-5px;
192
- right:-2px;
193
- width:10px;
194
- height:10px;
195
- content:"";
196
- background:var(--tds-page-header-nav-item-indicator-color);
197
- border-radius:50%;
198
- }
199
-
200
- @media (prefers-reduced-motion: no-preference){
201
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
202
- animation:indicator-pulse 1.25s ease infinite;
203
- }
204
- }
205
-
206
- .tds-page-header__title-bar{
168
+ .tds-checkbox-description{
207
169
  display:flex;
208
- flex-direction:column;
209
- gap:var(--t-spacing-2) var(--t-spacing-1);
170
+ grid-area:2 / 2;
171
+ gap:var(--t-spacing-half);
210
172
  align-items:flex-start;
211
- justify-content:space-between;
212
- padding:0 var(--tds-page-header-padding-x);
173
+ padding-inline-start:var(--t-spacing-1);
174
+ margin:0;
175
+ font-size:var(--tds-checkbox-description-font-size);
176
+ line-height:var(--tds-checkbox-description-line-height);
177
+ color:var(--tds-checkbox-description-color);
178
+ cursor:text;
213
179
  }
214
180
 
215
- .tds-page-header--profile > .tds-page-header__title-bar{
216
- align-items:center;
181
+ .tds-checkbox-description .tds-checkbox-description-invalid-icon{
182
+ display:var(--tds-checkbox-description-invalid-icon-display);
183
+ flex-shrink:0;
184
+ margin-top:calc(.5lh - .5em);
185
+ line-height:var(--tds-checkbox-description-line-height);
217
186
  }
218
187
 
219
- .tds-page-header__primary{
220
- width:100%;
188
+ .tds-checkbox--sm{
189
+ --tds-checkbox-line-height:1.35;
190
+ --tds-checkbox-input-size:var(--t-element-size-sm);
191
+ --tds-checkbox-font-size:var(--t-font-size-sm);
192
+ --tds-checkbox-description-font-size:var(--t-font-size-xs);
193
+ --tds-checkbox-description-line-height:1.3;
221
194
  }
222
195
 
223
- .tds-page-header__primary h1{
224
- margin:0;
225
- font-size:var(--tds-page-header-headline-font-size);
226
- font-weight:var(--t-font-weight-normal);
227
- line-height:32px;
228
- color:var(--tds-page-header-headline-color);
229
- overflow-wrap:break-word;
230
- }
231
-
232
- @media (min-width: 960px){
233
- .tds-page-header__primary{
234
- flex:1 1 max-content;
235
- width:auto;
236
- min-width:0;
237
- max-width:100%;
238
- }
196
+ .tds-combo-box{
197
+ --tds-combo-box-button-offset:4px;
198
+ }
239
199
 
240
- .tds-page-header__title-bar,
241
- .tds-page-header--profile .tds-page-header__title-bar{
242
- flex-flow:row nowrap;
243
- row-gap:12px;
244
- align-items:flex-start;
200
+ .tds-combo-box[data-open] .tds-combo-box-button > svg{
201
+ transform:rotate(.5turn);
245
202
  }
246
- .tds-page-header :is([slot="actions"],.tds-page-header__actions){
247
- width:auto;
248
- }
249
203
 
250
- .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
251
- justify-content:flex-end;
252
- }
204
+ .tds-combo-box--lg{
205
+ --tds-combo-box-button-offset:5px;
253
206
  }
254
207
 
255
- .tds-page-header-phone,
256
- .tds-page-header-email{
257
- color:var(--tds-page-header-color);
258
- white-space:nowrap;
208
+ .tds-combo-box-field:has([readonly]) .tds-combo-box-button{
209
+ display:none;
259
210
  }
260
211
 
261
- .tds-page-header-email{
262
- max-width:100%;
263
- overflow:hidden;
264
- text-overflow:ellipsis;
212
+ .tds-combo-box-input{
213
+ display:flex;
214
+ flex:1;
215
+ align-items:center;
216
+ padding-block:var(--tds-field-padding-block);
217
+ padding-inline:var(--tds-field-padding-inline);
218
+ font-family:inherit;
219
+ font-size:inherit;
220
+ color:inherit;
221
+ outline:0;
222
+ background:transparent;
223
+ border:0;
265
224
  }
266
225
 
267
- @keyframes indicator-pulse{
268
- 0%{
269
- opacity:.3;
270
- transform:scale(.9);
226
+ .tds-combo-box-input:has( + .tds-combo-box-button){
227
+ padding-inline-end:0;
271
228
  }
272
229
 
273
- 100%{
274
- opacity:0;
275
- transform:scale(1.75);
230
+ .tds-combo-box-input::-moz-placeholder{
231
+ color:var(--tds-field-placeholder-color);
232
+ -moz-user-select:none;
233
+ user-select:none;
276
234
  }
277
- }
278
-
279
235
 
280
- @media (prefers-reduced-motion: no-preference){
281
-
282
- :root{
283
- interpolate-size:allow-keywords;
284
- }
236
+ .tds-combo-box-input::placeholder{
237
+ color:var(--tds-field-placeholder-color);
238
+ -webkit-user-select:none;
239
+ -moz-user-select:none;
240
+ user-select:none;
285
241
  }
286
242
 
287
- @layer tds-component{
288
- tds-sidenav,
289
- .tds-sidenav{
290
- --tds-sidenav-indent:12px;
291
- --tds-sidenav-item-depth:0;
292
-
293
- --tds-sidenav-item-transition:background-color var(--t-duration-200) var(--t-ease-in-out);
294
-
295
- --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;
296
- --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;
297
- --tds-sidenav-collapse-closed-opacity:0;
298
- --tds-sidenav-collapse-open-opacity:1;
299
- --tds-sidenav-collapse-closed-transform:translateY(-8px);
300
- --tds-sidenav-collapse-open-transform:translateY(0);
243
+ .tds-combo-box-button{
244
+ flex-shrink:0;
245
+ align-self:center;
246
+ inline-size:calc(var(--tds-field-min-height) - (var(--tds-combo-box-button-offset) * 2));
247
+ block-size:calc(var(--tds-field-min-height) - (var(--tds-combo-box-button-offset) * 2));
248
+ padding:0;
249
+ margin-inline-end:var(--tds-combo-box-button-offset);
250
+ }
301
251
 
302
- --tds-sidenav-item-icon-size:var(--t-element-size-md);
303
- --tds-sidenav-item-background-hover:var(--t-fill-color-button-interaction-ghost-hover);
304
- --tds-sidenav-item-background-active:var(--t-fill-color-button-interaction-ghost-active);
305
- --tds-sidenav-item-background-selected:var(--t-fill-color-button-interaction-ghost-active);
252
+ .tds-combo-box-button > svg{
253
+ inline-size:var(--tds-field-font-size);
254
+ block-size:var(--tds-field-font-size);
255
+ transition:transform var(--t-duration-300) var(--t-ease-in-out);
256
+ }
306
257
 
307
- --tds-sidenav-item-nested-background-hover:var(--tds-sidenav-item-background-hover);
308
- --tds-sidenav-item-nested-background-active:var(--tds-sidenav-item-background-hover);
309
- --tds-sidenav-item-nested-background-selected:transparent;
258
+ .tds-combo-box-popover{
259
+ width:var(--trigger-width);
260
+ max-block-size:inherit;
261
+ padding:var(--t-spacing-1);
262
+ overflow:auto;
263
+ scroll-behavior:smooth;
264
+ overscroll-behavior:none;
265
+ -webkit-user-select:none;
266
+ -moz-user-select:none;
267
+ user-select:none;
268
+ outline:0;
269
+ scrollbar-color:#0004 var(--t-surface-color-card);
270
+ scrollbar-width:thin;
271
+ background:var(--t-surface-color-card);
272
+ background-clip:padding-box;
273
+ border:1px solid var(--t-border-color);
274
+ border-radius:var(--t-border-radius);
275
+ box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
276
+ }
310
277
 
311
- --tds-sidenav-item-nested-border-color:var(--t-fill-color-neutral-050);
312
- --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
313
- --tds-sidenav-item-nested-border-color-selected:var(--t-border-color-status-info);
278
+ .tds-combo-box-popover[data-entering]{
279
+ animation:tds-combo-box-popover var(--t-duration-300) var(--t-ease-out);
280
+ }
314
281
 
315
- --tds-sidenav-item-icon-color:var(--t-icon-color-secondary);
316
- --tds-sidenav-item-icon-color-selected:var(--t-icon-color);
282
+ .tds-combo-box-popover[data-exiting]{
283
+ animation:tds-combo-box-popover var(--t-duration-200) var(--t-ease-in) reverse;
317
284
  }
318
285
 
319
- @media (prefers-reduced-motion: reduce){
320
- tds-sidenav,
321
- .tds-sidenav{
322
- --tds-sidenav-collapse-transition-enter:none;
323
- --tds-sidenav-collapse-transition-exit:none;
324
- --tds-sidenav-collapse-closed-transform:none;
325
- --tds-sidenav-collapse-open-transform:none;
286
+ .tds-combo-box-popover[data-entering],.tds-combo-box-popover[data-exiting]{
287
+ will-change:opacity, transform;
326
288
  }
327
- }
328
289
 
329
- .tds-sidenav--theme-gray{
330
- --tds-sidenav-item-background-hover:var(--t-fill-color-neutral-080);
331
- --tds-sidenav-item-background-active:var(--t-fill-color-neutral-070);
332
- --tds-sidenav-item-background-selected:var(--t-fill-color-neutral-050);
333
- --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
334
- --tds-sidenav-item-nested-border-color-selected:var(--t-fill-color-neutral-010);
290
+ @keyframes tds-combo-box-popover{
291
+ from{
292
+ opacity:0;
293
+ transform:translateY(-8px);
335
294
  }
336
295
  }
337
296
 
338
- .tds-sidenav :where(nav,ul,.tds-sidenav-section){
339
- display:flex;
340
- }
297
+ @media (prefers-reduced-motion: reduce){
298
+ .tds-combo-box-popover[data-entering],.tds-combo-box-popover[data-exiting]{
299
+ animation:none;
300
+ }
341
301
 
342
- .tds-sidenav :where(nav,ul,.tds-sidenav-section,.tds-sidenav-collapse){
343
- flex-direction:column;
344
- gap:var(--t-spacing-half);
345
- width:100%;
302
+ .tds-combo-box-button > svg{
303
+ transition:none;
346
304
  }
305
+ }
347
306
 
348
- .tds-sidenav-section-list{
349
- width:100%;
307
+ .tds-combo-box-list{
350
308
  padding:0;
351
309
  margin:0;
352
- list-style:none;
353
310
  }
354
311
 
355
- .tds-sidenav-section-header{
356
- display:flex;
357
- align-items:baseline;
358
- justify-content:space-between;
359
- padding-top:var(--t-spacing-2);
312
+ .tds-combo-box-list-item{
313
+ display:block;
314
+ padding-block:var(--t-spacing-1);
315
+ padding-inline:var(--t-spacing-2) var(--t-spacing-1);
316
+ overflow:hidden;
317
+ text-overflow:ellipsis;
318
+ font-size:1rem;
319
+ color:var(--t-text-color);
320
+ white-space:nowrap;
321
+ cursor:default;
322
+ border-radius:var(--t-border-radius);
360
323
  }
361
324
 
362
- .tds-sidenav-section-header h2{
363
- margin:0;
364
- font-size:var(--t-font-size-sm);
365
- font-weight:var(--t-font-weight-semibold);
366
- line-height:1.35;
367
- color:var(--t-text-color-secondary);
368
- text-transform:uppercase;
325
+ .tds-combo-box-list-item[data-hovered]:not([data-disabled]),.tds-combo-box-list-item[data-focus-visible]{
326
+ background:var(--t-fill-color-neutral-070);
369
327
  }
370
328
 
371
- .tds-sidenav-section:first-of-type .tds-sidenav-section-header{
372
- padding-top:0;
329
+ .tds-combo-box-list-item[data-selected]{
330
+ background:var(--t-fill-color-button-interaction-ghost-active);
373
331
  }
374
332
 
375
- .tds-sidenav-section-header [slot="label-actions"]{
376
- display:flex;
377
- gap:var(--t-spacing-half);
378
- align-items:center;
333
+ .tds-combo-box-list-item[data-pressed]:not([data-disabled]){
334
+ background:var(--t-fill-color-neutral-060);
379
335
  }
380
336
 
381
- .tds-sidenav-section [slot="section-actions"]{
382
- display:flex;
383
- gap:12px;
384
- align-items:center;
385
- min-height:42px;
386
- padding:var(--t-spacing-1) 0;
387
- }
388
-
389
- .tds-sidenav-section-list,
390
- .tds-sidenav-item{
391
- width:100%;
392
- padding:0;
393
- margin:0;
394
- }
395
-
396
- .tds-sidenav-item :is(a,button){
397
- position:relative;
398
- display:flex;
399
- gap:12px;
400
- align-items:center;
401
- width:100%;
402
- padding:12px;
403
- overflow:hidden;
404
- font-size:var(--t-font-size-sm);
405
- line-height:18px;
406
- color:var(--t-text-color-headline);
407
- white-space:nowrap;
408
- text-decoration:none;
409
- -webkit-appearance:none;
410
- -moz-appearance:none;
411
- appearance:none;
412
- cursor:pointer;
413
- background-color:var(--tds-sidenav-item-background, transparent);
414
- border:0;
415
- border-radius:var(--t-border-radius);
416
- transition:var(--tds-sidenav-item-transition);
337
+ .tds-combo-box-list-item[data-disabled]{
338
+ color:var(--t-form-color-disabled);
339
+ cursor:not-allowed;
417
340
  }
418
341
 
419
- :is(.tds-sidenav-item :is(a,button)):not(:has(.prefix,.suffix)),:is(.tds-sidenav-item :is(a,button)) :is(:not(.prefix,.suffix)){
420
- display:block;
421
- flex:1;
422
- overflow:hidden;
423
- text-overflow:ellipsis;
424
- text-align:left;
425
- white-space:nowrap;
342
+ .tds-combo-box-list-item[data-disabled][data-hovered]{
343
+ background:transparent;
426
344
  }
427
345
 
428
- :is(.tds-sidenav-item :is(a,button)):hover,:is(.tds-sidenav-item :is(a,button)):focus-visible{
429
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-hover);
430
- color:var(--t-text-color-headline);
431
- text-decoration:none;
432
- }
346
+ .tds-combo-box-empty-state{
347
+ position:relative;
348
+ min-block-size:var(--t-spacing-3);
349
+ padding-block:var(--t-spacing-1);
350
+ padding-inline:var(--t-spacing-2);
351
+ font-size:var(--t-font-size-md);
352
+ color:var(--t-text-color-secondary);
353
+ }
433
354
 
434
- :is(.tds-sidenav-item :is(a,button)):active{
435
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-active);
436
- }
355
+ .tds-combo-box-load-more{
356
+ position:relative;
357
+ min-block-size:calc(var(--t-spacing-3) + var(--t-spacing-1));
358
+ }
437
359
 
438
- :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]){
439
- overflow:hidden;
440
- color:var(--tds-sidenav-item-icon-color);
441
- }
360
+ .tds-combo-box-empty-state,
361
+ .tds-combo-box-load-more{
362
+ --tds-loading-spinner-visibility:visible;
363
+ --tds-loading-spinner-animation-play-state:running;
364
+ }
442
365
 
443
- :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{
444
- display:block;
445
- width:var(--tds-sidenav-item-icon-size);
446
- height:var(--tds-sidenav-item-icon-size);
447
- }
366
+ .tds-combo-box-list-section:not(:first-child){
367
+ margin-block-start:var(--t-spacing-half);
368
+ }
448
369
 
449
- :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section{
450
- --tds-sidenav-indent:19px;
451
- }
370
+ .tds-combo-box-section-header{
371
+ padding-block:var(--t-spacing-1);
372
+ padding-inline:var(--t-spacing-1);
373
+ font-size:var(--t-font-size-sm);
374
+ font-weight:var(--t-font-weight-semibold);
375
+ color:var(--t-text-color-secondary);
376
+ }
452
377
 
453
- [aria-expanded="true"]:is(.tds-sidenav-item :is(a,button)) + .tds-sidenav-section-list{
454
- visibility:visible;
455
- block-size:auto;
456
- opacity:1;
457
- }
378
+ .tds-checkbox-group{
379
+ --tds-checkbox-group-font-size:var(--t-font-size-md);
380
+ --tds-checkbox-group-line-height:1.4;
381
+ --tds-checkbox-group-gap:var(--t-spacing-1);
458
382
 
459
- .tds-sidenav-item.selected > :is(a,button),.tds-sidenav-item:has(.tds-sidenav-section):has(.selected) > :is(a,button){
460
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-selected);
461
- --tds-sidenav-item-icon-color:var(--tds-sidenav-item-icon-color-selected);
383
+ --tds-checkbox-group-description-font-size:var(--t-font-size-sm);
384
+ --tds-checkbox-group-description-line-height:1.35;
385
+ --tds-checkbox-group-description-color:var(--t-text-color-secondary);
386
+ --tds-checkbox-group-description-invalid-icon-display:none;
387
+ display:flex;
388
+ flex-direction:column;
389
+ gap:0;
390
+ padding:0;
391
+ margin:0;
462
392
 
463
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-selected);
464
- font-weight:var(--t-font-weight-semibold);
465
- }
393
+ font-size:var(--tds-checkbox-group-font-size);
394
+ line-height:var(--tds-checkbox-group-line-height);
395
+ border:0;
396
+ }
466
397
 
467
- .tds-sidenav-item:has(.tds-sidenav-section){
468
- display:flex;
469
- flex-direction:column;
470
- gap:var(--t-spacing-half);
398
+ .tds-checkbox-group legend{
399
+ float:left;
400
+ padding:0;
401
+ margin:0;
471
402
  }
472
403
 
473
- .tds-sidenav-item .tds-sidenav-section-list{
474
- --tds-sidenav-item-depth:1;
475
- gap:0;
404
+ .tds-checkbox-group[aria-invalid="true"]{
405
+ --tds-checkbox-group-description-color:var(--t-text-color-status-error);
406
+ --tds-checkbox-group-description-invalid-icon-display:inline-block;
476
407
  }
477
408
 
478
- .tds-sidenav-action--toggle + :is(.tds-sidenav-item .tds-sidenav-section-list){
479
- visibility:hidden;
480
- block-size:0;
481
- overflow-y:clip;
482
- opacity:0;
483
- transition:content-visibility var(--t-duration-400) allow-discrete, opacity var(--t-duration-400), block-size var(--t-duration-400);
484
- }
485
-
486
- :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list{
487
- --tds-sidenav-item-depth:2;
409
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) legend::after{
410
+ margin-left:.25ch;
411
+ color:var(--t-text-color-status-error);
412
+ content:"*";
488
413
  }
489
414
 
490
- :is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
491
- min-height:var(--t-element-size-2xl);
492
- padding-block:9px;
493
- padding-left:calc((var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth)) + var(--tds-sidenav-indent) + var(--t-spacing-fourth));
494
- line-height:1;
495
- background-color:transparent;
415
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
416
+ content:none;
496
417
  }
497
418
 
498
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::before{
499
- position:absolute;
500
- top:0;
501
- bottom:0;
502
- left:calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
503
- width:2px;
504
- content:"";
505
- background-color:var(--tds-sidenav-item-nested-border-color);
506
- transition:var(--tds-sidenav-item-transition);
507
- }
419
+ .tds-checkbox-group-fields{
420
+ display:flex;
421
+ flex-direction:column;
422
+ gap:var(--tds-checkbox-group-gap);
423
+ align-items:flex-start;
424
+ margin-top:var(--t-spacing-1);
425
+ }
508
426
 
509
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::after{
510
- position:absolute;
511
- inset:0 0 0 calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
512
- z-index:-1;
513
- height:100%;
514
- content:"";
515
- background-color:var(--tds-sidenav-item-nested-background);
516
- border-radius:0 var(--t-border-radius) var(--t-border-radius) 0;
517
- transition:var(--tds-sidenav-item-transition);
518
- }
427
+ .tds-checkbox-group-description{
428
+ display:flex;
429
+ gap:var(--t-spacing-half);
430
+ align-items:flex-start;
431
+ margin:var(--t-spacing-fourth) 0 0;
432
+ font-size:var(--tds-checkbox-group-description-font-size);
433
+ line-height:var(--tds-checkbox-group-description-line-height);
434
+ color:var(--tds-checkbox-group-description-color);
435
+ cursor:text;
436
+ }
519
437
 
520
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):not(:has(.prefix,.suffix)),:is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)) :is(:not(.prefix,.suffix)){
521
- display:block;
522
- text-align:left;
523
- white-space:normal;
524
- }
438
+ .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
439
+ display:var(--tds-checkbox-group-description-invalid-icon-display);
440
+ flex-shrink:0;
441
+ margin-top:calc(.5lh - .5em);
442
+ line-height:var(--tds-checkbox-group-description-line-height);
443
+ }
525
444
 
526
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):hover,:is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):focus-visible{
527
- --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-hover);
528
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-hover);
529
- }
445
+ .tds-checkbox-group--sm{
446
+ --tds-checkbox-group-line-height:1.35;
447
+ --tds-checkbox-group-font-size:var(--t-font-size-sm);
448
+ --tds-checkbox-group-description-font-size:var(--t-font-size-xs);
449
+ --tds-checkbox-group-description-line-height:1.3;
450
+ }
530
451
 
531
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):active{
532
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-active);
533
- }
534
-
535
- .selected:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
536
- --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-selected);
537
- font-weight:var(--t-font-weight-medium);
538
- }
539
-
540
- .tds-sidenav-responsive-header{
541
- display:flex;
542
- gap:var(--t-spacing-2);
543
- align-items:center;
544
- width:100%;
452
+ .tds-number-stepper{
453
+ --tds-number-stepper-button-offset:4px;
454
+ --tds-number-stepper-button-gap:2px;
545
455
  }
546
456
 
547
- .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle{
548
- order:0;
549
- }
550
-
551
- .tds-sidenav-responsive-header .tds-sidenav-responsive-header-label{
552
- flex:1;
553
- order:1;
554
- margin:0;
555
- font-size:var(--t-font-size-lg);
556
- font-weight:var(--t-font-weight-medium);
557
- color:var(--t-text-color-headline);
558
- }
559
-
560
- @media (max-width: 719px){
561
- .tds-sidenav-collapse{
562
- z-index:10001;
563
- display:none;
564
- max-width:min(448px, calc(100vw - 48px));
565
- padding:0;
566
- margin:12px 0;
567
- position-area:bottom span-right;
568
- overflow:hidden;
569
- outline:0;
570
- background:var(--t-surface-color-card);
571
- border:0;
572
- border-radius:6px;
573
- box-shadow:0 8px 20px 0 rgba(0, 0, 0, .25);
574
- opacity:var(--tds-sidenav-collapse-open-opacity);
575
- transform:var(--tds-sidenav-collapse-open-transform);
576
- transition:var(--tds-sidenav-collapse-transition-enter);
577
- will-change:transform;
578
- }
579
-
580
- .tds-sidenav-scroll-container{
581
- --webkit-overflow-scrolling:touch;
582
- display:block;
583
- width:100%;
584
- height:-moz-fit-content;
585
- height:fit-content;
586
- padding:var(--t-spacing-2);
587
- overflow-y:auto;
588
- }
589
-
590
- .tds-sidenav-item :is(a, button) :is(.prefix){
591
- display:none;
592
- }
593
- @supports selector(:popover-open){
594
- .tds-sidenav-collapse:popover-open{
595
- display:flex;
596
- }
597
-
598
- .tds-sidenav-collapse:not(:popover-open){
599
- opacity:var(--tds-sidenav-collapse-closed-opacity);
600
- transition:var(--tds-sidenav-collapse-transition-exit);
601
- }
602
-
603
- @starting-style{
604
- .tds-sidenav-collapse:popover-open{
605
- opacity:var(--tds-sidenav-collapse-closed-opacity);
606
- transform:var(--tds-sidenav-collapse-closed-transform);
607
- }
608
- }
609
- }
610
- @supports not selector(:popover-open){
611
- .tds-sidenav-collapse.\:popover-open{
612
- display:flex;
613
- }
614
-
615
- .tds-sidenav-collapse:not(.\:popover-open){
616
- opacity:var(--tds-sidenav-collapse-closed-opacity);
617
- transition:var(--tds-sidenav-collapse-transition-exit);
618
- }
619
- }
457
+ .tds-number-stepper--lg{
458
+ --tds-number-stepper-button-offset:5px;
459
+ --tds-number-stepper-button-gap:4px;
620
460
  }
621
461
 
622
- @media (min-width: 720px){
623
- .tds-sidenav-responsive-header{
624
- display:none;
625
- }
462
+ .tds-number-stepper-field:has([readonly]) .tds-number-stepper-button{
463
+ display:none;
626
464
  }
627
465
 
628
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
629
- display:none;
630
- }
631
-
632
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
633
- display:block;
634
- }
635
-
636
- tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
637
- display:flex;
638
- flex-direction:column;
639
- }
640
-
641
- .tds-checkbox-group{
642
- --tds-checkbox-group-font-size:var(--t-font-size-md);
643
- --tds-checkbox-group-line-height:1.4;
644
- --tds-checkbox-group-gap:var(--t-spacing-1);
645
-
646
- --tds-checkbox-group-description-font-size:var(--t-font-size-sm);
647
- --tds-checkbox-group-description-line-height:1.35;
648
- --tds-checkbox-group-description-color:var(--t-text-color-secondary);
649
- --tds-checkbox-group-description-invalid-icon-display:none;
466
+ .tds-number-stepper-input{
650
467
  display:flex;
651
- flex-direction:column;
652
- gap:0;
653
- padding:0;
654
- margin:0;
655
-
656
- font-size:var(--tds-checkbox-group-font-size);
657
- line-height:var(--tds-checkbox-group-line-height);
468
+ flex:1;
469
+ align-items:center;
470
+ min-inline-size:0;
471
+ padding-block:var(--tds-field-padding-block);
472
+ padding-inline:var(--tds-field-padding-inline);
473
+ font-family:inherit;
474
+ font-size:inherit;
475
+ color:inherit;
476
+ outline:0;
477
+ background:transparent;
658
478
  border:0;
659
479
  }
660
480
 
661
- .tds-checkbox-group legend{
662
- float:left;
663
- padding:0;
481
+ .tds-number-stepper-input::-webkit-inner-spin-button,.tds-number-stepper-input::-webkit-outer-spin-button{
664
482
  margin:0;
483
+ -webkit-appearance:none;
484
+ appearance:none;
665
485
  }
666
486
 
667
- .tds-checkbox-group[aria-invalid="true"]{
668
- --tds-checkbox-group-description-color:var(--t-text-color-status-error);
669
- --tds-checkbox-group-description-invalid-icon-display:inline-block;
670
- }
671
-
672
- .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) legend::after{
673
- margin-left:.25ch;
674
- color:var(--t-text-color-status-error);
675
- content:"*";
676
- }
677
-
678
- .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
679
- content:none;
680
- }
681
-
682
- .tds-checkbox-group-fields{
683
- display:flex;
684
- flex-direction:column;
685
- gap:var(--tds-checkbox-group-gap);
686
- align-items:flex-start;
687
- margin-top:var(--t-spacing-1);
487
+ .tds-number-stepper-button{
488
+ flex-shrink:0;
489
+ align-self:center;
490
+ inline-size:calc(var(--tds-field-min-height) - (var(--tds-number-stepper-button-offset) * 2));
491
+ block-size:calc(var(--tds-field-min-height) - (var(--tds-number-stepper-button-offset) * 2));
492
+ padding:0;
688
493
  }
689
494
 
690
- .tds-checkbox-group-description{
691
- display:flex;
692
- gap:var(--t-spacing-half);
693
- align-items:flex-start;
694
- margin:var(--t-spacing-fourth) 0 0;
695
- font-size:var(--tds-checkbox-group-description-font-size);
696
- line-height:var(--tds-checkbox-group-description-line-height);
697
- color:var(--tds-checkbox-group-description-color);
698
- cursor:text;
699
- }
495
+ .tds-number-stepper-button + .tds-number-stepper-button{
496
+ margin-inline-start:var(--tds-number-stepper-button-gap);
497
+ }
700
498
 
701
- .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
702
- display:var(--tds-checkbox-group-description-invalid-icon-display);
703
- flex-shrink:0;
704
- margin-top:calc(.5lh - .5em);
705
- line-height:var(--tds-checkbox-group-description-line-height);
499
+ .tds-number-stepper-button:last-of-type{
500
+ margin-inline-end:var(--tds-number-stepper-button-offset);
706
501
  }
707
502
 
708
- .tds-checkbox-group--sm{
709
- --tds-checkbox-group-line-height:1.35;
710
- --tds-checkbox-group-font-size:var(--t-font-size-sm);
711
- --tds-checkbox-group-description-font-size:var(--t-font-size-xs);
712
- --tds-checkbox-group-description-line-height:1.3;
503
+ .tds-date-picker{
504
+ --tds-date-picker-button-offset:4px;
713
505
  }
714
506
 
715
- .tds-combo-box{
716
- --tds-combo-box-button-offset:4px;
507
+ .tds-date-picker--lg{
508
+ --tds-date-picker-button-offset:5px;
717
509
  }
718
510
 
719
- .tds-combo-box[data-open] .tds-combo-box-button > svg{
720
- transform:rotate(.5turn);
721
- }
722
-
723
- .tds-combo-box--lg{
724
- --tds-combo-box-button-offset:5px;
511
+ .tds-date-picker-field[data-focus-within]:has(.tds-date-picker-button[data-focused]){
512
+ outline-color:transparent;
513
+ outline-offset:0;
514
+ border-color:var(--tds-field-border-color);
725
515
  }
726
516
 
727
- .tds-combo-box-field:has([readonly]) .tds-combo-box-button{
517
+ .tds-date-picker-field:has(.tds-date-picker-input[data-readonly]) .tds-date-picker-button{
728
518
  display:none;
729
519
  }
730
520
 
731
- .tds-combo-box-input{
732
- display:flex;
521
+ .tds-date-picker-input{
733
522
  flex:1;
734
- align-items:center;
735
523
  padding-block:var(--tds-field-padding-block);
736
524
  padding-inline:var(--tds-field-padding-inline);
737
- font-family:inherit;
738
- font-size:inherit;
739
- color:inherit;
740
- outline:0;
741
- background:transparent;
742
- border:0;
525
+ overflow:auto clip;
526
+ font-variant-numeric:tabular-nums;
527
+ text-wrap:nowrap;
528
+ scrollbar-width:none;
743
529
  }
744
530
 
745
- .tds-combo-box-input:has( + .tds-combo-box-button){
531
+ .tds-date-picker-input:has( + .tds-date-picker-button){
746
532
  padding-inline-end:0;
747
533
  }
748
534
 
749
- .tds-combo-box-input::-moz-placeholder{
750
- color:var(--tds-field-placeholder-color);
751
- -moz-user-select:none;
752
- user-select:none;
753
- }
754
-
755
- .tds-combo-box-input::placeholder{
756
- color:var(--tds-field-placeholder-color);
757
- -webkit-user-select:none;
758
- -moz-user-select:none;
759
- user-select:none;
760
- }
761
-
762
- .tds-combo-box-button{
535
+ .tds-date-picker-button{
763
536
  flex-shrink:0;
764
537
  align-self:center;
765
- inline-size:calc(var(--tds-field-min-height) - (var(--tds-combo-box-button-offset) * 2));
766
- block-size:calc(var(--tds-field-min-height) - (var(--tds-combo-box-button-offset) * 2));
538
+ inline-size:calc(var(--tds-field-min-height) - (var(--tds-date-picker-button-offset) * 2));
539
+ block-size:calc(var(--tds-field-min-height) - (var(--tds-date-picker-button-offset) * 2));
767
540
  padding:0;
768
- margin-inline-end:var(--tds-combo-box-button-offset);
541
+ margin-inline-end:var(--tds-date-picker-button-offset);
769
542
  }
770
543
 
771
- .tds-combo-box-button > svg{
772
- inline-size:var(--tds-field-font-size);
773
- block-size:var(--tds-field-font-size);
774
- transition:transform var(--t-duration-300) var(--t-ease-in-out);
775
- }
544
+ .tds-date-picker-popover{
545
+ --tds-date-picker-popover-font-size:var(--t-font-size-md);
546
+ --tds-date-picker-popover-padding:var(--t-spacing-1-half);
547
+ --tds-date-picker-popover-background-color:var(--t-surface-color-card);
548
+ --tds-date-picker-popover-shadow:hsl(0, 0%, 0%, .05) 0 10px 15px -3px, hsl(0, 0%, 0%, .05) 0 4px 6px -4px;
549
+ --tds-date-picker-popover-interactive-timing-function:var(--t-ease-in-out);
550
+ --tds-date-picker-popover-interactive-duration:var(--t-duration-200);
551
+ --tds-date-picker-popover-interactive-property:color, background-color, border-color;
776
552
 
777
- .tds-combo-box-popover{
778
- width:var(--trigger-width);
779
- max-block-size:inherit;
780
- padding:var(--t-spacing-1);
781
- overflow:auto;
782
- scroll-behavior:smooth;
783
- overscroll-behavior:none;
784
- -webkit-user-select:none;
785
- -moz-user-select:none;
786
- user-select:none;
787
- outline:0;
788
- scrollbar-color:#0004 var(--t-surface-color-card);
789
- scrollbar-width:thin;
790
- background:var(--t-surface-color-card);
791
- background-clip:padding-box;
792
- border:1px solid var(--t-border-color);
553
+ position:relative;
554
+ overflow:hidden;
555
+ background-color:var(--tds-date-picker-popover-background-color);
556
+ border:var(--t-border-width) solid var(--t-border-color);
793
557
  border-radius:var(--t-border-radius);
794
- box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
558
+ box-shadow:var(--tds-date-picker-popover-shadow);
795
559
  }
796
560
 
797
- .tds-combo-box-popover[data-entering]{
798
- animation:tds-combo-box-popover var(--t-duration-300) var(--t-ease-out);
561
+ .tds-date-picker-popover[data-entering]{
562
+ animation:tds-date-picker-popover var(--t-duration-300) var(--t-ease-out);
799
563
  }
800
564
 
801
- .tds-combo-box-popover[data-exiting]{
802
- animation:tds-combo-box-popover var(--t-duration-200) var(--t-ease-in) reverse;
565
+ .tds-date-picker-popover[data-exiting]{
566
+ animation:tds-date-picker-popover var(--t-duration-200) var(--t-ease-in) reverse;
803
567
  }
804
568
 
805
- .tds-combo-box-popover[data-entering],.tds-combo-box-popover[data-exiting]{
569
+ .tds-date-picker-popover[data-entering],.tds-date-picker-popover[data-exiting]{
806
570
  will-change:opacity, transform;
807
571
  }
808
572
 
809
- @keyframes tds-combo-box-popover{
573
+ @keyframes tds-date-picker-popover{
810
574
  from{
811
575
  opacity:0;
812
576
  transform:translateY(-8px);
@@ -814,710 +578,962 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
814
578
  }
815
579
 
816
580
  @media (prefers-reduced-motion: reduce){
817
- .tds-combo-box-popover[data-entering],.tds-combo-box-popover[data-exiting]{
581
+ .tds-date-picker-popover[data-entering],.tds-date-picker-popover[data-exiting]{
818
582
  animation:none;
819
583
  }
584
+ }
820
585
 
821
- .tds-combo-box-button > svg{
822
- transition:none;
823
- }
586
+ .tds-date-picker-overlay{
587
+ position:absolute;
588
+ inset:0;
589
+ z-index:1;
590
+ display:flex;
591
+ background-color:var(--tds-date-picker-popover-background-color);
824
592
  }
825
593
 
826
- .tds-combo-box-list{
827
- padding:0;
828
- margin:0;
594
+ .tds-date-picker-overlay-list{
595
+ display:grid;
596
+ flex:1;
597
+ grid-template-columns:repeat(3, 1fr);
598
+ gap:var(--t-spacing-half);
599
+ padding-inline:var(--tds-date-picker-popover-padding);
600
+ outline:0;
601
+ scrollbar-color:var(--t-fill-color-transparency-dark-030) transparent;
602
+ scrollbar-width:thin;
829
603
  }
830
604
 
831
- .tds-combo-box-list-item{
832
- display:block;
833
- padding-block:var(--t-spacing-1);
834
- padding-inline:var(--t-spacing-2) var(--t-spacing-1);
835
- overflow:hidden;
836
- text-overflow:ellipsis;
837
- font-size:1rem;
605
+ .tds-date-picker-overlay--month .tds-date-picker-overlay-list{
606
+ grid-template-rows:repeat(4, 1fr);
607
+ padding-bottom:var(--tds-date-picker-popover-padding);
608
+ }
609
+
610
+ .tds-date-picker-overlay--year .tds-date-picker-overlay-list{
611
+ grid-auto-rows:var(--t-container-size-xl);
612
+ padding-right:var(--t-spacing-1);
613
+ overflow-y:auto;
614
+ scroll-padding-block:calc(var(--t-focus-ring-width) + var(--t-focus-ring-offset));
615
+ }
616
+
617
+ .tds-date-picker-overlay-cell{
618
+ display:flex;
619
+ align-items:center;
620
+ justify-content:center;
621
+ font-family:inherit;
622
+ font-size:var(--tds-date-picker-popover-font-size);
838
623
  color:var(--t-text-color);
839
- white-space:nowrap;
840
- cursor:default;
841
- border-radius:var(--t-border-radius);
624
+ cursor:pointer;
625
+ outline:0;
626
+ background-color:transparent;
627
+ border:0;
628
+ border-radius:var(--t-border-radius-md);
629
+ transition-timing-function:var(--tds-date-picker-popover-interactive-timing-function);
630
+ transition-duration:var(--t-duration-100);
631
+ transition-property:var(--tds-date-picker-popover-interactive-property);
842
632
  }
843
633
 
844
- .tds-combo-box-list-item[data-hovered]:not([data-disabled]),.tds-combo-box-list-item[data-focus-visible]{
845
- background:var(--t-fill-color-neutral-070);
634
+ .tds-date-picker-overlay-cell[data-hovered]{
635
+ background-color:var(--t-fill-color-button-neutral-outline-hover);
846
636
  }
847
637
 
848
- .tds-combo-box-list-item[data-selected]{
849
- background:var(--t-fill-color-button-interaction-ghost-active);
638
+ .tds-date-picker-overlay-cell[data-pressed]{
639
+ background-color:var(--t-fill-color-button-neutral-outline-active);
850
640
  }
851
641
 
852
- .tds-combo-box-list-item[data-pressed]:not([data-disabled]){
853
- background:var(--t-fill-color-neutral-060);
642
+ .tds-date-picker-overlay-cell[data-selected]{
643
+ font-weight:var(--t-font-weight-semibold);
644
+ color:var(--t-text-color-inverted);
645
+ background-color:var(--t-fill-color-interaction);
854
646
  }
855
647
 
856
- .tds-combo-box-list-item[data-disabled]{
857
- color:var(--t-form-color-disabled);
858
- cursor:not-allowed;
648
+ .tds-date-picker-overlay-cell[data-focus-visible]{
649
+ outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
859
650
  }
860
651
 
861
- .tds-combo-box-list-item[data-disabled][data-hovered]{
862
- background:transparent;
863
- }
652
+ .tds-date-picker-overlay-cell[data-selected][data-focus-visible]{
653
+ outline-offset:var(--t-focus-ring-offset);
654
+ }
864
655
 
865
- .tds-combo-box-empty-state{
866
- position:relative;
867
- min-block-size:var(--t-spacing-3);
868
- padding-block:var(--t-spacing-1);
869
- padding-inline:var(--t-spacing-2);
870
- font-size:var(--t-font-size-md);
871
- color:var(--t-text-color-secondary);
656
+ .tds-date-picker-calendar-heading{
657
+ display:flex;
658
+ flex:1;
659
+ gap:var(--t-spacing-1);
660
+ align-items:center;
661
+ justify-content:flex-start;
662
+ padding-inline-start:4px;
872
663
  }
873
664
 
874
- .tds-combo-box-load-more{
665
+ .tds-date-picker-calendar-overlay-trigger{
666
+ --_background-color:transparent;
875
667
  position:relative;
876
- min-block-size:calc(var(--t-spacing-3) + var(--t-spacing-1));
877
- }
878
-
879
- .tds-combo-box-empty-state,
880
- .tds-combo-box-load-more{
881
- --tds-loading-spinner-visibility:visible;
882
- --tds-loading-spinner-animation-play-state:running;
883
- }
884
-
885
- .tds-combo-box-list-section:not(:first-child){
886
- margin-block-start:var(--t-spacing-half);
887
- }
888
-
889
- .tds-combo-box-section-header{
890
- padding-block:var(--t-spacing-1);
891
- padding-inline:var(--t-spacing-1);
892
- font-size:var(--t-font-size-sm);
668
+ padding:0;
669
+ font-family:inherit;
670
+ font-size:var(--tds-date-picker-popover-font-size);
893
671
  font-weight:var(--t-font-weight-semibold);
894
- color:var(--t-text-color-secondary);
672
+ font-feature-settings:"ss01", "ss02";
673
+ color:var(--t-text-color);
674
+ cursor:pointer;
675
+ outline:0;
676
+ background-color:transparent;
677
+ border:0;
678
+ border-radius:var(--t-border-radius-md);
679
+ isolation:isolate;
680
+ transition-timing-function:var(--tds-date-picker-popover-interactive-timing-function);
681
+ transition-duration:var(--tds-date-picker-popover-interactive-duration);
682
+ transition-property:var(--tds-date-picker-popover-interactive-property);
895
683
  }
896
684
 
897
- .tds-checkbox{
898
- --tds-checkbox-font-size:var(--t-font-size-md);
899
- --tds-checkbox-cursor:pointer;
900
- --tds-checkbox-line-height:1.4;
901
- --tds-checkbox-transition-property:background-color, border-color;
685
+ .tds-date-picker-calendar-overlay-trigger::before{
686
+ position:absolute;
687
+ inset:calc(var(--t-spacing-half) * -1);
688
+ z-index:-1;
689
+ pointer-events:inherit;
690
+ content:"";
691
+ background-color:var(--_background-color);
692
+ border-radius:inherit;
693
+ }
902
694
 
903
- --tds-checkbox-input-size:var(--t-element-size-md);
904
- --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
905
- --tds-checkbox-input-border-color:var(--t-form-border-color);
906
- --tds-checkbox-input-background-color:var(--t-form-background-color);
695
+ .tds-date-picker-calendar-overlay-trigger[data-hovered]{
696
+ --_background-color:var(--t-fill-color-button-neutral-outline-hover);
697
+ }
907
698
 
908
- --tds-checkbox-input-icon:none;
909
- --tds-checkbox-input-icon-visibility:hidden;
910
- --tds-checkbox-input-icon-opacity:0;
911
- --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
699
+ .tds-date-picker-calendar-overlay-trigger[data-pressed]{
700
+ --_background-color:var(--t-fill-color-button-neutral-outline-active);
701
+ }
912
702
 
913
- --tds-checkbox-label-color:var(--t-form-color);
703
+ .tds-date-picker-calendar-overlay-trigger[data-focus-visible]{
704
+ outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
705
+ outline-offset:var(--t-focus-ring-offset);
706
+ }
914
707
 
915
- --tds-checkbox-description-font-size:var(--t-font-size-sm);
916
- --tds-checkbox-description-line-height:1.35;
917
- --tds-checkbox-description-color:var(--t-text-color-secondary);
918
- --tds-checkbox-description-invalid-icon-display:none;
708
+ .tds-date-picker-calendar{
709
+ inline-size:-moz-fit-content;
710
+ inline-size:fit-content;
711
+ font-size:var(--tds-date-picker-popover-font-size);
712
+ }
919
713
 
714
+ .tds-date-picker-calendar-body{
920
715
  position:relative;
921
- display:inline-grid;
922
- grid-template-columns:auto;
923
- grid-auto-columns:1fr;
924
- gap:var(--t-spacing-fourth) 0;
925
- line-height:var(--tds-checkbox-line-height);
926
- -webkit-user-select:none;
927
- -moz-user-select:none;
928
- user-select:none;
716
+ padding:var(--tds-date-picker-popover-padding);
717
+ padding-block-start:0;
929
718
  }
930
719
 
931
- .tds-checkbox label{
932
- grid-area:1 / 2;
933
- padding-inline-start:var(--t-spacing-1);
934
- font-size:var(--tds-checkbox-font-size);
935
- font-weight:var(--t-font-weight-normal);
936
- color:var(--tds-checkbox-label-color);
937
- cursor:var(--tds-checkbox-cursor);
938
- }
720
+ .tds-date-picker-calendar-header{
721
+ display:flex;
722
+ align-items:center;
723
+ justify-content:space-between;
724
+ padding:var(--tds-date-picker-popover-padding);
725
+ }
939
726
 
940
- .tds-checkbox tds-indeterminate{
941
- display:flex;
942
- }
727
+ .tds-date-picker-calendar-title{
728
+ padding:var(--t-spacing-half) var(--t-spacing-1);
729
+ font-size:var(--tds-date-picker-popover-font-size);
730
+ font-weight:var(--t-font-weight-semibold);
731
+ }
943
732
 
944
- .tds-checkbox input[type="checkbox"]{
945
- position:relative;
946
- width:1em;
947
- height:1em;
948
- margin:calc((1lh - 1em) / 2) 0 0;
949
- font-size:var(--tds-checkbox-font-size);
950
- line-height:inherit;
951
- -webkit-appearance:none;
952
- -moz-appearance:none;
953
- appearance:none;
954
- cursor:var(--tds-checkbox-cursor);
955
- background-color:var(--tds-checkbox-input-background-color);
956
- border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
957
- border-radius:var(--tds-checkbox-input-border-radius);
958
- transition-timing-function:var(--t-ease-in-out);
959
- transition-duration:var(--t-duration-200);
960
- transition-property:var(--tds-checkbox-transition-property);
961
- }
733
+ .tds-date-picker-calendar-nav{
734
+ display:flex;
735
+ align-items:center;
736
+ justify-content:center;
737
+ padding:var(--t-spacing-half);
738
+ font-size:.875em;
739
+ color:var(--t-text-color);
740
+ cursor:pointer;
741
+ outline:0;
742
+ background-color:transparent;
743
+ border:0;
744
+ border-radius:var(--t-border-radius-md);
745
+ transition-timing-function:var(--tds-date-picker-popover-interactive-timing-function);
746
+ transition-duration:var(--tds-date-picker-popover-interactive-duration);
747
+ transition-property:var(--tds-date-picker-popover-interactive-property);
748
+ }
962
749
 
963
- :is(.tds-checkbox input[type="checkbox"])::before{
964
- position:absolute;
965
- top:50%;
966
- left:50%;
967
- visibility:var(--tds-checkbox-input-icon-visibility);
968
- width:100%;
969
- height:100%;
970
- content:"";
971
- background-color:var(--tds-checkbox-input-icon-fill);
972
- border-radius:var(--tds-checkbox-input-border-radius);
973
- opacity:var(--tds-checkbox-input-icon-opacity);
974
- -webkit-mask-image:var(--tds-checkbox-input-icon);
975
- mask-image:var(--tds-checkbox-input-icon);
976
- -webkit-mask-repeat:no-repeat;
977
- mask-repeat:no-repeat;
978
- -webkit-mask-size:contain;
979
- mask-size:contain;
980
- transform:translate(-50%, -50%);
981
- }
750
+ .tds-date-picker-calendar-nav[data-hovered]{
751
+ background-color:var(--t-fill-color-button-neutral-outline-hover);
752
+ }
982
753
 
983
- :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
984
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
985
- --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
986
- }
754
+ .tds-date-picker-calendar-nav[data-pressed]{
755
+ background-color:var(--t-fill-color-button-neutral-outline-active);
756
+ }
987
757
 
988
- :is(.tds-checkbox input[type="checkbox"]):focus-visible{
989
- outline:var(--t-focus-ring-outline);
990
- outline-offset:var(--t-focus-ring-offset);
991
- }
758
+ .tds-date-picker-calendar-nav[data-focus-visible]{
759
+ outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
760
+ outline-offset:var(--t-focus-ring-offset);
761
+ }
992
762
 
993
- :is(.tds-checkbox input[type="checkbox"]):disabled{
994
- pointer-events:none;
995
- }
763
+ .tds-date-picker-calendar-nav[data-disabled]{
764
+ color:var(--t-text-color-disabled);
765
+ cursor:not-allowed;
766
+ }
996
767
 
997
- @media (prefers-reduced-motion: reduce){
768
+ .tds-date-picker-calendar-grid{
769
+ font-feature-settings:"ss01", "ss02";
770
+ border-collapse:collapse;
771
+ }
998
772
 
999
- .tds-checkbox input[type="checkbox"]{
1000
- --tds-checkbox-transition-property:none;
773
+ .tds-date-picker-calendar-grid :where(thead,tbody,tr,td,th){
774
+ padding:0;
775
+ border:0;
1001
776
  }
1002
- }
1003
777
 
1004
- .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
1005
- --tds-checkbox-input-background-color:var(--t-fill-color-control);
1006
- --tds-checkbox-input-border-color:var(--t-border-color-control-info);
1007
- --tds-checkbox-input-icon-visibility:visible;
1008
- --tds-checkbox-input-icon-opacity:1;
778
+ .tds-date-picker-calendar-header-cell{
779
+ padding-block-end:var(--t-spacing-1);
780
+ font-size:.875em;
781
+ font-weight:var(--t-font-weight-medium);
782
+ color:var(--t-text-color-secondary);
783
+ text-align:center;
784
+ -webkit-user-select:none;
785
+ -moz-user-select:none;
786
+ user-select:none;
787
+ }
788
+
789
+ .tds-date-picker-calendar-cell-button{
790
+ position:relative;
791
+ display:flex;
792
+ align-items:center;
793
+ justify-content:center;
794
+ inline-size:2.25em;
795
+ block-size:2.25em;
796
+ color:var(--t-text-color);
797
+ cursor:pointer;
798
+ -webkit-user-select:none;
799
+ -moz-user-select:none;
800
+ user-select:none;
801
+ outline:0;
802
+ }
803
+
804
+ .tds-date-picker-calendar-cell-button::before{
805
+ position:absolute;
806
+ inset:0;
807
+ z-index:-1;
808
+ content:"";
809
+ background-color:var(--_background-color);
810
+ border-radius:50%;
1009
811
  }
1010
812
 
1011
- :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
1012
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
1013
- --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
813
+ .tds-date-picker-calendar-cell-button[data-today]::before{
814
+ box-shadow:inset 0 0 0 1.5px var(--t-border-color);
1014
815
  }
1015
816
 
1016
- .tds-checkbox:has(input:checked){
1017
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
817
+ .tds-date-picker-calendar-cell-button[data-outside-month]{
818
+ display:none;
1018
819
  }
1019
820
 
1020
- .tds-checkbox:has(input:indeterminate){
1021
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
821
+ .tds-date-picker-calendar-cell-button[data-hovered]{
822
+ --_background-color:var(--t-fill-color-button-neutral-outline-hover);
1022
823
  }
1023
824
 
1024
- .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
1025
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1026
- --tds-checkbox-description-color:var(--t-text-color-status-error);
1027
- --tds-checkbox-description-invalid-icon-display:inline-block;
825
+ .tds-date-picker-calendar-cell-button[data-pressed]{
826
+ --_background-color:var(--t-fill-color-button-neutral-outline-active);
1028
827
  }
1029
828
 
1030
- :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
1031
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1032
- --tds-checkbox-input-background-color:var(--t-form-background-color-error);
1033
- }
1034
-
1035
- :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:checked,:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:indeterminate{
1036
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1037
- --tds-checkbox-input-background-color:var(--t-form-border-color-error);
1038
- }
1039
-
1040
- :is(:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:checked,:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:indeterminate):hover:not(:disabled){
1041
- --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
1042
- --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
1043
- }
829
+ .tds-date-picker-calendar-cell-button[data-selected]{
830
+ --_background-color:var(--t-fill-color-interaction);
831
+ font-weight:var(--t-font-weight-semibold);
832
+ color:var(--t-text-color-inverted);
833
+ border-color:transparent;
834
+ }
1044
835
 
1045
- .tds-checkbox:has(input:required) label::after{
1046
- margin-left:.25ch;
1047
- color:var(--t-text-color-status-error);
1048
- content:"*";
1049
- }
836
+ .tds-date-picker-calendar-cell-button[data-unavailable]{
837
+ color:var(--t-text-color-disabled);
838
+ text-decoration:line-through;
839
+ cursor:not-allowed;
840
+ }
1050
841
 
1051
- .tds-checkbox:has(input:disabled){
1052
- --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
1053
- --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
842
+ .tds-date-picker-calendar-cell-button[data-disabled]{
843
+ color:var(--t-text-color-disabled);
844
+ }
1054
845
 
1055
- --tds-checkbox-label-color:var(--t-form-color-disabled);
1056
- --tds-checkbox-description-color:var(--t-form-color-disabled);
1057
- --tds-checkbox-cursor:not-allowed;
846
+ .tds-date-picker-calendar-cell-button[data-focus-visible]{
847
+ outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
848
+ outline-offset:-2px;
1058
849
  }
1059
850
 
1060
- .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
1061
- --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
1062
- }
851
+ .tds-date-picker-calendar-cell-button[data-focus-visible][data-selected]{
852
+ outline-offset:var(--t-focus-ring-offset);
853
+ }
1063
854
 
1064
- .tds-checkbox-description{
1065
- display:flex;
1066
- grid-area:2 / 2;
1067
- gap:var(--t-spacing-half);
1068
- align-items:flex-start;
1069
- padding-inline-start:var(--t-spacing-1);
1070
- margin:0;
1071
- font-size:var(--tds-checkbox-description-font-size);
1072
- line-height:var(--tds-checkbox-description-line-height);
1073
- color:var(--tds-checkbox-description-color);
1074
- cursor:text;
855
+ .tds-date-picker-popover--lg{
856
+ --tds-date-picker-popover-font-size:var(--t-font-size-lg);
1075
857
  }
1076
858
 
1077
- .tds-checkbox-description .tds-checkbox-description-invalid-icon{
1078
- display:var(--tds-checkbox-description-invalid-icon-display);
1079
- flex-shrink:0;
1080
- margin-top:calc(.5lh - .5em);
1081
- line-height:var(--tds-checkbox-description-line-height);
1082
- }
1083
859
 
1084
- .tds-checkbox--sm{
1085
- --tds-checkbox-line-height:1.35;
1086
- --tds-checkbox-input-size:var(--t-element-size-sm);
1087
- --tds-checkbox-font-size:var(--t-font-size-sm);
1088
- --tds-checkbox-description-font-size:var(--t-font-size-xs);
1089
- --tds-checkbox-description-line-height:1.3;
1090
- }
860
+ :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{
861
+ -webkit-appearance:none;
862
+ appearance:none;
863
+ }
1091
864
 
1092
- .tds-number-stepper{
1093
- --tds-number-stepper-button-offset:4px;
1094
- --tds-number-stepper-button-gap:2px;
1095
- }
865
+ [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
866
+ inline-size:1em;
867
+ block-size:2em;
868
+ }
1096
869
 
1097
- .tds-number-stepper--lg{
1098
- --tds-number-stepper-button-offset:5px;
1099
- --tds-number-stepper-button-gap:4px;
870
+ @supports (field-sizing: content){
871
+ .tds-input--auto-width{
872
+ inline-size:-moz-fit-content;
873
+ inline-size:fit-content;
874
+ min-inline-size:min(100%, 122px);
875
+ }
876
+
877
+ .tds-input--auto-width input{
878
+ field-sizing:content;
879
+ inline-size:auto;
880
+ }
1100
881
  }
1101
882
 
1102
- .tds-number-stepper-field:has([readonly]) .tds-number-stepper-button{
1103
- display:none;
883
+ @layer t-critical{
884
+ tds-page-header:not(.hydrated){
885
+ display:none;
886
+ }
1104
887
  }
1105
888
 
1106
- .tds-number-stepper-input{
1107
- display:flex;
1108
- flex:1;
1109
- align-items:center;
1110
- min-inline-size:0;
1111
- padding-block:var(--tds-field-padding-block);
1112
- padding-inline:var(--tds-field-padding-inline);
1113
- font-family:inherit;
1114
- font-size:inherit;
1115
- color:inherit;
1116
- outline:0;
1117
- background:transparent;
1118
- border:0;
1119
- }
889
+ @layer t-component{
890
+ .tds-page-header{
891
+ --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
892
+ --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
893
+ --tds-page-header-color:var(--t-text-color);
894
+ --tds-page-header-bottom-border-color:transparent;
895
+ --tds-page-header-headline-color:var(--t-text-color-headline);
896
+ --tds-page-header-headline-font-size:var(--t-font-size-2xl);
897
+ --tds-page-header-padding-x:var(--t-spacing-2);
898
+ --tds-page-header-padding-y:var(--t-spacing-2);
899
+ --tds-page-header-nav-padding-x:var(--tds-page-header-padding-x, var(--t-spacing-3));
900
+ --tds-page-header-nav-gap:var(--t-spacing-1);
901
+ --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%);
902
+ --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
903
+ --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
904
+ --tds-page-header-nav-item-color:var(--t-text-color-secondary);
905
+ --tds-page-header-nav-item-background-color:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 35%);
906
+ --tds-page-header-nav-item-border-width:1px;
1120
907
 
1121
- .tds-number-stepper-input::-webkit-inner-spin-button,.tds-number-stepper-input::-webkit-outer-spin-button{
1122
- margin:0;
1123
- -webkit-appearance:none;
1124
- appearance:none;
1125
- }
908
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
909
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color);
1126
910
 
1127
- .tds-number-stepper-button{
1128
- flex-shrink:0;
1129
- align-self:center;
1130
- inline-size:calc(var(--tds-field-min-height) - (var(--tds-number-stepper-button-offset) * 2));
1131
- block-size:calc(var(--tds-field-min-height) - (var(--tds-number-stepper-button-offset) * 2));
1132
- padding:0;
1133
- }
911
+ --tds-page-header-nav-item-color-hover:var(--t-text-color);
912
+ --tds-page-header-nav-item-background-color-hover:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 20%);
913
+ --tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
1134
914
 
1135
- .tds-number-stepper-button + .tds-number-stepper-button{
1136
- margin-inline-start:var(--tds-number-stepper-button-gap);
915
+ --tds-page-header-nav-item-background-color-active:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 10%);
916
+ --tds-page-header-nav-item-border-color-active:var(--tds-page-header-nav-item-background-color-active);
917
+
918
+ --tds-page-header-nav-item-color-disabled:var(--t-text-color-disabled);
919
+ --tds-page-header-nav-item-background-color-disabled:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 50%);
920
+ --tds-page-header-nav-item-border-color-disabled:var(--tds-page-header-nav-item-background-color-disabled);
921
+
922
+ --tds-page-header-nav-item-color-selected:var(--t-text-color);
923
+ --tds-page-header-nav-item-background-color-selected:var(--t-surface-color-canvas);
924
+ --tds-page-header-nav-item-border-color-selected:var(--tds-page-header-nav-item-background-color-selected);
925
+ --tds-page-header-nav-item-border-bottom-color-selected:var(--tds-page-header-nav-item-background-color-selected);
926
+ --tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning);
1137
927
  }
1138
928
 
1139
- .tds-number-stepper-button:last-of-type{
1140
- margin-inline-end:var(--tds-number-stepper-button-offset);
929
+ .tds-page-header--profile{
930
+ --tds-page-header-padding-y:20px;
1141
931
  }
1142
932
 
1143
- .tds-date-picker{
1144
- --tds-date-picker-button-offset:4px;
1145
- }
933
+ @supports (color: light-dark(#fff, #000)){
934
+ .tds-page-header{
935
+ --tds-page-header-nav-background-start:light-dark(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0));
936
+ --tds-page-header-nav-background-end:light-dark(rgba(0, 0, 0, .05), rgba(255, 255, 255, .1));
937
+ }
938
+ }
1146
939
 
1147
- .tds-date-picker--lg{
1148
- --tds-date-picker-button-offset:5px;
940
+ @media (min-width: 600px){
941
+ .tds-page-header{
942
+ --tds-page-header-background-color:var(--t-surface-color-canvas);
943
+ --tds-page-header-color:var(--t-text-color-secondary);
944
+ --tds-page-header-bottom-border-color:var(--t-border-color);
945
+ --tds-page-header-padding-x:var(--t-spacing-3);
946
+ --tds-page-header-headline-font-size:var(--t-font-size-3xl);
947
+ --tds-page-header-nav-gap:var(--t-spacing-half);
948
+ --tds-page-header-nav-background:transparent;
949
+ --tds-page-header-nav-item-padding-x:var(--t-spacing-2);
950
+ --tds-page-header-nav-item-border-width:1px;
951
+ --tds-page-header-nav-item-color:var(--t-text-color);
952
+ --tds-page-header-nav-item-background-color:var(--t-fill-color-neutral-070);
953
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-bottom-border-color);
954
+ --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-060);
955
+ --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-050);
956
+ --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
957
+ --tds-page-header-nav-item-border-color-selected:var(--t-border-color);
958
+ }
959
+ }
1149
960
  }
1150
961
 
1151
- .tds-date-picker-field[data-focus-within]:has(.tds-date-picker-button[data-focused]){
1152
- outline-color:transparent;
1153
- outline-offset:0;
1154
- border-color:var(--tds-field-border-color);
962
+ .tds-page-header{
963
+ display:flex;
964
+ flex-direction:column;
965
+ padding-top:var(--tds-page-header-padding-y);
966
+ color:var(--tds-page-header-color);
967
+ background:var(--tds-page-header-background-color);
968
+ border-bottom:1px solid var(--tds-page-header-bottom-border-color);
1155
969
  }
1156
970
 
1157
- .tds-date-picker-field:has(.tds-date-picker-input[data-readonly]) .tds-date-picker-button{
1158
- display:none;
1159
- }
971
+ .tds-page-header:not(.has-nav){
972
+ padding-bottom:var(--tds-page-header-padding-y);
973
+ }
1160
974
 
1161
- .tds-date-picker-input{
1162
- flex:1;
1163
- padding-block:var(--tds-field-padding-block);
1164
- padding-inline:var(--tds-field-padding-inline);
1165
- overflow:auto clip;
1166
- font-variant-numeric:tabular-nums;
1167
- text-wrap:nowrap;
1168
- scrollbar-width:none;
1169
- }
975
+ .tds-page-header.inactive{
976
+ background:var(--tds-page-header-background-color-inactive);
977
+ }
1170
978
 
1171
- .tds-date-picker-input:has( + .tds-date-picker-button){
1172
- padding-inline-end:0;
979
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
980
+ width:100%;
1173
981
  }
1174
982
 
1175
- .tds-date-picker-button{
1176
- flex-shrink:0;
1177
- align-self:center;
1178
- inline-size:calc(var(--tds-field-min-height) - (var(--tds-date-picker-button-offset) * 2));
1179
- block-size:calc(var(--tds-field-min-height) - (var(--tds-date-picker-button-offset) * 2));
1180
- padding:0;
1181
- margin-inline-end:var(--tds-date-picker-button-offset);
983
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
984
+ display:flex;
985
+ flex-flow:row wrap;
986
+ gap:var(--t-spacing-half) var(--t-spacing-1);
987
+ align-items:flex-start;
988
+ justify-content:flex-start;
989
+ min-width:0;
990
+ }
991
+
992
+ :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{
993
+ display:flex;
994
+ gap:var(--tds-page-header-nav-gap);
995
+ padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
996
+ margin:0 0 -1px;
997
+ overflow:auto;
998
+ list-style:none;
999
+ background:var(--tds-page-header-nav-background);
1000
+ }
1001
+
1002
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button){
1003
+ position:relative;
1004
+ display:inline-flex;
1005
+ padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
1006
+ font-size:var(--t-font-size-sm);
1007
+ line-height:22px;
1008
+ color:var(--tds-page-header-nav-item-color);
1009
+ white-space:nowrap;
1010
+ text-decoration:none;
1011
+ -webkit-appearance:none;
1012
+ -moz-appearance:none;
1013
+ appearance:none;
1014
+ cursor:pointer;
1015
+ outline-offset:-2px;
1016
+ background-color:var(--tds-page-header-nav-item-background-color);
1017
+ background-clip:padding-box;
1018
+ border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
1019
+ border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
1020
+ border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
1021
+ }
1022
+
1023
+ .selected:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)){
1024
+ --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-selected);
1025
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-selected);
1026
+ --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-selected);
1027
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-selected);
1028
+ }
1029
+
1030
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):hover{
1031
+ --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
1032
+ --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
1033
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
1034
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-hover);
1035
+ }
1036
+
1037
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):active{
1038
+ background-color:var(--tds-page-header-nav-item-background-color-active);
1039
+ border-color:var(--tds-page-header-nav-item-border-color-active);
1040
+ border-bottom-color:var(--tds-page-header-nav-item-background-color-active);
1041
+ }
1042
+
1043
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):disabled{
1044
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-disabled);
1045
+ color:var(--tds-page-header-nav-item-color-disabled);
1046
+ cursor:not-allowed;
1047
+ background-color:var(--tds-page-header-nav-item-background-color-disabled);
1048
+ opacity:1;
1049
+ }
1050
+
1051
+ @media (min-width: 600px){
1052
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected)::after{
1053
+ position:absolute;
1054
+ inset:auto -1px -1px;
1055
+ height:1px;
1056
+ pointer-events:none;
1057
+ content:"";
1058
+ background-color:var(--tds-page-header-bottom-border-color);
1059
+ }
1060
+ }
1061
+
1062
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
1063
+ position:relative;
1064
+ }
1065
+
1066
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator)) :is(a,button){
1067
+ -webkit-mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
1068
+ mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
1069
+ }
1070
+
1071
+ :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{
1072
+ position:absolute;
1073
+ top:-5px;
1074
+ right:-2px;
1075
+ width:10px;
1076
+ height:10px;
1077
+ content:"";
1078
+ background:var(--tds-page-header-nav-item-indicator-color);
1079
+ border-radius:50%;
1080
+ }
1081
+
1082
+ @media (prefers-reduced-motion: no-preference){
1083
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
1084
+ animation:indicator-pulse 1.25s ease infinite;
1085
+ }
1086
+ }
1087
+
1088
+ .tds-page-header__title-bar{
1089
+ display:flex;
1090
+ flex-direction:column;
1091
+ gap:var(--t-spacing-2) var(--t-spacing-1);
1092
+ align-items:flex-start;
1093
+ justify-content:space-between;
1094
+ padding:0 var(--tds-page-header-padding-x);
1182
1095
  }
1183
1096
 
1184
- .tds-date-picker-popover{
1185
- --tds-date-picker-popover-font-size:var(--t-font-size-md);
1186
- --tds-date-picker-popover-padding:var(--t-spacing-1-half);
1187
- --tds-date-picker-popover-background-color:var(--t-surface-color-card);
1188
- --tds-date-picker-popover-shadow:hsl(0, 0%, 0%, .05) 0 10px 15px -3px, hsl(0, 0%, 0%, .05) 0 4px 6px -4px;
1189
- --tds-date-picker-popover-interactive-timing-function:var(--t-ease-in-out);
1190
- --tds-date-picker-popover-interactive-duration:var(--t-duration-200);
1191
- --tds-date-picker-popover-interactive-property:color, background-color, border-color;
1097
+ .tds-page-header--profile > .tds-page-header__title-bar{
1098
+ align-items:center;
1099
+ }
1192
1100
 
1193
- position:relative;
1194
- overflow:hidden;
1195
- background-color:var(--tds-date-picker-popover-background-color);
1196
- border:var(--t-border-width) solid var(--t-border-color);
1197
- border-radius:var(--t-border-radius);
1198
- box-shadow:var(--tds-date-picker-popover-shadow);
1101
+ .tds-page-header__primary{
1102
+ width:100%;
1199
1103
  }
1200
1104
 
1201
- .tds-date-picker-popover[data-entering]{
1202
- animation:tds-date-picker-popover var(--t-duration-300) var(--t-ease-out);
1105
+ .tds-page-header__primary h1{
1106
+ margin:0;
1107
+ font-size:var(--tds-page-header-headline-font-size);
1108
+ font-weight:var(--t-font-weight-normal);
1109
+ line-height:32px;
1110
+ color:var(--tds-page-header-headline-color);
1111
+ overflow-wrap:break-word;
1203
1112
  }
1204
1113
 
1205
- .tds-date-picker-popover[data-exiting]{
1206
- animation:tds-date-picker-popover var(--t-duration-200) var(--t-ease-in) reverse;
1114
+ @media (min-width: 960px){
1115
+ .tds-page-header__primary{
1116
+ flex:1 1 max-content;
1117
+ width:auto;
1118
+ min-width:0;
1119
+ max-width:100%;
1207
1120
  }
1208
1121
 
1209
- .tds-date-picker-popover[data-entering],.tds-date-picker-popover[data-exiting]{
1210
- will-change:opacity, transform;
1122
+ .tds-page-header__title-bar,
1123
+ .tds-page-header--profile .tds-page-header__title-bar{
1124
+ flex-flow:row nowrap;
1125
+ row-gap:12px;
1126
+ align-items:flex-start;
1211
1127
  }
1128
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
1129
+ width:auto;
1130
+ }
1212
1131
 
1213
- @keyframes tds-date-picker-popover{
1214
- from{
1132
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
1133
+ justify-content:flex-end;
1134
+ }
1135
+ }
1136
+
1137
+ .tds-page-header-phone,
1138
+ .tds-page-header-email{
1139
+ color:var(--tds-page-header-color);
1140
+ white-space:nowrap;
1141
+ }
1142
+
1143
+ .tds-page-header-email{
1144
+ max-width:100%;
1145
+ overflow:hidden;
1146
+ text-overflow:ellipsis;
1147
+ }
1148
+
1149
+ @keyframes indicator-pulse{
1150
+ 0%{
1151
+ opacity:.3;
1152
+ transform:scale(.9);
1153
+ }
1154
+
1155
+ 100%{
1215
1156
  opacity:0;
1216
- transform:translateY(-8px);
1157
+ transform:scale(1.75);
1217
1158
  }
1218
1159
  }
1219
1160
 
1220
- @media (prefers-reduced-motion: reduce){
1221
- .tds-date-picker-popover[data-entering],.tds-date-picker-popover[data-exiting]{
1222
- animation:none;
1223
- }
1161
+ .tds-input:has(textarea){
1162
+ --tds-input-padding-block:6px;
1163
+ --tds-input-resizer-size:var(--t-element-size-sm);
1164
+ --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");
1224
1165
  }
1225
1166
 
1226
- .tds-date-picker-overlay{
1227
- position:absolute;
1228
- inset:0;
1229
- z-index:1;
1230
- display:flex;
1231
- background-color:var(--tds-date-picker-popover-background-color);
1167
+ @supports (x: attr(x type(*))){
1168
+
1169
+ .tds-input textarea{
1170
+ --tds-input-min-height:calc((attr(rows type(<number>), 3) * 1lh) + (var(--tds-input-padding-block) * 2) + 2px);
1232
1171
  }
1172
+ }
1233
1173
 
1234
- .tds-date-picker-overlay-list{
1235
- display:grid;
1236
- flex:1;
1237
- grid-template-columns:repeat(3, 1fr);
1238
- gap:var(--t-spacing-half);
1239
- padding-inline:var(--tds-date-picker-popover-padding);
1240
- outline:0;
1241
- scrollbar-color:var(--t-fill-color-transparency-dark-030) transparent;
1242
- scrollbar-width:thin;
1174
+ .tds-input.tds-textarea--resize-vertical textarea{
1175
+ resize:vertical;
1176
+ }
1177
+
1178
+ .tds-input.tds-textarea--resize-none textarea{
1179
+ resize:none;
1180
+ }
1181
+
1182
+ .tds-input.tds-textarea--resize-auto textarea{
1183
+ resize:vertical;
1184
+ }
1185
+
1186
+ @supports (field-sizing: content){
1187
+ .tds-input.tds-textarea--resize-auto textarea{
1188
+ field-sizing:content;
1189
+ resize:none;
1190
+ }
1191
+ }
1192
+
1193
+ .tds-input textarea{
1194
+ --tds-input-scrollbar-thumb-color-default:var(--t-fill-color-neutral-040);
1195
+ --tds-input-scrollbar-thumb-color-hidden:transparent;
1196
+ --tds-input-scrollbar-thumb-color-hover:var(--t-fill-color-neutral-030);
1197
+ --tds-input-scrollbar-thumb-color-thumb-hover:var(--t-fill-color-neutral-020);
1198
+ --tds-input-scrollbar-thumb-color-thumb-active:var(--t-fill-color-neutral-010);
1199
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-default);
1200
+ --tds-input-scrollbar-surface-color:rgba(0, 0, 0, 0);
1201
+ --tds-input-scrollbar-thumb-border-radius:999px;
1202
+ --tds-input-scrollbar-thumb-border-width:3px;
1203
+ --tds-input-scrollbar-track-margin-block:.125rem;
1204
+ scrollbar-color:initial;
1205
+ transition-timing-function:var(--t-ease-in-out);
1206
+ transition-duration:var(--t-duration-200);
1207
+ transition-property:var(--tds-input-transition-property), --tds-input-scrollbar-thumb-color;
1243
1208
  }
1244
1209
 
1245
- .tds-date-picker-overlay--month .tds-date-picker-overlay-list{
1246
- grid-template-rows:repeat(4, 1fr);
1247
- padding-bottom:var(--tds-date-picker-popover-padding);
1248
- }
1210
+ @media (pointer: fine){
1211
+ :is(.tds-input textarea)::-webkit-scrollbar{
1212
+ width:12px;
1213
+ height:12px;
1214
+ cursor:default;
1215
+ }
1216
+
1217
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb{
1218
+ cursor:default;
1219
+ background:var(--tds-input-scrollbar-thumb-color);
1220
+ background-clip:content-box;
1221
+ border:var(--tds-input-scrollbar-thumb-border-width) solid var(--tds-input-scrollbar-surface-color);
1222
+ border-radius:var(--tds-input-scrollbar-thumb-border-radius);
1223
+ }
1224
+
1225
+ :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1226
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
1227
+ }
1228
+
1229
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
1230
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
1231
+ }
1232
+
1233
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
1234
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
1235
+ }
1249
1236
 
1250
- .tds-date-picker-overlay--year .tds-date-picker-overlay-list{
1251
- grid-auto-rows:var(--t-container-size-xl);
1252
- padding-right:var(--t-spacing-1);
1253
- overflow-y:auto;
1254
- scroll-padding-block:calc(var(--t-focus-ring-width) + var(--t-focus-ring-offset));
1255
- }
1237
+ :is(.tds-input textarea)::-webkit-scrollbar-corner{
1238
+ background:var(--tds-input-scrollbar-surface-color);
1239
+ }
1256
1240
 
1257
- .tds-date-picker-overlay-cell{
1258
- display:flex;
1259
- align-items:center;
1260
- justify-content:center;
1261
- font-family:inherit;
1262
- font-size:var(--tds-date-picker-popover-font-size);
1263
- color:var(--t-text-color);
1264
- cursor:pointer;
1265
- outline:0;
1266
- background-color:transparent;
1267
- border:0;
1268
- border-radius:var(--t-border-radius-md);
1269
- transition-timing-function:var(--tds-date-picker-popover-interactive-timing-function);
1270
- transition-duration:var(--t-duration-100);
1271
- transition-property:var(--tds-date-picker-popover-interactive-property);
1272
- }
1241
+ :is(.tds-input textarea)::-webkit-resizer{
1242
+ background:var(--tds-input-resizer-icon) no-repeat;
1243
+ background-position:right bottom;
1244
+ background-size:var(--tds-input-resizer-size) var(--tds-input-resizer-size);
1245
+ }
1273
1246
 
1274
- .tds-date-picker-overlay-cell[data-hovered]{
1275
- background-color:var(--t-fill-color-button-neutral-outline-hover);
1276
- }
1247
+ :is(.tds-input textarea)::-webkit-scrollbar-track{
1248
+ margin-block:var(--tds-input-scrollbar-track-margin-block);
1249
+ cursor:default;
1250
+ }
1277
1251
 
1278
- .tds-date-picker-overlay-cell[data-pressed]{
1279
- background-color:var(--t-fill-color-button-neutral-outline-active);
1280
- }
1252
+ @supports (-moz-appearance: none){
1253
+ :is(.tds-input textarea){
1254
+ scrollbar-color:var(--tds-input-scrollbar-thumb-color-default) var(--tds-input-scrollbar-surface-color);
1255
+ scrollbar-width:thin;
1256
+ }
1281
1257
 
1282
- .tds-date-picker-overlay-cell[data-selected]{
1283
- font-weight:var(--t-font-weight-semibold);
1284
- color:var(--t-text-color-inverted);
1285
- background-color:var(--t-fill-color-interaction);
1258
+ @media (hover){
1259
+ :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1260
+ scrollbar-color:var(--tds-input-scrollbar-thumb-color-hover) var(--tds-input-scrollbar-surface-color);
1261
+ }
1262
+ }
1263
+ }
1286
1264
  }
1287
1265
 
1288
- .tds-date-picker-overlay-cell[data-focus-visible]{
1289
- outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
1290
- }
1266
+ .tds-radio{
1267
+ --tds-radio-font-size:var(--t-font-size-md);
1268
+ --tds-radio-cursor:pointer;
1269
+ --tds-radio-line-height:1.4;
1270
+ --tds-radio-transition-property:border-width;
1291
1271
 
1292
- .tds-date-picker-overlay-cell[data-selected][data-focus-visible]{
1293
- outline-offset:var(--t-focus-ring-offset);
1294
- }
1272
+ --tds-radio-input-size:var(--t-element-size-md);
1273
+ --tds-radio-input-border-radius:var(--t-border-radius-round);
1274
+ --tds-radio-input-border-color:var(--t-form-border-color);
1275
+ --tds-radio-input-border-width:var(--t-form-border-width);
1276
+ --tds-radio-input-background-color:var(--t-form-background-color);
1295
1277
 
1296
- .tds-date-picker-calendar-heading{
1297
- display:flex;
1298
- flex:1;
1299
- gap:var(--t-spacing-1);
1300
- align-items:center;
1301
- justify-content:flex-start;
1302
- padding-inline-start:4px;
1303
- }
1278
+ --tds-radio-label-color:var(--t-form-color);
1279
+
1280
+ --tds-radio-description-font-size:var(--t-font-size-sm);
1281
+ --tds-radio-description-line-height:1.35;
1282
+ --tds-radio-description-color:var(--t-text-color-secondary);
1304
1283
 
1305
- .tds-date-picker-calendar-overlay-trigger{
1306
- --_background-color:transparent;
1307
1284
  position:relative;
1308
- padding:0;
1309
- font-family:inherit;
1310
- font-size:var(--tds-date-picker-popover-font-size);
1311
- font-weight:var(--t-font-weight-semibold);
1312
- font-feature-settings:"ss01", "ss02";
1313
- color:var(--t-text-color);
1314
- cursor:pointer;
1315
- outline:0;
1316
- background-color:transparent;
1317
- border:0;
1318
- border-radius:var(--t-border-radius-md);
1319
- isolation:isolate;
1320
- transition-timing-function:var(--tds-date-picker-popover-interactive-timing-function);
1321
- transition-duration:var(--tds-date-picker-popover-interactive-duration);
1322
- transition-property:var(--tds-date-picker-popover-interactive-property);
1285
+ display:inline-grid;
1286
+ grid-template-columns:auto;
1287
+ grid-auto-columns:1fr;
1288
+ gap:var(--t-spacing-fourth) 0;
1289
+ line-height:var(--tds-radio-line-height);
1290
+ -webkit-user-select:none;
1291
+ -moz-user-select:none;
1292
+ user-select:none;
1323
1293
  }
1324
1294
 
1325
- .tds-date-picker-calendar-overlay-trigger::before{
1326
- position:absolute;
1327
- inset:calc(var(--t-spacing-half) * -1);
1328
- z-index:-1;
1329
- pointer-events:inherit;
1330
- content:"";
1331
- background-color:var(--_background-color);
1332
- border-radius:inherit;
1295
+ .tds-radio label{
1296
+ grid-area:1 / 2;
1297
+ padding-inline-start:var(--t-spacing-1);
1298
+ font-size:var(--tds-radio-font-size);
1299
+ font-weight:var(--t-font-weight-normal);
1300
+ color:var(--tds-radio-label-color);
1301
+ cursor:var(--tds-radio-cursor);
1333
1302
  }
1334
1303
 
1335
- .tds-date-picker-calendar-overlay-trigger[data-hovered]{
1336
- --_background-color:var(--t-fill-color-button-neutral-outline-hover);
1304
+ .tds-radio input[type="radio"]{
1305
+ position:relative;
1306
+ width:1em;
1307
+ height:1em;
1308
+ margin:calc((1lh - 1em) / 2) 0 0;
1309
+ font-size:var(--tds-radio-font-size);
1310
+ line-height:inherit;
1311
+ -webkit-appearance:none;
1312
+ -moz-appearance:none;
1313
+ appearance:none;
1314
+ cursor:var(--tds-radio-cursor);
1315
+ background-color:var(--tds-radio-input-background-color);
1316
+ border:var(--tds-radio-input-border-width) solid var(--tds-radio-input-border-color);
1317
+ border-radius:var(--tds-radio-input-border-radius);
1318
+ transition-timing-function:var(--t-ease-in-out);
1319
+ transition-duration:var(--t-duration-200);
1320
+ transition-property:var(--tds-radio-transition-property);
1337
1321
  }
1338
1322
 
1339
- .tds-date-picker-calendar-overlay-trigger[data-pressed]{
1340
- --_background-color:var(--t-fill-color-button-neutral-outline-active);
1341
- }
1323
+ :is(.tds-radio input[type="radio"]):hover:not(:disabled){
1324
+ --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
1325
+ --tds-radio-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
1326
+ }
1342
1327
 
1343
- .tds-date-picker-calendar-overlay-trigger[data-focus-visible]{
1344
- outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
1345
- outline-offset:var(--t-focus-ring-offset);
1346
- }
1328
+ :is(.tds-radio input[type="radio"]):focus-visible{
1329
+ outline:var(--t-focus-ring-outline);
1330
+ outline-offset:var(--t-focus-ring-offset);
1331
+ }
1347
1332
 
1348
- .tds-date-picker-calendar{
1349
- inline-size:-moz-fit-content;
1350
- inline-size:fit-content;
1351
- font-size:var(--tds-date-picker-popover-font-size);
1352
- }
1333
+ :is(.tds-radio input[type="radio"]):disabled{
1334
+ pointer-events:none;
1335
+ }
1353
1336
 
1354
- .tds-date-picker-calendar-body{
1355
- position:relative;
1356
- padding:var(--tds-date-picker-popover-padding);
1357
- padding-block-start:0;
1358
- }
1337
+ @media (prefers-reduced-motion: reduce){
1359
1338
 
1360
- .tds-date-picker-calendar-header{
1361
- display:flex;
1362
- align-items:center;
1363
- justify-content:space-between;
1364
- padding:var(--tds-date-picker-popover-padding);
1365
- }
1339
+ .tds-radio input[type="radio"]{
1340
+ --tds-radio-transition-property:none;
1341
+ }
1342
+ }
1366
1343
 
1367
- .tds-date-picker-calendar-title{
1368
- padding:var(--t-spacing-half) var(--t-spacing-1);
1369
- font-size:var(--tds-date-picker-popover-font-size);
1370
- font-weight:var(--t-font-weight-semibold);
1371
- }
1344
+ .tds-radio:has(input:checked){
1345
+ --tds-radio-input-background-color:var(--t-form-background-color);
1346
+ --tds-radio-input-border-color:var(--t-border-color-control-info);
1347
+ --tds-radio-input-border-width:4px;
1348
+ }
1372
1349
 
1373
- .tds-date-picker-calendar-nav{
1374
- display:flex;
1375
- align-items:center;
1376
- justify-content:center;
1377
- padding:var(--t-spacing-half);
1378
- font-size:.875em;
1379
- color:var(--t-text-color);
1380
- cursor:pointer;
1381
- outline:0;
1382
- background-color:transparent;
1383
- border:0;
1384
- border-radius:var(--t-border-radius-md);
1385
- transition-timing-function:var(--tds-date-picker-popover-interactive-timing-function);
1386
- transition-duration:var(--tds-date-picker-popover-interactive-duration);
1387
- transition-property:var(--tds-date-picker-popover-interactive-property);
1388
- }
1350
+ .tds-radio:has(input:checked) input:hover:not(:disabled){
1351
+ --tds-radio-input-background-color:var(--t-form-background-color);
1352
+ --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
1353
+ }
1389
1354
 
1390
- .tds-date-picker-calendar-nav[data-hovered]{
1391
- background-color:var(--t-fill-color-button-neutral-outline-hover);
1355
+ .tds-radio:has(input:user-invalid){
1356
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
1392
1357
  }
1393
1358
 
1394
- .tds-date-picker-calendar-nav[data-pressed]{
1395
- background-color:var(--t-fill-color-button-neutral-outline-active);
1396
- }
1359
+ .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
1360
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1361
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
1362
+ }
1397
1363
 
1398
- .tds-date-picker-calendar-nav[data-focus-visible]{
1399
- outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
1400
- outline-offset:var(--t-focus-ring-offset);
1401
- }
1364
+ .tds-radio:has(input:disabled){
1365
+ --tds-radio-input-background-color:var(--t-form-background-color-disabled);
1366
+ --tds-radio-input-border-color:var(--t-form-border-color-disabled);
1402
1367
 
1403
- .tds-date-picker-calendar-nav[data-disabled]{
1404
- color:var(--t-text-color-disabled);
1405
- cursor:not-allowed;
1368
+ --tds-radio-label-color:var(--t-form-color-disabled);
1369
+ --tds-radio-description-color:var(--t-form-color-disabled);
1370
+ --tds-radio-cursor:not-allowed;
1406
1371
  }
1407
1372
 
1408
- .tds-date-picker-calendar-grid{
1409
- font-feature-settings:"ss01", "ss02";
1410
- border-collapse:collapse;
1373
+ .tds-radio:has(input:disabled) input:checked{
1374
+ --tds-radio-input-background-color:var(--t-form-background-color);
1375
+ --tds-radio-input-border-color:var(--t-form-border-color-disabled);
1376
+ }
1377
+
1378
+ .tds-radio-description{
1379
+ display:flex;
1380
+ grid-area:2 / 2;
1381
+ gap:var(--t-spacing-half);
1382
+ align-items:flex-start;
1383
+ padding-inline-start:var(--t-spacing-1);
1384
+ margin:0;
1385
+ font-size:var(--tds-radio-description-font-size);
1386
+ line-height:var(--tds-radio-description-line-height);
1387
+ color:var(--tds-radio-description-color);
1388
+ cursor:text;
1389
+ }
1390
+
1391
+ .tds-radio--sm{
1392
+ --tds-radio-line-height:1.35;
1393
+ --tds-radio-input-size:var(--t-element-size-sm);
1394
+ --tds-radio-font-size:var(--t-font-size-sm);
1395
+ --tds-radio-description-font-size:var(--t-font-size-xs);
1396
+ --tds-radio-description-line-height:1.3;
1411
1397
  }
1412
1398
 
1413
- .tds-date-picker-calendar-grid :where(thead,tbody,tr,td,th){
1414
- padding:0;
1415
- border:0;
1416
- }
1399
+ .tds-toggle-switch{
1400
+ --tds-toggle-switch-font-size:var(--t-font-size-md);
1401
+ --tds-toggle-switch-cursor:pointer;
1402
+ --tds-toggle-switch-display:inline-grid;
1403
+ --tds-toggle-switch-line-height:1.4;
1417
1404
 
1418
- .tds-date-picker-calendar-header-cell{
1419
- padding-block-end:var(--t-spacing-1);
1420
- font-size:.875em;
1421
- font-weight:var(--t-font-weight-medium);
1422
- color:var(--t-text-color-secondary);
1423
- text-align:center;
1424
- -webkit-user-select:none;
1425
- -moz-user-select:none;
1426
- user-select:none;
1427
- }
1405
+ --tds-toggle-switch-label-color:var(--t-form-color);
1428
1406
 
1429
- .tds-date-picker-calendar-cell-button{
1407
+ --tds-toggle-switch-track-width:var(--t-container-size-md);
1408
+ --tds-toggle-switch-track-outline:none;
1409
+ --tds-toggle-switch-track-height:var(--t-container-size-xs);
1410
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color);
1411
+ --tds-toggle-switch-track-transition:background-color var(--t-duration-100) var(--t-ease-in-out);
1412
+
1413
+ --tds-toggle-switch-thumb-size:var(--t-element-size-md);
1414
+ --tds-toggle-switch-thumb-transform:translateX(0);
1415
+ --tds-toggle-switch-thumb-transition:transform var(--t-duration-200) var(--t-ease-in-out);
1416
+
1417
+ --tds-toggle-switch-description-font-size:var(--t-font-size-sm);
1418
+ --tds-toggle-switch-description-line-height:1.35;
1419
+ --tds-toggle-switch-description-color:var(--t-text-color-secondary);
1430
1420
  position:relative;
1431
- display:flex;
1432
- align-items:center;
1433
- justify-content:center;
1434
- inline-size:2.25em;
1435
- block-size:2.25em;
1436
- color:var(--t-text-color);
1437
- cursor:pointer;
1421
+
1422
+ display:var(--tds-toggle-switch-display);
1423
+ grid-template-columns:auto;
1424
+ grid-auto-columns:1fr;
1425
+ gap:var(--t-spacing-fourth) 0;
1438
1426
  -webkit-user-select:none;
1439
1427
  -moz-user-select:none;
1440
1428
  user-select:none;
1441
- outline:0;
1442
1429
  }
1443
1430
 
1444
- .tds-date-picker-calendar-cell-button::before{
1431
+ .tds-toggle-switch input[type="checkbox"]{
1445
1432
  position:absolute;
1446
- inset:0;
1447
- z-index:-1;
1448
- content:"";
1449
- background-color:var(--_background-color);
1450
- border-radius:50%;
1433
+ width:var(--tds-toggle-switch-track-width);
1434
+ height:var(--tds-toggle-switch-track-height);
1435
+ margin:0;
1436
+ -webkit-appearance:none;
1437
+ -moz-appearance:none;
1438
+ appearance:none;
1439
+ cursor:var(--tds-toggle-switch-cursor);
1440
+ outline:var(--tds-toggle-switch-track-outline);
1441
+ outline-offset:var(--t-focus-ring-offset);
1442
+ background-color:transparent;
1443
+ border:0;
1444
+ border-radius:var(--t-border-radius-round);
1451
1445
  }
1452
1446
 
1453
- .tds-date-picker-calendar-cell-button[data-today]::before{
1454
- box-shadow:inset 0 0 0 1.5px var(--t-border-color);
1447
+ :is(.tds-toggle-switch input[type="checkbox"]):focus-visible{
1448
+ --tds-toggle-switch-track-outline:var(--t-focus-ring-outline);
1455
1449
  }
1456
1450
 
1457
- .tds-date-picker-calendar-cell-button[data-outside-month]{
1458
- display:none;
1451
+ .tds-toggle-switch label{
1452
+ display:inline-flex;
1453
+ grid-area:1 / 2;
1454
+ padding-inline-start:var(--t-spacing-1);
1455
+ margin-top:-.09375em;
1456
+ font-size:var(--tds-toggle-switch-font-size);
1457
+ font-weight:var(--t-font-weight-normal);
1458
+ line-height:var(--tds-toggle-switch-line-height);
1459
+ color:var(--tds-toggle-switch-label-color);
1460
+ cursor:var(--tds-toggle-switch-cursor);
1459
1461
  }
1460
1462
 
1461
- .tds-date-picker-calendar-cell-button[data-hovered]{
1462
- --_background-color:var(--t-fill-color-button-neutral-outline-hover);
1463
+ .tds-toggle-switch:not(:has(input:disabled)):has(input:hover){
1464
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-hover);
1463
1465
  }
1464
1466
 
1465
- .tds-date-picker-calendar-cell-button[data-pressed]{
1466
- --_background-color:var(--t-fill-color-button-neutral-outline-active);
1467
+ .tds-toggle-switch:has(input:checked){
1468
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on);
1469
+ --tds-toggle-switch-thumb-transform:translateX(calc(var(--tds-toggle-switch-track-width) - var(--tds-toggle-switch-thumb-size) - var(--t-spacing-half)));
1467
1470
  }
1468
1471
 
1469
- .tds-date-picker-calendar-cell-button[data-selected]{
1470
- --_background-color:var(--t-fill-color-interaction);
1471
- font-weight:var(--t-font-weight-semibold);
1472
- color:var(--t-text-color-inverted);
1473
- border-color:transparent;
1474
- }
1472
+ .tds-toggle-switch:has(input:checked):not(:has(input:disabled)):has(input:hover){
1473
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on-hover);
1474
+ }
1475
1475
 
1476
- .tds-date-picker-calendar-cell-button[data-unavailable]{
1477
- color:var(--t-text-color-disabled);
1478
- text-decoration:line-through;
1479
- cursor:not-allowed;
1476
+ .tds-toggle-switch:has(input:disabled){
1477
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-disabled);
1478
+ --tds-toggle-switch-label-color:var(--t-form-color-disabled);
1479
+ --tds-toggle-switch-description-color:var(--t-form-color-disabled);
1480
+ --tds-toggle-switch-cursor:not-allowed;
1480
1481
  }
1481
1482
 
1482
- .tds-date-picker-calendar-cell-button[data-disabled]{
1483
- color:var(--t-text-color-disabled);
1484
- }
1483
+ .tds-toggle-switch-track{
1484
+ position:relative;
1485
+ flex-shrink:0;
1486
+ width:var(--tds-toggle-switch-track-width);
1487
+ height:var(--tds-toggle-switch-track-height);
1488
+ background-color:var(--tds-toggle-switch-track-background-color);
1489
+ border-radius:var(--t-border-radius-round);
1490
+ transition:var(--tds-toggle-switch-track-transition);
1491
+ }
1485
1492
 
1486
- .tds-date-picker-calendar-cell-button[data-focus-visible]{
1487
- outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
1488
- outline-offset:-2px;
1493
+ .tds-toggle-switch-track::before{
1494
+ position:absolute;
1495
+ top:var(--t-spacing-fourth);
1496
+ left:var(--t-spacing-fourth);
1497
+ width:var(--tds-toggle-switch-thumb-size);
1498
+ height:var(--tds-toggle-switch-thumb-size);
1499
+ content:"";
1500
+ background-color:#fff;
1501
+ border-radius:var(--t-border-radius-round);
1502
+ transform:var(--tds-toggle-switch-thumb-transform);
1503
+ transition:var(--tds-toggle-switch-thumb-transition);
1489
1504
  }
1490
1505
 
1491
- .tds-date-picker-calendar-cell-button[data-focus-visible][data-selected]{
1492
- outline-offset:var(--t-focus-ring-offset);
1493
- }
1506
+ @media (prefers-reduced-motion: reduce){
1494
1507
 
1495
- .tds-date-picker-popover--lg{
1496
- --tds-date-picker-popover-font-size:var(--t-font-size-lg);
1508
+ .tds-toggle-switch-track{
1509
+ --tds-toggle-switch-track-transition:none;
1510
+ --tds-toggle-switch-thumb-transition:none;
1497
1511
  }
1512
+ }
1498
1513
 
1514
+ .tds-toggle-switch-description{
1515
+ display:flex;
1516
+ grid-area:2 / 2;
1517
+ align-items:flex-start;
1518
+ padding-inline-start:var(--t-spacing-1);
1519
+ margin:0;
1520
+ font-size:var(--tds-toggle-switch-description-font-size);
1521
+ line-height:var(--tds-toggle-switch-description-line-height);
1522
+ color:var(--tds-toggle-switch-description-color);
1523
+ cursor:text;
1524
+ }
1499
1525
 
1500
- :is(.tds-input input)::-webkit-search-decoration,:is(.tds-input input)::-webkit-search-cancel-button,:is(.tds-input input)::-webkit-search-results-button,:is(.tds-input input)::-webkit-search-results-decoration{
1501
- -webkit-appearance:none;
1502
- appearance:none;
1503
- }
1504
-
1505
- [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
1506
- inline-size:1em;
1507
- block-size:2em;
1508
- }
1509
-
1510
- @supports (field-sizing: content){
1511
- .tds-input--auto-width{
1512
- inline-size:-moz-fit-content;
1513
- inline-size:fit-content;
1514
- min-inline-size:min(100%, 122px);
1515
- }
1526
+ .tds-toggle-switch--sm{
1527
+ --tds-toggle-switch-font-size:var(--t-font-size-sm);
1528
+ --tds-toggle-switch-line-height:1.35;
1529
+ --tds-toggle-switch-track-height:var(--t-element-size-lg);
1530
+ --tds-toggle-switch-thumb-size:var(--t-element-size-sm);
1531
+ --tds-toggle-switch-description-font-size:var(--t-font-size-xs);
1532
+ --tds-toggle-switch-description-line-height:1.3;
1533
+ }
1516
1534
 
1517
- .tds-input--auto-width input{
1518
- field-sizing:content;
1519
- inline-size:auto;
1520
- }
1535
+ .tds-toggle-switch--hide-label{
1536
+ --tds-toggle-switch-display:inline-flex;
1521
1537
  }
1522
1538
 
1523
1539
  .tds-radio-group{
@@ -1603,389 +1619,451 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1603
1619
  --tds-radio-group-description-line-height:1.3;
1604
1620
  }
1605
1621
 
1606
- .tds-input:has(textarea){
1607
- --tds-input-padding-block:6px;
1608
- --tds-input-resizer-size:var(--t-element-size-sm);
1609
- --tds-input-resizer-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cg fill='none' stroke='%236f7784' stroke-linecap='round' stroke-width='1.25'%3E%3Cpath d='M5.5 13l7.5-7.5'/%3E%3Cpath d='M9 13l4-4'/%3E%3C/g%3E%3C/svg%3E");
1622
+ .tds-time-field-input{
1623
+ --tds-field-date-segment-padding-inline:1px;
1624
+ padding-block:var(--tds-field-padding-block);
1625
+ padding-inline:var(--tds-field-padding-inline);
1626
+ font-variant-numeric:tabular-nums;
1627
+ }
1628
+
1629
+ .tds-select{
1630
+ --tds-select-border-color:var(--t-form-border-color);
1631
+ --tds-select-border-color-hover:var(--t-form-border-color-hover);
1632
+ --tds-select-border-color-active:var(--t-form-border-color-hover);
1633
+ --tds-select-background-color:var(--t-form-background-color);
1634
+ --tds-select-color:var(--t-form-color);
1635
+ --tds-select-placeholder-color:var(--t-form-placeholder-color);
1636
+ --tds-select-font-size:var(--t-font-size-md);
1637
+ --tds-select-min-height:var(--t-container-size-md);
1638
+ --tds-select-padding-block:0;
1639
+ --tds-select-description-color:var(--t-text-color-secondary);
1640
+ --tds-select-description-invalid-icon-display:none;
1641
+ --tds-select-transition-property:background-color, border-color, outline-color, outline-offset;
1642
+ --tds-select-background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTEzLDZsLTUsNWwtNSwtNXoiIGZpbGw9IiMzRDNEM0QiLz48L3N2Zz4=");
1643
+ --tds-select-caret-size:1em;
1644
+ --tds-select-caret-inline-offset:.75em;
1645
+ --tds-select-caret-transition:transform var(--t-duration-300) var(--t-ease-in-out);
1646
+
1647
+ --tds-select-dropdown-background-color:var(--t-surface-color-card);
1648
+ --tds-select-dropdown-border:1px solid var(--t-border-color);
1649
+ --tds-select-dropdown-padding:var(--t-spacing-1);
1650
+ --tds-select-dropdown-margin-block:5px;
1651
+ --tds-select-dropdown-scrollbar-color:#0004 #0000;
1652
+ --tds-select-dropdown-scrollbar-width:thin;
1653
+ --tds-select-dropdown-border-radius:var(--t-border-radius);
1654
+ --tds-select-dropdown-box-shadow:hsl(0, 0%, 0%, .05) 0 10px 15px -3px, hsl(0, 0%, 0%, .05) 0 4px 6px -4px;
1655
+ --tds-select-dropdown-scroll-behavior:smooth;
1656
+ --tds-select-dropdown-transition:opacity var(--t-duration-300) var(--t-ease-out), translate var(--t-duration-300) var(--t-ease-out), display var(--t-duration-300) allow-discrete, overlay var(--t-duration-300) allow-discrete;
1657
+ --tds-select-dropdown-closed-opacity:0;
1658
+ --tds-select-dropdown-open-opacity:1;
1659
+ --tds-select-dropdown-closed-translate:0 -8px;
1660
+ --tds-select-dropdown-open-translate:0 0;
1661
+
1662
+ --tds-select-option-gap:var(--t-spacing-1);
1663
+ --tds-select-option-padding-block:var(--t-spacing-1);
1664
+ --tds-select-option-padding-inline:var(--t-spacing-2) var(--t-spacing-1);
1665
+ --tds-select-option-font-size:1rem;
1666
+ --tds-select-option-color:var(--t-text-color);
1667
+ --tds-select-option-background-hover:var(--t-fill-color-neutral-070);
1668
+ --tds-select-option-background-active:var(--t-fill-color-button-interaction-ghost-active);
1669
+ --tds-select-option-border-radius:var(--t-border-radius);
1670
+
1671
+ --tds-select-group-label-padding-block-start:var(--t-spacing-2);
1672
+ --tds-select-group-label-padding-block:var(--tds-select-group-label-padding-block-start) var(--t-spacing-1);
1673
+ --tds-select-group-label-padding-inline:var(--t-spacing-1);
1674
+ --tds-select-group-label-font-size:var(--t-font-size-sm);
1675
+ --tds-select-group-label-font-weight:var(--t-font-weight-semibold);
1676
+ --tds-select-group-label-letter-spacing:0;
1677
+ --tds-select-group-label-color:var(--t-text-color-secondary);
1678
+ --tds-select-group-label-color-stuck:var(--t-text-color-headline);
1679
+ --tds-select-group-label-background:var(--tds-select-dropdown-background-color);
1680
+ --tds-select-group-label-transition:color var(--t-duration-200) var(--t-ease-in-out);
1681
+
1682
+ position:relative;
1683
+ display:flex;
1684
+ flex-direction:column;
1685
+ gap:var(--t-spacing-half);
1610
1686
  }
1611
1687
 
1612
- @supports (x: attr(x type(*))){
1688
+ .tds-select :is(label,.tds-select-label){
1689
+ font-size:var(--t-font-size-md);
1690
+ font-weight:var(--t-font-weight-normal);
1691
+ color:var(--t-text-color);
1692
+ cursor:default;
1693
+ }
1613
1694
 
1614
- .tds-input textarea{
1615
- --tds-input-min-height:calc((attr(rows type(<number>), 3) * 1lh) + (var(--tds-input-padding-block) * 2) + 2px);
1616
- }
1695
+ .tds-select :is(select,button){
1696
+ position:relative;
1697
+ place-items:center;
1698
+ inline-size:100%;
1699
+ min-block-size:var(--tds-select-min-height);
1700
+ padding-block:var(--tds-select-padding-block);
1701
+ padding-inline:var(--t-spacing-1);
1702
+ padding-inline-end:calc(var(--t-spacing-1) + var(--tds-select-caret-size) + .5em);
1703
+ font-family:inherit;
1704
+ font-size:var(--tds-select-font-size);
1705
+ line-height:1.15;
1706
+ color:var(--tds-select-color);
1707
+ text-align:left;
1708
+ -webkit-appearance:none;
1709
+ -moz-appearance:none;
1710
+ appearance:none;
1711
+ cursor:var(--tds-select-cursor, default);
1712
+ outline:var(--t-focus-ring-width) solid transparent;
1713
+ outline-offset:0;
1714
+ background-color:var(--tds-select-background-color);
1715
+ background-image:var(--tds-select-background-image);
1716
+ background-repeat:no-repeat;
1717
+ background-position:right var(--tds-select-caret-inline-offset) top 50%;
1718
+ background-size:var(--tds-select-caret-size);
1719
+ border:var(--t-form-border-width) solid var(--tds-select-border-color);
1720
+ border-radius:var(--t-form-border-radius);
1721
+ transition-timing-function:var(--t-ease-in-out);
1722
+ transition-duration:var(--t-duration-300);
1723
+ transition-property:var(--tds-select-transition-property);
1617
1724
  }
1618
1725
 
1619
- .tds-input.tds-textarea--resize-vertical textarea{
1620
- resize:vertical;
1726
+ :is(.tds-select :is(select,button)):hover:not(:disabled,:focus,:focus-visible,:focus-within,:active,:open){
1727
+ border-color:var(--tds-select-border-color-hover);
1621
1728
  }
1622
1729
 
1623
- .tds-input.tds-textarea--resize-none textarea{
1624
- resize:none;
1730
+ :is(.tds-select :is(select,button)):focus{
1731
+ outline-color:var(--t-focus-ring-color);
1732
+ outline-offset:var(--t-focus-ring-offset);
1733
+ border-color:var(--tds-select-border-color-active);
1625
1734
  }
1626
1735
 
1627
- .tds-input.tds-textarea--resize-auto textarea{
1628
- resize:vertical;
1736
+ :is(.tds-select :is(select,button)):required:invalid,:is(.tds-select :is(select,button)):has(option[hidden][disabled][value=""]:checked){
1737
+ color:var(--tds-select-placeholder-color);
1629
1738
  }
1630
1739
 
1631
- @supports (field-sizing: content){
1632
- .tds-input.tds-textarea--resize-auto textarea{
1633
- field-sizing:content;
1634
- resize:none;
1635
- }
1740
+ .tds-select:has(select:user-invalid,[aria-invalid="true"]),.tds-select.tds-select--invalid{
1741
+ --tds-select-border-color:var(--t-form-border-color-error);
1742
+ --tds-select-border-color-hover:var(--t-form-border-color-error-hover);
1743
+ --tds-select-border-color-active:var(--t-form-border-color-error-hover);
1744
+ --tds-select-background-color:var(--t-form-background-color-error);
1745
+ --tds-select-description-color:var(--t-text-color-status-error);
1746
+ --tds-select-description-invalid-icon-display:inline-block;
1747
+ }
1748
+
1749
+ .tds-select:has(select:required,[aria-required="true"]) :is(label,.tds-select-label)::after{
1750
+ margin-left:.25ch;
1751
+ color:var(--t-text-color-status-error);
1752
+ content:"*";
1636
1753
  }
1637
1754
 
1638
- .tds-input textarea{
1639
- --tds-input-scrollbar-thumb-color-default:var(--t-fill-color-neutral-040);
1640
- --tds-input-scrollbar-thumb-color-hidden:transparent;
1641
- --tds-input-scrollbar-thumb-color-hover:var(--t-fill-color-neutral-030);
1642
- --tds-input-scrollbar-thumb-color-thumb-hover:var(--t-fill-color-neutral-020);
1643
- --tds-input-scrollbar-thumb-color-thumb-active:var(--t-fill-color-neutral-010);
1644
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-default);
1645
- --tds-input-scrollbar-surface-color:rgba(0, 0, 0, 0);
1646
- --tds-input-scrollbar-thumb-border-radius:999px;
1647
- --tds-input-scrollbar-thumb-border-width:3px;
1648
- --tds-input-scrollbar-track-margin-block:.125rem;
1649
- scrollbar-color:initial;
1650
- transition-timing-function:var(--t-ease-in-out);
1651
- transition-duration:var(--t-duration-200);
1652
- transition-property:var(--tds-input-transition-property), --tds-input-scrollbar-thumb-color;
1653
- }
1755
+ .tds-select:has(:is(select,button[role="combobox"]):is(:disabled,[aria-disabled="true"])){
1756
+ --tds-select-border-color:var(--t-form-border-color-disabled);
1757
+ --tds-select-background-color:var(--t-form-background-color-disabled);
1758
+ --tds-select-color:var(--t-form-color-disabled);
1759
+ --tds-select-cursor:not-allowed;
1760
+ }
1654
1761
 
1655
- @media (pointer: fine){
1656
- :is(.tds-input textarea)::-webkit-scrollbar{
1657
- width:12px;
1658
- height:12px;
1659
- cursor:default;
1660
- }
1762
+ .tds-select:has( > [popover]:popover-open) > button{
1763
+ border-color:var(--tds-select-border-color-active);
1764
+ }
1661
1765
 
1662
- :is(.tds-input textarea)::-webkit-scrollbar-thumb{
1663
- cursor:default;
1664
- background:var(--tds-input-scrollbar-thumb-color);
1665
- background-clip:content-box;
1666
- border:var(--tds-input-scrollbar-thumb-border-width) solid var(--tds-input-scrollbar-surface-color);
1667
- border-radius:var(--tds-input-scrollbar-thumb-border-radius);
1766
+ :is(.tds-select:has( > [popover]:popover-open) > button)::after{
1767
+ transform:rotate(.5turn);
1668
1768
  }
1669
1769
 
1670
- :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1671
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
1672
- }
1770
+ .tds-select :is(hr,li[role="separator"]){
1771
+ margin-block:var(--t-spacing-half);
1772
+ color:var(--tds-select-border-color);
1773
+ border:0;
1774
+ border-top:1px solid;
1775
+ }
1673
1776
 
1674
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
1675
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
1676
- }
1777
+ .tds-select :is(li[role="option"],option:not([hidden])){
1778
+ display:block;
1779
+ padding-block:var(--tds-select-option-padding-block);
1780
+ padding-inline:var(--tds-select-option-padding-inline);
1781
+ overflow:hidden;
1782
+ text-overflow:ellipsis;
1783
+ font-size:var(--tds-select-option-font-size);
1784
+ line-height:1;
1785
+ color:var(--tds-select-option-color);
1786
+ white-space:nowrap;
1787
+ cursor:default;
1788
+ border-radius:var(--tds-select-option-border-radius);
1789
+ }
1677
1790
 
1678
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
1679
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
1791
+ :is(.tds-select :is(li[role="option"],option:not([hidden]))):focus-visible{
1792
+ outline:0;
1680
1793
  }
1681
1794
 
1682
- :is(.tds-input textarea)::-webkit-scrollbar-corner{
1683
- background:var(--tds-input-scrollbar-surface-color);
1795
+ :is(.tds-select :is(li[role="option"],option:not([hidden]))):is(:focus,:hover,.tds-select-option--active):not([disabled],[aria-disabled="true"]){
1796
+ background:var(--tds-select-option-background-hover);
1684
1797
  }
1685
1798
 
1686
- :is(.tds-input textarea)::-webkit-resizer{
1687
- background:var(--tds-input-resizer-icon) no-repeat;
1688
- background-position:right bottom;
1689
- background-size:var(--tds-input-resizer-size) var(--tds-input-resizer-size);
1799
+ :is(.tds-select :is(li[role="option"],option:not([hidden]))):is([aria-selected="true"],:checked):not([disabled],[aria-disabled="true"]){
1800
+ background:var(--tds-select-option-background-active);
1690
1801
  }
1691
1802
 
1692
- :is(.tds-input textarea)::-webkit-scrollbar-track{
1693
- margin-block:var(--tds-input-scrollbar-track-margin-block);
1694
- cursor:default;
1803
+ :is(.tds-select :is(li[role="option"],option:not([hidden]))):is([aria-disabled="true"],:disabled){
1804
+ color:var(--t-form-color-disabled);
1805
+ cursor:not-allowed;
1695
1806
  }
1696
1807
 
1697
- @supports (-moz-appearance: none){
1698
- :is(.tds-input textarea){
1699
- scrollbar-color:var(--tds-input-scrollbar-thumb-color-default) var(--tds-input-scrollbar-surface-color);
1700
- scrollbar-width:thin;
1701
- }
1702
-
1703
- @media (hover){
1704
- :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1705
- scrollbar-color:var(--tds-input-scrollbar-thumb-color-hover) var(--tds-input-scrollbar-surface-color);
1706
- }
1808
+ :is(.tds-select :is(li[role="option"],option:not([hidden]))):is([aria-disabled="true"],:disabled):is(:focus,:hover){
1809
+ background:transparent;
1707
1810
  }
1708
- }
1709
- }
1710
-
1711
- .tds-radio{
1712
- --tds-radio-font-size:var(--t-font-size-md);
1713
- --tds-radio-cursor:pointer;
1714
- --tds-radio-line-height:1.4;
1715
- --tds-radio-transition-property:border-width;
1716
-
1717
- --tds-radio-input-size:var(--t-element-size-md);
1718
- --tds-radio-input-border-radius:var(--t-border-radius-round);
1719
- --tds-radio-input-border-color:var(--t-form-border-color);
1720
- --tds-radio-input-border-width:var(--t-form-border-width);
1721
- --tds-radio-input-background-color:var(--t-form-background-color);
1722
-
1723
- --tds-radio-label-color:var(--t-form-color);
1724
-
1725
- --tds-radio-description-font-size:var(--t-font-size-sm);
1726
- --tds-radio-description-line-height:1.35;
1727
- --tds-radio-description-color:var(--t-text-color-secondary);
1728
-
1729
- position:relative;
1730
- display:inline-grid;
1731
- grid-template-columns:auto;
1732
- grid-auto-columns:1fr;
1733
- gap:var(--t-spacing-fourth) 0;
1734
- line-height:var(--tds-radio-line-height);
1735
- -webkit-user-select:none;
1736
- -moz-user-select:none;
1737
- user-select:none;
1738
- }
1739
-
1740
- .tds-radio label{
1741
- grid-area:1 / 2;
1742
- padding-inline-start:var(--t-spacing-1);
1743
- font-size:var(--tds-radio-font-size);
1744
- font-weight:var(--t-font-weight-normal);
1745
- color:var(--tds-radio-label-color);
1746
- cursor:var(--tds-radio-cursor);
1747
- }
1748
-
1749
- .tds-radio input[type="radio"]{
1750
- position:relative;
1751
- width:1em;
1752
- height:1em;
1753
- margin:calc((1lh - 1em) / 2) 0 0;
1754
- font-size:var(--tds-radio-font-size);
1755
- line-height:inherit;
1756
- -webkit-appearance:none;
1757
- -moz-appearance:none;
1758
- appearance:none;
1759
- cursor:var(--tds-radio-cursor);
1760
- background-color:var(--tds-radio-input-background-color);
1761
- border:var(--tds-radio-input-border-width) solid var(--tds-radio-input-border-color);
1762
- border-radius:var(--tds-radio-input-border-radius);
1763
- transition-timing-function:var(--t-ease-in-out);
1764
- transition-duration:var(--t-duration-200);
1765
- transition-property:var(--tds-radio-transition-property);
1766
- }
1767
1811
 
1768
- :is(.tds-radio input[type="radio"]):hover:not(:disabled){
1769
- --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
1770
- --tds-radio-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
1771
- }
1772
-
1773
- :is(.tds-radio input[type="radio"]):focus-visible{
1774
- outline:var(--t-focus-ring-outline);
1775
- outline-offset:var(--t-focus-ring-offset);
1776
- }
1812
+ .tds-select :is(li[role="presentation"],legend){
1813
+ position:sticky;
1814
+ inset-block-start:calc(var(--tds-select-dropdown-padding) * -1);
1815
+ z-index:1;
1816
+ float:inline-start;
1817
+ inline-size:100%;
1818
+ padding-block:var(--tds-select-group-label-padding-block);
1819
+ padding-inline:var(--tds-select-group-label-padding-inline);
1820
+ container-type:scroll-state;
1821
+ font-size:var(--tds-select-group-label-font-size);
1822
+ font-weight:var(--tds-select-group-label-font-weight);
1823
+ letter-spacing:var(--tds-select-group-label-letter-spacing);
1824
+ background:var(--tds-select-group-label-background);
1825
+ text-box:trim-both cap alphabetic;
1826
+ }
1777
1827
 
1778
- :is(.tds-radio input[type="radio"]):disabled{
1779
- pointer-events:none;
1828
+ :is(.tds-select :is(li[role="presentation"],legend)) span{
1829
+ display:inline-flex;
1830
+ gap:var(--t-spacing-half);
1831
+ align-items:center;
1832
+ color:var(--tds-select-group-label-color);
1833
+ transition:var(--tds-select-group-label-transition);
1780
1834
  }
1781
1835
 
1782
- @media (prefers-reduced-motion: reduce){
1836
+ @container scroll-state(stuck){
1783
1837
 
1784
- .tds-radio input[type="radio"]{
1785
- --tds-radio-transition-property:none;
1786
- }
1838
+ :is(.tds-select :is(li[role="presentation"],legend)) span{
1839
+ color:var(--tds-select-group-label-color-stuck);
1787
1840
  }
1788
1841
 
1789
- .tds-radio:has(input:checked){
1790
- --tds-radio-input-background-color:var(--t-form-background-color);
1791
- --tds-radio-input-border-color:var(--t-border-color-control-info);
1792
- --tds-radio-input-border-width:4px;
1793
- }
1842
+ @media (forced-colors: active){
1794
1843
 
1795
- .tds-radio:has(input:checked) input:hover:not(:disabled){
1796
- --tds-radio-input-background-color:var(--t-form-background-color);
1797
- --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
1844
+ :is(.tds-select :is(li[role="presentation"],legend)) span{
1845
+ color:var(--tds-select-group-label-color-stuck);
1798
1846
  }
1847
+ }
1848
+ }
1799
1849
 
1800
- .tds-radio:has(input:user-invalid){
1801
- --tds-radio-input-border-color:var(--t-form-border-color-error);
1850
+ .tds-select.tds-select--lg{
1851
+ --tds-select-min-height:var(--t-container-size-lg);
1852
+ --tds-select-font-size:var(--t-font-size-lg);
1802
1853
  }
1803
1854
 
1804
- .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
1805
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1806
- --tds-radio-input-background-color:var(--t-form-background-color-error);
1807
- }
1808
-
1809
- .tds-radio:has(input:disabled){
1810
- --tds-radio-input-background-color:var(--t-form-background-color-disabled);
1811
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
1855
+ @media (prefers-reduced-motion: reduce){
1812
1856
 
1813
- --tds-radio-label-color:var(--t-form-color-disabled);
1814
- --tds-radio-description-color:var(--t-form-color-disabled);
1815
- --tds-radio-cursor:not-allowed;
1857
+ .tds-select{
1858
+ --tds-select-transition-property:none;
1859
+ --tds-select-dropdown-transition:none;
1860
+ --tds-select-dropdown-scroll-behavior:auto;
1861
+ --tds-select-dropdown-closed-translate:none;
1862
+ --tds-select-dropdown-open-translate:none;
1863
+ --tds-select-caret-transition:none;
1864
+ }
1816
1865
  }
1817
1866
 
1818
- .tds-radio:has(input:disabled) input:checked{
1819
- --tds-radio-input-background-color:var(--t-form-background-color);
1820
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
1821
- }
1822
-
1823
- .tds-radio-description{
1867
+ .tds-select-description{
1824
1868
  display:flex;
1825
- grid-area:2 / 2;
1826
1869
  gap:var(--t-spacing-half);
1827
1870
  align-items:flex-start;
1828
- padding-inline-start:var(--t-spacing-1);
1829
1871
  margin:0;
1830
- font-size:var(--tds-radio-description-font-size);
1831
- line-height:var(--tds-radio-description-line-height);
1832
- color:var(--tds-radio-description-color);
1872
+ font-size:var(--t-font-size-sm);
1873
+ line-height:1.35;
1874
+ color:var(--tds-select-description-color, var(--t-text-color-secondary));
1833
1875
  cursor:text;
1834
1876
  }
1835
1877
 
1836
- .tds-radio--sm{
1837
- --tds-radio-line-height:1.35;
1838
- --tds-radio-input-size:var(--t-element-size-sm);
1839
- --tds-radio-font-size:var(--t-font-size-sm);
1840
- --tds-radio-description-font-size:var(--t-font-size-xs);
1841
- --tds-radio-description-line-height:1.3;
1842
- }
1878
+ .tds-select-description .tds-select-description-invalid-icon{
1879
+ display:var(--tds-select-description-invalid-icon-display, none);
1880
+ flex-shrink:0;
1881
+ margin-block-start:calc(.5lh - .5em);
1882
+ line-height:1.35;
1883
+ }
1843
1884
 
1844
- .tds-time-field-input{
1845
- --tds-field-date-segment-padding-inline:1px;
1846
- padding-block:var(--tds-field-padding-block);
1847
- padding-inline:var(--tds-field-padding-inline);
1848
- font-variant-numeric:tabular-nums;
1885
+ .tds-select > .tds-select-hidden-select{
1886
+ position:absolute;
1887
+ inline-size:1px;
1888
+ block-size:1px;
1889
+ padding:0;
1890
+ margin:0;
1891
+ pointer-events:none;
1892
+ opacity:0;
1849
1893
  }
1850
1894
 
1851
- .tds-toggle-switch{
1852
- --tds-toggle-switch-font-size:var(--t-font-size-md);
1853
- --tds-toggle-switch-cursor:pointer;
1854
- --tds-toggle-switch-display:inline-grid;
1855
- --tds-toggle-switch-line-height:1.4;
1856
-
1857
- --tds-toggle-switch-label-color:var(--t-form-color);
1858
-
1859
- --tds-toggle-switch-track-width:var(--t-container-size-md);
1860
- --tds-toggle-switch-track-outline:none;
1861
- --tds-toggle-switch-track-height:var(--t-container-size-xs);
1862
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color);
1863
- --tds-toggle-switch-track-transition:background-color var(--t-duration-100) var(--t-ease-in-out);
1864
-
1865
- --tds-toggle-switch-thumb-size:var(--t-element-size-md);
1866
- --tds-toggle-switch-thumb-transform:translateX(0);
1867
- --tds-toggle-switch-thumb-transition:transform var(--t-duration-200) var(--t-ease-in-out);
1868
-
1869
- --tds-toggle-switch-description-font-size:var(--t-font-size-sm);
1870
- --tds-toggle-switch-description-line-height:1.35;
1871
- --tds-toggle-switch-description-color:var(--t-text-color-secondary);
1872
- position:relative;
1873
-
1874
- display:var(--tds-toggle-switch-display);
1875
- grid-template-columns:auto;
1876
- grid-auto-columns:1fr;
1877
- gap:var(--t-spacing-fourth) 0;
1878
- -webkit-user-select:none;
1879
- -moz-user-select:none;
1880
- user-select:none;
1895
+ .tds-select:has(> button){
1896
+ anchor-scope:--tds-select-anchor;
1881
1897
  }
1882
1898
 
1883
- .tds-toggle-switch input[type="checkbox"]{
1884
- position:absolute;
1885
- width:var(--tds-toggle-switch-track-width);
1886
- height:var(--tds-toggle-switch-track-height);
1887
- margin:0;
1888
- -webkit-appearance:none;
1889
- -moz-appearance:none;
1890
- appearance:none;
1891
- cursor:var(--tds-toggle-switch-cursor);
1892
- outline:var(--tds-toggle-switch-track-outline);
1893
- outline-offset:var(--t-focus-ring-offset);
1894
- background-color:transparent;
1895
- border:0;
1896
- border-radius:var(--t-border-radius-round);
1899
+ .tds-select:has( > button) > button{
1900
+ display:block;
1901
+ padding-inline-end:calc(var(--tds-select-caret-size) + var(--tds-select-caret-inline-offset) + .75ch);
1902
+ anchor-name:--tds-select-anchor;
1903
+ overflow:hidden;
1904
+ text-overflow:ellipsis;
1905
+ color:var(--tds-select-placeholder-color);
1906
+ white-space:nowrap;
1907
+ background-image:none;
1908
+ 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);
1909
+ -webkit-tap-highlight-color:transparent;
1897
1910
  }
1898
1911
 
1899
- :is(.tds-toggle-switch input[type="checkbox"]):focus-visible{
1900
- --tds-toggle-switch-track-outline:var(--t-focus-ring-outline);
1912
+ :is(.tds-select:has( > button) > button)::after{
1913
+ position:absolute;
1914
+ inset-block:0;
1915
+ inset-inline-end:var(--tds-select-caret-inline-offset);
1916
+ width:var(--tds-select-caret-size);
1917
+ height:var(--tds-select-caret-size);
1918
+ margin-block:auto;
1919
+ line-height:1;
1920
+ pointer-events:none;
1921
+ content:var(--tds-select-background-image);
1922
+ transform:rotate(0);
1923
+ transition:var(--tds-select-caret-transition);
1901
1924
  }
1902
1925
 
1903
- .tds-toggle-switch label{
1904
- display:inline-flex;
1905
- grid-area:1 / 2;
1906
- padding-inline-start:var(--t-spacing-1);
1907
- margin-top:-.09375em;
1908
- font-size:var(--tds-toggle-switch-font-size);
1909
- font-weight:var(--t-font-weight-normal);
1910
- line-height:var(--tds-toggle-switch-line-height);
1911
- color:var(--tds-toggle-switch-label-color);
1912
- cursor:var(--tds-toggle-switch-cursor);
1926
+ .tds-select:has( > button):has([role="option"][aria-selected="true"]) > button{
1927
+ color:var(--tds-select-color);
1913
1928
  }
1914
1929
 
1915
- .tds-toggle-switch:not(:has(input:disabled)):has(input:hover){
1916
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-hover);
1930
+ .tds-select:has( > button) [popover]{
1931
+ inset:auto;
1932
+ inline-size:-moz-max-content;
1933
+ inline-size:max-content;
1934
+ min-inline-size:anchor-size(width);
1935
+ max-inline-size:100vi;
1936
+ max-block-size:min(50vh, 20rem);
1937
+ padding:var(--tds-select-dropdown-padding);
1938
+ margin-block:var(--tds-select-dropdown-margin-block);
1939
+ position-area:block-end span-inline-start;
1940
+ position-anchor:--tds-select-anchor;
1941
+ position-try-fallbacks:flip-block, flip-inline;
1942
+ overflow:auto;
1943
+ overflow-x:hidden;
1944
+ scroll-behavior:var(--tds-select-dropdown-scroll-behavior);
1945
+ overscroll-behavior:none;
1946
+ -webkit-user-select:none;
1947
+ -moz-user-select:none;
1948
+ user-select:none;
1949
+ scroll-padding-top:calc(var(--tds-select-group-label-padding-block-start) + var(--tds-select-group-label-font-size) + var(--t-spacing-2));
1950
+ scrollbar-color:var(--tds-select-dropdown-scrollbar-color);
1951
+ scrollbar-width:var(--tds-select-dropdown-scrollbar-width);
1952
+ background:var(--tds-select-dropdown-background-color);
1953
+ border:var(--tds-select-dropdown-border);
1954
+ border-radius:var(--tds-select-dropdown-border-radius);
1955
+ box-shadow:var(--tds-select-dropdown-box-shadow);
1956
+ opacity:var(--tds-select-dropdown-open-opacity);
1957
+ translate:var(--tds-select-dropdown-open-translate);
1958
+ transition:var(--tds-select-dropdown-transition);
1917
1959
  }
1918
1960
 
1919
- .tds-toggle-switch:has(input:checked){
1920
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on);
1921
- --tds-toggle-switch-thumb-transform:translateX(calc(var(--tds-toggle-switch-track-width) - var(--tds-toggle-switch-thumb-size) - var(--t-spacing-half)));
1922
- }
1961
+ :is(.tds-select:has( > button) [popover]):not(:popover-open){
1962
+ opacity:var(--tds-select-dropdown-closed-opacity);
1963
+ translate:var(--tds-select-dropdown-closed-translate);
1964
+ }
1923
1965
 
1924
- .tds-toggle-switch:has(input:checked):not(:has(input:disabled)):has(input:hover){
1925
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on-hover);
1966
+ :is(.tds-select:has( > button) [popover]) ul{
1967
+ padding:0;
1968
+ margin:0;
1969
+ list-style:none;
1970
+ }
1971
+
1972
+ @starting-style{
1973
+ :is(.tds-select:has( > button) [popover]):popover-open{
1974
+ opacity:var(--tds-select-dropdown-closed-opacity);
1975
+ translate:var(--tds-select-dropdown-closed-translate);
1976
+ }
1977
+ }
1978
+
1979
+ @supports ((-webkit-appearance: base-select) or (-moz-appearance: base-select) or (appearance: base-select)){
1980
+ .tds-select select:has(> button){
1981
+ padding-inline-end:0;
1982
+ background-image:none;
1983
+ }
1984
+ @media (hover) and (pointer: fine){
1985
+ :is(.tds-select select:has( > button)),:is(.tds-select select:has( > button))::picker(select){
1986
+ padding-block:0;
1987
+ -webkit-appearance:base-select;
1988
+ -moz-appearance:base-select;
1989
+ appearance:base-select;
1990
+ }
1991
+ }
1992
+ :is(.tds-select select:has( > button))::picker-icon{
1993
+ flex-shrink:0;
1994
+ width:var(--tds-select-caret-size);
1995
+ height:var(--tds-select-caret-size);
1996
+ margin-inline-end:var(--tds-select-caret-inline-offset);
1997
+ line-height:1;
1998
+ content:var(--tds-select-background-image);
1999
+ transition:var(--tds-select-caret-transition);
1926
2000
  }
1927
2001
 
1928
- .tds-toggle-switch:has(input:disabled){
1929
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-disabled);
1930
- --tds-toggle-switch-label-color:var(--t-form-color-disabled);
1931
- --tds-toggle-switch-description-color:var(--t-form-color-disabled);
1932
- --tds-toggle-switch-cursor:not-allowed;
1933
- }
2002
+ :is(.tds-select select:has( > button))::picker(select):not(:popover-open){
2003
+ opacity:var(--tds-select-dropdown-closed-opacity);
2004
+ translate:var(--tds-select-dropdown-closed-translate);
2005
+ }
1934
2006
 
1935
- .tds-toggle-switch-track{
1936
- position:relative;
1937
- flex-shrink:0;
1938
- width:var(--tds-toggle-switch-track-width);
1939
- height:var(--tds-toggle-switch-track-height);
1940
- background-color:var(--tds-toggle-switch-track-background-color);
1941
- border-radius:var(--t-border-radius-round);
1942
- transition:var(--tds-toggle-switch-track-transition);
1943
- }
2007
+ :is(.tds-select select:has( > button)):open,:is(.tds-select select:has( > button)):focus-within{
2008
+ outline-color:var(--t-focus-ring-color);
2009
+ outline-offset:var(--t-focus-ring-offset);
2010
+ border-color:var(--tds-select-border-color-active);
2011
+ }
1944
2012
 
1945
- .tds-toggle-switch-track::before{
1946
- position:absolute;
1947
- top:var(--t-spacing-fourth);
1948
- left:var(--t-spacing-fourth);
1949
- width:var(--tds-toggle-switch-thumb-size);
1950
- height:var(--tds-toggle-switch-thumb-size);
1951
- content:"";
1952
- background-color:#fff;
1953
- border-radius:var(--t-border-radius-round);
1954
- transform:var(--tds-toggle-switch-thumb-transform);
1955
- transition:var(--tds-toggle-switch-thumb-transition);
1956
- }
2013
+ :is(.tds-select select:has( > button)):open::picker-icon{
2014
+ opacity:1;
2015
+ transform:rotate(.5turn);
2016
+ }
1957
2017
 
1958
- @media (prefers-reduced-motion: reduce){
2018
+ :is(.tds-select select:has( > button)) selectedcontent{
2019
+ overflow:hidden;
2020
+ text-overflow:ellipsis;
2021
+ line-height:calc(var(--tds-select-min-height) - 2px);
2022
+ white-space:nowrap;
2023
+ }
1959
2024
 
1960
- .tds-toggle-switch-track{
1961
- --tds-toggle-switch-track-transition:none;
1962
- --tds-toggle-switch-thumb-transition:none;
1963
- }
1964
- }
2025
+ :is(.tds-select select:has( > button)):has(option[hidden][disabled][value=""]:checked) > button{
2026
+ color:var(--tds-select-placeholder-color);
2027
+ }
1965
2028
 
1966
- .tds-toggle-switch-description{
1967
- display:flex;
1968
- grid-area:2 / 2;
1969
- align-items:flex-start;
1970
- padding-inline-start:var(--t-spacing-1);
1971
- margin:0;
1972
- font-size:var(--tds-toggle-switch-description-font-size);
1973
- line-height:var(--tds-toggle-switch-description-line-height);
1974
- color:var(--tds-toggle-switch-description-color);
1975
- cursor:text;
1976
- }
2029
+ :is(.tds-select select:has( > button))::picker(select){
2030
+ inset:auto;
2031
+ inline-size:-moz-max-content;
2032
+ inline-size:max-content;
2033
+ min-inline-size:anchor-size(width);
2034
+ max-inline-size:100vi;
2035
+ padding:var(--tds-select-dropdown-padding);
2036
+ margin-block:var(--tds-select-dropdown-margin-block);
2037
+ position-area:block-end span-inline-start;
2038
+ position-try-fallbacks:flip-block, flip-inline;
2039
+ overflow:auto;
2040
+ overflow-x:hidden;
2041
+ scroll-behavior:var(--tds-select-dropdown-scroll-behavior);
2042
+ overscroll-behavior:none;
2043
+ -webkit-user-select:none;
2044
+ -moz-user-select:none;
2045
+ user-select:none;
2046
+ scrollbar-color:var(--tds-select-dropdown-scrollbar-color);
2047
+ scrollbar-width:var(--tds-select-dropdown-scrollbar-width);
2048
+ background:var(--tds-select-dropdown-background-color);
2049
+ border:var(--tds-select-dropdown-border);
2050
+ border-radius:var(--tds-select-dropdown-border-radius);
2051
+ box-shadow:var(--tds-select-dropdown-box-shadow);
2052
+ opacity:var(--tds-select-dropdown-open-opacity);
2053
+ translate:var(--tds-select-dropdown-open-translate);
2054
+ transition:var(--tds-select-dropdown-transition);
2055
+ }
1977
2056
 
1978
- .tds-toggle-switch--sm{
1979
- --tds-toggle-switch-font-size:var(--t-font-size-sm);
1980
- --tds-toggle-switch-line-height:1.35;
1981
- --tds-toggle-switch-track-height:var(--t-element-size-lg);
1982
- --tds-toggle-switch-thumb-size:var(--t-element-size-sm);
1983
- --tds-toggle-switch-description-font-size:var(--t-font-size-xs);
1984
- --tds-toggle-switch-description-line-height:1.3;
1985
- }
2057
+ :is(.tds-select select:has( > button)) option::checkmark{
2058
+ display:none;
2059
+ }
1986
2060
 
1987
- .tds-toggle-switch--hide-label{
1988
- --tds-toggle-switch-display:inline-flex;
2061
+ @starting-style{
2062
+ :is(.tds-select select:has( > button))::picker(select):popover-open{
2063
+ opacity:var(--tds-select-dropdown-closed-opacity);
2064
+ translate:var(--tds-select-dropdown-closed-translate);
2065
+ }
2066
+ }
1989
2067
  }
1990
2068
 
1991
2069
  .tds-input{
@@ -2272,445 +2350,367 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
2272
2350
  color:var(--tds-field-color);
2273
2351
  }
2274
2352
 
2275
- .tds-select{
2276
- --tds-select-border-color:var(--t-form-border-color);
2277
- --tds-select-border-color-hover:var(--t-form-border-color-hover);
2278
- --tds-select-border-color-active:var(--t-form-border-color-hover);
2279
- --tds-select-background-color:var(--t-form-background-color);
2280
- --tds-select-color:var(--t-form-color);
2281
- --tds-select-placeholder-color:var(--t-form-placeholder-color);
2282
- --tds-select-font-size:var(--t-font-size-md);
2283
- --tds-select-min-height:var(--t-container-size-md);
2284
- --tds-select-padding-block:0;
2285
- --tds-select-description-color:var(--t-text-color-secondary);
2286
- --tds-select-description-invalid-icon-display:none;
2287
- --tds-select-transition-property:background-color, border-color, outline-color, outline-offset;
2288
- --tds-select-background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTEzLDZsLTUsNWwtNSwtNXoiIGZpbGw9IiMzRDNEM0QiLz48L3N2Zz4=");
2289
- --tds-select-caret-size:1em;
2290
- --tds-select-caret-inline-offset:.75em;
2291
- --tds-select-caret-transition:transform var(--t-duration-300) var(--t-ease-in-out);
2292
2353
 
2293
- --tds-select-dropdown-background-color:var(--t-surface-color-card);
2294
- --tds-select-dropdown-border:1px solid var(--t-border-color);
2295
- --tds-select-dropdown-padding:var(--t-spacing-1);
2296
- --tds-select-dropdown-margin-block:5px;
2297
- --tds-select-dropdown-scrollbar-color:#0004 #0000;
2298
- --tds-select-dropdown-scrollbar-width:thin;
2299
- --tds-select-dropdown-border-radius:var(--t-border-radius);
2300
- --tds-select-dropdown-box-shadow:hsl(0, 0%, 0%, .05) 0 10px 15px -3px, hsl(0, 0%, 0%, .05) 0 4px 6px -4px;
2301
- --tds-select-dropdown-scroll-behavior:smooth;
2302
- --tds-select-dropdown-transition:opacity var(--t-duration-300) var(--t-ease-out), translate var(--t-duration-300) var(--t-ease-out), display var(--t-duration-300) allow-discrete, overlay var(--t-duration-300) allow-discrete;
2303
- --tds-select-dropdown-closed-opacity:0;
2304
- --tds-select-dropdown-open-opacity:1;
2305
- --tds-select-dropdown-closed-translate:0 -8px;
2306
- --tds-select-dropdown-open-translate:0 0;
2354
+ @media (prefers-reduced-motion: no-preference){
2307
2355
 
2308
- --tds-select-option-gap:var(--t-spacing-1);
2309
- --tds-select-option-padding-block:var(--t-spacing-1);
2310
- --tds-select-option-padding-inline:var(--t-spacing-2) var(--t-spacing-1);
2311
- --tds-select-option-font-size:1rem;
2312
- --tds-select-option-color:var(--t-text-color);
2313
- --tds-select-option-background-hover:var(--t-fill-color-neutral-070);
2314
- --tds-select-option-background-active:var(--t-fill-color-button-interaction-ghost-active);
2315
- --tds-select-option-border-radius:var(--t-border-radius);
2356
+ :root{
2357
+ interpolate-size:allow-keywords;
2358
+ }
2359
+ }
2316
2360
 
2317
- --tds-select-group-label-padding-block-start:var(--t-spacing-2);
2318
- --tds-select-group-label-padding-block:var(--tds-select-group-label-padding-block-start) var(--t-spacing-1);
2319
- --tds-select-group-label-padding-inline:var(--t-spacing-1);
2320
- --tds-select-group-label-font-size:var(--t-font-size-sm);
2321
- --tds-select-group-label-font-weight:var(--t-font-weight-semibold);
2322
- --tds-select-group-label-letter-spacing:0;
2323
- --tds-select-group-label-color:var(--t-text-color-secondary);
2324
- --tds-select-group-label-color-stuck:var(--t-text-color-headline);
2325
- --tds-select-group-label-background:var(--tds-select-dropdown-background-color);
2326
- --tds-select-group-label-transition:color var(--t-duration-200) var(--t-ease-in-out);
2361
+ @layer tds-component{
2362
+ tds-sidenav,
2363
+ .tds-sidenav{
2364
+ --tds-sidenav-indent:12px;
2365
+ --tds-sidenav-item-depth:0;
2366
+
2367
+ --tds-sidenav-item-transition:background-color var(--t-duration-200) var(--t-ease-in-out);
2368
+
2369
+ --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;
2370
+ --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;
2371
+ --tds-sidenav-collapse-closed-opacity:0;
2372
+ --tds-sidenav-collapse-open-opacity:1;
2373
+ --tds-sidenav-collapse-closed-transform:translateY(-8px);
2374
+ --tds-sidenav-collapse-open-transform:translateY(0);
2375
+
2376
+ --tds-sidenav-item-icon-size:var(--t-element-size-md);
2377
+ --tds-sidenav-item-background-hover:var(--t-fill-color-button-interaction-ghost-hover);
2378
+ --tds-sidenav-item-background-active:var(--t-fill-color-button-interaction-ghost-active);
2379
+ --tds-sidenav-item-background-selected:var(--t-fill-color-button-interaction-ghost-active);
2380
+
2381
+ --tds-sidenav-item-nested-background-hover:var(--tds-sidenav-item-background-hover);
2382
+ --tds-sidenav-item-nested-background-active:var(--tds-sidenav-item-background-hover);
2383
+ --tds-sidenav-item-nested-background-selected:transparent;
2384
+
2385
+ --tds-sidenav-item-nested-border-color:var(--t-fill-color-neutral-050);
2386
+ --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
2387
+ --tds-sidenav-item-nested-border-color-selected:var(--t-border-color-status-info);
2388
+
2389
+ --tds-sidenav-item-icon-color:var(--t-icon-color-secondary);
2390
+ --tds-sidenav-item-icon-color-selected:var(--t-icon-color);
2391
+ }
2392
+
2393
+ @media (prefers-reduced-motion: reduce){
2394
+ tds-sidenav,
2395
+ .tds-sidenav{
2396
+ --tds-sidenav-collapse-transition-enter:none;
2397
+ --tds-sidenav-collapse-transition-exit:none;
2398
+ --tds-sidenav-collapse-closed-transform:none;
2399
+ --tds-sidenav-collapse-open-transform:none;
2400
+ }
2401
+ }
2402
+
2403
+ .tds-sidenav--theme-gray{
2404
+ --tds-sidenav-item-background-hover:var(--t-fill-color-neutral-080);
2405
+ --tds-sidenav-item-background-active:var(--t-fill-color-neutral-070);
2406
+ --tds-sidenav-item-background-selected:var(--t-fill-color-neutral-050);
2407
+ --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
2408
+ --tds-sidenav-item-nested-border-color-selected:var(--t-fill-color-neutral-010);
2409
+ }
2410
+ }
2411
+
2412
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section){
2413
+ display:flex;
2414
+ }
2415
+
2416
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section,.tds-sidenav-collapse){
2417
+ flex-direction:column;
2418
+ gap:var(--t-spacing-half);
2419
+ width:100%;
2420
+ }
2421
+
2422
+ .tds-sidenav-section-list{
2423
+ width:100%;
2424
+ padding:0;
2425
+ margin:0;
2426
+ list-style:none;
2427
+ }
2428
+
2429
+ .tds-sidenav-section-header{
2430
+ display:flex;
2431
+ align-items:baseline;
2432
+ justify-content:space-between;
2433
+ padding-top:var(--t-spacing-2);
2434
+ }
2435
+
2436
+ .tds-sidenav-section-header h2{
2437
+ margin:0;
2438
+ font-size:var(--t-font-size-sm);
2439
+ font-weight:var(--t-font-weight-semibold);
2440
+ line-height:1.35;
2441
+ color:var(--t-text-color-secondary);
2442
+ text-transform:uppercase;
2443
+ }
2444
+
2445
+ .tds-sidenav-section:first-of-type .tds-sidenav-section-header{
2446
+ padding-top:0;
2447
+ }
2327
2448
 
2328
- position:relative;
2449
+ .tds-sidenav-section-header [slot="label-actions"]{
2450
+ display:flex;
2451
+ gap:var(--t-spacing-half);
2452
+ align-items:center;
2453
+ }
2454
+
2455
+ .tds-sidenav-section [slot="section-actions"]{
2329
2456
  display:flex;
2330
- flex-direction:column;
2331
- gap:var(--t-spacing-half);
2457
+ gap:12px;
2458
+ align-items:center;
2459
+ min-height:42px;
2460
+ padding:var(--t-spacing-1) 0;
2332
2461
  }
2333
2462
 
2334
- .tds-select :is(label,.tds-select-label){
2335
- font-size:var(--t-font-size-md);
2336
- font-weight:var(--t-font-weight-normal);
2337
- color:var(--t-text-color);
2338
- cursor:default;
2339
- }
2463
+ .tds-sidenav-section-list,
2464
+ .tds-sidenav-item{
2465
+ width:100%;
2466
+ padding:0;
2467
+ margin:0;
2468
+ }
2340
2469
 
2341
- .tds-select :is(select,button){
2470
+ .tds-sidenav-item :is(a,button){
2342
2471
  position:relative;
2343
- place-items:center;
2344
- inline-size:100%;
2345
- min-block-size:var(--tds-select-min-height);
2346
- padding-block:var(--tds-select-padding-block);
2347
- padding-inline:var(--t-spacing-1);
2348
- padding-inline-end:calc(var(--t-spacing-1) + var(--tds-select-caret-size) + .5em);
2349
- font-family:inherit;
2350
- font-size:var(--tds-select-font-size);
2351
- line-height:1.15;
2352
- color:var(--tds-select-color);
2353
- text-align:left;
2472
+ display:flex;
2473
+ gap:12px;
2474
+ align-items:center;
2475
+ width:100%;
2476
+ padding:12px;
2477
+ overflow:hidden;
2478
+ font-size:var(--t-font-size-sm);
2479
+ line-height:18px;
2480
+ color:var(--t-text-color-headline);
2481
+ white-space:nowrap;
2482
+ text-decoration:none;
2354
2483
  -webkit-appearance:none;
2355
2484
  -moz-appearance:none;
2356
2485
  appearance:none;
2357
- cursor:var(--tds-select-cursor, default);
2358
- outline:var(--t-focus-ring-width) solid transparent;
2359
- outline-offset:0;
2360
- background-color:var(--tds-select-background-color);
2361
- background-image:var(--tds-select-background-image);
2362
- background-repeat:no-repeat;
2363
- background-position:right var(--tds-select-caret-inline-offset) top 50%;
2364
- background-size:var(--tds-select-caret-size);
2365
- border:var(--t-form-border-width) solid var(--tds-select-border-color);
2366
- border-radius:var(--t-form-border-radius);
2367
- transition-timing-function:var(--t-ease-in-out);
2368
- transition-duration:var(--t-duration-300);
2369
- transition-property:var(--tds-select-transition-property);
2486
+ cursor:pointer;
2487
+ background-color:var(--tds-sidenav-item-background, transparent);
2488
+ border:0;
2489
+ border-radius:var(--t-border-radius);
2490
+ transition:var(--tds-sidenav-item-transition);
2370
2491
  }
2371
2492
 
2372
- :is(.tds-select :is(select,button)):hover:not(:disabled,:focus,:focus-visible,:focus-within,:active,:open){
2373
- border-color:var(--tds-select-border-color-hover);
2493
+ :is(.tds-sidenav-item :is(a,button)):not(:has(.prefix,.suffix)),:is(.tds-sidenav-item :is(a,button)) :is(:not(.prefix,.suffix)){
2494
+ display:block;
2495
+ flex:1;
2496
+ overflow:hidden;
2497
+ text-overflow:ellipsis;
2498
+ text-align:left;
2499
+ white-space:nowrap;
2374
2500
  }
2375
2501
 
2376
- :is(.tds-select :is(select,button)):focus{
2377
- outline-color:var(--t-focus-ring-color);
2378
- outline-offset:var(--t-focus-ring-offset);
2379
- border-color:var(--tds-select-border-color-active);
2502
+ :is(.tds-sidenav-item :is(a,button)):hover,:is(.tds-sidenav-item :is(a,button)):focus-visible{
2503
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-hover);
2504
+ color:var(--t-text-color-headline);
2505
+ text-decoration:none;
2380
2506
  }
2381
2507
 
2382
- :is(.tds-select :is(select,button)):required:invalid,:is(.tds-select :is(select,button)):has(option[hidden][disabled][value=""]:checked){
2383
- color:var(--tds-select-placeholder-color);
2508
+ :is(.tds-sidenav-item :is(a,button)):active{
2509
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-active);
2384
2510
  }
2385
2511
 
2386
- .tds-select:has(select:user-invalid,[aria-invalid="true"]),.tds-select.tds-select--invalid{
2387
- --tds-select-border-color:var(--t-form-border-color-error);
2388
- --tds-select-border-color-hover:var(--t-form-border-color-error-hover);
2389
- --tds-select-border-color-active:var(--t-form-border-color-error-hover);
2390
- --tds-select-background-color:var(--t-form-background-color-error);
2391
- --tds-select-description-color:var(--t-text-color-status-error);
2392
- --tds-select-description-invalid-icon-display:inline-block;
2393
- }
2394
-
2395
- .tds-select:has(select:required,[aria-required="true"]) :is(label,.tds-select-label)::after{
2396
- margin-left:.25ch;
2397
- color:var(--t-text-color-status-error);
2398
- content:"*";
2512
+ :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]){
2513
+ overflow:hidden;
2514
+ color:var(--tds-sidenav-item-icon-color);
2399
2515
  }
2400
2516
 
2401
- .tds-select:has(:is(select,button[role="combobox"]):is(:disabled,[aria-disabled="true"])){
2402
- --tds-select-border-color:var(--t-form-border-color-disabled);
2403
- --tds-select-background-color:var(--t-form-background-color-disabled);
2404
- --tds-select-color:var(--t-form-color-disabled);
2405
- --tds-select-cursor:not-allowed;
2406
- }
2517
+ :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{
2518
+ display:block;
2519
+ width:var(--tds-sidenav-item-icon-size);
2520
+ height:var(--tds-sidenav-item-icon-size);
2521
+ }
2407
2522
 
2408
- .tds-select:has( > [popover]:popover-open) > button{
2409
- border-color:var(--tds-select-border-color-active);
2410
- }
2523
+ :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section{
2524
+ --tds-sidenav-indent:19px;
2525
+ }
2411
2526
 
2412
- :is(.tds-select:has( > [popover]:popover-open) > button)::after{
2413
- transform:rotate(.5turn);
2527
+ [aria-expanded="true"]:is(.tds-sidenav-item :is(a,button)) + .tds-sidenav-section-list{
2528
+ visibility:visible;
2529
+ block-size:auto;
2530
+ opacity:1;
2414
2531
  }
2415
2532
 
2416
- .tds-select :is(hr,li[role="separator"]){
2417
- margin-block:var(--t-spacing-half);
2418
- color:var(--tds-select-border-color);
2419
- border:0;
2420
- border-top:1px solid;
2533
+ .tds-sidenav-item.selected > :is(a,button),.tds-sidenav-item:has(.tds-sidenav-section):has(.selected) > :is(a,button){
2534
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-selected);
2535
+ --tds-sidenav-item-icon-color:var(--tds-sidenav-item-icon-color-selected);
2536
+
2537
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-selected);
2538
+ font-weight:var(--t-font-weight-semibold);
2421
2539
  }
2422
2540
 
2423
- .tds-select :is(li[role="option"],option:not([hidden])){
2424
- display:block;
2425
- padding-block:var(--tds-select-option-padding-block);
2426
- padding-inline:var(--tds-select-option-padding-inline);
2427
- overflow:hidden;
2428
- text-overflow:ellipsis;
2429
- font-size:var(--tds-select-option-font-size);
2430
- line-height:1;
2431
- color:var(--tds-select-option-color);
2432
- white-space:nowrap;
2433
- cursor:default;
2434
- border-radius:var(--tds-select-option-border-radius);
2541
+ .tds-sidenav-item:has(.tds-sidenav-section){
2542
+ display:flex;
2543
+ flex-direction:column;
2544
+ gap:var(--t-spacing-half);
2435
2545
  }
2436
2546
 
2437
- :is(.tds-select :is(li[role="option"],option:not([hidden]))):focus-visible{
2438
- outline:0;
2439
- }
2547
+ .tds-sidenav-item .tds-sidenav-section-list{
2548
+ --tds-sidenav-item-depth:1;
2549
+ gap:0;
2550
+ }
2440
2551
 
2441
- :is(.tds-select :is(li[role="option"],option:not([hidden]))):is(:focus,:hover,.tds-select-option--active):not([disabled],[aria-disabled="true"]){
2442
- background:var(--tds-select-option-background-hover);
2552
+ .tds-sidenav-action--toggle + :is(.tds-sidenav-item .tds-sidenav-section-list){
2553
+ visibility:hidden;
2554
+ block-size:0;
2555
+ overflow-y:clip;
2556
+ opacity:0;
2557
+ transition:content-visibility var(--t-duration-400) allow-discrete, opacity var(--t-duration-400), block-size var(--t-duration-400);
2443
2558
  }
2444
2559
 
2445
- :is(.tds-select :is(li[role="option"],option:not([hidden]))):is([aria-selected="true"],:checked):not([disabled],[aria-disabled="true"]){
2446
- background:var(--tds-select-option-background-active);
2560
+ :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list{
2561
+ --tds-sidenav-item-depth:2;
2447
2562
  }
2448
2563
 
2449
- :is(.tds-select :is(li[role="option"],option:not([hidden]))):is([aria-disabled="true"],:disabled){
2450
- color:var(--t-form-color-disabled);
2451
- cursor:not-allowed;
2564
+ :is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
2565
+ min-height:var(--t-element-size-2xl);
2566
+ padding-block:9px;
2567
+ padding-left:calc((var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth)) + var(--tds-sidenav-indent) + var(--t-spacing-fourth));
2568
+ line-height:1;
2569
+ background-color:transparent;
2452
2570
  }
2453
2571
 
2454
- :is(.tds-select :is(li[role="option"],option:not([hidden]))):is([aria-disabled="true"],:disabled):is(:focus,:hover){
2455
- background:transparent;
2572
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::before{
2573
+ position:absolute;
2574
+ top:0;
2575
+ bottom:0;
2576
+ left:calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
2577
+ width:2px;
2578
+ content:"";
2579
+ background-color:var(--tds-sidenav-item-nested-border-color);
2580
+ transition:var(--tds-sidenav-item-transition);
2456
2581
  }
2457
2582
 
2458
- .tds-select :is(li[role="presentation"],legend){
2459
- position:sticky;
2460
- inset-block-start:calc(var(--tds-select-dropdown-padding) * -1);
2461
- z-index:1;
2462
- float:inline-start;
2463
- inline-size:100%;
2464
- padding-block:var(--tds-select-group-label-padding-block);
2465
- padding-inline:var(--tds-select-group-label-padding-inline);
2466
- container-type:scroll-state;
2467
- font-size:var(--tds-select-group-label-font-size);
2468
- font-weight:var(--tds-select-group-label-font-weight);
2469
- letter-spacing:var(--tds-select-group-label-letter-spacing);
2470
- background:var(--tds-select-group-label-background);
2471
- text-box:trim-both cap alphabetic;
2472
- }
2473
-
2474
- :is(.tds-select :is(li[role="presentation"],legend)) span{
2475
- display:inline-flex;
2476
- gap:var(--t-spacing-half);
2477
- align-items:center;
2478
- color:var(--tds-select-group-label-color);
2479
- transition:var(--tds-select-group-label-transition);
2480
- }
2481
-
2482
- @container scroll-state(stuck){
2483
-
2484
- :is(.tds-select :is(li[role="presentation"],legend)) span{
2485
- color:var(--tds-select-group-label-color-stuck);
2486
- }
2487
-
2488
- @media (forced-colors: active){
2583
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::after{
2584
+ position:absolute;
2585
+ inset:0 0 0 calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
2586
+ z-index:-1;
2587
+ height:100%;
2588
+ content:"";
2589
+ background-color:var(--tds-sidenav-item-nested-background);
2590
+ border-radius:0 var(--t-border-radius) var(--t-border-radius) 0;
2591
+ transition:var(--tds-sidenav-item-transition);
2592
+ }
2489
2593
 
2490
- :is(.tds-select :is(li[role="presentation"],legend)) span{
2491
- color:var(--tds-select-group-label-color-stuck);
2492
- }
2493
- }
2594
+ :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)){
2595
+ display:block;
2596
+ text-align:left;
2597
+ white-space:normal;
2494
2598
  }
2495
2599
 
2496
- .tds-select.tds-select--lg{
2497
- --tds-select-min-height:var(--t-container-size-lg);
2498
- --tds-select-font-size:var(--t-font-size-lg);
2499
- }
2600
+ :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{
2601
+ --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-hover);
2602
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-hover);
2603
+ }
2500
2604
 
2501
- @media (prefers-reduced-motion: reduce){
2605
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):active{
2606
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-active);
2607
+ }
2502
2608
 
2503
- .tds-select{
2504
- --tds-select-transition-property:none;
2505
- --tds-select-dropdown-transition:none;
2506
- --tds-select-dropdown-scroll-behavior:auto;
2507
- --tds-select-dropdown-closed-translate:none;
2508
- --tds-select-dropdown-open-translate:none;
2509
- --tds-select-caret-transition:none;
2510
- }
2511
- }
2609
+ .selected:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
2610
+ --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-selected);
2611
+ font-weight:var(--t-font-weight-medium);
2612
+ }
2512
2613
 
2513
- .tds-select-description{
2614
+ .tds-sidenav-responsive-header{
2514
2615
  display:flex;
2515
- gap:var(--t-spacing-half);
2516
- align-items:flex-start;
2517
- margin:0;
2518
- font-size:var(--t-font-size-sm);
2519
- line-height:1.35;
2520
- color:var(--tds-select-description-color, var(--t-text-color-secondary));
2521
- cursor:text;
2616
+ gap:var(--t-spacing-2);
2617
+ align-items:center;
2618
+ width:100%;
2522
2619
  }
2523
2620
 
2524
- .tds-select-description .tds-select-description-invalid-icon{
2525
- display:var(--tds-select-description-invalid-icon-display, none);
2526
- flex-shrink:0;
2527
- margin-block-start:calc(.5lh - .5em);
2528
- line-height:1.35;
2621
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle{
2622
+ order:0;
2529
2623
  }
2530
2624
 
2531
- .tds-select > .tds-select-hidden-select{
2532
- position:absolute;
2533
- inline-size:1px;
2534
- block-size:1px;
2535
- padding:0;
2536
- margin:0;
2537
- pointer-events:none;
2538
- opacity:0;
2539
- }
2540
-
2541
- .tds-select:has(> button){
2542
- anchor-scope:--tds-select-anchor;
2543
- }
2625
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-label{
2626
+ flex:1;
2627
+ order:1;
2628
+ margin:0;
2629
+ font-size:var(--t-font-size-lg);
2630
+ font-weight:var(--t-font-weight-medium);
2631
+ color:var(--t-text-color-headline);
2632
+ }
2544
2633
 
2545
- .tds-select:has( > button) > button{
2546
- display:block;
2547
- padding-inline-end:calc(var(--tds-select-caret-size) + var(--tds-select-caret-inline-offset) + .75ch);
2548
- anchor-name:--tds-select-anchor;
2634
+ @media (max-width: 719px){
2635
+ .tds-sidenav-collapse{
2636
+ z-index:10001;
2637
+ display:none;
2638
+ max-width:min(448px, calc(100vw - 48px));
2639
+ padding:0;
2640
+ margin:12px 0;
2641
+ position-area:bottom span-right;
2549
2642
  overflow:hidden;
2550
- text-overflow:ellipsis;
2551
- color:var(--tds-select-placeholder-color);
2552
- white-space:nowrap;
2553
- background-image:none;
2554
- 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);
2555
- -webkit-tap-highlight-color:transparent;
2643
+ outline:0;
2644
+ background:var(--t-surface-color-card);
2645
+ border:0;
2646
+ border-radius:6px;
2647
+ box-shadow:0 8px 20px 0 rgba(0, 0, 0, .25);
2648
+ opacity:var(--tds-sidenav-collapse-open-opacity);
2649
+ transform:var(--tds-sidenav-collapse-open-transform);
2650
+ transition:var(--tds-sidenav-collapse-transition-enter);
2651
+ will-change:transform;
2556
2652
  }
2557
2653
 
2558
- :is(.tds-select:has( > button) > button)::after{
2559
- position:absolute;
2560
- inset-block:0;
2561
- inset-inline-end:var(--tds-select-caret-inline-offset);
2562
- width:var(--tds-select-caret-size);
2563
- height:var(--tds-select-caret-size);
2564
- margin-block:auto;
2565
- line-height:1;
2566
- pointer-events:none;
2567
- content:var(--tds-select-background-image);
2568
- transform:rotate(0);
2569
- transition:var(--tds-select-caret-transition);
2570
- }
2571
-
2572
- .tds-select:has( > button):has([role="option"][aria-selected="true"]) > button{
2573
- color:var(--tds-select-color);
2654
+ .tds-sidenav-scroll-container{
2655
+ --webkit-overflow-scrolling:touch;
2656
+ display:block;
2657
+ width:100%;
2658
+ height:-moz-fit-content;
2659
+ height:fit-content;
2660
+ padding:var(--t-spacing-2);
2661
+ overflow-y:auto;
2574
2662
  }
2575
2663
 
2576
- .tds-select:has( > button) [popover]{
2577
- inset:auto;
2578
- inline-size:-moz-max-content;
2579
- inline-size:max-content;
2580
- min-inline-size:anchor-size(width);
2581
- max-inline-size:100vi;
2582
- max-block-size:min(50vh, 20rem);
2583
- padding:var(--tds-select-dropdown-padding);
2584
- margin-block:var(--tds-select-dropdown-margin-block);
2585
- position-area:block-end span-inline-start;
2586
- position-anchor:--tds-select-anchor;
2587
- position-try-fallbacks:flip-block, flip-inline;
2588
- overflow:auto;
2589
- overflow-x:hidden;
2590
- scroll-behavior:var(--tds-select-dropdown-scroll-behavior);
2591
- overscroll-behavior:none;
2592
- -webkit-user-select:none;
2593
- -moz-user-select:none;
2594
- user-select:none;
2595
- scroll-padding-top:calc(var(--tds-select-group-label-padding-block-start) + var(--tds-select-group-label-font-size) + var(--t-spacing-2));
2596
- scrollbar-color:var(--tds-select-dropdown-scrollbar-color);
2597
- scrollbar-width:var(--tds-select-dropdown-scrollbar-width);
2598
- background:var(--tds-select-dropdown-background-color);
2599
- border:var(--tds-select-dropdown-border);
2600
- border-radius:var(--tds-select-dropdown-border-radius);
2601
- box-shadow:var(--tds-select-dropdown-box-shadow);
2602
- opacity:var(--tds-select-dropdown-open-opacity);
2603
- translate:var(--tds-select-dropdown-open-translate);
2604
- transition:var(--tds-select-dropdown-transition);
2664
+ .tds-sidenav-item :is(a, button) :is(.prefix){
2665
+ display:none;
2605
2666
  }
2606
-
2607
- :is(.tds-select:has( > button) [popover]):not(:popover-open){
2608
- opacity:var(--tds-select-dropdown-closed-opacity);
2609
- translate:var(--tds-select-dropdown-closed-translate);
2667
+ @supports selector(:popover-open){
2668
+ .tds-sidenav-collapse:popover-open{
2669
+ display:flex;
2610
2670
  }
2611
2671
 
2612
- :is(.tds-select:has( > button) [popover]) ul{
2613
- padding:0;
2614
- margin:0;
2615
- list-style:none;
2672
+ .tds-sidenav-collapse:not(:popover-open){
2673
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
2674
+ transition:var(--tds-sidenav-collapse-transition-exit);
2616
2675
  }
2617
2676
 
2618
- @starting-style{
2619
- :is(.tds-select:has( > button) [popover]):popover-open{
2620
- opacity:var(--tds-select-dropdown-closed-opacity);
2621
- translate:var(--tds-select-dropdown-closed-translate);
2677
+ @starting-style{
2678
+ .tds-sidenav-collapse:popover-open{
2679
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
2680
+ transform:var(--tds-sidenav-collapse-closed-transform);
2622
2681
  }
2623
2682
  }
2624
-
2625
- @supports ((-webkit-appearance: base-select) or (-moz-appearance: base-select) or (appearance: base-select)){
2626
- .tds-select select:has(> button){
2627
- padding-inline-end:0;
2628
- background-image:none;
2629
2683
  }
2630
- @media (hover) and (pointer: fine){
2631
- :is(.tds-select select:has( > button)),:is(.tds-select select:has( > button))::picker(select){
2632
- padding-block:0;
2633
- -webkit-appearance:base-select;
2634
- -moz-appearance:base-select;
2635
- appearance:base-select;
2636
- }
2637
- }
2638
- :is(.tds-select select:has( > button))::picker-icon{
2639
- flex-shrink:0;
2640
- width:var(--tds-select-caret-size);
2641
- height:var(--tds-select-caret-size);
2642
- margin-inline-end:var(--tds-select-caret-inline-offset);
2643
- line-height:1;
2644
- content:var(--tds-select-background-image);
2645
- transition:var(--tds-select-caret-transition);
2646
- }
2647
-
2648
- :is(.tds-select select:has( > button))::picker(select):not(:popover-open){
2649
- opacity:var(--tds-select-dropdown-closed-opacity);
2650
- translate:var(--tds-select-dropdown-closed-translate);
2651
- }
2652
-
2653
- :is(.tds-select select:has( > button)):open,:is(.tds-select select:has( > button)):focus-within{
2654
- outline-color:var(--t-focus-ring-color);
2655
- outline-offset:var(--t-focus-ring-offset);
2656
- border-color:var(--tds-select-border-color-active);
2657
- }
2658
-
2659
- :is(.tds-select select:has( > button)):open::picker-icon{
2660
- opacity:1;
2661
- transform:rotate(.5turn);
2684
+ @supports not selector(:popover-open){
2685
+ .tds-sidenav-collapse.\:popover-open{
2686
+ display:flex;
2662
2687
  }
2663
2688
 
2664
- :is(.tds-select select:has( > button)) selectedcontent{
2665
- overflow:hidden;
2666
- text-overflow:ellipsis;
2667
- line-height:calc(var(--tds-select-min-height) - 2px);
2668
- white-space:nowrap;
2689
+ .tds-sidenav-collapse:not(.\:popover-open){
2690
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
2691
+ transition:var(--tds-sidenav-collapse-transition-exit);
2669
2692
  }
2693
+ }
2694
+ }
2670
2695
 
2671
- :is(.tds-select select:has( > button)):has(option[hidden][disabled][value=""]:checked) > button{
2672
- color:var(--tds-select-placeholder-color);
2673
- }
2696
+ @media (min-width: 720px){
2697
+ .tds-sidenav-responsive-header{
2698
+ display:none;
2699
+ }
2700
+ }
2674
2701
 
2675
- :is(.tds-select select:has( > button))::picker(select){
2676
- inset:auto;
2677
- inline-size:-moz-max-content;
2678
- inline-size:max-content;
2679
- min-inline-size:anchor-size(width);
2680
- max-inline-size:100vi;
2681
- padding:var(--tds-select-dropdown-padding);
2682
- margin-block:var(--tds-select-dropdown-margin-block);
2683
- position-area:block-end span-inline-start;
2684
- position-try-fallbacks:flip-block, flip-inline;
2685
- overflow:auto;
2686
- overflow-x:hidden;
2687
- scroll-behavior:var(--tds-select-dropdown-scroll-behavior);
2688
- overscroll-behavior:none;
2689
- -webkit-user-select:none;
2690
- -moz-user-select:none;
2691
- user-select:none;
2692
- scrollbar-color:var(--tds-select-dropdown-scrollbar-color);
2693
- scrollbar-width:var(--tds-select-dropdown-scrollbar-width);
2694
- background:var(--tds-select-dropdown-background-color);
2695
- border:var(--tds-select-dropdown-border);
2696
- border-radius:var(--tds-select-dropdown-border-radius);
2697
- box-shadow:var(--tds-select-dropdown-box-shadow);
2698
- opacity:var(--tds-select-dropdown-open-opacity);
2699
- translate:var(--tds-select-dropdown-open-translate);
2700
- transition:var(--tds-select-dropdown-transition);
2702
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
2703
+ display:none;
2701
2704
  }
2702
2705
 
2703
- :is(.tds-select select:has( > button)) option::checkmark{
2704
- display:none;
2706
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
2707
+ display:block;
2705
2708
  }
2706
2709
 
2707
- @starting-style{
2708
- :is(.tds-select select:has( > button))::picker(select):popover-open{
2709
- opacity:var(--tds-select-dropdown-closed-opacity);
2710
- translate:var(--tds-select-dropdown-closed-translate);
2711
- }
2710
+ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
2711
+ display:flex;
2712
+ flex-direction:column;
2712
2713
  }
2713
- }
2714
2714
 
2715
2715
  .tds-loading-spinner{
2716
2716
  --tds-loading-spinner-size:1.25em;