@planningcenter/tapestry 3.2.3-rc.4 → 3.2.3-rc.5

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 (11) hide show
  1. package/dist/components/combo-box/ComboBox.d.ts +4 -2
  2. package/dist/components/combo-box/ComboBox.d.ts.map +1 -1
  3. package/dist/components/combo-box/ComboBox.js +5 -3
  4. package/dist/components/combo-box/ComboBox.js.map +1 -1
  5. package/dist/reactRender.css +1347 -1340
  6. package/dist/reactRender.css.map +1 -1
  7. package/dist/reactRenderLegacy.css +1347 -1340
  8. package/dist/reactRenderLegacy.css.map +1 -1
  9. package/dist/unstable.css +7 -0
  10. package/dist/unstable.css.map +1 -1
  11. package/package.json +2 -2
package/dist/reactRender.css CHANGED
@@ -1,195 +1,264 @@
1
- .tds-checkbox{
2
- --tds-checkbox-font-size:var(--t-font-size-md);
3
- --tds-checkbox-cursor:pointer;
4
- --tds-checkbox-line-height:1.4;
5
- --tds-checkbox-transition-property:background-color, border-color;
6
-
7
- --tds-checkbox-input-size:var(--t-element-size-md);
8
- --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
9
- --tds-checkbox-input-border-color:var(--t-form-border-color);
10
- --tds-checkbox-input-background-color:transparent;
1
+ @layer t-critical{
2
+ tds-page-header:not(.hydrated){
3
+ display:none;
4
+ }
5
+ }
11
6
 
12
- --tds-checkbox-input-icon:none;
13
- --tds-checkbox-input-icon-visibility:hidden;
14
- --tds-checkbox-input-icon-opacity:0;
15
- --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
7
+ @layer t-component{
8
+ .tds-page-header{
9
+ --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
10
+ --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
11
+ --tds-page-header-color:var(--t-text-color);
12
+ --tds-page-header-bottom-border-color:var(--t-surface-color-canvas);
13
+ --tds-page-header-headline-color:var(--t-text-color-headline);
14
+ --tds-page-header-headline-font-size:var(--t-font-size-2xl);
15
+ --tds-page-header-padding-x:var(--t-spacing-2);
16
+ --tds-page-header-padding-y:var(--t-spacing-2);
17
+ --tds-page-header-nav-padding-x:var(--tds-page-header-padding-x, var(--t-spacing-3));
18
+ --tds-page-header-nav-gap:var(--t-spacing-1);
19
+ --tds-page-header-nav-background:linear-gradient(180deg, var(--tds-page-header-nav-background-start, rgba(0, 0, 0, 0)) 0%, var(--tds-page-header-nav-background-end, rgba(0, 0, 0, .1)) 100%);
20
+ --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
21
+ --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
22
+ --tds-page-header-nav-item-color:var(--t-text-color-secondary);
23
+ --tds-page-header-nav-item-background-color:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 35%);
24
+ --tds-page-header-nav-item-border-width:1px;
16
25
 
17
- --tds-checkbox-label-color:var(--t-form-color);
26
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
27
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-bottom-border-color);
18
28
 
19
- --tds-checkbox-description-font-size:var(--t-font-size-sm);
20
- --tds-checkbox-description-line-height:1.35;
21
- --tds-checkbox-description-color:var(--t-text-color-secondary);
22
- --tds-checkbox-description-invalid-icon-display:none;
29
+ --tds-page-header-nav-item-color-hover:var(--t-text-color);
30
+ --tds-page-header-nav-item-background-color-hover:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 20%);
31
+ --tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
23
32
 
24
- position:relative;
25
- display:inline-grid;
26
- grid-template-columns:auto;
27
- grid-auto-columns:1fr;
28
- gap:var(--t-spacing-fourth) var(--t-spacing-1);
29
- line-height:var(--tds-checkbox-line-height);
30
- cursor:var(--tds-checkbox-cursor);
31
- -webkit-user-select:none;
32
- -moz-user-select:none;
33
- user-select:none;
34
- }
33
+ --tds-page-header-nav-item-background-color-active:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 10%);
34
+ --tds-page-header-nav-item-border-color-active:var(--tds-page-header-nav-item-background-color-active);
35
35
 
36
- .tds-checkbox label{
37
- grid-area:1 / 2;
38
- font-size:var(--tds-checkbox-font-size);
39
- font-weight:var(--t-font-weight-normal);
40
- color:var(--tds-checkbox-label-color);
41
- cursor:var(--tds-checkbox-cursor);
42
- }
36
+ --tds-page-header-nav-item-color-disabled:var(--t-text-color-disabled);
37
+ --tds-page-header-nav-item-background-color-disabled:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 50%);
38
+ --tds-page-header-nav-item-border-color-disabled:var(--tds-page-header-nav-item-background-color-disabled);
43
39
 
44
- .tds-checkbox tds-indeterminate{
45
- display:flex;
40
+ --tds-page-header-nav-item-color-selected:var(--t-text-color);
41
+ --tds-page-header-nav-item-background-color-selected:var(--t-surface-color-canvas);
42
+ --tds-page-header-nav-item-border-color-selected:var(--tds-page-header-nav-item-background-color-selected);
43
+ --tds-page-header-nav-item-border-bottom-color-selected:var(--tds-page-header-nav-item-background-color-selected);
44
+ --tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning);
46
45
  }
47
46
 
48
- .tds-checkbox input[type="checkbox"]{
49
- position:relative;
50
- width:1em;
51
- height:1em;
52
- margin:calc((1lh - 1em) / 2) 0 0;
53
- font-size:var(--tds-checkbox-font-size);
54
- line-height:inherit;
55
- -webkit-appearance:none;
56
- -moz-appearance:none;
57
- appearance:none;
58
- cursor:var(--tds-checkbox-cursor);
59
- background-color:var(--tds-checkbox-input-background-color);
60
- border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
61
- border-radius:var(--tds-checkbox-input-border-radius);
62
- transition-timing-function:var(--t-ease-in-out);
63
- transition-duration:var(--t-duration-200);
64
- transition-property:var(--tds-checkbox-transition-property);
47
+ .tds-page-header--profile{
48
+ --tds-page-header-padding-y:20px;
65
49
  }
66
50
 
67
- :is(.tds-checkbox input[type="checkbox"])::before{
68
- position:absolute;
69
- top:50%;
70
- left:50%;
71
- visibility:var(--tds-checkbox-input-icon-visibility);
72
- width:100%;
73
- height:100%;
74
- content:"";
75
- background-color:var(--tds-checkbox-input-icon-fill);
76
- border-radius:var(--tds-checkbox-input-border-radius);
77
- opacity:var(--tds-checkbox-input-icon-opacity);
78
- -webkit-mask-image:var(--tds-checkbox-input-icon);
79
- mask-image:var(--tds-checkbox-input-icon);
80
- -webkit-mask-repeat:no-repeat;
81
- mask-repeat:no-repeat;
82
- -webkit-mask-size:contain;
83
- mask-size:contain;
84
- transform:translate(-50%, -50%);
85
- }
86
-
87
- :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
88
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
89
- --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
90
- }
91
-
92
- :is(.tds-checkbox input[type="checkbox"]):focus-visible{
93
- outline:var(--t-focus-ring-outline);
94
- outline-offset:var(--t-focus-ring-offset);
51
+ @supports (color: light-dark(#fff, #000)){
52
+ .tds-page-header{
53
+ --tds-page-header-nav-background-start:light-dark(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0));
54
+ --tds-page-header-nav-background-end:light-dark(rgba(0, 0, 0, .05), rgba(255, 255, 255, .1));
95
55
  }
56
+ }
96
57
 
97
- :is(.tds-checkbox input[type="checkbox"]):disabled{
98
- pointer-events:none;
58
+ @media (min-width: 600px){
59
+ .tds-page-header{
60
+ --tds-page-header-background-color:var(--t-surface-color-canvas);
61
+ --tds-page-header-color:var(--t-text-color-secondary);
62
+ --tds-page-header-bottom-border-color:var(--t-border-color);
63
+ --tds-page-header-padding-x:var(--t-spacing-3);
64
+ --tds-page-header-headline-font-size:var(--t-font-size-3xl);
65
+ --tds-page-header-nav-gap:var(--t-spacing-half);
66
+ --tds-page-header-nav-background:transparent;
67
+ --tds-page-header-nav-item-padding-x:var(--t-spacing-2);
68
+ --tds-page-header-nav-item-border-width:1px;
69
+ --tds-page-header-nav-item-color:var(--t-text-color);
70
+ --tds-page-header-nav-item-background-color:var(--t-fill-color-neutral-070);
71
+ --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-060);
72
+ --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-050);
73
+ --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
74
+ --tds-page-header-nav-item-border-color-selected:var(--t-border-color);
99
75
  }
100
-
101
- @media (prefers-reduced-motion: reduce){
102
-
103
- .tds-checkbox input[type="checkbox"]{
104
- --tds-checkbox-transition-property:none;
105
76
  }
106
- }
77
+ }
107
78
 
108
- .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
109
- --tds-checkbox-input-background-color:var(--t-fill-color-control);
110
- --tds-checkbox-input-border-color:var(--t-border-color-control-info);
111
- --tds-checkbox-input-icon-visibility:visible;
112
- --tds-checkbox-input-icon-opacity:1;
113
- }
79
+ .tds-page-header{
80
+ display:flex;
81
+ flex-direction:column;
82
+ padding-top:var(--tds-page-header-padding-y);
83
+ color:var(--tds-page-header-color);
84
+ background:var(--tds-page-header-background-color);
85
+ border-bottom:1px solid var(--tds-page-header-bottom-border-color);
86
+ }
114
87
 
115
- :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
116
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
117
- --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
118
- }
88
+ .tds-page-header:not(.has-nav){
89
+ padding-bottom:var(--tds-page-header-padding-y);
90
+ }
119
91
 
120
- .tds-checkbox:has(input:checked){
121
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
92
+ .tds-page-header.inactive{
93
+ background:var(--tds-page-header-background-color-inactive);
122
94
  }
123
95
 
124
- .tds-checkbox:has(input:indeterminate){
125
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
96
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
97
+ width:100%;
126
98
  }
127
99
 
128
- .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
129
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
130
- --tds-checkbox-description-color:var(--t-text-color-status-error);
131
- --tds-checkbox-description-invalid-icon-display:inline-block;
100
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
101
+ display:flex;
102
+ flex-flow:row wrap;
103
+ gap:var(--t-spacing-half) var(--t-spacing-1);
104
+ align-items:flex-start;
105
+ justify-content:flex-start;
106
+ min-width:0;
132
107
  }
133
108
 
134
- :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
135
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
136
- --tds-checkbox-input-background-color:var(--t-form-background-color-error);
109
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)):not(:has(ul)),:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) ul{
110
+ display:flex;
111
+ gap:var(--tds-page-header-nav-gap);
112
+ padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
113
+ margin:0 0 -1px;
114
+ overflow:auto;
115
+ list-style:none;
116
+ background:var(--tds-page-header-nav-background);
137
117
  }
138
118
 
139
- :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:checked,:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:indeterminate{
140
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
141
- --tds-checkbox-input-background-color:var(--t-form-border-color-error);
119
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button){
120
+ position:relative;
121
+ display:inline-flex;
122
+ padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
123
+ font-size:var(--t-font-size-sm);
124
+ line-height:22px;
125
+ color:var(--tds-page-header-nav-item-color);
126
+ white-space:nowrap;
127
+ text-decoration:none;
128
+ -webkit-appearance:none;
129
+ -moz-appearance:none;
130
+ appearance:none;
131
+ cursor:pointer;
132
+ outline-offset:-2px;
133
+ background-color:var(--tds-page-header-nav-item-background-color);
134
+ background-clip:padding-box;
135
+ border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
136
+ border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
137
+ border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
142
138
  }
143
139
 
144
- :is(:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:checked,:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:indeterminate):hover:not(:disabled){
145
- --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
146
- --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
140
+ .selected:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)){
141
+ --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-selected);
142
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-selected);
143
+ --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-selected);
144
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-selected);
147
145
  }
148
146
 
149
- .tds-checkbox:has(input:required) label::after{
150
- margin-left:.25ch;
151
- color:var(--t-text-color-status-error);
152
- content:"*";
153
- }
147
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):hover{
148
+ --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
149
+ --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
150
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
151
+ }
154
152
 
155
- .tds-checkbox:has(input:disabled){
156
- --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
157
- --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
153
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):active{
154
+ background-color:var(--tds-page-header-nav-item-background-color-active);
155
+ border-color:var(--tds-page-header-nav-item-border-color-active);
156
+ }
158
157
 
159
- --tds-checkbox-label-color:var(--t-form-color-disabled);
160
- --tds-checkbox-description-color:var(--t-form-color-disabled);
161
- --tds-checkbox-cursor:not-allowed;
162
- }
158
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):disabled{
159
+ color:var(--tds-page-header-nav-item-color-disabled);
160
+ cursor:not-allowed;
161
+ background-color:var(--tds-page-header-nav-item-background-color-disabled);
162
+ opacity:1;
163
+ }
163
164
 
164
- .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
165
- --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
165
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
166
+ position:relative;
166
167
  }
167
168
 
168
- .tds-checkbox-description{
169
+ :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{
169
192
  display:flex;
170
- grid-area:2 / 2;
171
- gap:var(--t-spacing-half);
193
+ flex-direction:column;
194
+ gap:var(--t-spacing-2) var(--t-spacing-1);
172
195
  align-items:flex-start;
173
- margin:0;
174
- font-size:var(--tds-checkbox-description-font-size);
175
- line-height:var(--tds-checkbox-description-line-height);
176
- color:var(--tds-checkbox-description-color);
177
- cursor:text;
196
+ justify-content:space-between;
197
+ padding:0 var(--tds-page-header-padding-x);
178
198
  }
179
199
 
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);
200
+ .tds-page-header--profile > .tds-page-header__title-bar{
201
+ align-items:center;
185
202
  }
186
203
 
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;
204
+ .tds-page-header__primary{
205
+ width:100%;
206
+ }
207
+
208
+ .tds-page-header__primary h1{
209
+ margin:0;
210
+ font-size:var(--tds-page-header-headline-font-size);
211
+ font-weight:var(--t-font-weight-normal);
212
+ line-height:32px;
213
+ color:var(--tds-page-header-headline-color);
214
+ overflow-wrap:break-word;
215
+ }
216
+
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%;
223
+ }
224
+
225
+ .tds-page-header__title-bar,
226
+ .tds-page-header--profile .tds-page-header__title-bar{
227
+ flex-flow:row nowrap;
228
+ row-gap:12px;
229
+ align-items:flex-start;
230
+ }
231
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
232
+ width:auto;
233
+ }
234
+
235
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
236
+ justify-content:flex-end;
237
+ }
238
+ }
239
+
240
+ .tds-page-header-phone,
241
+ .tds-page-header-email{
242
+ color:var(--tds-page-header-color);
243
+ white-space:nowrap;
244
+ }
245
+
246
+ .tds-page-header-email{
247
+ max-width:100%;
248
+ overflow:hidden;
249
+ text-overflow:ellipsis;
250
+ }
251
+
252
+ @keyframes indicator-pulse{
253
+ 0%{
254
+ opacity:.3;
255
+ transform:scale(.9);
256
+ }
257
+
258
+ 100%{
259
+ opacity:0;
260
+ transform:scale(1.75);
261
+ }
193
262
  }
194
263
 
195
264
 
@@ -578,111 +647,332 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
578
647
  }
579
648
  }
580
649
 
