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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/reactRender.css +1103 -1103
  2. package/dist/reactRender.css.map +1 -1
  3. package/dist/reactRenderLegacy.css +1103 -1103
  4. package/dist/reactRenderLegacy.css.map +1 -1
  5. package/package.json +2 -2
package/dist/reactRender.css CHANGED
@@ -1,491 +1,357 @@
1
- @layer t-critical{
2
- tds-page-header:not(.hydrated){
3
- display:none;
4
- }
5
- }
1
+ .tds-checkbox{
2
+ --tds-checkbox-font-size:var(--t-font-size-md);
3
+ --tds-checkbox-cursor:pointer;
4
+ --tds-checkbox-line-height:1.4;
5
+ --tds-checkbox-transition-property:background-color, border-color;
6
6
 
7
- @layer t-component{
8
- .tds-page-header{
9
- --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
10
- --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
11
- --tds-page-header-color:var(--t-text-color);
12
- --tds-page-header-bottom-border-color:var(--t-surface-color-canvas);
13
- --tds-page-header-headline-color:var(--t-text-color-headline);
14
- --tds-page-header-headline-font-size:var(--t-font-size-2xl);
15
- --tds-page-header-padding-x:var(--t-spacing-2);
16
- --tds-page-header-padding-y:var(--t-spacing-2);
17
- --tds-page-header-nav-padding-x:var(--tds-page-header-padding-x, var(--t-spacing-3));
18
- --tds-page-header-nav-gap:var(--t-spacing-1);
19
- --tds-page-header-nav-background:linear-gradient(180deg, var(--tds-page-header-nav-background-start, rgba(0, 0, 0, 0)) 0%, var(--tds-page-header-nav-background-end, rgba(0, 0, 0, .1)) 100%);
20
- --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
21
- --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
22
- --tds-page-header-nav-item-color:var(--t-text-color-secondary);
23
- --tds-page-header-nav-item-background-color:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 35%);
24
- --tds-page-header-nav-item-border-width:1px;
7
+ --tds-checkbox-input-size:var(--t-element-size-md);
8
+ --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
9
+ --tds-checkbox-input-border-color:var(--t-form-border-color);
10
+ --tds-checkbox-input-background-color:transparent;
25
11
 
26
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
27
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-bottom-border-color);
12
+ --tds-checkbox-input-icon:none;
13
+ --tds-checkbox-input-icon-visibility:hidden;
14
+ --tds-checkbox-input-icon-opacity:0;
15
+ --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
28
16
 
29
- --tds-page-header-nav-item-color-hover:var(--t-text-color);
30
- --tds-page-header-nav-item-background-color-hover:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 20%);
31
- --tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
17
+ --tds-checkbox-label-color:var(--t-form-color);
32
18
 
33
- --tds-page-header-nav-item-background-color-active:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 10%);
34
- --tds-page-header-nav-item-border-color-active:var(--tds-page-header-nav-item-background-color-active);
19
+ --tds-checkbox-description-font-size:var(--t-font-size-sm);
20
+ --tds-checkbox-description-line-height:1.35;
21
+ --tds-checkbox-description-color:var(--t-text-color-secondary);
22
+ --tds-checkbox-description-invalid-icon-display:none;
35
23
 
36
- --tds-page-header-nav-item-color-disabled:var(--t-text-color-disabled);
37
- --tds-page-header-nav-item-background-color-disabled:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 50%);
38
- --tds-page-header-nav-item-border-color-disabled:var(--tds-page-header-nav-item-background-color-disabled);
24
+ position:relative;
25
+ display:inline-grid;
26
+ grid-template-columns:auto;
27
+ grid-auto-columns:1fr;
28
+ gap:var(--t-spacing-fourth) var(--t-spacing-1);
29
+ line-height:var(--tds-checkbox-line-height);
30
+ cursor:var(--tds-checkbox-cursor);
31
+ -webkit-user-select:none;
32
+ -moz-user-select:none;
33
+ user-select:none;
34
+ }
39
35
 
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);
36
+ .tds-checkbox label{
37
+ grid-area:1 / 2;
38
+ font-size:var(--tds-checkbox-font-size);
39
+ font-weight:var(--t-font-weight-normal);
40
+ color:var(--tds-checkbox-label-color);
41
+ cursor:var(--tds-checkbox-cursor);
45
42
  }
46
43
 
47
- .tds-page-header--profile{
48
- --tds-page-header-padding-y:20px;
44
+ .tds-checkbox tds-indeterminate{
45
+ display:flex;
49
46
  }
50
47
 
51
- @supports (color: light-dark(#fff, #000)){
52
- .tds-page-header{
53
- --tds-page-header-nav-background-start:light-dark(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0));
54
- --tds-page-header-nav-background-end:light-dark(rgba(0, 0, 0, .05), rgba(255, 255, 255, .1));
55
- }
48
+ .tds-checkbox input[type="checkbox"]{
49
+ position:relative;
50
+ width:1em;
51
+ height:1em;
52
+ margin:calc((1lh - 1em) / 2) 0 0;
53
+ font-size:var(--tds-checkbox-font-size);
54
+ line-height:inherit;
55
+ -webkit-appearance:none;
56
+ -moz-appearance:none;
57
+ appearance:none;
58
+ cursor:var(--tds-checkbox-cursor);
59
+ background-color:var(--tds-checkbox-input-background-color);
60
+ border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
61
+ border-radius:var(--tds-checkbox-input-border-radius);
62
+ transition-timing-function:var(--t-ease-in-out);
63
+ transition-duration:var(--t-duration-200);
64
+ transition-property:var(--tds-checkbox-transition-property);
56
65
  }
57
66
 
58
- @media (min-width: 600px){
59
- .tds-page-header{
60
- --tds-page-header-background-color:var(--t-surface-color-canvas);
61
- --tds-page-header-color:var(--t-text-color-secondary);
62
- --tds-page-header-bottom-border-color:var(--t-border-color);
63
- --tds-page-header-padding-x:var(--t-spacing-3);
64
- --tds-page-header-headline-font-size:var(--t-font-size-3xl);
65
- --tds-page-header-nav-gap:var(--t-spacing-half);
66
- --tds-page-header-nav-background:transparent;
67
- --tds-page-header-nav-item-padding-x:var(--t-spacing-2);
68
- --tds-page-header-nav-item-border-width:1px;
69
- --tds-page-header-nav-item-color:var(--t-text-color);
70
- --tds-page-header-nav-item-background-color:var(--t-fill-color-neutral-070);
71
- --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-060);
72
- --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-050);
73
- --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
74
- --tds-page-header-nav-item-border-color-selected:var(--t-border-color);
67
+ :is(.tds-checkbox input[type="checkbox"])::before{
68
+ position:absolute;
69
+ top:50%;
70
+ left:50%;
71
+ visibility:var(--tds-checkbox-input-icon-visibility);
72
+ width:100%;
73
+ height:100%;
74
+ content:"";
75
+ background-color:var(--tds-checkbox-input-icon-fill);
76
+ border-radius:var(--tds-checkbox-input-border-radius);
77
+ opacity:var(--tds-checkbox-input-icon-opacity);
78
+ -webkit-mask-image:var(--tds-checkbox-input-icon);
79
+ mask-image:var(--tds-checkbox-input-icon);
80
+ -webkit-mask-repeat:no-repeat;
81
+ mask-repeat:no-repeat;
82
+ -webkit-mask-size:contain;
83
+ mask-size:contain;
84
+ transform:translate(-50%, -50%);
75
85
  }
76
- }
77
- }
78
86
 
79
- .tds-page-header{
80
- display:flex;
81
- flex-direction:column;
82
- padding-top:var(--tds-page-header-padding-y);
83
- color:var(--tds-page-header-color);
84
- background:var(--tds-page-header-background-color);
85
- border-bottom:1px solid var(--tds-page-header-bottom-border-color);
86
- }
87
+ :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
88
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
89
+ --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
90
+ }
87
91
 
88
- .tds-page-header:not(.has-nav){
89
- padding-bottom:var(--tds-page-header-padding-y);
92
+ :is(.tds-checkbox input[type="checkbox"]):focus-visible{
93
+ outline:var(--t-focus-ring-outline);
94
+ outline-offset:var(--t-focus-ring-offset);
95
+ }
96
+
97
+ :is(.tds-checkbox input[type="checkbox"]):disabled{
98
+ pointer-events:none;
99
+ }
100
+
101
+ @media (prefers-reduced-motion: reduce){
102
+
103
+ .tds-checkbox input[type="checkbox"]{
104
+ --tds-checkbox-transition-property:none;
90
105
  }
106
+ }
91
107
 
92
- .tds-page-header.inactive{
93
- background:var(--tds-page-header-background-color-inactive);
108
+ .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
109
+ --tds-checkbox-input-background-color:var(--t-fill-color-control);
110
+ --tds-checkbox-input-border-color:var(--t-border-color-control-info);
111
+ --tds-checkbox-input-icon-visibility:visible;
112
+ --tds-checkbox-input-icon-opacity:1;
94
113
  }
95
114
 
96
- .tds-page-header :is([slot="actions"],.tds-page-header__actions){
97
- width:100%;
115
+ :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
116
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
117
+ --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
118
+ }
119
+
120
+ .tds-checkbox:has(input:checked){
121
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
98
122
  }
99
123
 
100
- .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
101
- display:flex;
102
- flex-flow:row wrap;
103
- gap:var(--t-spacing-half) var(--t-spacing-1);
104
- align-items:flex-start;
105
- justify-content:flex-start;
106
- min-width:0;
124
+ .tds-checkbox:has(input:indeterminate){
125
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
107
126
  }
108
127
 
109
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)):not(:has(ul)),:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) ul{
110
- display:flex;
111
- gap:var(--tds-page-header-nav-gap);
112
- padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
113
- margin:0 0 -1px;
114
- overflow:auto;
115
- list-style:none;
116
- background:var(--tds-page-header-nav-background);
128
+ .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
129
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
130
+ --tds-checkbox-description-color:var(--t-text-color-status-error);
131
+ --tds-checkbox-description-invalid-icon-display:inline-block;
132
+ }
133
+
134
+ :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
135
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
136
+ --tds-checkbox-input-background-color:var(--t-form-background-color-error);
117
137
  }
118
138
 
119
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button){
120
- position:relative;
121
- display:inline-flex;
122
- padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
123
- font-size:var(--t-font-size-sm);
124
- line-height:22px;
125
- color:var(--tds-page-header-nav-item-color);
126
- white-space:nowrap;
127
- text-decoration:none;
128
- -webkit-appearance:none;
129
- -moz-appearance:none;
130
- appearance:none;
131
- cursor:pointer;
132
- outline-offset:-2px;
133
- background-color:var(--tds-page-header-nav-item-background-color);
134
- background-clip:padding-box;
135
- border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
136
- border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
137
- border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
139
+ :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:checked,:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:indeterminate{
140
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
141
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error);
138
142
  }
139
143
 
140
- .selected:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)){
141
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-selected);
142
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-selected);
143
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-selected);
144
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-selected);
144
+ :is(:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:checked,:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:indeterminate):hover:not(:disabled){
145
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
146
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
145
147
  }
146
148
 
147
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):hover{
148
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
149
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
150
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
151
- }
149
+ .tds-checkbox:has(input:required) label::after{
150
+ margin-left:.25ch;
151
+ color:var(--t-text-color-status-error);
152
+ content:"*";
153
+ }
152
154
 
153
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):active{
154
- background-color:var(--tds-page-header-nav-item-background-color-active);
155
- border-color:var(--tds-page-header-nav-item-border-color-active);
156
- }
155
+ .tds-checkbox:has(input:disabled){
156
+ --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
157
+ --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
157
158
 
158
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):disabled{
159
- color:var(--tds-page-header-nav-item-color-disabled);
160
- cursor:not-allowed;
161
- background-color:var(--tds-page-header-nav-item-background-color-disabled);
162
- opacity:1;
163
- }
159
+ --tds-checkbox-label-color:var(--t-form-color-disabled);
160
+ --tds-checkbox-description-color:var(--t-form-color-disabled);
161
+ --tds-checkbox-cursor:not-allowed;
162
+ }
164
163
 
165
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
166
- position:relative;
164
+ .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
165
+ --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
167
166
  }
168
167
 
