@planningcenter/tapestry 3.2.2 → 3.2.3-qa-839.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (101) hide show
  1. package/dist/components/button/BaseButton.d.ts +4 -0
  2. package/dist/components/button/BaseButton.d.ts.map +1 -1
  3. package/dist/components/button/BaseButton.js.map +1 -1
  4. package/dist/components/button/Button.d.ts +2 -0
  5. package/dist/components/button/Button.d.ts.map +1 -1
  6. package/dist/components/button/Button.js.map +1 -1
  7. package/dist/components/button/DropdownButton.d.ts +2 -0
  8. package/dist/components/button/DropdownButton.d.ts.map +1 -1
  9. package/dist/components/button/DropdownButton.js.map +1 -1
  10. package/dist/components/button/IconButton.d.ts +4 -0
  11. package/dist/components/button/IconButton.d.ts.map +1 -1
  12. package/dist/components/button/IconButton.js.map +1 -1
  13. package/dist/components/button/LoadingButton.d.ts +2 -0
  14. package/dist/components/button/LoadingButton.d.ts.map +1 -1
  15. package/dist/components/button/LoadingButton.js.map +1 -1
  16. package/dist/components/button/PageHeaderActionsDropdownButton.d.ts +2 -0
  17. package/dist/components/button/PageHeaderActionsDropdownButton.d.ts.map +1 -1
  18. package/dist/components/button/PageHeaderActionsDropdownButton.js.map +1 -1
  19. package/dist/components/checkbox/Checkbox.d.ts +4 -0
  20. package/dist/components/checkbox/Checkbox.d.ts.map +1 -1
  21. package/dist/components/checkbox/Checkbox.js.map +1 -1
  22. package/dist/components/checkbox-group/CheckboxGroup.d.ts +4 -0
  23. package/dist/components/checkbox-group/CheckboxGroup.d.ts.map +1 -1
  24. package/dist/components/checkbox-group/CheckboxGroup.js.map +1 -1
  25. package/dist/components/combo-box/ComboBox.d.ts +4 -2
  26. package/dist/components/combo-box/ComboBox.d.ts.map +1 -1
  27. package/dist/components/combo-box/ComboBox.js +5 -3
  28. package/dist/components/combo-box/ComboBox.js.map +1 -1
  29. package/dist/components/date-picker/DatePicker.d.ts.map +1 -1
  30. package/dist/components/date-picker/DatePicker.js +71 -122
  31. package/dist/components/date-picker/DatePicker.js.map +1 -1
  32. package/dist/components/link/BaseLink.js +1 -1
  33. package/dist/components/link/BaseLink.js.map +1 -1
  34. package/dist/components/link/IconLink.d.ts +2 -0
  35. package/dist/components/link/IconLink.d.ts.map +1 -1
  36. package/dist/components/link/IconLink.js.map +1 -1
  37. package/dist/components/page-header/PageHeader.d.ts +6 -3
  38. package/dist/components/page-header/PageHeader.d.ts.map +1 -1
  39. package/dist/components/page-header/PageHeader.js.map +1 -1
  40. package/dist/components/radio/Radio.d.ts +3 -0
  41. package/dist/components/radio/Radio.d.ts.map +1 -1
  42. package/dist/components/radio/Radio.js.map +1 -1
  43. package/dist/components/radio-group/RadioGroup.d.ts +4 -0
  44. package/dist/components/radio-group/RadioGroup.d.ts.map +1 -1
  45. package/dist/components/radio-group/RadioGroup.js.map +1 -1
  46. package/dist/components/select/Select.d.ts +59 -9
  47. package/dist/components/select/Select.d.ts.map +1 -1
  48. package/dist/components/select/Select.js.map +1 -1
  49. package/dist/components/time-field/TimeField.d.ts +8 -18
  50. package/dist/components/time-field/TimeField.d.ts.map +1 -1
  51. package/dist/components/time-field/TimeField.js +2 -2
  52. package/dist/components/time-field/TimeField.js.map +1 -1
  53. package/dist/components/time-field/index.d.ts +1 -1
  54. package/dist/components/time-field/index.d.ts.map +1 -1
  55. package/dist/components/toggle-switch/ToggleSwitch.d.ts +10 -4
  56. package/dist/components/toggle-switch/ToggleSwitch.d.ts.map +1 -1
  57. package/dist/components/toggle-switch/ToggleSwitch.js.map +1 -1
  58. package/dist/index.css +19 -21
  59. package/dist/index.css.map +1 -1
  60. package/dist/reactRender.css +755 -777
  61. package/dist/reactRender.css.map +1 -1
  62. package/dist/reactRenderLegacy.css +755 -777
  63. package/dist/reactRenderLegacy.css.map +1 -1
  64. package/dist/unstable.css +50 -72
  65. package/dist/unstable.css.map +1 -1
  66. package/dist/utilities/buttonLinkShared.d.ts +5 -0
  67. package/dist/utilities/buttonLinkShared.d.ts.map +1 -1
  68. package/dist/utilities/buttonLinkShared.js.map +1 -1
  69. package/package.json +5 -5
  70. package/dist/ext/@react-aria/focus/dist/FocusScope.js +0 -664
  71. package/dist/ext/@react-aria/focus/dist/FocusScope.js.map +0 -1
  72. package/dist/ext/@react-aria/interactions/dist/focusSafely.js +0 -38
  73. package/dist/ext/@react-aria/interactions/dist/focusSafely.js.map +0 -1
  74. package/dist/ext/@react-aria/interactions/dist/useFocusVisible.js +0 -165
  75. package/dist/ext/@react-aria/interactions/dist/useFocusVisible.js.map +0 -1
  76. package/dist/ext/@react-aria/interactions/dist/utils.js +0 -6
  77. package/dist/ext/@react-aria/interactions/dist/utils.js.map +0 -1
  78. package/dist/ext/@react-aria/utils/dist/DOMFunctions.js +0 -38
  79. package/dist/ext/@react-aria/utils/dist/DOMFunctions.js.map +0 -1
  80. package/dist/ext/@react-aria/utils/dist/ShadowTreeWalker.js +0 -193
  81. package/dist/ext/@react-aria/utils/dist/ShadowTreeWalker.js.map +0 -1
  82. package/dist/ext/@react-aria/utils/dist/domHelpers.js +0 -20
  83. package/dist/ext/@react-aria/utils/dist/domHelpers.js.map +0 -1
  84. package/dist/ext/@react-aria/utils/dist/focusWithoutScrolling.js +0 -66
  85. package/dist/ext/@react-aria/utils/dist/focusWithoutScrolling.js.map +0 -1
  86. package/dist/ext/@react-aria/utils/dist/isElementVisible.js +0 -39
  87. package/dist/ext/@react-aria/utils/dist/isElementVisible.js.map +0 -1
  88. package/dist/ext/@react-aria/utils/dist/isFocusable.js +0 -49
  89. package/dist/ext/@react-aria/utils/dist/isFocusable.js.map +0 -1
  90. package/dist/ext/@react-aria/utils/dist/isVirtualEvent.js +0 -25
  91. package/dist/ext/@react-aria/utils/dist/isVirtualEvent.js.map +0 -1
  92. package/dist/ext/@react-aria/utils/dist/openLink.js +0 -42
  93. package/dist/ext/@react-aria/utils/dist/openLink.js.map +0 -1
  94. package/dist/ext/@react-aria/utils/dist/platform.js +0 -59
  95. package/dist/ext/@react-aria/utils/dist/platform.js.map +0 -1
  96. package/dist/ext/@react-aria/utils/dist/runAfterTransition.js +0 -91
  97. package/dist/ext/@react-aria/utils/dist/runAfterTransition.js.map +0 -1
  98. package/dist/ext/@react-aria/utils/dist/useLayoutEffect.js +0 -17
  99. package/dist/ext/@react-aria/utils/dist/useLayoutEffect.js.map +0 -1
  100. package/dist/ext/@react-stately/flags/dist/import.js +0 -7
  101. package/dist/ext/@react-stately/flags/dist/import.js.map +0 -1
@@ -1,3 +1,197 @@
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;
11
+
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);
16
+
17
+ --tds-checkbox-label-color:var(--t-form-color);
18
+
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;
23
+
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
+ }
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
+ }
43
+
44
+ .tds-checkbox tds-indeterminate{
45
+ display:flex;
46
+ }
47
+
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);
65
+ }
66
+
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);
95
+ }
96
+
97
+ :is(.tds-checkbox input[type="checkbox"]):disabled{
98
+ pointer-events:none;
99
+ }
100
+
101
+ @media (prefers-reduced-motion: reduce){
102
+
103
+ .tds-checkbox input[type="checkbox"]{
104
+ --tds-checkbox-transition-property:none;
105
+ }
106
+ }
107
+
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
+ }
114
+
115
+ :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
116
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
117
+ --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
118
+ }
119
+
120
+ .tds-checkbox:has(input:checked){
121
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
122
+ }
123
+
124
+ .tds-checkbox:has(input:indeterminate){
125
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
126
+ }
127
+
128
+ .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
129
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
130
+ --tds-checkbox-description-color:var(--t-text-color-status-error);
131
+ --tds-checkbox-description-invalid-icon-display:inline-block;
132
+ }
133
+
134
+ :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
135
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
136
+ --tds-checkbox-input-background-color:var(--t-form-background-color-error);
137
+ }
138
+
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);
142
+ }
143
+
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);
147
+ }
148
+
149
+ .tds-checkbox:has(input:required) label::after{
150
+ margin-left:.25ch;
151
+ color:var(--t-text-color-status-error);
152
+ content:"*";
153
+ }
154
+
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);
158
+
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
+ }
163
+
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);
166
+ }
167
+
168
+ .tds-checkbox-description{
169
+ display:flex;
170
+ grid-area:2 / 2;
171
+ gap:var(--t-spacing-half);
172
+ 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;
178
+ }
179
+
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);
185
+ }
186
+
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;
193
+ }
194
+
1
195
  @layer t-critical{
2
196
  tds-page-header:not(.hydrated){
3
197
  display:none;
@@ -285,136 +479,196 @@
285
479
  }
286
480
  }
287
481
 
