@planningcenter/tapestry 3.4.1-rc.0 → 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 (23) 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/index.css +1 -1
  16. package/dist/index.css.map +1 -1
  17. package/dist/reactRender.css +1632 -1632
  18. package/dist/reactRender.css.map +1 -1
  19. package/dist/reactRenderLegacy.css +1632 -1632
  20. package/dist/reactRenderLegacy.css.map +1 -1
  21. package/dist/unstable.css +1 -1
  22. package/dist/unstable.css.map +1 -1
  23. 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,637 +578,691 @@ 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
- }
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
+ }
1039
835
 
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
- }
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
+ }
1044
841
 
1045
- .tds-checkbox:has(input:required) label::after{
1046
- margin-left:.25ch;
1047
- color:var(--t-text-color-status-error);
1048
- content:"*";
1049
- }
842
+ .tds-date-picker-calendar-cell-button[data-disabled]{
843
+ color:var(--t-text-color-disabled);
844
+ }
1050
845
 
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);
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;
849
+ }
1054
850
 
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;
851
+ .tds-date-picker-calendar-cell-button[data-focus-visible][data-selected]{
852
+ outline-offset:var(--t-focus-ring-offset);
1058
853
  }
1059
854
 
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);
855
+ .tds-date-picker-popover--lg{
856
+ --tds-date-picker-popover-font-size:var(--t-font-size-lg);
857
+ }
858
+
859
+
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;
1062
863
  }
1063
864
 
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;
1075
- }
865
+ [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
866
+ inline-size:1em;
867
+ block-size:2em;
868
+ }
1076
869
 
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);
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);
1082
875
  }
1083
876
 
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;
877
+ .tds-input--auto-width input{
878
+ field-sizing:content;
879
+ inline-size:auto;
880
+ }
1090
881
  }
1091
882
 
1092
- .tds-date-picker{
1093
- --tds-date-picker-button-offset:4px;
883
+ @layer t-critical{
884
+ tds-page-header:not(.hydrated){
885
+ display:none;
886
+ }
1094
887
  }
1095
888
 
1096
- .tds-date-picker--lg{
1097
- --tds-date-picker-button-offset:5px;
1098
- }
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;
1099
907
 
1100
- .tds-date-picker-field[data-focus-within]:has(.tds-date-picker-button[data-focused]){
1101
- outline-color:transparent;
1102
- outline-offset:0;
1103
- border-color:var(--tds-field-border-color);
1104
- }
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);
1105
910
 
1106
- .tds-date-picker-field:has(.tds-date-picker-input[data-readonly]) .tds-date-picker-button{
1107
- display:none;
1108
- }
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);
1109
914
 
1110
- .tds-date-picker-input{
1111
- flex:1;
1112
- padding-block:var(--tds-field-padding-block);
1113
- padding-inline:var(--tds-field-padding-inline);
1114
- overflow:auto clip;
1115
- font-variant-numeric:tabular-nums;
1116
- text-wrap:nowrap;
1117
- scrollbar-width:none;
1118
- }
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);
1119
917
 
1120
- .tds-date-picker-input:has( + .tds-date-picker-button){
1121
- padding-inline-end:0;
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);
1122
927
  }
1123
928
 
1124
- .tds-date-picker-button{
1125
- flex-shrink:0;
1126
- align-self:center;
1127
- inline-size:calc(var(--tds-field-min-height) - (var(--tds-date-picker-button-offset) * 2));
1128
- block-size:calc(var(--tds-field-min-height) - (var(--tds-date-picker-button-offset) * 2));
1129
- padding:0;
1130
- margin-inline-end:var(--tds-date-picker-button-offset);
1131
- }
929
+ .tds-page-header--profile{
930
+ --tds-page-header-padding-y:20px;
931
+ }
1132
932
 
1133
- .tds-date-picker-popover{
1134
- --tds-date-picker-popover-font-size:var(--t-font-size-md);
1135
- --tds-date-picker-popover-padding:var(--t-spacing-1-half);
1136
- --tds-date-picker-popover-background-color:var(--t-surface-color-card);
1137
- --tds-date-picker-popover-shadow:hsl(0, 0%, 0%, .05) 0 10px 15px -3px, hsl(0, 0%, 0%, .05) 0 4px 6px -4px;
1138
- --tds-date-picker-popover-interactive-timing-function:var(--t-ease-in-out);
1139
- --tds-date-picker-popover-interactive-duration:var(--t-duration-200);
1140
- --tds-date-picker-popover-interactive-property:color, background-color, border-color;
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
+ }
1141
939
 
1142
- position:relative;
1143
- overflow:hidden;
1144
- background-color:var(--tds-date-picker-popover-background-color);
1145
- border:var(--t-border-width) solid var(--t-border-color);
1146
- border-radius:var(--t-border-radius);
1147
- box-shadow:var(--tds-date-picker-popover-shadow);
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
+ }
1148
960
  }
1149
961
 
1150
- .tds-date-picker-popover[data-entering]{
1151
- animation:tds-date-picker-popover var(--t-duration-300) var(--t-ease-out);
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);
969
+ }
970
+
971
+ .tds-page-header:not(.has-nav){
972
+ padding-bottom:var(--tds-page-header-padding-y);
1152
973
  }
1153
974
 
1154
- .tds-date-picker-popover[data-exiting]{
1155
- animation:tds-date-picker-popover var(--t-duration-200) var(--t-ease-in) reverse;
975
+ .tds-page-header.inactive{
976
+ background:var(--tds-page-header-background-color-inactive);
1156
977
  }
1157
978
 
1158
- .tds-date-picker-popover[data-entering],.tds-date-picker-popover[data-exiting]{
1159
- will-change:opacity, transform;
979
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
980
+ width:100%;
1160
981
  }
1161
982
 
1162
- @keyframes tds-date-picker-popover{
1163
- from{
1164
- opacity:0;
1165
- transform:translateY(-8px);
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;
1166
990
  }
1167
- }
1168
991
 
1169
- @media (prefers-reduced-motion: reduce){
1170
- .tds-date-picker-popover[data-entering],.tds-date-picker-popover[data-exiting]{
1171
- animation:none;
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);
1172
1000
  }
1173
- }
1174
1001
 
1175
- .tds-date-picker-overlay{
1176
- position:absolute;
1177
- inset:0;
1178
- z-index:1;
1179
- display:flex;
1180
- background-color:var(--tds-date-picker-popover-background-color);
1181
- }
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
+ }
1182
1065
 
1183
- .tds-date-picker-overlay-list{
1184
- display:grid;
1185
- flex:1;
1186
- grid-template-columns:repeat(3, 1fr);
1187
- gap:var(--t-spacing-half);
1188
- padding-inline:var(--tds-date-picker-popover-padding);
1189
- outline:0;
1190
- scrollbar-color:var(--t-fill-color-transparency-dark-030) transparent;
1191
- scrollbar-width:thin;
1192
- }
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
+ }
1193
1070
 
1194
- .tds-date-picker-overlay--month .tds-date-picker-overlay-list{
1195
- grid-template-rows:repeat(4, 1fr);
1196
- padding-bottom:var(--tds-date-picker-popover-padding);
1197
- }
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
+ }
1198
1081
 
1199
- .tds-date-picker-overlay--year .tds-date-picker-overlay-list{
1200
- grid-auto-rows:var(--t-container-size-xl);
1201
- padding-right:var(--t-spacing-1);
1202
- overflow-y:auto;
1203
- scroll-padding-block:calc(var(--t-focus-ring-width) + var(--t-focus-ring-offset));
1204
- }
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
+ }
1205
1087
 
1206
- .tds-date-picker-overlay-cell{
1088
+ .tds-page-header__title-bar{
1207
1089
  display:flex;
1208
- align-items:center;
1209
- justify-content:center;
1210
- font-family:inherit;
1211
- font-size:var(--tds-date-picker-popover-font-size);
1212
- color:var(--t-text-color);
1213
- cursor:pointer;
1214
- outline:0;
1215
- background-color:transparent;
1216
- border:0;
1217
- border-radius:var(--t-border-radius-md);
1218
- transition-timing-function:var(--tds-date-picker-popover-interactive-timing-function);
1219
- transition-duration:var(--t-duration-100);
1220
- transition-property:var(--tds-date-picker-popover-interactive-property);
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);
1221
1095
  }