169
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator)) :is(a,button){
170
- -webkit-mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
171
- mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
172
- }
173
-
174
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::before,:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
175
- position:absolute;
176
- top:-5px;
177
- right:-2px;
178
- width:10px;
179
- height:10px;
180
- content:"";
181
- background:var(--tds-page-header-nav-item-indicator-color);
182
- border-radius:50%;
183
- }
184
-
185
- @media (prefers-reduced-motion: no-preference){
186
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
187
- animation:indicator-pulse 1.25s ease infinite;
188
- }
189
- }
190
-
191
- .tds-page-header__title-bar{
168
+ .tds-checkbox-description{
192
169
  display:flex;
193
- flex-direction:column;
194
- gap:var(--t-spacing-2) var(--t-spacing-1);
170
+ grid-area:2 / 2;
171
+ gap:var(--t-spacing-half);
195
172
  align-items:flex-start;
196
- justify-content:space-between;
197
- padding:0 var(--tds-page-header-padding-x);
173
+ margin:0;
174
+ font-size:var(--tds-checkbox-description-font-size);
175
+ line-height:var(--tds-checkbox-description-line-height);
176
+ color:var(--tds-checkbox-description-color);
177
+ cursor:text;
198
178
  }
199
179
 
200
- .tds-page-header--profile > .tds-page-header__title-bar{
201
- align-items:center;
180
+ .tds-checkbox-description .tds-checkbox-description-invalid-icon{
181
+ display:var(--tds-checkbox-description-invalid-icon-display);
182
+ flex-shrink:0;
183
+ margin-top:calc(.5lh - .5em);
184
+ line-height:var(--tds-checkbox-description-line-height);
202
185
  }
203
186
 
204
- .tds-page-header__primary{
205
- width:100%;
187
+ .tds-checkbox--sm{
188
+ --tds-checkbox-line-height:1.35;
189
+ --tds-checkbox-input-size:var(--t-element-size-sm);
190
+ --tds-checkbox-font-size:var(--t-font-size-sm);
191
+ --tds-checkbox-description-font-size:var(--t-font-size-xs);
192
+ --tds-checkbox-description-line-height:1.3;
206
193
  }
207
194
 
208
- .tds-page-header__primary h1{
209
- margin:0;
210
- font-size:var(--tds-page-header-headline-font-size);
211
- font-weight:var(--t-font-weight-normal);
212
- line-height:32px;
213
- color:var(--tds-page-header-headline-color);
214
- overflow-wrap:break-word;
195
+
196
+ :is(.tds-input input)::-webkit-search-decoration,:is(.tds-input input)::-webkit-search-cancel-button,:is(.tds-input input)::-webkit-search-results-button,:is(.tds-input input)::-webkit-search-results-decoration{
197
+ -webkit-appearance:none;
198
+ appearance:none;
199
+ }
200
+
201
+ [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
202
+ inline-size:1em;
203
+ block-size:2em;
204
+ }
205
+
206
+ @supports (field-sizing: content){
207
+ .tds-input--auto-width{
208
+ inline-size:-moz-fit-content;
209
+ inline-size:fit-content;
210
+ min-inline-size:min(100%, 122px);
215
211
  }
216
212
 
217
- @media (min-width: 960px){
218
- .tds-page-header__primary{
219
- flex:1 1 max-content;
220
- width:auto;
221
- min-width:0;
222
- max-width:100%;
213
+ .tds-input--auto-width input{
214
+ field-sizing:content;
215
+ inline-size:auto;
223
216
  }
217
+ }
224
218
 
225
- .tds-page-header__title-bar,
226
- .tds-page-header--profile .tds-page-header__title-bar{
227
- flex-flow:row nowrap;
228
- row-gap:12px;
229
- align-items:flex-start;
219
+ .tds-input:has(textarea){
220
+ --tds-input-padding-block:6px;
221
+ --tds-input-resizer-size:var(--t-element-size-sm);
222
+ --tds-input-resizer-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cg fill='none' stroke='%236f7784' stroke-linecap='round' stroke-width='1.25'%3E%3Cpath d='M5.5 13l7.5-7.5'/%3E%3Cpath d='M9 13l4-4'/%3E%3C/g%3E%3C/svg%3E");
223
+ }
224
+
225
+ @supports (x: attr(x type(*))){
226
+
227
+ .tds-input:has(textarea){
228
+ --tds-input-min-height:calc((attr(rows type(<number>), 3) * 1lh) + (var(--tds-input-padding-block) * 2) + 2px);
229
+ }
230
230
  }
231
- .tds-page-header :is([slot="actions"],.tds-page-header__actions){
232
- width:auto;
231
+
232
+ .tds-input.tds-textarea--resize-vertical textarea{
233
+ resize:vertical;
233
234
  }
234
235
 
235
- .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
236
- justify-content:flex-end;
236
+ .tds-input.tds-textarea--resize-none textarea{
237
+ resize:none;
237
238
  }
238
- }
239
239
 
240
- .tds-page-header-phone,
241
- .tds-page-header-email{
242
- color:var(--tds-page-header-color);
243
- white-space:nowrap;
244
- }
240
+ .tds-input.tds-textarea--resize-auto textarea{
241
+ resize:vertical;
242
+ }
245
243
 
246
- .tds-page-header-email{
247
- max-width:100%;
248
- overflow:hidden;
249
- text-overflow:ellipsis;
244
+ @supports (field-sizing: content){
245
+ .tds-input.tds-textarea--resize-auto textarea{
246
+ field-sizing:content;
247
+ resize:none;
248
+ }
249
+ }
250
+
251
+ .tds-input textarea{
252
+ --tds-input-scrollbar-thumb-color-default:var(--t-fill-color-neutral-040);
253
+ --tds-input-scrollbar-thumb-color-hidden:transparent;
254
+ --tds-input-scrollbar-thumb-color-hover:var(--t-fill-color-neutral-030);
255
+ --tds-input-scrollbar-thumb-color-thumb-hover:var(--t-fill-color-neutral-020);
256
+ --tds-input-scrollbar-thumb-color-thumb-active:var(--t-fill-color-neutral-010);
257
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-default);
258
+ --tds-input-scrollbar-surface-color:rgba(0, 0, 0, 0);
259
+ --tds-input-scrollbar-thumb-border-radius:999px;
260
+ --tds-input-scrollbar-thumb-border-width:3px;
261
+ --tds-input-scrollbar-track-margin-block:.125rem;
262
+ scrollbar-color:initial;
263
+ transition-timing-function:var(--t-ease-in-out);
264
+ transition-duration:var(--t-duration-200);
265
+ transition-property:var(--tds-input-transition-property), --tds-input-scrollbar-thumb-color;
250
266
  }
251
267
 
252
- @keyframes indicator-pulse{
253
- 0%{
254
- opacity:.3;
255
- transform:scale(.9);
256
- }
268
+ @media (pointer: fine){
269
+ :is(.tds-input textarea)::-webkit-scrollbar{
270
+ width:12px;
271
+ height:12px;
272
+ cursor:default;
273
+ }
257
274
 
258
- 100%{
259
- opacity:0;
260
- transform:scale(1.75);
261
- }
262
- }
275
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb{
276
+ cursor:default;
277
+ background:var(--tds-input-scrollbar-thumb-color);
278
+ background-clip:content-box;
279
+ border:var(--tds-input-scrollbar-thumb-border-width) solid var(--tds-input-scrollbar-surface-color);
280
+ border-radius:var(--tds-input-scrollbar-thumb-border-radius);
281
+ }
263
282
 
264
- .tds-checkbox{
265
- --tds-checkbox-font-size:var(--t-font-size-md);
266
- --tds-checkbox-cursor:pointer;
267
- --tds-checkbox-line-height:1.4;
268
- --tds-checkbox-transition-property:background-color, border-color;
283
+ :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
284
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
285
+ }
269
286
 
270
- --tds-checkbox-input-size:var(--t-element-size-md);
271
- --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
272
- --tds-checkbox-input-border-color:var(--t-form-border-color);
273
- --tds-checkbox-input-background-color:transparent;
287
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
288
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
289
+ }
274
290
 
275
- --tds-checkbox-input-icon:none;
276
- --tds-checkbox-input-icon-visibility:hidden;
277
- --tds-checkbox-input-icon-opacity:0;
278
- --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
291
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
292
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
293
+ }
279
294
 
280
- --tds-checkbox-label-color:var(--t-form-color);
295
+ :is(.tds-input textarea)::-webkit-scrollbar-corner{
296
+ background:var(--tds-input-scrollbar-surface-color);
297
+ }
281
298
 
282
- --tds-checkbox-description-font-size:var(--t-font-size-sm);
283
- --tds-checkbox-description-line-height:1.35;
284
- --tds-checkbox-description-color:var(--t-text-color-secondary);
285
- --tds-checkbox-description-invalid-icon-display:none;
299
+ :is(.tds-input textarea)::-webkit-resizer{
300
+ background:var(--tds-input-resizer-icon) no-repeat;
301
+ background-position:right bottom;
302
+ background-size:var(--tds-input-resizer-size) var(--tds-input-resizer-size);
303
+ }
304
+
305
+ :is(.tds-input textarea)::-webkit-scrollbar-track{
306
+ margin-block:var(--tds-input-scrollbar-track-margin-block);
307
+ cursor:default;
308
+ }
309
+
310
+ @supports (-moz-appearance: none){
311
+ :is(.tds-input textarea){
312
+ scrollbar-color:var(--tds-input-scrollbar-thumb-color-default) var(--tds-input-scrollbar-surface-color);
313
+ scrollbar-width:thin;
314
+ }
315
+
316
+ @media (hover){
317
+ :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
318
+ scrollbar-color:var(--tds-input-scrollbar-thumb-color-hover) var(--tds-input-scrollbar-surface-color);
319
+ }
320
+ }
321
+ }
322
+ }
323
+
324
+ .tds-radio{
325
+ --tds-radio-font-size:var(--t-font-size-md);
326
+ --tds-radio-cursor:pointer;
327
+ --tds-radio-line-height:1.4;
328
+ --tds-radio-transition-property:border-width;
329
+
330
+ --tds-radio-input-size:var(--t-element-size-md);
331
+ --tds-radio-input-border-radius:var(--t-border-radius-round);
332
+ --tds-radio-input-border-color:var(--t-form-border-color);
333
+ --tds-radio-input-border-width:var(--t-form-border-width);
334
+ --tds-radio-input-background-color:transparent;
335
+
336
+ --tds-radio-label-color:var(--t-form-color);
337
+
338
+ --tds-radio-description-font-size:var(--t-font-size-sm);
339
+ --tds-radio-description-line-height:1.35;
340
+ --tds-radio-description-color:var(--t-text-color-secondary);
286
341
 
287
342
  position:relative;
288
343
  display:inline-grid;
289
344
  grid-template-columns:auto;
290
345
  grid-auto-columns:1fr;
291
346
  gap:var(--t-spacing-fourth) var(--t-spacing-1);
292
- line-height:var(--tds-checkbox-line-height);
293
- cursor:var(--tds-checkbox-cursor);
347
+ line-height:var(--tds-radio-line-height);
348
+ cursor:var(--tds-radio-cursor);
294
349
  -webkit-user-select:none;
295
350
  -moz-user-select:none;
296
351
  user-select:none;
297
352
  }
298
353
 
299
- .tds-checkbox label{
300
- grid-area:1 / 2;
301
- font-size:var(--tds-checkbox-font-size);
302
- font-weight:var(--t-font-weight-normal);
303
- color:var(--tds-checkbox-label-color);
304
- cursor:var(--tds-checkbox-cursor);
305
- }
306
-
307
- .tds-checkbox tds-indeterminate{
308
- display:flex;
309
- }
310
-
311
- .tds-checkbox input[type="checkbox"]{
312
- position:relative;
313
- width:1em;
314
- height:1em;
315
- margin:calc((1lh - 1em) / 2) 0 0;
316
- font-size:var(--tds-checkbox-font-size);
317
- line-height:inherit;
318
- -webkit-appearance:none;
319
- -moz-appearance:none;
320
- appearance:none;
321
- cursor:var(--tds-checkbox-cursor);
322
- background-color:var(--tds-checkbox-input-background-color);
323
- border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
324
- border-radius:var(--tds-checkbox-input-border-radius);
325
- transition-timing-function:var(--t-ease-in-out);
326
- transition-duration:var(--t-duration-200);
327
- transition-property:var(--tds-checkbox-transition-property);
328
- }
329
-
330
- :is(.tds-checkbox input[type="checkbox"])::before{
331
- position:absolute;
332
- top:50%;
333
- left:50%;
334
- visibility:var(--tds-checkbox-input-icon-visibility);
335
- width:100%;
336
- height:100%;
337
- content:"";
338
- background-color:var(--tds-checkbox-input-icon-fill);
339
- border-radius:var(--tds-checkbox-input-border-radius);
340
- opacity:var(--tds-checkbox-input-icon-opacity);
341
- -webkit-mask-image:var(--tds-checkbox-input-icon);
342
- mask-image:var(--tds-checkbox-input-icon);
343
- -webkit-mask-repeat:no-repeat;
344
- mask-repeat:no-repeat;
345
- -webkit-mask-size:contain;
346
- mask-size:contain;
347
- transform:translate(-50%, -50%);
348
- }
349
-
350
- :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
351
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
352
- --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
353
- }
354
-
355
- :is(.tds-checkbox input[type="checkbox"]):focus-visible{
356
- outline:var(--t-focus-ring-outline);
357
- outline-offset:var(--t-focus-ring-offset);
358
- }
359
-
360
- :is(.tds-checkbox input[type="checkbox"]):disabled{
361
- pointer-events:none;
362
- }
363
-
364
- @media (prefers-reduced-motion: reduce){
365
-
366
- .tds-checkbox input[type="checkbox"]{
367
- --tds-checkbox-transition-property:none;
368
- }
369
- }
370
-
371
- .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
372
- --tds-checkbox-input-background-color:var(--t-fill-color-control);
373
- --tds-checkbox-input-border-color:var(--t-border-color-control-info);
374
- --tds-checkbox-input-icon-visibility:visible;
375
- --tds-checkbox-input-icon-opacity:1;
376
- }
377
-
378
- :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
379
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
380
- --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
381
- }
382
-
383
- .tds-checkbox:has(input:checked){
384
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
385
- }
386
-
387
- .tds-checkbox:has(input:indeterminate){
388
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
389
- }
390
-
391
- .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
392
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
393
- --tds-checkbox-description-color:var(--t-text-color-status-error);
394
- --tds-checkbox-description-invalid-icon-display:inline-block;
395
- }
396
-
397
- :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
398
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
399
- --tds-checkbox-input-background-color:var(--t-form-background-color-error);
400
- }
401
-
402
- :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{
403
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
404
- --tds-checkbox-input-background-color:var(--t-form-border-color-error);
405
- }
406
-
407
- :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){
408
- --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
409
- --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
410
- }
411
-
412
- .tds-checkbox:has(input:required) label::after{
413
- margin-left:.25ch;
414
- color:var(--t-text-color-status-error);
415
- content:"*";
416
- }
417
-
418
- .tds-checkbox:has(input:disabled){
419
- --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
420
- --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
421
-
422
- --tds-checkbox-label-color:var(--t-form-color-disabled);
423
- --tds-checkbox-description-color:var(--t-form-color-disabled);
424
- --tds-checkbox-cursor:not-allowed;
425
- }
426
-
427
- .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
428
- --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
429
- }
430
-
431
- .tds-checkbox-description{
432
- display:flex;
433
- grid-area:2 / 2;
434
- gap:var(--t-spacing-half);
435
- align-items:flex-start;
436
- margin:0;
437
- font-size:var(--tds-checkbox-description-font-size);
438
- line-height:var(--tds-checkbox-description-line-height);
439
- color:var(--tds-checkbox-description-color);
440
- cursor:text;
441
- }
442
-
443
- .tds-checkbox-description .tds-checkbox-description-invalid-icon{
444
- display:var(--tds-checkbox-description-invalid-icon-display);
445
- flex-shrink:0;
446
- margin-top:calc(.5lh - .5em);
447
- line-height:var(--tds-checkbox-description-line-height);
448
- }
449
-
450
- .tds-checkbox--sm{
451
- --tds-checkbox-line-height:1.35;
452
- --tds-checkbox-input-size:var(--t-element-size-sm);
453
- --tds-checkbox-font-size:var(--t-font-size-sm);
454
- --tds-checkbox-description-font-size:var(--t-font-size-xs);
455
- --tds-checkbox-description-line-height:1.3;
456
- }
457
-
458
- .tds-radio{
459
- --tds-radio-font-size:var(--t-font-size-md);
460
- --tds-radio-cursor:pointer;
461
- --tds-radio-line-height:1.4;
462
- --tds-radio-transition-property:border-width;
463
-
464
- --tds-radio-input-size:var(--t-element-size-md);
465
- --tds-radio-input-border-radius:var(--t-border-radius-round);
466
- --tds-radio-input-border-color:var(--t-form-border-color);
467
- --tds-radio-input-border-width:var(--t-form-border-width);
468
- --tds-radio-input-background-color:transparent;
469
-
470
- --tds-radio-label-color:var(--t-form-color);
471
-
472
- --tds-radio-description-font-size:var(--t-font-size-sm);
473
- --tds-radio-description-line-height:1.35;
474
- --tds-radio-description-color:var(--t-text-color-secondary);
475
-
476
- position:relative;
477
- display:inline-grid;
478
- grid-template-columns:auto;
479
- grid-auto-columns:1fr;
480
- gap:var(--t-spacing-fourth) var(--t-spacing-1);
481
- line-height:var(--tds-radio-line-height);
482
- cursor:var(--tds-radio-cursor);
483
- -webkit-user-select:none;
484
- -moz-user-select:none;
485
- user-select:none;
486
- }
487
-
488
- .tds-radio label{
354
+ .tds-radio label{
489
355
  grid-area:1 / 2;
490
356
  font-size:var(--tds-radio-font-size);
491
357
  font-weight:var(--t-font-weight-normal);
@@ -587,162 +453,21 @@
587
453
  --tds-radio-description-line-height:1.3;
588
454
  }
589
455
 
590
- .tds-toggle-switch{
591
- --tds-toggle-switch-font-size:var(--t-font-size-md);
592
- --tds-toggle-switch-column-gap:var(--t-spacing-1);
593
- --tds-toggle-switch-cursor:pointer;
594
- --tds-toggle-switch-display:inline-grid;
595
- --tds-toggle-switch-line-height:1.4;
596
-
597
- --tds-toggle-switch-label-color:var(--t-form-color);
598
-
599
- --tds-toggle-switch-track-width:var(--t-container-size-md);
600
- --tds-toggle-switch-track-outline:none;
601
- --tds-toggle-switch-track-height:var(--t-container-size-xs);
602
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color);
603
- --tds-toggle-switch-track-transition:background-color var(--t-duration-100) var(--t-ease-in-out);
604
-
605
- --tds-toggle-switch-thumb-size:var(--t-element-size-md);
606
- --tds-toggle-switch-thumb-transform:translateX(0);
607
- --tds-toggle-switch-thumb-transition:transform var(--t-duration-200) var(--t-ease-in-out);
608
456
 
609
- --tds-toggle-switch-description-font-size:var(--t-font-size-sm);
610
- --tds-toggle-switch-description-line-height:1.35;
611
- --tds-toggle-switch-description-color:var(--t-text-color-secondary);
612
- position:relative;
457
+ @media (prefers-reduced-motion: no-preference){
613
458
 
614
- display:var(--tds-toggle-switch-display);
615
- grid-template-columns:auto;
616
- grid-auto-columns:1fr;
617
- gap:var(--t-spacing-fourth) var(--tds-toggle-switch-column-gap);
618
- -webkit-user-select:none;
619
- -moz-user-select:none;
620
- user-select:none;
459
+ :root{
460
+ interpolate-size:allow-keywords;
621
461
  }
622
-
623
- .tds-toggle-switch input[type="checkbox"]{
624
- position:absolute;
625
- width:var(--tds-toggle-switch-track-width);
626
- height:var(--tds-toggle-switch-track-height);
627
- margin:0;
628
- -webkit-appearance:none;
629
- -moz-appearance:none;
630
- appearance:none;
631
- cursor:var(--tds-toggle-switch-cursor);
632
- outline:var(--tds-toggle-switch-track-outline);
633
- outline-offset:var(--t-focus-ring-offset);
634
- background-color:transparent;
635
- border:0;
636
- border-radius:var(--t-border-radius-round);
637
462
  }
638
463
 
639
- :is(.tds-toggle-switch input[type="checkbox"]):focus-visible{
640
- --tds-toggle-switch-track-outline:var(--t-focus-ring-outline);
641
- }
464
+ @layer tds-component{
465
+ tds-sidenav,
466
+ .tds-sidenav{
467
+ --tds-sidenav-indent:12px;
468
+ --tds-sidenav-item-depth:0;
642
469
 
643
- .tds-toggle-switch label{
644
- display:inline-flex;
645
- grid-area:1 / 2;
646
- -moz-column-gap:var(--tds-toggle-switch-column-gap);
647
- column-gap:var(--tds-toggle-switch-column-gap);
648
- margin-top:-.09375em;
649
- font-size:var(--tds-toggle-switch-font-size);
650
- font-weight:var(--t-font-weight-normal);
651
- line-height:var(--tds-toggle-switch-line-height);
652
- color:var(--tds-toggle-switch-label-color);
653
- cursor:var(--tds-toggle-switch-cursor);
654
- }
655
-
656
- .tds-toggle-switch:not(:has(input:disabled)):has(input:hover){
657
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-hover);
658
- }
659
-
660
- .tds-toggle-switch:has(input:checked){
661
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on);
662
- --tds-toggle-switch-thumb-transform:translateX(calc(var(--tds-toggle-switch-track-width) - var(--tds-toggle-switch-thumb-size) - var(--t-spacing-half)));
663
- }
664
-
665
- .tds-toggle-switch:has(input:checked):not(:has(input:disabled)):has(input:hover){
666
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on-hover);
667
- }
668
-
669
- .tds-toggle-switch:has(input:disabled){
670
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-disabled);
671
- --tds-toggle-switch-label-color:var(--t-form-color-disabled);
672
- --tds-toggle-switch-description-color:var(--t-form-color-disabled);
673
- --tds-toggle-switch-cursor:not-allowed;
674
- }
675
-
676
- .tds-toggle-switch-track{
677
- position:relative;
678
- flex-shrink:0;
679
- width:var(--tds-toggle-switch-track-width);
680
- height:var(--tds-toggle-switch-track-height);
681
- background-color:var(--tds-toggle-switch-track-background-color);
682
- border-radius:var(--t-border-radius-round);
683
- transition:var(--tds-toggle-switch-track-transition);
684
- }
685
-
686
- .tds-toggle-switch-track::before{
687
- position:absolute;
688
- top:var(--t-spacing-fourth);
689
- left:var(--t-spacing-fourth);
690
- width:var(--tds-toggle-switch-thumb-size);
691
- height:var(--tds-toggle-switch-thumb-size);
692
- content:"";
693
- background-color:#fff;
694
- border-radius:var(--t-border-radius-round);
695
- transform:var(--tds-toggle-switch-thumb-transform);
696
- transition:var(--tds-toggle-switch-thumb-transition);
697
- }
698
-
699
- @media (prefers-reduced-motion: reduce){
700
-
701
- .tds-toggle-switch-track{
702
- --tds-toggle-switch-track-transition:none;
703
- --tds-toggle-switch-thumb-transition:none;
704
- }
705
- }
706
-
707
- .tds-toggle-switch-description{
708
- display:flex;
709
- grid-area:2 / 2;
710
- align-items:flex-start;
711
- margin:0;
712
- font-size:var(--tds-toggle-switch-description-font-size);
713
- line-height:var(--tds-toggle-switch-description-line-height);
714
- color:var(--tds-toggle-switch-description-color);
715
- cursor:text;
716
- }
717
-
718
- .tds-toggle-switch--sm{
719
- --tds-toggle-switch-font-size:var(--t-font-size-sm);
720
- --tds-toggle-switch-line-height:1.35;
721
- --tds-toggle-switch-track-height:var(--t-element-size-lg);
722
- --tds-toggle-switch-thumb-size:var(--t-element-size-sm);
723
- --tds-toggle-switch-description-font-size:var(--t-font-size-xs);
724
- --tds-toggle-switch-description-line-height:1.3;
725
- }
726
-
727
- .tds-toggle-switch--hide-label{
728
- --tds-toggle-switch-display:inline-flex;
729
- }
730
-
731
-
732
- @media (prefers-reduced-motion: no-preference){
733
-
734
- :root{
735
- interpolate-size:allow-keywords;
736
- }
737
- }
738
-
739
- @layer tds-component{
740
- tds-sidenav,
741
- .tds-sidenav{
742
- --tds-sidenav-indent:12px;
743
- --tds-sidenav-item-depth:0;
744
-
745
- --tds-sidenav-item-transition:background-color var(--t-duration-200) var(--t-ease-in-out);
470
+ --tds-sidenav-item-transition:background-color var(--t-duration-200) var(--t-ease-in-out);
746
471
 
747
472
  --tds-sidenav-collapse-transition-enter:opacity var(--t-duration-300) var(--t-ease-out), transform var(--t-duration-300) var(--t-ease-out), display var(--t-duration-300) allow-discrete, overlay var(--t-duration-300) allow-discrete;
748
473
  --tds-sidenav-collapse-transition-exit:opacity var(--t-duration-200) var(--t-ease-in), display var(--t-duration-200) allow-discrete, overlay var(--t-duration-200) allow-discrete;
@@ -1090,111 +815,6 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1090
815
  flex-direction:column;
1091
816
  }
1092
817
 
1093
- .tds-input:has(textarea){
1094
- --tds-input-padding-block:6px;
1095
- --tds-input-resizer-size:var(--t-element-size-sm);
1096
- --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");
1097
- }
1098
-
1099
- @supports (x: attr(x type(*))){
1100
-
1101
- .tds-input:has(textarea){
1102
- --tds-input-min-height:calc((attr(rows type(<number>), 3) * 1lh) + (var(--tds-input-padding-block) * 2) + 2px);
1103
- }
1104
- }
1105
-
1106
- .tds-input.tds-textarea--resize-vertical textarea{
1107
- resize:vertical;
1108
- }
1109
-
1110
- .tds-input.tds-textarea--resize-none textarea{
1111
- resize:none;
1112
- }
1113
-
1114
- .tds-input.tds-textarea--resize-auto textarea{
1115
- resize:vertical;
1116
- }
1117
-
1118
- @supports (field-sizing: content){
1119
- .tds-input.tds-textarea--resize-auto textarea{
1120
- field-sizing:content;
1121
- resize:none;
1122
- }
1123
- }
1124
-
1125
- .tds-input textarea{
1126
- --tds-input-scrollbar-thumb-color-default:var(--t-fill-color-neutral-040);
1127
- --tds-input-scrollbar-thumb-color-hidden:transparent;
1128
- --tds-input-scrollbar-thumb-color-hover:var(--t-fill-color-neutral-030);
1129
- --tds-input-scrollbar-thumb-color-thumb-hover:var(--t-fill-color-neutral-020);
1130
- --tds-input-scrollbar-thumb-color-thumb-active:var(--t-fill-color-neutral-010);
1131
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-default);
1132
- --tds-input-scrollbar-surface-color:rgba(0, 0, 0, 0);
1133
- --tds-input-scrollbar-thumb-border-radius:999px;
1134
- --tds-input-scrollbar-thumb-border-width:3px;
1135
- --tds-input-scrollbar-track-margin-block:.125rem;
1136
- scrollbar-color:initial;
1137
- transition-timing-function:var(--t-ease-in-out);
1138
- transition-duration:var(--t-duration-200);
1139
- transition-property:var(--tds-input-transition-property), --tds-input-scrollbar-thumb-color;
1140
- }
1141
-
1142
- @media (pointer: fine){
1143
- :is(.tds-input textarea)::-webkit-scrollbar{
1144
- width:12px;
1145
- height:12px;
1146
- cursor:default;
1147
- }
1148
-
1149
- :is(.tds-input textarea)::-webkit-scrollbar-thumb{
1150
- cursor:default;
1151
- background:var(--tds-input-scrollbar-thumb-color);
1152
- background-clip:content-box;
1153
- border:var(--tds-input-scrollbar-thumb-border-width) solid var(--tds-input-scrollbar-surface-color);
1154
- border-radius:var(--tds-input-scrollbar-thumb-border-radius);
1155
- }
1156
-
1157
- :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1158
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
1159
- }
1160
-
1161
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
1162
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
1163
- }
1164
-
1165
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
1166
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
1167
- }
1168
-
1169
- :is(.tds-input textarea)::-webkit-scrollbar-corner{
1170
- background:var(--tds-input-scrollbar-surface-color);
1171
- }
1172
-
1173
- :is(.tds-input textarea)::-webkit-resizer{
1174
- background:var(--tds-input-resizer-icon) no-repeat;
1175
- background-position:right bottom;
1176
- background-size:var(--tds-input-resizer-size) var(--tds-input-resizer-size);
1177
- }
1178
-
1179
- :is(.tds-input textarea)::-webkit-scrollbar-track{
1180
- margin-block:var(--tds-input-scrollbar-track-margin-block);
1181
- cursor:default;
1182
- }
1183
-
1184
- @supports (-moz-appearance: none){
1185
- :is(.tds-input textarea){
1186
- scrollbar-color:var(--tds-input-scrollbar-thumb-color-default) var(--tds-input-scrollbar-surface-color);
1187
- scrollbar-width:thin;
1188
- }
1189
-
1190
- @media (hover){
1191
- :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1192
- scrollbar-color:var(--tds-input-scrollbar-thumb-color-hover) var(--tds-input-scrollbar-surface-color);
1193
- }
1194
- }
1195
- }
1196
- }
1197
-
1198
818
  .tds-radio-group{
1199
819
  --tds-radio-group-font-size:var(--t-font-size-md);
1200
820
  --tds-radio-group-line-height:1.4;
@@ -1282,45 +902,162 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1282
902
  --tds-radio-group-description-line-height:1.3;
1283
903
  }