288
- .tds-radio{
289
- --tds-radio-font-size:var(--t-font-size-md);
290
- --tds-radio-cursor:pointer;
291
- --tds-radio-line-height:1.4;
292
- --tds-radio-transition-property:border-width;
293
-
294
- --tds-radio-input-size:var(--t-element-size-md);
295
- --tds-radio-input-border-radius:var(--t-border-radius-round);
296
- --tds-radio-input-border-color:var(--t-form-border-color);
297
- --tds-radio-input-border-width:var(--t-form-border-width);
298
- --tds-radio-input-background-color:transparent;
299
-
300
- --tds-radio-label-color:var(--t-form-color);
482
+ .tds-input:has(textarea){
483
+ --tds-input-padding-block:6px;
484
+ --tds-input-resizer-size:var(--t-element-size-sm);
485
+ --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");
486
+ }
301
487
 
302
- --tds-radio-description-font-size:var(--t-font-size-sm);
303
- --tds-radio-description-line-height:1.35;
304
- --tds-radio-description-color:var(--t-text-color-secondary);
488
+ @supports (x: attr(x type(*))){
305
489
 
306
- position:relative;
307
- display:inline-grid;
308
- grid-template-columns:auto;
309
- grid-auto-columns:1fr;
310
- gap:var(--t-spacing-fourth) var(--t-spacing-1);
311
- line-height:var(--tds-radio-line-height);
312
- cursor:var(--tds-radio-cursor);
313
- -webkit-user-select:none;
314
- -moz-user-select:none;
315
- user-select:none;
490
+ .tds-input:has(textarea){
491
+ --tds-input-min-height:calc((attr(rows type(<number>), 3) * 1lh) + (var(--tds-input-padding-block) * 2) + 2px);
316
492
  }
317
-
318
- .tds-radio label{
319
- grid-area:1 / 2;
320
- font-size:var(--tds-radio-font-size);
321
- font-weight:var(--t-font-weight-normal);
322
- color:var(--tds-radio-label-color);
323
- cursor:var(--tds-radio-cursor);
324
493
  }
325
494
 
326
- .tds-radio input[type="radio"]{
327
- position:relative;
328
- width:1em;
329
- height:1em;
330
- margin:calc((1lh - 1em) / 2) 0 0;
331
- font-size:var(--tds-radio-font-size);
332
- line-height:inherit;
333
- -webkit-appearance:none;
334
- -moz-appearance:none;
335
- appearance:none;
336
- cursor:var(--tds-radio-cursor);
337
- background-color:var(--tds-radio-input-background-color);
338
- border:var(--tds-radio-input-border-width) solid var(--tds-radio-input-border-color);
339
- border-radius:var(--tds-radio-input-border-radius);
340
- transition-timing-function:var(--t-ease-in-out);
341
- transition-duration:var(--t-duration-200);
342
- transition-property:var(--tds-radio-transition-property);
343
- }
495
+ .tds-input.tds-textarea--resize-vertical textarea{
496
+ resize:vertical;
497
+ }
344
498
 
345
- :is(.tds-radio input[type="radio"]):hover:not(:disabled){
346
- --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
347
- --tds-radio-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
499
+ .tds-input.tds-textarea--resize-none textarea{
500
+ resize:none;
348
501
  }
349
502
 
350
- :is(.tds-radio input[type="radio"]):focus-visible{
351
- outline:var(--t-focus-ring-outline);
352
- outline-offset:var(--t-focus-ring-offset);
503
+ .tds-input.tds-textarea--resize-auto textarea{
504
+ resize:vertical;
353
505
  }
354
506
 
355
- :is(.tds-radio input[type="radio"]):disabled{
356
- pointer-events:none;
507
+ @supports (field-sizing: content){
508
+ .tds-input.tds-textarea--resize-auto textarea{
509
+ field-sizing:content;
510
+ resize:none;
511
+ }
357
512
  }
358
513
 
359
- @media (prefers-reduced-motion: reduce){
514
+ .tds-input textarea{
515
+ --tds-input-scrollbar-thumb-color-default:var(--t-fill-color-neutral-040);
516
+ --tds-input-scrollbar-thumb-color-hidden:transparent;
517
+ --tds-input-scrollbar-thumb-color-hover:var(--t-fill-color-neutral-030);
518
+ --tds-input-scrollbar-thumb-color-thumb-hover:var(--t-fill-color-neutral-020);
519
+ --tds-input-scrollbar-thumb-color-thumb-active:var(--t-fill-color-neutral-010);
520
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-default);
521
+ --tds-input-scrollbar-surface-color:rgba(0, 0, 0, 0);
522
+ --tds-input-scrollbar-thumb-border-radius:999px;
523
+ --tds-input-scrollbar-thumb-border-width:3px;
524
+ --tds-input-scrollbar-track-margin-block:.125rem;
525
+ scrollbar-color:initial;
526
+ transition-timing-function:var(--t-ease-in-out);
527
+ transition-duration:var(--t-duration-200);
528
+ transition-property:var(--tds-input-transition-property), --tds-input-scrollbar-thumb-color;
529
+ }
360
530
 
361
- .tds-radio input[type="radio"]{
362
- --tds-radio-transition-property:none;
363
- }
531
+ @media (pointer: fine){
532
+ :is(.tds-input textarea)::-webkit-scrollbar{
533
+ width:12px;
534
+ height:12px;
535
+ cursor:default;
364
536
  }
365
537
 
366
- .tds-radio:has(input:checked){
367
- --tds-radio-input-background-color:var(--t-form-background-color);
368
- --tds-radio-input-border-color:var(--t-border-color-control-info);
369
- --tds-radio-input-border-width:4px;
370
- }
538
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb{
539
+ cursor:default;
540
+ background:var(--tds-input-scrollbar-thumb-color);
541
+ background-clip:content-box;
542
+ border:var(--tds-input-scrollbar-thumb-border-width) solid var(--tds-input-scrollbar-surface-color);
543
+ border-radius:var(--tds-input-scrollbar-thumb-border-radius);
544
+ }
371
545
 
372
- .tds-radio:has(input:checked) input:hover:not(:disabled){
373
- --tds-radio-input-background-color:var(--t-form-background-color);
374
- --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
546
+ :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
547
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
375
548
  }
376
549
 
377
- .tds-radio:has(input:user-invalid){
378
- --tds-radio-input-border-color:var(--t-form-border-color-error);
379
- }
550
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
551
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
552
+ }
380
553
 
381
- .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
382
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
383
- --tds-radio-input-background-color:var(--t-form-background-color-error);
554
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
555
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
384
556
  }
385
557
 
386
- .tds-radio:has(input:disabled){
387
- --tds-radio-input-background-color:var(--t-form-background-color-disabled);
388
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
558
+ :is(.tds-input textarea)::-webkit-scrollbar-corner{
559
+ background:var(--tds-input-scrollbar-surface-color);
560
+ }
389
561
 
390
- --tds-radio-label-color:var(--t-form-color-disabled);
391
- --tds-radio-description-color:var(--t-form-color-disabled);
392
- --tds-radio-cursor:not-allowed;
562
+ :is(.tds-input textarea)::-webkit-resizer{
563
+ background:var(--tds-input-resizer-icon) no-repeat;
564
+ background-position:right bottom;
565
+ background-size:var(--tds-input-resizer-size) var(--tds-input-resizer-size);
566
+ }
567
+
568
+ :is(.tds-input textarea)::-webkit-scrollbar-track{
569
+ margin-block:var(--tds-input-scrollbar-track-margin-block);
570
+ cursor:default;
571
+ }
572
+
573
+ @supports (-moz-appearance: none){
574
+ :is(.tds-input textarea){
575
+ scrollbar-color:var(--tds-input-scrollbar-thumb-color-default) var(--tds-input-scrollbar-surface-color);
576
+ scrollbar-width:thin;
577
+ }
578
+
579
+ @media (hover){
580
+ :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
581
+ scrollbar-color:var(--tds-input-scrollbar-thumb-color-hover) var(--tds-input-scrollbar-surface-color);
582
+ }
583
+ }
584
+ }
393
585
  }
394
586
 
395
- .tds-radio:has(input:disabled) input:checked{
396
- --tds-radio-input-background-color:var(--t-form-background-color);
397
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
587
+ .tds-radio-group{
588
+ --tds-radio-group-font-size:var(--t-font-size-md);
589
+ --tds-radio-group-line-height:1.4;
590
+ --tds-radio-group-gap:var(--t-spacing-1);
591
+
592
+ --tds-radio-group-legend-margin-bottom:var(--tds-radio-group-gap);
593
+
594
+ --tds-radio-group-description-font-size:var(--t-font-size-sm);
595
+ --tds-radio-group-description-line-height:1.35;
596
+ --tds-radio-group-description-color:var(--t-text-color-secondary);
597
+ --tds-radio-group-description-invalid-icon-display:none;
598
+ display:flex;
599
+ flex-direction:column;
600
+ gap:var(--tds-radio-group-gap);
601
+ padding:0;
602
+ margin:0;
603
+
604
+ font-size:var(--tds-radio-group-font-size);
605
+ line-height:var(--tds-radio-group-line-height);
606
+ border:0;
607
+ }
608
+
609
+ .tds-radio-group legend{
610
+ padding:0;
611
+ margin-bottom:var(--tds-radio-group-legend-margin-bottom);
612
+ }
613
+
614
+ .tds-radio-group:has(.tds-radio-group-description){
615
+ --tds-radio-group-legend-margin-bottom:var(--t-spacing-fourth);
616
+ }
617
+
618
+ .tds-radio-group[aria-invalid="true"]{
619
+ --tds-radio-group-description-color:var(--t-text-color-status-error);
620
+ --tds-radio-group-description-invalid-icon-display:inline-block;
621
+ }
622
+
623
+ .tds-radio-group[aria-invalid="true"] .tds-radio{
624
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
398
625
  }
399
626
 
400
- .tds-radio-description{
627
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
628
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
629
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
630
+ }
631
+
632
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
633
+ --tds-radio-input-background-color:var(--t-form-background-color);
634
+ }
635
+
636
+ .tds-radio-group:has(input:required) legend::after{
637
+ margin-left:.25ch;
638
+ color:var(--t-text-color-status-error);
639
+ content:"*";
640
+ }
641
+
642
+ .tds-radio-group-fields{
643
+ display:flex;
644
+ flex-direction:column;
645
+ gap:var(--tds-radio-group-gap);
646
+ align-items:flex-start;
647
+ }
648
+
649
+ .tds-radio-group-description{
401
650
  display:flex;
402
- grid-area:2 / 2;
403
651
  gap:var(--t-spacing-half);
404
652
  align-items:flex-start;
405
653
  margin:0;
406
- font-size:var(--tds-radio-description-font-size);
407
- line-height:var(--tds-radio-description-line-height);
408
- color:var(--tds-radio-description-color);
654
+ font-size:var(--tds-radio-group-description-font-size);
655
+ line-height:var(--tds-radio-group-description-line-height);
656
+ color:var(--tds-radio-group-description-color);
409
657
  cursor:text;
410
658
  }
411
659
 
412
- .tds-radio--sm{
413
- --tds-radio-line-height:1.35;
414
- --tds-radio-input-size:var(--t-element-size-sm);
415
- --tds-radio-font-size:var(--t-font-size-sm);
416
- --tds-radio-description-font-size:var(--t-font-size-xs);
417
- --tds-radio-description-line-height:1.3;
660
+ .tds-radio-group-description .tds-radio-group-description-invalid-icon{
661
+ display:var(--tds-radio-group-description-invalid-icon-display);
662
+ flex-shrink:0;
663
+ margin-top:calc(.5lh - .5em);
664
+ line-height:var(--tds-radio-group-description-line-height);
665
+ }
666
+
667
+ .tds-radio-group--sm{
668
+ --tds-radio-group-line-height:1.35;
669
+ --tds-radio-group-font-size:var(--t-font-size-sm);
670
+ --tds-radio-group-description-font-size:var(--t-font-size-xs);
671
+ --tds-radio-group-description-line-height:1.3;
418
672
  }
419
673
 
420
674
 
@@ -779,91 +1033,136 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
779
1033
  flex-direction:column;
780
1034
  }
781
1035
 
782
- .tds-radio-group{
783
- --tds-radio-group-font-size:var(--t-font-size-md);
784
- --tds-radio-group-line-height:1.4;
785
- --tds-radio-group-gap:var(--t-spacing-1);
786
-
787
- --tds-radio-group-legend-margin-bottom:var(--tds-radio-group-gap);
1036
+ .tds-radio{
1037
+ --tds-radio-font-size:var(--t-font-size-md);
1038
+ --tds-radio-cursor:pointer;
1039
+ --tds-radio-line-height:1.4;
1040
+ --tds-radio-transition-property:border-width;
788
1041
 
789
- --tds-radio-group-description-font-size:var(--t-font-size-sm);
790
- --tds-radio-group-description-line-height:1.35;
791
- --tds-radio-group-description-color:var(--t-text-color-secondary);
792
- --tds-radio-group-description-invalid-icon-display:none;
793
- display:flex;
794
- flex-direction:column;
795
- gap:var(--tds-radio-group-gap);
796
- padding:0;
797
- margin:0;
1042
+ --tds-radio-input-size:var(--t-element-size-md);
1043
+ --tds-radio-input-border-radius:var(--t-border-radius-round);
1044
+ --tds-radio-input-border-color:var(--t-form-border-color);
1045
+ --tds-radio-input-border-width:var(--t-form-border-width);
1046
+ --tds-radio-input-background-color:transparent;
798
1047
 
799
- font-size:var(--tds-radio-group-font-size);
800
- line-height:var(--tds-radio-group-line-height);
801
- border:0;
802
- }
1048
+ --tds-radio-label-color:var(--t-form-color);
803
1049
 
804
- .tds-radio-group legend{
805
- padding:0;
806
- margin-bottom:var(--tds-radio-group-legend-margin-bottom);
807
- }
1050
+ --tds-radio-description-font-size:var(--t-font-size-sm);
1051
+ --tds-radio-description-line-height:1.35;
1052
+ --tds-radio-description-color:var(--t-text-color-secondary);
808
1053
 
809
- .tds-radio-group:has(.tds-radio-group-description){
810
- --tds-radio-group-legend-margin-bottom:var(--t-spacing-fourth);
811
- }
1054
+ position:relative;
1055
+ display:inline-grid;
1056
+ grid-template-columns:auto;
1057
+ grid-auto-columns:1fr;
1058
+ gap:var(--t-spacing-fourth) var(--t-spacing-1);
1059
+ line-height:var(--tds-radio-line-height);
1060
+ cursor:var(--tds-radio-cursor);
1061
+ -webkit-user-select:none;
1062
+ -moz-user-select:none;
1063
+ user-select:none;
1064
+ }
812
1065
 
813
- .tds-radio-group[aria-invalid="true"]{
814
- --tds-radio-group-description-color:var(--t-text-color-status-error);
815
- --tds-radio-group-description-invalid-icon-display:inline-block;
1066
+ .tds-radio label{
1067
+ grid-area:1 / 2;
1068
+ font-size:var(--tds-radio-font-size);
1069
+ font-weight:var(--t-font-weight-normal);
1070
+ color:var(--tds-radio-label-color);
1071
+ cursor:var(--tds-radio-cursor);
816
1072
  }
817
1073
 
818
- .tds-radio-group[aria-invalid="true"] .tds-radio{
819
- --tds-radio-input-border-color:var(--t-form-border-color-error);
820
- }
821
-
822
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
823
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
824
- --tds-radio-input-background-color:var(--t-form-background-color-error);
825
- }
1074
+ .tds-radio input[type="radio"]{
1075
+ position:relative;
1076
+ width:1em;
1077
+ height:1em;
1078
+ margin:calc((1lh - 1em) / 2) 0 0;
1079
+ font-size:var(--tds-radio-font-size);
1080
+ line-height:inherit;
1081
+ -webkit-appearance:none;
1082
+ -moz-appearance:none;
1083
+ appearance:none;
1084
+ cursor:var(--tds-radio-cursor);
1085
+ background-color:var(--tds-radio-input-background-color);
1086
+ border:var(--tds-radio-input-border-width) solid var(--tds-radio-input-border-color);
1087
+ border-radius:var(--tds-radio-input-border-radius);
1088
+ transition-timing-function:var(--t-ease-in-out);
1089
+ transition-duration:var(--t-duration-200);
1090
+ transition-property:var(--tds-radio-transition-property);
1091
+ }
826
1092
 
827
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
828
- --tds-radio-input-background-color:var(--t-form-background-color);
829
- }
1093
+ :is(.tds-radio input[type="radio"]):hover:not(:disabled){
1094
+ --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
1095
+ --tds-radio-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
1096
+ }
830
1097
 
831
- .tds-radio-group:has(input:required) legend::after{
832
- margin-left:.25ch;
833
- color:var(--t-text-color-status-error);
834
- content:"*";
1098
+ :is(.tds-radio input[type="radio"]):focus-visible{
1099
+ outline:var(--t-focus-ring-outline);
1100
+ outline-offset:var(--t-focus-ring-offset);
835
1101
  }
836
1102
 
837
- .tds-radio-group-fields{
838
- display:flex;
839
- flex-direction:column;
840
- gap:var(--tds-radio-group-gap);
841
- align-items:flex-start;
842
- }
1103
+ :is(.tds-radio input[type="radio"]):disabled{
1104
+ pointer-events:none;
1105
+ }
843
1106
 
844
- .tds-radio-group-description{
1107
+ @media (prefers-reduced-motion: reduce){
1108
+
1109
+ .tds-radio input[type="radio"]{
1110
+ --tds-radio-transition-property:none;
1111
+ }
1112
+ }
1113
+
1114
+ .tds-radio:has(input:checked){
1115
+ --tds-radio-input-background-color:var(--t-form-background-color);
1116
+ --tds-radio-input-border-color:var(--t-border-color-control-info);
1117
+ --tds-radio-input-border-width:4px;
1118
+ }
1119
+
1120
+ .tds-radio:has(input:checked) input:hover:not(:disabled){
1121
+ --tds-radio-input-background-color:var(--t-form-background-color);
1122
+ --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
1123
+ }
1124
+
1125
+ .tds-radio:has(input:user-invalid){
1126
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
1127
+ }
1128
+
1129
+ .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
1130
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1131
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
1132
+ }
1133
+
1134
+ .tds-radio:has(input:disabled){
1135
+ --tds-radio-input-background-color:var(--t-form-background-color-disabled);
1136
+ --tds-radio-input-border-color:var(--t-form-border-color-disabled);
1137
+
1138
+ --tds-radio-label-color:var(--t-form-color-disabled);
1139
+ --tds-radio-description-color:var(--t-form-color-disabled);
1140
+ --tds-radio-cursor:not-allowed;
1141
+ }
1142
+
1143
+ .tds-radio:has(input:disabled) input:checked{
1144
+ --tds-radio-input-background-color:var(--t-form-background-color);
1145
+ --tds-radio-input-border-color:var(--t-form-border-color-disabled);
1146
+ }
1147
+
1148
+ .tds-radio-description{
845
1149
  display:flex;
1150
+ grid-area:2 / 2;
846
1151
  gap:var(--t-spacing-half);
847
1152
  align-items:flex-start;
848
1153
  margin:0;
849
- font-size:var(--tds-radio-group-description-font-size);
850
- line-height:var(--tds-radio-group-description-line-height);
851
- color:var(--tds-radio-group-description-color);
1154
+ font-size:var(--tds-radio-description-font-size);
1155
+ line-height:var(--tds-radio-description-line-height);
1156
+ color:var(--tds-radio-description-color);
852
1157
  cursor:text;
853
1158
  }
854
1159
 
855
- .tds-radio-group-description .tds-radio-group-description-invalid-icon{
856
- display:var(--tds-radio-group-description-invalid-icon-display);
857
- flex-shrink:0;
858
- margin-top:calc(.5lh - .5em);
859
- line-height:var(--tds-radio-group-description-line-height);
860
- }
861
-
862
- .tds-radio-group--sm{
863
- --tds-radio-group-line-height:1.35;
864
- --tds-radio-group-font-size:var(--t-font-size-sm);
865
- --tds-radio-group-description-font-size:var(--t-font-size-xs);
866
- --tds-radio-group-description-line-height:1.3;
1160
+ .tds-radio--sm{
1161
+ --tds-radio-line-height:1.35;
1162
+ --tds-radio-input-size:var(--t-element-size-sm);
1163
+ --tds-radio-font-size:var(--t-font-size-sm);
1164
+ --tds-radio-description-font-size:var(--t-font-size-xs);
1165
+ --tds-radio-description-line-height:1.3;
867
1166
  }
868
1167
 
869
1168
  .tds-toggle-switch{
@@ -955,356 +1254,57 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
955
1254
  .tds-toggle-switch-track{
956
1255
  position:relative;
957
1256
  flex-shrink:0;
958
- width:var(--tds-toggle-switch-track-width);
959
- height:var(--tds-toggle-switch-track-height);
960
- background-color:var(--tds-toggle-switch-track-background-color);
961
- border-radius:var(--t-border-radius-round);
962
- transition:var(--tds-toggle-switch-track-transition);
963
- }
964
-
965
- .tds-toggle-switch-track::before{
966
- position:absolute;
967
- top:var(--t-spacing-fourth);
968
- left:var(--t-spacing-fourth);
969
- width:var(--tds-toggle-switch-thumb-size);
970
- height:var(--tds-toggle-switch-thumb-size);
971
- content:"";
972
- background-color:#fff;
973
- border-radius:var(--t-border-radius-round);
974
- transform:var(--tds-toggle-switch-thumb-transform);
975
- transition:var(--tds-toggle-switch-thumb-transition);
976
- }
977
-
978
- @media (prefers-reduced-motion: reduce){
979
-
980
- .tds-toggle-switch-track{
981
- --tds-toggle-switch-track-transition:none;
982
- --tds-toggle-switch-thumb-transition:none;
983
- }
984
- }
985
-
986
- .tds-toggle-switch-description{
987
- display:flex;
988
- grid-area:2 / 2;
989
- align-items:flex-start;
990
- margin:0;
991
- font-size:var(--tds-toggle-switch-description-font-size);
992
- line-height:var(--tds-toggle-switch-description-line-height);
993
- color:var(--tds-toggle-switch-description-color);
994
- cursor:text;
995
- }
996
-
997
- .tds-toggle-switch--sm{
998
- --tds-toggle-switch-font-size:var(--t-font-size-sm);
999
- --tds-toggle-switch-line-height:1.35;
1000
- --tds-toggle-switch-track-height:var(--t-element-size-lg);
1001
- --tds-toggle-switch-thumb-size:var(--t-element-size-sm);
1002
- --tds-toggle-switch-description-font-size:var(--t-font-size-xs);
1003
- --tds-toggle-switch-description-line-height:1.3;
1004
- }
1005
-
1006
- .tds-toggle-switch--hide-label{
1007
- --tds-toggle-switch-display:inline-flex;
1008
- }
1009
-
1010
- .tds-checkbox{
1011
- --tds-checkbox-font-size:var(--t-font-size-md);
1012
- --tds-checkbox-cursor:pointer;
1013
- --tds-checkbox-line-height:1.4;
1014
- --tds-checkbox-transition-property:background-color, border-color;
1015
-
1016
- --tds-checkbox-input-size:var(--t-element-size-md);
1017
- --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
1018
- --tds-checkbox-input-border-color:var(--t-form-border-color);
1019
- --tds-checkbox-input-background-color:transparent;
1020
-
1021
- --tds-checkbox-input-icon:none;
1022
- --tds-checkbox-input-icon-visibility:hidden;
1023
- --tds-checkbox-input-icon-opacity:0;
1024
- --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
1025
-
1026
- --tds-checkbox-label-color:var(--t-form-color);
1027
-
1028
- --tds-checkbox-description-font-size:var(--t-font-size-sm);
1029
- --tds-checkbox-description-line-height:1.35;
1030
- --tds-checkbox-description-color:var(--t-text-color-secondary);
1031
- --tds-checkbox-description-invalid-icon-display:none;
1032
-
1033
- position:relative;
1034
- display:inline-grid;
1035
- grid-template-columns:auto;
1036
- grid-auto-columns:1fr;
1037
- gap:var(--t-spacing-fourth) var(--t-spacing-1);
1038
- line-height:var(--tds-checkbox-line-height);
1039
- cursor:var(--tds-checkbox-cursor);
1040
- -webkit-user-select:none;
1041
- -moz-user-select:none;
1042
- user-select:none;
1043
- }
1044
-
1045
- .tds-checkbox label{
1046
- grid-area:1 / 2;
1047
- font-size:var(--tds-checkbox-font-size);
1048
- font-weight:var(--t-font-weight-normal);
1049
- color:var(--tds-checkbox-label-color);
1050
- cursor:var(--tds-checkbox-cursor);
1051
- }
1052
-
1053
- .tds-checkbox tds-indeterminate{
1054
- display:flex;
1055
- }
1056
-
1057
- .tds-checkbox input[type="checkbox"]{
1058
- position:relative;
1059
- width:1em;
1060
- height:1em;
1061
- margin:calc((1lh - 1em) / 2) 0 0;
1062
- font-size:var(--tds-checkbox-font-size);
1063
- line-height:inherit;
1064
- -webkit-appearance:none;
1065
- -moz-appearance:none;
1066
- appearance:none;
1067
- cursor:var(--tds-checkbox-cursor);
1068
- background-color:var(--tds-checkbox-input-background-color);
1069
- border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
1070
- border-radius:var(--tds-checkbox-input-border-radius);
1071
- transition-timing-function:var(--t-ease-in-out);
1072
- transition-duration:var(--t-duration-200);
1073
- transition-property:var(--tds-checkbox-transition-property);
1074
- }
1075
-
1076
- :is(.tds-checkbox input[type="checkbox"])::before{
1077
- position:absolute;
1078
- top:50%;
1079
- left:50%;
1080
- visibility:var(--tds-checkbox-input-icon-visibility);
1081
- width:100%;
1082
- height:100%;
1083
- content:"";
1084
- background-color:var(--tds-checkbox-input-icon-fill);
1085
- border-radius:var(--tds-checkbox-input-border-radius);
1086
- opacity:var(--tds-checkbox-input-icon-opacity);
1087
- -webkit-mask-image:var(--tds-checkbox-input-icon);
1088
- mask-image:var(--tds-checkbox-input-icon);
1089
- -webkit-mask-repeat:no-repeat;
1090
- mask-repeat:no-repeat;
1091
- -webkit-mask-size:contain;
1092
- mask-size:contain;
1093
- transform:translate(-50%, -50%);
1094
- }
1095
-
1096
- :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
1097
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
1098
- --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
1099
- }
1100
-
1101
- :is(.tds-checkbox input[type="checkbox"]):focus-visible{
1102
- outline:var(--t-focus-ring-outline);
1103
- outline-offset:var(--t-focus-ring-offset);
1104
- }
1105
-
1106
- :is(.tds-checkbox input[type="checkbox"]):disabled{
1107
- pointer-events:none;
1108
- }
1109
-
1110
- @media (prefers-reduced-motion: reduce){
1111
-
1112
- .tds-checkbox input[type="checkbox"]{
1113
- --tds-checkbox-transition-property:none;
1114
- }
1115
- }
1116
-
1117
- .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
1118
- --tds-checkbox-input-background-color:var(--t-fill-color-control);
1119
- --tds-checkbox-input-border-color:var(--t-border-color-control-info);
1120
- --tds-checkbox-input-icon-visibility:visible;
1121
- --tds-checkbox-input-icon-opacity:1;
1122
- }
1123
-
1124
- :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
1125
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
1126
- --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
1127
- }
1128
-
1129
- .tds-checkbox:has(input:checked){
1130
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
1131
- }
1132
-
1133
- .tds-checkbox:has(input:indeterminate){
1134
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
1135
- }
1136
-
1137
- .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
1138
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1139
- --tds-checkbox-description-color:var(--t-text-color-status-error);
1140
- --tds-checkbox-description-invalid-icon-display:inline-block;
1141
- }
1142
-
1143
- :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
1144
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1145
- --tds-checkbox-input-background-color:var(--t-form-background-color-error);
1146
- }
1147
-
1148
- :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{
1149
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1150
- --tds-checkbox-input-background-color:var(--t-form-border-color-error);
1151
- }
1152
-
1153
- :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){
1154
- --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
1155
- --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
1156
- }
1157
-
1158
- .tds-checkbox:has(input:required) label::after{
1159
- margin-left:.25ch;
1160
- color:var(--t-text-color-status-error);
1161
- content:"*";
1162
- }
1163
-
1164
- .tds-checkbox:has(input:disabled){
1165
- --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
1166
- --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
1167
-
1168
- --tds-checkbox-label-color:var(--t-form-color-disabled);
1169
- --tds-checkbox-description-color:var(--t-form-color-disabled);
1170
- --tds-checkbox-cursor:not-allowed;
1171
- }
1172
-
1173
- .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
1174
- --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
1175
- }
1176
-
1177
- .tds-checkbox-description{
1178
- display:flex;
1179
- grid-area:2 / 2;
1180
- gap:var(--t-spacing-half);
1181
- align-items:flex-start;
1182
- margin:0;
1183
- font-size:var(--tds-checkbox-description-font-size);
1184
- line-height:var(--tds-checkbox-description-line-height);
1185
- color:var(--tds-checkbox-description-color);
1186
- cursor:text;
1187
- }
1188
-
1189
- .tds-checkbox-description .tds-checkbox-description-invalid-icon{
1190
- display:var(--tds-checkbox-description-invalid-icon-display);
1191
- flex-shrink:0;
1192
- margin-top:calc(.5lh - .5em);
1193
- line-height:var(--tds-checkbox-description-line-height);
1194
- }
1195
-
1196
- .tds-checkbox--sm{
1197
- --tds-checkbox-line-height:1.35;
1198
- --tds-checkbox-input-size:var(--t-element-size-sm);
1199
- --tds-checkbox-font-size:var(--t-font-size-sm);
1200
- --tds-checkbox-description-font-size:var(--t-font-size-xs);
1201
- --tds-checkbox-description-line-height:1.3;
1202
- }
1203
-
1204
- .tds-input:has(textarea){
1205
- --tds-input-padding-block:6px;
1206
- --tds-input-resizer-size:var(--t-element-size-sm);
1207
- --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");
1208
- }
1209
-
1210
- @supports (x: attr(x type(*))){
1211
-
1212
- .tds-input:has(textarea){
1213
- --tds-input-min-height:calc((attr(rows type(<number>), 3) * 1lh) + (var(--tds-input-padding-block) * 2) + 2px);
1214
- }
1215
- }
1216
-
1217
- .tds-input.tds-textarea--resize-vertical textarea{
1218
- resize:vertical;
1219
- }
1220
-
1221
- .tds-input.tds-textarea--resize-none textarea{
1222
- resize:none;
1223
- }
1224
-
1225
- .tds-input.tds-textarea--resize-auto textarea{
1226
- resize:vertical;
1227
- }
1228
-
1229
- @supports (field-sizing: content){
1230
- .tds-input.tds-textarea--resize-auto textarea{
1231
- field-sizing:content;
1232
- resize:none;
1233
- }
1234
- }
1235
-
1236
- .tds-input textarea{
1237
- --tds-input-scrollbar-thumb-color-default:var(--t-fill-color-neutral-040);
1238
- --tds-input-scrollbar-thumb-color-hidden:transparent;
1239
- --tds-input-scrollbar-thumb-color-hover:var(--t-fill-color-neutral-030);
1240
- --tds-input-scrollbar-thumb-color-thumb-hover:var(--t-fill-color-neutral-020);
1241
- --tds-input-scrollbar-thumb-color-thumb-active:var(--t-fill-color-neutral-010);
1242
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-default);
1243
- --tds-input-scrollbar-surface-color:rgba(0, 0, 0, 0);
1244
- --tds-input-scrollbar-thumb-border-radius:999px;
1245
- --tds-input-scrollbar-thumb-border-width:3px;
1246
- --tds-input-scrollbar-track-margin-block:.125rem;
1247
- scrollbar-color:initial;
1248
- transition-timing-function:var(--t-ease-in-out);
1249
- transition-duration:var(--t-duration-200);
1250
- transition-property:var(--tds-input-transition-property), --tds-input-scrollbar-thumb-color;
1251
- }
1252
-
1253
- @media (pointer: fine){
1254
- :is(.tds-input textarea)::-webkit-scrollbar{
1255
- width:12px;
1256
- height:12px;
1257
- cursor:default;
1258
- }
1259
-
1260
- :is(.tds-input textarea)::-webkit-scrollbar-thumb{
1261
- cursor:default;
1262
- background:var(--tds-input-scrollbar-thumb-color);
1263
- background-clip:content-box;
1264
- border:var(--tds-input-scrollbar-thumb-border-width) solid var(--tds-input-scrollbar-surface-color);
1265
- border-radius:var(--tds-input-scrollbar-thumb-border-radius);
1266
- }
1267
-
1268
- :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1269
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
1270
- }
1271
-
1272
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
1273
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
1274
- }
1257
+ width:var(--tds-toggle-switch-track-width);
1258
+ height:var(--tds-toggle-switch-track-height);
1259
+ background-color:var(--tds-toggle-switch-track-background-color);
1260
+ border-radius:var(--t-border-radius-round);
1261
+ transition:var(--tds-toggle-switch-track-transition);
1262
+ }
1275
1263
 