1222
1096
 
1223
- .tds-date-picker-overlay-cell[data-hovered]{
1224
- background-color:var(--t-fill-color-button-neutral-outline-hover);
1097
+ .tds-page-header--profile > .tds-page-header__title-bar{
1098
+ align-items:center;
1225
1099
  }
1226
1100
 
1227
- .tds-date-picker-overlay-cell[data-pressed]{
1228
- background-color:var(--t-fill-color-button-neutral-outline-active);
1229
- }
1101
+ .tds-page-header__primary{
1102
+ width:100%;
1103
+ }
1230
1104
 
1231
- .tds-date-picker-overlay-cell[data-selected]{
1232
- font-weight:var(--t-font-weight-semibold);
1233
- color:var(--t-text-color-inverted);
1234
- background-color:var(--t-fill-color-interaction);
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;
1235
1112
  }
1236
1113
 
1237
- .tds-date-picker-overlay-cell[data-focus-visible]{
1238
- outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
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%;
1239
1120
  }
1240
1121
 
1241
- .tds-date-picker-overlay-cell[data-selected][data-focus-visible]{
1242
- outline-offset:var(--t-focus-ring-offset);
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;
1243
1127
  }
1128
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
1129
+ width:auto;
1130
+ }
1244
1131
 
1245
- .tds-date-picker-calendar-heading{
1246
- display:flex;
1247
- flex:1;
1248
- gap:var(--t-spacing-1);
1249
- align-items:center;
1250
- justify-content:flex-start;
1251
- padding-inline-start:4px;
1132
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
1133
+ justify-content:flex-end;
1134
+ }
1252
1135
  }
1253
1136
 
1254
- .tds-date-picker-calendar-overlay-trigger{
1255
- --_background-color:transparent;
1256
- position:relative;
1257
- padding:0;
1258
- font-family:inherit;
1259
- font-size:var(--tds-date-picker-popover-font-size);
1260
- font-weight:var(--t-font-weight-semibold);
1261
- font-feature-settings:"ss01", "ss02";
1262
- color:var(--t-text-color);
1263
- cursor:pointer;
1264
- outline:0;
1265
- background-color:transparent;
1266
- border:0;
1267
- border-radius:var(--t-border-radius-md);
1268
- isolation:isolate;
1269
- transition-timing-function:var(--tds-date-picker-popover-interactive-timing-function);
1270
- transition-duration:var(--tds-date-picker-popover-interactive-duration);
1271
- transition-property:var(--tds-date-picker-popover-interactive-property);
1137
+ .tds-page-header-phone,
1138
+ .tds-page-header-email{
1139
+ color:var(--tds-page-header-color);
1140
+ white-space:nowrap;
1272
1141
  }
1273
1142
 
1274
- .tds-date-picker-calendar-overlay-trigger::before{
1275
- position:absolute;
1276
- inset:calc(var(--t-spacing-half) * -1);
1277
- z-index:-1;
1278
- pointer-events:inherit;
1279
- content:"";
1280
- background-color:var(--_background-color);
1281
- border-radius:inherit;
1282
- }
1283
-
1284
- .tds-date-picker-calendar-overlay-trigger[data-hovered]{
1285
- --_background-color:var(--t-fill-color-button-neutral-outline-hover);
1286
- }
1143
+ .tds-page-header-email{
1144
+ max-width:100%;
1145
+ overflow:hidden;
1146
+ text-overflow:ellipsis;
1147
+ }
1287
1148
 
1288
- .tds-date-picker-calendar-overlay-trigger[data-pressed]{
1289
- --_background-color:var(--t-fill-color-button-neutral-outline-active);
1149
+ @keyframes indicator-pulse{
1150
+ 0%{
1151
+ opacity:.3;
1152
+ transform:scale(.9);
1290
1153
  }
1291
1154
 
1292
- .tds-date-picker-calendar-overlay-trigger[data-focus-visible]{
1293
- outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
1294
- outline-offset:var(--t-focus-ring-offset);
1155
+ 100%{
1156
+ opacity:0;
1157
+ transform:scale(1.75);
1295
1158
  }
1296
-
1297
- .tds-date-picker-calendar{
1298
- inline-size:-moz-fit-content;
1299
- inline-size:fit-content;
1300
- font-size:var(--tds-date-picker-popover-font-size);
1301
1159
  }
1302
1160
 
1303
- .tds-date-picker-calendar-body{
1304
- position:relative;
1305
- padding:var(--tds-date-picker-popover-padding);
1306
- padding-block-start:0;
1307
- }
1308
-
1309
- .tds-date-picker-calendar-header{
1310
- display:flex;
1311
- align-items:center;
1312
- justify-content:space-between;
1313
- padding:var(--tds-date-picker-popover-padding);
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");
1314
1165
  }
1315
1166
 
1316
- .tds-date-picker-calendar-title{
1317
- padding:var(--t-spacing-half) var(--t-spacing-1);
1318
- font-size:var(--tds-date-picker-popover-font-size);
1319
- font-weight:var(--t-font-weight-semibold);
1320
- }
1167
+ @supports (x: attr(x type(*))){
1321
1168
 
1322
- .tds-date-picker-calendar-nav{
1323
- display:flex;
1324
- align-items:center;
1325
- justify-content:center;
1326
- padding:var(--t-spacing-half);
1327
- font-size:.875em;
1328
- color:var(--t-text-color);
1329
- cursor:pointer;
1330
- outline:0;
1331
- background-color:transparent;
1332
- border:0;
1333
- border-radius:var(--t-border-radius-md);
1334
- transition-timing-function:var(--tds-date-picker-popover-interactive-timing-function);
1335
- transition-duration:var(--tds-date-picker-popover-interactive-duration);
1336
- transition-property:var(--tds-date-picker-popover-interactive-property);
1169
+ .tds-input textarea{
1170
+ --tds-input-min-height:calc((attr(rows type(<number>), 3) * 1lh) + (var(--tds-input-padding-block) * 2) + 2px);
1337
1171
  }
1338
-
1339
- .tds-date-picker-calendar-nav[data-hovered]{
1340
- background-color:var(--t-fill-color-button-neutral-outline-hover);
1341
- }
1342
-
1343
- .tds-date-picker-calendar-nav[data-pressed]{
1344
- background-color:var(--t-fill-color-button-neutral-outline-active);
1345
- }
1346
-
1347
- .tds-date-picker-calendar-nav[data-focus-visible]{
1348
- outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
1349
- outline-offset:var(--t-focus-ring-offset);
1350
- }
1351
-
1352
- .tds-date-picker-calendar-nav[data-disabled]{
1353
- color:var(--t-text-color-disabled);
1354
- cursor:not-allowed;
1355
1172
  }
1356
1173
 
1357
- .tds-date-picker-calendar-grid{
1358
- font-feature-settings:"ss01", "ss02";
1359
- border-collapse:collapse;
1360
- }
1174
+ .tds-input.tds-textarea--resize-vertical textarea{
1175
+ resize:vertical;
1176
+ }
1361
1177
 
1362
- .tds-date-picker-calendar-grid :where(thead,tbody,tr,td,th){
1363
- padding:0;
1364
- border:0;
1365
- }
1178
+ .tds-input.tds-textarea--resize-none textarea{
1179
+ resize:none;
1180
+ }
1366
1181
 
1367
- .tds-date-picker-calendar-header-cell{
1368
- padding-block-end:var(--t-spacing-1);
1369
- font-size:.875em;
1370
- font-weight:var(--t-font-weight-medium);
1371
- color:var(--t-text-color-secondary);
1372
- text-align:center;
1373
- -webkit-user-select:none;
1374
- -moz-user-select:none;
1375
- user-select:none;
1376
- }
1182
+ .tds-input.tds-textarea--resize-auto textarea{
1183
+ resize:vertical;
1184
+ }
1377
1185
 
1378
- .tds-date-picker-calendar-cell-button{
1379
- position:relative;
1380
- display:flex;
1381
- align-items:center;
1382
- justify-content:center;
1383
- inline-size:2.25em;
1384
- block-size:2.25em;
1385
- color:var(--t-text-color);
1386
- cursor:pointer;
1387
- -webkit-user-select:none;
1388
- -moz-user-select:none;
1389
- user-select:none;
1390
- outline:0;
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;
1391
1208
  }
1392
1209
 
1393
- .tds-date-picker-calendar-cell-button::before{
1394
- position:absolute;
1395
- inset:0;
1396
- z-index:-1;
1397
- content:"";
1398
- background-color:var(--_background-color);
1399
- border-radius:50%;
1400
- }
1210
+ @media (pointer: fine){
1211
+ :is(.tds-input textarea)::-webkit-scrollbar{
1212
+ width:12px;
1213
+ height:12px;
1214
+ cursor:default;
1215
+ }
1401
1216
 
1402
- .tds-date-picker-calendar-cell-button[data-today]::before{
1403
- box-shadow:inset 0 0 0 1.5px var(--t-border-color);
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);
1404
1223
  }
1405
1224
 
1406
- .tds-date-picker-calendar-cell-button[data-outside-month]{
1407
- display:none;
1408
- }
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
+ }
1409
1228
 
1410
- .tds-date-picker-calendar-cell-button[data-hovered]{
1411
- --_background-color:var(--t-fill-color-button-neutral-outline-hover);
1412
- }
1229
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
1230
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
1231
+ }
1413
1232
 
1414
- .tds-date-picker-calendar-cell-button[data-pressed]{
1415
- --_background-color:var(--t-fill-color-button-neutral-outline-active);
1416
- }
1233
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
1234
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
1235
+ }
1417
1236
 
1418
- .tds-date-picker-calendar-cell-button[data-selected]{
1419
- --_background-color:var(--t-fill-color-interaction);
1420
- font-weight:var(--t-font-weight-semibold);
1421
- color:var(--t-text-color-inverted);
1422
- border-color:transparent;
1423
- }
1237
+ :is(.tds-input textarea)::-webkit-scrollbar-corner{
1238
+ background:var(--tds-input-scrollbar-surface-color);
1239
+ }
1424
1240
 
1425
- .tds-date-picker-calendar-cell-button[data-unavailable]{
1426
- color:var(--t-text-color-disabled);
1427
- text-decoration:line-through;
1428
- cursor:not-allowed;
1429
- }
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
+ }
1430
1246
 
1431
- .tds-date-picker-calendar-cell-button[data-disabled]{
1432
- color:var(--t-text-color-disabled);
1433
- }
1247
+ :is(.tds-input textarea)::-webkit-scrollbar-track{
1248
+ margin-block:var(--tds-input-scrollbar-track-margin-block);
1249
+ cursor:default;
1250
+ }
1434
1251
 
1435
- .tds-date-picker-calendar-cell-button[data-focus-visible]{
1436
- outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
1437
- outline-offset:-2px;
1438
- }
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
+ }
1439
1257
 
1440
- .tds-date-picker-calendar-cell-button[data-focus-visible][data-selected]{
1441
- outline-offset:var(--t-focus-ring-offset);
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
+ }
1442
1264
  }