1284
904
 
905
+ .tds-toggle-switch{
906
+ --tds-toggle-switch-font-size:var(--t-font-size-md);
907
+ --tds-toggle-switch-column-gap:var(--t-spacing-1);
908
+ --tds-toggle-switch-cursor:pointer;
909
+ --tds-toggle-switch-display:inline-grid;
910
+ --tds-toggle-switch-line-height:1.4;
1285
911
 
1286
- :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{
1287
- -webkit-appearance:none;
1288
- appearance:none;
1289
- }
912
+ --tds-toggle-switch-label-color:var(--t-form-color);
1290
913
 
1291
- [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
1292
- inline-size:1em;
1293
- block-size:2em;
1294
- }
914
+ --tds-toggle-switch-track-width:var(--t-container-size-md);
915
+ --tds-toggle-switch-track-outline:none;
916
+ --tds-toggle-switch-track-height:var(--t-container-size-xs);
917
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color);
918
+ --tds-toggle-switch-track-transition:background-color var(--t-duration-100) var(--t-ease-in-out);
1295
919
 
1296
- @supports (field-sizing: content){
1297
- .tds-input--auto-width{
1298
- inline-size:-moz-fit-content;
1299
- inline-size:fit-content;
1300
- min-inline-size:min(100%, 122px);
1301
- }
920
+ --tds-toggle-switch-thumb-size:var(--t-element-size-md);
921
+ --tds-toggle-switch-thumb-transform:translateX(0);
922
+ --tds-toggle-switch-thumb-transition:transform var(--t-duration-200) var(--t-ease-in-out);
1302
923
 
1303
- .tds-input--auto-width input{
1304
- field-sizing:content;
1305
- inline-size:auto;
1306
- }
924
+ --tds-toggle-switch-description-font-size:var(--t-font-size-sm);
925
+ --tds-toggle-switch-description-line-height:1.35;
926
+ --tds-toggle-switch-description-color:var(--t-text-color-secondary);
927
+ position:relative;
928
+
929
+ display:var(--tds-toggle-switch-display);
930
+ grid-template-columns:auto;
931
+ grid-auto-columns:1fr;
932
+ gap:var(--t-spacing-fourth) var(--tds-toggle-switch-column-gap);
933
+ -webkit-user-select:none;
934
+ -moz-user-select:none;
935
+ user-select:none;
1307
936
  }
