@planningcenter/tapestry 3.3.0-rc.9 → 3.3.0

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 (34) hide show
  1. package/dist/components/page-header/index.js +1 -1
  2. package/dist/components/sidenav/index.js +1 -1
  3. package/dist/packages/tapestry-wc/dist/components/{p-D9RRUzAf.js → p-B00sJe3H.js} +3 -3
  4. package/dist/packages/tapestry-wc/dist/components/p-B00sJe3H.js.map +1 -0
  5. package/dist/packages/tapestry-wc/dist/components/{p-Cn9fsH50.js → p-Bn0hHWDB.js} +2 -2
  6. package/dist/packages/tapestry-wc/dist/components/p-Bn0hHWDB.js.map +1 -0
  7. package/dist/packages/tapestry-wc/dist/components/{p-C4aRnWiC.js → p-Dq8WF4tc.js} +3 -3
  8. package/dist/packages/tapestry-wc/dist/components/p-Dq8WF4tc.js.map +1 -0
  9. package/dist/packages/tapestry-wc/dist/components/{p-C84prtjK.js → p-T7x-WXUY.js} +3 -3
  10. package/dist/packages/tapestry-wc/dist/components/p-T7x-WXUY.js.map +1 -0
  11. package/dist/packages/tapestry-wc/dist/components/{p-D0vZ4she.js → p-nyMzpSUR.js} +2 -2
  12. package/dist/packages/tapestry-wc/dist/components/p-nyMzpSUR.js.map +1 -0
  13. package/dist/packages/tapestry-wc/dist/components/tds-page-header-nav.js +2 -2
  14. package/dist/packages/tapestry-wc/dist/components/tds-page-header-nav.js.map +1 -1
  15. package/dist/packages/tapestry-wc/dist/components/tds-page-header.js +3 -3
  16. package/dist/packages/tapestry-wc/dist/components/tds-page-header.js.map +1 -1
  17. package/dist/packages/tapestry-wc/dist/components/tds-sidenav-item.js +3 -3
  18. package/dist/packages/tapestry-wc/dist/components/tds-sidenav-item.js.map +1 -1
  19. package/dist/packages/tapestry-wc/dist/components/tds-sidenav-responsive-header.js +2 -2
  20. package/dist/packages/tapestry-wc/dist/components/tds-sidenav-responsive-header.js.map +1 -1
  21. package/dist/packages/tapestry-wc/dist/components/tds-sidenav-section.js +3 -3
  22. package/dist/packages/tapestry-wc/dist/components/tds-sidenav-section.js.map +1 -1
  23. package/dist/packages/tapestry-wc/dist/components/tds-sidenav.js +5 -5
  24. package/dist/packages/tapestry-wc/dist/components/tds-sidenav.js.map +1 -1
  25. package/dist/reactRender.css +1319 -1319
  26. package/dist/reactRender.css.map +1 -1
  27. package/dist/reactRenderLegacy.css +1319 -1319
  28. package/dist/reactRenderLegacy.css.map +1 -1
  29. package/package.json +3 -3
  30. package/dist/packages/tapestry-wc/dist/components/p-C4aRnWiC.js.map +0 -1
  31. package/dist/packages/tapestry-wc/dist/components/p-C84prtjK.js.map +0 -1
  32. package/dist/packages/tapestry-wc/dist/components/p-Cn9fsH50.js.map +0 -1
  33. package/dist/packages/tapestry-wc/dist/components/p-D0vZ4she.js.map +0 -1
  34. package/dist/packages/tapestry-wc/dist/components/p-D9RRUzAf.js.map +0 -1
package/dist/reactRender.css CHANGED
@@ -1,273 +1,279 @@
1
- .tds-checkbox-group{
2
- --tds-checkbox-group-font-size:var(--t-font-size-md);
3
- --tds-checkbox-group-line-height:1.4;
4
- --tds-checkbox-group-gap:var(--t-spacing-1);
1
+ @layer t-critical{
2
+ tds-page-header:not(.hydrated){
3
+ display:none;
4
+ }
5
+ }
5
6
 
6
- --tds-checkbox-group-legend-margin-bottom:var(--tds-checkbox-group-gap);
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
25
 
8
- --tds-checkbox-group-description-font-size:var(--t-font-size-sm);
9
- --tds-checkbox-group-description-line-height:1.35;
10
- --tds-checkbox-group-description-color:var(--t-text-color-secondary);
11
- --tds-checkbox-group-description-invalid-icon-display:none;
12
- display:flex;
13
- flex-direction:column;
14
- gap:var(--tds-checkbox-group-gap);
15
- padding:0;
16
- margin:0;
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);
17
28
 
18
- font-size:var(--tds-checkbox-group-font-size);
19
- line-height:var(--tds-checkbox-group-line-height);
20
- border:0;
21
- }
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);
22
32
 
23
- .tds-checkbox-group legend{
24
- padding:0;
25
- margin-bottom:var(--tds-checkbox-group-legend-margin-bottom);
26
- }
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);
27
35
 
28
- .tds-checkbox-group:has(.tds-checkbox-group-description){
29
- --tds-checkbox-group-legend-margin-bottom:var(--t-spacing-fourth);
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);
39
+
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);
30
45
  }
31
46
 
32
- .tds-checkbox-group[aria-invalid="true"]{
33
- --tds-checkbox-group-description-color:var(--t-text-color-status-error);
34
- --tds-checkbox-group-description-invalid-icon-display:inline-block;
47
+ .tds-page-header--profile{
48
+ --tds-page-header-padding-y:20px;
35
49
  }
36
50
 
37
- .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) legend::after{
38
- margin-left:.25ch;
39
- color:var(--t-text-color-status-error);
40
- content:"*";
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));
41
55
  }
56
+ }
42
57
 
43
- .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
44
- content:none;
58
+ @media (min-width: 600px){
59
+ .tds-page-header{
60
+ --tds-page-header-background-color:var(--t-surface-color-canvas);
61
+ --tds-page-header-color:var(--t-text-color-secondary);
62
+ --tds-page-header-bottom-border-color:var(--t-border-color);
63
+ --tds-page-header-padding-x:var(--t-spacing-3);
64
+ --tds-page-header-headline-font-size:var(--t-font-size-3xl);
65
+ --tds-page-header-nav-gap:var(--t-spacing-half);
66
+ --tds-page-header-nav-background:transparent;
67
+ --tds-page-header-nav-item-padding-x:var(--t-spacing-2);
68
+ --tds-page-header-nav-item-border-width:1px;
69
+ --tds-page-header-nav-item-color:var(--t-text-color);
70
+ --tds-page-header-nav-item-background-color:var(--t-fill-color-neutral-070);
71
+ --tds-page-header-nav-item-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);
45
76
  }
46
-
47
- .tds-checkbox-group-fields{
48
- display:flex;
49
- flex-direction:column;
50
- gap:var(--tds-checkbox-group-gap);
51
- align-items:flex-start;
77
+ }
52
78
  }
53
79
 
54
- .tds-checkbox-group-description{
80
+ .tds-page-header{
55
81
  display:flex;
56
- gap:var(--t-spacing-half);
57
- align-items:flex-start;
58
- margin:0;
59
- font-size:var(--tds-checkbox-group-description-font-size);
60
- line-height:var(--tds-checkbox-group-description-line-height);
61
- color:var(--tds-checkbox-group-description-color);
62
- cursor:text;
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);
63
87
  }
64
88
 
65
- .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
66
- display:var(--tds-checkbox-group-description-invalid-icon-display);
67
- flex-shrink:0;
68
- margin-top:calc(.5lh - .5em);
69
- line-height:var(--tds-checkbox-group-description-line-height);
89
+ .tds-page-header:not(.has-nav){
90
+ padding-bottom:var(--tds-page-header-padding-y);
70
91
  }
71
92
 
72
- .tds-checkbox-group--sm{
73
- --tds-checkbox-group-line-height:1.35;
74
- --tds-checkbox-group-font-size:var(--t-font-size-sm);
75
- --tds-checkbox-group-description-font-size:var(--t-font-size-xs);
76
- --tds-checkbox-group-description-line-height:1.3;
77
- }
78
-
79
- .tds-checkbox{
80
- --tds-checkbox-font-size:var(--t-font-size-md);
81
- --tds-checkbox-cursor:pointer;
82
- --tds-checkbox-line-height:1.4;
83
- --tds-checkbox-transition-property:background-color, border-color;
84
-
85
- --tds-checkbox-input-size:var(--t-element-size-md);
86
- --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
87
- --tds-checkbox-input-border-color:var(--t-form-border-color);
88
- --tds-checkbox-input-background-color:transparent;
89
-
90
- --tds-checkbox-input-icon:none;
91
- --tds-checkbox-input-icon-visibility:hidden;
92
- --tds-checkbox-input-icon-opacity:0;
93
- --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
94
-
95
- --tds-checkbox-label-color:var(--t-form-color);
96
-
97
- --tds-checkbox-description-font-size:var(--t-font-size-sm);
98
- --tds-checkbox-description-line-height:1.35;
99
- --tds-checkbox-description-color:var(--t-text-color-secondary);
100
- --tds-checkbox-description-invalid-icon-display:none;
101
-
102
- position:relative;
103
- display:inline-grid;
104
- grid-template-columns:auto;
105
- grid-auto-columns:1fr;
106
- gap:var(--t-spacing-fourth) var(--t-spacing-1);
107
- line-height:var(--tds-checkbox-line-height);
108
- cursor:var(--tds-checkbox-cursor);
109
- -webkit-user-select:none;
110
- -moz-user-select:none;
111
- user-select:none;
112
- }
113
-
114
- .tds-checkbox label{
115
- grid-area:1 / 2;
116
- font-size:var(--tds-checkbox-font-size);
117
- font-weight:var(--t-font-weight-normal);
118
- color:var(--tds-checkbox-label-color);
119
- cursor:var(--tds-checkbox-cursor);
93
+ .tds-page-header.inactive{
94
+ background:var(--tds-page-header-background-color-inactive);
120
95
  }
121
96
 
122
- .tds-checkbox tds-indeterminate{
123
- display:flex;
97
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
98
+ width:100%;
124
99
  }
125
100
 
126
- .tds-checkbox input[type="checkbox"]{
127
- position:relative;
128
- width:1em;
129
- height:1em;
130
- margin:calc((1lh - 1em) / 2) 0 0;
131
- font-size:var(--tds-checkbox-font-size);
132
- line-height:inherit;
133
- -webkit-appearance:none;
134
- -moz-appearance:none;
135
- appearance:none;
136
- cursor:var(--tds-checkbox-cursor);
137
- background-color:var(--tds-checkbox-input-background-color);
138
- border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
139
- border-radius:var(--tds-checkbox-input-border-radius);
140
- transition-timing-function:var(--t-ease-in-out);
141
- transition-duration:var(--t-duration-200);
142
- transition-property:var(--tds-checkbox-transition-property);
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;
143
108
  }
144
109
 
145
- :is(.tds-checkbox input[type="checkbox"])::before{
146
- position:absolute;
147
- top:50%;
148
- left:50%;
149
- visibility:var(--tds-checkbox-input-icon-visibility);
150
- width:100%;
151
- height:100%;
152
- content:"";
153
- background-color:var(--tds-checkbox-input-icon-fill);
154
- border-radius:var(--tds-checkbox-input-border-radius);
155
- opacity:var(--tds-checkbox-input-icon-opacity);
156
- -webkit-mask-image:var(--tds-checkbox-input-icon);
157
- mask-image:var(--tds-checkbox-input-icon);
158
- -webkit-mask-repeat:no-repeat;
159
- mask-repeat:no-repeat;
160
- -webkit-mask-size:contain;
161
- mask-size:contain;
162
- transform:translate(-50%, -50%);
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);
163
118
  }
164
119
 
165
- :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
166
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
167
- --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
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;
168
139
  }
169
140
 
170
- :is(.tds-checkbox input[type="checkbox"]):focus-visible{
171
- outline:var(--t-focus-ring-outline);
172
- outline-offset:var(--t-focus-ring-offset);
173
- }
141
+ .selected:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)){
142
+ --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-selected);
143
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-selected);
144
+ --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-selected);
145
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-selected);
146
+ }
174
147
 
175
- :is(.tds-checkbox input[type="checkbox"]):disabled{
176
- pointer-events:none;
177
- }
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
+ }
178
154
 
179
- @media (prefers-reduced-motion: reduce){
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
+ }
180
160
 
181
- .tds-checkbox input[type="checkbox"]{
182
- --tds-checkbox-transition-property:none;
183
- }
161
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):disabled{
162
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-disabled);
163
+ color:var(--tds-page-header-nav-item-color-disabled);
164
+ cursor:not-allowed;
165
+ background-color:var(--tds-page-header-nav-item-background-color-disabled);
166
+ opacity:1;
167
+ }
168
+
169
+ @media (min-width: 600px){
170
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected)::after{
171
+ position:absolute;
172
+ inset:auto -1px -1px;
173
+ height:1px;
174
+ pointer-events:none;
175
+ content:"";
176
+ background-color:var(--tds-page-header-bottom-border-color);
177
+ }
178
+ }
179
+
180
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
181
+ position:relative;
184
182
  }
185
183
 
186
- .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
187
- --tds-checkbox-input-background-color:var(--t-fill-color-control);
188
- --tds-checkbox-input-border-color:var(--t-border-color-control-info);
189
- --tds-checkbox-input-icon-visibility:visible;
190
- --tds-checkbox-input-icon-opacity:1;
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{
207
+ display:flex;
208
+ flex-direction:column;
209
+ gap:var(--t-spacing-2) var(--t-spacing-1);
210
+ align-items:flex-start;
211
+ justify-content:space-between;
212
+ padding:0 var(--tds-page-header-padding-x);
213
+ }
214
+
215
+ .tds-page-header--profile > .tds-page-header__title-bar{
216
+ align-items:center;
191
217
  }
192
218
 
193
- :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
194
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
195
- --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
196
- }
219
+ .tds-page-header__primary{
220
+ width:100%;
221
+ }
197
222
 
198
- .tds-checkbox:has(input:checked){
199
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
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;
200
230
  }
201
231
 
202
- .tds-checkbox:has(input:indeterminate){
203
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
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%;
204
238
  }
205
239
 
206
- .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
207
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
208
- --tds-checkbox-description-color:var(--t-text-color-status-error);
209
- --tds-checkbox-description-invalid-icon-display:inline-block;
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;
210
245
  }
211
-
212
- :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
213
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
214
- --tds-checkbox-input-background-color:var(--t-form-background-color-error);
215
- }
216
-
217
- :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{
218
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
219
- --tds-checkbox-input-background-color:var(--t-form-border-color-error);
246
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
247
+ width:auto;
220
248
  }
221
249
 
222
- :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){
223
- --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
224
- --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
225
- }
226
-
227
- .tds-checkbox:has(input:required) label::after{
228
- margin-left:.25ch;
229
- color:var(--t-text-color-status-error);
230
- content:"*";
250
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
251
+ justify-content:flex-end;
231
252
  }
253
+ }
232
254
 
233
- .tds-checkbox:has(input:disabled){
234
- --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
235
- --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
236
-
237
- --tds-checkbox-label-color:var(--t-form-color-disabled);
238
- --tds-checkbox-description-color:var(--t-form-color-disabled);
239
- --tds-checkbox-cursor:not-allowed;
240
- }
241
-
242
- .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
243
- --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
244
- }
255
+ .tds-page-header-phone,
256
+ .tds-page-header-email{
257
+ color:var(--tds-page-header-color);
258
+ white-space:nowrap;
259
+ }
245
260
 