1443
1265
 
1444
- .tds-date-picker-popover--lg{
1445
- --tds-date-picker-popover-font-size:var(--t-font-size-lg);
1446
- }
1447
-
1448
1266
  .tds-radio{
1449
1267
  --tds-radio-font-size:var(--t-font-size-md);
1450
1268
  --tds-radio-cursor:pointer;
@@ -1578,80 +1396,145 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1578
1396
  --tds-radio-description-line-height:1.3;
1579
1397
  }
1580
1398
 
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;
1404
+
1405
+ --tds-toggle-switch-label-color:var(--t-form-color);
1406
+
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);
1420
+ position:relative;
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;
1426
+ -webkit-user-select:none;
1427
+ -moz-user-select:none;
1428
+ user-select:none;
1429
+ }
1430
+
1431
+ .tds-toggle-switch input[type="checkbox"]{
1432
+ position:absolute;
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);
1445
+ }
1581
1446
 
1582
- :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{
1583
- -webkit-appearance:none;
1584
- appearance:none;
1447
+ :is(.tds-toggle-switch input[type="checkbox"]):focus-visible{
1448
+ --tds-toggle-switch-track-outline:var(--t-focus-ring-outline);
1585
1449
  }
1586
1450
 
1587
- [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
1588
- inline-size:1em;
1589
- block-size:2em;
1590
- }
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);
1461
+ }
1591
1462
 
1592
- @supports (field-sizing: content){
1593
- .tds-input--auto-width{
1594
- inline-size:-moz-fit-content;
1595
- inline-size:fit-content;
1596
- min-inline-size:min(100%, 122px);
1463
+ .tds-toggle-switch:not(:has(input:disabled)):has(input:hover){
1464
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-hover);
1597
1465
  }
1598
1466
 
1599
- .tds-input--auto-width input{
1600
- field-sizing:content;
1601
- inline-size:auto;
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)));
1602
1470
  }
1603
- }
1604
1471
 
1605
- .tds-number-stepper{
1606
- --tds-number-stepper-button-offset:4px;
1607
- --tds-number-stepper-button-gap:2px;
1608
- }
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
+ }
1609
1475
 
1610
- .tds-number-stepper--lg{
1611
- --tds-number-stepper-button-offset:5px;
1612
- --tds-number-stepper-button-gap:4px;
1613
- }
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;
1481
+ }
1614
1482
 
1615
- .tds-number-stepper-field:has([readonly]) .tds-number-stepper-button{
1616
- display:none;
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);
1617
1491
  }
1618
1492
 
1619
- .tds-number-stepper-input{
1620
- display:flex;
1621
- flex:1;
1622
- align-items:center;
1623
- min-inline-size:0;
1624
- padding-block:var(--tds-field-padding-block);
1625
- padding-inline:var(--tds-field-padding-inline);
1626
- font-family:inherit;
1627
- font-size:inherit;
1628
- color:inherit;
1629
- outline:0;
1630
- background:transparent;
1631
- border:0;
1632
- }
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);
1504
+ }
1633
1505
 
1634
- .tds-number-stepper-input::-webkit-inner-spin-button,.tds-number-stepper-input::-webkit-outer-spin-button{
1635
- margin:0;
1636
- -webkit-appearance:none;
1637
- appearance:none;
1506
+ @media (prefers-reduced-motion: reduce){
1507
+
1508
+ .tds-toggle-switch-track{
1509
+ --tds-toggle-switch-track-transition:none;
1510
+ --tds-toggle-switch-thumb-transition:none;
1511
+ }
1638
1512
  }
1639
1513
 
1640
- .tds-number-stepper-button{
1641
- flex-shrink:0;
1642
- align-self:center;
1643
- inline-size:calc(var(--tds-field-min-height) - (var(--tds-number-stepper-button-offset) * 2));
1644
- block-size:calc(var(--tds-field-min-height) - (var(--tds-number-stepper-button-offset) * 2));
1645
- padding:0;
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;
1646
1524
  }
1647
1525
 
1648
- .tds-number-stepper-button + .tds-number-stepper-button{
1649
- margin-inline-start:var(--tds-number-stepper-button-gap);
1650
- }
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
+ }
1651
1534
 
1652
- .tds-number-stepper-button:last-of-type{
1653
- margin-inline-end:var(--tds-number-stepper-button-offset);
1654
- }
1535
+ .tds-toggle-switch--hide-label{
1536
+ --tds-toggle-switch-display:inline-flex;
1537
+ }
1655
1538
 
1656
1539
  .tds-radio-group{
1657
1540
  --tds-radio-group-font-size:var(--t-font-size-md);
@@ -1736,111 +1619,13 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1736
1619
  --tds-radio-group-description-line-height:1.3;
1737
1620
  }
1738
1621
 