1308
937
 
1309
- .tds-select{
1310
- --tds-select-border-color:var(--t-form-border-color);
1311
- --tds-select-border-color-hover:var(--t-form-border-color-hover);
1312
- --tds-select-border-color-active:var(--t-form-border-color-hover);
1313
- --tds-select-background-color:var(--t-form-background-color);
1314
- --tds-select-color:var(--t-form-color);
1315
- --tds-select-placeholder-color:var(--t-form-placeholder-color);
1316
- --tds-select-font-size:var(--t-font-size-md);
1317
- --tds-select-min-height:var(--t-container-size-md);
1318
- --tds-select-padding-block:6px;
1319
- --tds-select-description-color:var(--t-text-color-secondary);
1320
- --tds-select-description-invalid-icon-display:none;
1321
- --tds-select-transition-property:background-color, border-color, outline-color, outline-offset;
1322
- --tds-select-background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTEzLDZsLTUsNWwtNSwtNXoiIGZpbGw9IiMzRDNEM0QiLz48L3N2Zz4=");
1323
- --tds-select-caret-size:1em;
938
+ .tds-toggle-switch input[type="checkbox"]{
939
+ position:absolute;
940
+ width:var(--tds-toggle-switch-track-width);
941
+ height:var(--tds-toggle-switch-track-height);
942
+ margin:0;
943
+ -webkit-appearance:none;
944
+ -moz-appearance:none;
945
+ appearance:none;
946
+ cursor:var(--tds-toggle-switch-cursor);
947
+ outline:var(--tds-toggle-switch-track-outline);
948
+ outline-offset:var(--t-focus-ring-offset);
949
+ background-color:transparent;
950
+ border:0;
951
+ border-radius:var(--t-border-radius-round);
952
+ }
953
+
954
+ :is(.tds-toggle-switch input[type="checkbox"]):focus-visible{
955
+ --tds-toggle-switch-track-outline:var(--t-focus-ring-outline);
956
+ }
957
+
958
+ .tds-toggle-switch label{
959
+ display:inline-flex;
960
+ grid-area:1 / 2;
961
+ -moz-column-gap:var(--tds-toggle-switch-column-gap);
962
+ column-gap:var(--tds-toggle-switch-column-gap);
963
+ margin-top:-.09375em;
964
+ font-size:var(--tds-toggle-switch-font-size);
965
+ font-weight:var(--t-font-weight-normal);
966
+ line-height:var(--tds-toggle-switch-line-height);
967
+ color:var(--tds-toggle-switch-label-color);
968
+ cursor:var(--tds-toggle-switch-cursor);
969
+ }
970
+
971
+ .tds-toggle-switch:not(:has(input:disabled)):has(input:hover){
972
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-hover);
973
+ }
974
+
975
+ .tds-toggle-switch:has(input:checked){
976
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on);
977
+ --tds-toggle-switch-thumb-transform:translateX(calc(var(--tds-toggle-switch-track-width) - var(--tds-toggle-switch-thumb-size) - var(--t-spacing-half)));
978
+ }
979
+
980
+ .tds-toggle-switch:has(input:checked):not(:has(input:disabled)):has(input:hover){
981
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on-hover);
982
+ }
983
+
984
+ .tds-toggle-switch:has(input:disabled){
985
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-disabled);
986
+ --tds-toggle-switch-label-color:var(--t-form-color-disabled);
987
+ --tds-toggle-switch-description-color:var(--t-form-color-disabled);
988
+ --tds-toggle-switch-cursor:not-allowed;
989
+ }
990
+
991
+ .tds-toggle-switch-track{
992
+ position:relative;
993
+ flex-shrink:0;
994
+ width:var(--tds-toggle-switch-track-width);
995
+ height:var(--tds-toggle-switch-track-height);
996
+ background-color:var(--tds-toggle-switch-track-background-color);
997
+ border-radius:var(--t-border-radius-round);
998
+ transition:var(--tds-toggle-switch-track-transition);
999
+ }
1000
+
1001
+ .tds-toggle-switch-track::before{
1002
+ position:absolute;
1003
+ top:var(--t-spacing-fourth);
1004
+ left:var(--t-spacing-fourth);
1005
+ width:var(--tds-toggle-switch-thumb-size);
1006
+ height:var(--tds-toggle-switch-thumb-size);
1007
+ content:"";
1008
+ background-color:#fff;
1009
+ border-radius:var(--t-border-radius-round);
1010
+ transform:var(--tds-toggle-switch-thumb-transform);
1011
+ transition:var(--tds-toggle-switch-thumb-transition);
1012
+ }
1013
+
1014
+ @media (prefers-reduced-motion: reduce){
1015
+
1016
+ .tds-toggle-switch-track{
1017
+ --tds-toggle-switch-track-transition:none;
1018
+ --tds-toggle-switch-thumb-transition:none;
1019
+ }
1020
+ }
1021
+
1022
+ .tds-toggle-switch-description{
1023
+ display:flex;
1024
+ grid-area:2 / 2;
1025
+ align-items:flex-start;
1026
+ margin:0;
1027
+ font-size:var(--tds-toggle-switch-description-font-size);
1028
+ line-height:var(--tds-toggle-switch-description-line-height);
1029
+ color:var(--tds-toggle-switch-description-color);
1030
+ cursor:text;
1031
+ }
1032
+
1033
+ .tds-toggle-switch--sm{
1034
+ --tds-toggle-switch-font-size:var(--t-font-size-sm);
1035
+ --tds-toggle-switch-line-height:1.35;
1036
+ --tds-toggle-switch-track-height:var(--t-element-size-lg);
1037
+ --tds-toggle-switch-thumb-size:var(--t-element-size-sm);
1038
+ --tds-toggle-switch-description-font-size:var(--t-font-size-xs);
1039
+ --tds-toggle-switch-description-line-height:1.3;
1040
+ }
1041
+
1042
+ .tds-toggle-switch--hide-label{
1043
+ --tds-toggle-switch-display:inline-flex;
1044
+ }
1045
+
1046
+ .tds-select{
1047
+ --tds-select-border-color:var(--t-form-border-color);
1048
+ --tds-select-border-color-hover:var(--t-form-border-color-hover);
1049
+ --tds-select-border-color-active:var(--t-form-border-color-hover);
1050
+ --tds-select-background-color:var(--t-form-background-color);
1051
+ --tds-select-color:var(--t-form-color);
1052
+ --tds-select-placeholder-color:var(--t-form-placeholder-color);
1053
+ --tds-select-font-size:var(--t-font-size-md);
1054
+ --tds-select-min-height:var(--t-container-size-md);
1055
+ --tds-select-padding-block:6px;
1056
+ --tds-select-description-color:var(--t-text-color-secondary);
1057
+ --tds-select-description-invalid-icon-display:none;
1058
+ --tds-select-transition-property:background-color, border-color, outline-color, outline-offset;
1059
+ --tds-select-background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTEzLDZsLTUsNWwtNSwtNXoiIGZpbGw9IiMzRDNEM0QiLz48L3N2Zz4=");
1060
+ --tds-select-caret-size:1em;
1324
1061
  --tds-select-caret-inline-offset:.75em;
1325
1062
  --tds-select-caret-transition:transform var(--t-duration-300) var(--t-ease-in-out);
1326
1063
 
@@ -1602,140 +1339,403 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1602
1339
  color:var(--tds-select-color);
1603
1340
  }
1604
1341
 