1276
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
1277
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
1278
- }
1264
+ .tds-toggle-switch-track::before{
1265
+ position:absolute;
1266
+ top:var(--t-spacing-fourth);
1267
+ left:var(--t-spacing-fourth);
1268
+ width:var(--tds-toggle-switch-thumb-size);
1269
+ height:var(--tds-toggle-switch-thumb-size);
1270
+ content:"";
1271
+ background-color:#fff;
1272
+ border-radius:var(--t-border-radius-round);
1273
+ transform:var(--tds-toggle-switch-thumb-transform);
1274
+ transition:var(--tds-toggle-switch-thumb-transition);
1275
+ }
1279
1276
 
1280
- :is(.tds-input textarea)::-webkit-scrollbar-corner{
1281
- background:var(--tds-input-scrollbar-surface-color);
1282
- }
1277
+ @media (prefers-reduced-motion: reduce){
1283
1278
 
1284
- :is(.tds-input textarea)::-webkit-resizer{
1285
- background:var(--tds-input-resizer-icon) no-repeat;
1286
- background-position:right bottom;
1287
- background-size:var(--tds-input-resizer-size) var(--tds-input-resizer-size);
1288
- }
1279
+ .tds-toggle-switch-track{
1280
+ --tds-toggle-switch-track-transition:none;
1281
+ --tds-toggle-switch-thumb-transition:none;
1282
+ }
1283
+ }
1289
1284
 