1739
- .tds-input:has(textarea){
1740
- --tds-input-padding-block:6px;
1741
- --tds-input-resizer-size:var(--t-element-size-sm);
1742
- --tds-input-resizer-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cg fill='none' stroke='%236f7784' stroke-linecap='round' stroke-width='1.25'%3E%3Cpath d='M5.5 13l7.5-7.5'/%3E%3Cpath d='M9 13l4-4'/%3E%3C/g%3E%3C/svg%3E");
1743
- }
1744
-
1745
- @supports (x: attr(x type(*))){
1746
-
1747
- .tds-input:has(textarea){
1748
- --tds-input-min-height:calc((attr(rows type(<number>), 3) * 1lh) + (var(--tds-input-padding-block) * 2) + 2px);
1749
- }
1750
- }
1751
-
1752
- .tds-input.tds-textarea--resize-vertical textarea{
1753
- resize:vertical;
1754
- }
1755
-
1756
- .tds-input.tds-textarea--resize-none textarea{
1757
- resize:none;
1758
- }
1759
-
1760
- .tds-input.tds-textarea--resize-auto textarea{
1761
- resize:vertical;
1762
- }
1763
-
1764
- @supports (field-sizing: content){
1765
- .tds-input.tds-textarea--resize-auto textarea{
1766
- field-sizing:content;
1767
- resize:none;
1768
- }
1769
- }
1770
-
1771
- .tds-input textarea{
1772
- --tds-input-scrollbar-thumb-color-default:var(--t-fill-color-neutral-040);
1773
- --tds-input-scrollbar-thumb-color-hidden:transparent;
1774
- --tds-input-scrollbar-thumb-color-hover:var(--t-fill-color-neutral-030);
1775
- --tds-input-scrollbar-thumb-color-thumb-hover:var(--t-fill-color-neutral-020);
1776
- --tds-input-scrollbar-thumb-color-thumb-active:var(--t-fill-color-neutral-010);
1777
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-default);
1778
- --tds-input-scrollbar-surface-color:rgba(0, 0, 0, 0);
1779
- --tds-input-scrollbar-thumb-border-radius:999px;
1780
- --tds-input-scrollbar-thumb-border-width:3px;
1781
- --tds-input-scrollbar-track-margin-block:.125rem;
1782
- scrollbar-color:initial;
1783
- transition-timing-function:var(--t-ease-in-out);
1784
- transition-duration:var(--t-duration-200);
1785
- transition-property:var(--tds-input-transition-property), --tds-input-scrollbar-thumb-color;
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;
1786
1627
  }
1787
1628
 
1788
- @media (pointer: fine){
1789
- :is(.tds-input textarea)::-webkit-scrollbar{
1790
- width:12px;
1791
- height:12px;
1792
- cursor:default;
1793
- }
1794
-
1795
- :is(.tds-input textarea)::-webkit-scrollbar-thumb{
1796
- cursor:default;
1797
- background:var(--tds-input-scrollbar-thumb-color);
1798
- background-clip:content-box;
1799
- border:var(--tds-input-scrollbar-thumb-border-width) solid var(--tds-input-scrollbar-surface-color);
1800
- border-radius:var(--tds-input-scrollbar-thumb-border-radius);
1801
- }
1802
-
1803
- :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1804
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
1805
- }
1806
-
1807
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
1808
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
1809
- }
1810
-
1811
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
1812
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
1813
- }
1814
-
1815
- :is(.tds-input textarea)::-webkit-scrollbar-corner{
1816
- background:var(--tds-input-scrollbar-surface-color);
1817
- }
1818
-
1819
- :is(.tds-input textarea)::-webkit-resizer{
1820
- background:var(--tds-input-resizer-icon) no-repeat;
1821
- background-position:right bottom;
1822
- background-size:var(--tds-input-resizer-size) var(--tds-input-resizer-size);
1823
- }
1824
-
1825
- :is(.tds-input textarea)::-webkit-scrollbar-track{
1826
- margin-block:var(--tds-input-scrollbar-track-margin-block);
1827
- cursor:default;
1828
- }
1829
-
1830
- @supports (-moz-appearance: none){
1831
- :is(.tds-input textarea){
1832
- scrollbar-color:var(--tds-input-scrollbar-thumb-color-default) var(--tds-input-scrollbar-surface-color);
1833
- scrollbar-width:thin;
1834
- }
1835
-
1836
- @media (hover){
1837
- :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1838
- scrollbar-color:var(--tds-input-scrollbar-thumb-color-hover) var(--tds-input-scrollbar-surface-color);
1839
- }
1840
- }
1841
- }
1842
- }
1843
-
1844
1629
  .tds-select{
1845
1630
  --tds-select-border-color:var(--t-form-border-color);
1846
1631
  --tds-select-border-color-hover:var(--t-form-border-color-hover);
@@ -2281,436 +2066,651 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
2281
2066
  }
2282
2067
  }
2283
2068
 
2284
- .tds-toggle-switch{
2285
- --tds-toggle-switch-font-size:var(--t-font-size-md);
2286
- --tds-toggle-switch-cursor:pointer;
2287
- --tds-toggle-switch-display:inline-grid;
2288
- --tds-toggle-switch-line-height:1.4;
2069
+ .tds-input{
2070
+ --tds-input-border-color:var(--t-form-border-color);
2071
+ --tds-input-border-color-hover:var(--t-form-border-color-hover);
2072
+ --tds-input-background-color:var(--t-form-background-color);
2073
+ --tds-input-color:var(--t-form-color);
2074
+ --tds-input-font-size:var(--t-font-size-md);
2075
+ --tds-input-description-color:var(--t-text-color-secondary);
2076
+ --tds-input-description-invalid-icon-display:none;
2077
+ --tds-input-min-height:var(--t-container-size-md);
2078
+ --tds-input-padding-inline:var(--t-spacing-1);
2079
+
2080
+ --tds-input-transition-property:background-color, border-color, outline-color, outline-offset;
2081
+
2082
+ display:flex;
2083
+ flex-direction:column;
2084
+ gap:var(--t-spacing-half);
2085
+ }
2086
+
2087
+ .tds-input label{
2088
+ font-size:var(--t-font-size-md);
2089
+ font-weight:var(--t-font-weight-normal);
2090
+ color:var(--t-text-color);
2091
+ }
2092
+
2093
+ .tds-input :is(input,textarea){
2094
+ inline-size:100%;
2095
+ block-size:auto;
2096
+ min-block-size:var(--tds-input-min-height);
2097
+ padding-block:var(--tds-input-padding-block);
2098
+ padding-inline:var(--tds-input-padding-inline);
2099
+ font-family:inherit;
2100
+ font-size:var(--tds-input-font-size);
2101
+ color:var(--tds-input-color);
2102
+ -webkit-appearance:none;
2103
+ -moz-appearance:none;
2104
+ appearance:none;
2105
+ outline:var(--t-focus-ring-width) solid transparent;
2106
+ outline-offset:0;
2107
+ background-color:var(--tds-input-background-color);
2108
+ border:var(--t-form-border-width) solid var(--tds-input-border-color);
2109
+ border-radius:var(--t-form-border-radius);
2110
+ transition-timing-function:var(--t-ease-in-out);
2111
+ transition-duration:var(--t-duration-200);
2112
+ transition-property:var(--tds-input-transition-property);
2113
+ }
2114
+
2115
+ :is(.tds-input :is(input,textarea)):hover:not(:disabled,:focus-visible,[readonly]){
2116
+ border-color:var(--tds-input-border-color-hover);
2117
+ }
2118
+
2119
+ :is(.tds-input :is(input,textarea)):focus{
2120
+ outline-color:transparent;
2121
+ }
2122
+
2123
+ :is(.tds-input :is(input,textarea)):focus-visible{
2124
+ outline-color:var(--t-focus-ring-color);
2125
+ outline-offset:var(--t-focus-ring-offset);
2126
+ border-color:var(--t-form-border-color-focus);
2127
+ }
2128
+
2129
+ :is(.tds-input :is(input,textarea))::-moz-placeholder{
2130
+ color:var(--t-form-placeholder-color);
2131
+ -moz-user-select:none;
2132
+ user-select:none;
2133
+ }
2134
+
2135
+ :is(.tds-input :is(input,textarea))::placeholder{
2136
+ color:var(--t-form-placeholder-color);
2137
+ -webkit-user-select:none;
2138
+ -moz-user-select:none;
2139
+ user-select:none;
2140
+ }
2141
+
2142
+ @media (prefers-reduced-motion: reduce){
2143
+
2144
+ .tds-input :is(input,textarea){
2145
+ --tds-input-transition-property:none;
2146
+ }
2147
+ }
2148
+
2149
+ .tds-input.tds-input--invalid,.tds-input:has(:is(input,textarea):is(:user-invalid,[aria-invalid="true"])){
2150
+ --tds-input-background-color:var(--t-form-background-color-error);
2151
+ --tds-input-border-color:var(--t-form-border-color-error);
2152
+ --tds-input-border-color-hover:var(--t-form-border-color-error-hover);
2153
+ --tds-input-description-color:var(--t-text-color-status-error);
2154
+ --tds-input-description-invalid-icon-display:inline-block;
2155
+ }
2156
+
2157
+ .tds-input:has(:is(input,textarea):required) label::after{
2158
+ margin-left:.25ch;
2159
+ color:var(--t-text-color-status-error);
2160
+ content:"*";
2161
+ }
2162
+
2163
+ .tds-input:where(:has(:is(input,textarea):disabled)){
2164
+ --tds-input-border-color:var(--t-form-border-color-disabled);
2165
+ --tds-input-background-color:var(--t-form-background-color-disabled);
2166
+ --tds-input-color:var(--t-form-color-disabled);
2167
+ }
2289
2168
 
2290
- --tds-toggle-switch-label-color:var(--t-form-color);
2169
+ .tds-input:where(:has(:is(input,textarea):disabled)) :is(input,textarea){
2170
+ cursor:not-allowed;
2171
+ }
2291
2172
 
2292
- --tds-toggle-switch-track-width:var(--t-container-size-md);
2293
- --tds-toggle-switch-track-outline:none;
2294
- --tds-toggle-switch-track-height:var(--t-container-size-xs);
2295
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color);
2296
- --tds-toggle-switch-track-transition:background-color var(--t-duration-100) var(--t-ease-in-out);
2173
+ .tds-input:where(:has(:is(input,textarea)[readonly])){
2174
+ --tds-input-border-color:var(--t-form-border-color-readonly);
2175
+ --tds-input-background-color:var(--t-form-background-color-readonly);
2176
+ }
2297
2177
 