1605
- .tds-select:has( > button) [popover]{
1606
- inset:auto;
1607
- inline-size:-moz-max-content;
1608
- inline-size:max-content;
1609
- min-inline-size:anchor-size(width);
1610
- max-inline-size:100vi;
1611
- max-block-size:min(50vh, 20rem);
1612
- padding:var(--tds-select-dropdown-padding);
1613
- margin-block:var(--tds-select-dropdown-margin-block);
1614
- position-area:block-end span-inline-start;
1615
- position-try-fallbacks:flip-block, flip-inline;
1616
- overflow:auto;
1617
- overflow-x:hidden;
1618
- scroll-behavior:var(--tds-select-dropdown-scroll-behavior);
1619
- -webkit-user-select:none;
1620
- -moz-user-select:none;
1621
- user-select:none;
1622
- scroll-padding-top:calc(var(--tds-select-group-label-padding-block-start) + var(--tds-select-group-label-font-size) + var(--t-spacing-2));
1623
- scrollbar-color:var(--tds-select-dropdown-scrollbar-color);
1624
- scrollbar-width:var(--tds-select-dropdown-scrollbar-width);
1625
- background:var(--tds-select-dropdown-background-color);
1626
- border:var(--tds-select-dropdown-border);
1627
- border-radius:var(--tds-select-dropdown-border-radius);
1628
- box-shadow:var(--tds-select-dropdown-box-shadow);
1629
- opacity:var(--tds-select-dropdown-open-opacity);
1630
- transform:var(--tds-select-dropdown-open-transform);
1631
- transition:var(--tds-select-dropdown-transition-enter);
1632
- }
1342
+ .tds-select:has( > button) [popover]{
1343
+ inset:auto;
1344
+ inline-size:-moz-max-content;
1345
+ inline-size:max-content;
1346
+ min-inline-size:anchor-size(width);
1347
+ max-inline-size:100vi;
1348
+ max-block-size:min(50vh, 20rem);
1349
+ padding:var(--tds-select-dropdown-padding);
1350
+ margin-block:var(--tds-select-dropdown-margin-block);
1351
+ position-area:block-end span-inline-start;
1352
+ position-try-fallbacks:flip-block, flip-inline;
1353
+ overflow:auto;
1354
+ overflow-x:hidden;
1355
+ scroll-behavior:var(--tds-select-dropdown-scroll-behavior);
1356
+ -webkit-user-select:none;
1357
+ -moz-user-select:none;
1358
+ user-select:none;
1359
+ scroll-padding-top:calc(var(--tds-select-group-label-padding-block-start) + var(--tds-select-group-label-font-size) + var(--t-spacing-2));
1360
+ scrollbar-color:var(--tds-select-dropdown-scrollbar-color);
1361
+ scrollbar-width:var(--tds-select-dropdown-scrollbar-width);
1362
+ background:var(--tds-select-dropdown-background-color);
1363
+ border:var(--tds-select-dropdown-border);
1364
+ border-radius:var(--tds-select-dropdown-border-radius);
1365
+ box-shadow:var(--tds-select-dropdown-box-shadow);
1366
+ opacity:var(--tds-select-dropdown-open-opacity);
1367
+ transform:var(--tds-select-dropdown-open-transform);
1368
+ transition:var(--tds-select-dropdown-transition-enter);
1369
+ }
1370
+
1371
+ :is(.tds-select:has( > button) [popover]):not(:popover-open){
1372
+ opacity:var(--tds-select-dropdown-closed-opacity);
1373
+ transform:var(--tds-select-dropdown-closed-transform);
1374
+ transition:var(--tds-select-dropdown-transition-exit);
1375
+ }
1376
+
1377
+ :is(.tds-select:has( > button) [popover]) ul{
1378
+ padding:0;
1379
+ margin:0;
1380
+ list-style:none;
1381
+ }
1382
+
1383
+ @starting-style{
1384
+ :is(.tds-select:has( > button) [popover]):popover-open{
1385
+ opacity:var(--tds-select-dropdown-closed-opacity);
1386
+ transform:var(--tds-select-dropdown-closed-transform);
1387
+ }
1388
+ }
1389
+
1390
+ @supports ((-webkit-appearance: base-select) or (-moz-appearance: base-select) or (appearance: base-select)){
1391
+ .tds-select select:has(> button){
1392
+ padding-inline-end:0;
1393
+ background-image:none;
1394
+ }
1395
+ @media (hover) and (pointer: fine){
1396
+ :is(.tds-select select:has( > button)),:is(.tds-select select:has( > button))::picker(select){
1397
+ padding-block:0;
1398
+ -webkit-appearance:base-select;
1399
+ -moz-appearance:base-select;
1400
+ appearance:base-select;
1401
+ }
1402
+ }
1403
+ :is(.tds-select select:has( > button))::picker-icon{
1404
+ flex-shrink:0;
1405
+ width:var(--tds-select-caret-size);
1406
+ height:var(--tds-select-caret-size);
1407
+ margin-inline-end:var(--tds-select-caret-inline-offset);
1408
+ content:var(--tds-select-background-image);
1409
+ transition:var(--tds-select-caret-transition);
1410
+ }
1411
+
1412
+ :is(.tds-select select:has( > button))::picker(select):not(:popover-open){
1413
+ opacity:var(--tds-select-dropdown-closed-opacity);
1414
+ transform:var(--tds-select-dropdown-closed-transform);
1415
+ transition:var(--tds-select-dropdown-transition-exit);
1416
+ }
1417
+
1418
+ :is(.tds-select select:has( > button)):open,:is(.tds-select select:has( > button)):focus-within{
1419
+ outline-color:var(--t-focus-ring-color);
1420
+ outline-offset:var(--t-focus-ring-offset);
1421
+ border-color:var(--tds-select-border-color-active);
1422
+ }
1423
+
1424
+ :is(.tds-select select:has( > button)):open::picker-icon{
1425
+ opacity:1;
1426
+ transform:rotate(.5turn);
1427
+ }
1428
+
1429
+ :is(.tds-select select:has( > button)) selectedcontent{
1430
+ overflow:hidden;
1431
+ text-overflow:ellipsis;
1432
+ line-height:calc(var(--tds-select-min-height) - 2px);
1433
+ white-space:nowrap;
1434
+ }
1435
+
1436
+ :is(.tds-select select:has( > button)):has(option[hidden][disabled][value=""]:checked) > button{
1437
+ color:var(--tds-select-placeholder-color);
1438
+ }
1439
+
1440
+ :is(.tds-select select:has( > button))::picker(select){
1441
+ inset:auto;
1442
+ inline-size:-moz-max-content;
1443
+ inline-size:max-content;
1444
+ min-inline-size:anchor-size(width);
1445
+ max-inline-size:100vi;
1446
+ padding:var(--tds-select-dropdown-padding);
1447
+ margin-block:var(--tds-select-dropdown-margin-block);
1448
+ position-try-fallbacks:flip-block, flip-inline;
1449
+ overflow:auto;
1450
+ overflow-x:hidden;
1451
+ scroll-behavior:var(--tds-select-dropdown-scroll-behavior);
1452
+ -webkit-user-select:none;
1453
+ -moz-user-select:none;
1454
+ user-select:none;
1455
+ scrollbar-color:var(--tds-select-dropdown-scrollbar-color);
1456
+ scrollbar-width:var(--tds-select-dropdown-scrollbar-width);
1457
+ background:var(--tds-select-dropdown-background-color);
1458
+ border:var(--tds-select-dropdown-border);
1459
+ border-radius:var(--tds-select-dropdown-border-radius);
1460
+ box-shadow:var(--tds-select-dropdown-box-shadow);
1461
+ opacity:var(--tds-select-dropdown-open-opacity);
1462
+ transform:var(--tds-select-dropdown-open-transform);
1463
+ transition:var(--tds-select-dropdown-transition-enter);
1464
+ }
1465
+
1466
+ :is(.tds-select select:has( > button)) option::checkmark{
1467
+ display:none;
1468
+ }
1469
+
1470
+ @starting-style{
1471
+ :is(.tds-select select:has( > button))::picker(select):popover-open{
1472
+ opacity:var(--tds-select-dropdown-closed-opacity);
1473
+ transform:var(--tds-select-dropdown-closed-transform);
1474
+ }
1475
+ }
1476
+ }
1477
+
1478
+ @layer t-critical{
1479
+ tds-page-header:not(.hydrated){
1480
+ display:none;
1481
+ }
1482
+ }
1483
+
1484
+ @layer t-component{
1485
+ .tds-page-header{
1486
+ --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
1487
+ --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
1488
+ --tds-page-header-color:var(--t-text-color);
1489
+ --tds-page-header-bottom-border-color:var(--t-surface-color-canvas);
1490
+ --tds-page-header-headline-color:var(--t-text-color-headline);
1491
+ --tds-page-header-headline-font-size:var(--t-font-size-2xl);
1492
+ --tds-page-header-padding-x:var(--t-spacing-2);
1493
+ --tds-page-header-padding-y:var(--t-spacing-2);
1494
+ --tds-page-header-nav-padding-x:var(--tds-page-header-padding-x, var(--t-spacing-3));
1495
+ --tds-page-header-nav-gap:var(--t-spacing-1);
1496
+ --tds-page-header-nav-background:linear-gradient(180deg, var(--tds-page-header-nav-background-start, rgba(0, 0, 0, 0)) 0%, var(--tds-page-header-nav-background-end, rgba(0, 0, 0, .1)) 100%);
1497
+ --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
1498
+ --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
1499
+ --tds-page-header-nav-item-color:var(--t-text-color-secondary);
1500
+ --tds-page-header-nav-item-background-color:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 35%);
1501
+ --tds-page-header-nav-item-border-width:1px;
1502
+
1503
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
1504
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-bottom-border-color);
1505
+
1506
+ --tds-page-header-nav-item-color-hover:var(--t-text-color);
1507
+ --tds-page-header-nav-item-background-color-hover:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 20%);
1508
+ --tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
1509
+
1510
+ --tds-page-header-nav-item-background-color-active:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 10%);
1511
+ --tds-page-header-nav-item-border-color-active:var(--tds-page-header-nav-item-background-color-active);
1512
+
1513
+ --tds-page-header-nav-item-color-disabled:var(--t-text-color-disabled);
1514
+ --tds-page-header-nav-item-background-color-disabled:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 50%);
1515
+ --tds-page-header-nav-item-border-color-disabled:var(--tds-page-header-nav-item-background-color-disabled);
1516
+
1517
+ --tds-page-header-nav-item-color-selected:var(--t-text-color);
1518
+ --tds-page-header-nav-item-background-color-selected:var(--t-surface-color-canvas);
1519
+ --tds-page-header-nav-item-border-color-selected:var(--tds-page-header-nav-item-background-color-selected);
1520
+ --tds-page-header-nav-item-border-bottom-color-selected:var(--tds-page-header-nav-item-background-color-selected);
1521
+ --tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning);
1522
+ }
1523
+
1524
+ .tds-page-header--profile{
1525
+ --tds-page-header-padding-y:20px;
1526
+ }
1527
+
1528
+ @supports (color: light-dark(#fff, #000)){
1529
+ .tds-page-header{
1530
+ --tds-page-header-nav-background-start:light-dark(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0));
1531
+ --tds-page-header-nav-background-end:light-dark(rgba(0, 0, 0, .05), rgba(255, 255, 255, .1));
1532
+ }
1533
+ }
1534
+
1535
+ @media (min-width: 600px){
1536
+ .tds-page-header{
1537
+ --tds-page-header-background-color:var(--t-surface-color-canvas);
1538
+ --tds-page-header-color:var(--t-text-color-secondary);
1539
+ --tds-page-header-bottom-border-color:var(--t-border-color);
1540
+ --tds-page-header-padding-x:var(--t-spacing-3);
1541
+ --tds-page-header-headline-font-size:var(--t-font-size-3xl);
1542
+ --tds-page-header-nav-gap:var(--t-spacing-half);
1543
+ --tds-page-header-nav-background:transparent;
1544
+ --tds-page-header-nav-item-padding-x:var(--t-spacing-2);
1545
+ --tds-page-header-nav-item-border-width:1px;
1546
+ --tds-page-header-nav-item-color:var(--t-text-color);
1547
+ --tds-page-header-nav-item-background-color:var(--t-fill-color-neutral-070);
1548
+ --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-060);
1549
+ --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-050);
1550
+ --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
1551
+ --tds-page-header-nav-item-border-color-selected:var(--t-border-color);
1552
+ }
1553
+ }
1554
+ }
1555
+
1556
+ .tds-page-header{
1557
+ display:flex;
1558
+ flex-direction:column;
1559
+ padding-top:var(--tds-page-header-padding-y);
1560
+ color:var(--tds-page-header-color);
1561
+ background:var(--tds-page-header-background-color);
1562
+ border-bottom:1px solid var(--tds-page-header-bottom-border-color);
1563
+ }
1564
+
1565
+ .tds-page-header:not(.has-nav){
1566
+ padding-bottom:var(--tds-page-header-padding-y);
1567
+ }
1568
+
1569
+ .tds-page-header.inactive{
1570
+ background:var(--tds-page-header-background-color-inactive);
1571
+ }
1572
+
1573
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
1574
+ width:100%;
1575
+ }
1576
+
1577
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
1578
+ display:flex;
1579
+ flex-flow:row wrap;
1580
+ gap:var(--t-spacing-half) var(--t-spacing-1);
1581
+ align-items:flex-start;
1582
+ justify-content:flex-start;
1583
+ min-width:0;
1584
+ }
1585
+
1586
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)):not(:has(ul)),:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) ul{
1587
+ display:flex;
1588
+ gap:var(--tds-page-header-nav-gap);
1589
+ padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
1590
+ margin:0 0 -1px;
1591
+ overflow:auto;
1592
+ list-style:none;
1593
+ background:var(--tds-page-header-nav-background);
1594
+ }
1595
+
1596
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button){
1597
+ position:relative;
1598
+ display:inline-flex;
1599
+ padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
1600
+ font-size:var(--t-font-size-sm);
1601
+ line-height:22px;
1602
+ color:var(--tds-page-header-nav-item-color);
1603
+ white-space:nowrap;
1604
+ text-decoration:none;
1605
+ -webkit-appearance:none;
1606
+ -moz-appearance:none;
1607
+ appearance:none;
1608
+ cursor:pointer;
1609
+ outline-offset:-2px;
1610
+ background-color:var(--tds-page-header-nav-item-background-color);
1611
+ background-clip:padding-box;
1612
+ border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
1613
+ border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
1614
+ border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
1615
+ }
1616
+
1617
+ .selected:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)){
1618
+ --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-selected);
1619
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-selected);
1620
+ --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-selected);
1621
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-selected);
1622
+ }
1623
+
1624
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):hover{
1625
+ --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
1626
+ --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
1627
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
1628
+ }
1629
+
1630
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):active{
1631
+ background-color:var(--tds-page-header-nav-item-background-color-active);
1632
+ border-color:var(--tds-page-header-nav-item-border-color-active);
1633
+ }
1634
+
1635
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):disabled{
1636
+ color:var(--tds-page-header-nav-item-color-disabled);
1637
+ cursor:not-allowed;
1638
+ background-color:var(--tds-page-header-nav-item-background-color-disabled);
1639
+ opacity:1;
1640
+ }
1633
1641
 
1634
- :is(.tds-select:has( > button) [popover]):not(:popover-open){
1635
- opacity:var(--tds-select-dropdown-closed-opacity);
1636
- transform:var(--tds-select-dropdown-closed-transform);
1637
- transition:var(--tds-select-dropdown-transition-exit);
1642
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
1643
+ position:relative;
1638
1644
  }
1639
1645
 
1640
- :is(.tds-select:has( > button) [popover]) ul{
1641
- padding:0;
1642
- margin:0;
1643
- list-style:none;
1644
- }
1646
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator)) :is(a,button){
1647
+ -webkit-mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
1648
+ mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
1649
+ }
1645
1650
 
1646
- @starting-style{
1647
- :is(.tds-select:has( > button) [popover]):popover-open{
1648
- opacity:var(--tds-select-dropdown-closed-opacity);
1649
- transform:var(--tds-select-dropdown-closed-transform);
1651
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::before,:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
1652
+ position:absolute;
1653
+ top:-5px;
1654
+ right:-2px;
1655
+ width:10px;
1656
+ height:10px;
1657
+ content:"";
1658
+ background:var(--tds-page-header-nav-item-indicator-color);
1659
+ border-radius:50%;
1650
1660
  }
1651
- }
1652
1661
 