1290
- :is(.tds-input textarea)::-webkit-scrollbar-track{
1291
- margin-block:var(--tds-input-scrollbar-track-margin-block);
1292
- cursor:default;
1293
- }
1285
+ .tds-toggle-switch-description{
1286
+ display:flex;
1287
+ grid-area:2 / 2;
1288
+ align-items:flex-start;
1289
+ margin:0;
1290
+ font-size:var(--tds-toggle-switch-description-font-size);
1291
+ line-height:var(--tds-toggle-switch-description-line-height);
1292
+ color:var(--tds-toggle-switch-description-color);
1293
+ cursor:text;
1294
+ }
1294
1295
 
1295
- @supports (-moz-appearance: none){
1296
- :is(.tds-input textarea){
1297
- scrollbar-color:var(--tds-input-scrollbar-thumb-color-default) var(--tds-input-scrollbar-surface-color);
1298
- scrollbar-width:thin;
1299
- }
1296
+ .tds-toggle-switch--sm{
1297
+ --tds-toggle-switch-font-size:var(--t-font-size-sm);
1298
+ --tds-toggle-switch-line-height:1.35;
1299
+ --tds-toggle-switch-track-height:var(--t-element-size-lg);
1300
+ --tds-toggle-switch-thumb-size:var(--t-element-size-sm);
1301
+ --tds-toggle-switch-description-font-size:var(--t-font-size-xs);
1302
+ --tds-toggle-switch-description-line-height:1.3;
1303
+ }
1300
1304
 
1301
- @media (hover){
1302
- :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1303
- scrollbar-color:var(--tds-input-scrollbar-thumb-color-hover) var(--tds-input-scrollbar-surface-color);
1304
- }
1305
- }
1306
- }
1307
- }
1305
+ .tds-toggle-switch--hide-label{
1306
+ --tds-toggle-switch-display:inline-flex;
1307
+ }
1308
1308
 