2298
- --tds-toggle-switch-thumb-size:var(--t-element-size-md);
2299
- --tds-toggle-switch-thumb-transform:translateX(0);
2300
- --tds-toggle-switch-thumb-transition:transform var(--t-duration-200) var(--t-ease-in-out);
2178
+ .tds-input:where(:has(:is(input,textarea)[readonly])) :is(input,textarea):focus{
2179
+ border-color:var(--tds-input-border-color-hover);
2180
+ }
2301
2181
 
2302
- --tds-toggle-switch-description-font-size:var(--t-font-size-sm);
2303
- --tds-toggle-switch-description-line-height:1.35;
2304
- --tds-toggle-switch-description-color:var(--t-text-color-secondary);
2305
- position:relative;
2182
+ .tds-input.tds-input--lg{
2183
+ --tds-input-min-height:var(--t-container-size-lg);
2184
+ --tds-input-font-size:var(--t-font-size-lg);
2185
+ }
2306
2186
 
2307
- display:var(--tds-toggle-switch-display);
2308
- grid-template-columns:auto;
2309
- grid-auto-columns:1fr;
2310
- gap:var(--t-spacing-fourth) 0;
2311
- -webkit-user-select:none;
2312
- -moz-user-select:none;
2313
- user-select:none;
2187
+ .tds-input-description{
2188
+ display:flex;
2189
+ gap:var(--t-spacing-half);
2190
+ align-items:flex-start;
2191
+ margin:0;
2192
+ font-size:var(--t-font-size-sm);
2193
+ line-height:1.35;
2194
+ color:var(--tds-input-description-color, var(--t-text-color-secondary));
2195
+ cursor:text;
2314
2196
  }
2315
2197
 