1653
- @supports ((-webkit-appearance: base-select) or (-moz-appearance: base-select) or (appearance: base-select)){
1654
- .tds-select select:has(> button){
1655
- padding-inline-end:0;
1656
- background-image:none;
1657
- }
1658
- @media (hover) and (pointer: fine){
1659
- :is(.tds-select select:has( > button)),:is(.tds-select select:has( > button))::picker(select){
1660
- padding-block:0;
1661
- -webkit-appearance:base-select;
1662
- -moz-appearance:base-select;
1663
- appearance:base-select;
1662
+ @media (prefers-reduced-motion: no-preference){
1663
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
1664
+ animation:indicator-pulse 1.25s ease infinite;
1665
+ }
1664
1666
  }
1665
- }
1666
- :is(.tds-select select:has( > button))::picker-icon{
1667
- flex-shrink:0;
1668
- width:var(--tds-select-caret-size);
1669
- height:var(--tds-select-caret-size);
1670
- margin-inline-end:var(--tds-select-caret-inline-offset);
1671
- content:var(--tds-select-background-image);
1672
- transition:var(--tds-select-caret-transition);
1673
- }
1674
1667
 
1675
- :is(.tds-select select:has( > button))::picker(select):not(:popover-open){
1676
- opacity:var(--tds-select-dropdown-closed-opacity);
1677
- transform:var(--tds-select-dropdown-closed-transform);
1678
- transition:var(--tds-select-dropdown-transition-exit);
1679
- }
1668
+ .tds-page-header__title-bar{
1669
+ display:flex;
1670
+ flex-direction:column;
1671
+ gap:var(--t-spacing-2) var(--t-spacing-1);
1672
+ align-items:flex-start;
1673
+ justify-content:space-between;
1674
+ padding:0 var(--tds-page-header-padding-x);
1675
+ }
1680
1676
 
1681
- :is(.tds-select select:has( > button)):open,:is(.tds-select select:has( > button)):focus-within{
1682
- outline-color:var(--t-focus-ring-color);
1683
- outline-offset:var(--t-focus-ring-offset);
1684
- border-color:var(--tds-select-border-color-active);
1685
- }
1677
+ .tds-page-header--profile > .tds-page-header__title-bar{
1678
+ align-items:center;
1679
+ }
1686
1680
 
1687
- :is(.tds-select select:has( > button)):open::picker-icon{
1688
- opacity:1;
1689
- transform:rotate(.5turn);
1690
- }
1681
+ .tds-page-header__primary{
1682
+ width:100%;
1683
+ }
1691
1684
 
1692
- :is(.tds-select select:has( > button)) selectedcontent{
1693
- overflow:hidden;
1694
- text-overflow:ellipsis;
1695
- line-height:calc(var(--tds-select-min-height) - 2px);
1696
- white-space:nowrap;
1697
- }
1685
+ .tds-page-header__primary h1{
1686
+ margin:0;
1687
+ font-size:var(--tds-page-header-headline-font-size);
1688
+ font-weight:var(--t-font-weight-normal);
1689
+ line-height:32px;
1690
+ color:var(--tds-page-header-headline-color);
1691
+ overflow-wrap:break-word;
1692
+ }
1698
1693
 
1699
- :is(.tds-select select:has( > button)):has(option[hidden][disabled][value=""]:checked) > button{
1700
- color:var(--tds-select-placeholder-color);
1701
- }
1694
+ @media (min-width: 960px){
1695
+ .tds-page-header__primary{
1696
+ flex:1 1 max-content;
1697
+ width:auto;
1698
+ min-width:0;
1699
+ max-width:100%;
1700
+ }
1702
1701
 
1703
- :is(.tds-select select:has( > button))::picker(select){
1704
- inset:auto;
1705
- inline-size:-moz-max-content;
1706
- inline-size:max-content;
1707
- min-inline-size:anchor-size(width);
1708
- max-inline-size:100vi;
1709
- padding:var(--tds-select-dropdown-padding);
1710
- margin-block:var(--tds-select-dropdown-margin-block);
1711
- position-try-fallbacks:flip-block, flip-inline;
1712
- overflow:auto;
1713
- overflow-x:hidden;
1714
- scroll-behavior:var(--tds-select-dropdown-scroll-behavior);
1715
- -webkit-user-select:none;
1716
- -moz-user-select:none;
1717
- user-select:none;
1718
- scrollbar-color:var(--tds-select-dropdown-scrollbar-color);
1719
- scrollbar-width:var(--tds-select-dropdown-scrollbar-width);
1720
- background:var(--tds-select-dropdown-background-color);
1721
- border:var(--tds-select-dropdown-border);
1722
- border-radius:var(--tds-select-dropdown-border-radius);
1723
- box-shadow:var(--tds-select-dropdown-box-shadow);
1724
- opacity:var(--tds-select-dropdown-open-opacity);
1725
- transform:var(--tds-select-dropdown-open-transform);
1726
- transition:var(--tds-select-dropdown-transition-enter);
1702
+ .tds-page-header__title-bar,
1703
+ .tds-page-header--profile .tds-page-header__title-bar{
1704
+ flex-flow:row nowrap;
1705
+ row-gap:12px;
1706
+ align-items:flex-start;
1707
+ }
1708
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
1709
+ width:auto;
1727
1710
  }
1728
1711
 
1729
- :is(.tds-select select:has( > button)) option::checkmark{
1730
- display:none;
1712
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
1713
+ justify-content:flex-end;
1731
1714
  }
1715
+ }
1732
1716
 
1733
- @starting-style{
1734
- :is(.tds-select select:has( > button))::picker(select):popover-open{
1735
- opacity:var(--tds-select-dropdown-closed-opacity);
1736
- transform:var(--tds-select-dropdown-closed-transform);
1737
- }
1738
- }
1717
+ .tds-page-header-phone,
1718
+ .tds-page-header-email{
1719
+ color:var(--tds-page-header-color);
1720
+ white-space:nowrap;
1721
+ }
1722
+
1723
+ .tds-page-header-email{
1724
+ max-width:100%;
1725
+ overflow:hidden;
1726
+ text-overflow:ellipsis;
1727
+ }
1728
+
1729
+ @keyframes indicator-pulse{
1730
+ 0%{
1731
+ opacity:.3;
1732
+ transform:scale(.9);
1733
+ }
1734
+
1735
+ 100%{
1736
+ opacity:0;
1737
+ transform:scale(1.75);
1738
+ }
1739
1739
  }
1740
1740
 
1741
1741
  .tds-input{
@@ -3681,18 +3681,19 @@ a[class="tds-btn"]{
3681
3681
  line-height:1.35;
3682
3682
  }
3683
3683
 
3684
- .tds-time-field{
3685
- --tds-time-field-border-color:var(--t-form-border-color);
3686
- --tds-time-field-border-color-hover:var(--t-form-border-color-hover);
3687
- --tds-time-field-border-color-active:var(--t-form-border-color-focus);
3688
- --tds-time-field-background-color:var(--t-form-background-color);
3689
- --tds-time-field-color:var(--t-form-color);
3690
- --tds-time-field-placeholder-color:var(--t-form-placeholder-color);
3691
- --tds-time-field-font-size:var(--t-font-size-md);
3692
- --tds-time-field-min-height:var(--t-container-size-md);
3693
- --tds-time-field-padding-block:6px;
3694
- --tds-time-field-description-color:var(--t-text-color-secondary);
3695
- --tds-time-field-description-invalid-icon-display:none;
3684
+ .tds-date-picker{
3685
+ --tds-date-picker-border-color:var(--t-form-border-color);
3686
+ --tds-date-picker-border-color-hover:var(--t-form-border-color-hover);
3687
+ --tds-date-picker-border-color-active:var(--t-form-border-color-focus);
3688
+ --tds-date-picker-background-color:var(--t-form-background-color);
3689
+ --tds-date-picker-color:var(--t-form-color);
3690
+ --tds-date-picker-placeholder-color:var(--t-form-placeholder-color);
3691
+ --tds-date-picker-font-size:var(--t-font-size-md);
3692
+ --tds-date-picker-min-height:var(--t-container-size-md);
3693
+ --tds-date-picker-padding-block:6px;
3694
+ --tds-date-picker-button-offset:4px;
3695
+ --tds-date-picker-description-color:var(--t-text-color-secondary);
3696
+ --tds-date-picker-description-invalid-icon-display:none;
3696
3697
 
3697
3698
  position:relative;
3698
3699
  display:flex;
@@ -3700,135 +3701,291 @@ a[class="tds-btn"]{
3700
3701
  gap:var(--t-spacing-half);
3701
3702
  }
3702
3703
 
3703
- .tds-time-field[data-required] .tds-time-field-label::after{
3704
+ .tds-date-picker[data-required] .tds-date-picker-label::after{
3704
3705
  margin-left:.25ch;
3705
3706
  color:var(--t-text-color-status-error);
3706
3707
  content:"*";
3707
3708
  }
3708
3709
 
3709
- .tds-time-field[data-invalid]{
3710
- --tds-time-field-border-color:var(--t-form-border-color-error);
3711
- --tds-time-field-border-color-hover:var(--t-form-border-color-error-hover);
3712
- --tds-time-field-border-color-active:var(--t-form-border-color-error-hover);
3713
- --tds-time-field-background-color:var(--t-form-background-color-error);
3714
- --tds-time-field-description-color:var(--t-text-color-status-error);
3715
- --tds-time-field-description-invalid-icon-display:inline-block;
3710
+ .tds-date-picker[data-invalid]{
3711
+ --tds-date-picker-border-color:var(--t-form-border-color-error);
3712
+ --tds-date-picker-border-color-hover:var(--t-form-border-color-error-hover);
3713
+ --tds-date-picker-border-color-active:var(--t-form-border-color-error-hover);
3714
+ --tds-date-picker-background-color:var(--t-form-background-color-error);
3715
+ --tds-date-picker-description-color:var(--t-text-color-status-error);
3716
+ --tds-date-picker-description-invalid-icon-display:inline-block;
3716
3717
  }
3717
3718
 
3718
- .tds-time-field[data-disabled]{
3719
- --tds-time-field-border-color:var(--t-form-border-color-disabled);
3720
- --tds-time-field-background-color:var(--t-form-background-color-disabled);
3721
- --tds-time-field-color:var(--t-form-color-disabled);
3722
- --tds-time-field-placeholder-color:var(--t-form-color-disabled);
3719
+ .tds-date-picker[data-disabled]{
3720
+ --tds-date-picker-border-color:var(--t-form-border-color-disabled);
3721
+ --tds-date-picker-background-color:var(--t-form-background-color-disabled);
3722
+ --tds-date-picker-color:var(--t-form-color-disabled);
3723
+ --tds-date-picker-placeholder-color:var(--t-form-color-disabled);
3723
3724
  }
3724
3725
 
3725
- .tds-time-field[data-disabled] .tds-time-field-label{
3726
- color:var(--t-form-color-disabled);
3727
- }
3728
-
3729
- .tds-time-field[data-disabled] .tds-time-field-input{
3726
+ .tds-date-picker[data-disabled] .tds-date-picker-field{
3730
3727
  cursor:not-allowed;
3731
3728
  }
3732
3729
 
3733
- .tds-time-field--lg{
3734
- --tds-time-field-min-height:var(--t-container-size-lg);
3735
- --tds-time-field-font-size:var(--t-font-size-lg);
3730
+ .tds-date-picker--lg{
3731
+ --tds-date-picker-min-height:var(--t-container-size-lg);
3732
+ --tds-date-picker-font-size:var(--t-font-size-lg);
3733
+ --tds-date-picker-button-offset:5px;
3736
3734
  }
3737
3735
 
3738
- .tds-time-field-label{
3736
+ .tds-date-picker-label{
3739
3737
  font-size:var(--t-font-size-md);
3740
3738
  font-weight:var(--t-font-weight-normal);
3741
3739
  color:var(--t-text-color);
3742
3740
  cursor:default;
3743
3741
  }
3744
3742
 
3745
- .tds-time-field-input{
3743
+ .tds-date-picker-field{
3746
3744
  display:flex;
3747
3745
  align-items:center;
3748
3746
  inline-size:100%;
3749
- min-block-size:var(--tds-time-field-min-height);
3750
- padding-block:var(--tds-time-field-padding-block);
3751
- padding-inline:var(--t-spacing-1);
3747
+ min-block-size:var(--tds-date-picker-min-height);
3752
3748
  font-family:inherit;
3753
- font-size:var(--tds-time-field-font-size);
3754
- font-variant-numeric:tabular-nums;
3749
+ font-size:var(--tds-date-picker-font-size);
3755
3750
  line-height:1;
3756
- color:var(--tds-time-field-color);
3751
+ color:var(--tds-date-picker-color);
3752
+ -webkit-appearance:none;
3753
+ -moz-appearance:none;
3754
+ appearance:none;
3757
3755
  cursor:text;
3758
3756
  outline:var(--t-focus-ring-width) solid transparent;
3759
3757
  outline-offset:0;
3760
- background-color:var(--tds-time-field-background-color);
3761
- border:var(--t-form-border-width) solid var(--tds-time-field-border-color);
3758
+ background-color:var(--tds-date-picker-background-color);
3759
+ border:var(--t-form-border-width) solid var(--tds-date-picker-border-color);
3762
3760
  border-radius:var(--t-form-border-radius);
3763
3761
  }
3764
3762
 
3765
- .tds-time-field-input[data-hovered]:not([data-focus-visible],[data-focused],[data-disabled]){
3766
- border-color:var(--tds-time-field-border-color-hover);
3763
+ .tds-date-picker-field[data-hovered]:not([data-focus-visible],[data-focus-within],[data-disabled]){
3764
+ border-color:var(--tds-date-picker-border-color-hover);
3767
3765
  }
3768
3766
 
3769
- .tds-time-field-input[data-focus-within]{
3767
+ .tds-date-picker-field[data-focus-within]{
3770
3768
  outline-color:var(--t-focus-ring-color);
3771
3769
  outline-offset:var(--t-focus-ring-offset);
3772
- border-color:var(--tds-time-field-border-color-active);
3770
+ border-color:var(--tds-date-picker-border-color-active);
3773
3771
  }
3774
3772
 
3775
- .tds-time-field-input[data-readonly]{
3773
+ .tds-date-picker-field:has(.tds-date-picker-input[data-readonly]){
3776
3774
  color:var(--t-form-color-readonly);
3777
3775
  background-color:var(--t-form-background-color-readonly);
3778
3776
  border-color:var(--t-form-border-color-readonly);
3779
3777
  }
3780
3778
 
3781
- .tds-time-field-input[data-readonly][data-hovered]{
3779
+ .tds-date-picker-field[data-hovered]:has(.tds-date-picker-input[data-readonly]){
3782
3780
  border-color:var(--t-form-border-color-readonly);
3783
3781
  }
3784
3782
 
3785
- .tds-time-field-input[data-readonly][data-focus-within]{
3783
+ .tds-date-picker-field[data-focus-within]:has(.tds-date-picker-input[data-readonly]){
3786
3784
  outline-color:var(--t-focus-ring-color);
3787
3785
  outline-offset:var(--t-focus-ring-offset);
3788
3786
  border-color:var(--t-form-border-color-hover);
3789
3787
  }
3790
3788
 
3791
- .tds-time-field-segment{
3792
- padding-inline:1px;
3789
+ .tds-date-picker-input{
3790
+ flex:1;
3791
+ padding-block:var(--tds-date-picker-padding-block);
3792
+ padding-inline-start:var(--t-spacing-1);
3793
3793
  font-variant-numeric:tabular-nums;
3794
- cursor:text;
3794
+ }
3795
+
3796
+ .tds-date-picker-segment{
3797
+ padding-inline:2px;
3795
3798
  caret-color:transparent;
3796
3799
  border-radius:var(--t-border-radius-sm);
3797
3800
  }
3798
3801
 
3799
- .tds-time-field-segment[data-placeholder]{
3800
- color:var(--tds-time-field-placeholder-color);
3802
+ .tds-date-picker-segment[data-placeholder]{
3803
+ color:var(--tds-date-picker-placeholder-color);
3801
3804
  }
3802
3805
 
3803
- .tds-time-field-segment[data-focused]{
3806
+ .tds-date-picker-segment[data-focused]{
3804
3807
  color:var(--t-text-color-inverted);
3805
3808
  outline:0;
3806
3809
  background:var(--t-fill-color-interaction);
3807
3810
  }
3808
3811
 
3809
- .tds-time-field-segment-separator{
3812
+ .tds-date-picker-segment-separator{
3810
3813
  padding-inline:0;
3811
- color:var(--tds-time-field-placeholder-color);
3814
+ color:var(--tds-date-picker-placeholder-color);
3812
3815
  }
3813
3816
 
3814
- .tds-time-field-description{
3817
+ .tds-date-picker-description{
3815
3818
  display:flex;
3816
3819
  gap:var(--t-spacing-half);
3817
3820
  align-items:flex-start;
3818
3821
  margin:0;
3819
3822
  font-size:var(--t-font-size-sm);
3820
3823
  line-height:1.35;
3821
- color:var(--tds-time-field-description-color, var(--t-text-color-secondary));
3824
+ color:var(--tds-date-picker-description-color, var(--t-text-color-secondary));
3822
3825
  cursor:text;
3823
3826
  }
3824
3827
 
3825
- .tds-time-field-description .tds-time-field-description-invalid-icon{
3826
- display:var(--tds-time-field-description-invalid-icon-display, none);
3828
+ .tds-date-picker-description .tds-date-picker-description-invalid-icon{
3829
+ display:var(--tds-date-picker-description-invalid-icon-display, none);
3827
3830
  flex-shrink:0;
3828
3831
  margin-block-start:calc(.5lh - .5em);
3829
3832
  line-height:1.35;
3830
3833
  }
3831
3834
 
3835
+ .tds-date-picker-button{
3836
+ flex-shrink:0;
3837
+ align-self:center;
3838
+ inline-size:calc(var(--tds-date-picker-min-height) - (var(--tds-date-picker-button-offset) * 2));
3839
+ block-size:calc(var(--tds-date-picker-min-height) - (var(--tds-date-picker-button-offset) * 2));
3840
+ padding:0;
3841
+ margin-inline-end:var(--tds-date-picker-button-offset);
3842
+ }
3843
+
3844
+ .tds-date-picker-popover{
3845
+ padding:var(--t-spacing-2);
3846
+ background:var(--t-surface-color-card);
3847
+ border:1px solid var(--t-border-color);
3848
+ border-radius:var(--t-border-radius);
3849
+ box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
3850
+ }
3851
+
3852
+ .tds-date-picker-popover[data-entering]{
3853
+ animation:tds-date-picker-popover-enter 160ms ease;
3854
+ }
3855
+
3856
+ .tds-date-picker-popover[data-exiting]{
3857
+ animation:tds-date-picker-popover-exit 130ms ease;
3858
+ }
3859
+
3860
+ @keyframes tds-date-picker-popover-enter{
3861
+ from{
3862
+ opacity:0;
3863
+ transform:translateY(-8px);
3864
+ }
3865
+ }
3866
+
3867
+ @keyframes tds-date-picker-popover-exit{
3868
+ to{
3869
+ opacity:0;
3870
+ transform:translateY(-8px);
3871
+ }
3872
+ }
3873
+
3874
+ @media (prefers-reduced-motion: reduce){
3875
+ .tds-date-picker-popover[data-entering],.tds-date-picker-popover[data-exiting]{
3876
+ animation:none;
3877
+ }
3878
+ }
3879
+
3880
+ .tds-date-picker-calendar{
3881
+ inline-size:-moz-fit-content;
3882
+ inline-size:fit-content;
3883
+ }
3884
+
3885
+ .tds-date-picker-calendar-header{
3886
+ display:flex;
3887
+ align-items:center;
3888
+ justify-content:space-between;
3889
+ padding-block-end:var(--t-spacing-1);
3890
+ }
3891
+
3892
+ .tds-date-picker-calendar-title{
3893
+ flex:1;
3894
+ margin:0;
3895
+ font-size:var(--t-font-size-md);
3896
+ font-weight:var(--t-font-weight-semibold);
3897
+ text-align:center;
3898
+ }
3899
+
3900
+ .tds-date-picker-calendar-nav{
3901
+ display:flex;
3902
+ align-items:center;
3903
+ justify-content:center;
3904
+ padding:var(--t-spacing-half);
3905
+ color:var(--t-text-color);
3906
+ cursor:default;
3907
+ outline:0;
3908
+ background:transparent;
3909
+ border:0;
3910
+ border-radius:var(--t-border-radius-sm);
3911
+ }
3912
+
3913
+ .tds-date-picker-calendar-nav[data-hovered]{
3914
+ background:var(--t-fill-color-neutral-070);
3915
+ }
3916
+
3917
+ .tds-date-picker-calendar-nav[data-pressed]{
3918
+ background:var(--t-fill-color-button-interaction-ghost-active);
3919
+ }
3920
+
3921
+ .tds-date-picker-calendar-nav[data-focus-visible]{
3922
+ outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
3923
+ outline-offset:var(--t-focus-ring-offset);
3924
+ }
3925
+
3926
+ .tds-date-picker-calendar-nav[data-disabled]{
3927
+ color:var(--t-form-color-disabled);
3928
+ cursor:not-allowed;
3929
+ }
3930
+
3931
+ .tds-date-picker-calendar-grid{
3932
+ border-collapse:collapse;
3933
+ }
3934
+
3935
+ .tds-date-picker-calendar-header-cell{
3936
+ padding-block:var(--t-spacing-half);
3937
+ font-size:var(--t-font-size-sm);
3938
+ font-weight:var(--t-font-weight-normal);
3939
+ color:var(--t-text-color-secondary);
3940
+ text-align:center;
3941
+ }
3942
+
3943
+ .tds-date-picker-calendar-cell{
3944
+ display:flex;
3945
+ align-items:center;
3946
+ justify-content:center;
3947
+ inline-size:2.25rem;
3948
+ block-size:2.25rem;
3949
+ font-size:var(--t-font-size-md);
3950
+ color:var(--t-text-color);
3951
+ cursor:default;
3952
+ outline:0;
3953
+ border-radius:var(--t-border-radius-sm);
3954
+ }
3955
+
3956
+ .tds-date-picker-calendar-cell[data-hovered]{
3957
+ background:var(--t-fill-color-neutral-070);
3958
+ }
3959
+
3960
+ .tds-date-picker-calendar-cell[data-pressed]{
3961
+ background:var(--t-fill-color-button-interaction-ghost-active);
3962
+ }
3963
+
3964
+ .tds-date-picker-calendar-cell[data-selected]{
3965
+ color:var(--t-text-color-inverted);
3966
+ background:var(--t-fill-color-interaction);
3967
+ }
3968
+
3969
+ .tds-date-picker-calendar-cell[data-focus-visible]{
3970
+ outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
3971
+ outline-offset:var(--t-focus-ring-offset);
3972
+ }
3973
+
3974
+ .tds-date-picker-calendar-cell[data-unavailable]{
3975
+ color:var(--t-text-color-secondary);
3976
+ text-decoration:line-through;
3977
+ cursor:not-allowed;
3978
+ }
3979
+
3980
+ .tds-date-picker-calendar-cell[data-disabled]{
3981
+ color:var(--t-form-color-disabled);
3982
+ cursor:not-allowed;
3983
+ }
3984
+
3985
+ .tds-date-picker-calendar-cell[data-outside-month]{
3986
+ color:var(--t-text-color-secondary);
3987
+ }
3988
+
3832
3989
  .tds-number-stepper{
3833
3990
  --tds-number-stepper-border-color:var(--t-form-border-color);
3834
3991
  --tds-number-stepper-border-color-hover:var(--t-form-border-color-hover);
@@ -3982,19 +4139,18 @@ a[class="tds-btn"]{
3982
4139
  line-height:1.35;
3983
4140
  }
3984
4141
 
3985
- .tds-date-picker{
3986
- --tds-date-picker-border-color:var(--t-form-border-color);
3987
- --tds-date-picker-border-color-hover:var(--t-form-border-color-hover);
3988
- --tds-date-picker-border-color-active:var(--t-form-border-color-focus);
3989
- --tds-date-picker-background-color:var(--t-form-background-color);
3990
- --tds-date-picker-color:var(--t-form-color);
3991
- --tds-date-picker-placeholder-color:var(--t-form-placeholder-color);
3992
- --tds-date-picker-font-size:var(--t-font-size-md);
3993
- --tds-date-picker-min-height:var(--t-container-size-md);
3994
- --tds-date-picker-padding-block:6px;
3995
- --tds-date-picker-button-offset:4px;
3996
- --tds-date-picker-description-color:var(--t-text-color-secondary);
3997
- --tds-date-picker-description-invalid-icon-display:none;
4142
+ .tds-time-field{
4143
+ --tds-time-field-border-color:var(--t-form-border-color);
4144
+ --tds-time-field-border-color-hover:var(--t-form-border-color-hover);
4145
+ --tds-time-field-border-color-active:var(--t-form-border-color-focus);
4146
+ --tds-time-field-background-color:var(--t-form-background-color);
4147
+ --tds-time-field-color:var(--t-form-color);
4148
+ --tds-time-field-placeholder-color:var(--t-form-placeholder-color);
4149
+ --tds-time-field-font-size:var(--t-font-size-md);
4150
+ --tds-time-field-min-height:var(--t-container-size-md);
4151
+ --tds-time-field-padding-block:6px;
4152
+ --tds-time-field-description-color:var(--t-text-color-secondary);
4153
+ --tds-time-field-description-invalid-icon-display:none;
3998
4154
 
3999
4155
  position:relative;
4000
4156
  display:flex;
@@ -4002,291 +4158,135 @@ a[class="tds-btn"]{
4002
4158
  gap:var(--t-spacing-half);
4003
4159
  }
4004
4160
 
4005
- .tds-date-picker[data-required] .tds-date-picker-label::after{
4161
+ .tds-time-field[data-required] .tds-time-field-label::after{
4006
4162
  margin-left:.25ch;
4007
4163
  color:var(--t-text-color-status-error);
4008
4164
  content:"*";
4009
4165
  }
4010
4166
 
4011
- .tds-date-picker[data-invalid]{
4012
- --tds-date-picker-border-color:var(--t-form-border-color-error);
4013
- --tds-date-picker-border-color-hover:var(--t-form-border-color-error-hover);
4014
- --tds-date-picker-border-color-active:var(--t-form-border-color-error-hover);
4015
- --tds-date-picker-background-color:var(--t-form-background-color-error);
4016
- --tds-date-picker-description-color:var(--t-text-color-status-error);
4017
- --tds-date-picker-description-invalid-icon-display:inline-block;
4167
+ .tds-time-field[data-invalid]{
4168
+ --tds-time-field-border-color:var(--t-form-border-color-error);
4169
+ --tds-time-field-border-color-hover:var(--t-form-border-color-error-hover);
4170
+ --tds-time-field-border-color-active:var(--t-form-border-color-error-hover);
4171
+ --tds-time-field-background-color:var(--t-form-background-color-error);
4172
+ --tds-time-field-description-color:var(--t-text-color-status-error);
4173
+ --tds-time-field-description-invalid-icon-display:inline-block;
4018
4174
  }
4019
4175
 
4020
- .tds-date-picker[data-disabled]{
4021
- --tds-date-picker-border-color:var(--t-form-border-color-disabled);
4022
- --tds-date-picker-background-color:var(--t-form-background-color-disabled);
4023
- --tds-date-picker-color:var(--t-form-color-disabled);
4024
- --tds-date-picker-placeholder-color:var(--t-form-color-disabled);
4176
+ .tds-time-field[data-disabled]{
4177
+ --tds-time-field-border-color:var(--t-form-border-color-disabled);
4178
+ --tds-time-field-background-color:var(--t-form-background-color-disabled);
4179
+ --tds-time-field-color:var(--t-form-color-disabled);
4180
+ --tds-time-field-placeholder-color:var(--t-form-color-disabled);
4025
4181
  }
4026
4182
 
4027
- .tds-date-picker[data-disabled] .tds-date-picker-field{
4183
+ .tds-time-field[data-disabled] .tds-time-field-label{
4184
+ color:var(--t-form-color-disabled);
4185
+ }
4186
+
4187
+ .tds-time-field[data-disabled] .tds-time-field-input{
4028
4188
  cursor:not-allowed;
4029
4189
  }
4030
4190
 
4031
- .tds-date-picker--lg{
4032
- --tds-date-picker-min-height:var(--t-container-size-lg);
4033
- --tds-date-picker-font-size:var(--t-font-size-lg);
4034
- --tds-date-picker-button-offset:5px;
4191
+ .tds-time-field--lg{
4192
+ --tds-time-field-min-height:var(--t-container-size-lg);
4193
+ --tds-time-field-font-size:var(--t-font-size-lg);
4035
4194
  }
4036
4195
 
4037
- .tds-date-picker-label{
4196
+ .tds-time-field-label{
4038
4197
  font-size:var(--t-font-size-md);
4039
4198
  font-weight:var(--t-font-weight-normal);
4040
4199
  color:var(--t-text-color);
4041
4200
  cursor:default;
4042
4201
  }
4043
4202
 
4044
- .tds-date-picker-field{
4203
+ .tds-time-field-input{
4045
4204
  display:flex;
4046
4205
  align-items:center;
4047
4206
  inline-size:100%;
4048
- min-block-size:var(--tds-date-picker-min-height);
4207
+ min-block-size:var(--tds-time-field-min-height);
4208
+ padding-block:var(--tds-time-field-padding-block);
4209
+ padding-inline:var(--t-spacing-1);
4049
4210
  font-family:inherit;
4050
- font-size:var(--tds-date-picker-font-size);
4211
+ font-size:var(--tds-time-field-font-size);
4212
+ font-variant-numeric:tabular-nums;
4051
4213
  line-height:1;
4052
- color:var(--tds-date-picker-color);
4053
- -webkit-appearance:none;
4054
- -moz-appearance:none;
4055
- appearance:none;
4214
+ color:var(--tds-time-field-color);
4056
4215
  cursor:text;
4057
4216
  outline:var(--t-focus-ring-width) solid transparent;
4058
4217
  outline-offset:0;
4059
- background-color:var(--tds-date-picker-background-color);
4060
- border:var(--t-form-border-width) solid var(--tds-date-picker-border-color);
4218
+ background-color:var(--tds-time-field-background-color);
4219
+ border:var(--t-form-border-width) solid var(--tds-time-field-border-color);
4061
4220
  border-radius:var(--t-form-border-radius);
4062
4221
  }
4063
4222
 
4064
- .tds-date-picker-field[data-hovered]:not([data-focus-visible],[data-focus-within],[data-disabled]){
4065
- border-color:var(--tds-date-picker-border-color-hover);
4223
+ .tds-time-field-input[data-hovered]:not([data-focus-visible],[data-focused],[data-disabled]){
4224
+ border-color:var(--tds-time-field-border-color-hover);
4066
4225
  }
4067
4226
 
4068
- .tds-date-picker-field[data-focus-within]{
4227
+ .tds-time-field-input[data-focus-within]{
4069
4228
  outline-color:var(--t-focus-ring-color);
4070
4229
  outline-offset:var(--t-focus-ring-offset);
4071
- border-color:var(--tds-date-picker-border-color-active);
4230
+ border-color:var(--tds-time-field-border-color-active);
4072
4231
  }
4073
4232
 
4074
- .tds-date-picker-field:has(.tds-date-picker-input[data-readonly]){
4233
+ .tds-time-field-input[data-readonly]{
4075
4234
  color:var(--t-form-color-readonly);
4076
4235
  background-color:var(--t-form-background-color-readonly);
4077
4236
  border-color:var(--t-form-border-color-readonly);
4078
4237
  }
4079
4238
 
4080
- .tds-date-picker-field[data-hovered]:has(.tds-date-picker-input[data-readonly]){
4239
+ .tds-time-field-input[data-readonly][data-hovered]{
4081
4240
  border-color:var(--t-form-border-color-readonly);
4082
4241
  }
4083
4242
 
4084
- .tds-date-picker-field[data-focus-within]:has(.tds-date-picker-input[data-readonly]){
4243
+ .tds-time-field-input[data-readonly][data-focus-within]{
4085
4244
  outline-color:var(--t-focus-ring-color);
4086
4245
  outline-offset:var(--t-focus-ring-offset);
4087
4246
  border-color:var(--t-form-border-color-hover);
4088
4247
  }
4089
4248
 
4090
- .tds-date-picker-input{
4091
- flex:1;
4092
- padding-block:var(--tds-date-picker-padding-block);
4093
- padding-inline-start:var(--t-spacing-1);
4249
+ .tds-time-field-segment{
4250
+ padding-inline:1px;
4094
4251
  font-variant-numeric:tabular-nums;
4095
- }
4096
-
4097
- .tds-date-picker-segment{
4098
- padding-inline:2px;
4252
+ cursor:text;
4099
4253
  caret-color:transparent;
4100
4254
  border-radius:var(--t-border-radius-sm);
4101
4255
  }
4102
4256
 
4103
- .tds-date-picker-segment[data-placeholder]{
4104
- color:var(--tds-date-picker-placeholder-color);
4257
+ .tds-time-field-segment[data-placeholder]{
4258
+ color:var(--tds-time-field-placeholder-color);
4105
4259
  }
4106
4260
 
4107
- .tds-date-picker-segment[data-focused]{
4261
+ .tds-time-field-segment[data-focused]{
4108
4262
  color:var(--t-text-color-inverted);
4109
4263
  outline:0;
4110
4264
  background:var(--t-fill-color-interaction);
4111
4265
  }
4112
4266
 
4113
- .tds-date-picker-segment-separator{
4267
+ .tds-time-field-segment-separator{
4114
4268
  padding-inline:0;
4115
- color:var(--tds-date-picker-placeholder-color);
4269
+ color:var(--tds-time-field-placeholder-color);
4116
4270
  }
4117
4271
 
4118
- .tds-date-picker-description{
4272
+ .tds-time-field-description{
4119
4273
  display:flex;
4120
4274
  gap:var(--t-spacing-half);
4121
4275
  align-items:flex-start;
4122
4276
  margin:0;
4123
4277
  font-size:var(--t-font-size-sm);
4124
4278
  line-height:1.35;
4125
- color:var(--tds-date-picker-description-color, var(--t-text-color-secondary));
4279
+ color:var(--tds-time-field-description-color, var(--t-text-color-secondary));
4126
4280
  cursor:text;
4127
4281
  }
4128
4282
 
4129
- .tds-date-picker-description .tds-date-picker-description-invalid-icon{
4130
- display:var(--tds-date-picker-description-invalid-icon-display, none);
4283
+ .tds-time-field-description .tds-time-field-description-invalid-icon{
4284
+ display:var(--tds-time-field-description-invalid-icon-display, none);
4131
4285
  flex-shrink:0;
4132
4286
  margin-block-start:calc(.5lh - .5em);
4133
4287
  line-height:1.35;
4134
4288
  }
4135
4289
 
4136
- .tds-date-picker-button{
4137
- flex-shrink:0;
4138
- align-self:center;
4139
- inline-size:calc(var(--tds-date-picker-min-height) - (var(--tds-date-picker-button-offset) * 2));
4140
- block-size:calc(var(--tds-date-picker-min-height) - (var(--tds-date-picker-button-offset) * 2));
4141
- padding:0;
4142
- margin-inline-end:var(--tds-date-picker-button-offset);
4143
- }
4144
-
4145
- .tds-date-picker-popover{
4146
- padding:var(--t-spacing-2);
4147
- background:var(--t-surface-color-card);
4148
- border:1px solid var(--t-border-color);
4149
- border-radius:var(--t-border-radius);
4150
- box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
4151
- }
4152
-
4153
- .tds-date-picker-popover[data-entering]{
4154
- animation:tds-date-picker-popover-enter 160ms ease;
4155
- }
4156
-
4157
- .tds-date-picker-popover[data-exiting]{
4158
- animation:tds-date-picker-popover-exit 130ms ease;
4159
- }
4160
-
4161
- @keyframes tds-date-picker-popover-enter{
4162
- from{
4163
- opacity:0;
4164
- transform:translateY(-8px);
4165
- }
4166
- }
4167
-
4168
- @keyframes tds-date-picker-popover-exit{
4169
- to{
4170
- opacity:0;
4171
- transform:translateY(-8px);
4172
- }
4173
- }
4174
-
4175
- @media (prefers-reduced-motion: reduce){
4176
- .tds-date-picker-popover[data-entering],.tds-date-picker-popover[data-exiting]{
4177
- animation:none;
4178
- }
4179
- }
4180
-
4181
- .tds-date-picker-calendar{
4182
- inline-size:-moz-fit-content;
4183
- inline-size:fit-content;
4184
- }
4185
-
4186
- .tds-date-picker-calendar-header{
4187
- display:flex;
4188
- align-items:center;
4189
- justify-content:space-between;
4190
- padding-block-end:var(--t-spacing-1);
4191
- }
4192
-
4193
- .tds-date-picker-calendar-title{
4194
- flex:1;
4195
- margin:0;
4196
- font-size:var(--t-font-size-md);
4197
- font-weight:var(--t-font-weight-semibold);
4198
- text-align:center;
4199
- }
4200
-
4201
- .tds-date-picker-calendar-nav{
4202
- display:flex;
4203
- align-items:center;
4204
- justify-content:center;
4205
- padding:var(--t-spacing-half);
4206
- color:var(--t-text-color);
4207
- cursor:default;
4208
- outline:0;
4209
- background:transparent;
4210
- border:0;
4211
- border-radius:var(--t-border-radius-sm);
4212
- }
4213
-
4214
- .tds-date-picker-calendar-nav[data-hovered]{
4215
- background:var(--t-fill-color-neutral-070);
4216
- }
4217
-
4218
- .tds-date-picker-calendar-nav[data-pressed]{
4219
- background:var(--t-fill-color-button-interaction-ghost-active);
4220
- }
4221
-
4222
- .tds-date-picker-calendar-nav[data-focus-visible]{
4223
- outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
4224
- outline-offset:var(--t-focus-ring-offset);
4225
- }
4226
-
4227
- .tds-date-picker-calendar-nav[data-disabled]{
4228
- color:var(--t-form-color-disabled);
4229
- cursor:not-allowed;
4230
- }
4231
-
4232
- .tds-date-picker-calendar-grid{
4233
- border-collapse:collapse;
4234
- }
4235
-
4236
- .tds-date-picker-calendar-header-cell{
4237
- padding-block:var(--t-spacing-half);
4238
- font-size:var(--t-font-size-sm);
4239
- font-weight:var(--t-font-weight-normal);
4240
- color:var(--t-text-color-secondary);
4241
- text-align:center;
4242
- }
4243
-
4244
- .tds-date-picker-calendar-cell{
4245
- display:flex;
4246
- align-items:center;
4247
- justify-content:center;
4248
- inline-size:2.25rem;
4249
- block-size:2.25rem;
4250
- font-size:var(--t-font-size-md);
4251
- color:var(--t-text-color);
4252
- cursor:default;
4253
- outline:0;
4254
- border-radius:var(--t-border-radius-sm);
4255
- }
4256
-
4257
- .tds-date-picker-calendar-cell[data-hovered]{
4258
- background:var(--t-fill-color-neutral-070);
4259
- }
4260
-
4261
- .tds-date-picker-calendar-cell[data-pressed]{
4262
- background:var(--t-fill-color-button-interaction-ghost-active);
4263
- }
4264
-
4265
- .tds-date-picker-calendar-cell[data-selected]{
4266
- color:var(--t-text-color-inverted);
4267
- background:var(--t-fill-color-interaction);
4268
- }
4269
-
4270
- .tds-date-picker-calendar-cell[data-focus-visible]{
4271
- outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
4272
- outline-offset:var(--t-focus-ring-offset);
4273
- }
4274
-
4275
- .tds-date-picker-calendar-cell[data-unavailable]{
4276
- color:var(--t-text-color-secondary);
4277
- text-decoration:line-through;
4278
- cursor:not-allowed;
4279
- }
4280
-
4281
- .tds-date-picker-calendar-cell[data-disabled]{
4282
- color:var(--t-form-color-disabled);
4283
- cursor:not-allowed;
4284
- }
4285
-
4286
- .tds-date-picker-calendar-cell[data-outside-month]{
4287
- color:var(--t-text-color-secondary);
4288
- }
4289
-
4290
4290
  .t-banner{
4291
4291
  --t-banner-font-size:var(--t-font-size-md);
4292
4292
  --t-banner-font-color:var(--t-text-color);