581
- .tds-input:has(textarea){
582
- --tds-input-padding-block:6px;
583
- --tds-input-resizer-size:var(--t-element-size-sm);
584
- --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");
585
- }
650
+ .tds-checkbox{
651
+ --tds-checkbox-font-size:var(--t-font-size-md);
652
+ --tds-checkbox-cursor:pointer;
653
+ --tds-checkbox-line-height:1.4;
654
+ --tds-checkbox-transition-property:background-color, border-color;
586
655
 
587
- @supports (x: attr(x type(*))){
656
+ --tds-checkbox-input-size:var(--t-element-size-md);
657
+ --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
658
+ --tds-checkbox-input-border-color:var(--t-form-border-color);
659
+ --tds-checkbox-input-background-color:transparent;
588
660
 
589
- .tds-input:has(textarea){
590
- --tds-input-min-height:calc((attr(rows type(<number>), 3) * 1lh) + (var(--tds-input-padding-block) * 2) + 2px);
661
+ --tds-checkbox-input-icon:none;
662
+ --tds-checkbox-input-icon-visibility:hidden;
663
+ --tds-checkbox-input-icon-opacity:0;
664
+ --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
665
+
666
+ --tds-checkbox-label-color:var(--t-form-color);
667
+
668
+ --tds-checkbox-description-font-size:var(--t-font-size-sm);
669
+ --tds-checkbox-description-line-height:1.35;
670
+ --tds-checkbox-description-color:var(--t-text-color-secondary);
671
+ --tds-checkbox-description-invalid-icon-display:none;
672
+
673
+ position:relative;
674
+ display:inline-grid;
675
+ grid-template-columns:auto;
676
+ grid-auto-columns:1fr;
677
+ gap:var(--t-spacing-fourth) var(--t-spacing-1);
678
+ line-height:var(--tds-checkbox-line-height);
679
+ cursor:var(--tds-checkbox-cursor);
680
+ -webkit-user-select:none;
681
+ -moz-user-select:none;
682
+ user-select:none;
591
683
  }
684
+
685
+ .tds-checkbox label{
686
+ grid-area:1 / 2;
687
+ font-size:var(--tds-checkbox-font-size);
688
+ font-weight:var(--t-font-weight-normal);
689
+ color:var(--tds-checkbox-label-color);
690
+ cursor:var(--tds-checkbox-cursor);
592
691
  }
593
692
 
594
- .tds-input.tds-textarea--resize-vertical textarea{
595
- resize:vertical;
596
- }
693
+ .tds-checkbox tds-indeterminate{
694
+ display:flex;
695
+ }
597
696
 
598
- .tds-input.tds-textarea--resize-none textarea{
599
- resize:none;
600
- }
697
+ .tds-checkbox input[type="checkbox"]{
698
+ position:relative;
699
+ width:1em;
700
+ height:1em;
701
+ margin:calc((1lh - 1em) / 2) 0 0;
702
+ font-size:var(--tds-checkbox-font-size);
703
+ line-height:inherit;
704
+ -webkit-appearance:none;
705
+ -moz-appearance:none;
706
+ appearance:none;
707
+ cursor:var(--tds-checkbox-cursor);
708
+ background-color:var(--tds-checkbox-input-background-color);
709
+ border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
710
+ border-radius:var(--tds-checkbox-input-border-radius);
711
+ transition-timing-function:var(--t-ease-in-out);
712
+ transition-duration:var(--t-duration-200);
713
+ transition-property:var(--tds-checkbox-transition-property);
714
+ }
601
715
 
602
- .tds-input.tds-textarea--resize-auto textarea{
603
- resize:vertical;
716
+ :is(.tds-checkbox input[type="checkbox"])::before{
717
+ position:absolute;
718
+ top:50%;
719
+ left:50%;
720
+ visibility:var(--tds-checkbox-input-icon-visibility);
721
+ width:100%;
722
+ height:100%;
723
+ content:"";
724
+ background-color:var(--tds-checkbox-input-icon-fill);
725
+ border-radius:var(--tds-checkbox-input-border-radius);
726
+ opacity:var(--tds-checkbox-input-icon-opacity);
727
+ -webkit-mask-image:var(--tds-checkbox-input-icon);
728
+ mask-image:var(--tds-checkbox-input-icon);
729
+ -webkit-mask-repeat:no-repeat;
730
+ mask-repeat:no-repeat;
731
+ -webkit-mask-size:contain;
732
+ mask-size:contain;
733
+ transform:translate(-50%, -50%);
604
734
  }
605
735
 
606
- @supports (field-sizing: content){
607
- .tds-input.tds-textarea--resize-auto textarea{
608
- field-sizing:content;
609
- resize:none;
610
- }
736
+ :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
737
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
738
+ --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
611
739
  }
612
740
 
613
- .tds-input textarea{
614
- --tds-input-scrollbar-thumb-color-default:var(--t-fill-color-neutral-040);
615
- --tds-input-scrollbar-thumb-color-hidden:transparent;
616
- --tds-input-scrollbar-thumb-color-hover:var(--t-fill-color-neutral-030);
617
- --tds-input-scrollbar-thumb-color-thumb-hover:var(--t-fill-color-neutral-020);
618
- --tds-input-scrollbar-thumb-color-thumb-active:var(--t-fill-color-neutral-010);
619
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-default);
620
- --tds-input-scrollbar-surface-color:rgba(0, 0, 0, 0);
621
- --tds-input-scrollbar-thumb-border-radius:999px;
622
- --tds-input-scrollbar-thumb-border-width:3px;
623
- --tds-input-scrollbar-track-margin-block:.125rem;
624
- scrollbar-color:initial;
625
- transition-timing-function:var(--t-ease-in-out);
626
- transition-duration:var(--t-duration-200);
627
- transition-property:var(--tds-input-transition-property), --tds-input-scrollbar-thumb-color;
628
- }
629
-
630
- @media (pointer: fine){
631
- :is(.tds-input textarea)::-webkit-scrollbar{
632
- width:12px;
633
- height:12px;
634
- cursor:default;
741
+ :is(.tds-checkbox input[type="checkbox"]):focus-visible{
742
+ outline:var(--t-focus-ring-outline);
743
+ outline-offset:var(--t-focus-ring-offset);
635
744
  }
636
745
 
637
- :is(.tds-input textarea)::-webkit-scrollbar-thumb{
638
- cursor:default;
639
- background:var(--tds-input-scrollbar-thumb-color);
640
- background-clip:content-box;
641
- border:var(--tds-input-scrollbar-thumb-border-width) solid var(--tds-input-scrollbar-surface-color);
642
- border-radius:var(--tds-input-scrollbar-thumb-border-radius);
746
+ :is(.tds-checkbox input[type="checkbox"]):disabled{
747
+ pointer-events:none;
643
748
  }
644
749
 
645
- :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
646
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
647
- }
750
+ @media (prefers-reduced-motion: reduce){
648
751
 
649
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
650
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
752
+ .tds-checkbox input[type="checkbox"]{
753
+ --tds-checkbox-transition-property:none;
754
+ }
651
755
  }
652
756
 
653
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
654
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
655
- }
757
+ .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
758
+ --tds-checkbox-input-background-color:var(--t-fill-color-control);
759
+ --tds-checkbox-input-border-color:var(--t-border-color-control-info);
760
+ --tds-checkbox-input-icon-visibility:visible;
761
+ --tds-checkbox-input-icon-opacity:1;
762
+ }
656
763
 
657
- :is(.tds-input textarea)::-webkit-scrollbar-corner{
658
- background:var(--tds-input-scrollbar-surface-color);
764
+ :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
765
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
766
+ --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
659
767
  }
660
768
 
661
- :is(.tds-input textarea)::-webkit-resizer{
662
- background:var(--tds-input-resizer-icon) no-repeat;
663
- background-position:right bottom;
664
- background-size:var(--tds-input-resizer-size) var(--tds-input-resizer-size);
769
+ .tds-checkbox:has(input:checked){
770
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
771
+ }
772
+
773
+ .tds-checkbox:has(input:indeterminate){
774
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
775
+ }
776
+
777
+ .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
778
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
779
+ --tds-checkbox-description-color:var(--t-text-color-status-error);
780
+ --tds-checkbox-description-invalid-icon-display:inline-block;
781
+ }
782
+
783
+ :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
784
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
785
+ --tds-checkbox-input-background-color:var(--t-form-background-color-error);
665
786
  }
666
787
 
667
- :is(.tds-input textarea)::-webkit-scrollbar-track{
668
- margin-block:var(--tds-input-scrollbar-track-margin-block);
669
- cursor:default;
788
+ :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{
789
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
790
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error);
670
791
  }
671
792
 
672
- @supports (-moz-appearance: none){
673
- :is(.tds-input textarea){
674
- scrollbar-color:var(--tds-input-scrollbar-thumb-color-default) var(--tds-input-scrollbar-surface-color);
675
- scrollbar-width:thin;
793
+ :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){
794
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
795
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
676
796
  }
677
797
 
678
- @media (hover){
679
- :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
680
- scrollbar-color:var(--tds-input-scrollbar-thumb-color-hover) var(--tds-input-scrollbar-surface-color);
681
- }
682
- }
798
+ .tds-checkbox:has(input:required) label::after{
799
+ margin-left:.25ch;
800
+ color:var(--t-text-color-status-error);
801
+ content:"*";
802
+ }
803
+
804
+ .tds-checkbox:has(input:disabled){
805
+ --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
806
+ --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
807
+
808
+ --tds-checkbox-label-color:var(--t-form-color-disabled);
809
+ --tds-checkbox-description-color:var(--t-form-color-disabled);
810
+ --tds-checkbox-cursor:not-allowed;
811
+ }
812
+
813
+ .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
814
+ --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
815
+ }
816
+
817
+ .tds-checkbox-description{
818
+ display:flex;
819
+ grid-area:2 / 2;
820
+ gap:var(--t-spacing-half);
821
+ align-items:flex-start;
822
+ margin:0;
823
+ font-size:var(--tds-checkbox-description-font-size);
824
+ line-height:var(--tds-checkbox-description-line-height);
825
+ color:var(--tds-checkbox-description-color);
826
+ cursor:text;
827
+ }
828
+
829
+ .tds-checkbox-description .tds-checkbox-description-invalid-icon{
830
+ display:var(--tds-checkbox-description-invalid-icon-display);
831
+ flex-shrink:0;
832
+ margin-top:calc(.5lh - .5em);
833
+ line-height:var(--tds-checkbox-description-line-height);
834
+ }
835
+
836
+ .tds-checkbox--sm{
837
+ --tds-checkbox-line-height:1.35;
838
+ --tds-checkbox-input-size:var(--t-element-size-sm);
839
+ --tds-checkbox-font-size:var(--t-font-size-sm);
840
+ --tds-checkbox-description-font-size:var(--t-font-size-xs);
841
+ --tds-checkbox-description-line-height:1.3;
842
+ }
843
+
844
+ .tds-radio{
845
+ --tds-radio-font-size:var(--t-font-size-md);
846
+ --tds-radio-cursor:pointer;
847
+ --tds-radio-line-height:1.4;
848
+ --tds-radio-transition-property:border-width;
849
+
850
+ --tds-radio-input-size:var(--t-element-size-md);
851
+ --tds-radio-input-border-radius:var(--t-border-radius-round);
852
+ --tds-radio-input-border-color:var(--t-form-border-color);
853
+ --tds-radio-input-border-width:var(--t-form-border-width);
854
+ --tds-radio-input-background-color:transparent;
855
+
856
+ --tds-radio-label-color:var(--t-form-color);
857
+
858
+ --tds-radio-description-font-size:var(--t-font-size-sm);
859
+ --tds-radio-description-line-height:1.35;
860
+ --tds-radio-description-color:var(--t-text-color-secondary);
861
+
862
+ position:relative;
863
+ display:inline-grid;
864
+ grid-template-columns:auto;
865
+ grid-auto-columns:1fr;
866
+ gap:var(--t-spacing-fourth) var(--t-spacing-1);
867
+ line-height:var(--tds-radio-line-height);
868
+ cursor:var(--tds-radio-cursor);
869
+ -webkit-user-select:none;
870
+ -moz-user-select:none;
871
+ user-select:none;
872
+ }
873
+
874
+ .tds-radio label{
875
+ grid-area:1 / 2;
876
+ font-size:var(--tds-radio-font-size);
877
+ font-weight:var(--t-font-weight-normal);
878
+ color:var(--tds-radio-label-color);
879
+ cursor:var(--tds-radio-cursor);
880
+ }
881
+
882
+ .tds-radio input[type="radio"]{
883
+ position:relative;
884
+ width:1em;
885
+ height:1em;
886
+ margin:calc((1lh - 1em) / 2) 0 0;
887
+ font-size:var(--tds-radio-font-size);
888
+ line-height:inherit;
889
+ -webkit-appearance:none;
890
+ -moz-appearance:none;
891
+ appearance:none;
892
+ cursor:var(--tds-radio-cursor);
893
+ background-color:var(--tds-radio-input-background-color);
894
+ border:var(--tds-radio-input-border-width) solid var(--tds-radio-input-border-color);
895
+ border-radius:var(--tds-radio-input-border-radius);
896
+ transition-timing-function:var(--t-ease-in-out);
897
+ transition-duration:var(--t-duration-200);
898
+ transition-property:var(--tds-radio-transition-property);
899
+ }
900
+
901
+ :is(.tds-radio input[type="radio"]):hover:not(:disabled){
902
+ --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
903
+ --tds-radio-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
904
+ }
905
+
906
+ :is(.tds-radio input[type="radio"]):focus-visible{
907
+ outline:var(--t-focus-ring-outline);
908
+ outline-offset:var(--t-focus-ring-offset);
909
+ }
910
+
911
+ :is(.tds-radio input[type="radio"]):disabled{
912
+ pointer-events:none;
913
+ }
914
+
915
+ @media (prefers-reduced-motion: reduce){
916
+
917
+ .tds-radio input[type="radio"]{
918
+ --tds-radio-transition-property:none;
919
+ }
920
+ }
921
+
922
+ .tds-radio:has(input:checked){
923
+ --tds-radio-input-background-color:var(--t-form-background-color);
924
+ --tds-radio-input-border-color:var(--t-border-color-control-info);
925
+ --tds-radio-input-border-width:4px;
926
+ }
927
+
928
+ .tds-radio:has(input:checked) input:hover:not(:disabled){
929
+ --tds-radio-input-background-color:var(--t-form-background-color);
930
+ --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
931
+ }
932
+
933
+ .tds-radio:has(input:user-invalid){
934
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
935
+ }
936
+
937
+ .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
938
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
939
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
683
940
  }
941
+
942
+ .tds-radio:has(input:disabled){
943
+ --tds-radio-input-background-color:var(--t-form-background-color-disabled);
944
+ --tds-radio-input-border-color:var(--t-form-border-color-disabled);
945
+
946
+ --tds-radio-label-color:var(--t-form-color-disabled);
947
+ --tds-radio-description-color:var(--t-form-color-disabled);
948
+ --tds-radio-cursor:not-allowed;
684
949
  }
685
950
 