1309
1309
  .tds-select{
1310
1310
  --tds-select-border-color:var(--t-form-border-color);
@@ -1333,12 +1333,11 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1333
1333
  --tds-select-dropdown-border-radius:var(--t-border-radius);
1334
1334
  --tds-select-dropdown-box-shadow:hsl(0, 0%, 0%, .05) 0 10px 15px -3px, hsl(0, 0%, 0%, .05) 0 4px 6px -4px;
1335
1335
  --tds-select-dropdown-scroll-behavior:smooth;
1336
- --tds-select-dropdown-transition-enter:opacity var(--t-duration-300) var(--t-ease-out), transform var(--t-duration-300) var(--t-ease-out), display var(--t-duration-300) allow-discrete, overlay var(--t-duration-300) allow-discrete;
1337
- --tds-select-dropdown-transition-exit:opacity var(--t-duration-200) var(--t-ease-in), transform var(--t-duration-200) var(--t-ease-in), display var(--t-duration-200) allow-discrete, overlay var(--t-duration-200) allow-discrete;
1336
+ --tds-select-dropdown-transition:opacity var(--t-duration-300) var(--t-ease-out), translate var(--t-duration-300) var(--t-ease-out), display var(--t-duration-300) allow-discrete, overlay var(--t-duration-300) allow-discrete;
1338
1337
  --tds-select-dropdown-closed-opacity:0;
1339
1338
  --tds-select-dropdown-open-opacity:1;
1340
- --tds-select-dropdown-closed-transform:translateY(-8px);
1341
- --tds-select-dropdown-open-transform:translateY(0);
1339
+ --tds-select-dropdown-closed-translate:0 -8px;
1340
+ --tds-select-dropdown-open-translate:0 0;
1342
1341
 
1343
1342
  --tds-select-option-gap:var(--t-spacing-1);
1344
1343
  --tds-select-option-padding-block:var(--t-spacing-1);
@@ -1536,11 +1535,10 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1536
1535
 
1537
1536
  .tds-select{
1538
1537
  --tds-select-transition-property:none;
1539
- --tds-select-dropdown-transition-enter:none;
1540
- --tds-select-dropdown-transition-exit:none;
1538
+ --tds-select-dropdown-transition:none;
1541
1539
  --tds-select-dropdown-scroll-behavior:auto;
1542
- --tds-select-dropdown-closed-transform:none;
1543
- --tds-select-dropdown-open-transform:none;
1540
+ --tds-select-dropdown-closed-translate:none;
1541
+ --tds-select-dropdown-open-translate:none;
1544
1542
  --tds-select-caret-transition:none;
1545
1543
  }
1546
1544
  }
@@ -1581,6 +1579,7 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1581
1579
  color:var(--tds-select-placeholder-color);
1582
1580
  white-space:nowrap;
1583
1581
  background-image:none;
1582
+ anchor-name:--tds-select-anchor;
1584
1583
  transition:background-color var(--t-duration-300) var(--t-ease-in-out), border-color var(--t-duration-300) var(--t-ease-in-out), outline-color var(--t-duration-300) var(--t-ease-in-out), outline-offset var(--t-duration-300) var(--t-ease-in-out), transform var(--t-duration-100) var(--t-ease-in-out);
1585
1584
  -webkit-tap-highlight-color:transparent;
1586
1585
  }
@@ -1603,6 +1602,7 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1603
1602
  }
1604
1603
 
1605
1604
  .tds-select:has( > button) [popover]{
1605
+ position-anchor:--tds-select-anchor;
1606
1606
  inset:auto;
1607
1607
  inline-size:-moz-max-content;
1608
1608
  inline-size:max-content;
@@ -1628,14 +1628,13 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1628
1628
  border-radius:var(--tds-select-dropdown-border-radius);
1629
1629
  box-shadow:var(--tds-select-dropdown-box-shadow);
1630
1630
  opacity:var(--tds-select-dropdown-open-opacity);
1631
- transform:var(--tds-select-dropdown-open-transform);
1632
- transition:var(--tds-select-dropdown-transition-enter);
1631
+ translate:var(--tds-select-dropdown-open-translate);
1632
+ transition:var(--tds-select-dropdown-transition);
1633
1633
  }
1634
1634
 
1635
1635
  :is(.tds-select:has( > button) [popover]):not(:popover-open){
1636
1636
  opacity:var(--tds-select-dropdown-closed-opacity);
1637
- transform:var(--tds-select-dropdown-closed-transform);
1638
- transition:var(--tds-select-dropdown-transition-exit);
1637
+ translate:var(--tds-select-dropdown-closed-translate);
1639
1638
  }