246
- .tds-checkbox-description{
247
- display:flex;
248
- grid-area:2 / 2;
249
- gap:var(--t-spacing-half);
250
- align-items:flex-start;
251
- margin:0;
252
- font-size:var(--tds-checkbox-description-font-size);
253
- line-height:var(--tds-checkbox-description-line-height);
254
- color:var(--tds-checkbox-description-color);
255
- cursor:text;
261
+ .tds-page-header-email{
262
+ max-width:100%;
263
+ overflow:hidden;
264
+ text-overflow:ellipsis;
256
265
  }
257
266
 
258
- .tds-checkbox-description .tds-checkbox-description-invalid-icon{
259
- display:var(--tds-checkbox-description-invalid-icon-display);
260
- flex-shrink:0;
261
- margin-top:calc(.5lh - .5em);
262
- line-height:var(--tds-checkbox-description-line-height);
267
+ @keyframes indicator-pulse{
268
+ 0%{
269
+ opacity:.3;
270
+ transform:scale(.9);
263
271
  }
264
272
 
265
- .tds-checkbox--sm{
266
- --tds-checkbox-line-height:1.35;
267
- --tds-checkbox-input-size:var(--t-element-size-sm);
268
- --tds-checkbox-font-size:var(--t-font-size-sm);
269
- --tds-checkbox-description-font-size:var(--t-font-size-xs);
270
- --tds-checkbox-description-line-height:1.3;
273
+ 100%{
274
+ opacity:0;
275
+ transform:scale(1.75);
276
+ }
271
277
  }
272
278
 
273
279
 
@@ -578,1421 +584,1415 @@
578
584
  height:-moz-fit-content;
579
585
  height:fit-content;
580
586
  padding:var(--t-spacing-2);
581
- overflow-y:auto;
582
- }
583
-
584
- .tds-sidenav-item :is(a, button) :is(.prefix){
585
- display:none;
586
- }
587
- @supports selector(:popover-open){
588
- .tds-sidenav-collapse:popover-open{
589
- display:flex;
590
- }
591
-
592
- .tds-sidenav-collapse:not(:popover-open){
593
- opacity:var(--tds-sidenav-collapse-closed-opacity);
594
- transition:var(--tds-sidenav-collapse-transition-exit);
595
- }
596
-
597
- @starting-style{
598
- .tds-sidenav-collapse:popover-open{
599
- opacity:var(--tds-sidenav-collapse-closed-opacity);
600
- transform:var(--tds-sidenav-collapse-closed-transform);
601
- }
602
- }
603
- }
604
- @supports not selector(:popover-open){
605
- .tds-sidenav-collapse.\:popover-open{
606
- display:flex;
607
- }
608
-
609
- .tds-sidenav-collapse:not(.\:popover-open){
610
- opacity:var(--tds-sidenav-collapse-closed-opacity);
611
- transition:var(--tds-sidenav-collapse-transition-exit);
612
- }
613
- }
614
- }
615
-
616
- @media (min-width: 720px){
617
- .tds-sidenav-responsive-header{
618
- display:none;
619
- }
620
- }
621
-
622
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
623
- display:none;
624
- }
625
-
626
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
627
- display:block;
628
- }
629
-
630
- tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
631
- display:flex;
632
- flex-direction:column;
633
- }
634
-
635
- .tds-combo-box{
636
- --tds-combo-box-button-offset:4px;
637
- }
638
-
639
- .tds-combo-box[data-open] .tds-combo-box-button > svg{
640
- transform:rotate(.5turn);
641
- }
642
-
643
- .tds-combo-box--lg{
644
- --tds-combo-box-button-offset:5px;
645
- }
646
-
647
- .tds-combo-box-field:has([readonly]) .tds-combo-box-button{
648
- display:none;
649
- }
650
-
651
- .tds-combo-box-input{
652
- display:flex;
653
- flex:1;
654
- align-items:center;
655
- padding-block:var(--tds-field-padding-block);
656
- padding-inline:var(--tds-field-padding-inline);
657
- font-family:inherit;
658
- font-size:inherit;
659
- color:inherit;
660
- outline:0;
661
- background:transparent;
662
- border:0;
663
- }
664
-
665
- .tds-combo-box-input:has( + .tds-combo-box-button){
666
- padding-inline-end:0;
667
- }
668
-
669
- .tds-combo-box-input::-moz-placeholder{
670
- color:var(--tds-field-placeholder-color);
671
- -moz-user-select:none;
672
- user-select:none;
673
- }
674
-
675
- .tds-combo-box-input::placeholder{
676
- color:var(--tds-field-placeholder-color);
677
- -webkit-user-select:none;
678
- -moz-user-select:none;
679
- user-select:none;
680
- }
681
-
682
- .tds-combo-box-button{
683
- flex-shrink:0;
684
- align-self:center;
685
- inline-size:calc(var(--tds-field-min-height) - (var(--tds-combo-box-button-offset) * 2));
686
- block-size:calc(var(--tds-field-min-height) - (var(--tds-combo-box-button-offset) * 2));
687
- padding:0;
688
- margin-inline-end:var(--tds-combo-box-button-offset);
689
- }
690
-
691
- .tds-combo-box-button > svg{
692
- inline-size:var(--tds-field-font-size);
693
- block-size:var(--tds-field-font-size);
694
- transition:transform var(--t-duration-300) var(--t-ease-in-out);
695
- }
696
-
697
- .tds-combo-box-popover{
698
- width:var(--trigger-width);
699
- max-block-size:inherit;
700
- padding:var(--t-spacing-1);
701
- overflow:auto;
702
- scroll-behavior:smooth;
703
- overscroll-behavior:none;
704
- -webkit-user-select:none;
705
- -moz-user-select:none;
706
- user-select:none;
707
- outline:0;
708
- scrollbar-color:#0004 #0000;
709
- scrollbar-width:thin;
710
- background:var(--t-surface-color-card);
711
- background-clip:padding-box;
712
- border:1px solid var(--t-border-color);
713
- border-radius:var(--t-border-radius);
714
- box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
715
- }
716
-
717
- .tds-combo-box-popover[data-entering]{
718
- animation:tds-combo-box-popover var(--t-duration-300) var(--t-ease-out);
719
- }
720
-
721
- .tds-combo-box-popover[data-exiting]{
722
- animation:tds-combo-box-popover var(--t-duration-200) var(--t-ease-in) reverse;
723
- }
724
-
725
- .tds-combo-box-popover[data-entering],.tds-combo-box-popover[data-exiting]{
726
- will-change:opacity, transform;
587
+ overflow-y:auto;
727
588
  }
728
589
 
729
- @keyframes tds-combo-box-popover{
730
- from{
731
- opacity:0;
732
- transform:translateY(-8px);
590
+ .tds-sidenav-item :is(a, button) :is(.prefix){
591
+ display:none;
733
592
  }
734
- }
593
+ @supports selector(:popover-open){
594
+ .tds-sidenav-collapse:popover-open{
595
+ display:flex;
596
+ }
735
597
 
736
- @media (prefers-reduced-motion: reduce){
737
- .tds-combo-box-popover[data-entering],.tds-combo-box-popover[data-exiting]{
738
- animation:none;
598
+ .tds-sidenav-collapse:not(:popover-open){
599
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
600
+ transition:var(--tds-sidenav-collapse-transition-exit);
739
601
  }
740
602
 
741
- .tds-combo-box-button > svg{
742
- transition:none;
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
+ }
743
609
  }
744
- }
610
+ @supports not selector(:popover-open){
611
+ .tds-sidenav-collapse.\:popover-open{
612
+ display:flex;
613
+ }
745
614
 
746
- .tds-combo-box-list{
747
- padding:0;
748
- margin:0;
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
+ }
749
620
  }
750
621
 
751
- .tds-combo-box-list-item{
752
- display:block;
753
- padding-block:var(--t-spacing-1);
754
- padding-inline:var(--t-spacing-2) var(--t-spacing-1);
755
- overflow:hidden;
756
- text-overflow:ellipsis;
757
- font-size:1rem;
758
- color:var(--t-text-color);
759
- white-space:nowrap;
760
- cursor:default;
761
- border-radius:var(--t-border-radius);
622
+ @media (min-width: 720px){
623
+ .tds-sidenav-responsive-header{
624
+ display:none;
625
+ }
762
626
  }
763
627
 
764
- .tds-combo-box-list-item[data-hovered]:not([data-disabled]),.tds-combo-box-list-item[data-focus-visible]{
765
- background:var(--t-fill-color-neutral-070);
766
- }
628
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
629
+ display:none;
630
+ }
767
631
 
768
- .tds-combo-box-list-item[data-selected]{
769
- background:var(--t-fill-color-button-interaction-ghost-active);
770
- }
632
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
633
+ display:block;
634
+ }
771
635
 
772
- .tds-combo-box-list-item[data-pressed]:not([data-disabled]){
773
- background:var(--t-fill-color-neutral-060);
774
- }
636
+ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
637
+ display:flex;
638
+ flex-direction:column;
639
+ }
775
640
 
776
- .tds-combo-box-list-item[data-disabled]{
777
- color:var(--t-form-color-disabled);
778
- cursor:not-allowed;
779
- }
641
+ .tds-checkbox{
642
+ --tds-checkbox-font-size:var(--t-font-size-md);
643
+ --tds-checkbox-cursor:pointer;
644
+ --tds-checkbox-line-height:1.4;
645
+ --tds-checkbox-transition-property:background-color, border-color;
780
646
 
781
- .tds-combo-box-list-item[data-disabled][data-hovered]{
782
- background:transparent;
783
- }
647
+ --tds-checkbox-input-size:var(--t-element-size-md);
648
+ --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
649
+ --tds-checkbox-input-border-color:var(--t-form-border-color);
650
+ --tds-checkbox-input-background-color:transparent;
784
651
 
785
- .tds-combo-box-empty-state{
786
- position:relative;
787
- min-block-size:var(--t-spacing-3);
788
- padding-block:var(--t-spacing-1);
789
- padding-inline:var(--t-spacing-2);
790
- font-size:var(--t-font-size-md);
791
- color:var(--t-text-color-secondary);
792
- }
652
+ --tds-checkbox-input-icon:none;
653
+ --tds-checkbox-input-icon-visibility:hidden;
654
+ --tds-checkbox-input-icon-opacity:0;
655
+ --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
656
+
657
+ --tds-checkbox-label-color:var(--t-form-color);
658
+
659
+ --tds-checkbox-description-font-size:var(--t-font-size-sm);
660
+ --tds-checkbox-description-line-height:1.35;
661
+ --tds-checkbox-description-color:var(--t-text-color-secondary);
662
+ --tds-checkbox-description-invalid-icon-display:none;
793
663
 
794
- .tds-combo-box-load-more{
795
664
  position:relative;
796
- min-block-size:calc(var(--t-spacing-3) + var(--t-spacing-1));
665
+ display:inline-grid;
666
+ grid-template-columns:auto;
667
+ grid-auto-columns:1fr;
668
+ gap:var(--t-spacing-fourth) var(--t-spacing-1);
669
+ line-height:var(--tds-checkbox-line-height);
670
+ cursor:var(--tds-checkbox-cursor);
671
+ -webkit-user-select:none;
672
+ -moz-user-select:none;
673
+ user-select:none;
797
674
  }
798
675
 
799
- .tds-combo-box-empty-state,
800
- .tds-combo-box-load-more{
801
- --tds-loading-spinner-visibility:visible;
802
- --tds-loading-spinner-animation-play-state:running;
803
- }
676
+ .tds-checkbox label{
677
+ grid-area:1 / 2;
678
+ font-size:var(--tds-checkbox-font-size);
679
+ font-weight:var(--t-font-weight-normal);
680
+ color:var(--tds-checkbox-label-color);
681
+ cursor:var(--tds-checkbox-cursor);
682
+ }
804
683
 
805
- .tds-combo-box-list-section:not(:first-child){
806
- margin-block-start:var(--t-spacing-half);
684
+ .tds-checkbox tds-indeterminate{
685
+ display:flex;
807
686
  }
808
687
 
809
- .tds-combo-box-section-header{
810
- padding-block:var(--t-spacing-1);
811
- padding-inline:var(--t-spacing-1);
812
- font-size:var(--t-font-size-sm);
813
- font-weight:var(--t-font-weight-semibold);
814
- color:var(--t-text-color-secondary);
815
- }
688
+ .tds-checkbox input[type="checkbox"]{
689
+ position:relative;
690
+ width:1em;
691
+ height:1em;
692
+ margin:calc((1lh - 1em) / 2) 0 0;
693
+ font-size:var(--tds-checkbox-font-size);
694
+ line-height:inherit;
695
+ -webkit-appearance:none;
696
+ -moz-appearance:none;
697
+ appearance:none;
698
+ cursor:var(--tds-checkbox-cursor);
699
+ background-color:var(--tds-checkbox-input-background-color);
700
+ border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
701
+ border-radius:var(--tds-checkbox-input-border-radius);
702
+ transition-timing-function:var(--t-ease-in-out);
703
+ transition-duration:var(--t-duration-200);
704
+ transition-property:var(--tds-checkbox-transition-property);
705
+ }
816
706
 
817
- .tds-date-picker{
818
- --tds-date-picker-button-offset:4px;
819
- }
707
+ :is(.tds-checkbox input[type="checkbox"])::before{
708
+ position:absolute;
709
+ top:50%;
710
+ left:50%;
711
+ visibility:var(--tds-checkbox-input-icon-visibility);
712
+ width:100%;
713
+ height:100%;
714
+ content:"";
715
+ background-color:var(--tds-checkbox-input-icon-fill);
716
+ border-radius:var(--tds-checkbox-input-border-radius);
717
+ opacity:var(--tds-checkbox-input-icon-opacity);
718
+ -webkit-mask-image:var(--tds-checkbox-input-icon);
719
+ mask-image:var(--tds-checkbox-input-icon);
720
+ -webkit-mask-repeat:no-repeat;
721
+ mask-repeat:no-repeat;
722
+ -webkit-mask-size:contain;
723
+ mask-size:contain;
724
+ transform:translate(-50%, -50%);
725
+ }
820
726
 
821
- .tds-date-picker--lg{
822
- --tds-date-picker-button-offset:5px;
823
- }
727
+ :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
728
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
729
+ --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
730
+ }
824
731
 
825
- .tds-date-picker-field[data-focus-within]:has(.tds-date-picker-button[data-focused]){
826
- outline-color:transparent;
827
- outline-offset:0;
828
- border-color:var(--tds-field-border-color);
829
- }
732
+ :is(.tds-checkbox input[type="checkbox"]):focus-visible{
733
+ outline:var(--t-focus-ring-outline);
734
+ outline-offset:var(--t-focus-ring-offset);
735
+ }
830
736
 
831
- .tds-date-picker-field:has(.tds-date-picker-input[data-readonly]) .tds-date-picker-button{
832
- display:none;
833
- }
737
+ :is(.tds-checkbox input[type="checkbox"]):disabled{
738
+ pointer-events:none;
739
+ }
834
740
 
835
- .tds-date-picker-input{
836
- flex:1;
837
- padding-block:var(--tds-field-padding-block);
838
- padding-inline:var(--tds-field-padding-inline);
839
- overflow:auto clip;
840
- font-variant-numeric:tabular-nums;
841
- text-wrap:nowrap;
842
- scrollbar-width:none;
843
- }
741
+ @media (prefers-reduced-motion: reduce){
844
742
 
845
- .tds-date-picker-input:has( + .tds-date-picker-button){
846
- padding-inline-end:0;
743
+ .tds-checkbox input[type="checkbox"]{
744
+ --tds-checkbox-transition-property:none;
847
745
  }
746
+ }
848
747
 
849
- .tds-date-picker-button{
850
- flex-shrink:0;
851
- align-self:center;
852
- inline-size:calc(var(--tds-field-min-height) - (var(--tds-date-picker-button-offset) * 2));
853
- block-size:calc(var(--tds-field-min-height) - (var(--tds-date-picker-button-offset) * 2));
854
- padding:0;
855
- margin-inline-end:var(--tds-date-picker-button-offset);
856
- }
857
-
858
- .tds-date-picker-popover{
859
- --tds-date-picker-popover-font-size:var(--t-font-size-md);
860
- --tds-date-picker-popover-padding:var(--t-spacing-1-half);
861
- --tds-date-picker-popover-background-color:var(--t-surface-color-card);
862
- --tds-date-picker-popover-shadow:hsl(0, 0%, 0%, .05) 0 10px 15px -3px, hsl(0, 0%, 0%, .05) 0 4px 6px -4px;
863
- --tds-date-picker-popover-interactive-timing-function:var(--t-ease-in-out);
864
- --tds-date-picker-popover-interactive-duration:var(--t-duration-200);
865
- --tds-date-picker-popover-interactive-property:color, background-color, border-color;
866
-
867
- position:relative;
868
- overflow:hidden;
869
- background-color:var(--tds-date-picker-popover-background-color);
870
- border:var(--t-border-width) solid var(--t-border-color);
871
- border-radius:var(--t-border-radius);
872
- box-shadow:var(--tds-date-picker-popover-shadow);
873
- }
748
+ .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
749
+ --tds-checkbox-input-background-color:var(--t-fill-color-control);
750
+ --tds-checkbox-input-border-color:var(--t-border-color-control-info);
751
+ --tds-checkbox-input-icon-visibility:visible;
752
+ --tds-checkbox-input-icon-opacity:1;
753
+ }
874
754
 
875
- .tds-date-picker-popover[data-entering]{
876
- animation:tds-date-picker-popover var(--t-duration-300) var(--t-ease-out);
755
+ :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
756
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
757
+ --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
758
+ }
759
+
760
+ .tds-checkbox:has(input:checked){
761
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
877
762
  }
878
763
 
879
- .tds-date-picker-popover[data-exiting]{
880
- animation:tds-date-picker-popover var(--t-duration-200) var(--t-ease-in) reverse;
764
+ .tds-checkbox:has(input:indeterminate){
765
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
881
766
  }
882
767
 
883
- .tds-date-picker-popover[data-entering],.tds-date-picker-popover[data-exiting]{
884
- will-change:opacity, transform;
768
+ .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
769
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
770
+ --tds-checkbox-description-color:var(--t-text-color-status-error);
771
+ --tds-checkbox-description-invalid-icon-display:inline-block;
885
772
  }
886
773
 
887
- @keyframes tds-date-picker-popover{
888
- from{
889
- opacity:0;
890
- transform:translateY(-8px);
774
+ :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
775
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
776
+ --tds-checkbox-input-background-color:var(--t-form-background-color-error);
777
+ }
778
+
779
+ :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{
780
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
781
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error);
782
+ }
783
+
784
+ :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){
785
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
786
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
787
+ }
788
+
789
+ .tds-checkbox:has(input:required) label::after{
790
+ margin-left:.25ch;
791
+ color:var(--t-text-color-status-error);
792
+ content:"*";
793
+ }
794
+
795
+ .tds-checkbox:has(input:disabled){
796
+ --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
797
+ --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
798
+
799
+ --tds-checkbox-label-color:var(--t-form-color-disabled);
800
+ --tds-checkbox-description-color:var(--t-form-color-disabled);
801
+ --tds-checkbox-cursor:not-allowed;
891
802
  }
892
- }
893
803
 