2316
- .tds-toggle-switch input[type="checkbox"]{
2317
- position:absolute;
2318
- width:var(--tds-toggle-switch-track-width);
2319
- height:var(--tds-toggle-switch-track-height);
2320
- margin:0;
2321
- -webkit-appearance:none;
2322
- -moz-appearance:none;
2323
- appearance:none;
2324
- cursor:var(--tds-toggle-switch-cursor);
2325
- outline:var(--tds-toggle-switch-track-outline);
2326
- outline-offset:var(--t-focus-ring-offset);
2327
- background-color:transparent;
2328
- border:0;
2329
- border-radius:var(--t-border-radius-round);
2198
+ .tds-input-description .tds-input-description-invalid-icon{
2199
+ display:var(--tds-input-description-invalid-icon-display, none);
2200
+ flex-shrink:0;
2201
+ margin-block-start:calc(.5lh - .5em);
2202
+ line-height:1.35;
2330
2203
  }
2331
2204
 
2332
- :is(.tds-toggle-switch input[type="checkbox"]):focus-visible{
2333
- --tds-toggle-switch-track-outline:var(--t-focus-ring-outline);
2334
- }
2205
+ .tds-field{
2206
+ --tds-field-border-color:var(--t-form-border-color);
2207
+ --tds-field-border-color-hover:var(--t-form-border-color-hover);
2208
+ --tds-field-border-color-active:var(--t-form-border-color-focus);
2209
+ --tds-field-background-color:var(--t-form-background-color);
2210
+ --tds-field-color:var(--t-form-color);
2211
+ --tds-field-placeholder-color:var(--t-form-placeholder-color);
2212
+ --tds-field-font-size:var(--t-font-size-md);
2213
+ --tds-field-min-height:var(--t-container-size-md);
2214
+ --tds-field-padding-block:6px;
2215
+ --tds-field-padding-inline:var(--t-spacing-1);
2216
+ --tds-field-description-color:var(--t-text-color-secondary);
2217
+ --tds-field-description-invalid-icon-display:none;
2335
2218
 
2336
- .tds-toggle-switch label{
2337
- display:inline-flex;
2338
- grid-area:1 / 2;
2339
- padding-inline-start:var(--t-spacing-1);
2340
- margin-top:-.09375em;
2341
- font-size:var(--tds-toggle-switch-font-size);
2342
- font-weight:var(--t-font-weight-normal);
2343
- line-height:var(--tds-toggle-switch-line-height);
2344
- color:var(--tds-toggle-switch-label-color);
2345
- cursor:var(--tds-toggle-switch-cursor);
2219
+ position:relative;
2220
+ display:flex;
2221
+ flex-direction:column;
2222
+ gap:var(--t-spacing-half);
2223
+ }
2224
+
2225
+ .tds-field[data-required] .tds-field-label::after{
2226
+ margin-left:.25ch;
2227
+ color:var(--t-text-color-status-error);
2228
+ content:"*";
2346
2229
  }
2347
2230
 
2348
- .tds-toggle-switch:not(:has(input:disabled)):has(input:hover){
2349
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-hover);
2231
+ .tds-field[data-invalid]{
2232
+ --tds-field-border-color:var(--t-form-border-color-error);
2233
+ --tds-field-border-color-hover:var(--t-form-border-color-error-hover);
2234
+ --tds-field-border-color-active:var(--t-form-border-color-error-hover);
2235
+ --tds-field-background-color:var(--t-form-background-color-error);
2236
+ --tds-field-description-color:var(--t-text-color-status-error);
2237
+ --tds-field-description-invalid-icon-display:inline-block;
2350
2238
  }
2351
2239
 
2352
- .tds-toggle-switch:has(input:checked){
2353
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on);
2354
- --tds-toggle-switch-thumb-transform:translateX(calc(var(--tds-toggle-switch-track-width) - var(--tds-toggle-switch-thumb-size) - var(--t-spacing-half)));
2240
+ .tds-field[data-disabled]{
2241
+ --tds-field-border-color:var(--t-form-border-color-disabled);
2242
+ --tds-field-background-color:var(--t-form-background-color-disabled);
2243
+ --tds-field-color:var(--t-form-color-disabled);
2244
+ --tds-field-placeholder-color:var(--t-form-color-disabled);
2355
2245
  }
2356
2246
 
2357
- .tds-toggle-switch:has(input:checked):not(:has(input:disabled)):has(input:hover){
2358
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on-hover);
2247
+ .tds-field[data-disabled] .tds-field-control{
2248
+ cursor:not-allowed;
2359
2249
  }
2360
2250
 
2361
- .tds-toggle-switch:has(input:disabled){
2362
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-disabled);
2363
- --tds-toggle-switch-label-color:var(--t-form-color-disabled);
2364
- --tds-toggle-switch-description-color:var(--t-form-color-disabled);
2365
- --tds-toggle-switch-cursor:not-allowed;
2366
- }
2251
+ .tds-field--lg{
2252
+ --tds-field-min-height:var(--t-container-size-lg);
2253
+ --tds-field-font-size:var(--t-font-size-lg);
2254
+ }
2367
2255
 
2368
- .tds-toggle-switch-track{
2369
- position:relative;
2370
- flex-shrink:0;
2371
- width:var(--tds-toggle-switch-track-width);
2372
- height:var(--tds-toggle-switch-track-height);
2373
- background-color:var(--tds-toggle-switch-track-background-color);
2374
- border-radius:var(--t-border-radius-round);
2375
- transition:var(--tds-toggle-switch-track-transition);
2256
+ .tds-field-label{
2257
+ font-size:var(--t-font-size-md);
2258
+ font-weight:var(--t-font-weight-normal);
2259
+ color:var(--t-text-color);
2260
+ cursor:default;
2376
2261
  }
2377
2262
 
2378
- .tds-toggle-switch-track::before{
2379
- position:absolute;
2380
- top:var(--t-spacing-fourth);
2381
- left:var(--t-spacing-fourth);
2382
- width:var(--tds-toggle-switch-thumb-size);
2383
- height:var(--tds-toggle-switch-thumb-size);
2384
- content:"";
2385
- background-color:#fff;
2386
- border-radius:var(--t-border-radius-round);
2387
- transform:var(--tds-toggle-switch-thumb-transform);
2388
- transition:var(--tds-toggle-switch-thumb-transition);
2263
+ .tds-field-control{
2264
+ display:flex;
2265
+ align-items:center;
2266
+ inline-size:100%;
2267
+ min-block-size:var(--tds-field-min-height);
2268
+ font-family:inherit;
2269
+ font-size:var(--tds-field-font-size);
2270
+ line-height:1;
2271
+ color:var(--tds-field-color);
2272
+ -webkit-appearance:none;
2273
+ -moz-appearance:none;
2274
+ appearance:none;
2275
+ cursor:text;
2276
+ outline:var(--t-focus-ring-width) solid transparent;
2277
+ outline-color:rgb(from var(--t-focus-ring-color) r g b / 0);
2278
+ outline-offset:0;
2279
+ background-color:var(--tds-field-background-color);
2280
+ border:var(--t-form-border-width) solid var(--tds-field-border-color);
2281
+ border-radius:var(--t-form-border-radius);
2282
+ transition-timing-function:var(--t-ease-in-out);
2283
+ transition-duration:var(--t-duration-200);
2284
+ transition-property:background-color, border-color, outline-color, outline-offset;
2285
+ }
2286
+
2287
+ .tds-field-control[data-hovered]:not([data-focus-visible],[data-focus-within],[data-disabled]){
2288
+ border-color:var(--tds-field-border-color-hover);
2389
2289
  }
2390
2290
 
2391
- @media (prefers-reduced-motion: reduce){
2291
+ .tds-field-control[data-focus-within]{
2292
+ outline-color:var(--t-focus-ring-color);
2293
+ outline-offset:var(--t-focus-ring-offset);
2294
+ border-color:var(--tds-field-border-color-active);
2295
+ }
2392
2296
 
2393
- .tds-toggle-switch-track{
2394
- --tds-toggle-switch-track-transition:none;
2395
- --tds-toggle-switch-thumb-transition:none;
2396
- }
2297
+ .tds-field-control[data-readonly],.tds-field-control:has([data-readonly]),.tds-field-control:has([readonly]){
2298
+ --tds-field-border-color:var(--t-form-border-color-readonly);
2299
+ --tds-field-border-color-hover:var(--t-form-border-color-readonly);
2300
+ --tds-field-background-color:var(--t-form-background-color-readonly);
2301
+ color:var(--t-form-color-readonly);
2397
2302
  }
2398
2303
 
2399
- .tds-toggle-switch-description{
2304
+ [data-focus-within]:is(.tds-field-control[data-readonly],.tds-field-control:has([data-readonly]),.tds-field-control:has([readonly])){
2305
+ border-color:var(--t-form-border-color-hover);
2306
+ }
2307
+
2308
+ .tds-field-description{
2400
2309
  display:flex;
2401
- grid-area:2 / 2;
2310
+ gap:var(--t-spacing-half);
2402
2311
  align-items:flex-start;
2403
- padding-inline-start:var(--t-spacing-1);
2404
2312
  margin:0;
2405
- font-size:var(--tds-toggle-switch-description-font-size);
2406
- line-height:var(--tds-toggle-switch-description-line-height);
2407
- color:var(--tds-toggle-switch-description-color);
2313
+ font-size:var(--t-font-size-sm);
2314
+ line-height:1.35;
2315
+ color:var(--tds-field-description-color, var(--t-text-color-secondary));
2408
2316
  cursor:text;
2409
2317
  }
2410
2318
 
2411
- .tds-toggle-switch--sm{
2412
- --tds-toggle-switch-font-size:var(--t-font-size-sm);
2413
- --tds-toggle-switch-line-height:1.35;
2414
- --tds-toggle-switch-track-height:var(--t-element-size-lg);
2415
- --tds-toggle-switch-thumb-size:var(--t-element-size-sm);
2416
- --tds-toggle-switch-description-font-size:var(--t-font-size-xs);
2417
- --tds-toggle-switch-description-line-height:1.3;
2418
- }
2319
+ .tds-field-description .tds-field-description-invalid-icon{
2320
+ display:var(--tds-field-description-invalid-icon-display, none);
2321
+ flex-shrink:0;
2322
+ margin-block-start:calc(.5lh - .5em);
2323
+ line-height:1.35;
2324
+ }
2419
2325
 
2420
- .tds-toggle-switch--hide-label{
2421
- --tds-toggle-switch-display:inline-flex;
2326
+ .tds-field-date-segment{
2327
+ padding-inline:var(--tds-field-date-segment-padding-inline, 2px);
2328
+ text-align:end;
2329
+ text-wrap:nowrap;
2330
+ caret-color:transparent;
2331
+ border-radius:var(--t-border-radius-sm);
2422
2332
  }
2423
2333
 
2424
- .tds-time-field-input{
2425
- --tds-field-date-segment-padding-inline:1px;
2426
- padding-block:var(--tds-field-padding-block);
2427
- padding-inline:var(--tds-field-padding-inline);
2428
- font-variant-numeric:tabular-nums;
2429
- }
2334
+ .tds-field-date-segment[data-placeholder]{
2335
+ color:var(--tds-field-placeholder-color);
2336
+ }
2430
2337
 
2431
- .tds-input{
2432
- --tds-input-border-color:var(--t-form-border-color);
2433
- --tds-input-border-color-hover:var(--t-form-border-color-hover);
2434
- --tds-input-background-color:var(--t-form-background-color);
2435
- --tds-input-color:var(--t-form-color);
2436
- --tds-input-font-size:var(--t-font-size-md);
2437
- --tds-input-description-color:var(--t-text-color-secondary);
2438
- --tds-input-description-invalid-icon-display:none;
2439
- --tds-input-min-height:var(--t-container-size-md);
2440
- --tds-input-padding-inline:var(--t-spacing-1);
2338
+ .tds-field-date-segment[data-focused]{
2339
+ color:var(--t-text-color-inverted);
2340
+ outline:0;
2341
+ background-color:var(--t-fill-color-interaction);
2342
+ }
2441
2343
 
2442
- --tds-input-transition-property:background-color, border-color, outline-color, outline-offset;
2344
+ .tds-field-date-segment-separator{
2345
+ padding-inline:0;
2346
+ color:var(--tds-field-placeholder-color);
2347
+ }
2443
2348
 
2444
- display:flex;
2445
- flex-direction:column;
2446
- gap:var(--t-spacing-half);
2349
+ .tds-field-date-segment:not([data-placeholder]) + .tds-field-date-segment-separator{
2350
+ color:var(--tds-field-color);
2447
2351
  }
2448
2352
 
2449
- .tds-input label{
2450
- font-size:var(--t-font-size-md);
2451
- font-weight:var(--t-font-weight-normal);
2452
- color:var(--t-text-color);
2453
- }
2454
2353
 
2455
- .tds-input :is(input,textarea){
2456
- inline-size:100%;
2457
- block-size:auto;
2458
- min-block-size:var(--tds-input-min-height);
2459
- padding-block:var(--tds-input-padding-block);
2460
- padding-inline:var(--tds-input-padding-inline);
2461
- font-family:inherit;
2462
- font-size:var(--tds-input-font-size);
2463
- color:var(--tds-input-color);
2464
- -webkit-appearance:none;
2465
- -moz-appearance:none;
2466
- appearance:none;
2467
- outline:var(--t-focus-ring-width) solid transparent;
2468
- outline-offset:0;
2469
- background-color:var(--tds-input-background-color);
2470
- border:var(--t-form-border-width) solid var(--tds-input-border-color);
2471
- border-radius:var(--t-form-border-radius);
2472
- transition-timing-function:var(--t-ease-in-out);
2473
- transition-duration:var(--t-duration-200);
2474
- transition-property:var(--tds-input-transition-property);
2354
+ @media (prefers-reduced-motion: no-preference){
2355
+
2356
+ :root{
2357
+ interpolate-size:allow-keywords;
2358
+ }
2475
2359
  }
2476
2360
 
2477
- :is(.tds-input :is(input,textarea)):hover:not(:disabled,:focus-visible,[readonly]){
2478
- border-color:var(--tds-input-border-color-hover);
2479
- }
2361
+ @layer tds-component{
2362
+ tds-sidenav,
2363
+ .tds-sidenav{
2364
+ --tds-sidenav-indent:12px;
2365
+ --tds-sidenav-item-depth:0;
2480
2366
 
2481
- :is(.tds-input :is(input,textarea)):focus{
2482
- outline-color:transparent;
2483
- }
2367
+ --tds-sidenav-item-transition:background-color var(--t-duration-200) var(--t-ease-in-out);
2484
2368
 
2485
- :is(.tds-input :is(input,textarea)):focus-visible{
2486
- outline-color:var(--t-focus-ring-color);
2487
- outline-offset:var(--t-focus-ring-offset);
2488
- border-color:var(--t-form-border-color-focus);
2489
- }
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);
2490
2375
 
2491
- :is(.tds-input :is(input,textarea))::-moz-placeholder{
2492
- color:var(--t-form-placeholder-color);
2493
- -moz-user-select:none;
2494
- user-select:none;
2495
- }
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);
2496
2380
 
2497
- :is(.tds-input :is(input,textarea))::placeholder{
2498
- color:var(--t-form-placeholder-color);
2499
- -webkit-user-select:none;
2500
- -moz-user-select:none;
2501
- user-select:none;
2502
- }
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;
2503
2384
 
2504
- @media (prefers-reduced-motion: reduce){
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);
2505
2388
 
2506
- .tds-input :is(input,textarea){
2507
- --tds-input-transition-property:none;
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;
2508
2400
  }
2509
2401
  }
2510
2402
 
2511
- .tds-input.tds-input--invalid,.tds-input:has(:is(input,textarea):is(:user-invalid,[aria-invalid="true"])){
2512
- --tds-input-background-color:var(--t-form-background-color-error);
2513
- --tds-input-border-color:var(--t-form-border-color-error);
2514
- --tds-input-border-color-hover:var(--t-form-border-color-error-hover);
2515
- --tds-input-description-color:var(--t-text-color-status-error);
2516
- --tds-input-description-invalid-icon-display:inline-block;
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);
2517
2409
  }
2410
+ }
2518
2411
 
2519
- .tds-input:has(:is(input,textarea):required) label::after{
2520
- margin-left:.25ch;
2521
- color:var(--t-text-color-status-error);
2522
- content:"*";
2523
- }
2412
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section){
2413
+ display:flex;
2414
+ }
2524
2415
 
2525
- .tds-input:where(:has(:is(input,textarea):disabled)){
2526
- --tds-input-border-color:var(--t-form-border-color-disabled);
2527
- --tds-input-background-color:var(--t-form-background-color-disabled);
2528
- --tds-input-color:var(--t-form-color-disabled);
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%;
2529
2420
  }
2530
2421
 
2531
- .tds-input:where(:has(:is(input,textarea):disabled)) :is(input,textarea){
2532
- cursor:not-allowed;
2533
- }
2422
+ .tds-sidenav-section-list{
2423
+ width:100%;
2424
+ padding:0;
2425
+ margin:0;
2426
+ list-style:none;
2427
+ }
2534
2428
 
2535
- .tds-input:where(:has(:is(input,textarea)[readonly])){
2536
- --tds-input-border-color:var(--t-form-border-color-readonly);
2537
- --tds-input-background-color:var(--t-form-background-color-readonly);
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;
2538
2443
  }
2539
2444
 
2540
- .tds-input:where(:has(:is(input,textarea)[readonly])) :is(input,textarea):focus{
2541
- border-color:var(--tds-input-border-color-hover);
2542
- }
2445
+ .tds-sidenav-section:first-of-type .tds-sidenav-section-header{
2446
+ padding-top:0;
2447
+ }
2543
2448
 
2544
- .tds-input.tds-input--lg{
2545
- --tds-input-min-height:var(--t-container-size-lg);
2546
- --tds-input-font-size:var(--t-font-size-lg);
2449
+ .tds-sidenav-section-header [slot="label-actions"]{
2450
+ display:flex;
2451
+ gap:var(--t-spacing-half);
2452
+ align-items:center;
2547
2453
  }
2548
2454
 
2549
- .tds-input-description{
2455
+ .tds-sidenav-section [slot="section-actions"]{
2550
2456
  display:flex;
2551
- gap:var(--t-spacing-half);
2552
- align-items:flex-start;
2457
+ gap:12px;
2458
+ align-items:center;
2459
+ min-height:42px;
2460
+ padding:var(--t-spacing-1) 0;
2461
+ }
2462
+
2463
+ .tds-sidenav-section-list,
2464
+ .tds-sidenav-item{
2465
+ width:100%;
2466
+ padding:0;
2553
2467
  margin:0;
2554
- font-size:var(--t-font-size-sm);
2555
- line-height:1.35;
2556
- color:var(--tds-input-description-color, var(--t-text-color-secondary));
2557
- cursor:text;
2558
2468
  }
2559
2469
 
2560
- .tds-input-description .tds-input-description-invalid-icon{
2561
- display:var(--tds-input-description-invalid-icon-display, none);
2562
- flex-shrink:0;
2563
- margin-block-start:calc(.5lh - .5em);
2564
- line-height:1.35;
2470
+ .tds-sidenav-item :is(a,button){
2471
+ position:relative;
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;
2483
+ -webkit-appearance:none;
2484
+ -moz-appearance:none;
2485
+ appearance:none;
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);
2565
2491
  }
2566
2492
 
2567
- .tds-field{
2568
- --tds-field-border-color:var(--t-form-border-color);
2569
- --tds-field-border-color-hover:var(--t-form-border-color-hover);
2570
- --tds-field-border-color-active:var(--t-form-border-color-focus);
2571
- --tds-field-background-color:var(--t-form-background-color);
2572
- --tds-field-color:var(--t-form-color);
2573
- --tds-field-placeholder-color:var(--t-form-placeholder-color);
2574
- --tds-field-font-size:var(--t-font-size-md);
2575
- --tds-field-min-height:var(--t-container-size-md);
2576
- --tds-field-padding-block:6px;
2577
- --tds-field-padding-inline:var(--t-spacing-1);
2578
- --tds-field-description-color:var(--t-text-color-secondary);
2579
- --tds-field-description-invalid-icon-display:none;
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;
2500
+ }
2501
+
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;
2506
+ }
2507
+
2508
+ :is(.tds-sidenav-item :is(a,button)):active{
2509
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-active);
2510
+ }
2511
+
2512
+ :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]){
2513
+ overflow:hidden;
2514
+ color:var(--tds-sidenav-item-icon-color);
2515
+ }
2516
+
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
+ }
2522
+
2523
+ :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section{
2524
+ --tds-sidenav-indent:19px;
2525
+ }
2580
2526
 
2581
- position:relative;
2582
- display:flex;
2583
- flex-direction:column;
2584
- gap:var(--t-spacing-half);
2585
- }
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;
2531
+ }
2586
2532
 