1640
1639
 
1641
1640
  :is(.tds-select:has( > button) [popover]) ul{
@@ -1647,7 +1646,7 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1647
1646
  @starting-style{
1648
1647
  :is(.tds-select:has( > button) [popover]):popover-open{
1649
1648
  opacity:var(--tds-select-dropdown-closed-opacity);
1650
- transform:var(--tds-select-dropdown-closed-transform);
1649
+ translate:var(--tds-select-dropdown-closed-translate);
1651
1650
  }
1652
1651
  }
1653
1652
 
@@ -1675,8 +1674,7 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1675
1674
 
1676
1675
  :is(.tds-select select:has( > button))::picker(select):not(:popover-open){
1677
1676
  opacity:var(--tds-select-dropdown-closed-opacity);
1678
- transform:var(--tds-select-dropdown-closed-transform);
1679
- transition:var(--tds-select-dropdown-transition-exit);
1677
+ translate:var(--tds-select-dropdown-closed-translate);
1680
1678
  }
1681
1679
 
1682
1680
  :is(.tds-select select:has( > button)):open,:is(.tds-select select:has( > button)):focus-within{
@@ -1724,8 +1722,8 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1724
1722
  border-radius:var(--tds-select-dropdown-border-radius);
1725
1723
  box-shadow:var(--tds-select-dropdown-box-shadow);
1726
1724
  opacity:var(--tds-select-dropdown-open-opacity);
1727
- transform:var(--tds-select-dropdown-open-transform);
1728
- transition:var(--tds-select-dropdown-transition-enter);
1725
+ translate:var(--tds-select-dropdown-open-translate);
1726
+ transition:var(--tds-select-dropdown-transition);
1729
1727
  }
1730
1728
 
1731
1729
  :is(.tds-select select:has( > button)) option::checkmark{
@@ -1735,7 +1733,7 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1735
1733
  @starting-style{
1736
1734
  :is(.tds-select select:has( > button))::picker(select):popover-open{
1737
1735
  opacity:var(--tds-select-dropdown-closed-opacity);
1738
- transform:var(--tds-select-dropdown-closed-transform);
1736
+ translate:var(--tds-select-dropdown-closed-translate);
1739
1737
  }
1740
1738
  }
1741
1739
  }
@@ -2209,8 +2207,7 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
2209
2207
  --tds-btn-loading-spinner-track-color:var(--t-fill-color-status-error-ghost);
2210
2208
  }
2211
2209
 