951
+ .tds-radio:has(input:disabled) input:checked{
952
+ --tds-radio-input-background-color:var(--t-form-background-color);
953
+ --tds-radio-input-border-color:var(--t-form-border-color-disabled);
954
+ }
955
+
956
+ .tds-radio-description{
957
+ display:flex;
958
+ grid-area:2 / 2;
959
+ gap:var(--t-spacing-half);
960
+ align-items:flex-start;
961
+ margin:0;
962
+ font-size:var(--tds-radio-description-font-size);
963
+ line-height:var(--tds-radio-description-line-height);
964
+ color:var(--tds-radio-description-color);
965
+ cursor:text;
966
+ }
967
+
968
+ .tds-radio--sm{
969
+ --tds-radio-line-height:1.35;
970
+ --tds-radio-input-size:var(--t-element-size-sm);
971
+ --tds-radio-font-size:var(--t-font-size-sm);
972
+ --tds-radio-description-font-size:var(--t-font-size-xs);
973
+ --tds-radio-description-line-height:1.3;
974
+ }
975
+
686
976
  .tds-radio-group{
687
977
  --tds-radio-group-font-size:var(--t-font-size-md);
688
978
  --tds-radio-group-line-height:1.4;
@@ -852,458 +1142,63 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
852
1142
  .tds-toggle-switch:has(input:disabled){
853
1143
  --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-disabled);
854
1144
  --tds-toggle-switch-label-color:var(--t-form-color-disabled);
855
- --tds-toggle-switch-description-color:var(--t-form-color-disabled);
856
- --tds-toggle-switch-cursor:not-allowed;
857
- }
858
-
859
- .tds-toggle-switch-track{
860
- position:relative;
861
- flex-shrink:0;
862
- width:var(--tds-toggle-switch-track-width);
863
- height:var(--tds-toggle-switch-track-height);
864
- background-color:var(--tds-toggle-switch-track-background-color);
865
- border-radius:var(--t-border-radius-round);
866
- transition:var(--tds-toggle-switch-track-transition);
867
- }
868
-
869
- .tds-toggle-switch-track::before{
870
- position:absolute;
871
- top:var(--t-spacing-fourth);
872
- left:var(--t-spacing-fourth);
873
- width:var(--tds-toggle-switch-thumb-size);
874
- height:var(--tds-toggle-switch-thumb-size);
875
- content:"";
876
- background-color:#fff;
877
- border-radius:var(--t-border-radius-round);
878
- transform:var(--tds-toggle-switch-thumb-transform);
879
- transition:var(--tds-toggle-switch-thumb-transition);
880
- }
881
-
882
- @media (prefers-reduced-motion: reduce){
883
-
884
- .tds-toggle-switch-track{
885
- --tds-toggle-switch-track-transition:none;
886
- --tds-toggle-switch-thumb-transition:none;
887
- }
888
- }
889
-
890
- .tds-toggle-switch-description{
891
- display:flex;
892
- grid-area:2 / 2;
893
- align-items:flex-start;
894
- margin:0;
895
- font-size:var(--tds-toggle-switch-description-font-size);
896
- line-height:var(--tds-toggle-switch-description-line-height);
897
- color:var(--tds-toggle-switch-description-color);
898
- cursor:text;
899
- }
900
-
901
- .tds-toggle-switch--sm{
902
- --tds-toggle-switch-font-size:var(--t-font-size-sm);
903
- --tds-toggle-switch-line-height:1.35;
904
- --tds-toggle-switch-track-height:var(--t-element-size-lg);
905
- --tds-toggle-switch-thumb-size:var(--t-element-size-sm);
906
- --tds-toggle-switch-description-font-size:var(--t-font-size-xs);
907
- --tds-toggle-switch-description-line-height:1.3;
908
- }
909
-
910
- .tds-toggle-switch--hide-label{
911
- --tds-toggle-switch-display:inline-flex;
912
- }
913
-
914
- .tds-radio{
915
- --tds-radio-font-size:var(--t-font-size-md);
916
- --tds-radio-cursor:pointer;
917
- --tds-radio-line-height:1.4;
918
- --tds-radio-transition-property:border-width;
919
-
920
- --tds-radio-input-size:var(--t-element-size-md);
921
- --tds-radio-input-border-radius:var(--t-border-radius-round);
922
- --tds-radio-input-border-color:var(--t-form-border-color);
923
- --tds-radio-input-border-width:var(--t-form-border-width);
924
- --tds-radio-input-background-color:transparent;
925
-
926
- --tds-radio-label-color:var(--t-form-color);
927
-
928
- --tds-radio-description-font-size:var(--t-font-size-sm);
929
- --tds-radio-description-line-height:1.35;
930
- --tds-radio-description-color:var(--t-text-color-secondary);
931
-
932
- position:relative;
933
- display:inline-grid;
934
- grid-template-columns:auto;
935
- grid-auto-columns:1fr;
936
- gap:var(--t-spacing-fourth) var(--t-spacing-1);
937
- line-height:var(--tds-radio-line-height);
938
- cursor:var(--tds-radio-cursor);
939
- -webkit-user-select:none;
940
- -moz-user-select:none;
941
- user-select:none;
942
- }
943
-
944
- .tds-radio label{
945
- grid-area:1 / 2;
946
- font-size:var(--tds-radio-font-size);
947
- font-weight:var(--t-font-weight-normal);
948
- color:var(--tds-radio-label-color);
949
- cursor:var(--tds-radio-cursor);
950
- }
951
-
952
- .tds-radio input[type="radio"]{
953
- position:relative;
954
- width:1em;
955
- height:1em;
956
- margin:calc((1lh - 1em) / 2) 0 0;
957
- font-size:var(--tds-radio-font-size);
958
- line-height:inherit;
959
- -webkit-appearance:none;
960
- -moz-appearance:none;
961
- appearance:none;
962
- cursor:var(--tds-radio-cursor);
963
- background-color:var(--tds-radio-input-background-color);
964
- border:var(--tds-radio-input-border-width) solid var(--tds-radio-input-border-color);
965
- border-radius:var(--tds-radio-input-border-radius);
966
- transition-timing-function:var(--t-ease-in-out);
967
- transition-duration:var(--t-duration-200);
968
- transition-property:var(--tds-radio-transition-property);
969
- }
970
-
971
- :is(.tds-radio input[type="radio"]):hover:not(:disabled){
972
- --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
973
- --tds-radio-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
974
- }
975
-
976
- :is(.tds-radio input[type="radio"]):focus-visible{
977
- outline:var(--t-focus-ring-outline);
978
- outline-offset:var(--t-focus-ring-offset);
979
- }
980
-
981
- :is(.tds-radio input[type="radio"]):disabled{
982
- pointer-events:none;
983
- }
984
-
985
- @media (prefers-reduced-motion: reduce){
986
-
987
- .tds-radio input[type="radio"]{
988
- --tds-radio-transition-property:none;
989
- }
990
- }
991
-
992
- .tds-radio:has(input:checked){
993
- --tds-radio-input-background-color:var(--t-form-background-color);
994
- --tds-radio-input-border-color:var(--t-border-color-control-info);
995
- --tds-radio-input-border-width:4px;
996
- }
997
-
998
- .tds-radio:has(input:checked) input:hover:not(:disabled){
999
- --tds-radio-input-background-color:var(--t-form-background-color);
1000
- --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
1001
- }
1002
-
1003
- .tds-radio:has(input:user-invalid){
1004
- --tds-radio-input-border-color:var(--t-form-border-color-error);
1005
- }
1006
-
1007
- .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
1008
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1009
- --tds-radio-input-background-color:var(--t-form-background-color-error);
1010
- }
1011
-
1012
- .tds-radio:has(input:disabled){
1013
- --tds-radio-input-background-color:var(--t-form-background-color-disabled);
1014
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
1015
-
1016
- --tds-radio-label-color:var(--t-form-color-disabled);
1017
- --tds-radio-description-color:var(--t-form-color-disabled);
1018
- --tds-radio-cursor:not-allowed;
1019
- }
1020
-
1021
- .tds-radio:has(input:disabled) input:checked{
1022
- --tds-radio-input-background-color:var(--t-form-background-color);
1023
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
1024
- }
1025
-
1026
- .tds-radio-description{
1027
- display:flex;
1028
- grid-area:2 / 2;
1029
- gap:var(--t-spacing-half);
1030
- align-items:flex-start;
1031
- margin:0;
1032
- font-size:var(--tds-radio-description-font-size);
1033
- line-height:var(--tds-radio-description-line-height);
1034
- color:var(--tds-radio-description-color);
1035
- cursor:text;
1036
- }
1037
-
1038
- .tds-radio--sm{
1039
- --tds-radio-line-height:1.35;
1040
- --tds-radio-input-size:var(--t-element-size-sm);
1041
- --tds-radio-font-size:var(--t-font-size-sm);
1042
- --tds-radio-description-font-size:var(--t-font-size-xs);
1043
- --tds-radio-description-line-height:1.3;
1044
- }
1045
-
1046
- @layer t-critical{
1047
- tds-page-header:not(.hydrated){
1048
- display:none;
1049
- }
1050
- }
1051
-
1052
- @layer t-component{
1053
- .tds-page-header{
1054
- --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
1055
- --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
1056
- --tds-page-header-color:var(--t-text-color);
1057
- --tds-page-header-bottom-border-color:var(--t-surface-color-canvas);
1058
- --tds-page-header-headline-color:var(--t-text-color-headline);
1059
- --tds-page-header-headline-font-size:var(--t-font-size-2xl);
1060
- --tds-page-header-padding-x:var(--t-spacing-2);
1061
- --tds-page-header-padding-y:var(--t-spacing-2);
1062
- --tds-page-header-nav-padding-x:var(--tds-page-header-padding-x, var(--t-spacing-3));
1063
- --tds-page-header-nav-gap:var(--t-spacing-1);
1064
- --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%);
1065
- --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
1066
- --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
1067
- --tds-page-header-nav-item-color:var(--t-text-color-secondary);
1068
- --tds-page-header-nav-item-background-color:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 35%);
1069
- --tds-page-header-nav-item-border-width:1px;
1070
-
1071
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
1072
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-bottom-border-color);
1073
-
1074
- --tds-page-header-nav-item-color-hover:var(--t-text-color);
1075
- --tds-page-header-nav-item-background-color-hover:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 20%);
1076
- --tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
1077
-
1078
- --tds-page-header-nav-item-background-color-active:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 10%);
1079
- --tds-page-header-nav-item-border-color-active:var(--tds-page-header-nav-item-background-color-active);
1080
-
1081
- --tds-page-header-nav-item-color-disabled:var(--t-text-color-disabled);
1082
- --tds-page-header-nav-item-background-color-disabled:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 50%);
1083
- --tds-page-header-nav-item-border-color-disabled:var(--tds-page-header-nav-item-background-color-disabled);
1084
-
1085
- --tds-page-header-nav-item-color-selected:var(--t-text-color);
1086
- --tds-page-header-nav-item-background-color-selected:var(--t-surface-color-canvas);
1087
- --tds-page-header-nav-item-border-color-selected:var(--tds-page-header-nav-item-background-color-selected);
1088
- --tds-page-header-nav-item-border-bottom-color-selected:var(--tds-page-header-nav-item-background-color-selected);
1089
- --tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning);
1090
- }
1091
-
1092
- .tds-page-header--profile{
1093
- --tds-page-header-padding-y:20px;
1094
- }
1095
-
1096
- @supports (color: light-dark(#fff, #000)){
1097
- .tds-page-header{
1098
- --tds-page-header-nav-background-start:light-dark(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0));
1099
- --tds-page-header-nav-background-end:light-dark(rgba(0, 0, 0, .05), rgba(255, 255, 255, .1));
1100
- }
1101
- }
1102
-
1103
- @media (min-width: 600px){
1104
- .tds-page-header{
1105
- --tds-page-header-background-color:var(--t-surface-color-canvas);
1106
- --tds-page-header-color:var(--t-text-color-secondary);
1107
- --tds-page-header-bottom-border-color:var(--t-border-color);
1108
- --tds-page-header-padding-x:var(--t-spacing-3);
1109
- --tds-page-header-headline-font-size:var(--t-font-size-3xl);
1110
- --tds-page-header-nav-gap:var(--t-spacing-half);
1111
- --tds-page-header-nav-background:transparent;
1112
- --tds-page-header-nav-item-padding-x:var(--t-spacing-2);
1113
- --tds-page-header-nav-item-border-width:1px;
1114
- --tds-page-header-nav-item-color:var(--t-text-color);
1115
- --tds-page-header-nav-item-background-color:var(--t-fill-color-neutral-070);
1116
- --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-060);
1117
- --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-050);
1118
- --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
1119
- --tds-page-header-nav-item-border-color-selected:var(--t-border-color);
1120
- }
1121
- }
1122
- }
1123
-
1124
- .tds-page-header{
1125
- display:flex;
1126
- flex-direction:column;
1127
- padding-top:var(--tds-page-header-padding-y);
1128
- color:var(--tds-page-header-color);
1129
- background:var(--tds-page-header-background-color);
1130
- border-bottom:1px solid var(--tds-page-header-bottom-border-color);
1131
- }
1132
-
1133
- .tds-page-header:not(.has-nav){
1134
- padding-bottom:var(--tds-page-header-padding-y);
1135
- }
1136
-
1137
- .tds-page-header.inactive{
1138
- background:var(--tds-page-header-background-color-inactive);
1139
- }
1140
-
1141
- .tds-page-header :is([slot="actions"],.tds-page-header__actions){
1142
- width:100%;
1143
- }
1144
-
1145
- .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
1146
- display:flex;
1147
- flex-flow:row wrap;
1148
- gap:var(--t-spacing-half) var(--t-spacing-1);
1149
- align-items:flex-start;
1150
- justify-content:flex-start;
1151
- min-width:0;
1152
- }
1153
-
1154
- :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{
1155
- display:flex;
1156
- gap:var(--tds-page-header-nav-gap);
1157
- padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
1158
- margin:0 0 -1px;
1159
- overflow:auto;
1160
- list-style:none;
1161
- background:var(--tds-page-header-nav-background);
1162
- }
1163
-
1164
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button){
1165
- position:relative;
1166
- display:inline-flex;
1167
- padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
1168
- font-size:var(--t-font-size-sm);
1169
- line-height:22px;
1170
- color:var(--tds-page-header-nav-item-color);
1171
- white-space:nowrap;
1172
- text-decoration:none;
1173
- -webkit-appearance:none;
1174
- -moz-appearance:none;
1175
- appearance:none;
1176
- cursor:pointer;
1177
- outline-offset:-2px;
1178
- background-color:var(--tds-page-header-nav-item-background-color);
1179
- background-clip:padding-box;
1180
- border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
1181
- border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
1182
- border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
1183
- }
1184
-
1185
- .selected:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)){
1186
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-selected);
1187
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-selected);
1188
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-selected);
1189
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-selected);
1190
- }
1191
-
1192
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):hover{
1193
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
1194
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
1195
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
1196
- }
1197
-
1198
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):active{
1199
- background-color:var(--tds-page-header-nav-item-background-color-active);
1200
- border-color:var(--tds-page-header-nav-item-border-color-active);
1201
- }
1202
-
1203
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):disabled{
1204
- color:var(--tds-page-header-nav-item-color-disabled);
1205
- cursor:not-allowed;
1206
- background-color:var(--tds-page-header-nav-item-background-color-disabled);
1207
- opacity:1;
1208
- }
1209
-
1210
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
1211
- position:relative;
1212
- }
1213
-
1214
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator)) :is(a,button){
1215
- -webkit-mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
1216
- mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
1217
- }
1218
-
1219
- :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{
1220
- position:absolute;
1221
- top:-5px;
1222
- right:-2px;
1223
- width:10px;
1224
- height:10px;
1225
- content:"";
1226
- background:var(--tds-page-header-nav-item-indicator-color);
1227
- border-radius:50%;
1228
- }
1229
-
1230
- @media (prefers-reduced-motion: no-preference){
1231
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
1232
- animation:indicator-pulse 1.25s ease infinite;
1233
- }
1234
- }
1235
-
1236
- .tds-page-header__title-bar{
1237
- display:flex;
1238
- flex-direction:column;
1239
- gap:var(--t-spacing-2) var(--t-spacing-1);
1240
- align-items:flex-start;
1241
- justify-content:space-between;
1242
- padding:0 var(--tds-page-header-padding-x);
1243
- }
1244
-
1245
- .tds-page-header--profile > .tds-page-header__title-bar{
1246
- align-items:center;
1247
- }
1248
-
1249
- .tds-page-header__primary{
1250
- width:100%;
1251
- }
1252
-
1253
- .tds-page-header__primary h1{
1254
- margin:0;
1255
- font-size:var(--tds-page-header-headline-font-size);
1256
- font-weight:var(--t-font-weight-normal);
1257
- line-height:32px;
1258
- color:var(--tds-page-header-headline-color);
1259
- overflow-wrap:break-word;
1145
+ --tds-toggle-switch-description-color:var(--t-form-color-disabled);
1146
+ --tds-toggle-switch-cursor:not-allowed;
1260
1147
  }
1261
1148
 