2587
- .tds-field[data-required] .tds-field-label::after{
2588
- margin-left:.25ch;
2589
- color:var(--t-text-color-status-error);
2590
- content:"*";
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);
2591
2539
  }
2592
2540
 
2593
- .tds-field[data-invalid]{
2594
- --tds-field-border-color:var(--t-form-border-color-error);
2595
- --tds-field-border-color-hover:var(--t-form-border-color-error-hover);
2596
- --tds-field-border-color-active:var(--t-form-border-color-error-hover);
2597
- --tds-field-background-color:var(--t-form-background-color-error);
2598
- --tds-field-description-color:var(--t-text-color-status-error);
2599
- --tds-field-description-invalid-icon-display:inline-block;
2541
+ .tds-sidenav-item:has(.tds-sidenav-section){
2542
+ display:flex;
2543
+ flex-direction:column;
2544
+ gap:var(--t-spacing-half);
2600
2545
  }
2601
2546
 
2602
- .tds-field[data-disabled]{
2603
- --tds-field-border-color:var(--t-form-border-color-disabled);
2604
- --tds-field-background-color:var(--t-form-background-color-disabled);
2605
- --tds-field-color:var(--t-form-color-disabled);
2606
- --tds-field-placeholder-color:var(--t-form-color-disabled);
2547
+ .tds-sidenav-item .tds-sidenav-section-list{
2548
+ --tds-sidenav-item-depth:1;
2549
+ gap:0;
2607
2550
  }
2608
2551
 
2609
- .tds-field[data-disabled] .tds-field-control{
2610
- cursor:not-allowed;
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);
2611
2558
  }
2612
2559
 
2613
- .tds-field--lg{
2614
- --tds-field-min-height:var(--t-container-size-lg);
2615
- --tds-field-font-size:var(--t-font-size-lg);
2616
- }
2560
+ :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list{
2561
+ --tds-sidenav-item-depth:2;
2562
+ }
2617
2563
 
2618
- .tds-field-label{
2619
- font-size:var(--t-font-size-md);
2620
- font-weight:var(--t-font-weight-normal);
2621
- color:var(--t-text-color);
2622
- cursor:default;
2623
- }
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;
2570
+ }
2624
2571
 