2212
- .tds-btn--inline-text,
2213
- a[class="tds-btn"]{
2210
+ .tds-btn--inline-text{
2214
2211
  --tds-btn-color:var(--t-text-color-interaction);
2215
2212
  --tds-btn-color-hover:var(--t-text-color-interaction-hover);
2216
2213
  --tds-btn-color-active:var(--t-text-color-interaction-active);
@@ -2229,9 +2226,10 @@ a[class="tds-btn"]{
2229
2226
  font-family:inherit;
2230
2227
  font-style:inherit;
2231
2228
  vertical-align:inherit;
2229
+ text-align:inherit;
2232
2230
  }
2233
2231
 
2234
- :is(.tds-btn--inline-text,a[class="tds-btn"]):hover,:is(.tds-btn--inline-text,a[class="tds-btn"]):focus-visible{
2232
+ .tds-btn--inline-text:hover,.tds-btn--inline-text:focus-visible{
2235
2233
  --tds-btn-text-decoration:none;
2236
2234
  }
2237
2235
 
@@ -3323,84 +3321,6 @@ a[class="tds-btn"]{
3323
3321
  @media (prefers-color-scheme: dark){
3324
3322
  }
3325
3323
 
3326
- .tds-checkbox-group{
3327
- --tds-checkbox-group-font-size:var(--t-font-size-md);
3328
- --tds-checkbox-group-line-height:1.4;
3329
- --tds-checkbox-group-gap:var(--t-spacing-1);
3330
-
3331
- --tds-checkbox-group-legend-margin-bottom:var(--tds-checkbox-group-gap);
3332
-
3333
- --tds-checkbox-group-description-font-size:var(--t-font-size-sm);
3334
- --tds-checkbox-group-description-line-height:1.35;
3335
- --tds-checkbox-group-description-color:var(--t-text-color-secondary);
3336
- --tds-checkbox-group-description-invalid-icon-display:none;
3337
- display:flex;
3338
- flex-direction:column;
3339
- gap:var(--tds-checkbox-group-gap);
3340
- padding:0;
3341
- margin:0;
3342
-
3343
- font-size:var(--tds-checkbox-group-font-size);
3344
- line-height:var(--tds-checkbox-group-line-height);
3345
- border:0;
3346
- }
3347
-
3348
- .tds-checkbox-group legend{
3349
- padding:0;
3350
- margin-bottom:var(--tds-checkbox-group-legend-margin-bottom);
3351
- }
3352
-
3353
- .tds-checkbox-group:has(.tds-checkbox-group-description){
3354
- --tds-checkbox-group-legend-margin-bottom:var(--t-spacing-fourth);
3355
- }
3356
-
3357
- .tds-checkbox-group[aria-invalid="true"]{
3358
- --tds-checkbox-group-description-color:var(--t-text-color-status-error);
3359
- --tds-checkbox-group-description-invalid-icon-display:inline-block;
3360
- }
3361
-
3362
- .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) legend::after{
3363
- margin-left:.25ch;
3364
- color:var(--t-text-color-status-error);
3365
- content:"*";
3366
- }
3367
-
3368
- .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
3369
- content:none;
3370
- }
3371
-
3372
- .tds-checkbox-group-fields{
3373
- display:flex;
3374
- flex-direction:column;
3375
- gap:var(--tds-checkbox-group-gap);
3376
- align-items:flex-start;
3377
- }
3378
-
3379
- .tds-checkbox-group-description{
3380
- display:flex;
3381
- gap:var(--t-spacing-half);
3382
- align-items:flex-start;
3383
- margin:0;
3384
- font-size:var(--tds-checkbox-group-description-font-size);
3385
- line-height:var(--tds-checkbox-group-description-line-height);
3386
- color:var(--tds-checkbox-group-description-color);
3387
- cursor:text;
3388
- }
3389
-
3390
- .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
3391
- display:var(--tds-checkbox-group-description-invalid-icon-display);
3392
- flex-shrink:0;
3393
- margin-top:calc(.5lh - .5em);
3394
- line-height:var(--tds-checkbox-group-description-line-height);
3395
- }
3396
-
3397
- .tds-checkbox-group--sm{
3398
- --tds-checkbox-group-line-height:1.35;
3399
- --tds-checkbox-group-font-size:var(--t-font-size-sm);
3400
- --tds-checkbox-group-description-font-size:var(--t-font-size-xs);
3401
- --tds-checkbox-group-description-line-height:1.3;
3402
- }
3403
-
3404
3324
  .tds-combo-box{
3405
3325
  --tds-combo-box-border-color:var(--t-form-border-color);
3406
3326
  --tds-combo-box-border-color-hover:var(--t-form-border-color-hover);
@@ -3653,6 +3573,13 @@ a[class="tds-btn"]{
3653
3573
  background:transparent;
3654
3574
  }
3655
3575
 
3576
+ .tds-combo-box-empty-state{
3577
+ padding-block:var(--t-spacing-1);
3578
+ padding-inline:var(--t-spacing-2);
3579
+ font-size:var(--t-font-size-md);
3580
+ color:var(--t-text-color-secondary);
3581
+ }
3582
+
3656
3583
  .tds-combo-box-list-section:not(:first-child){
3657
3584
  margin-block-start:var(--t-spacing-half);
3658
3585
  }
@@ -3683,154 +3610,84 @@ a[class="tds-btn"]{
3683
3610
  line-height:1.35;
3684
3611
  }
3685
3612
 
3686
- .tds-time-field{
3687
- --tds-time-field-border-color:var(--t-form-border-color);
3688
- --tds-time-field-border-color-hover:var(--t-form-border-color-hover);
3689
- --tds-time-field-border-color-active:var(--t-form-border-color-focus);
3690
- --tds-time-field-background-color:var(--t-form-background-color);
3691
- --tds-time-field-color:var(--t-form-color);
3692
- --tds-time-field-placeholder-color:var(--t-form-placeholder-color);
3693
- --tds-time-field-font-size:var(--t-font-size-md);
3694
- --tds-time-field-min-height:var(--t-container-size-md);
3695
- --tds-time-field-padding-block:6px;
3696
- --tds-time-field-description-color:var(--t-text-color-secondary);
3697
- --tds-time-field-description-invalid-icon-display:none;
3613
+ .tds-checkbox-group{
3614
+ --tds-checkbox-group-font-size:var(--t-font-size-md);
3615
+ --tds-checkbox-group-line-height:1.4;
3616
+ --tds-checkbox-group-gap:var(--t-spacing-1);
3698
3617
 
3699
- position:relative;
3618
+ --tds-checkbox-group-legend-margin-bottom:var(--tds-checkbox-group-gap);
3619
+
3620
+ --tds-checkbox-group-description-font-size:var(--t-font-size-sm);
3621
+ --tds-checkbox-group-description-line-height:1.35;
3622
+ --tds-checkbox-group-description-color:var(--t-text-color-secondary);
3623
+ --tds-checkbox-group-description-invalid-icon-display:none;
3700
3624
  display:flex;
3701
3625
  flex-direction:column;
3702
- gap:var(--t-spacing-half);
3703
- }
3704
-
3705
- .tds-time-field[data-required] .tds-time-field-label::after{
3706
- margin-left:.25ch;
3707
- color:var(--t-text-color-status-error);
3708
- content:"*";
3709
- }
3710
-
3711
- .tds-time-field[data-invalid]{
3712
- --tds-time-field-border-color:var(--t-form-border-color-error);
3713
- --tds-time-field-border-color-hover:var(--t-form-border-color-error-hover);
3714
- --tds-time-field-border-color-active:var(--t-form-border-color-error-hover);
3715
- --tds-time-field-background-color:var(--t-form-background-color-error);
3716
- --tds-time-field-description-color:var(--t-text-color-status-error);
3717
- --tds-time-field-description-invalid-icon-display:inline-block;
3718
- }
3719
-
3720
- .tds-time-field[data-disabled]{
3721
- --tds-time-field-border-color:var(--t-form-border-color-disabled);
3722
- --tds-time-field-background-color:var(--t-form-background-color-disabled);
3723
- --tds-time-field-color:var(--t-form-color-disabled);
3724
- --tds-time-field-placeholder-color:var(--t-form-color-disabled);
3725
- }
3726
-
3727
- .tds-time-field[data-disabled] .tds-time-field-label{
3728
- color:var(--t-form-color-disabled);
3729
- }
3730
-
3731
- .tds-time-field[data-disabled] .tds-time-field-input{
3732
- cursor:not-allowed;
3733
- }
3734
-
3735
- .tds-time-field--lg{
3736
- --tds-time-field-min-height:var(--t-container-size-lg);
3737
- --tds-time-field-font-size:var(--t-font-size-lg);
3738
- }
3739
-
3740
- .tds-time-field-label{
3741
- font-size:var(--t-font-size-md);
3742
- font-weight:var(--t-font-weight-normal);
3743
- color:var(--t-text-color);
3744
- cursor:default;
3745
- }
3626
+ gap:var(--tds-checkbox-group-gap);
3627
+ padding:0;
3628
+ margin:0;
3746
3629
 
3747
- .tds-time-field-input{
3748
- display:flex;
3749
- align-items:center;
3750
- inline-size:100%;
3751
- min-block-size:var(--tds-time-field-min-height);
3752
- padding-block:var(--tds-time-field-padding-block);
3753
- padding-inline:var(--t-spacing-1);
3754
- font-family:inherit;
3755
- font-size:var(--tds-time-field-font-size);
3756
- font-variant-numeric:tabular-nums;
3757
- line-height:1;
3758
- color:var(--tds-time-field-color);
3759
- cursor:text;
3760
- outline:var(--t-focus-ring-width) solid transparent;
3761
- outline-offset:0;
3762
- background-color:var(--tds-time-field-background-color);
3763
- border:var(--t-form-border-width) solid var(--tds-time-field-border-color);
3764
- border-radius:var(--t-form-border-radius);
3630
+ font-size:var(--tds-checkbox-group-font-size);
3631
+ line-height:var(--tds-checkbox-group-line-height);
3632
+ border:0;
3765
3633
  }
3766
3634
 
3767
- .tds-time-field-input[data-hovered]:not([data-focus-visible],[data-focused],[data-disabled]){
3768
- border-color:var(--tds-time-field-border-color-hover);
3635
+ .tds-checkbox-group legend{
3636
+ padding:0;
3637
+ margin-bottom:var(--tds-checkbox-group-legend-margin-bottom);
3769
3638
  }
3770
3639
 
3771
- .tds-time-field-input[data-focus-within]{
3772
- outline-color:var(--t-focus-ring-color);
3773
- outline-offset:var(--t-focus-ring-offset);
3774
- border-color:var(--tds-time-field-border-color-active);
3640
+ .tds-checkbox-group:has(.tds-checkbox-group-description){
3641
+ --tds-checkbox-group-legend-margin-bottom:var(--t-spacing-fourth);
3775
3642
  }
3776
3643
 
3777
- .tds-time-field-input[data-readonly]{
3778
- color:var(--t-form-color-readonly);
3779
- background-color:var(--t-form-background-color-readonly);
3780
- border-color:var(--t-form-border-color-readonly);
3644
+ .tds-checkbox-group[aria-invalid="true"]{
3645
+ --tds-checkbox-group-description-color:var(--t-text-color-status-error);
3646
+ --tds-checkbox-group-description-invalid-icon-display:inline-block;
3781
3647
  }
3782
3648
 
3783
- .tds-time-field-input[data-readonly][data-hovered]{
3784
- border-color:var(--t-form-border-color-readonly);
3649
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) legend::after{
3650
+ margin-left:.25ch;
3651
+ color:var(--t-text-color-status-error);
3652
+ content:"*";
3785
3653
  }
3786
3654
 
3787
- .tds-time-field-input[data-readonly][data-focus-within]{
3788
- outline-color:var(--t-focus-ring-color);
3789
- outline-offset:var(--t-focus-ring-offset);
3790
- border-color:var(--t-form-border-color-hover);
3655
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
3656
+ content:none;
3791
3657
  }
3792
3658
 
3793
- .tds-time-field-segment{
3794
- padding-inline:1px;
3795
- font-variant-numeric:tabular-nums;
3796
- cursor:text;
3797
- caret-color:transparent;
3798
- border-radius:var(--t-border-radius-sm);
3799
- }
3800
-
3801
- .tds-time-field-segment[data-placeholder]{
3802
- color:var(--tds-time-field-placeholder-color);
3803
- }
3804
-
3805
- .tds-time-field-segment[data-focused]{
3806
- color:var(--t-text-color-inverted);
3807
- outline:0;
3808
- background:var(--t-fill-color-interaction);
3809
- }
3810
-
3811
- .tds-time-field-segment-separator{
3812
- padding-inline:0;
3813
- color:var(--tds-time-field-placeholder-color);
3659
+ .tds-checkbox-group-fields{
3660
+ display:flex;
3661
+ flex-direction:column;
3662
+ gap:var(--tds-checkbox-group-gap);
3663
+ align-items:flex-start;
3814
3664
  }
3815
3665
 
3816
- .tds-time-field-description{
3666
+ .tds-checkbox-group-description{
3817
3667
  display:flex;
3818
3668
  gap:var(--t-spacing-half);
3819
3669
  align-items:flex-start;
3820
3670
  margin:0;
3821
- font-size:var(--t-font-size-sm);
3822
- line-height:1.35;
3823
- color:var(--tds-time-field-description-color, var(--t-text-color-secondary));
3671
+ font-size:var(--tds-checkbox-group-description-font-size);
3672
+ line-height:var(--tds-checkbox-group-description-line-height);
3673
+ color:var(--tds-checkbox-group-description-color);
3824
3674
  cursor:text;
3825
3675
  }
3826
3676
 
3827
- .tds-time-field-description .tds-time-field-description-invalid-icon{
3828
- display:var(--tds-time-field-description-invalid-icon-display, none);
3677
+ .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
3678
+ display:var(--tds-checkbox-group-description-invalid-icon-display);
3829
3679
  flex-shrink:0;
3830
- margin-block-start:calc(.5lh - .5em);
3831
- line-height:1.35;
3680
+ margin-top:calc(.5lh - .5em);
3681
+ line-height:var(--tds-checkbox-group-description-line-height);
3832
3682
  }
3833
3683
 
3684
+ .tds-checkbox-group--sm{
3685
+ --tds-checkbox-group-line-height:1.35;
3686
+ --tds-checkbox-group-font-size:var(--t-font-size-sm);
3687
+ --tds-checkbox-group-description-font-size:var(--t-font-size-xs);
3688
+ --tds-checkbox-group-description-line-height:1.3;
3689
+ }
3690
+
3834
3691
  .tds-date-picker{
3835
3692
  --tds-date-picker-border-color:var(--t-form-border-color);
3836
3693
  --tds-date-picker-border-color-hover:var(--t-form-border-color-hover);
@@ -3992,8 +3849,9 @@ a[class="tds-btn"]{
3992
3849
  }
3993
3850
 
3994
3851
  .tds-date-picker-popover{
3852
+ --tds-date-picker-popover-padding:var(--t-spacing-1-half);
3853
+
3995
3854
  position:relative;
3996
- padding:var(--t-spacing-2);
3997
3855
  overflow:hidden;
3998
3856
  background:var(--t-surface-color-card);
3999
3857
  border:1px solid var(--t-border-color);
@@ -4034,59 +3892,23 @@ a[class="tds-btn"]{
4034
3892
  inset:0;
4035
3893
  z-index:1;
4036
3894
  display:flex;
4037
- flex-direction:column;
4038
- row-gap:var(--t-spacing-1);
4039
- padding:var(--t-spacing-2);
4040
3895
  background:var(--t-surface-color-card);
4041
3896
  }
4042
3897
 
4043
- .tds-date-picker-overlay-header{
4044
- display:flex;
4045
- align-items:center;
4046
- justify-content:center;
4047
- margin-block-end:var(--t-spacing-half);
4048
- }
4049
-
4050
- .tds-date-picker-overlay-close{
4051
- position:absolute;
4052
- right:var(--t-spacing-2);
4053
- display:flex;
4054
- align-items:center;
4055
- justify-content:center;
4056
- inline-size:1.5rem;
4057
- block-size:1.5rem;
4058
- padding:0;
4059
- font-size:1.25rem;
4060
- line-height:1;
4061
- color:var(--t-text-color);
4062
- cursor:default;
4063
- outline:0;
4064
- background:transparent;
4065
- border:0;
4066
- border-radius:var(--t-border-radius-sm);
4067
- }
4068
-
4069
- .tds-date-picker-overlay-close[data-hovered]{
4070
- background:var(--t-fill-color-neutral-070);
4071
- }
4072
-
4073
- .tds-date-picker-overlay-close[data-focus-visible]{
4074
- outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
4075
- outline-offset:var(--t-focus-ring-offset);
4076
- }
4077
-
4078
- .tds-date-picker-overlay-grid{
3898
+ .tds-date-picker-overlay-list{
4079
3899
  display:grid;
4080
3900
  gap:var(--t-spacing-half);
3901
+ padding-inline:var(--tds-date-picker-popover-padding);
3902
+ outline:0;
4081
3903
  }
4082
3904
 
4083
- .tds-date-picker-overlay--month .tds-date-picker-overlay-grid{
3905
+ .tds-date-picker-overlay--month .tds-date-picker-overlay-list{
4084
3906
  flex:1;
4085
3907
  grid-template-rows:repeat(4, 1fr);
4086
3908
  grid-template-columns:repeat(3, 1fr);
4087
3909
  }
4088
3910
 
4089
- .tds-date-picker-overlay--year .tds-date-picker-overlay-grid{
3911
+ .tds-date-picker-overlay--year .tds-date-picker-overlay-list{
4090
3912
  flex:1;
4091
3913
  grid-template-columns:repeat(4, 1fr);
4092
3914
  grid-auto-rows:3rem;
@@ -4107,16 +3929,16 @@ a[class="tds-btn"]{
4107
3929
  border-radius:var(--t-border-radius-sm);
4108
3930
  }
4109
3931
 
4110
- .tds-date-picker-overlay-cell:hover{
3932
+ .tds-date-picker-overlay-cell[data-hovered]{
4111
3933
  background:var(--t-fill-color-neutral-070);
4112
3934
  }
4113
3935
 
4114
- .tds-date-picker-overlay-cell[aria-selected="true"]{
3936
+ .tds-date-picker-overlay-cell[data-selected]{
4115
3937
  color:var(--t-text-color-inverted);
4116
3938
  background:var(--t-fill-color-interaction);
4117
3939
  }
4118
3940
 
4119
- .tds-date-picker-overlay-cell:focus-visible{
3941
+ .tds-date-picker-overlay-cell[data-focus-visible]{
4120
3942
  outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
4121
3943
  outline-offset:var(--t-focus-ring-offset);
4122
3944
  }
@@ -4126,7 +3948,7 @@ a[class="tds-btn"]{
4126
3948
  flex:1;
4127
3949
  gap:var(--t-spacing-half);
4128
3950
  align-items:center;
4129
- justify-content:center;
3951
+ justify-content:flex-start;
4130
3952
  }
4131
3953
 
4132
3954
  .tds-date-picker-calendar-overlay-trigger{
@@ -4156,11 +3978,17 @@ a[class="tds-btn"]{
4156
3978
  inline-size:fit-content;
4157
3979
  }
4158
3980
 
3981
+ .tds-date-picker-calendar-body{
3982
+ position:relative;
3983
+ padding:var(--tds-date-picker-popover-padding);
3984
+ padding-block-start:0;
3985
+ }
3986
+
4159
3987
  .tds-date-picker-calendar-header{
4160
3988
  display:flex;
4161
3989
  align-items:center;
4162
3990
  justify-content:space-between;
4163
- padding-block-end:var(--t-spacing-1);
3991
+ padding:var(--tds-date-picker-popover-padding);
4164
3992
  }
4165
3993
 
4166
3994
  .tds-date-picker-calendar-title{
@@ -4311,10 +4139,6 @@ a[class="tds-btn"]{
4311
4139
  --tds-number-stepper-color:var(--t-form-color-disabled);
4312
4140
  }
4313
4141
 
4314
- .tds-number-stepper[data-disabled] .tds-number-stepper-label{
4315
- color:var(--t-form-color-disabled);
4316
- }
4317
-
4318
4142
  .tds-number-stepper[data-disabled] .tds-number-stepper-field{
4319
4143
  cursor:not-allowed;
4320
4144
  }
@@ -4365,6 +4189,8 @@ a[class="tds-btn"]{
4365
4189
  }
4366
4190
 
4367
4191
  .tds-number-stepper-field:has([readonly]){
4192
+ --tds-number-stepper-border-color:var(--t-form-border-color-readonly);
4193
+ --tds-number-stepper-border-color-hover:var(--t-form-border-color-readonly);
4368
4194
  --tds-number-stepper-background-color:var(--t-form-background-color-readonly);
4369
4195
  }
4370
4196
 
@@ -4372,6 +4198,10 @@ a[class="tds-btn"]{
4372
4198
  border-color:var(--t-form-border-color-hover);
4373
4199
  }
4374
4200
 
4201
+ .tds-number-stepper-field:has([readonly]) .tds-number-stepper-button{
4202
+ display:none;
4203
+ }
4204
+
4375
4205
  .tds-number-stepper-input{
4376
4206
  display:flex;
4377
4207
  flex:1;
@@ -4423,6 +4253,154 @@ a[class="tds-btn"]{
4423
4253
  line-height:1.35;
4424
4254
  }
4425
4255
 
4256
+ .tds-time-field{
4257
+ --tds-time-field-border-color:var(--t-form-border-color);
4258
+ --tds-time-field-border-color-hover:var(--t-form-border-color-hover);
4259
+ --tds-time-field-border-color-active:var(--t-form-border-color-focus);
4260
+ --tds-time-field-background-color:var(--t-form-background-color);
4261
+ --tds-time-field-color:var(--t-form-color);
4262
+ --tds-time-field-placeholder-color:var(--t-form-placeholder-color);
4263
+ --tds-time-field-font-size:var(--t-font-size-md);
4264
+ --tds-time-field-min-height:var(--t-container-size-md);
4265
+ --tds-time-field-padding-block:6px;
4266
+ --tds-time-field-description-color:var(--t-text-color-secondary);
4267
+ --tds-time-field-description-invalid-icon-display:none;
4268
+
4269
+ position:relative;
4270
+ display:flex;
4271
+ flex-direction:column;
4272
+ gap:var(--t-spacing-half);
4273
+ }
4274
+
4275
+ .tds-time-field[data-required] .tds-time-field-label::after{
4276
+ margin-left:.25ch;
4277
+ color:var(--t-text-color-status-error);
4278
+ content:"*";
4279
+ }
4280
+
4281
+ .tds-time-field[data-invalid]{
4282
+ --tds-time-field-border-color:var(--t-form-border-color-error);
4283
+ --tds-time-field-border-color-hover:var(--t-form-border-color-error-hover);
4284
+ --tds-time-field-border-color-active:var(--t-form-border-color-error-hover);
4285
+ --tds-time-field-background-color:var(--t-form-background-color-error);
4286
+ --tds-time-field-description-color:var(--t-text-color-status-error);
4287
+ --tds-time-field-description-invalid-icon-display:inline-block;
4288
+ }
4289
+
4290
+ .tds-time-field[data-disabled]{
4291
+ --tds-time-field-border-color:var(--t-form-border-color-disabled);
4292
+ --tds-time-field-background-color:var(--t-form-background-color-disabled);
4293
+ --tds-time-field-color:var(--t-form-color-disabled);
4294
+ --tds-time-field-placeholder-color:var(--t-form-color-disabled);
4295
+ }
4296
+
4297
+ .tds-time-field[data-disabled] .tds-time-field-label{
4298
+ color:var(--t-form-color-disabled);
4299
+ }
4300
+
4301
+ .tds-time-field[data-disabled] .tds-time-field-input{
4302
+ cursor:not-allowed;
4303
+ }
4304
+
4305
+ .tds-time-field--lg{
4306
+ --tds-time-field-min-height:var(--t-container-size-lg);
4307
+ --tds-time-field-font-size:var(--t-font-size-lg);
4308
+ }
4309
+
4310
+ .tds-time-field-label{
4311
+ font-size:var(--t-font-size-md);
4312
+ font-weight:var(--t-font-weight-normal);
4313
+ color:var(--t-text-color);
4314
+ cursor:default;
4315
+ }
4316
+
4317
+ .tds-time-field-input{
4318
+ display:flex;
4319
+ align-items:center;
4320
+ inline-size:100%;
4321
+ min-block-size:var(--tds-time-field-min-height);
4322
+ padding-block:var(--tds-time-field-padding-block);
4323
+ padding-inline:var(--t-spacing-1);
4324
+ font-family:inherit;
4325
+ font-size:var(--tds-time-field-font-size);
4326
+ font-variant-numeric:tabular-nums;
4327
+ line-height:1;
4328
+ color:var(--tds-time-field-color);
4329
+ cursor:text;
4330
+ outline:var(--t-focus-ring-width) solid transparent;
4331
+ outline-offset:0;
4332
+ background-color:var(--tds-time-field-background-color);
4333
+ border:var(--t-form-border-width) solid var(--tds-time-field-border-color);
4334
+ border-radius:var(--t-form-border-radius);
4335
+ }
4336
+
4337
+ .tds-time-field-input[data-hovered]:not([data-focus-visible],[data-focused],[data-disabled]){
4338
+ border-color:var(--tds-time-field-border-color-hover);
4339
+ }
4340
+
4341
+ .tds-time-field-input[data-focus-within]{
4342
+ outline-color:var(--t-focus-ring-color);
4343
+ outline-offset:var(--t-focus-ring-offset);
4344
+ border-color:var(--tds-time-field-border-color-active);
4345
+ }
4346
+
4347
+ .tds-time-field-input[data-readonly]{
4348
+ color:var(--t-form-color-readonly);
4349
+ background-color:var(--t-form-background-color-readonly);
4350
+ border-color:var(--t-form-border-color-readonly);
4351
+ }
4352
+
4353
+ .tds-time-field-input[data-readonly][data-hovered]{
4354
+ border-color:var(--t-form-border-color-readonly);
4355
+ }
4356
+
4357
+ .tds-time-field-input[data-readonly][data-focus-within]{
4358
+ outline-color:var(--t-focus-ring-color);
4359
+ outline-offset:var(--t-focus-ring-offset);
4360
+ border-color:var(--t-form-border-color-hover);
4361
+ }
4362
+
4363
+ .tds-time-field-segment{
4364
+ padding-inline:1px;
4365
+ font-variant-numeric:tabular-nums;
4366
+ cursor:text;
4367
+ caret-color:transparent;
4368
+ border-radius:var(--t-border-radius-sm);
4369
+ }
4370
+
4371
+ .tds-time-field-segment[data-placeholder]{
4372
+ color:var(--tds-time-field-placeholder-color);
4373
+ }
4374
+
4375
+ .tds-time-field-segment[data-focused]{
4376
+ color:var(--t-text-color-inverted);
4377
+ outline:0;
4378
+ background:var(--t-fill-color-interaction);
4379
+ }
4380
+
4381
+ .tds-time-field-segment-separator{
4382
+ padding-inline:0;
4383
+ color:var(--tds-time-field-placeholder-color);
4384
+ }
4385
+
4386
+ .tds-time-field-description{
4387
+ display:flex;
4388
+ gap:var(--t-spacing-half);
4389
+ align-items:flex-start;
4390
+ margin:0;
4391
+ font-size:var(--t-font-size-sm);
4392
+ line-height:1.35;
4393
+ color:var(--tds-time-field-description-color, var(--t-text-color-secondary));
4394
+ cursor:text;
4395
+ }
4396
+
4397
+ .tds-time-field-description .tds-time-field-description-invalid-icon{
4398
+ display:var(--tds-time-field-description-invalid-icon-display, none);
4399
+ flex-shrink:0;
4400
+ margin-block-start:calc(.5lh - .5em);
4401
+ line-height:1.35;
4402
+ }
4403
+
4426
4404
  .t-banner{
4427
4405
  --t-banner-font-size:var(--t-font-size-md);
4428
4406
  --t-banner-font-color:var(--t-text-color);