1262
- @media (min-width: 960px){
1263
- .tds-page-header__primary{
1264
- flex:1 1 max-content;
1265
- width:auto;
1266
- min-width:0;
1267
- max-width:100%;
1268
- }
1149
+ .tds-toggle-switch-track{
1150
+ position:relative;
1151
+ flex-shrink:0;
1152
+ width:var(--tds-toggle-switch-track-width);
1153
+ height:var(--tds-toggle-switch-track-height);
1154
+ background-color:var(--tds-toggle-switch-track-background-color);
1155
+ border-radius:var(--t-border-radius-round);
1156
+ transition:var(--tds-toggle-switch-track-transition);
1157
+ }
1269
1158
 
1270
- .tds-page-header__title-bar,
1271
- .tds-page-header--profile .tds-page-header__title-bar{
1272
- flex-flow:row nowrap;
1273
- row-gap:12px;
1274
- align-items:flex-start;
1159
+ .tds-toggle-switch-track::before{
1160
+ position:absolute;
1161
+ top:var(--t-spacing-fourth);
1162
+ left:var(--t-spacing-fourth);
1163
+ width:var(--tds-toggle-switch-thumb-size);
1164
+ height:var(--tds-toggle-switch-thumb-size);
1165
+ content:"";
1166
+ background-color:#fff;
1167
+ border-radius:var(--t-border-radius-round);
1168
+ transform:var(--tds-toggle-switch-thumb-transform);
1169
+ transition:var(--tds-toggle-switch-thumb-transition);
1275
1170
  }
1276
- .tds-page-header :is([slot="actions"],.tds-page-header__actions){
1277
- width:auto;
1278
- }
1279
1171
 
1280
- .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
1281
- justify-content:flex-end;
1282
- }
1283
- }
1172
+ @media (prefers-reduced-motion: reduce){
1284
1173
 
1285
- .tds-page-header-phone,
1286
- .tds-page-header-email{
1287
- color:var(--tds-page-header-color);
1288
- white-space:nowrap;
1174
+ .tds-toggle-switch-track{
1175
+ --tds-toggle-switch-track-transition:none;
1176
+ --tds-toggle-switch-thumb-transition:none;
1289
1177
  }
1178
+ }
1290
1179
 
1291
- .tds-page-header-email{
1292
- max-width:100%;
1293
- overflow:hidden;
1294
- text-overflow:ellipsis;
1180
+ .tds-toggle-switch-description{
1181
+ display:flex;
1182
+ grid-area:2 / 2;
1183
+ align-items:flex-start;
1184
+ margin:0;
1185
+ font-size:var(--tds-toggle-switch-description-font-size);
1186
+ line-height:var(--tds-toggle-switch-description-line-height);
1187
+ color:var(--tds-toggle-switch-description-color);
1188
+ cursor:text;
1295
1189
  }
1296
1190
 
1297
- @keyframes indicator-pulse{
1298
- 0%{
1299
- opacity:.3;
1300
- transform:scale(.9);
1301
- }
1191
+ .tds-toggle-switch--sm{
1192
+ --tds-toggle-switch-font-size:var(--t-font-size-sm);
1193
+ --tds-toggle-switch-line-height:1.35;
1194
+ --tds-toggle-switch-track-height:var(--t-element-size-lg);
1195
+ --tds-toggle-switch-thumb-size:var(--t-element-size-sm);
1196
+ --tds-toggle-switch-description-font-size:var(--t-font-size-xs);
1197
+ --tds-toggle-switch-description-line-height:1.3;
1198
+ }
1302
1199
 
1303
- 100%{
1304
- opacity:0;
1305
- transform:scale(1.75);
1306
- }
1200
+ .tds-toggle-switch--hide-label{
1201
+ --tds-toggle-switch-display:inline-flex;
1307
1202
  }
1308
1203
 
1309
1204
  .tds-select{
@@ -1740,6 +1635,111 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1740
1635
  }
1741
1636
  }
1742
1637
 
1638
+ .tds-input:has(textarea){
1639
+ --tds-input-padding-block:6px;
1640
+ --tds-input-resizer-size:var(--t-element-size-sm);
1641
+ --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");
1642
+ }
1643
+
1644
+ @supports (x: attr(x type(*))){
1645
+
1646
+ .tds-input:has(textarea){
1647
+ --tds-input-min-height:calc((attr(rows type(<number>), 3) * 1lh) + (var(--tds-input-padding-block) * 2) + 2px);
1648
+ }
1649
+ }
1650
+
1651
+ .tds-input.tds-textarea--resize-vertical textarea{
1652
+ resize:vertical;
1653
+ }
1654
+
1655
+ .tds-input.tds-textarea--resize-none textarea{
1656
+ resize:none;
1657
+ }
1658
+
1659
+ .tds-input.tds-textarea--resize-auto textarea{
1660
+ resize:vertical;
1661
+ }
1662
+
1663
+ @supports (field-sizing: content){
1664
+ .tds-input.tds-textarea--resize-auto textarea{
1665
+ field-sizing:content;
1666
+ resize:none;
1667
+ }
1668
+ }
1669
+
1670
+ .tds-input textarea{
1671
+ --tds-input-scrollbar-thumb-color-default:var(--t-fill-color-neutral-040);
1672
+ --tds-input-scrollbar-thumb-color-hidden:transparent;
1673
+ --tds-input-scrollbar-thumb-color-hover:var(--t-fill-color-neutral-030);
1674
+ --tds-input-scrollbar-thumb-color-thumb-hover:var(--t-fill-color-neutral-020);
1675
+ --tds-input-scrollbar-thumb-color-thumb-active:var(--t-fill-color-neutral-010);
1676
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-default);
1677
+ --tds-input-scrollbar-surface-color:rgba(0, 0, 0, 0);
1678
+ --tds-input-scrollbar-thumb-border-radius:999px;
1679
+ --tds-input-scrollbar-thumb-border-width:3px;
1680
+ --tds-input-scrollbar-track-margin-block:.125rem;
1681
+ scrollbar-color:initial;
1682
+ transition-timing-function:var(--t-ease-in-out);
1683
+ transition-duration:var(--t-duration-200);
1684
+ transition-property:var(--tds-input-transition-property), --tds-input-scrollbar-thumb-color;
1685
+ }
1686
+
1687
+ @media (pointer: fine){
1688
+ :is(.tds-input textarea)::-webkit-scrollbar{
1689
+ width:12px;
1690
+ height:12px;
1691
+ cursor:default;
1692
+ }
1693
+
1694
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb{
1695
+ cursor:default;
1696
+ background:var(--tds-input-scrollbar-thumb-color);
1697
+ background-clip:content-box;
1698
+ border:var(--tds-input-scrollbar-thumb-border-width) solid var(--tds-input-scrollbar-surface-color);
1699
+ border-radius:var(--tds-input-scrollbar-thumb-border-radius);
1700
+ }
1701
+
1702
+ :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1703
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
1704
+ }
1705
+
1706
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
1707
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
1708
+ }
1709
+
1710
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
1711
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
1712
+ }
1713
+
1714
+ :is(.tds-input textarea)::-webkit-scrollbar-corner{
1715
+ background:var(--tds-input-scrollbar-surface-color);
1716
+ }
1717
+
1718
+ :is(.tds-input textarea)::-webkit-resizer{
1719
+ background:var(--tds-input-resizer-icon) no-repeat;
1720
+ background-position:right bottom;
1721
+ background-size:var(--tds-input-resizer-size) var(--tds-input-resizer-size);
1722
+ }
1723
+
1724
+ :is(.tds-input textarea)::-webkit-scrollbar-track{
1725
+ margin-block:var(--tds-input-scrollbar-track-margin-block);
1726
+ cursor:default;
1727
+ }
1728
+
1729
+ @supports (-moz-appearance: none){
1730
+ :is(.tds-input textarea){
1731
+ scrollbar-color:var(--tds-input-scrollbar-thumb-color-default) var(--tds-input-scrollbar-surface-color);
1732
+ scrollbar-width:thin;
1733
+ }
1734
+
1735
+ @media (hover){
1736
+ :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1737
+ scrollbar-color:var(--tds-input-scrollbar-thumb-color-hover) var(--tds-input-scrollbar-surface-color);
1738
+ }
1739
+ }
1740
+ }
1741
+ }
1742
+
1743
1743
  .tds-input{
1744
1744
  --tds-input-border-color:var(--t-form-border-color);
1745
1745
  --tds-input-border-color-hover:var(--t-form-border-color-hover);
@@ -3319,22 +3319,100 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
3319
3319
  }
3320
3320
  }
3321
3321
 
3322
- @media (prefers-color-scheme: dark){
3322
+ @media (prefers-color-scheme: dark){
3323
+ }
3324
+
3325
+ .tds-checkbox-group{
3326
+ --tds-checkbox-group-font-size:var(--t-font-size-md);
3327
+ --tds-checkbox-group-line-height:1.4;
3328
+ --tds-checkbox-group-gap:var(--t-spacing-1);
3329
+
3330
+ --tds-checkbox-group-legend-margin-bottom:var(--tds-checkbox-group-gap);
3331
+
3332
+ --tds-checkbox-group-description-font-size:var(--t-font-size-sm);
3333
+ --tds-checkbox-group-description-line-height:1.35;
3334
+ --tds-checkbox-group-description-color:var(--t-text-color-secondary);
3335
+ --tds-checkbox-group-description-invalid-icon-display:none;
3336
+ display:flex;
3337
+ flex-direction:column;
3338
+ gap:var(--tds-checkbox-group-gap);
3339
+ padding:0;
3340
+ margin:0;
3341
+
3342
+ font-size:var(--tds-checkbox-group-font-size);
3343
+ line-height:var(--tds-checkbox-group-line-height);
3344
+ border:0;
3345
+ }
3346
+
3347
+ .tds-checkbox-group legend{
3348
+ padding:0;
3349
+ margin-bottom:var(--tds-checkbox-group-legend-margin-bottom);
3350
+ }
3351
+
3352
+ .tds-checkbox-group:has(.tds-checkbox-group-description){
3353
+ --tds-checkbox-group-legend-margin-bottom:var(--t-spacing-fourth);
3354
+ }
3355
+
3356
+ .tds-checkbox-group[aria-invalid="true"]{
3357
+ --tds-checkbox-group-description-color:var(--t-text-color-status-error);
3358
+ --tds-checkbox-group-description-invalid-icon-display:inline-block;
3359
+ }
3360
+
3361
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) legend::after{
3362
+ margin-left:.25ch;
3363
+ color:var(--t-text-color-status-error);
3364
+ content:"*";
3365
+ }
3366
+
3367
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
3368
+ content:none;
3369
+ }
3370
+
3371
+ .tds-checkbox-group-fields{
3372
+ display:flex;
3373
+ flex-direction:column;
3374
+ gap:var(--tds-checkbox-group-gap);
3375
+ align-items:flex-start;
3376
+ }
3377
+
3378
+ .tds-checkbox-group-description{
3379
+ display:flex;
3380
+ gap:var(--t-spacing-half);
3381
+ align-items:flex-start;
3382
+ margin:0;
3383
+ font-size:var(--tds-checkbox-group-description-font-size);
3384
+ line-height:var(--tds-checkbox-group-description-line-height);
3385
+ color:var(--tds-checkbox-group-description-color);
3386
+ cursor:text;
3387
+ }
3388
+
3389
+ .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
3390
+ display:var(--tds-checkbox-group-description-invalid-icon-display);
3391
+ flex-shrink:0;
3392
+ margin-top:calc(.5lh - .5em);
3393
+ line-height:var(--tds-checkbox-group-description-line-height);
3394
+ }
3395
+
3396
+ .tds-checkbox-group--sm{
3397
+ --tds-checkbox-group-line-height:1.35;
3398
+ --tds-checkbox-group-font-size:var(--t-font-size-sm);
3399
+ --tds-checkbox-group-description-font-size:var(--t-font-size-xs);
3400
+ --tds-checkbox-group-description-line-height:1.3;
3323
3401
  }
3324
3402
 