2625
- .tds-field-control{
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);
2581
+ }
2582
+
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
+ }
2593
+
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;
2598
+ }
2599
+
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
+ }
2604
+
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
+ }
2608
+
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
+ }
2613
+
2614
+ .tds-sidenav-responsive-header{
2626
2615
  display:flex;
2616
+ gap:var(--t-spacing-2);
2627
2617
  align-items:center;
2628
- inline-size:100%;
2629
- min-block-size:var(--tds-field-min-height);
2630
- font-family:inherit;
2631
- font-size:var(--tds-field-font-size);
2632
- line-height:1;
2633
- color:var(--tds-field-color);
2634
- -webkit-appearance:none;
2635
- -moz-appearance:none;
2636
- appearance:none;
2637
- cursor:text;
2638
- outline:var(--t-focus-ring-width) solid transparent;
2639
- outline-color:rgb(from var(--t-focus-ring-color) r g b / 0);
2640
- outline-offset:0;
2641
- background-color:var(--tds-field-background-color);
2642
- border:var(--t-form-border-width) solid var(--tds-field-border-color);
2643
- border-radius:var(--t-form-border-radius);
2644
- transition-timing-function:var(--t-ease-in-out);
2645
- transition-duration:var(--t-duration-200);
2646
- transition-property:background-color, border-color, outline-color, outline-offset;
2618
+ width:100%;
2647
2619
  }
2648
2620
 
2649
- .tds-field-control[data-hovered]:not([data-focus-visible],[data-focus-within],[data-disabled]){
2650
- border-color:var(--tds-field-border-color-hover);
2621
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle{
2622
+ order:0;
2651
2623
  }
2652
2624
 
2653
- .tds-field-control[data-focus-within]{
2654
- outline-color:var(--t-focus-ring-color);
2655
- outline-offset:var(--t-focus-ring-offset);
2656
- border-color:var(--tds-field-border-color-active);
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);
2657
2632
  }
2658
2633
 
2659
- .tds-field-control[data-readonly],.tds-field-control:has([data-readonly]),.tds-field-control:has([readonly]){
2660
- --tds-field-border-color:var(--t-form-border-color-readonly);
2661
- --tds-field-border-color-hover:var(--t-form-border-color-readonly);
2662
- --tds-field-background-color:var(--t-form-background-color-readonly);
2663
- color:var(--t-form-color-readonly);
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;
2642
+ overflow:hidden;
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;
2664
2652
  }
2665
2653
 
2666
- [data-focus-within]:is(.tds-field-control[data-readonly],.tds-field-control:has([data-readonly]),.tds-field-control:has([readonly])){
2667
- border-color:var(--t-form-border-color-hover);
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;
2662
+ }
2663
+
2664
+ .tds-sidenav-item :is(a, button) :is(.prefix){
2665
+ display:none;
2666
+ }
2667
+ @supports selector(:popover-open){
2668
+ .tds-sidenav-collapse:popover-open{
2669
+ display:flex;
2668
2670
  }
2669
2671
 
2670
- .tds-field-description{
2671
- display:flex;
2672
- gap:var(--t-spacing-half);
2673
- align-items:flex-start;
2674
- margin:0;
2675
- font-size:var(--t-font-size-sm);
2676
- line-height:1.35;
2677
- color:var(--tds-field-description-color, var(--t-text-color-secondary));
2678
- cursor:text;
2679
- }
2672
+ .tds-sidenav-collapse:not(:popover-open){
2673
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
2674
+ transition:var(--tds-sidenav-collapse-transition-exit);
2675
+ }
2680
2676
 
2681
- .tds-field-description .tds-field-description-invalid-icon{
2682
- display:var(--tds-field-description-invalid-icon-display, none);
2683
- flex-shrink:0;
2684
- margin-block-start:calc(.5lh - .5em);
2685
- line-height:1.35;
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);
2681
+ }
2682
+ }
2686
2683
  }
2684
+ @supports not selector(:popover-open){
2685
+ .tds-sidenav-collapse.\:popover-open{
2686
+ display:flex;
2687
+ }
2687
2688
 
2688
- .tds-field-date-segment{
2689
- padding-inline:var(--tds-field-date-segment-padding-inline, 2px);
2690
- text-align:end;
2691
- text-wrap:nowrap;
2692
- caret-color:transparent;
2693
- border-radius:var(--t-border-radius-sm);
2689
+ .tds-sidenav-collapse:not(.\:popover-open){
2690
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
2691
+ transition:var(--tds-sidenav-collapse-transition-exit);
2692
+ }
2693
+ }
2694
2694
  }
2695
2695
 
2696
- .tds-field-date-segment[data-placeholder]{
2697
- color:var(--tds-field-placeholder-color);
2696
+ @media (min-width: 720px){
2697
+ .tds-sidenav-responsive-header{
2698
+ display:none;
2698
2699
  }
2700
+ }
2699
2701
 
2700
- .tds-field-date-segment[data-focused]{
2701
- color:var(--t-text-color-inverted);
2702
- outline:0;
2703
- background-color:var(--t-fill-color-interaction);
2704
- }
2702
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
2703
+ display:none;
2704
+ }
2705
2705
 
2706
- .tds-field-date-segment-separator{
2707
- padding-inline:0;
2708
- color:var(--tds-field-placeholder-color);
2709
- }
2706
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
2707
+ display:block;
2708
+ }
2710
2709
 
2711
- .tds-field-date-segment:not([data-placeholder]) + .tds-field-date-segment-separator{
2712
- color:var(--tds-field-color);
2713
- }
2710
+ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
2711
+ display:flex;
2712
+ flex-direction:column;
2713
+ }
2714
2714
 
2715
2715
  .tds-loading-spinner{
2716
2716
  --tds-loading-spinner-size:1.25em;