894
- @media (prefers-reduced-motion: reduce){
895
- .tds-date-picker-popover[data-entering],.tds-date-picker-popover[data-exiting]{
896
- animation:none;
804
+ .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
805
+ --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
897
806
  }
898
- }
899
807
 
900
- .tds-date-picker-overlay{
901
- position:absolute;
902
- inset:0;
903
- z-index:1;
808
+ .tds-checkbox-description{
904
809
  display:flex;
905
- background-color:var(--tds-date-picker-popover-background-color);
906
- }
907
-
908
- .tds-date-picker-overlay-list{
909
- display:grid;
910
- flex:1;
911
- grid-template-columns:repeat(3, 1fr);
810
+ grid-area:2 / 2;
912
811
  gap:var(--t-spacing-half);
913
- padding-inline:var(--tds-date-picker-popover-padding);
914
- outline:0;
915
- scrollbar-color:var(--t-fill-color-transparency-dark-030) transparent;
916
- scrollbar-width:thin;
812
+ align-items:flex-start;
813
+ margin:0;
814
+ font-size:var(--tds-checkbox-description-font-size);
815
+ line-height:var(--tds-checkbox-description-line-height);
816
+ color:var(--tds-checkbox-description-color);
817
+ cursor:text;
917
818
  }
918
819
 
919
- .tds-date-picker-overlay--month .tds-date-picker-overlay-list{
920
- grid-template-rows:repeat(4, 1fr);
921
- padding-bottom:var(--tds-date-picker-popover-padding);
922
- }
820
+ .tds-checkbox-description .tds-checkbox-description-invalid-icon{
821
+ display:var(--tds-checkbox-description-invalid-icon-display);
822
+ flex-shrink:0;
823
+ margin-top:calc(.5lh - .5em);
824
+ line-height:var(--tds-checkbox-description-line-height);
825
+ }
923
826
 
924
- .tds-date-picker-overlay--year .tds-date-picker-overlay-list{
925
- grid-auto-rows:var(--t-container-size-xl);
926
- padding-right:var(--t-spacing-1);
927
- overflow-y:auto;
928
- scroll-padding-block:calc(var(--t-focus-ring-width) + var(--t-focus-ring-offset));
827
+ .tds-checkbox--sm{
828
+ --tds-checkbox-line-height:1.35;
829
+ --tds-checkbox-input-size:var(--t-element-size-sm);
830
+ --tds-checkbox-font-size:var(--t-font-size-sm);
831
+ --tds-checkbox-description-font-size:var(--t-font-size-xs);
832
+ --tds-checkbox-description-line-height:1.3;
929
833
  }
930
834
 
931
- .tds-date-picker-overlay-cell{
835
+ .tds-checkbox-group{
836
+ --tds-checkbox-group-font-size:var(--t-font-size-md);
837
+ --tds-checkbox-group-line-height:1.4;
838
+ --tds-checkbox-group-gap:var(--t-spacing-1);
839
+
840
+ --tds-checkbox-group-legend-margin-bottom:var(--tds-checkbox-group-gap);
841
+
842
+ --tds-checkbox-group-description-font-size:var(--t-font-size-sm);
843
+ --tds-checkbox-group-description-line-height:1.35;
844
+ --tds-checkbox-group-description-color:var(--t-text-color-secondary);
845
+ --tds-checkbox-group-description-invalid-icon-display:none;
932
846
  display:flex;
933
- align-items:center;
934
- justify-content:center;
935
- font-family:inherit;
936
- font-size:var(--tds-date-picker-popover-font-size);
937
- color:var(--t-text-color);
938
- cursor:pointer;
939
- outline:0;
940
- background-color:transparent;
847
+ flex-direction:column;
848
+ gap:var(--tds-checkbox-group-gap);
849
+ padding:0;
850
+ margin:0;
851
+
852
+ font-size:var(--tds-checkbox-group-font-size);
853
+ line-height:var(--tds-checkbox-group-line-height);
941
854
  border:0;
942
- border-radius:var(--t-border-radius-md);
943
- transition-timing-function:var(--tds-date-picker-popover-interactive-timing-function);
944
- transition-duration:var(--t-duration-100);
945
- transition-property:var(--tds-date-picker-popover-interactive-property);
946
855
  }
947
856
 
948
- .tds-date-picker-overlay-cell[data-hovered]{
949
- background-color:var(--t-fill-color-button-neutral-outline-hover);
857
+ .tds-checkbox-group legend{
858
+ padding:0;
859
+ margin-bottom:var(--tds-checkbox-group-legend-margin-bottom);
950
860
  }
951
861
 
952
- .tds-date-picker-overlay-cell[data-pressed]{
953
- background-color:var(--t-fill-color-button-neutral-outline-active);
862
+ .tds-checkbox-group:has(.tds-checkbox-group-description){
863
+ --tds-checkbox-group-legend-margin-bottom:var(--t-spacing-fourth);
954
864
  }
955
865
 
956
- .tds-date-picker-overlay-cell[data-selected]{
957
- font-weight:var(--t-font-weight-semibold);
958
- color:var(--t-text-color-inverted);
959
- background-color:var(--t-fill-color-interaction);
866
+ .tds-checkbox-group[aria-invalid="true"]{
867
+ --tds-checkbox-group-description-color:var(--t-text-color-status-error);
868
+ --tds-checkbox-group-description-invalid-icon-display:inline-block;
960
869
  }
961
870
 
962
- .tds-date-picker-overlay-cell[data-focus-visible]{
963
- outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
964
- }
871
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) legend::after{
872
+ margin-left:.25ch;
873
+ color:var(--t-text-color-status-error);
874
+ content:"*";
875
+ }
965
876
 
966
- .tds-date-picker-overlay-cell[data-selected][data-focus-visible]{
967
- outline-offset:var(--t-focus-ring-offset);
968
- }
877
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
878
+ content:none;
879
+ }
969
880
 
970
- .tds-date-picker-calendar-heading{
881
+ .tds-checkbox-group-fields{
971
882
  display:flex;
972
- flex:1;
973
- gap:var(--t-spacing-1);
974
- align-items:center;
975
- justify-content:flex-start;
976
- padding-inline-start:4px;
883
+ flex-direction:column;
884
+ gap:var(--tds-checkbox-group-gap);
885
+ align-items:flex-start;
977
886
  }
978
887
 
979
- .tds-date-picker-calendar-overlay-trigger{
980
- --_background-color:transparent;
981
- position:relative;
982
- padding:0;
983
- font-family:inherit;
984
- font-size:var(--tds-date-picker-popover-font-size);
985
- font-weight:var(--t-font-weight-semibold);
986
- font-feature-settings:"ss01", "ss02";
987
- color:var(--t-text-color);
988
- cursor:pointer;
989
- outline:0;
990
- background-color:transparent;
991
- border:0;
992
- border-radius:var(--t-border-radius-md);
993
- isolation:isolate;
994
- transition-timing-function:var(--tds-date-picker-popover-interactive-timing-function);
995
- transition-duration:var(--tds-date-picker-popover-interactive-duration);
996
- transition-property:var(--tds-date-picker-popover-interactive-property);
888
+ .tds-checkbox-group-description{
889
+ display:flex;
890
+ gap:var(--t-spacing-half);
891
+ align-items:flex-start;
892
+ margin:0;
893
+ font-size:var(--tds-checkbox-group-description-font-size);
894
+ line-height:var(--tds-checkbox-group-description-line-height);
895
+ color:var(--tds-checkbox-group-description-color);
896
+ cursor:text;
997
897
  }
998
898
 
999
- .tds-date-picker-calendar-overlay-trigger::before{
1000
- position:absolute;
1001
- inset:calc(var(--t-spacing-half) * -1);
1002
- z-index:-1;
1003
- pointer-events:inherit;
1004
- content:"";
1005
- background-color:var(--_background-color);
1006
- border-radius:inherit;
899
+ .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
900
+ display:var(--tds-checkbox-group-description-invalid-icon-display);
901
+ flex-shrink:0;
902
+ margin-top:calc(.5lh - .5em);
903
+ line-height:var(--tds-checkbox-group-description-line-height);
1007
904
  }
1008
905
 
1009
- .tds-date-picker-calendar-overlay-trigger[data-hovered]{
1010
- --_background-color:var(--t-fill-color-button-neutral-outline-hover);
1011
- }
906
+ .tds-checkbox-group--sm{
907
+ --tds-checkbox-group-line-height:1.35;
908
+ --tds-checkbox-group-font-size:var(--t-font-size-sm);
909
+ --tds-checkbox-group-description-font-size:var(--t-font-size-xs);
910
+ --tds-checkbox-group-description-line-height:1.3;
911
+ }
1012
912
 
1013
- .tds-date-picker-calendar-overlay-trigger[data-pressed]{
1014
- --_background-color:var(--t-fill-color-button-neutral-outline-active);
1015
- }
1016
913
 
1017
- .tds-date-picker-calendar-overlay-trigger[data-focus-visible]{
1018
- outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
1019
- outline-offset:var(--t-focus-ring-offset);
914
+ :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{
915
+ -webkit-appearance:none;
916
+ appearance:none;
917
+ }
918
+
919
+ [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
920
+ inline-size:1em;
921
+ block-size:2em;
922
+ }
923
+
924
+ @supports (field-sizing: content){
925
+ .tds-input--auto-width{
926
+ inline-size:-moz-fit-content;
927
+ inline-size:fit-content;
928
+ min-inline-size:min(100%, 122px);
1020
929
  }
1021
930
 
1022
- .tds-date-picker-calendar{
1023
- inline-size:-moz-fit-content;
1024
- inline-size:fit-content;
1025
- font-size:var(--tds-date-picker-popover-font-size);
931
+ .tds-input--auto-width input{
932
+ field-sizing:content;
933
+ inline-size:auto;
934
+ }
1026
935
  }
1027
936
 
1028
- .tds-date-picker-calendar-body{
1029
- position:relative;
1030
- padding:var(--tds-date-picker-popover-padding);
1031
- padding-block-start:0;
937
+ .tds-combo-box{
938
+ --tds-combo-box-button-offset:4px;
1032
939
  }
1033
940
 
1034
- .tds-date-picker-calendar-header{
1035
- display:flex;
1036
- align-items:center;
1037
- justify-content:space-between;
1038
- padding:var(--tds-date-picker-popover-padding);
941
+ .tds-combo-box[data-open] .tds-combo-box-button > svg{
942
+ transform:rotate(.5turn);
943
+ }
944
+
945
+ .tds-combo-box--lg{
946
+ --tds-combo-box-button-offset:5px;
1039
947
  }
1040
948
 
1041
- .tds-date-picker-calendar-title{
1042
- padding:var(--t-spacing-half) var(--t-spacing-1);
1043
- font-size:var(--tds-date-picker-popover-font-size);
1044
- font-weight:var(--t-font-weight-semibold);
949
+ .tds-combo-box-field:has([readonly]) .tds-combo-box-button{
950
+ display:none;
1045
951
  }
1046
952
 
1047
- .tds-date-picker-calendar-nav{
953
+ .tds-combo-box-input{
1048
954
  display:flex;
955
+ flex:1;
1049
956
  align-items:center;
1050
- justify-content:center;
1051
- padding:var(--t-spacing-half);
1052
- font-size:.875em;
1053
- color:var(--t-text-color);
1054
- cursor:pointer;
957
+ padding-block:var(--tds-field-padding-block);
958
+ padding-inline:var(--tds-field-padding-inline);
959
+ font-family:inherit;
960
+ font-size:inherit;
961
+ color:inherit;
1055
962
  outline:0;
1056
- background-color:transparent;
963
+ background:transparent;
1057
964
  border:0;
1058
- border-radius:var(--t-border-radius-md);
1059
- transition-timing-function:var(--tds-date-picker-popover-interactive-timing-function);
1060
- transition-duration:var(--tds-date-picker-popover-interactive-duration);
1061
- transition-property:var(--tds-date-picker-popover-interactive-property);
1062
965
  }
1063
966
 
1064
- .tds-date-picker-calendar-nav[data-hovered]{
1065
- background-color:var(--t-fill-color-button-neutral-outline-hover);
1066
- }
1067
-
1068
- .tds-date-picker-calendar-nav[data-pressed]{
1069
- background-color:var(--t-fill-color-button-neutral-outline-active);
967
+ .tds-combo-box-input:has( + .tds-combo-box-button){
968
+ padding-inline-end:0;
1070
969
  }
1071
970
 
1072
- .tds-date-picker-calendar-nav[data-focus-visible]{
1073
- outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
1074
- outline-offset:var(--t-focus-ring-offset);
971
+ .tds-combo-box-input::-moz-placeholder{
972
+ color:var(--tds-field-placeholder-color);
973
+ -moz-user-select:none;
974
+ user-select:none;
1075
975
  }
1076
976
 
1077
- .tds-date-picker-calendar-nav[data-disabled]{
1078
- color:var(--t-text-color-disabled);
1079
- cursor:not-allowed;
977
+ .tds-combo-box-input::placeholder{
978
+ color:var(--tds-field-placeholder-color);
979
+ -webkit-user-select:none;
980
+ -moz-user-select:none;
981
+ user-select:none;
1080
982
  }
1081
983
 
1082
- .tds-date-picker-calendar-grid{
1083
- font-feature-settings:"ss01", "ss02";
1084
- border-collapse:collapse;
984
+ .tds-combo-box-button{
985
+ flex-shrink:0;
986
+ align-self:center;
987
+ inline-size:calc(var(--tds-field-min-height) - (var(--tds-combo-box-button-offset) * 2));
988
+ block-size:calc(var(--tds-field-min-height) - (var(--tds-combo-box-button-offset) * 2));
989
+ padding:0;
990
+ margin-inline-end:var(--tds-combo-box-button-offset);
1085
991
  }
1086
992
 
1087
- .tds-date-picker-calendar-grid :where(thead,tbody,tr,td,th){
1088
- padding:0;
1089
- border:0;
993
+ .tds-combo-box-button > svg{
994
+ inline-size:var(--tds-field-font-size);
995
+ block-size:var(--tds-field-font-size);
996
+ transition:transform var(--t-duration-300) var(--t-ease-in-out);
1090
997
  }
1091
998
 
1092
- .tds-date-picker-calendar-header-cell{
1093
- padding-block-end:var(--t-spacing-1);
1094
- font-size:.875em;
1095
- font-weight:var(--t-font-weight-medium);
1096
- color:var(--t-text-color-secondary);
1097
- text-align:center;
1098
- -webkit-user-select:none;
1099
- -moz-user-select:none;
1100
- user-select:none;
1101
- }
1102
-
1103
- .tds-date-picker-calendar-cell-button{
1104
- position:relative;
1105
- display:flex;
1106
- align-items:center;
1107
- justify-content:center;
1108
- inline-size:2.25em;
1109
- block-size:2.25em;
1110
- color:var(--t-text-color);
1111
- cursor:pointer;
999
+ .tds-combo-box-popover{
1000
+ width:var(--trigger-width);
1001
+ max-block-size:inherit;
1002
+ padding:var(--t-spacing-1);
1003
+ overflow:auto;
1004
+ scroll-behavior:smooth;
1005
+ overscroll-behavior:none;
1112
1006
  -webkit-user-select:none;
1113
1007
  -moz-user-select:none;
1114
1008
  user-select:none;
1115
1009
  outline:0;
1010
+ scrollbar-color:#0004 #0000;
1011
+ scrollbar-width:thin;
1012
+ background:var(--t-surface-color-card);
1013
+ background-clip:padding-box;
1014
+ border:1px solid var(--t-border-color);
1015
+ border-radius:var(--t-border-radius);
1016
+ box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
1116
1017
  }
1117
1018
 
1118
- .tds-date-picker-calendar-cell-button::before{
1119
- position:absolute;
1120
- inset:0;
1121
- z-index:-1;
1122
- content:"";
1123
- background-color:var(--_background-color);
1124
- border-radius:50%;
1125
- }
1126
-
1127
- .tds-date-picker-calendar-cell-button[data-today]::before{
1128
- box-shadow:inset 0 0 0 1.5px var(--t-border-color);
1129
- }
1130
-
1131
- .tds-date-picker-calendar-cell-button[data-outside-month]{
1132
- display:none;
1133
- }
1134
-
1135
- .tds-date-picker-calendar-cell-button[data-hovered]{
1136
- --_background-color:var(--t-fill-color-button-neutral-outline-hover);
1137
- }
1138
-
1139
- .tds-date-picker-calendar-cell-button[data-pressed]{
1140
- --_background-color:var(--t-fill-color-button-neutral-outline-active);
1019
+ .tds-combo-box-popover[data-entering]{
1020
+ animation:tds-combo-box-popover var(--t-duration-300) var(--t-ease-out);
1141
1021
  }
1142
1022
 
1143
- .tds-date-picker-calendar-cell-button[data-selected]{
1144
- --_background-color:var(--t-fill-color-interaction);
1145
- font-weight:var(--t-font-weight-semibold);
1146
- color:var(--t-text-color-inverted);
1147
- border-color:transparent;
1023
+ .tds-combo-box-popover[data-exiting]{
1024
+ animation:tds-combo-box-popover var(--t-duration-200) var(--t-ease-in) reverse;
1148
1025
  }
1149
1026
 
1150
- .tds-date-picker-calendar-cell-button[data-unavailable]{
1151
- color:var(--t-text-color-disabled);
1152
- text-decoration:line-through;
1153
- cursor:not-allowed;
1027
+ .tds-combo-box-popover[data-entering],.tds-combo-box-popover[data-exiting]{
1028
+ will-change:opacity, transform;
1154
1029
  }
1155
1030
 
1156
- .tds-date-picker-calendar-cell-button[data-disabled]{
1157
- color:var(--t-text-color-disabled);
1031
+ @keyframes tds-combo-box-popover{
1032
+ from{
1033
+ opacity:0;
1034
+ transform:translateY(-8px);
1158
1035
  }
1036
+ }
1159
1037
 
1160
- .tds-date-picker-calendar-cell-button[data-focus-visible]{
1161
- outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
1162
- outline-offset:-2px;
1163
- }
1038
+ @media (prefers-reduced-motion: reduce){
1039
+ .tds-combo-box-popover[data-entering],.tds-combo-box-popover[data-exiting]{
1040
+ animation:none;
1041
+ }
1164
1042
 
1165
- .tds-date-picker-calendar-cell-button[data-focus-visible][data-selected]{
1166
- outline-offset:var(--t-focus-ring-offset);
1043
+ .tds-combo-box-button > svg{
1044
+ transition:none;
1167
1045
  }
1168
-
1169
- .tds-date-picker-popover--lg{
1170
- --tds-date-picker-popover-font-size:var(--t-font-size-lg);
1171
1046
  }
1172
1047
 
1173
- .tds-radio-group{
1174
- --tds-radio-group-font-size:var(--t-font-size-md);
1175
- --tds-radio-group-line-height:1.4;
1176
- --tds-radio-group-gap:var(--t-spacing-1);
1177
-
1178
- --tds-radio-group-legend-margin-bottom:var(--tds-radio-group-gap);
1179
-
1180
- --tds-radio-group-description-font-size:var(--t-font-size-sm);
1181
- --tds-radio-group-description-line-height:1.35;
1182
- --tds-radio-group-description-color:var(--t-text-color-secondary);
1183
- --tds-radio-group-description-invalid-icon-display:none;
1184
- display:flex;
1185
- flex-direction:column;
1186
- gap:var(--tds-radio-group-gap);
1048
+ .tds-combo-box-list{
1187
1049
  padding:0;
1188
1050
  margin:0;
1051
+ }
1189
1052
 
1190
- font-size:var(--tds-radio-group-font-size);
1191
- line-height:var(--tds-radio-group-line-height);
1192
- border:0;
1053
+ .tds-combo-box-list-item{
1054
+ display:block;
1055
+ padding-block:var(--t-spacing-1);
1056
+ padding-inline:var(--t-spacing-2) var(--t-spacing-1);
1057
+ overflow:hidden;
1058
+ text-overflow:ellipsis;
1059
+ font-size:1rem;
1060
+ color:var(--t-text-color);
1061
+ white-space:nowrap;
1062
+ cursor:default;
1063
+ border-radius:var(--t-border-radius);
1193
1064
  }
1194
1065
 
1195
- .tds-radio-group legend{
1196
- padding:0;
1197
- margin-bottom:var(--tds-radio-group-legend-margin-bottom);
1066
+ .tds-combo-box-list-item[data-hovered]:not([data-disabled]),.tds-combo-box-list-item[data-focus-visible]{
1067
+ background:var(--t-fill-color-neutral-070);
1198
1068
  }
1199
1069
 
1200
- .tds-radio-group:has(.tds-radio-group-description){
1201
- --tds-radio-group-legend-margin-bottom:var(--t-spacing-fourth);
1070
+ .tds-combo-box-list-item[data-selected]{
1071
+ background:var(--t-fill-color-button-interaction-ghost-active);
1202
1072
  }
1203
1073
 
1204
- .tds-radio-group[aria-invalid="true"]{
1205
- --tds-radio-group-description-color:var(--t-text-color-status-error);
1206
- --tds-radio-group-description-invalid-icon-display:inline-block;
1074
+ .tds-combo-box-list-item[data-pressed]:not([data-disabled]){
1075
+ background:var(--t-fill-color-neutral-060);
1207
1076
  }
1208
1077
 
1209
- .tds-radio-group[aria-invalid="true"] .tds-radio{
1210
- --tds-radio-input-border-color:var(--t-form-border-color-error);
1211
- }
1212
-
1213
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
1214
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1215
- --tds-radio-input-background-color:var(--t-form-background-color-error);
1216
- }
1217
-
1218
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
1219
- --tds-radio-input-background-color:var(--t-form-background-color);
1220
- }
1078
+ .tds-combo-box-list-item[data-disabled]{
1079
+ color:var(--t-form-color-disabled);
1080
+ cursor:not-allowed;
1081
+ }
1221
1082
 
1222
- .tds-radio-group:has(input:required) legend::after{
1223
- margin-left:.25ch;
1224
- color:var(--t-text-color-status-error);
1225
- content:"*";
1083
+ .tds-combo-box-list-item[data-disabled][data-hovered]{
1084
+ background:transparent;
1226
1085
  }
1227
1086
 
1228
- .tds-radio-group-fields{
1229
- display:flex;
1230
- flex-direction:column;
1231
- gap:var(--tds-radio-group-gap);
1232
- align-items:flex-start;
1087
+ .tds-combo-box-empty-state{
1088
+ position:relative;
1089
+ min-block-size:var(--t-spacing-3);
1090
+ padding-block:var(--t-spacing-1);
1091
+ padding-inline:var(--t-spacing-2);
1092
+ font-size:var(--t-font-size-md);
1093
+ color:var(--t-text-color-secondary);
1233
1094
  }
1234
1095
 
1235
- .tds-radio-group-description{
1236
- display:flex;
1237
- gap:var(--t-spacing-half);
1238
- align-items:flex-start;
1239
- margin:0;
1240
- font-size:var(--tds-radio-group-description-font-size);
1241
- line-height:var(--tds-radio-group-description-line-height);
1242
- color:var(--tds-radio-group-description-color);
1243
- cursor:text;
1096
+ .tds-combo-box-load-more{
1097
+ position:relative;
1098
+ min-block-size:calc(var(--t-spacing-3) + var(--t-spacing-1));
1099
+ }
1100
+
1101
+ .tds-combo-box-empty-state,
1102
+ .tds-combo-box-load-more{
1103
+ --tds-loading-spinner-visibility:visible;
1104
+ --tds-loading-spinner-animation-play-state:running;
1244
1105
  }
1245
1106
 
1246
- .tds-radio-group-description .tds-radio-group-description-invalid-icon{
1247
- display:var(--tds-radio-group-description-invalid-icon-display);
1248
- flex-shrink:0;
1249
- margin-top:calc(.5lh - .5em);
1250
- line-height:var(--tds-radio-group-description-line-height);
1107
+ .tds-combo-box-list-section:not(:first-child){
1108
+ margin-block-start:var(--t-spacing-half);
1251
1109
  }
1252
1110
 
1253
- .tds-radio-group--sm{
1254
- --tds-radio-group-line-height:1.35;
1255
- --tds-radio-group-font-size:var(--t-font-size-sm);
1256
- --tds-radio-group-description-font-size:var(--t-font-size-xs);
1257
- --tds-radio-group-description-line-height:1.3;
1111
+ .tds-combo-box-section-header{
1112
+ padding-block:var(--t-spacing-1);
1113
+ padding-inline:var(--t-spacing-1);
1114
+ font-size:var(--t-font-size-sm);
1115
+ font-weight:var(--t-font-weight-semibold);
1116
+ color:var(--t-text-color-secondary);
1258
1117
  }
1259
1118
 
1260
- .tds-number-stepper{
1261
- --tds-number-stepper-button-offset:4px;
1262
- --tds-number-stepper-button-gap:2px;
1119
+ .tds-date-picker{
1120
+ --tds-date-picker-button-offset:4px;
1263
1121
  }
1264
1122
 
1265
- .tds-number-stepper--lg{
1266
- --tds-number-stepper-button-offset:5px;
1267
- --tds-number-stepper-button-gap:4px;
1123
+ .tds-date-picker--lg{
1124
+ --tds-date-picker-button-offset:5px;
1268
1125
  }
1269
1126
 
1270
- .tds-number-stepper-field:has([readonly]) .tds-number-stepper-button{
1127
+ .tds-date-picker-field[data-focus-within]:has(.tds-date-picker-button[data-focused]){
1128
+ outline-color:transparent;
1129
+ outline-offset:0;
1130
+ border-color:var(--tds-field-border-color);
1131
+ }
1132
+
1133
+ .tds-date-picker-field:has(.tds-date-picker-input[data-readonly]) .tds-date-picker-button{
1271
1134
  display:none;
1272
1135
  }
1273
1136
 
1274
- .tds-number-stepper-input{
1275
- display:flex;
1137
+ .tds-date-picker-input{
1276
1138
  flex:1;
1277
- align-items:center;
1278
- min-inline-size:0;
1279
1139
  padding-block:var(--tds-field-padding-block);
1280
1140
  padding-inline:var(--tds-field-padding-inline);
1281
- font-family:inherit;
1282
- font-size:inherit;
1283
- color:inherit;
1284
- outline:0;
1285
- background:transparent;
1286
- border:0;
1141
+ overflow:auto clip;
1142
+ font-variant-numeric:tabular-nums;
1143
+ text-wrap:nowrap;
1144
+ scrollbar-width:none;
1287
1145
  }
1288
1146
 
1289
- .tds-number-stepper-input::-webkit-inner-spin-button,.tds-number-stepper-input::-webkit-outer-spin-button{
1290
- margin:0;
1291
- -webkit-appearance:none;
1292
- appearance:none;
1147
+ .tds-date-picker-input:has( + .tds-date-picker-button){
1148
+ padding-inline-end:0;
1293
1149
  }
1294
1150
 
1295
- .tds-number-stepper-button{
1151
+ .tds-date-picker-button{
1296
1152
  flex-shrink:0;
1297
1153
  align-self:center;
1298
- inline-size:calc(var(--tds-field-min-height) - (var(--tds-number-stepper-button-offset) * 2));
1299
- block-size:calc(var(--tds-field-min-height) - (var(--tds-number-stepper-button-offset) * 2));
1154
+ inline-size:calc(var(--tds-field-min-height) - (var(--tds-date-picker-button-offset) * 2));
1155
+ block-size:calc(var(--tds-field-min-height) - (var(--tds-date-picker-button-offset) * 2));
1300
1156
  padding:0;
1157
+ margin-inline-end:var(--tds-date-picker-button-offset);
1301
1158
  }
1302
1159
 
1303
- .tds-number-stepper-button + .tds-number-stepper-button{
1304
- margin-inline-start:var(--tds-number-stepper-button-gap);
1305
- }
1160
+ .tds-date-picker-popover{
1161
+ --tds-date-picker-popover-font-size:var(--t-font-size-md);
1162
+ --tds-date-picker-popover-padding:var(--t-spacing-1-half);
1163
+ --tds-date-picker-popover-background-color:var(--t-surface-color-card);
1164
+ --tds-date-picker-popover-shadow:hsl(0, 0%, 0%, .05) 0 10px 15px -3px, hsl(0, 0%, 0%, .05) 0 4px 6px -4px;
1165
+ --tds-date-picker-popover-interactive-timing-function:var(--t-ease-in-out);
1166
+ --tds-date-picker-popover-interactive-duration:var(--t-duration-200);
1167
+ --tds-date-picker-popover-interactive-property:color, background-color, border-color;
1306
1168
 
1307
- .tds-number-stepper-button:last-of-type{
1308
- margin-inline-end:var(--tds-number-stepper-button-offset);
1169
+ position:relative;
1170
+ overflow:hidden;
1171
+ background-color:var(--tds-date-picker-popover-background-color);
1172
+ border:var(--t-border-width) solid var(--t-border-color);
1173
+ border-radius:var(--t-border-radius);
1174
+ box-shadow:var(--tds-date-picker-popover-shadow);
1175
+ }
1176
+
1177
+ .tds-date-picker-popover[data-entering]{
1178
+ animation:tds-date-picker-popover var(--t-duration-300) var(--t-ease-out);
1309
1179
  }
1310
1180
 
1311
- .tds-input:has(textarea){
1312
- --tds-input-padding-block:6px;
1313
- --tds-input-resizer-size:var(--t-element-size-sm);
1314
- --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");
1315
- }
1181
+ .tds-date-picker-popover[data-exiting]{
1182
+ animation:tds-date-picker-popover var(--t-duration-200) var(--t-ease-in) reverse;
1183
+ }
1316
1184
 
1317
- @supports (x: attr(x type(*))){
1185
+ .tds-date-picker-popover[data-entering],.tds-date-picker-popover[data-exiting]{
1186
+ will-change:opacity, transform;
1187
+ }
1318
1188
 
1319
- .tds-input:has(textarea){
1320
- --tds-input-min-height:calc((attr(rows type(<number>), 3) * 1lh) + (var(--tds-input-padding-block) * 2) + 2px);
1321
- }
1189
+ @keyframes tds-date-picker-popover{
1190
+ from{
1191
+ opacity:0;
1192
+ transform:translateY(-8px);
1322
1193
  }
1194
+ }
1323
1195
 
1324
- .tds-input.tds-textarea--resize-vertical textarea{
1325
- resize:vertical;
1196
+ @media (prefers-reduced-motion: reduce){
1197
+ .tds-date-picker-popover[data-entering],.tds-date-picker-popover[data-exiting]{
1198
+ animation:none;
1326
1199
  }
1200
+ }
1327
1201
 
1328
- .tds-input.tds-textarea--resize-none textarea{
1329
- resize:none;
1330
- }
1202
+ .tds-date-picker-overlay{
1203
+ position:absolute;
1204
+ inset:0;
1205
+ z-index:1;
1206
+ display:flex;
1207
+ background-color:var(--tds-date-picker-popover-background-color);
1208
+ }
1331
1209
 
1332
- .tds-input.tds-textarea--resize-auto textarea{
1333
- resize:vertical;
1334
- }
1210
+ .tds-date-picker-overlay-list{
1211
+ display:grid;
1212
+ flex:1;
1213
+ grid-template-columns:repeat(3, 1fr);
1214
+ gap:var(--t-spacing-half);
1215
+ padding-inline:var(--tds-date-picker-popover-padding);
1216
+ outline:0;
1217
+ scrollbar-color:var(--t-fill-color-transparency-dark-030) transparent;
1218
+ scrollbar-width:thin;
1219
+ }
1335
1220
 
1336
- @supports (field-sizing: content){
1337
- .tds-input.tds-textarea--resize-auto textarea{
1338
- field-sizing:content;
1339
- resize:none;
1340
- }
1341
- }
1221
+ .tds-date-picker-overlay--month .tds-date-picker-overlay-list{
1222
+ grid-template-rows:repeat(4, 1fr);
1223
+ padding-bottom:var(--tds-date-picker-popover-padding);
1224
+ }
1342
1225
 
1343
- .tds-input textarea{
1344
- --tds-input-scrollbar-thumb-color-default:var(--t-fill-color-neutral-040);
1345
- --tds-input-scrollbar-thumb-color-hidden:transparent;
1346
- --tds-input-scrollbar-thumb-color-hover:var(--t-fill-color-neutral-030);
1347
- --tds-input-scrollbar-thumb-color-thumb-hover:var(--t-fill-color-neutral-020);
1348
- --tds-input-scrollbar-thumb-color-thumb-active:var(--t-fill-color-neutral-010);
1349
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-default);
1350
- --tds-input-scrollbar-surface-color:rgba(0, 0, 0, 0);
1351
- --tds-input-scrollbar-thumb-border-radius:999px;
1352
- --tds-input-scrollbar-thumb-border-width:3px;
1353
- --tds-input-scrollbar-track-margin-block:.125rem;
1354
- scrollbar-color:initial;
1355
- transition-timing-function:var(--t-ease-in-out);
1356
- transition-duration:var(--t-duration-200);
1357
- transition-property:var(--tds-input-transition-property), --tds-input-scrollbar-thumb-color;
1226
+ .tds-date-picker-overlay--year .tds-date-picker-overlay-list{
1227
+ grid-auto-rows:var(--t-container-size-xl);
1228
+ padding-right:var(--t-spacing-1);
1229
+ overflow-y:auto;
1230
+ scroll-padding-block:calc(var(--t-focus-ring-width) + var(--t-focus-ring-offset));
1358
1231
  }
1359
1232
 
1360
- @media (pointer: fine){
1361
- :is(.tds-input textarea)::-webkit-scrollbar{
1362
- width:12px;
1363
- height:12px;
1364
- cursor:default;
1365
- }
1233
+ .tds-date-picker-overlay-cell{
1234
+ display:flex;
1235
+ align-items:center;
1236
+ justify-content:center;
1237
+ font-family:inherit;
1238
+ font-size:var(--tds-date-picker-popover-font-size);
1239
+ color:var(--t-text-color);
1240
+ cursor:pointer;
1241
+ outline:0;
1242
+ background-color:transparent;
1243
+ border:0;
1244
+ border-radius:var(--t-border-radius-md);
1245
+ transition-timing-function:var(--tds-date-picker-popover-interactive-timing-function);
1246
+ transition-duration:var(--t-duration-100);
1247
+ transition-property:var(--tds-date-picker-popover-interactive-property);
1248
+ }
1366
1249
 
1367
- :is(.tds-input textarea)::-webkit-scrollbar-thumb{
1368
- cursor:default;
1369
- background:var(--tds-input-scrollbar-thumb-color);
1370
- background-clip:content-box;
1371
- border:var(--tds-input-scrollbar-thumb-border-width) solid var(--tds-input-scrollbar-surface-color);
1372
- border-radius:var(--tds-input-scrollbar-thumb-border-radius);
1373
- }
1250
+ .tds-date-picker-overlay-cell[data-hovered]{
1251
+ background-color:var(--t-fill-color-button-neutral-outline-hover);
1252
+ }
1374
1253
 
1375
- :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1376
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
1377
- }
1254
+ .tds-date-picker-overlay-cell[data-pressed]{
1255
+ background-color:var(--t-fill-color-button-neutral-outline-active);
1256
+ }
1378
1257
 
1379
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
1380
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
1381
- }
1258
+ .tds-date-picker-overlay-cell[data-selected]{
1259
+ font-weight:var(--t-font-weight-semibold);
1260
+ color:var(--t-text-color-inverted);
1261
+ background-color:var(--t-fill-color-interaction);
1262
+ }
1382
1263
 
1383
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
1384
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
1385
- }
1264
+ .tds-date-picker-overlay-cell[data-focus-visible]{
1265
+ outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
1266
+ }
1386
1267
 
1387
- :is(.tds-input textarea)::-webkit-scrollbar-corner{
1388
- background:var(--tds-input-scrollbar-surface-color);
1389
- }
1268
+ .tds-date-picker-overlay-cell[data-selected][data-focus-visible]{
1269
+ outline-offset:var(--t-focus-ring-offset);
1270
+ }
1271
+
1272
+ .tds-date-picker-calendar-heading{
1273
+ display:flex;
1274
+ flex:1;
1275
+ gap:var(--t-spacing-1);
1276
+ align-items:center;
1277
+ justify-content:flex-start;
1278
+ padding-inline-start:4px;
1279
+ }
1280
+
1281
+ .tds-date-picker-calendar-overlay-trigger{
1282
+ --_background-color:transparent;
1283
+ position:relative;
1284
+ padding:0;
1285
+ font-family:inherit;
1286
+ font-size:var(--tds-date-picker-popover-font-size);
1287
+ font-weight:var(--t-font-weight-semibold);
1288
+ font-feature-settings:"ss01", "ss02";
1289
+ color:var(--t-text-color);
1290
+ cursor:pointer;
1291
+ outline:0;
1292
+ background-color:transparent;
1293
+ border:0;
1294
+ border-radius:var(--t-border-radius-md);
1295
+ isolation:isolate;
1296
+ transition-timing-function:var(--tds-date-picker-popover-interactive-timing-function);
1297
+ transition-duration:var(--tds-date-picker-popover-interactive-duration);
1298
+ transition-property:var(--tds-date-picker-popover-interactive-property);
1299
+ }
1390
1300
 
1391
- :is(.tds-input textarea)::-webkit-resizer{
1392
- background:var(--tds-input-resizer-icon) no-repeat;
1393
- background-position:right bottom;
1394
- background-size:var(--tds-input-resizer-size) var(--tds-input-resizer-size);
1395
- }
1301
+ .tds-date-picker-calendar-overlay-trigger::before{
1302
+ position:absolute;
1303
+ inset:calc(var(--t-spacing-half) * -1);
1304
+ z-index:-1;
1305
+ pointer-events:inherit;
1306
+ content:"";
1307
+ background-color:var(--_background-color);
1308
+ border-radius:inherit;
1309
+ }
1396
1310
 
1397
- :is(.tds-input textarea)::-webkit-scrollbar-track{
1398
- margin-block:var(--tds-input-scrollbar-track-margin-block);
1399
- cursor:default;
1400
- }
1311
+ .tds-date-picker-calendar-overlay-trigger[data-hovered]{
1312
+ --_background-color:var(--t-fill-color-button-neutral-outline-hover);
1313
+ }
1401
1314
 
1402
- @supports (-moz-appearance: none){
1403
- :is(.tds-input textarea){
1404
- scrollbar-color:var(--tds-input-scrollbar-thumb-color-default) var(--tds-input-scrollbar-surface-color);
1405
- scrollbar-width:thin;
1406
- }
1315
+ .tds-date-picker-calendar-overlay-trigger[data-pressed]{
1316
+ --_background-color:var(--t-fill-color-button-neutral-outline-active);
1317
+ }
1407
1318
 
1408
- @media (hover){
1409
- :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1410
- scrollbar-color:var(--tds-input-scrollbar-thumb-color-hover) var(--tds-input-scrollbar-surface-color);
1411
- }
1412
- }
1413
- }
1319
+ .tds-date-picker-calendar-overlay-trigger[data-focus-visible]{
1320
+ outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
1321
+ outline-offset:var(--t-focus-ring-offset);
1414
1322
  }
1415
1323
 
1416
- .tds-radio{
1417
- --tds-radio-font-size:var(--t-font-size-md);
1418
- --tds-radio-cursor:pointer;
1419
- --tds-radio-line-height:1.4;
1420
- --tds-radio-transition-property:border-width;
1324
+ .tds-date-picker-calendar{
1325
+ inline-size:-moz-fit-content;
1326
+ inline-size:fit-content;
1327
+ font-size:var(--tds-date-picker-popover-font-size);
1328
+ }
1421
1329
 
1422
- --tds-radio-input-size:var(--t-element-size-md);
1423
- --tds-radio-input-border-radius:var(--t-border-radius-round);
1424
- --tds-radio-input-border-color:var(--t-form-border-color);
1425
- --tds-radio-input-border-width:var(--t-form-border-width);
1426
- --tds-radio-input-background-color:transparent;
1330
+ .tds-date-picker-calendar-body{
1331
+ position:relative;
1332
+ padding:var(--tds-date-picker-popover-padding);
1333
+ padding-block-start:0;
1334
+ }
1427
1335
 
1428
- --tds-radio-label-color:var(--t-form-color);
1336
+ .tds-date-picker-calendar-header{
1337
+ display:flex;
1338
+ align-items:center;
1339
+ justify-content:space-between;
1340
+ padding:var(--tds-date-picker-popover-padding);
1341
+ }
1429
1342
 
1430
- --tds-radio-description-font-size:var(--t-font-size-sm);
1431
- --tds-radio-description-line-height:1.35;
1432
- --tds-radio-description-color:var(--t-text-color-secondary);
1343
+ .tds-date-picker-calendar-title{
1344
+ padding:var(--t-spacing-half) var(--t-spacing-1);
1345
+ font-size:var(--tds-date-picker-popover-font-size);
1346
+ font-weight:var(--t-font-weight-semibold);
1347
+ }
1433
1348
 
1434
- position:relative;
1435
- display:inline-grid;
1436
- grid-template-columns:auto;
1437
- grid-auto-columns:1fr;
1438
- gap:var(--t-spacing-fourth) var(--t-spacing-1);
1439
- line-height:var(--tds-radio-line-height);
1440
- cursor:var(--tds-radio-cursor);
1441
- -webkit-user-select:none;
1442
- -moz-user-select:none;
1443
- user-select:none;
1349
+ .tds-date-picker-calendar-nav{
1350
+ display:flex;
1351
+ align-items:center;
1352
+ justify-content:center;
1353
+ padding:var(--t-spacing-half);
1354
+ font-size:.875em;
1355
+ color:var(--t-text-color);
1356
+ cursor:pointer;
1357
+ outline:0;
1358
+ background-color:transparent;
1359
+ border:0;
1360
+ border-radius:var(--t-border-radius-md);
1361
+ transition-timing-function:var(--tds-date-picker-popover-interactive-timing-function);
1362
+ transition-duration:var(--tds-date-picker-popover-interactive-duration);
1363
+ transition-property:var(--tds-date-picker-popover-interactive-property);
1444
1364
  }
1445
1365
 
1446
- .tds-radio label{
1447
- grid-area:1 / 2;
1448
- font-size:var(--tds-radio-font-size);
1449
- font-weight:var(--t-font-weight-normal);
1450
- color:var(--tds-radio-label-color);
1451
- cursor:var(--tds-radio-cursor);
1366
+ .tds-date-picker-calendar-nav[data-hovered]{
1367
+ background-color:var(--t-fill-color-button-neutral-outline-hover);
1452
1368
  }
1453
1369
 
1454
- .tds-radio input[type="radio"]{
1455
- position:relative;
1456
- width:1em;
1457
- height:1em;
1458
- margin:calc((1lh - 1em) / 2) 0 0;
1459
- font-size:var(--tds-radio-font-size);
1460
- line-height:inherit;
1461
- -webkit-appearance:none;
1462
- -moz-appearance:none;
1463
- appearance:none;
1464
- cursor:var(--tds-radio-cursor);
1465
- background-color:var(--tds-radio-input-background-color);
1466
- border:var(--tds-radio-input-border-width) solid var(--tds-radio-input-border-color);
1467
- border-radius:var(--tds-radio-input-border-radius);
1468
- transition-timing-function:var(--t-ease-in-out);
1469
- transition-duration:var(--t-duration-200);
1470
- transition-property:var(--tds-radio-transition-property);
1370
+ .tds-date-picker-calendar-nav[data-pressed]{
1371
+ background-color:var(--t-fill-color-button-neutral-outline-active);
1471
1372
  }
1472
1373
 
1473
- :is(.tds-radio input[type="radio"]):hover:not(:disabled){
1474
- --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
1475
- --tds-radio-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
1476
- }
1477
-
1478
- :is(.tds-radio input[type="radio"]):focus-visible{
1479
- outline:var(--t-focus-ring-outline);
1480
- outline-offset:var(--t-focus-ring-offset);
1481
- }
1482
-
1483
- :is(.tds-radio input[type="radio"]):disabled{
1484
- pointer-events:none;
1485
- }
1486
-
1487
- @media (prefers-reduced-motion: reduce){
1488
-
1489
- .tds-radio input[type="radio"]{
1490
- --tds-radio-transition-property:none;
1374
+ .tds-date-picker-calendar-nav[data-focus-visible]{
1375
+ outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
1376
+ outline-offset:var(--t-focus-ring-offset);
1491
1377
  }
1492
- }
1493
1378
 
1494
- .tds-radio:has(input:checked){
1495
- --tds-radio-input-background-color:var(--t-form-background-color);
1496
- --tds-radio-input-border-color:var(--t-border-color-control-info);
1497
- --tds-radio-input-border-width:4px;
1379
+ .tds-date-picker-calendar-nav[data-disabled]{
1380
+ color:var(--t-text-color-disabled);
1381
+ cursor:not-allowed;
1498
1382
  }
1499
1383
 
1500
- .tds-radio:has(input:checked) input:hover:not(:disabled){
1501
- --tds-radio-input-background-color:var(--t-form-background-color);
1502
- --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
1503
- }
1384
+ .tds-date-picker-calendar-grid{
1385
+ font-feature-settings:"ss01", "ss02";
1386
+ border-collapse:collapse;
1387
+ }
1504
1388
 
1505
- .tds-radio:has(input:user-invalid){
1506
- --tds-radio-input-border-color:var(--t-form-border-color-error);
1389
+ .tds-date-picker-calendar-grid :where(thead,tbody,tr,td,th){
1390
+ padding:0;
1391
+ border:0;
1507
1392
  }
1508
1393
 
1509
- .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
1510
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1511
- --tds-radio-input-background-color:var(--t-form-background-color-error);
1512
- }
1394
+ .tds-date-picker-calendar-header-cell{
1395
+ padding-block-end:var(--t-spacing-1);
1396
+ font-size:.875em;
1397
+ font-weight:var(--t-font-weight-medium);
1398
+ color:var(--t-text-color-secondary);
1399
+ text-align:center;
1400
+ -webkit-user-select:none;
1401
+ -moz-user-select:none;
1402
+ user-select:none;
1403
+ }
1513
1404
 
1514
- .tds-radio:has(input:disabled){
1515
- --tds-radio-input-background-color:var(--t-form-background-color-disabled);
1516
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
1405
+ .tds-date-picker-calendar-cell-button{
1406
+ position:relative;
1407
+ display:flex;
1408
+ align-items:center;
1409
+ justify-content:center;
1410
+ inline-size:2.25em;
1411
+ block-size:2.25em;
1412
+ color:var(--t-text-color);
1413
+ cursor:pointer;
1414
+ -webkit-user-select:none;
1415
+ -moz-user-select:none;
1416
+ user-select:none;
1417
+ outline:0;
1418
+ }
1517
1419
 
1518
- --tds-radio-label-color:var(--t-form-color-disabled);
1519
- --tds-radio-description-color:var(--t-form-color-disabled);
1520
- --tds-radio-cursor:not-allowed;
1420
+ .tds-date-picker-calendar-cell-button::before{
1421
+ position:absolute;
1422
+ inset:0;
1423
+ z-index:-1;
1424
+ content:"";
1425
+ background-color:var(--_background-color);
1426
+ border-radius:50%;
1521
1427
  }
1522
1428
 
1523
- .tds-radio:has(input:disabled) input:checked{
1524
- --tds-radio-input-background-color:var(--t-form-background-color);
1525
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
1429
+ .tds-date-picker-calendar-cell-button[data-today]::before{
1430
+ box-shadow:inset 0 0 0 1.5px var(--t-border-color);
1526
1431
  }
1527
1432
 
1528
- .tds-radio-description{
1529
- display:flex;
1530
- grid-area:2 / 2;
1531
- gap:var(--t-spacing-half);
1532
- align-items:flex-start;
1533
- margin:0;
1534
- font-size:var(--tds-radio-description-font-size);
1535
- line-height:var(--tds-radio-description-line-height);
1536
- color:var(--tds-radio-description-color);
1537
- cursor:text;
1538
- }
1539
-
1540
- .tds-radio--sm{
1541
- --tds-radio-line-height:1.35;
1542
- --tds-radio-input-size:var(--t-element-size-sm);
1543
- --tds-radio-font-size:var(--t-font-size-sm);
1544
- --tds-radio-description-font-size:var(--t-font-size-xs);
1545
- --tds-radio-description-line-height:1.3;
1546
- }
1433
+ .tds-date-picker-calendar-cell-button[data-outside-month]{
1434
+ display:none;
1435
+ }
1547
1436
 
1437
+ .tds-date-picker-calendar-cell-button[data-hovered]{
1438
+ --_background-color:var(--t-fill-color-button-neutral-outline-hover);
1439
+ }
1548
1440
 
1549
- :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{
1550
- -webkit-appearance:none;
1551
- appearance:none;
1552
- }
1441
+ .tds-date-picker-calendar-cell-button[data-pressed]{
1442
+ --_background-color:var(--t-fill-color-button-neutral-outline-active);
1443
+ }
1553
1444
 
1554
- [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
1555
- inline-size:1em;
1556
- block-size:2em;
1557
- }
1445
+ .tds-date-picker-calendar-cell-button[data-selected]{
1446
+ --_background-color:var(--t-fill-color-interaction);
1447
+ font-weight:var(--t-font-weight-semibold);
1448
+ color:var(--t-text-color-inverted);
1449
+ border-color:transparent;
1450
+ }
1558
1451
 
1559
- @supports (field-sizing: content){
1560
- .tds-input--auto-width{
1561
- inline-size:-moz-fit-content;
1562
- inline-size:fit-content;
1563
- min-inline-size:min(100%, 122px);
1452
+ .tds-date-picker-calendar-cell-button[data-unavailable]{
1453
+ color:var(--t-text-color-disabled);
1454
+ text-decoration:line-through;
1455
+ cursor:not-allowed;
1564
1456
  }
1565
1457
 
1566
- .tds-input--auto-width input{
1567
- field-sizing:content;
1568
- inline-size:auto;
1458
+ .tds-date-picker-calendar-cell-button[data-disabled]{
1459
+ color:var(--t-text-color-disabled);
1569
1460
  }
1570
- }
1571
1461
 
1572
- .tds-toggle-switch{
1573
- --tds-toggle-switch-font-size:var(--t-font-size-md);
1574
- --tds-toggle-switch-column-gap:var(--t-spacing-1);
1575
- --tds-toggle-switch-cursor:pointer;
1576
- --tds-toggle-switch-display:inline-grid;
1577
- --tds-toggle-switch-line-height:1.4;
1462
+ .tds-date-picker-calendar-cell-button[data-focus-visible]{
1463
+ outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
1464
+ outline-offset:-2px;
1465
+ }
1578
1466
 
1579
- --tds-toggle-switch-label-color:var(--t-form-color);
1467
+ .tds-date-picker-calendar-cell-button[data-focus-visible][data-selected]{
1468
+ outline-offset:var(--t-focus-ring-offset);
1469
+ }
1580
1470
 
1581
- --tds-toggle-switch-track-width:var(--t-container-size-md);
1582
- --tds-toggle-switch-track-outline:none;
1583
- --tds-toggle-switch-track-height:var(--t-container-size-xs);
1584
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color);
1585
- --tds-toggle-switch-track-transition:background-color var(--t-duration-100) var(--t-ease-in-out);
1471
+ .tds-date-picker-popover--lg{
1472
+ --tds-date-picker-popover-font-size:var(--t-font-size-lg);
1473
+ }
1586
1474
 
1587
- --tds-toggle-switch-thumb-size:var(--t-element-size-md);
1588
- --tds-toggle-switch-thumb-transform:translateX(0);
1589
- --tds-toggle-switch-thumb-transition:transform var(--t-duration-200) var(--t-ease-in-out);
1475
+ .tds-number-stepper{
1476
+ --tds-number-stepper-button-offset:4px;
1477
+ --tds-number-stepper-button-gap:2px;
1478
+ }
1590
1479
 
1591
- --tds-toggle-switch-description-font-size:var(--t-font-size-sm);
1592
- --tds-toggle-switch-description-line-height:1.35;
1593
- --tds-toggle-switch-description-color:var(--t-text-color-secondary);
1594
- position:relative;
1480
+ .tds-number-stepper--lg{
1481
+ --tds-number-stepper-button-offset:5px;
1482
+ --tds-number-stepper-button-gap:4px;
1483
+ }
1595
1484
 
1596
- display:var(--tds-toggle-switch-display);
1597
- grid-template-columns:auto;
1598
- grid-auto-columns:1fr;
1599
- gap:var(--t-spacing-fourth) var(--tds-toggle-switch-column-gap);
1600
- -webkit-user-select:none;
1601
- -moz-user-select:none;
1602
- user-select:none;
1485
+ .tds-number-stepper-field:has([readonly]) .tds-number-stepper-button{
1486
+ display:none;
1603
1487
  }
1604
1488
 
1605
- .tds-toggle-switch input[type="checkbox"]{
1606
- position:absolute;
1607
- width:var(--tds-toggle-switch-track-width);
1608
- height:var(--tds-toggle-switch-track-height);
1489
+ .tds-number-stepper-input{
1490
+ display:flex;
1491
+ flex:1;
1492
+ align-items:center;
1493
+ min-inline-size:0;
1494
+ padding-block:var(--tds-field-padding-block);
1495
+ padding-inline:var(--tds-field-padding-inline);
1496
+ font-family:inherit;
1497
+ font-size:inherit;
1498
+ color:inherit;
1499
+ outline:0;
1500
+ background:transparent;
1501
+ border:0;
1502
+ }
1503
+
1504
+ .tds-number-stepper-input::-webkit-inner-spin-button,.tds-number-stepper-input::-webkit-outer-spin-button{
1609
1505
  margin:0;
1610
1506
  -webkit-appearance:none;
1611
- -moz-appearance:none;
1612
1507
  appearance:none;
1613
- cursor:var(--tds-toggle-switch-cursor);
1614
- outline:var(--tds-toggle-switch-track-outline);
1615
- outline-offset:var(--t-focus-ring-offset);
1616
- background-color:transparent;
1617
- border:0;
1618
- border-radius:var(--t-border-radius-round);
1619
1508
  }
1620
1509
 
1621
- :is(.tds-toggle-switch input[type="checkbox"]):focus-visible{
1622
- --tds-toggle-switch-track-outline:var(--t-focus-ring-outline);
1623
- }
1510
+ .tds-number-stepper-button{
1511
+ flex-shrink:0;
1512
+ align-self:center;
1513
+ inline-size:calc(var(--tds-field-min-height) - (var(--tds-number-stepper-button-offset) * 2));
1514
+ block-size:calc(var(--tds-field-min-height) - (var(--tds-number-stepper-button-offset) * 2));
1515
+ padding:0;
1516
+ }
1624
1517
 
1625
- .tds-toggle-switch label{
1626
- display:inline-flex;
1627
- grid-area:1 / 2;
1628
- -moz-column-gap:var(--tds-toggle-switch-column-gap);
1629
- column-gap:var(--tds-toggle-switch-column-gap);
1630
- margin-top:-.09375em;
1631
- font-size:var(--tds-toggle-switch-font-size);
1632
- font-weight:var(--t-font-weight-normal);
1633
- line-height:var(--tds-toggle-switch-line-height);
1634
- color:var(--tds-toggle-switch-label-color);
1635
- cursor:var(--tds-toggle-switch-cursor);
1518
+ .tds-number-stepper-button + .tds-number-stepper-button{
1519
+ margin-inline-start:var(--tds-number-stepper-button-gap);
1636
1520
  }
1637
1521
 
1638
- .tds-toggle-switch:not(:has(input:disabled)):has(input:hover){
1639
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-hover);
1522
+ .tds-number-stepper-button:last-of-type{
1523
+ margin-inline-end:var(--tds-number-stepper-button-offset);
1640
1524
  }
1641
1525
 
1642
- .tds-toggle-switch:has(input:checked){
1643
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on);
1644
- --tds-toggle-switch-thumb-transform:translateX(calc(var(--tds-toggle-switch-track-width) - var(--tds-toggle-switch-thumb-size) - var(--t-spacing-half)));
1645
- }
1526
+ .tds-radio-group{
1527
+ --tds-radio-group-font-size:var(--t-font-size-md);
1528
+ --tds-radio-group-line-height:1.4;
1529
+ --tds-radio-group-gap:var(--t-spacing-1);
1646
1530
 
1647
- .tds-toggle-switch:has(input:checked):not(:has(input:disabled)):has(input:hover){
1648
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on-hover);
1649
- }
1531
+ --tds-radio-group-legend-margin-bottom:var(--tds-radio-group-gap);
1650
1532
 
1651
- .tds-toggle-switch:has(input:disabled){
1652
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-disabled);
1653
- --tds-toggle-switch-label-color:var(--t-form-color-disabled);
1654
- --tds-toggle-switch-description-color:var(--t-form-color-disabled);
1655
- --tds-toggle-switch-cursor:not-allowed;
1656
- }
1533
+ --tds-radio-group-description-font-size:var(--t-font-size-sm);
1534
+ --tds-radio-group-description-line-height:1.35;
1535
+ --tds-radio-group-description-color:var(--t-text-color-secondary);
1536
+ --tds-radio-group-description-invalid-icon-display:none;
1537
+ display:flex;
1538
+ flex-direction:column;
1539
+ gap:var(--tds-radio-group-gap);
1540
+ padding:0;
1541
+ margin:0;
1657
1542
 
1658
- .tds-toggle-switch-track{
1659
- position:relative;
1660
- flex-shrink:0;
1661
- width:var(--tds-toggle-switch-track-width);
1662
- height:var(--tds-toggle-switch-track-height);
1663
- background-color:var(--tds-toggle-switch-track-background-color);
1664
- border-radius:var(--t-border-radius-round);
1665
- transition:var(--tds-toggle-switch-track-transition);
1543
+ font-size:var(--tds-radio-group-font-size);
1544
+ line-height:var(--tds-radio-group-line-height);
1545
+ border:0;
1666
1546
  }
1667
1547
 
1668
- .tds-toggle-switch-track::before{
1669
- position:absolute;
1670
- top:var(--t-spacing-fourth);
1671
- left:var(--t-spacing-fourth);
1672
- width:var(--tds-toggle-switch-thumb-size);
1673
- height:var(--tds-toggle-switch-thumb-size);
1674
- content:"";
1675
- background-color:#fff;
1676
- border-radius:var(--t-border-radius-round);
1677
- transform:var(--tds-toggle-switch-thumb-transform);
1678
- transition:var(--tds-toggle-switch-thumb-transition);
1548
+ .tds-radio-group legend{
1549
+ padding:0;
1550
+ margin-bottom:var(--tds-radio-group-legend-margin-bottom);
1679
1551
  }
1680
1552
 
1681
- @media (prefers-reduced-motion: reduce){
1553
+ .tds-radio-group:has(.tds-radio-group-description){
1554
+ --tds-radio-group-legend-margin-bottom:var(--t-spacing-fourth);
1555
+ }
1682
1556
 
1683
- .tds-toggle-switch-track{
1684
- --tds-toggle-switch-track-transition:none;
1685
- --tds-toggle-switch-thumb-transition:none;
1686
- }
1557
+ .tds-radio-group[aria-invalid="true"]{
1558
+ --tds-radio-group-description-color:var(--t-text-color-status-error);
1559
+ --tds-radio-group-description-invalid-icon-display:inline-block;
1687
1560
  }
1688
1561
 
1689
- .tds-toggle-switch-description{
1562
+ .tds-radio-group[aria-invalid="true"] .tds-radio{
1563
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
1564
+ }
1565
+
1566
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
1567
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1568
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
1569
+ }
1570
+
1571
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
1572
+ --tds-radio-input-background-color:var(--t-form-background-color);
1573
+ }
1574
+
1575
+ .tds-radio-group:has(input:required) legend::after{
1576
+ margin-left:.25ch;
1577
+ color:var(--t-text-color-status-error);
1578
+ content:"*";
1579
+ }
1580
+
1581
+ .tds-radio-group-fields{
1690
1582
  display:flex;
1691
- grid-area:2 / 2;
1583
+ flex-direction:column;
1584
+ gap:var(--tds-radio-group-gap);
1585
+ align-items:flex-start;
1586
+ }
1587
+
1588
+ .tds-radio-group-description{
1589
+ display:flex;
1590
+ gap:var(--t-spacing-half);
1692
1591
  align-items:flex-start;
1693
1592
  margin:0;
1694
- font-size:var(--tds-toggle-switch-description-font-size);
1695
- line-height:var(--tds-toggle-switch-description-line-height);
1696
- color:var(--tds-toggle-switch-description-color);
1593
+ font-size:var(--tds-radio-group-description-font-size);
1594
+ line-height:var(--tds-radio-group-description-line-height);
1595
+ color:var(--tds-radio-group-description-color);
1697
1596
  cursor:text;
1698
1597
  }
1699
1598
 
1700
- .tds-toggle-switch--sm{
1701
- --tds-toggle-switch-font-size:var(--t-font-size-sm);
1702
- --tds-toggle-switch-line-height:1.35;
1703
- --tds-toggle-switch-track-height:var(--t-element-size-lg);
1704
- --tds-toggle-switch-thumb-size:var(--t-element-size-sm);
1705
- --tds-toggle-switch-description-font-size:var(--t-font-size-xs);
1706
- --tds-toggle-switch-description-line-height:1.3;
1599
+ .tds-radio-group-description .tds-radio-group-description-invalid-icon{
1600
+ display:var(--tds-radio-group-description-invalid-icon-display);
1601
+ flex-shrink:0;
1602
+ margin-top:calc(.5lh - .5em);
1603
+ line-height:var(--tds-radio-group-description-line-height);
1604
+ }
1605
+
1606
+ .tds-radio-group--sm{
1607
+ --tds-radio-group-line-height:1.35;
1608
+ --tds-radio-group-font-size:var(--t-font-size-sm);
1609
+ --tds-radio-group-description-font-size:var(--t-font-size-xs);
1610
+ --tds-radio-group-description-line-height:1.3;
1707
1611
  }
1708
1612
 
1709
- .tds-toggle-switch--hide-label{
1710
- --tds-toggle-switch-display:inline-flex;
1613
+ .tds-radio{
1614
+ --tds-radio-font-size:var(--t-font-size-md);
1615
+ --tds-radio-cursor:pointer;
1616
+ --tds-radio-line-height:1.4;
1617
+ --tds-radio-transition-property:border-width;
1618
+
1619
+ --tds-radio-input-size:var(--t-element-size-md);
1620
+ --tds-radio-input-border-radius:var(--t-border-radius-round);
1621
+ --tds-radio-input-border-color:var(--t-form-border-color);
1622
+ --tds-radio-input-border-width:var(--t-form-border-width);
1623
+ --tds-radio-input-background-color:transparent;
1624
+
1625
+ --tds-radio-label-color:var(--t-form-color);
1626
+
1627
+ --tds-radio-description-font-size:var(--t-font-size-sm);
1628
+ --tds-radio-description-line-height:1.35;
1629
+ --tds-radio-description-color:var(--t-text-color-secondary);
1630
+
1631
+ position:relative;
1632
+ display:inline-grid;
1633
+ grid-template-columns:auto;
1634
+ grid-auto-columns:1fr;
1635
+ gap:var(--t-spacing-fourth) var(--t-spacing-1);
1636
+ line-height:var(--tds-radio-line-height);
1637
+ cursor:var(--tds-radio-cursor);
1638
+ -webkit-user-select:none;
1639
+ -moz-user-select:none;
1640
+ user-select:none;
1711
1641
  }
1712
1642
 
1713
- @layer t-critical{
1714
- tds-page-header:not(.hydrated){
1715
- display:none;
1643
+ .tds-radio label{
1644
+ grid-area:1 / 2;
1645
+ font-size:var(--tds-radio-font-size);
1646
+ font-weight:var(--t-font-weight-normal);
1647
+ color:var(--tds-radio-label-color);
1648
+ cursor:var(--tds-radio-cursor);
1716
1649
  }
1717
- }
1718
1650
 
1719
- @layer t-component{
1720
- .tds-page-header{
1721
- --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
1722
- --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
1723
- --tds-page-header-color:var(--t-text-color);
1724
- --tds-page-header-bottom-border-color:transparent;
1725
- --tds-page-header-headline-color:var(--t-text-color-headline);
1726
- --tds-page-header-headline-font-size:var(--t-font-size-2xl);
1727
- --tds-page-header-padding-x:var(--t-spacing-2);
1728
- --tds-page-header-padding-y:var(--t-spacing-2);
1729
- --tds-page-header-nav-padding-x:var(--tds-page-header-padding-x, var(--t-spacing-3));
1730
- --tds-page-header-nav-gap:var(--t-spacing-1);
1731
- --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%);
1732
- --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
1733
- --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
1734
- --tds-page-header-nav-item-color:var(--t-text-color-secondary);
1735
- --tds-page-header-nav-item-background-color:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 35%);
1736
- --tds-page-header-nav-item-border-width:1px;
1651
+ .tds-radio input[type="radio"]{
1652
+ position:relative;
1653
+ width:1em;
1654
+ height:1em;
1655
+ margin:calc((1lh - 1em) / 2) 0 0;
1656
+ font-size:var(--tds-radio-font-size);
1657
+ line-height:inherit;
1658
+ -webkit-appearance:none;
1659
+ -moz-appearance:none;
1660
+ appearance:none;
1661
+ cursor:var(--tds-radio-cursor);
1662
+ background-color:var(--tds-radio-input-background-color);
1663
+ border:var(--tds-radio-input-border-width) solid var(--tds-radio-input-border-color);
1664
+ border-radius:var(--tds-radio-input-border-radius);
1665
+ transition-timing-function:var(--t-ease-in-out);
1666
+ transition-duration:var(--t-duration-200);
1667
+ transition-property:var(--tds-radio-transition-property);
1668
+ }
1737
1669
 
1738
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
1739
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color);
1670
+ :is(.tds-radio input[type="radio"]):hover:not(:disabled){
1671
+ --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
1672
+ --tds-radio-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
1673
+ }
1740
1674
 
1741
- --tds-page-header-nav-item-color-hover:var(--t-text-color);
1742
- --tds-page-header-nav-item-background-color-hover:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 20%);
1743
- --tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
1675
+ :is(.tds-radio input[type="radio"]):focus-visible{
1676
+ outline:var(--t-focus-ring-outline);
1677
+ outline-offset:var(--t-focus-ring-offset);
1678
+ }
1744
1679
 
1745
- --tds-page-header-nav-item-background-color-active:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 10%);
1746
- --tds-page-header-nav-item-border-color-active:var(--tds-page-header-nav-item-background-color-active);
1680
+ :is(.tds-radio input[type="radio"]):disabled{
1681
+ pointer-events:none;
1682
+ }
1747
1683
 
1748
- --tds-page-header-nav-item-color-disabled:var(--t-text-color-disabled);
1749
- --tds-page-header-nav-item-background-color-disabled:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 50%);
1750
- --tds-page-header-nav-item-border-color-disabled:var(--tds-page-header-nav-item-background-color-disabled);
1684
+ @media (prefers-reduced-motion: reduce){
1751
1685
 
1752
- --tds-page-header-nav-item-color-selected:var(--t-text-color);
1753
- --tds-page-header-nav-item-background-color-selected:var(--t-surface-color-canvas);
1754
- --tds-page-header-nav-item-border-color-selected:var(--tds-page-header-nav-item-background-color-selected);
1755
- --tds-page-header-nav-item-border-bottom-color-selected:var(--tds-page-header-nav-item-background-color-selected);
1756
- --tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning);
1686
+ .tds-radio input[type="radio"]{
1687
+ --tds-radio-transition-property:none;
1757
1688
  }
1689
+ }
1758
1690
 
1759
- .tds-page-header--profile{
1760
- --tds-page-header-padding-y:20px;
1691
+ .tds-radio:has(input:checked){
1692
+ --tds-radio-input-background-color:var(--t-form-background-color);
1693
+ --tds-radio-input-border-color:var(--t-border-color-control-info);
1694
+ --tds-radio-input-border-width:4px;
1761
1695
  }
1762
1696
 
1763
- @supports (color: light-dark(#fff, #000)){
1764
- .tds-page-header{
1765
- --tds-page-header-nav-background-start:light-dark(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0));
1766
- --tds-page-header-nav-background-end:light-dark(rgba(0, 0, 0, .05), rgba(255, 255, 255, .1));
1697
+ .tds-radio:has(input:checked) input:hover:not(:disabled){
1698
+ --tds-radio-input-background-color:var(--t-form-background-color);
1699
+ --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
1767
1700
  }
1701
+
1702
+ .tds-radio:has(input:user-invalid){
1703
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
1768
1704
  }
1769
1705
 
1770
- @media (min-width: 600px){
1771
- .tds-page-header{
1772
- --tds-page-header-background-color:var(--t-surface-color-canvas);
1773
- --tds-page-header-color:var(--t-text-color-secondary);
1774
- --tds-page-header-bottom-border-color:var(--t-border-color);
1775
- --tds-page-header-padding-x:var(--t-spacing-3);
1776
- --tds-page-header-headline-font-size:var(--t-font-size-3xl);
1777
- --tds-page-header-nav-gap:var(--t-spacing-half);
1778
- --tds-page-header-nav-background:transparent;
1779
- --tds-page-header-nav-item-padding-x:var(--t-spacing-2);
1780
- --tds-page-header-nav-item-border-width:1px;
1781
- --tds-page-header-nav-item-color:var(--t-text-color);
1782
- --tds-page-header-nav-item-background-color:var(--t-fill-color-neutral-070);
1783
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-bottom-border-color);
1784
- --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-060);
1785
- --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-050);
1786
- --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
1787
- --tds-page-header-nav-item-border-color-selected:var(--t-border-color);
1706
+ .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
1707
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1708
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
1788
1709
  }
1710
+
1711
+ .tds-radio:has(input:disabled){
1712
+ --tds-radio-input-background-color:var(--t-form-background-color-disabled);
1713
+ --tds-radio-input-border-color:var(--t-form-border-color-disabled);
1714
+
1715
+ --tds-radio-label-color:var(--t-form-color-disabled);
1716
+ --tds-radio-description-color:var(--t-form-color-disabled);
1717
+ --tds-radio-cursor:not-allowed;
1789
1718
  }
1790
- }
1791
1719
 
1792
- .tds-page-header{
1720
+ .tds-radio:has(input:disabled) input:checked{
1721
+ --tds-radio-input-background-color:var(--t-form-background-color);
1722
+ --tds-radio-input-border-color:var(--t-form-border-color-disabled);
1723
+ }
1724
+
1725
+ .tds-radio-description{
1793
1726
  display:flex;
1794
- flex-direction:column;
1795
- padding-top:var(--tds-page-header-padding-y);
1796
- color:var(--tds-page-header-color);
1797
- background:var(--tds-page-header-background-color);
1798
- border-bottom:1px solid var(--tds-page-header-bottom-border-color);
1727
+ grid-area:2 / 2;
1728
+ gap:var(--t-spacing-half);
1729
+ align-items:flex-start;
1730
+ margin:0;
1731
+ font-size:var(--tds-radio-description-font-size);
1732
+ line-height:var(--tds-radio-description-line-height);
1733
+ color:var(--tds-radio-description-color);
1734
+ cursor:text;
1799
1735
  }
1800
1736
 
1801
- .tds-page-header:not(.has-nav){
1802
- padding-bottom:var(--tds-page-header-padding-y);
1803
- }
1737
+ .tds-radio--sm{
1738
+ --tds-radio-line-height:1.35;
1739
+ --tds-radio-input-size:var(--t-element-size-sm);
1740
+ --tds-radio-font-size:var(--t-font-size-sm);
1741
+ --tds-radio-description-font-size:var(--t-font-size-xs);
1742
+ --tds-radio-description-line-height:1.3;
1743
+ }
1804
1744
 
1805
- .tds-page-header.inactive{
1806
- background:var(--tds-page-header-background-color-inactive);
1807
- }
1745
+ .tds-input:has(textarea){
1746
+ --tds-input-padding-block:6px;
1747
+ --tds-input-resizer-size:var(--t-element-size-sm);
1748
+ --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");
1749
+ }
1808
1750
 
1809
- .tds-page-header :is([slot="actions"],.tds-page-header__actions){
1810
- width:100%;
1811
- }
1751
+ @supports (x: attr(x type(*))){
1812
1752
 
1813
- .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
1814
- display:flex;
1815
- flex-flow:row wrap;
1816
- gap:var(--t-spacing-half) var(--t-spacing-1);
1817
- align-items:flex-start;
1818
- justify-content:flex-start;
1819
- min-width:0;
1753
+ .tds-input:has(textarea){
1754
+ --tds-input-min-height:calc((attr(rows type(<number>), 3) * 1lh) + (var(--tds-input-padding-block) * 2) + 2px);
1755
+ }
1820
1756
  }
1821
1757
 
1822
- :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{
1823
- display:flex;
1824
- gap:var(--tds-page-header-nav-gap);
1825
- padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
1826
- margin:0 0 -1px;
1827
- overflow:auto;
1828
- list-style:none;
1829
- background:var(--tds-page-header-nav-background);
1758
+ .tds-input.tds-textarea--resize-vertical textarea{
1759
+ resize:vertical;
1830
1760
  }
1831
1761
 
1832
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button){
1833
- position:relative;
1834
- display:inline-flex;
1835
- padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
1836
- font-size:var(--t-font-size-sm);
1837
- line-height:22px;
1838
- color:var(--tds-page-header-nav-item-color);
1839
- white-space:nowrap;
1840
- text-decoration:none;
1841
- -webkit-appearance:none;
1842
- -moz-appearance:none;
1843
- appearance:none;
1844
- cursor:pointer;
1845
- outline-offset:-2px;
1846
- background-color:var(--tds-page-header-nav-item-background-color);
1847
- background-clip:padding-box;
1848
- border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
1849
- border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
1850
- border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
1762
+ .tds-input.tds-textarea--resize-none textarea{
1763
+ resize:none;
1851
1764
  }
1852
1765
 
1853
- .selected:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)){
1854
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-selected);
1855
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-selected);
1856
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-selected);
1857
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-selected);
1766
+ .tds-input.tds-textarea--resize-auto textarea{
1767
+ resize:vertical;
1768
+ }
1769
+
1770
+ @supports (field-sizing: content){
1771
+ .tds-input.tds-textarea--resize-auto textarea{
1772
+ field-sizing:content;
1773
+ resize:none;
1858
1774
  }
1775
+ }
1776
+
1777
+ .tds-input textarea{
1778
+ --tds-input-scrollbar-thumb-color-default:var(--t-fill-color-neutral-040);
1779
+ --tds-input-scrollbar-thumb-color-hidden:transparent;
1780
+ --tds-input-scrollbar-thumb-color-hover:var(--t-fill-color-neutral-030);
1781
+ --tds-input-scrollbar-thumb-color-thumb-hover:var(--t-fill-color-neutral-020);
1782
+ --tds-input-scrollbar-thumb-color-thumb-active:var(--t-fill-color-neutral-010);
1783
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-default);
1784
+ --tds-input-scrollbar-surface-color:rgba(0, 0, 0, 0);
1785
+ --tds-input-scrollbar-thumb-border-radius:999px;
1786
+ --tds-input-scrollbar-thumb-border-width:3px;
1787
+ --tds-input-scrollbar-track-margin-block:.125rem;
1788
+ scrollbar-color:initial;
1789
+ transition-timing-function:var(--t-ease-in-out);
1790
+ transition-duration:var(--t-duration-200);
1791
+ transition-property:var(--tds-input-transition-property), --tds-input-scrollbar-thumb-color;
1792
+ }
1793
+
1794
+ @media (pointer: fine){
1795
+ :is(.tds-input textarea)::-webkit-scrollbar{
1796
+ width:12px;
1797
+ height:12px;
1798
+ cursor:default;
1799
+ }
1800
+
1801
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb{
1802
+ cursor:default;
1803
+ background:var(--tds-input-scrollbar-thumb-color);
1804
+ background-clip:content-box;
1805
+ border:var(--tds-input-scrollbar-thumb-border-width) solid var(--tds-input-scrollbar-surface-color);
1806
+ border-radius:var(--tds-input-scrollbar-thumb-border-radius);
1807
+ }
1859
1808
 
1860
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):hover{
1861
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
1862
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
1863
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
1864
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-hover);
1865
- }
1809
+ :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1810
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
1811
+ }
1866
1812
 
1867
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):active{
1868
- background-color:var(--tds-page-header-nav-item-background-color-active);
1869
- border-color:var(--tds-page-header-nav-item-border-color-active);
1870
- border-bottom-color:var(--tds-page-header-nav-item-background-color-active);
1871
- }
1813
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
1814
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
1815
+ }
1872
1816
 
1873
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):disabled{
1874
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-disabled);
1875
- color:var(--tds-page-header-nav-item-color-disabled);
1876
- cursor:not-allowed;
1877
- background-color:var(--tds-page-header-nav-item-background-color-disabled);
1878
- opacity:1;
1879
- }
1817
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
1818
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
1819
+ }
1880
1820
 
1881
- @media (min-width: 600px){
1882
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected)::after{
1883
- position:absolute;
1884
- inset:auto -1px -1px;
1885
- height:1px;
1886
- pointer-events:none;
1887
- content:"";
1888
- background-color:var(--tds-page-header-bottom-border-color);
1889
- }
1890
- }
1821
+ :is(.tds-input textarea)::-webkit-scrollbar-corner{
1822
+ background:var(--tds-input-scrollbar-surface-color);
1823
+ }
1891
1824
 
1892
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
1893
- position:relative;
1825
+ :is(.tds-input textarea)::-webkit-resizer{
1826
+ background:var(--tds-input-resizer-icon) no-repeat;
1827
+ background-position:right bottom;
1828
+ background-size:var(--tds-input-resizer-size) var(--tds-input-resizer-size);
1894
1829
  }
1895
1830
 
1896
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator)) :is(a,button){
1897
- -webkit-mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
1898
- mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
1899
- }
1831
+ :is(.tds-input textarea)::-webkit-scrollbar-track{
1832
+ margin-block:var(--tds-input-scrollbar-track-margin-block);
1833
+ cursor:default;
1834
+ }
1900
1835
 
1901
- :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{
1902
- position:absolute;
1903
- top:-5px;
1904
- right:-2px;
1905
- width:10px;
1906
- height:10px;
1907
- content:"";
1908
- background:var(--tds-page-header-nav-item-indicator-color);
1909
- border-radius:50%;
1836
+ @supports (-moz-appearance: none){
1837
+ :is(.tds-input textarea){
1838
+ scrollbar-color:var(--tds-input-scrollbar-thumb-color-default) var(--tds-input-scrollbar-surface-color);
1839
+ scrollbar-width:thin;
1910
1840
  }
1911
1841
 
1912
- @media (prefers-reduced-motion: no-preference){
1913
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
1914
- animation:indicator-pulse 1.25s ease infinite;
1842
+ @media (hover){
1843
+ :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1844
+ scrollbar-color:var(--tds-input-scrollbar-thumb-color-hover) var(--tds-input-scrollbar-surface-color);
1915
1845
  }
1916
1846
  }
1847
+ }
1848
+ }
1917
1849
 
1918
- .tds-page-header__title-bar{
1919
- display:flex;
1920
- flex-direction:column;
1921
- gap:var(--t-spacing-2) var(--t-spacing-1);
1922
- align-items:flex-start;
1923
- justify-content:space-between;
1924
- padding:0 var(--tds-page-header-padding-x);
1850
+ .tds-time-field-input{
1851
+ --tds-field-date-segment-padding-inline:1px;
1852
+ padding-block:var(--tds-field-padding-block);
1853
+ padding-inline:var(--tds-field-padding-inline);
1854
+ font-variant-numeric:tabular-nums;
1925
1855
  }
1926
1856
 
1927
- .tds-page-header--profile > .tds-page-header__title-bar{
1928
- align-items:center;
1929
- }
1857
+ .tds-toggle-switch{
1858
+ --tds-toggle-switch-font-size:var(--t-font-size-md);
1859
+ --tds-toggle-switch-column-gap:var(--t-spacing-1);
1860
+ --tds-toggle-switch-cursor:pointer;
1861
+ --tds-toggle-switch-display:inline-grid;
1862
+ --tds-toggle-switch-line-height:1.4;
1930
1863
 
1931
- .tds-page-header__primary{
1932
- width:100%;
1864
+ --tds-toggle-switch-label-color:var(--t-form-color);
1865
+
1866
+ --tds-toggle-switch-track-width:var(--t-container-size-md);
1867
+ --tds-toggle-switch-track-outline:none;
1868
+ --tds-toggle-switch-track-height:var(--t-container-size-xs);
1869
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color);
1870
+ --tds-toggle-switch-track-transition:background-color var(--t-duration-100) var(--t-ease-in-out);
1871
+
1872
+ --tds-toggle-switch-thumb-size:var(--t-element-size-md);
1873
+ --tds-toggle-switch-thumb-transform:translateX(0);
1874
+ --tds-toggle-switch-thumb-transition:transform var(--t-duration-200) var(--t-ease-in-out);
1875
+
1876
+ --tds-toggle-switch-description-font-size:var(--t-font-size-sm);
1877
+ --tds-toggle-switch-description-line-height:1.35;
1878
+ --tds-toggle-switch-description-color:var(--t-text-color-secondary);
1879
+ position:relative;
1880
+
1881
+ display:var(--tds-toggle-switch-display);
1882
+ grid-template-columns:auto;
1883
+ grid-auto-columns:1fr;
1884
+ gap:var(--t-spacing-fourth) var(--tds-toggle-switch-column-gap);
1885
+ -webkit-user-select:none;
1886
+ -moz-user-select:none;
1887
+ user-select:none;
1933
1888
  }
1934
1889
 
1935
- .tds-page-header__primary h1{
1890
+ .tds-toggle-switch input[type="checkbox"]{
1891
+ position:absolute;
1892
+ width:var(--tds-toggle-switch-track-width);
1893
+ height:var(--tds-toggle-switch-track-height);
1936
1894
  margin:0;
1937
- font-size:var(--tds-page-header-headline-font-size);
1895
+ -webkit-appearance:none;
1896
+ -moz-appearance:none;
1897
+ appearance:none;
1898
+ cursor:var(--tds-toggle-switch-cursor);
1899
+ outline:var(--tds-toggle-switch-track-outline);
1900
+ outline-offset:var(--t-focus-ring-offset);
1901
+ background-color:transparent;
1902
+ border:0;
1903
+ border-radius:var(--t-border-radius-round);
1904
+ }
1905
+
1906
+ :is(.tds-toggle-switch input[type="checkbox"]):focus-visible{
1907
+ --tds-toggle-switch-track-outline:var(--t-focus-ring-outline);
1908
+ }
1909
+
1910
+ .tds-toggle-switch label{
1911
+ display:inline-flex;
1912
+ grid-area:1 / 2;
1913
+ -moz-column-gap:var(--tds-toggle-switch-column-gap);
1914
+ column-gap:var(--tds-toggle-switch-column-gap);
1915
+ margin-top:-.09375em;
1916
+ font-size:var(--tds-toggle-switch-font-size);
1938
1917
  font-weight:var(--t-font-weight-normal);
1939
- line-height:32px;
1940
- color:var(--tds-page-header-headline-color);
1941
- overflow-wrap:break-word;
1918
+ line-height:var(--tds-toggle-switch-line-height);
1919
+ color:var(--tds-toggle-switch-label-color);
1920
+ cursor:var(--tds-toggle-switch-cursor);
1942
1921
  }
1943
1922
 
1944
- @media (min-width: 960px){
1945
- .tds-page-header__primary{
1946
- flex:1 1 max-content;
1947
- width:auto;
1948
- min-width:0;
1949
- max-width:100%;
1923
+ .tds-toggle-switch:not(:has(input:disabled)):has(input:hover){
1924
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-hover);
1950
1925
  }
1951
1926
 
1952
- .tds-page-header__title-bar,
1953
- .tds-page-header--profile .tds-page-header__title-bar{
1954
- flex-flow:row nowrap;
1955
- row-gap:12px;
1956
- align-items:flex-start;
1927
+ .tds-toggle-switch:has(input:checked){
1928
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on);
1929
+ --tds-toggle-switch-thumb-transform:translateX(calc(var(--tds-toggle-switch-track-width) - var(--tds-toggle-switch-thumb-size) - var(--t-spacing-half)));
1957
1930
  }
1958
- .tds-page-header :is([slot="actions"],.tds-page-header__actions){
1959
- width:auto;
1960
- }
1961
1931
 
1962
- .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
1963
- justify-content:flex-end;
1932
+ .tds-toggle-switch:has(input:checked):not(:has(input:disabled)):has(input:hover){
1933
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on-hover);
1964
1934
  }
1965
- }
1966
1935
 
1967
- .tds-page-header-phone,
1968
- .tds-page-header-email{
1969
- color:var(--tds-page-header-color);
1970
- white-space:nowrap;
1971
- }
1936
+ .tds-toggle-switch:has(input:disabled){
1937
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-disabled);
1938
+ --tds-toggle-switch-label-color:var(--t-form-color-disabled);
1939
+ --tds-toggle-switch-description-color:var(--t-form-color-disabled);
1940
+ --tds-toggle-switch-cursor:not-allowed;
1941
+ }
1972
1942
 
1973
- .tds-page-header-email{
1974
- max-width:100%;
1975
- overflow:hidden;
1976
- text-overflow:ellipsis;
1943
+ .tds-toggle-switch-track{
1944
+ position:relative;
1945
+ flex-shrink:0;
1946
+ width:var(--tds-toggle-switch-track-width);
1947
+ height:var(--tds-toggle-switch-track-height);
1948
+ background-color:var(--tds-toggle-switch-track-background-color);
1949
+ border-radius:var(--t-border-radius-round);
1950
+ transition:var(--tds-toggle-switch-track-transition);
1977
1951
  }
1978
1952
 
1979
- @keyframes indicator-pulse{
1980
- 0%{
1981
- opacity:.3;
1982
- transform:scale(.9);
1953
+ .tds-toggle-switch-track::before{
1954
+ position:absolute;
1955
+ top:var(--t-spacing-fourth);
1956
+ left:var(--t-spacing-fourth);
1957
+ width:var(--tds-toggle-switch-thumb-size);
1958
+ height:var(--tds-toggle-switch-thumb-size);
1959
+ content:"";
1960
+ background-color:#fff;
1961
+ border-radius:var(--t-border-radius-round);
1962
+ transform:var(--tds-toggle-switch-thumb-transform);
1963
+ transition:var(--tds-toggle-switch-thumb-transition);
1983
1964
  }
1984
1965
 
1985
- 100%{
1986
- opacity:0;
1987
- transform:scale(1.75);
1966
+ @media (prefers-reduced-motion: reduce){
1967
+
1968
+ .tds-toggle-switch-track{
1969
+ --tds-toggle-switch-track-transition:none;
1970
+ --tds-toggle-switch-thumb-transition:none;
1971
+ }
1988
1972
  }
1973
+
1974
+ .tds-toggle-switch-description{
1975
+ display:flex;
1976
+ grid-area:2 / 2;
1977
+ align-items:flex-start;
1978
+ margin:0;
1979
+ font-size:var(--tds-toggle-switch-description-font-size);
1980
+ line-height:var(--tds-toggle-switch-description-line-height);
1981
+ color:var(--tds-toggle-switch-description-color);
1982
+ cursor:text;
1989
1983
  }
1990
1984
 
1991
- .tds-time-field-input{
1992
- --tds-field-date-segment-padding-inline:1px;
1993
- padding-block:var(--tds-field-padding-block);
1994
- padding-inline:var(--tds-field-padding-inline);
1995
- font-variant-numeric:tabular-nums;
1985
+ .tds-toggle-switch--sm{
1986
+ --tds-toggle-switch-font-size:var(--t-font-size-sm);
1987
+ --tds-toggle-switch-line-height:1.35;
1988
+ --tds-toggle-switch-track-height:var(--t-element-size-lg);
1989
+ --tds-toggle-switch-thumb-size:var(--t-element-size-sm);
1990
+ --tds-toggle-switch-description-font-size:var(--t-font-size-xs);
1991
+ --tds-toggle-switch-description-line-height:1.3;
1992
+ }
1993
+
1994
+ .tds-toggle-switch--hide-label{
1995
+ --tds-toggle-switch-display:inline-flex;
1996
1996
  }
1997
1997
 
1998
1998
  .tds-input{