3325
- .tds-date-picker{
3326
- --tds-date-picker-border-color:var(--t-form-border-color);
3327
- --tds-date-picker-border-color-hover:var(--t-form-border-color-hover);
3328
- --tds-date-picker-border-color-active:var(--t-form-border-color-focus);
3329
- --tds-date-picker-background-color:var(--t-form-background-color);
3330
- --tds-date-picker-color:var(--t-form-color);
3331
- --tds-date-picker-placeholder-color:var(--t-form-placeholder-color);
3332
- --tds-date-picker-font-size:var(--t-font-size-md);
3333
- --tds-date-picker-min-height:var(--t-container-size-md);
3334
- --tds-date-picker-padding-block:6px;
3335
- --tds-date-picker-button-offset:4px;
3336
- --tds-date-picker-description-color:var(--t-text-color-secondary);
3337
- --tds-date-picker-description-invalid-icon-display:none;
3403
+ .tds-combo-box{
3404
+ --tds-combo-box-border-color:var(--t-form-border-color);
3405
+ --tds-combo-box-border-color-hover:var(--t-form-border-color-hover);
3406
+ --tds-combo-box-border-color-active:var(--t-form-border-color-focus);
3407
+ --tds-combo-box-background-color:var(--t-form-background-color);
3408
+ --tds-combo-box-color:var(--t-form-color);
3409
+ --tds-combo-box-placeholder-color:var(--t-form-placeholder-color);
3410
+ --tds-combo-box-font-size:var(--t-font-size-md);
3411
+ --tds-combo-box-min-height:var(--t-container-size-md);
3412
+ --tds-combo-box-padding-block:6px;
3413
+ --tds-combo-box-button-offset:4px;
3414
+ --tds-combo-box-description-color:var(--t-text-color-secondary);
3415
+ --tds-combo-box-description-invalid-icon-display:none;
3338
3416
 
3339
3417
  position:relative;
3340
3418
  display:flex;
@@ -3342,755 +3420,837 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
3342
3420
  gap:var(--t-spacing-half);
3343
3421
  }
3344
3422
 
3345
- .tds-date-picker[data-required] .tds-date-picker-label::after{
3423
+ .tds-combo-box[data-required] .tds-combo-box-label::after{
3346
3424
  margin-left:.25ch;
3347
3425
  color:var(--t-text-color-status-error);
3348
3426
  content:"*";
3349
3427
  }
3350
3428
 
3351
- .tds-date-picker[data-invalid]{
3352
- --tds-date-picker-border-color:var(--t-form-border-color-error);
3353
- --tds-date-picker-border-color-hover:var(--t-form-border-color-error-hover);
3354
- --tds-date-picker-border-color-active:var(--t-form-border-color-error-hover);
3355
- --tds-date-picker-background-color:var(--t-form-background-color-error);
3356
- --tds-date-picker-description-color:var(--t-text-color-status-error);
3357
- --tds-date-picker-description-invalid-icon-display:inline-block;
3429
+ .tds-combo-box[data-invalid]{
3430
+ --tds-combo-box-border-color:var(--t-form-border-color-error);
3431
+ --tds-combo-box-border-color-hover:var(--t-form-border-color-error-hover);
3432
+ --tds-combo-box-border-color-active:var(--t-form-border-color-error-hover);
3433
+ --tds-combo-box-background-color:var(--t-form-background-color-error);
3434
+ --tds-combo-box-description-color:var(--t-text-color-status-error);
3435
+ --tds-combo-box-description-invalid-icon-display:inline-block;
3358
3436
  }
3359
3437
 
3360
- .tds-date-picker[data-disabled]{
3361
- --tds-date-picker-border-color:var(--t-form-border-color-disabled);
3362
- --tds-date-picker-background-color:var(--t-form-background-color-disabled);
3363
- --tds-date-picker-color:var(--t-form-color-disabled);
3364
- --tds-date-picker-placeholder-color:var(--t-form-color-disabled);
3438
+ .tds-combo-box[data-disabled]{
3439
+ --tds-combo-box-border-color:var(--t-form-border-color-disabled);
3440
+ --tds-combo-box-background-color:var(--t-form-background-color-disabled);
3441
+ --tds-combo-box-color:var(--t-form-color-disabled);
3365
3442
  }
3366
3443
 
3367
- .tds-date-picker[data-disabled] .tds-date-picker-field{
3444
+ .tds-combo-box[data-disabled] .tds-combo-box-label{
3445
+ color:var(--t-form-color-disabled);
3446
+ }
3447
+
3448
+ .tds-combo-box[data-disabled] .tds-combo-box-field{
3368
3449
  cursor:not-allowed;
3369
3450
  }
3370
3451
 
3371
- .tds-date-picker--lg{
3372
- --tds-date-picker-min-height:var(--t-container-size-lg);
3373
- --tds-date-picker-font-size:var(--t-font-size-lg);
3374
- --tds-date-picker-button-offset:5px;
3452
+ .tds-combo-box[data-open] .tds-combo-box-button > svg{
3453
+ transform:rotate(.5turn);
3454
+ }
3455
+
3456
+ .tds-combo-box--lg{
3457
+ --tds-combo-box-min-height:var(--t-container-size-lg);
3458
+ --tds-combo-box-font-size:var(--t-font-size-lg);
3459
+ --tds-combo-box-button-offset:5px;
3375
3460
  }
3376
3461
 
3377
- .tds-date-picker-label{
3462
+ .tds-combo-box-label{
3378
3463
  font-size:var(--t-font-size-md);
3379
3464
  font-weight:var(--t-font-weight-normal);
3380
3465
  color:var(--t-text-color);
3381
3466
  cursor:default;
3382
3467
  }
3383
3468
 
3384
- .tds-date-picker-field{
3469
+ .tds-combo-box-field{
3385
3470
  display:flex;
3386
3471
  align-items:center;
3387
3472
  inline-size:100%;
3388
- min-block-size:var(--tds-date-picker-min-height);
3473
+ min-block-size:var(--tds-combo-box-min-height);
3389
3474
  font-family:inherit;
3390
- font-size:var(--tds-date-picker-font-size);
3475
+ font-size:var(--tds-combo-box-font-size);
3391
3476
  line-height:1;
3392
- color:var(--tds-date-picker-color);
3477
+ color:var(--tds-combo-box-color);
3393
3478
  -webkit-appearance:none;
3394
3479
  -moz-appearance:none;
3395
3480
  appearance:none;
3396
- cursor:text;
3481
+ cursor:default;
3397
3482
  outline:var(--t-focus-ring-width) solid transparent;
3398
3483
  outline-offset:0;
3399
- background-color:var(--tds-date-picker-background-color);
3400
- border:var(--t-form-border-width) solid var(--tds-date-picker-border-color);
3484
+ background-color:var(--tds-combo-box-background-color);
3485
+ border:var(--t-form-border-width) solid var(--tds-combo-box-border-color);
3401
3486
  border-radius:var(--t-form-border-radius);
3402
3487
  }
3403
3488
 
3404
- .tds-date-picker-field[data-hovered]:not([data-focus-visible],[data-focus-within],[data-disabled]){
3405
- border-color:var(--tds-date-picker-border-color-hover);
3489
+ .tds-combo-box-field[data-hovered]:not([data-focus-visible],[data-focus-within],[data-disabled]){
3490
+ border-color:var(--tds-combo-box-border-color-hover);
3406
3491
  }
3407
3492
 
3408
- .tds-date-picker-field[data-focus-within]{
3493
+ .tds-combo-box-field[data-focus-within]{
3409
3494
  outline-color:var(--t-focus-ring-color);
3410
3495
  outline-offset:var(--t-focus-ring-offset);
3411
- border-color:var(--tds-date-picker-border-color-active);
3496
+ border-color:var(--tds-combo-box-border-color-active);
3412
3497
  }
3413
3498
 
3414
- .tds-date-picker-field:has(.tds-date-picker-input[data-readonly]){
3415
- color:var(--t-form-color-readonly);
3416
- background-color:var(--t-form-background-color-readonly);
3417
- border-color:var(--t-form-border-color-readonly);
3499
+ .tds-combo-box-field:has([readonly]){
3500
+ --tds-input-border-color:var(--t-form-border-color-readonly);
3501
+ --tds-combo-box-background-color:var(--t-form-background-color-readonly);
3418
3502
  }
3419
3503
 
3420
- .tds-date-picker-field[data-hovered]:has(.tds-date-picker-input[data-readonly]){
3421
- border-color:var(--t-form-border-color-readonly);
3422
- }
3423
-
3424
- .tds-date-picker-field[data-focus-within]:has(.tds-date-picker-input[data-readonly]){
3425
- outline-color:var(--t-focus-ring-color);
3426
- outline-offset:var(--t-focus-ring-offset);
3504
+ .tds-combo-box-field[data-focus-within]:has([readonly]){
3427
3505
  border-color:var(--t-form-border-color-hover);
3428
3506
  }
3429
3507
 
3430
- .tds-date-picker-input{
3508
+ .tds-combo-box-input{
3509
+ display:flex;
3431
3510
  flex:1;
3432
- padding-block:var(--tds-date-picker-padding-block);
3511
+ align-items:center;
3512
+ padding-block:var(--tds-combo-box-padding-block);
3433
3513
  padding-inline-start:var(--t-spacing-1);
3434
- font-variant-numeric:tabular-nums;
3514
+ font-family:inherit;
3515
+ font-size:inherit;
3516
+ color:inherit;
3517
+ outline:0;
3518
+ background:transparent;
3519
+ border:0;
3435
3520
  }
3436
3521
 
3437
- .tds-date-picker-segment{
3438
- padding-inline:2px;
3439
- caret-color:transparent;
3440
- border-radius:var(--t-border-radius-sm);
3522
+ .tds-combo-box-input::-moz-placeholder{
3523
+ color:var(--tds-combo-box-placeholder-color);
3524
+ -moz-user-select:none;
3525
+ user-select:none;
3526
+ }
3527
+
3528
+ .tds-combo-box-input::placeholder{
3529
+ color:var(--tds-combo-box-placeholder-color);
3530
+ -webkit-user-select:none;
3531
+ -moz-user-select:none;
3532
+ user-select:none;
3533
+ }
3534
+
3535
+ .tds-combo-box-button{
3536
+ flex-shrink:0;
3537
+ align-self:center;
3538
+ inline-size:calc(var(--tds-combo-box-min-height) - (var(--tds-combo-box-button-offset) * 2));
3539
+ block-size:calc(var(--tds-combo-box-min-height) - (var(--tds-combo-box-button-offset) * 2));
3540
+ padding:0;
3541
+ margin-inline-end:var(--tds-combo-box-button-offset);
3542
+ }
3543
+
3544
+ .tds-combo-box-button > svg{
3545
+ inline-size:var(--tds-combo-box-font-size);
3546
+ block-size:var(--tds-combo-box-font-size);
3547
+ transition:transform var(--t-duration-300) var(--t-ease-in-out);
3548
+ }
3549
+
3550
+ .tds-combo-box-button:not(.tds-btn){
3551
+ display:inline-flex;
3552
+ align-items:center;
3553
+ justify-content:center;
3554
+ inline-size:auto;
3555
+ block-size:auto;
3556
+ margin-inline-end:.75em;
3557
+ color:var(--t-icon-color);
3558
+ cursor:default;
3559
+ background:transparent;
3560
+ border:0;
3561
+ }
3562
+
3563
+ .tds-combo-box-button[data-focus-visible]:not(.tds-btn){
3564
+ outline:0;
3565
+ }
3566
+
3567
+ .tds-combo-box-popover{
3568
+ width:var(--trigger-width);
3569
+ max-block-size:inherit;
3570
+ padding:var(--t-spacing-1);
3571
+ overflow:auto;
3572
+ outline:0;
3573
+ scrollbar-color:#0004 #0000;
3574
+ scrollbar-width:thin;
3575
+ background:var(--t-surface-color-card);
3576
+ background-clip:padding-box;
3577
+ border:1px solid var(--t-border-color);
3578
+ border-radius:var(--t-border-radius);
3579
+ box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
3580
+ }
3581
+
3582
+ .tds-combo-box-popover[data-entering]{
3583
+ animation:tds-combo-box-popover-enter 160ms ease;
3584
+ }
3585
+
3586
+ .tds-combo-box-popover[data-exiting]{
3587
+ animation:tds-combo-box-popover-exit 130ms ease;
3588
+ }
3589
+
3590
+ @keyframes tds-combo-box-popover-enter{
3591
+ from{
3592
+ opacity:0;
3593
+ transform:translateY(-8px);
3594
+ }
3595
+ }
3596
+
3597
+ @keyframes tds-combo-box-popover-exit{
3598
+ to{
3599
+ opacity:0;
3600
+ transform:translateY(-8px);
3601
+ }
3602
+ }
3603
+
3604
+ @media (prefers-reduced-motion: reduce){
3605
+ .tds-combo-box-popover[data-entering],.tds-combo-box-popover[data-exiting]{
3606
+ animation:none;
3607
+ }
3608
+
3609
+ .tds-combo-box-button > svg{
3610
+ transition:none;
3611
+ }
3612
+ }
3613
+
3614
+ .tds-combo-box-list{
3615
+ padding:0;
3616
+ margin:0;
3617
+ }
3618
+
3619
+ .tds-combo-box-list-item{
3620
+ display:block;
3621
+ padding-block:var(--t-spacing-1);
3622
+ padding-inline:var(--t-spacing-2) var(--t-spacing-1);
3623
+ overflow:hidden;
3624
+ text-overflow:ellipsis;
3625
+ font-size:1rem;
3626
+ color:var(--t-text-color);
3627
+ white-space:nowrap;
3628
+ cursor:default;
3629
+ outline-offset:-1px;
3630
+ border-radius:var(--t-border-radius);
3441
3631
  }
3442
3632
 
3443
- .tds-date-picker-segment[data-placeholder]{
3444
- color:var(--tds-date-picker-placeholder-color);
3633
+ .tds-combo-box-list-item[data-hovered]:not([data-disabled]){
3634
+ background:var(--t-fill-color-neutral-070);
3635
+ }
3636
+
3637
+ .tds-combo-box-list-item[data-selected]{
3638
+ background:var(--t-fill-color-button-interaction-ghost-active);
3639
+ }
3640
+
3641
+ .tds-combo-box-list-item[data-focus-visible]{
3642
+ outline:var(--t-focus-ring-outline);
3643
+ outline-offset:-1px;
3644
+ }
3645
+
3646
+ .tds-combo-box-list-item[data-disabled]{
3647
+ color:var(--t-form-color-disabled);
3648
+ cursor:not-allowed;
3445
3649
  }
3446
3650
 
3447
- .tds-date-picker-segment[data-focused]{
3448
- color:var(--t-text-color-inverted);
3449
- outline:0;
3450
- background:var(--t-fill-color-interaction);
3651
+ .tds-combo-box-list-item[data-disabled][data-hovered]{
3652
+ background:transparent;
3653
+ }
3654
+
3655
+ .tds-combo-box-empty-state{
3656
+ padding-block:var(--t-spacing-1);
3657
+ padding-inline:var(--t-spacing-2);
3658
+ font-size:var(--t-font-size-md);
3659
+ color:var(--t-text-color-secondary);
3660
+ }
3661
+
3662
+ .tds-combo-box-list-section:not(:first-child){
3663
+ margin-block-start:var(--t-spacing-half);
3451
3664
  }
3452
3665
 
3453
- .tds-date-picker-segment-separator{
3454
- padding-inline:0;
3455
- color:var(--tds-date-picker-placeholder-color);
3666
+ .tds-combo-box-section-header{
3667
+ padding-block:var(--t-spacing-1);
3668
+ padding-inline:var(--t-spacing-1);
3669
+ font-size:var(--t-font-size-sm);
3670
+ font-weight:var(--t-font-weight-semibold);
3671
+ color:var(--t-text-color-secondary);
3456
3672
  }
3457
3673
 
3458
- .tds-date-picker-description{
3674
+ .tds-combo-box-description{
3459
3675
  display:flex;
3460
3676
  gap:var(--t-spacing-half);
3461
3677
  align-items:flex-start;
3462
3678
  margin:0;
3463
3679
  font-size:var(--t-font-size-sm);
3464
3680
  line-height:1.35;
3465
- color:var(--tds-date-picker-description-color, var(--t-text-color-secondary));
3681
+ color:var(--tds-combo-box-description-color, var(--t-text-color-secondary));
3466
3682
  cursor:text;
3467
3683
  }
3468
3684
 
3469
- .tds-date-picker-description .tds-date-picker-description-invalid-icon{
3470
- display:var(--tds-date-picker-description-invalid-icon-display, none);
3471
- flex-shrink:0;
3472
- margin-block-start:calc(.5lh - .5em);
3473
- line-height:1.35;
3474
- }
3475
-
3476
- .tds-date-picker-button{
3685
+ .tds-combo-box-description-invalid-icon{
3686
+ display:var(--tds-combo-box-description-invalid-icon-display, none);
3477
3687
  flex-shrink:0;
3478
- align-self:center;
3479
- inline-size:calc(var(--tds-date-picker-min-height) - (var(--tds-date-picker-button-offset) * 2));
3480
- block-size:calc(var(--tds-date-picker-min-height) - (var(--tds-date-picker-button-offset) * 2));
3481
- padding:0;
3482
- margin-inline-end:var(--tds-date-picker-button-offset);
3688
+ margin-block-start:calc(.5lh - .5em);
3689
+ line-height:1.35;
3483
3690
  }
3484
3691
 
3485
- .tds-date-picker-popover{
3486
- --tds-date-picker-popover-padding:var(--t-spacing-1-half);
3692
+ .tds-number-stepper{
3693
+ --tds-number-stepper-border-color:var(--t-form-border-color);
3694
+ --tds-number-stepper-border-color-hover:var(--t-form-border-color-hover);
3695
+ --tds-number-stepper-border-color-active:var(--t-form-border-color-focus);
3696
+ --tds-number-stepper-background-color:var(--t-form-background-color);
3697
+ --tds-number-stepper-color:var(--t-form-color);
3698
+ --tds-number-stepper-font-size:var(--t-font-size-md);
3699
+ --tds-number-stepper-min-height:var(--t-container-size-md);
3700
+ --tds-number-stepper-padding-block:6px;
3701
+ --tds-number-stepper-button-offset:4px;
3702
+ --tds-number-stepper-button-gap:2px;
3703
+ --tds-number-stepper-description-color:var(--t-text-color-secondary);
3704
+ --tds-number-stepper-description-invalid-icon-display:none;
3487
3705
 
3488
3706
  position:relative;
3489
- overflow:hidden;
3490
- background:var(--t-surface-color-card);
3491
- border:1px solid var(--t-border-color);
3492
- border-radius:var(--t-border-radius);
3493
- box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
3707
+ display:flex;
3708
+ flex-direction:column;
3709
+ gap:var(--t-spacing-half);
3494
3710
  }
3495
3711
 
3496
- .tds-date-picker-popover[data-entering]{
3497
- animation:tds-date-picker-popover-enter 160ms ease;
3498
- }
3499
-
3500
- .tds-date-picker-popover[data-exiting]{
3501
- animation:tds-date-picker-popover-exit 130ms ease;
3712
+ .tds-number-stepper[data-required] .tds-number-stepper-label::after{
3713
+ margin-left:.25ch;
3714
+ color:var(--t-text-color-status-error);
3715
+ content:"*";
3502
3716
  }
3503
3717
 
3504
- @keyframes tds-date-picker-popover-enter{
3505
- from{
3506
- opacity:0;
3507
- transform:translateY(-8px);
3718
+ .tds-number-stepper[data-invalid]{
3719
+ --tds-number-stepper-border-color:var(--t-form-border-color-error);
3720
+ --tds-number-stepper-border-color-hover:var(--t-form-border-color-error-hover);
3721
+ --tds-number-stepper-border-color-active:var(--t-form-border-color-error-hover);
3722
+ --tds-number-stepper-background-color:var(--t-form-background-color-error);
3723
+ --tds-number-stepper-description-color:var(--t-text-color-status-error);
3724
+ --tds-number-stepper-description-invalid-icon-display:inline-block;
3508
3725
  }
3509
- }
3510
3726
 
3511
- @keyframes tds-date-picker-popover-exit{
3512
- to{
3513
- opacity:0;
3514
- transform:translateY(-8px);
3727
+ .tds-number-stepper[data-disabled]{
3728
+ --tds-number-stepper-border-color:var(--t-form-border-color-disabled);
3729
+ --tds-number-stepper-background-color:var(--t-form-background-color-disabled);
3730
+ --tds-number-stepper-color:var(--t-form-color-disabled);
3515
3731
  }
3516
- }
3517
3732
 
3518
- @media (prefers-reduced-motion: reduce){
3519
- .tds-date-picker-popover[data-entering],.tds-date-picker-popover[data-exiting]{
3520
- animation:none;
3733
+ .tds-number-stepper[data-disabled] .tds-number-stepper-label{
3734
+ color:var(--t-form-color-disabled);
3521
3735
  }
3522
- }
3523
3736
 
3524
- .tds-date-picker-overlay{
3525
- position:absolute;
3526
- inset:0;
3527
- z-index:1;
3528
- display:flex;
3529
- background:var(--t-surface-color-card);
3530
- }
3531
-
3532
- .tds-date-picker-overlay-list{
3533
- display:grid;
3534
- gap:var(--t-spacing-half);
3535
- padding-inline:var(--tds-date-picker-popover-padding);
3536
- outline:0;
3537
- }
3737
+ .tds-number-stepper[data-disabled] .tds-number-stepper-field{
3738
+ cursor:not-allowed;
3739
+ }
3538
3740
 
3539
- .tds-date-picker-overlay--month .tds-date-picker-overlay-list{
3540
- flex:1;
3541
- grid-template-rows:repeat(4, 1fr);
3542
- grid-template-columns:repeat(3, 1fr);
3741
+ .tds-number-stepper--lg{
3742
+ --tds-number-stepper-min-height:var(--t-container-size-lg);
3743
+ --tds-number-stepper-font-size:var(--t-font-size-lg);
3744
+ --tds-number-stepper-button-offset:5px;
3745
+ --tds-number-stepper-button-gap:4px;
3543
3746
  }
3544
3747
 
3545
- .tds-date-picker-overlay--year .tds-date-picker-overlay-list{
3546
- flex:1;
3547
- grid-template-columns:repeat(4, 1fr);
3548
- grid-auto-rows:3rem;
3549
- overflow-y:auto;
3748
+ .tds-number-stepper-label{
3749
+ font-size:var(--t-font-size-md);
3750
+ font-weight:var(--t-font-weight-normal);
3751
+ color:var(--t-text-color);
3752
+ cursor:default;
3550
3753
  }
3551
3754
 
3552
- .tds-date-picker-overlay-cell{
3755
+ .tds-number-stepper-field{
3553
3756
  display:flex;
3757
+ gap:var(--tds-number-stepper-button-gap);
3554
3758
  align-items:center;
3555
- justify-content:center;
3759
+ inline-size:100%;
3760
+ min-block-size:var(--tds-number-stepper-min-height);
3556
3761
  font-family:inherit;
3557
- font-size:var(--t-font-size-md);
3558
- color:var(--t-text-color);
3762
+ font-size:var(--tds-number-stepper-font-size);
3763
+ line-height:1;
3764
+ color:var(--tds-number-stepper-color);
3765
+ -webkit-appearance:none;
3766
+ -moz-appearance:none;
3767
+ appearance:none;
3559
3768
  cursor:default;
3560
- outline:0;
3561
- background:transparent;
3562
- border:0;
3563
- border-radius:var(--t-border-radius-sm);
3769
+ outline:var(--t-focus-ring-width) solid transparent;
3770
+ outline-offset:0;
3771
+ background-color:var(--tds-number-stepper-background-color);
3772
+ border:var(--t-form-border-width) solid var(--tds-number-stepper-border-color);
3773
+ border-radius:var(--t-form-border-radius);
3564
3774
  }
3565
3775
 
3566
- .tds-date-picker-overlay-cell[data-hovered]{
3567
- background:var(--t-fill-color-neutral-070);
3776
+ .tds-number-stepper-field[data-hovered]:not([data-focus-visible],[data-focus-within],[data-disabled]){
3777
+ border-color:var(--tds-number-stepper-border-color-hover);
3568
3778
  }
3569
3779
 
3570
- .tds-date-picker-overlay-cell[data-selected]{
3571
- color:var(--t-text-color-inverted);
3572
- background:var(--t-fill-color-interaction);
3780
+ .tds-number-stepper-field[data-focus-within]{
3781
+ outline-color:var(--t-focus-ring-color);
3782
+ outline-offset:var(--t-focus-ring-offset);
3783
+ border-color:var(--tds-number-stepper-border-color-active);
3573
3784
  }
3574
3785
 
3575
- .tds-date-picker-overlay-cell[data-focus-visible]{
3576
- outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
3577
- outline-offset:var(--t-focus-ring-offset);
3786
+ .tds-number-stepper-field:has([readonly]){
3787
+ --tds-number-stepper-background-color:var(--t-form-background-color-readonly);
3578
3788
  }
3579
3789
 
3580
- .tds-date-picker-calendar-heading{
3790
+ .tds-number-stepper-field[data-focus-within]:has([readonly]){
3791
+ border-color:var(--t-form-border-color-hover);
3792
+ }
3793
+
3794
+ .tds-number-stepper-input{
3581
3795
  display:flex;
3582
3796
  flex:1;
3583
- gap:var(--t-spacing-half);
3584
3797
  align-items:center;
3585
- justify-content:flex-start;
3586
- }
3587
-
3588
- .tds-date-picker-calendar-overlay-trigger{
3589
- padding:4px 8px;
3798
+ min-inline-size:0;
3799
+ padding-block:var(--tds-number-stepper-padding-block);
3800
+ padding-inline:var(--t-spacing-1);
3590
3801
  font-family:inherit;
3591
- font-size:var(--t-font-size-md);
3592
- font-weight:var(--t-font-weight-semibold);
3593
- color:var(--t-text-color);
3594
- cursor:default;
3802
+ font-size:inherit;
3803
+ color:inherit;
3595
3804
  outline:0;
3596
3805
  background:transparent;
3597
3806
  border:0;
3598
- border-radius:var(--t-border-radius-sm);
3599
3807
  }
3600
3808
 
3601
- .tds-date-picker-calendar-overlay-trigger[data-hovered]{
3602
- background:var(--t-fill-color-neutral-070);
3603
- }
3604
-
3605
- .tds-date-picker-calendar-overlay-trigger[data-focus-visible]{
3606
- outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
3607
- outline-offset:var(--t-focus-ring-offset);
3809
+ .tds-number-stepper-input::-webkit-inner-spin-button,.tds-number-stepper-input::-webkit-outer-spin-button{
3810
+ margin:0;
3811
+ -webkit-appearance:none;
3812
+ appearance:none;
3608
3813
  }
3609
3814
 
3610
- .tds-date-picker-calendar{
3611
- inline-size:-moz-fit-content;
3612
- inline-size:fit-content;
3815
+ .tds-number-stepper-button{
3816
+ flex-shrink:0;
3817
+ align-self:center;
3818
+ inline-size:calc(var(--tds-number-stepper-min-height) - (var(--tds-number-stepper-button-offset) * 2));
3819
+ block-size:calc(var(--tds-number-stepper-min-height) - (var(--tds-number-stepper-button-offset) * 2));
3820
+ padding:0;
3613
3821
  }
3614
3822
 
3615
- .tds-date-picker-calendar-body{
3616
- position:relative;
3617
- padding:var(--tds-date-picker-popover-padding);
3618
- padding-block-start:0;
3619
- }
3823
+ .tds-number-stepper-button:last-of-type{
3824
+ margin-inline-end:var(--tds-number-stepper-button-offset);
3825
+ }
3620
3826
 
3621
- .tds-date-picker-calendar-header{
3827
+ .tds-number-stepper-description{
3622
3828
  display:flex;
3623
- align-items:center;
3624
- justify-content:space-between;
3625
- padding:var(--tds-date-picker-popover-padding);
3829
+ gap:var(--t-spacing-half);
3830
+ align-items:flex-start;
3831
+ margin:0;
3832
+ font-size:var(--t-font-size-sm);
3833
+ line-height:1.35;
3834
+ color:var(--tds-number-stepper-description-color, var(--t-text-color-secondary));
3835
+ cursor:text;
3626
3836
  }
3627
3837
 
3628
- .tds-date-picker-calendar-title{
3629
- padding:4px 8px;
3630
- font-size:var(--t-font-size-md);
3631
- font-weight:var(--t-font-weight-semibold);
3838
+ .tds-number-stepper-description-invalid-icon{
3839
+ display:var(--tds-number-stepper-description-invalid-icon-display, none);
3840
+ flex-shrink:0;
3841
+ margin-block-start:calc(.5lh - .5em);
3842
+ line-height:1.35;
3632
3843
  }
3633
3844
 
3634
- .tds-date-picker-calendar-title--visually-hidden{
3635
- position:absolute;
3636
- inline-size:1px;
3637
- block-size:1px;
3638
- padding:0;
3639
- margin:-1px;
3640
- overflow:hidden;
3641
- white-space:nowrap;
3642
- border:0;
3643
- clip-path:inset(50%);
3644
- }
3845
+ .tds-date-picker{
3846
+ --tds-date-picker-border-color:var(--t-form-border-color);
3847
+ --tds-date-picker-border-color-hover:var(--t-form-border-color-hover);
3848
+ --tds-date-picker-border-color-active:var(--t-form-border-color-focus);
3849
+ --tds-date-picker-background-color:var(--t-form-background-color);
3850
+ --tds-date-picker-color:var(--t-form-color);
3851
+ --tds-date-picker-placeholder-color:var(--t-form-placeholder-color);
3852
+ --tds-date-picker-font-size:var(--t-font-size-md);
3853
+ --tds-date-picker-min-height:var(--t-container-size-md);
3854
+ --tds-date-picker-padding-block:6px;
3855
+ --tds-date-picker-button-offset:4px;
3856
+ --tds-date-picker-description-color:var(--t-text-color-secondary);
3857
+ --tds-date-picker-description-invalid-icon-display:none;
3645
3858
 
3646
- .tds-date-picker-calendar-nav{
3859
+ position:relative;
3647
3860
  display:flex;
3648
- align-items:center;
3649
- justify-content:center;
3650
- padding:var(--t-spacing-half);
3651
- color:var(--t-text-color);
3652
- cursor:default;
3653
- outline:0;
3654
- background:transparent;
3655
- border:0;
3656
- border-radius:var(--t-border-radius-sm);
3861
+ flex-direction:column;
3862
+ gap:var(--t-spacing-half);
3657
3863
  }
3658
3864
 
3659
- .tds-date-picker-calendar-nav[data-hovered]{
3660
- background:var(--t-fill-color-neutral-070);
3865
+ .tds-date-picker[data-required] .tds-date-picker-label::after{
3866
+ margin-left:.25ch;
3867
+ color:var(--t-text-color-status-error);
3868
+ content:"*";
3661
3869
  }
3662
3870
 
3663
- .tds-date-picker-calendar-nav[data-pressed]{
3664
- background:var(--t-fill-color-button-interaction-ghost-active);
3871
+ .tds-date-picker[data-invalid]{
3872
+ --tds-date-picker-border-color:var(--t-form-border-color-error);
3873
+ --tds-date-picker-border-color-hover:var(--t-form-border-color-error-hover);
3874
+ --tds-date-picker-border-color-active:var(--t-form-border-color-error-hover);
3875
+ --tds-date-picker-background-color:var(--t-form-background-color-error);
3876
+ --tds-date-picker-description-color:var(--t-text-color-status-error);
3877
+ --tds-date-picker-description-invalid-icon-display:inline-block;
3665
3878
  }
3666
3879
 
3667
- .tds-date-picker-calendar-nav[data-focus-visible]{
3668
- outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
3669
- outline-offset:var(--t-focus-ring-offset);
3880
+ .tds-date-picker[data-disabled]{
3881
+ --tds-date-picker-border-color:var(--t-form-border-color-disabled);
3882
+ --tds-date-picker-background-color:var(--t-form-background-color-disabled);
3883
+ --tds-date-picker-color:var(--t-form-color-disabled);
3884
+ --tds-date-picker-placeholder-color:var(--t-form-color-disabled);
3670
3885
  }
3671
3886
 
3672
- .tds-date-picker-calendar-nav[data-disabled]{
3673
- color:var(--t-form-color-disabled);
3674
- cursor:not-allowed;
3675
- }
3887
+ .tds-date-picker[data-disabled] .tds-date-picker-field{
3888
+ cursor:not-allowed;
3889
+ }
3676
3890
 
3677
- .tds-date-picker-calendar-grid{
3678
- border-collapse:collapse;
3891
+ .tds-date-picker--lg{
3892
+ --tds-date-picker-min-height:var(--t-container-size-lg);
3893
+ --tds-date-picker-font-size:var(--t-font-size-lg);
3894
+ --tds-date-picker-button-offset:5px;
3679
3895
  }
3680
3896
 
3681
- .tds-date-picker-calendar-header-cell{
3682
- padding-block:var(--t-spacing-half);
3683
- font-size:var(--t-font-size-sm);
3897
+ .tds-date-picker-label{
3898
+ font-size:var(--t-font-size-md);
3684
3899
  font-weight:var(--t-font-weight-normal);
3685
- color:var(--t-text-color-secondary);
3686
- text-align:center;
3900
+ color:var(--t-text-color);
3901
+ cursor:default;
3687
3902
  }
3688
3903
 
3689
- .tds-date-picker-calendar-cell{
3904
+ .tds-date-picker-field{
3690
3905
  display:flex;
3691
3906
  align-items:center;
3692
- justify-content:center;
3693
- inline-size:2.25rem;
3694
- block-size:2.25rem;
3695
- font-size:var(--t-font-size-md);
3696
- color:var(--t-text-color);
3697
- cursor:default;
3698
- outline:0;
3699
- border-radius:var(--t-border-radius-sm);
3907
+ inline-size:100%;
3908
+ min-block-size:var(--tds-date-picker-min-height);
3909
+ font-family:inherit;
3910
+ font-size:var(--tds-date-picker-font-size);
3911
+ line-height:1;
3912
+ color:var(--tds-date-picker-color);
3913
+ -webkit-appearance:none;
3914
+ -moz-appearance:none;
3915
+ appearance:none;
3916
+ cursor:text;
3917
+ outline:var(--t-focus-ring-width) solid transparent;
3918
+ outline-offset:0;
3919
+ background-color:var(--tds-date-picker-background-color);
3920
+ border:var(--t-form-border-width) solid var(--tds-date-picker-border-color);
3921
+ border-radius:var(--t-form-border-radius);
3700
3922
  }
3701
3923
 
3702
- .tds-date-picker-calendar-cell[data-hovered]{
3703
- background:var(--t-fill-color-neutral-070);
3704
- }
3705
-
3706
- .tds-date-picker-calendar-cell[data-pressed]{
3707
- background:var(--t-fill-color-button-interaction-ghost-active);
3708
- }
3709
-
3710
- .tds-date-picker-calendar-cell[data-selected]{
3711
- color:var(--t-text-color-inverted);
3712
- background:var(--t-fill-color-interaction);
3924
+ .tds-date-picker-field[data-hovered]:not([data-focus-visible],[data-focus-within],[data-disabled]){
3925
+ border-color:var(--tds-date-picker-border-color-hover);
3713
3926
  }
3714
3927
 
3715
- .tds-date-picker-calendar-cell[data-focus-visible]{
3716
- outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
3928
+ .tds-date-picker-field[data-focus-within]{
3929
+ outline-color:var(--t-focus-ring-color);
3717
3930
  outline-offset:var(--t-focus-ring-offset);
3931
+ border-color:var(--tds-date-picker-border-color-active);
3718
3932
  }
3719
3933
 
3720
- .tds-date-picker-calendar-cell[data-unavailable]{
3721
- color:var(--t-text-color-secondary);
3722
- text-decoration:line-through;
3723
- cursor:not-allowed;
3724
- }
3725
-
3726
- .tds-date-picker-calendar-cell[data-disabled]{
3727
- color:var(--t-form-color-disabled);
3728
- cursor:not-allowed;
3729
- }
3730
-
3731
- .tds-date-picker-calendar-cell[data-outside-month]{
3732
- color:var(--t-text-color-secondary);
3934
+ .tds-date-picker-field:has(.tds-date-picker-input[data-readonly]){
3935
+ color:var(--t-form-color-readonly);
3936
+ background-color:var(--t-form-background-color-readonly);
3937
+ border-color:var(--t-form-border-color-readonly);
3733
3938
  }
3734
3939
 
3735
- .tds-checkbox-group{
3736
- --tds-checkbox-group-font-size:var(--t-font-size-md);
3737
- --tds-checkbox-group-line-height:1.4;
3738
- --tds-checkbox-group-gap:var(--t-spacing-1);
3739
-
3740
- --tds-checkbox-group-legend-margin-bottom:var(--tds-checkbox-group-gap);
3940
+ .tds-date-picker-field[data-hovered]:has(.tds-date-picker-input[data-readonly]){
3941
+ border-color:var(--t-form-border-color-readonly);
3942
+ }
3741
3943
 
3742
- --tds-checkbox-group-description-font-size:var(--t-font-size-sm);
3743
- --tds-checkbox-group-description-line-height:1.35;
3744
- --tds-checkbox-group-description-color:var(--t-text-color-secondary);
3745
- --tds-checkbox-group-description-invalid-icon-display:none;
3746
- display:flex;
3747
- flex-direction:column;
3748
- gap:var(--tds-checkbox-group-gap);
3749
- padding:0;
3750
- margin:0;
3944
+ .tds-date-picker-field[data-focus-within]:has(.tds-date-picker-input[data-readonly]){
3945
+ outline-color:var(--t-focus-ring-color);
3946
+ outline-offset:var(--t-focus-ring-offset);
3947
+ border-color:var(--t-form-border-color-hover);
3948
+ }
3751
3949
 
3752
- font-size:var(--tds-checkbox-group-font-size);
3753
- line-height:var(--tds-checkbox-group-line-height);
3754
- border:0;
3950
+ .tds-date-picker-input{
3951
+ flex:1;
3952
+ padding-block:var(--tds-date-picker-padding-block);
3953
+ padding-inline-start:var(--t-spacing-1);
3954
+ font-variant-numeric:tabular-nums;
3755
3955
  }
3756
3956
 
3757
- .tds-checkbox-group legend{
3758
- padding:0;
3759
- margin-bottom:var(--tds-checkbox-group-legend-margin-bottom);
3760
- }
3957
+ .tds-date-picker-segment{
3958
+ padding-inline:2px;
3959
+ caret-color:transparent;
3960
+ border-radius:var(--t-border-radius-sm);
3961
+ }
3761
3962
 
3762
- .tds-checkbox-group:has(.tds-checkbox-group-description){
3763
- --tds-checkbox-group-legend-margin-bottom:var(--t-spacing-fourth);
3963
+ .tds-date-picker-segment[data-placeholder]{
3964
+ color:var(--tds-date-picker-placeholder-color);
3764
3965
  }
3765
3966
 
3766
- .tds-checkbox-group[aria-invalid="true"]{
3767
- --tds-checkbox-group-description-color:var(--t-text-color-status-error);
3768
- --tds-checkbox-group-description-invalid-icon-display:inline-block;
3967
+ .tds-date-picker-segment[data-focused]{
3968
+ color:var(--t-text-color-inverted);
3969
+ outline:0;
3970
+ background:var(--t-fill-color-interaction);
3769
3971
  }
3770
3972
 
3771
- .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) legend::after{
3772
- margin-left:.25ch;
3773
- color:var(--t-text-color-status-error);
3774
- content:"*";
3775
- }
3776
-
3777
- .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
3778
- content:none;
3779
- }
3780
-
3781
- .tds-checkbox-group-fields{
3782
- display:flex;
3783
- flex-direction:column;
3784
- gap:var(--tds-checkbox-group-gap);
3785
- align-items:flex-start;
3973
+ .tds-date-picker-segment-separator{
3974
+ padding-inline:0;
3975
+ color:var(--tds-date-picker-placeholder-color);
3786
3976
  }
3787
3977
 
3788
- .tds-checkbox-group-description{
3978
+ .tds-date-picker-description{
3789
3979
  display:flex;
3790
3980
  gap:var(--t-spacing-half);
3791
3981
  align-items:flex-start;
3792
3982
  margin:0;
3793
- font-size:var(--tds-checkbox-group-description-font-size);
3794
- line-height:var(--tds-checkbox-group-description-line-height);
3795
- color:var(--tds-checkbox-group-description-color);
3983
+ font-size:var(--t-font-size-sm);
3984
+ line-height:1.35;
3985
+ color:var(--tds-date-picker-description-color, var(--t-text-color-secondary));
3796
3986
  cursor:text;
3797
3987
  }
3798
3988
 
3799
- .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
3800
- display:var(--tds-checkbox-group-description-invalid-icon-display);
3989
+ .tds-date-picker-description .tds-date-picker-description-invalid-icon{
3990
+ display:var(--tds-date-picker-description-invalid-icon-display, none);
3801
3991
  flex-shrink:0;
3802
- margin-top:calc(.5lh - .5em);
3803
- line-height:var(--tds-checkbox-group-description-line-height);
3992
+ margin-block-start:calc(.5lh - .5em);
3993
+ line-height:1.35;
3804
3994
  }
3805
3995
 
3806
- .tds-checkbox-group--sm{
3807
- --tds-checkbox-group-line-height:1.35;
3808
- --tds-checkbox-group-font-size:var(--t-font-size-sm);
3809
- --tds-checkbox-group-description-font-size:var(--t-font-size-xs);
3810
- --tds-checkbox-group-description-line-height:1.3;
3996
+ .tds-date-picker-button{
3997
+ flex-shrink:0;
3998
+ align-self:center;
3999
+ inline-size:calc(var(--tds-date-picker-min-height) - (var(--tds-date-picker-button-offset) * 2));
4000
+ block-size:calc(var(--tds-date-picker-min-height) - (var(--tds-date-picker-button-offset) * 2));
4001
+ padding:0;
4002
+ margin-inline-end:var(--tds-date-picker-button-offset);
3811
4003
  }
3812
4004
 
3813
- .tds-combo-box{
3814
- --tds-combo-box-border-color:var(--t-form-border-color);
3815
- --tds-combo-box-border-color-hover:var(--t-form-border-color-hover);
3816
- --tds-combo-box-border-color-active:var(--t-form-border-color-focus);
3817
- --tds-combo-box-background-color:var(--t-form-background-color);
3818
- --tds-combo-box-color:var(--t-form-color);
3819
- --tds-combo-box-placeholder-color:var(--t-form-placeholder-color);
3820
- --tds-combo-box-font-size:var(--t-font-size-md);
3821
- --tds-combo-box-min-height:var(--t-container-size-md);
3822
- --tds-combo-box-padding-block:6px;
3823
- --tds-combo-box-button-offset:4px;
3824
- --tds-combo-box-description-color:var(--t-text-color-secondary);
3825
- --tds-combo-box-description-invalid-icon-display:none;
4005
+ .tds-date-picker-popover{
4006
+ --tds-date-picker-popover-padding:var(--t-spacing-1-half);
3826
4007
 
3827
4008
  position:relative;
3828
- display:flex;
3829
- flex-direction:column;
3830
- gap:var(--t-spacing-half);
4009
+ overflow:hidden;
4010
+ background:var(--t-surface-color-card);
4011
+ border:1px solid var(--t-border-color);
4012
+ border-radius:var(--t-border-radius);
4013
+ box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
3831
4014
  }
3832
4015
 
3833
- .tds-combo-box[data-required] .tds-combo-box-label::after{
3834
- margin-left:.25ch;
3835
- color:var(--t-text-color-status-error);
3836
- content:"*";
4016
+ .tds-date-picker-popover[data-entering]{
4017
+ animation:tds-date-picker-popover-enter 160ms ease;
3837
4018
  }
3838
4019
 
3839
- .tds-combo-box[data-invalid]{
3840
- --tds-combo-box-border-color:var(--t-form-border-color-error);
3841
- --tds-combo-box-border-color-hover:var(--t-form-border-color-error-hover);
3842
- --tds-combo-box-border-color-active:var(--t-form-border-color-error-hover);
3843
- --tds-combo-box-background-color:var(--t-form-background-color-error);
3844
- --tds-combo-box-description-color:var(--t-text-color-status-error);
3845
- --tds-combo-box-description-invalid-icon-display:inline-block;
4020
+ .tds-date-picker-popover[data-exiting]{
4021
+ animation:tds-date-picker-popover-exit 130ms ease;
3846
4022
  }
3847
4023
 
3848
- .tds-combo-box[data-disabled]{
3849
- --tds-combo-box-border-color:var(--t-form-border-color-disabled);
3850
- --tds-combo-box-background-color:var(--t-form-background-color-disabled);
3851
- --tds-combo-box-color:var(--t-form-color-disabled);
4024
+ @keyframes tds-date-picker-popover-enter{
4025
+ from{
4026
+ opacity:0;
4027
+ transform:translateY(-8px);
3852
4028
  }
4029
+ }
3853
4030
 
3854
- .tds-combo-box[data-disabled] .tds-combo-box-label{
3855
- color:var(--t-form-color-disabled);
3856
- }
4031
+ @keyframes tds-date-picker-popover-exit{
4032
+ to{
4033
+ opacity:0;
4034
+ transform:translateY(-8px);
4035
+ }
4036
+ }
3857
4037
 
3858
- .tds-combo-box[data-disabled] .tds-combo-box-field{
3859
- cursor:not-allowed;
4038
+ @media (prefers-reduced-motion: reduce){
4039
+ .tds-date-picker-popover[data-entering],.tds-date-picker-popover[data-exiting]{
4040
+ animation:none;
3860
4041
  }
4042
+ }
3861
4043
 
3862
- .tds-combo-box[data-open] .tds-combo-box-button > svg{
3863
- transform:rotate(.5turn);
3864
- }
4044
+ .tds-date-picker-overlay{
4045
+ position:absolute;
4046
+ inset:0;
4047
+ z-index:1;
4048
+ display:flex;
4049
+ background:var(--t-surface-color-card);
4050
+ }
3865
4051
 
3866
- .tds-combo-box--lg{
3867
- --tds-combo-box-min-height:var(--t-container-size-lg);
3868
- --tds-combo-box-font-size:var(--t-font-size-lg);
3869
- --tds-combo-box-button-offset:5px;
4052
+ .tds-date-picker-overlay-list{
4053
+ display:grid;
4054
+ gap:var(--t-spacing-half);
4055
+ padding-inline:var(--tds-date-picker-popover-padding);
4056
+ outline:0;
3870
4057
  }
3871
4058
 
3872
- .tds-combo-box-label{
3873
- font-size:var(--t-font-size-md);
3874
- font-weight:var(--t-font-weight-normal);
3875
- color:var(--t-text-color);
3876
- cursor:default;
4059
+ .tds-date-picker-overlay--month .tds-date-picker-overlay-list{
4060
+ flex:1;
4061
+ grid-template-rows:repeat(4, 1fr);
4062
+ grid-template-columns:repeat(3, 1fr);
3877
4063
  }
3878
4064
 
3879
- .tds-combo-box-field{
4065
+ .tds-date-picker-overlay--year .tds-date-picker-overlay-list{
4066
+ flex:1;
4067
+ grid-template-columns:repeat(4, 1fr);
4068
+ grid-auto-rows:3rem;
4069
+ overflow-y:auto;
4070
+ }
4071
+
4072
+ .tds-date-picker-overlay-cell{
3880
4073
  display:flex;
3881
4074
  align-items:center;
3882
- inline-size:100%;
3883
- min-block-size:var(--tds-combo-box-min-height);
4075
+ justify-content:center;
3884
4076
  font-family:inherit;
3885
- font-size:var(--tds-combo-box-font-size);
3886
- line-height:1;
3887
- color:var(--tds-combo-box-color);
3888
- -webkit-appearance:none;
3889
- -moz-appearance:none;
3890
- appearance:none;
4077
+ font-size:var(--t-font-size-md);
4078
+ color:var(--t-text-color);
3891
4079
  cursor:default;
3892
- outline:var(--t-focus-ring-width) solid transparent;
3893
- outline-offset:0;
3894
- background-color:var(--tds-combo-box-background-color);
3895
- border:var(--t-form-border-width) solid var(--tds-combo-box-border-color);
3896
- border-radius:var(--t-form-border-radius);
4080
+ outline:0;
4081
+ background:transparent;
4082
+ border:0;
4083
+ border-radius:var(--t-border-radius-sm);
3897
4084
  }
3898
4085
 
3899
- .tds-combo-box-field[data-hovered]:not([data-focus-visible],[data-focus-within],[data-disabled]){
3900
- border-color:var(--tds-combo-box-border-color-hover);
4086
+ .tds-date-picker-overlay-cell[data-hovered]{
4087
+ background:var(--t-fill-color-neutral-070);
3901
4088
  }
3902
4089
 
3903
- .tds-combo-box-field[data-focus-within]{
3904
- outline-color:var(--t-focus-ring-color);
3905
- outline-offset:var(--t-focus-ring-offset);
3906
- border-color:var(--tds-combo-box-border-color-active);
4090
+ .tds-date-picker-overlay-cell[data-selected]{
4091
+ color:var(--t-text-color-inverted);
4092
+ background:var(--t-fill-color-interaction);
3907
4093
  }
3908
4094
 
3909
- .tds-combo-box-field:has([readonly]){
3910
- --tds-input-border-color:var(--t-form-border-color-readonly);
3911
- --tds-combo-box-background-color:var(--t-form-background-color-readonly);
4095
+ .tds-date-picker-overlay-cell[data-focus-visible]{
4096
+ outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
4097
+ outline-offset:var(--t-focus-ring-offset);
3912
4098
  }
3913
4099
 
3914
- .tds-combo-box-field[data-focus-within]:has([readonly]){
3915
- border-color:var(--t-form-border-color-hover);
3916
- }
3917
-
3918
- .tds-combo-box-input{
4100
+ .tds-date-picker-calendar-heading{
3919
4101
  display:flex;
3920
4102
  flex:1;
4103
+ gap:var(--t-spacing-half);
3921
4104
  align-items:center;
3922
- padding-block:var(--tds-combo-box-padding-block);
3923
- padding-inline-start:var(--t-spacing-1);
4105
+ justify-content:flex-start;
4106
+ }
4107
+
4108
+ .tds-date-picker-calendar-overlay-trigger{
4109
+ padding:4px 8px;
3924
4110
  font-family:inherit;
3925
- font-size:inherit;
3926
- color:inherit;
4111
+ font-size:var(--t-font-size-md);
4112
+ font-weight:var(--t-font-weight-semibold);
4113
+ color:var(--t-text-color);
4114
+ cursor:default;
3927
4115
  outline:0;
3928
4116
  background:transparent;
3929
4117
  border:0;
4118
+ border-radius:var(--t-border-radius-sm);
3930
4119
  }
3931
4120
 
3932
- .tds-combo-box-input::-moz-placeholder{
3933
- color:var(--tds-combo-box-placeholder-color);
3934
- -moz-user-select:none;
3935
- user-select:none;
4121
+ .tds-date-picker-calendar-overlay-trigger[data-hovered]{
4122
+ background:var(--t-fill-color-neutral-070);
3936
4123
  }
3937
4124
 
3938
- .tds-combo-box-input::placeholder{
3939
- color:var(--tds-combo-box-placeholder-color);
3940
- -webkit-user-select:none;
3941
- -moz-user-select:none;
3942
- user-select:none;
4125
+ .tds-date-picker-calendar-overlay-trigger[data-focus-visible]{
4126
+ outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
4127
+ outline-offset:var(--t-focus-ring-offset);
3943
4128
  }
3944
4129
 
3945
- .tds-combo-box-button{
3946
- flex-shrink:0;
3947
- align-self:center;
3948
- inline-size:calc(var(--tds-combo-box-min-height) - (var(--tds-combo-box-button-offset) * 2));
3949
- block-size:calc(var(--tds-combo-box-min-height) - (var(--tds-combo-box-button-offset) * 2));
3950
- padding:0;
3951
- margin-inline-end:var(--tds-combo-box-button-offset);
4130
+ .tds-date-picker-calendar{
4131
+ inline-size:-moz-fit-content;
4132
+ inline-size:fit-content;
3952
4133
  }
3953
4134
 
3954
- .tds-combo-box-button > svg{
3955
- inline-size:var(--tds-combo-box-font-size);
3956
- block-size:var(--tds-combo-box-font-size);
3957
- transition:transform var(--t-duration-300) var(--t-ease-in-out);
3958
- }
3959
-
3960
- .tds-combo-box-button:not(.tds-btn){
3961
- display:inline-flex;
3962
- align-items:center;
3963
- justify-content:center;
3964
- inline-size:auto;
3965
- block-size:auto;
3966
- margin-inline-end:.75em;
3967
- color:var(--t-icon-color);
3968
- cursor:default;
3969
- background:transparent;
3970
- border:0;
3971
- }
4135
+ .tds-date-picker-calendar-body{
4136
+ position:relative;
4137
+ padding:var(--tds-date-picker-popover-padding);
4138
+ padding-block-start:0;
4139
+ }
3972
4140
 
3973
- .tds-combo-box-button[data-focus-visible]:not(.tds-btn){
3974
- outline:0;
3975
- }
4141
+ .tds-date-picker-calendar-header{
4142
+ display:flex;
4143
+ align-items:center;
4144
+ justify-content:space-between;
4145
+ padding:var(--tds-date-picker-popover-padding);
4146
+ }
3976
4147
 
3977
- .tds-combo-box-popover{
3978
- width:var(--trigger-width);
3979
- max-block-size:inherit;
3980
- padding:var(--t-spacing-1);
3981
- overflow:auto;
3982
- outline:0;
3983
- scrollbar-color:#0004 #0000;
3984
- scrollbar-width:thin;
3985
- background:var(--t-surface-color-card);
3986
- background-clip:padding-box;
3987
- border:1px solid var(--t-border-color);
3988
- border-radius:var(--t-border-radius);
3989
- box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
4148
+ .tds-date-picker-calendar-title{
4149
+ padding:4px 8px;
4150
+ font-size:var(--t-font-size-md);
4151
+ font-weight:var(--t-font-weight-semibold);
3990
4152
  }
3991
4153
 
3992
- .tds-combo-box-popover[data-entering]{
3993
- animation:tds-combo-box-popover-enter 160ms ease;
3994
- }
4154
+ .tds-date-picker-calendar-title--visually-hidden{
4155
+ position:absolute;
4156
+ inline-size:1px;
4157
+ block-size:1px;
4158
+ padding:0;
4159
+ margin:-1px;
4160
+ overflow:hidden;
4161
+ white-space:nowrap;
4162
+ border:0;
4163
+ clip-path:inset(50%);
4164
+ }
3995
4165
 
3996
- .tds-combo-box-popover[data-exiting]{
3997
- animation:tds-combo-box-popover-exit 130ms ease;
3998
- }
4166
+ .tds-date-picker-calendar-nav{
4167
+ display:flex;
4168
+ align-items:center;
4169
+ justify-content:center;
4170
+ padding:var(--t-spacing-half);
4171
+ color:var(--t-text-color);
4172
+ cursor:default;
4173
+ outline:0;
4174
+ background:transparent;
4175
+ border:0;
4176
+ border-radius:var(--t-border-radius-sm);
4177
+ }
3999
4178
 
4000
- @keyframes tds-combo-box-popover-enter{
4001
- from{
4002
- opacity:0;
4003
- transform:translateY(-8px);
4179
+ .tds-date-picker-calendar-nav[data-hovered]{
4180
+ background:var(--t-fill-color-neutral-070);
4004
4181
  }
4005
- }
4006
4182
 
4007
- @keyframes tds-combo-box-popover-exit{
4008
- to{
4009
- opacity:0;
4010
- transform:translateY(-8px);
4183
+ .tds-date-picker-calendar-nav[data-pressed]{
4184
+ background:var(--t-fill-color-button-interaction-ghost-active);
4011
4185
  }
4012
- }
4013
4186
 
4014
- @media (prefers-reduced-motion: reduce){
4015
- .tds-combo-box-popover[data-entering],.tds-combo-box-popover[data-exiting]{
4016
- animation:none;
4017
- }
4187
+ .tds-date-picker-calendar-nav[data-focus-visible]{
4188
+ outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
4189
+ outline-offset:var(--t-focus-ring-offset);
4190
+ }
4018
4191
 
4019
- .tds-combo-box-button > svg{
4020
- transition:none;
4192
+ .tds-date-picker-calendar-nav[data-disabled]{
4193
+ color:var(--t-form-color-disabled);
4194
+ cursor:not-allowed;
4021
4195
  }
4196
+
4197
+ .tds-date-picker-calendar-grid{
4198
+ border-collapse:collapse;
4022
4199
  }
4023
4200
 
4024
- .tds-combo-box-list{
4025
- padding:0;
4026
- margin:0;
4201
+ .tds-date-picker-calendar-header-cell{
4202
+ padding-block:var(--t-spacing-half);
4203
+ font-size:var(--t-font-size-sm);
4204
+ font-weight:var(--t-font-weight-normal);
4205
+ color:var(--t-text-color-secondary);
4206
+ text-align:center;
4027
4207
  }
4028
4208
 
4029
- .tds-combo-box-list-item{
4030
- display:block;
4031
- padding-block:var(--t-spacing-1);
4032
- padding-inline:var(--t-spacing-2) var(--t-spacing-1);
4033
- overflow:hidden;
4034
- text-overflow:ellipsis;
4035
- font-size:1rem;
4209
+ .tds-date-picker-calendar-cell{
4210
+ display:flex;
4211
+ align-items:center;
4212
+ justify-content:center;
4213
+ inline-size:2.25rem;
4214
+ block-size:2.25rem;
4215
+ font-size:var(--t-font-size-md);
4036
4216
  color:var(--t-text-color);
4037
- white-space:nowrap;
4038
4217
  cursor:default;
4039
- outline-offset:-1px;
4040
- border-radius:var(--t-border-radius);
4218
+ outline:0;
4219
+ border-radius:var(--t-border-radius-sm);
4041
4220
  }
4042
4221
 
4043
- .tds-combo-box-list-item[data-hovered]:not([data-disabled]){
4222
+ .tds-date-picker-calendar-cell[data-hovered]{
4044
4223
  background:var(--t-fill-color-neutral-070);
4045
4224
  }
4046
4225
 
4047
- .tds-combo-box-list-item[data-selected]{
4226
+ .tds-date-picker-calendar-cell[data-pressed]{
4048
4227
  background:var(--t-fill-color-button-interaction-ghost-active);
4049
4228
  }
4050
4229
 
4051
- .tds-combo-box-list-item[data-focus-visible]{
4052
- outline:var(--t-focus-ring-outline);
4053
- outline-offset:-1px;
4230
+ .tds-date-picker-calendar-cell[data-selected]{
4231
+ color:var(--t-text-color-inverted);
4232
+ background:var(--t-fill-color-interaction);
4054
4233
  }
4055
4234
 
4056
- .tds-combo-box-list-item[data-disabled]{
4057
- color:var(--t-form-color-disabled);
4058
- cursor:not-allowed;
4235
+ .tds-date-picker-calendar-cell[data-focus-visible]{
4236
+ outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
4237
+ outline-offset:var(--t-focus-ring-offset);
4059
4238
  }
4060
4239
 
4061
- .tds-combo-box-list-item[data-disabled][data-hovered]{
4062
- background:transparent;
4063
- }
4064
-
4065
- .tds-combo-box-list-section:not(:first-child){
4066
- margin-block-start:var(--t-spacing-half);
4240
+ .tds-date-picker-calendar-cell[data-unavailable]{
4241
+ color:var(--t-text-color-secondary);
4242
+ text-decoration:line-through;
4243
+ cursor:not-allowed;
4067
4244
  }
4068
4245
 
4069
- .tds-combo-box-section-header{
4070
- padding-block:var(--t-spacing-1);
4071
- padding-inline:var(--t-spacing-1);
4072
- font-size:var(--t-font-size-sm);
4073
- font-weight:var(--t-font-weight-semibold);
4074
- color:var(--t-text-color-secondary);
4075
- }
4076
-
4077
- .tds-combo-box-description{
4078
- display:flex;
4079
- gap:var(--t-spacing-half);
4080
- align-items:flex-start;
4081
- margin:0;
4082
- font-size:var(--t-font-size-sm);
4083
- line-height:1.35;
4084
- color:var(--tds-combo-box-description-color, var(--t-text-color-secondary));
4085
- cursor:text;
4086
- }
4246
+ .tds-date-picker-calendar-cell[data-disabled]{
4247
+ color:var(--t-form-color-disabled);
4248
+ cursor:not-allowed;
4249
+ }
4087
4250
 
4088
- .tds-combo-box-description-invalid-icon{
4089
- display:var(--tds-combo-box-description-invalid-icon-display, none);
4090
- flex-shrink:0;
4091
- margin-block-start:calc(.5lh - .5em);
4092
- line-height:1.35;
4093
- }
4251
+ .tds-date-picker-calendar-cell[data-outside-month]{
4252
+ color:var(--t-text-color-secondary);
4253
+ }
4094
4254
 
4095
4255
  .tds-time-field{
4096
4256
  --tds-time-field-border-color:var(--t-form-border-color);
@@ -4240,159 +4400,6 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
4240
4400
  line-height:1.35;
4241
4401
  }
4242
4402
 
4243
- .tds-number-stepper{
4244
- --tds-number-stepper-border-color:var(--t-form-border-color);
4245
- --tds-number-stepper-border-color-hover:var(--t-form-border-color-hover);
4246
- --tds-number-stepper-border-color-active:var(--t-form-border-color-focus);
4247
- --tds-number-stepper-background-color:var(--t-form-background-color);
4248
- --tds-number-stepper-color:var(--t-form-color);
4249
- --tds-number-stepper-font-size:var(--t-font-size-md);
4250
- --tds-number-stepper-min-height:var(--t-container-size-md);
4251
- --tds-number-stepper-padding-block:6px;
4252
- --tds-number-stepper-button-offset:4px;
4253
- --tds-number-stepper-button-gap:2px;
4254
- --tds-number-stepper-description-color:var(--t-text-color-secondary);
4255
- --tds-number-stepper-description-invalid-icon-display:none;
4256
-
4257
- position:relative;
4258
- display:flex;
4259
- flex-direction:column;
4260
- gap:var(--t-spacing-half);
4261
- }
4262
-
4263
- .tds-number-stepper[data-required] .tds-number-stepper-label::after{
4264
- margin-left:.25ch;
4265
- color:var(--t-text-color-status-error);
4266
- content:"*";
4267
- }
4268
-
4269
- .tds-number-stepper[data-invalid]{
4270
- --tds-number-stepper-border-color:var(--t-form-border-color-error);
4271
- --tds-number-stepper-border-color-hover:var(--t-form-border-color-error-hover);
4272
- --tds-number-stepper-border-color-active:var(--t-form-border-color-error-hover);
4273
- --tds-number-stepper-background-color:var(--t-form-background-color-error);
4274
- --tds-number-stepper-description-color:var(--t-text-color-status-error);
4275
- --tds-number-stepper-description-invalid-icon-display:inline-block;
4276
- }
4277
-
4278
- .tds-number-stepper[data-disabled]{
4279
- --tds-number-stepper-border-color:var(--t-form-border-color-disabled);
4280
- --tds-number-stepper-background-color:var(--t-form-background-color-disabled);
4281
- --tds-number-stepper-color:var(--t-form-color-disabled);
4282
- }
4283
-
4284
- .tds-number-stepper[data-disabled] .tds-number-stepper-label{
4285
- color:var(--t-form-color-disabled);
4286
- }
4287
-
4288
- .tds-number-stepper[data-disabled] .tds-number-stepper-field{
4289
- cursor:not-allowed;
4290
- }
4291
-
4292
- .tds-number-stepper--lg{
4293
- --tds-number-stepper-min-height:var(--t-container-size-lg);
4294
- --tds-number-stepper-font-size:var(--t-font-size-lg);
4295
- --tds-number-stepper-button-offset:5px;
4296
- --tds-number-stepper-button-gap:4px;
4297
- }
4298
-
4299
- .tds-number-stepper-label{
4300
- font-size:var(--t-font-size-md);
4301
- font-weight:var(--t-font-weight-normal);
4302
- color:var(--t-text-color);
4303
- cursor:default;
4304
- }
4305
-
4306
- .tds-number-stepper-field{
4307
- display:flex;
4308
- gap:var(--tds-number-stepper-button-gap);
4309
- align-items:center;
4310
- inline-size:100%;
4311
- min-block-size:var(--tds-number-stepper-min-height);
4312
- font-family:inherit;
4313
- font-size:var(--tds-number-stepper-font-size);
4314
- line-height:1;
4315
- color:var(--tds-number-stepper-color);
4316
- -webkit-appearance:none;
4317
- -moz-appearance:none;
4318
- appearance:none;
4319
- cursor:default;
4320
- outline:var(--t-focus-ring-width) solid transparent;
4321
- outline-offset:0;
4322
- background-color:var(--tds-number-stepper-background-color);
4323
- border:var(--t-form-border-width) solid var(--tds-number-stepper-border-color);
4324
- border-radius:var(--t-form-border-radius);
4325
- }
4326
-
4327
- .tds-number-stepper-field[data-hovered]:not([data-focus-visible],[data-focus-within],[data-disabled]){
4328
- border-color:var(--tds-number-stepper-border-color-hover);
4329
- }
4330
-
4331
- .tds-number-stepper-field[data-focus-within]{
4332
- outline-color:var(--t-focus-ring-color);
4333
- outline-offset:var(--t-focus-ring-offset);
4334
- border-color:var(--tds-number-stepper-border-color-active);
4335
- }
4336
-
4337
- .tds-number-stepper-field:has([readonly]){
4338
- --tds-number-stepper-background-color:var(--t-form-background-color-readonly);
4339
- }
4340
-
4341
- .tds-number-stepper-field[data-focus-within]:has([readonly]){
4342
- border-color:var(--t-form-border-color-hover);
4343
- }
4344
-
4345
- .tds-number-stepper-input{
4346
- display:flex;
4347
- flex:1;
4348
- align-items:center;
4349
- min-inline-size:0;
4350
- padding-block:var(--tds-number-stepper-padding-block);
4351
- padding-inline:var(--t-spacing-1);
4352
- font-family:inherit;
4353
- font-size:inherit;
4354
- color:inherit;
4355
- outline:0;
4356
- background:transparent;
4357
- border:0;
4358
- }
4359
-
4360
- .tds-number-stepper-input::-webkit-inner-spin-button,.tds-number-stepper-input::-webkit-outer-spin-button{
4361
- margin:0;
4362
- -webkit-appearance:none;
4363
- appearance:none;
4364
- }
4365
-
4366
- .tds-number-stepper-button{
4367
- flex-shrink:0;
4368
- align-self:center;
4369
- inline-size:calc(var(--tds-number-stepper-min-height) - (var(--tds-number-stepper-button-offset) * 2));
4370
- block-size:calc(var(--tds-number-stepper-min-height) - (var(--tds-number-stepper-button-offset) * 2));
4371
- padding:0;
4372
- }
4373
-
4374
- .tds-number-stepper-button:last-of-type{
4375
- margin-inline-end:var(--tds-number-stepper-button-offset);
4376
- }
4377
-
4378
- .tds-number-stepper-description{
4379
- display:flex;
4380
- gap:var(--t-spacing-half);
4381
- align-items:flex-start;
4382
- margin:0;
4383
- font-size:var(--t-font-size-sm);
4384
- line-height:1.35;
4385
- color:var(--tds-number-stepper-description-color, var(--t-text-color-secondary));
4386
- cursor:text;
4387
- }
4388
-
4389
- .tds-number-stepper-description-invalid-icon{
4390
- display:var(--tds-number-stepper-description-invalid-icon-display, none);
4391
- flex-shrink:0;
4392
- margin-block-start:calc(.5lh - .5em);
4393
- line-height:1.35;
4394
- }
4395
-
4396
4403
  .t-banner{
4397
4404
  --t-banner-font-size:var(--t-font-size-md);
4398
4405
  --t-banner-font-color:var(--t-text-color);