@planningcenter/tapestry 3.3.1 → 3.3.2-qa-891.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 (146) hide show
  1. package/dist/components/button/Button.d.ts +1 -0
  2. package/dist/components/button/Button.d.ts.map +1 -1
  3. package/dist/components/button/Button.js +1 -0
  4. package/dist/components/button/Button.js.map +1 -1
  5. package/dist/components/button/DropdownButton.d.ts +18 -4
  6. package/dist/components/button/DropdownButton.d.ts.map +1 -1
  7. package/dist/components/button/DropdownButton.js +7 -0
  8. package/dist/components/button/DropdownButton.js.map +1 -1
  9. package/dist/components/button/DropdownIconButton.d.ts +8 -0
  10. package/dist/components/button/DropdownIconButton.d.ts.map +1 -1
  11. package/dist/components/button/DropdownIconButton.js +8 -0
  12. package/dist/components/button/DropdownIconButton.js.map +1 -1
  13. package/dist/components/button/IconButton.d.ts +1 -0
  14. package/dist/components/button/IconButton.d.ts.map +1 -1
  15. package/dist/components/button/IconButton.js +1 -0
  16. package/dist/components/button/IconButton.js.map +1 -1
  17. package/dist/components/button/LoadingButton.d.ts +1 -0
  18. package/dist/components/button/LoadingButton.d.ts.map +1 -1
  19. package/dist/components/button/LoadingButton.js +1 -0
  20. package/dist/components/button/LoadingButton.js.map +1 -1
  21. package/dist/components/button/PageHeaderActionsDropdownButton.d.ts +8 -0
  22. package/dist/components/button/PageHeaderActionsDropdownButton.d.ts.map +1 -1
  23. package/dist/components/button/PageHeaderActionsDropdownButton.js +8 -0
  24. package/dist/components/button/PageHeaderActionsDropdownButton.js.map +1 -1
  25. package/dist/components/checkbox/Checkbox.d.ts +1 -0
  26. package/dist/components/checkbox/Checkbox.d.ts.map +1 -1
  27. package/dist/components/checkbox/Checkbox.js +1 -0
  28. package/dist/components/checkbox/Checkbox.js.map +1 -1
  29. package/dist/components/combo-box/ComboBox.d.ts +3 -1
  30. package/dist/components/combo-box/ComboBox.d.ts.map +1 -1
  31. package/dist/components/combo-box/ComboBox.js +5 -1
  32. package/dist/components/combo-box/ComboBox.js.map +1 -1
  33. package/dist/components/date-picker/DatePicker.d.ts +1 -1
  34. package/dist/components/date-picker/DatePicker.d.ts.map +1 -1
  35. package/dist/components/date-picker/DatePicker.js +12 -9
  36. package/dist/components/date-picker/DatePicker.js.map +1 -1
  37. package/dist/components/dropdown/Dropdown.d.ts +155 -0
  38. package/dist/components/dropdown/Dropdown.d.ts.map +1 -0
  39. package/dist/components/dropdown/Dropdown.js +103 -0
  40. package/dist/components/dropdown/Dropdown.js.map +1 -0
  41. package/dist/components/dropdown/index.d.ts +4 -0
  42. package/dist/components/dropdown/index.d.ts.map +1 -0
  43. package/dist/components/input/Input.d.ts +9 -0
  44. package/dist/components/input/Input.d.ts.map +1 -1
  45. package/dist/components/input/Input.js +9 -0
  46. package/dist/components/input/Input.js.map +1 -1
  47. package/dist/components/link/IconLink.d.ts +7 -0
  48. package/dist/components/link/IconLink.d.ts.map +1 -1
  49. package/dist/components/link/IconLink.js +7 -0
  50. package/dist/components/link/IconLink.js.map +1 -1
  51. package/dist/components/link/Link.d.ts +8 -0
  52. package/dist/components/link/Link.d.ts.map +1 -1
  53. package/dist/components/link/Link.js +8 -0
  54. package/dist/components/link/Link.js.map +1 -1
  55. package/dist/components/number-stepper/NumberStepper.d.ts +1 -1
  56. package/dist/components/number-stepper/NumberStepper.d.ts.map +1 -1
  57. package/dist/components/number-stepper/NumberStepper.js +1 -1
  58. package/dist/components/number-stepper/NumberStepper.js.map +1 -1
  59. package/dist/components/page-header/PageHeader.d.ts +8 -0
  60. package/dist/components/page-header/PageHeader.d.ts.map +1 -1
  61. package/dist/components/page-header/PageHeader.js +8 -0
  62. package/dist/components/page-header/PageHeader.js.map +1 -1
  63. package/dist/components/radio/Radio.d.ts +1 -0
  64. package/dist/components/radio/Radio.d.ts.map +1 -1
  65. package/dist/components/radio/Radio.js +1 -0
  66. package/dist/components/radio/Radio.js.map +1 -1
  67. package/dist/components/radio-group/RadioGroup.d.ts +1 -0
  68. package/dist/components/radio-group/RadioGroup.d.ts.map +1 -1
  69. package/dist/components/radio-group/RadioGroup.js +1 -0
  70. package/dist/components/radio-group/RadioGroup.js.map +1 -1
  71. package/dist/components/select/Select.d.ts +9 -0
  72. package/dist/components/select/Select.d.ts.map +1 -1
  73. package/dist/components/select/Select.js +9 -0
  74. package/dist/components/select/Select.js.map +1 -1
  75. package/dist/components/select/SelectNative.d.ts +10 -0
  76. package/dist/components/select/SelectNative.d.ts.map +1 -1
  77. package/dist/components/select/SelectNative.js +10 -0
  78. package/dist/components/select/SelectNative.js.map +1 -1
  79. package/dist/components/select/SelectPopover.d.ts +10 -0
  80. package/dist/components/select/SelectPopover.d.ts.map +1 -1
  81. package/dist/components/select/SelectPopover.js +10 -0
  82. package/dist/components/select/SelectPopover.js.map +1 -1
  83. package/dist/components/sidenav/Sidenav.d.ts +3 -0
  84. package/dist/components/sidenav/Sidenav.d.ts.map +1 -1
  85. package/dist/components/sidenav/Sidenav.js +3 -0
  86. package/dist/components/sidenav/Sidenav.js.map +1 -1
  87. package/dist/components/sidenav/SidenavItem.d.ts +3 -0
  88. package/dist/components/sidenav/SidenavItem.d.ts.map +1 -1
  89. package/dist/components/sidenav/SidenavItem.js +3 -0
  90. package/dist/components/sidenav/SidenavItem.js.map +1 -1
  91. package/dist/components/sidenav/SidenavSection.d.ts +3 -0
  92. package/dist/components/sidenav/SidenavSection.d.ts.map +1 -1
  93. package/dist/components/sidenav/SidenavSection.js +3 -0
  94. package/dist/components/sidenav/SidenavSection.js.map +1 -1
  95. package/dist/components/text-area/TextArea.d.ts +8 -0
  96. package/dist/components/text-area/TextArea.d.ts.map +1 -1
  97. package/dist/components/text-area/TextArea.js +8 -0
  98. package/dist/components/text-area/TextArea.js.map +1 -1
  99. package/dist/components/time-field/TimeField.d.ts +1 -1
  100. package/dist/components/time-field/TimeField.d.ts.map +1 -1
  101. package/dist/components/time-field/TimeField.js +1 -1
  102. package/dist/components/time-field/TimeField.js.map +1 -1
  103. package/dist/components/toggle-switch/ToggleSwitch.d.ts +3 -0
  104. package/dist/components/toggle-switch/ToggleSwitch.d.ts.map +1 -1
  105. package/dist/components/toggle-switch/ToggleSwitch.js +3 -0
  106. package/dist/components/toggle-switch/ToggleSwitch.js.map +1 -1
  107. package/dist/ext/@internationalized/date/dist/{CalendarDate.js → private/CalendarDate.js} +74 -88
  108. package/dist/ext/@internationalized/date/dist/private/CalendarDate.js.map +1 -0
  109. package/dist/ext/@internationalized/date/dist/{GregorianCalendar.js → private/calendars/GregorianCalendar.js} +26 -26
  110. package/dist/ext/@internationalized/date/dist/private/calendars/GregorianCalendar.js.map +1 -0
  111. package/dist/ext/@internationalized/date/dist/{conversion.js → private/conversion.js} +55 -55
  112. package/dist/ext/@internationalized/date/dist/private/conversion.js.map +1 -0
  113. package/dist/ext/@internationalized/date/dist/{manipulation.js → private/manipulation.js} +88 -91
  114. package/dist/ext/@internationalized/date/dist/private/manipulation.js.map +1 -0
  115. package/dist/ext/@internationalized/date/dist/private/queries.js +32 -0
  116. package/dist/ext/@internationalized/date/dist/private/queries.js.map +1 -0
  117. package/dist/ext/@internationalized/date/dist/private/string.js +51 -0
  118. package/dist/ext/@internationalized/date/dist/private/string.js.map +1 -0
  119. package/dist/ext/@internationalized/date/dist/{utils.js → private/utils.js} +2 -2
  120. package/dist/ext/@internationalized/date/dist/private/utils.js.map +1 -0
  121. package/dist/index.css +11 -6
  122. package/dist/index.css.map +1 -1
  123. package/dist/reactRender.css +1412 -1282
  124. package/dist/reactRender.css.map +1 -1
  125. package/dist/reactRenderLegacy.css +1412 -1282
  126. package/dist/reactRenderLegacy.css.map +1 -1
  127. package/dist/unstable.css +136 -6
  128. package/dist/unstable.css.map +1 -1
  129. package/dist/unstable.d.ts +1 -0
  130. package/dist/unstable.d.ts.map +1 -1
  131. package/dist/unstable.js +1 -0
  132. package/dist/unstable.js.map +1 -1
  133. package/package.json +6 -6
  134. package/dist/ext/@internationalized/date/dist/CalendarDate.js.map +0 -1
  135. package/dist/ext/@internationalized/date/dist/GregorianCalendar.js.map +0 -1
  136. package/dist/ext/@internationalized/date/dist/conversion.js.map +0 -1
  137. package/dist/ext/@internationalized/date/dist/manipulation.js.map +0 -1
  138. package/dist/ext/@internationalized/date/dist/queries.js +0 -34
  139. package/dist/ext/@internationalized/date/dist/queries.js.map +0 -1
  140. package/dist/ext/@internationalized/date/dist/string.js +0 -51
  141. package/dist/ext/@internationalized/date/dist/string.js.map +0 -1
  142. package/dist/ext/@internationalized/date/dist/utils.js.map +0 -1
  143. package/dist/ext/@swc/helpers/esm/_check_private_redeclaration.js +0 -8
  144. package/dist/ext/@swc/helpers/esm/_check_private_redeclaration.js.map +0 -1
  145. package/dist/ext/@swc/helpers/esm/_class_private_field_init.js +0 -9
  146. package/dist/ext/@swc/helpers/esm/_class_private_field_init.js.map +0 -1
@@ -276,1393 +276,1496 @@
276
276
  }
277
277
  }
278
278
 
279
- .tds-checkbox{
280
- --tds-checkbox-font-size:var(--t-font-size-md);
281
- --tds-checkbox-cursor:pointer;
282
- --tds-checkbox-line-height:1.4;
283
- --tds-checkbox-transition-property:background-color, border-color;
284
279
 
285
- --tds-checkbox-input-size:var(--t-element-size-md);
286
- --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
287
- --tds-checkbox-input-border-color:var(--t-form-border-color);
288
- --tds-checkbox-input-background-color:transparent;
280
+ @media (prefers-reduced-motion: no-preference){
289
281
 
290
- --tds-checkbox-input-icon:none;
291
- --tds-checkbox-input-icon-visibility:hidden;
292
- --tds-checkbox-input-icon-opacity:0;
293
- --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
282
+ :root{
283
+ interpolate-size:allow-keywords;
284
+ }
285
+ }
294
286
 
295
- --tds-checkbox-label-color:var(--t-form-color);
287
+ @layer tds-component{
288
+ tds-sidenav,
289
+ .tds-sidenav{
290
+ --tds-sidenav-indent:12px;
291
+ --tds-sidenav-item-depth:0;
296
292
 
297
- --tds-checkbox-description-font-size:var(--t-font-size-sm);
298
- --tds-checkbox-description-line-height:1.35;
299
- --tds-checkbox-description-color:var(--t-text-color-secondary);
300
- --tds-checkbox-description-invalid-icon-display:none;
293
+ --tds-sidenav-item-transition:background-color var(--t-duration-200) var(--t-ease-in-out);
301
294
 
302
- position:relative;
303
- display:inline-grid;
304
- grid-template-columns:auto;
305
- grid-auto-columns:1fr;
306
- gap:var(--t-spacing-fourth) var(--t-spacing-1);
307
- line-height:var(--tds-checkbox-line-height);
308
- cursor:var(--tds-checkbox-cursor);
309
- -webkit-user-select:none;
310
- -moz-user-select:none;
311
- user-select:none;
295
+ --tds-sidenav-collapse-transition-enter:opacity var(--t-duration-300) var(--t-ease-out), transform var(--t-duration-300) var(--t-ease-out), display var(--t-duration-300) allow-discrete, overlay var(--t-duration-300) allow-discrete;
296
+ --tds-sidenav-collapse-transition-exit:opacity var(--t-duration-200) var(--t-ease-in), display var(--t-duration-200) allow-discrete, overlay var(--t-duration-200) allow-discrete;
297
+ --tds-sidenav-collapse-closed-opacity:0;
298
+ --tds-sidenav-collapse-open-opacity:1;
299
+ --tds-sidenav-collapse-closed-transform:translateY(-8px);
300
+ --tds-sidenav-collapse-open-transform:translateY(0);
301
+
302
+ --tds-sidenav-item-icon-size:var(--t-element-size-md);
303
+ --tds-sidenav-item-background-hover:var(--t-fill-color-button-interaction-ghost-hover);
304
+ --tds-sidenav-item-background-active:var(--t-fill-color-button-interaction-ghost-active);
305
+ --tds-sidenav-item-background-selected:var(--t-fill-color-button-interaction-ghost-active);
306
+
307
+ --tds-sidenav-item-nested-background-hover:var(--tds-sidenav-item-background-hover);
308
+ --tds-sidenav-item-nested-background-active:var(--tds-sidenav-item-background-hover);
309
+ --tds-sidenav-item-nested-background-selected:transparent;
310
+
311
+ --tds-sidenav-item-nested-border-color:var(--t-fill-color-neutral-050);
312
+ --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
313
+ --tds-sidenav-item-nested-border-color-selected:var(--t-border-color-status-info);
314
+
315
+ --tds-sidenav-item-icon-color:var(--t-icon-color-secondary);
316
+ --tds-sidenav-item-icon-color-selected:var(--t-icon-color);
317
+ }
318
+
319
+ @media (prefers-reduced-motion: reduce){
320
+ tds-sidenav,
321
+ .tds-sidenav{
322
+ --tds-sidenav-collapse-transition-enter:none;
323
+ --tds-sidenav-collapse-transition-exit:none;
324
+ --tds-sidenav-collapse-closed-transform:none;
325
+ --tds-sidenav-collapse-open-transform:none;
326
+ }
327
+ }
328
+
329
+ .tds-sidenav--theme-gray{
330
+ --tds-sidenav-item-background-hover:var(--t-fill-color-neutral-080);
331
+ --tds-sidenav-item-background-active:var(--t-fill-color-neutral-070);
332
+ --tds-sidenav-item-background-selected:var(--t-fill-color-neutral-050);
333
+ --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
334
+ --tds-sidenav-item-nested-border-color-selected:var(--t-fill-color-neutral-010);
335
+ }
312
336
  }
313
337
 
314
- .tds-checkbox label{
315
- grid-area:1 / 2;
316
- font-size:var(--tds-checkbox-font-size);
317
- font-weight:var(--t-font-weight-normal);
318
- color:var(--tds-checkbox-label-color);
319
- cursor:var(--tds-checkbox-cursor);
338
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section){
339
+ display:flex;
320
340
  }
321
341
 
322
- .tds-checkbox tds-indeterminate{
342
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section,.tds-sidenav-collapse){
343
+ flex-direction:column;
344
+ gap:var(--t-spacing-half);
345
+ width:100%;
346
+ }
347
+
348
+ .tds-sidenav-section-list{
349
+ width:100%;
350
+ padding:0;
351
+ margin:0;
352
+ list-style:none;
353
+ }
354
+
355
+ .tds-sidenav-section-header{
356
+ display:flex;
357
+ align-items:baseline;
358
+ justify-content:space-between;
359
+ padding-top:var(--t-spacing-2);
360
+ }
361
+
362
+ .tds-sidenav-section-header h2{
363
+ margin:0;
364
+ font-size:var(--t-font-size-sm);
365
+ font-weight:var(--t-font-weight-semibold);
366
+ line-height:1.35;
367
+ color:var(--t-text-color-secondary);
368
+ text-transform:uppercase;
369
+ }
370
+
371
+ .tds-sidenav-section:first-of-type .tds-sidenav-section-header{
372
+ padding-top:0;
373
+ }
374
+
375
+ .tds-sidenav-section-header [slot="label-actions"]{
323
376
  display:flex;
377
+ gap:var(--t-spacing-half);
378
+ align-items:center;
324
379
  }
325
380
 
326
- .tds-checkbox input[type="checkbox"]{
381
+ .tds-sidenav-section [slot="section-actions"]{
382
+ display:flex;
383
+ gap:12px;
384
+ align-items:center;
385
+ min-height:42px;
386
+ padding:var(--t-spacing-1) 0;
387
+ }
388
+
389
+ .tds-sidenav-section-list,
390
+ .tds-sidenav-item{
391
+ width:100%;
392
+ padding:0;
393
+ margin:0;
394
+ }
395
+
396
+ .tds-sidenav-item :is(a,button){
327
397
  position:relative;
328
- width:1em;
329
- height:1em;
330
- margin:calc((1lh - 1em) / 2) 0 0;
331
- font-size:var(--tds-checkbox-font-size);
332
- line-height:inherit;
398
+ display:flex;
399
+ gap:12px;
400
+ align-items:center;
401
+ width:100%;
402
+ padding:12px;
403
+ overflow:hidden;
404
+ font-size:var(--t-font-size-sm);
405
+ line-height:18px;
406
+ color:var(--t-text-color-headline);
407
+ white-space:nowrap;
408
+ text-decoration:none;
333
409
  -webkit-appearance:none;
334
410
  -moz-appearance:none;
335
411
  appearance:none;
336
- cursor:var(--tds-checkbox-cursor);
337
- background-color:var(--tds-checkbox-input-background-color);
338
- border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
339
- border-radius:var(--tds-checkbox-input-border-radius);
340
- transition-timing-function:var(--t-ease-in-out);
341
- transition-duration:var(--t-duration-200);
342
- transition-property:var(--tds-checkbox-transition-property);
412
+ cursor:pointer;
413
+ background-color:var(--tds-sidenav-item-background, transparent);
414
+ border:0;
415
+ border-radius:var(--t-border-radius);
416
+ transition:var(--tds-sidenav-item-transition);
343
417
  }
344
418
 
345
- :is(.tds-checkbox input[type="checkbox"])::before{
346
- position:absolute;
347
- top:50%;
348
- left:50%;
349
- visibility:var(--tds-checkbox-input-icon-visibility);
350
- width:100%;
351
- height:100%;
352
- content:"";
353
- background-color:var(--tds-checkbox-input-icon-fill);
354
- border-radius:var(--tds-checkbox-input-border-radius);
355
- opacity:var(--tds-checkbox-input-icon-opacity);
356
- -webkit-mask-image:var(--tds-checkbox-input-icon);
357
- mask-image:var(--tds-checkbox-input-icon);
358
- -webkit-mask-repeat:no-repeat;
359
- mask-repeat:no-repeat;
360
- -webkit-mask-size:contain;
361
- mask-size:contain;
362
- transform:translate(-50%, -50%);
419
+ :is(.tds-sidenav-item :is(a,button)):not(:has(.prefix,.suffix)),:is(.tds-sidenav-item :is(a,button)) :is(:not(.prefix,.suffix)){
420
+ display:block;
421
+ flex:1;
422
+ overflow:hidden;
423
+ text-overflow:ellipsis;
424
+ text-align:left;
425
+ white-space:nowrap;
363
426
  }
364
427
 
365
- :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
366
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
367
- --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
428
+ :is(.tds-sidenav-item :is(a,button)):hover,:is(.tds-sidenav-item :is(a,button)):focus-visible{
429
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-hover);
430
+ color:var(--t-text-color-headline);
431
+ text-decoration:none;
368
432
  }
369
433
 
370
- :is(.tds-checkbox input[type="checkbox"]):focus-visible{
371
- outline:var(--t-focus-ring-outline);
372
- outline-offset:var(--t-focus-ring-offset);
434
+ :is(.tds-sidenav-item :is(a,button)):active{
435
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-active);
373
436
  }
374
437
 
375
- :is(.tds-checkbox input[type="checkbox"]):disabled{
376
- pointer-events:none;
438
+ :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]){
439
+ overflow:hidden;
440
+ color:var(--tds-sidenav-item-icon-color);
377
441
  }
378
442
 
379
- @media (prefers-reduced-motion: reduce){
443
+ :is(:is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"])),:is(:is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"])) svg{
444
+ display:block;
445
+ width:var(--tds-sidenav-item-icon-size);
446
+ height:var(--tds-sidenav-item-icon-size);
447
+ }
380
448
 
381
- .tds-checkbox input[type="checkbox"]{
382
- --tds-checkbox-transition-property:none;
383
- }
449
+ :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section{
450
+ --tds-sidenav-indent:19px;
384
451
  }
385
452
 
386
- .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
387
- --tds-checkbox-input-background-color:var(--t-fill-color-control);
388
- --tds-checkbox-input-border-color:var(--t-border-color-control-info);
389
- --tds-checkbox-input-icon-visibility:visible;
390
- --tds-checkbox-input-icon-opacity:1;
391
- }
392
-
393
- :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
394
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
395
- --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
453
+ [aria-expanded="true"]:is(.tds-sidenav-item :is(a,button)) + .tds-sidenav-section-list{
454
+ visibility:visible;
455
+ block-size:auto;
456
+ opacity:1;
396
457
  }
397
458
 
398
- .tds-checkbox:has(input:checked){
399
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
400
- }
459
+ .tds-sidenav-item.selected > :is(a,button),.tds-sidenav-item:has(.tds-sidenav-section):has(.selected) > :is(a,button){
460
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-selected);
461
+ --tds-sidenav-item-icon-color:var(--tds-sidenav-item-icon-color-selected);
401
462
 
402
- .tds-checkbox:has(input:indeterminate){
403
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
463
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-selected);
464
+ font-weight:var(--t-font-weight-semibold);
404
465
  }
405
466
 
406
- .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
407
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
408
- --tds-checkbox-description-color:var(--t-text-color-status-error);
409
- --tds-checkbox-description-invalid-icon-display:inline-block;
467
+ .tds-sidenav-item:has(.tds-sidenav-section){
468
+ display:flex;
469
+ flex-direction:column;
470
+ gap:var(--t-spacing-half);
410
471
  }
411
472
 
412
- :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
413
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
414
- --tds-checkbox-input-background-color:var(--t-form-background-color-error);
473
+ .tds-sidenav-item .tds-sidenav-section-list{
474
+ --tds-sidenav-item-depth:1;
475
+ gap:0;
476
+ }
477
+
478
+ .tds-sidenav-action--toggle + :is(.tds-sidenav-item .tds-sidenav-section-list){
479
+ visibility:hidden;
480
+ block-size:0;
481
+ overflow-y:clip;
482
+ opacity:0;
483
+ transition:content-visibility var(--t-duration-400) allow-discrete, opacity var(--t-duration-400), block-size var(--t-duration-400);
415
484
  }
416
485
 
417
- :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{
418
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
419
- --tds-checkbox-input-background-color:var(--t-form-border-color-error);
486
+ :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list{
487
+ --tds-sidenav-item-depth:2;
420
488
  }
421
489
 
422
- :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){
423
- --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
424
- --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
490
+ :is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
491
+ min-height:var(--t-element-size-2xl);
492
+ padding-block:9px;
493
+ padding-left:calc((var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth)) + var(--tds-sidenav-indent) + var(--t-spacing-fourth));
494
+ line-height:1;
495
+ background-color:transparent;
496
+ }
497
+
498
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::before{
499
+ position:absolute;
500
+ top:0;
501
+ bottom:0;
502
+ left:calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
503
+ width:2px;
504
+ content:"";
505
+ background-color:var(--tds-sidenav-item-nested-border-color);
506
+ transition:var(--tds-sidenav-item-transition);
425
507
  }
426
508
 
427
- .tds-checkbox:has(input:required) label::after{
428
- margin-left:.25ch;
429
- color:var(--t-text-color-status-error);
430
- content:"*";
431
- }
509
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::after{
510
+ position:absolute;
511
+ inset:0 0 0 calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
512
+ z-index:-1;
513
+ height:100%;
514
+ content:"";
515
+ background-color:var(--tds-sidenav-item-nested-background);
516
+ border-radius:0 var(--t-border-radius) var(--t-border-radius) 0;
517
+ transition:var(--tds-sidenav-item-transition);
518
+ }
432
519
 
433
- .tds-checkbox:has(input:disabled){
434
- --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
435
- --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
520
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):not(:has(.prefix,.suffix)),:is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)) :is(:not(.prefix,.suffix)){
521
+ display:block;
522
+ text-align:left;
523
+ white-space:normal;
524
+ }
436
525
 
437
- --tds-checkbox-label-color:var(--t-form-color-disabled);
438
- --tds-checkbox-description-color:var(--t-form-color-disabled);
439
- --tds-checkbox-cursor:not-allowed;
440
- }
526
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):hover,:is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):focus-visible{
527
+ --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-hover);
528
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-hover);
529
+ }
441
530
 
442
- .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
443
- --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
531
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):active{
532
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-active);
533
+ }
534
+
535
+ .selected:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
536
+ --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-selected);
537
+ font-weight:var(--t-font-weight-medium);
444
538
  }
445
539
 
446
- .tds-checkbox-description{
540
+ .tds-sidenav-responsive-header{
447
541
  display:flex;
448
- grid-area:2 / 2;
449
- gap:var(--t-spacing-half);
450
- align-items:flex-start;
451
- margin:0;
452
- font-size:var(--tds-checkbox-description-font-size);
453
- line-height:var(--tds-checkbox-description-line-height);
454
- color:var(--tds-checkbox-description-color);
455
- cursor:text;
542
+ gap:var(--t-spacing-2);
543
+ align-items:center;
544
+ width:100%;
456
545
  }
457
546
 
458
- .tds-checkbox-description .tds-checkbox-description-invalid-icon{
459
- display:var(--tds-checkbox-description-invalid-icon-display);
460
- flex-shrink:0;
461
- margin-top:calc(.5lh - .5em);
462
- line-height:var(--tds-checkbox-description-line-height);
547
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle{
548
+ order:0;
463
549
  }
464
550
 
465
- .tds-checkbox--sm{
466
- --tds-checkbox-line-height:1.35;
467
- --tds-checkbox-input-size:var(--t-element-size-sm);
468
- --tds-checkbox-font-size:var(--t-font-size-sm);
469
- --tds-checkbox-description-font-size:var(--t-font-size-xs);
470
- --tds-checkbox-description-line-height:1.3;
471
- }
472
-
473
- .tds-checkbox-group{
474
- --tds-checkbox-group-font-size:var(--t-font-size-md);
475
- --tds-checkbox-group-line-height:1.4;
476
- --tds-checkbox-group-gap:var(--t-spacing-1);
477
-
478
- --tds-checkbox-group-legend-margin-bottom:var(--tds-checkbox-group-gap);
479
-
480
- --tds-checkbox-group-description-font-size:var(--t-font-size-sm);
481
- --tds-checkbox-group-description-line-height:1.35;
482
- --tds-checkbox-group-description-color:var(--t-text-color-secondary);
483
- --tds-checkbox-group-description-invalid-icon-display:none;
484
- display:flex;
485
- flex-direction:column;
486
- gap:var(--tds-checkbox-group-gap);
487
- padding:0;
488
- margin:0;
489
-
490
- font-size:var(--tds-checkbox-group-font-size);
491
- line-height:var(--tds-checkbox-group-line-height);
492
- border:0;
493
- }
551
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-label{
552
+ flex:1;
553
+ order:1;
554
+ margin:0;
555
+ font-size:var(--t-font-size-lg);
556
+ font-weight:var(--t-font-weight-medium);
557
+ color:var(--t-text-color-headline);
558
+ }
494
559
 
495
- .tds-checkbox-group legend{
560
+ @media (max-width: 719px){
561
+ .tds-sidenav-collapse{
562
+ z-index:10001;
563
+ display:none;
564
+ max-width:min(448px, calc(100vw - 48px));
496
565
  padding:0;
497
- margin-bottom:var(--tds-checkbox-group-legend-margin-bottom);
566
+ margin:12px 0;
567
+ position-area:bottom span-right;
568
+ overflow:hidden;
569
+ outline:0;
570
+ background:var(--t-surface-color-card);
571
+ border:0;
572
+ border-radius:6px;
573
+ box-shadow:0 8px 20px 0 rgba(0, 0, 0, .25);
574
+ opacity:var(--tds-sidenav-collapse-open-opacity);
575
+ transform:var(--tds-sidenav-collapse-open-transform);
576
+ transition:var(--tds-sidenav-collapse-transition-enter);
577
+ will-change:transform;
498
578
  }
499
579
 
500
- .tds-checkbox-group:has(.tds-checkbox-group-description){
501
- --tds-checkbox-group-legend-margin-bottom:var(--t-spacing-fourth);
580
+ .tds-sidenav-scroll-container{
581
+ --webkit-overflow-scrolling:touch;
582
+ display:block;
583
+ width:100%;
584
+ height:-moz-fit-content;
585
+ height:fit-content;
586
+ padding:var(--t-spacing-2);
587
+ overflow-y:auto;
502
588
  }
503
589
 
504
- .tds-checkbox-group[aria-invalid="true"]{
505
- --tds-checkbox-group-description-color:var(--t-text-color-status-error);
506
- --tds-checkbox-group-description-invalid-icon-display:inline-block;
590
+ .tds-sidenav-item :is(a, button) :is(.prefix){
591
+ display:none;
507
592
  }
508
-
509
- .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) legend::after{
510
- margin-left:.25ch;
511
- color:var(--t-text-color-status-error);
512
- content:"*";
593
+ @supports selector(:popover-open){
594
+ .tds-sidenav-collapse:popover-open{
595
+ display:flex;
513
596
  }
514
597
 
515
- .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
516
- content:none;
598
+ .tds-sidenav-collapse:not(:popover-open){
599
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
600
+ transition:var(--tds-sidenav-collapse-transition-exit);
517
601
  }
518
602
 
519
- .tds-checkbox-group-fields{
520
- display:flex;
521
- flex-direction:column;
522
- gap:var(--tds-checkbox-group-gap);
523
- align-items:flex-start;
524
- }
603
+ @starting-style{
604
+ .tds-sidenav-collapse:popover-open{
605
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
606
+ transform:var(--tds-sidenav-collapse-closed-transform);
607
+ }
608
+ }
609
+ }
610
+ @supports not selector(:popover-open){
611
+ .tds-sidenav-collapse.\:popover-open{
612
+ display:flex;
613
+ }
525
614
 
526
- .tds-checkbox-group-description{
527
- display:flex;
528
- gap:var(--t-spacing-half);
529
- align-items:flex-start;
530
- margin:0;
531
- font-size:var(--tds-checkbox-group-description-font-size);
532
- line-height:var(--tds-checkbox-group-description-line-height);
533
- color:var(--tds-checkbox-group-description-color);
534
- cursor:text;
615
+ .tds-sidenav-collapse:not(.\:popover-open){
616
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
617
+ transition:var(--tds-sidenav-collapse-transition-exit);
618
+ }
619
+ }
535
620
  }
536
621
 
537
- .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
538
- display:var(--tds-checkbox-group-description-invalid-icon-display);
539
- flex-shrink:0;
540
- margin-top:calc(.5lh - .5em);
541
- line-height:var(--tds-checkbox-group-description-line-height);
622
+ @media (min-width: 720px){
623
+ .tds-sidenav-responsive-header{
624
+ display:none;
542
625
  }
543
-
544
- .tds-checkbox-group--sm{
545
- --tds-checkbox-group-line-height:1.35;
546
- --tds-checkbox-group-font-size:var(--t-font-size-sm);
547
- --tds-checkbox-group-description-font-size:var(--t-font-size-xs);
548
- --tds-checkbox-group-description-line-height:1.3;
549
626
  }
550
627
 
551
- .tds-combo-box{
552
- --tds-combo-box-button-offset:4px;
553
- }
628
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
629
+ display:none;
630
+ }
554
631
 
555
- .tds-combo-box[data-open] .tds-combo-box-button > svg{
556
- transform:rotate(.5turn);
557
- }
632
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
633
+ display:block;
634
+ }
558
635
 
559
- .tds-combo-box--lg{
560
- --tds-combo-box-button-offset:5px;
561
- }
636
+ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
637
+ display:flex;
638
+ flex-direction:column;
639
+ }
562
640
 
563
- .tds-combo-box-field:has([readonly]) .tds-combo-box-button{
564
- display:none;
565
- }
641
+ .tds-checkbox{
642
+ --tds-checkbox-font-size:var(--t-font-size-md);
643
+ --tds-checkbox-cursor:pointer;
644
+ --tds-checkbox-line-height:1.4;
645
+ --tds-checkbox-transition-property:background-color, border-color;
566
646
 
567
- .tds-combo-box-input{
568
- display:flex;
569
- flex:1;
570
- align-items:center;
571
- padding-block:var(--tds-field-padding-block);
572
- padding-inline:var(--tds-field-padding-inline);
573
- font-family:inherit;
574
- font-size:inherit;
575
- color:inherit;
576
- outline:0;
577
- background:transparent;
578
- border:0;
579
- }
580
-
581
- .tds-combo-box-input:has( + .tds-combo-box-button){
582
- padding-inline-end:0;
583
- }
584
-
585
- .tds-combo-box-input::-moz-placeholder{
586
- color:var(--tds-field-placeholder-color);
587
- -moz-user-select:none;
588
- user-select:none;
589
- }
647
+ --tds-checkbox-input-size:var(--t-element-size-md);
648
+ --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
649
+ --tds-checkbox-input-border-color:var(--t-form-border-color);
650
+ --tds-checkbox-input-background-color:var(--t-form-background-color);
590
651
 
591
- .tds-combo-box-input::placeholder{
592
- color:var(--tds-field-placeholder-color);
593
- -webkit-user-select:none;
594
- -moz-user-select:none;
595
- user-select:none;
596
- }
652
+ --tds-checkbox-input-icon:none;
653
+ --tds-checkbox-input-icon-visibility:hidden;
654
+ --tds-checkbox-input-icon-opacity:0;
655
+ --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
597
656
 
598
- .tds-combo-box-button{
599
- flex-shrink:0;
600
- align-self:center;
601
- inline-size:calc(var(--tds-field-min-height) - (var(--tds-combo-box-button-offset) * 2));
602
- block-size:calc(var(--tds-field-min-height) - (var(--tds-combo-box-button-offset) * 2));
603
- padding:0;
604
- margin-inline-end:var(--tds-combo-box-button-offset);
605
- }
657
+ --tds-checkbox-label-color:var(--t-form-color);
606
658
 
607
- .tds-combo-box-button > svg{
608
- inline-size:var(--tds-field-font-size);
609
- block-size:var(--tds-field-font-size);
610
- transition:transform var(--t-duration-300) var(--t-ease-in-out);
611
- }
659
+ --tds-checkbox-description-font-size:var(--t-font-size-sm);
660
+ --tds-checkbox-description-line-height:1.35;
661
+ --tds-checkbox-description-color:var(--t-text-color-secondary);
662
+ --tds-checkbox-description-invalid-icon-display:none;
612
663
 
613
- .tds-combo-box-popover{
614
- width:var(--trigger-width);
615
- max-block-size:inherit;
616
- padding:var(--t-spacing-1);
617
- overflow:auto;
618
- scroll-behavior:smooth;
619
- overscroll-behavior:none;
664
+ position:relative;
665
+ display:inline-grid;
666
+ grid-template-columns:auto;
667
+ grid-auto-columns:1fr;
668
+ gap:var(--t-spacing-fourth) var(--t-spacing-1);
669
+ line-height:var(--tds-checkbox-line-height);
670
+ cursor:var(--tds-checkbox-cursor);
620
671
  -webkit-user-select:none;
621
672
  -moz-user-select:none;
622
673
  user-select:none;
623
- outline:0;
624
- scrollbar-color:#0004 #0000;
625
- scrollbar-width:thin;
626
- background:var(--t-surface-color-card);
627
- background-clip:padding-box;
628
- border:1px solid var(--t-border-color);
629
- border-radius:var(--t-border-radius);
630
- box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
631
674
  }
632
675
 
633
- .tds-combo-box-popover[data-entering]{
634
- animation:tds-combo-box-popover var(--t-duration-300) var(--t-ease-out);
676
+ .tds-checkbox label{
677
+ grid-area:1 / 2;
678
+ font-size:var(--tds-checkbox-font-size);
679
+ font-weight:var(--t-font-weight-normal);
680
+ color:var(--tds-checkbox-label-color);
681
+ cursor:var(--tds-checkbox-cursor);
635
682
  }
636
683
 
637
- .tds-combo-box-popover[data-exiting]{
638
- animation:tds-combo-box-popover var(--t-duration-200) var(--t-ease-in) reverse;
684
+ .tds-checkbox tds-indeterminate{
685
+ display:flex;
639
686
  }
640
687
 
641
- .tds-combo-box-popover[data-entering],.tds-combo-box-popover[data-exiting]{
642
- will-change:opacity, transform;
688
+ .tds-checkbox input[type="checkbox"]{
689
+ position:relative;
690
+ width:1em;
691
+ height:1em;
692
+ margin:calc((1lh - 1em) / 2) 0 0;
693
+ font-size:var(--tds-checkbox-font-size);
694
+ line-height:inherit;
695
+ -webkit-appearance:none;
696
+ -moz-appearance:none;
697
+ appearance:none;
698
+ cursor:var(--tds-checkbox-cursor);
699
+ background-color:var(--tds-checkbox-input-background-color);
700
+ border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
701
+ border-radius:var(--tds-checkbox-input-border-radius);
702
+ transition-timing-function:var(--t-ease-in-out);
703
+ transition-duration:var(--t-duration-200);
704
+ transition-property:var(--tds-checkbox-transition-property);
643
705
  }
644
706
 
645
- @keyframes tds-combo-box-popover{
646
- from{
647
- opacity:0;
648
- transform:translateY(-8px);
649
- }
650
- }
707
+ :is(.tds-checkbox input[type="checkbox"])::before{
708
+ position:absolute;
709
+ top:50%;
710
+ left:50%;
711
+ visibility:var(--tds-checkbox-input-icon-visibility);
712
+ width:100%;
713
+ height:100%;
714
+ content:"";
715
+ background-color:var(--tds-checkbox-input-icon-fill);
716
+ border-radius:var(--tds-checkbox-input-border-radius);
717
+ opacity:var(--tds-checkbox-input-icon-opacity);
718
+ -webkit-mask-image:var(--tds-checkbox-input-icon);
719
+ mask-image:var(--tds-checkbox-input-icon);
720
+ -webkit-mask-repeat:no-repeat;
721
+ mask-repeat:no-repeat;
722
+ -webkit-mask-size:contain;
723
+ mask-size:contain;
724
+ transform:translate(-50%, -50%);
725
+ }
651
726
 
652
- @media (prefers-reduced-motion: reduce){
653
- .tds-combo-box-popover[data-entering],.tds-combo-box-popover[data-exiting]{
654
- animation:none;
727
+ :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
728
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
729
+ --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
655
730
  }
656
731
 
657
- .tds-combo-box-button > svg{
658
- transition:none;
659
- }
660
- }
732
+ :is(.tds-checkbox input[type="checkbox"]):focus-visible{
733
+ outline:var(--t-focus-ring-outline);
734
+ outline-offset:var(--t-focus-ring-offset);
735
+ }
661
736
 
662
- .tds-combo-box-list{
663
- padding:0;
664
- margin:0;
665
- }
737
+ :is(.tds-checkbox input[type="checkbox"]):disabled{
738
+ pointer-events:none;
739
+ }
666
740
 
667
- .tds-combo-box-list-item{
668
- display:block;
669
- padding-block:var(--t-spacing-1);
670
- padding-inline:var(--t-spacing-2) var(--t-spacing-1);
671
- overflow:hidden;
672
- text-overflow:ellipsis;
673
- font-size:1rem;
674
- color:var(--t-text-color);
675
- white-space:nowrap;
676
- cursor:default;
677
- border-radius:var(--t-border-radius);
678
- }
741
+ @media (prefers-reduced-motion: reduce){
679
742
 
680
- .tds-combo-box-list-item[data-hovered]:not([data-disabled]),.tds-combo-box-list-item[data-focus-visible]{
681
- background:var(--t-fill-color-neutral-070);
743
+ .tds-checkbox input[type="checkbox"]{
744
+ --tds-checkbox-transition-property:none;
682
745
  }
746
+ }
683
747
 
684
- .tds-combo-box-list-item[data-selected]{
685
- background:var(--t-fill-color-button-interaction-ghost-active);
748
+ .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
749
+ --tds-checkbox-input-background-color:var(--t-fill-color-control);
750
+ --tds-checkbox-input-border-color:var(--t-border-color-control-info);
751
+ --tds-checkbox-input-icon-visibility:visible;
752
+ --tds-checkbox-input-icon-opacity:1;
686
753
  }
687
754
 
688
- .tds-combo-box-list-item[data-pressed]:not([data-disabled]){
689
- background:var(--t-fill-color-neutral-060);
755
+ :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
756
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
757
+ --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
758
+ }
759
+
760
+ .tds-checkbox:has(input:checked){
761
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
690
762
  }
691
763
 
692
- .tds-combo-box-list-item[data-disabled]{
693
- color:var(--t-form-color-disabled);
694
- cursor:not-allowed;
764
+ .tds-checkbox:has(input:indeterminate){
765
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
695
766
  }
696
767
 
697
- .tds-combo-box-list-item[data-disabled][data-hovered]{
698
- background:transparent;
768
+ .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
769
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
770
+ --tds-checkbox-description-color:var(--t-text-color-status-error);
771
+ --tds-checkbox-description-invalid-icon-display:inline-block;
772
+ }
773
+
774
+ :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
775
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
776
+ --tds-checkbox-input-background-color:var(--t-form-background-color-error);
699
777
  }
700
778
 
701
- .tds-combo-box-empty-state{
702
- position:relative;
703
- min-block-size:var(--t-spacing-3);
704
- padding-block:var(--t-spacing-1);
705
- padding-inline:var(--t-spacing-2);
706
- font-size:var(--t-font-size-md);
707
- color:var(--t-text-color-secondary);
708
- }
779
+ :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:checked,:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:indeterminate{
780
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
781
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error);
782
+ }
709
783
 
710
- .tds-combo-box-load-more{
711
- position:relative;
712
- min-block-size:calc(var(--t-spacing-3) + var(--t-spacing-1));
713
- }
784
+ :is(:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:checked,:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:indeterminate):hover:not(:disabled){
785
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
786
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
787
+ }
714
788
 
715
- .tds-combo-box-empty-state,
716
- .tds-combo-box-load-more{
717
- --tds-loading-spinner-visibility:visible;
718
- --tds-loading-spinner-animation-play-state:running;
719
- }
789
+ .tds-checkbox:has(input:required) label::after{
790
+ margin-left:.25ch;
791
+ color:var(--t-text-color-status-error);
792
+ content:"*";
793
+ }
720
794
 
721
- .tds-combo-box-list-section:not(:first-child){
722
- margin-block-start:var(--t-spacing-half);
723
- }
795
+ .tds-checkbox:has(input:disabled){
796
+ --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
797
+ --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
724
798
 
725
- .tds-combo-box-section-header{
726
- padding-block:var(--t-spacing-1);
727
- padding-inline:var(--t-spacing-1);
728
- font-size:var(--t-font-size-sm);
729
- font-weight:var(--t-font-weight-semibold);
730
- color:var(--t-text-color-secondary);
731
- }
799
+ --tds-checkbox-label-color:var(--t-form-color-disabled);
800
+ --tds-checkbox-description-color:var(--t-form-color-disabled);
801
+ --tds-checkbox-cursor:not-allowed;
802
+ }
732
803
 
733
- .tds-number-stepper{
734
- --tds-number-stepper-button-offset:4px;
735
- --tds-number-stepper-button-gap:2px;
736
- }
804
+ .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
805
+ --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
806
+ }
737
807
 
738
- .tds-number-stepper--lg{
739
- --tds-number-stepper-button-offset:5px;
740
- --tds-number-stepper-button-gap:4px;
808
+ .tds-checkbox-description{
809
+ display:flex;
810
+ grid-area:2 / 2;
811
+ gap:var(--t-spacing-half);
812
+ align-items:flex-start;
813
+ margin:0;
814
+ font-size:var(--tds-checkbox-description-font-size);
815
+ line-height:var(--tds-checkbox-description-line-height);
816
+ color:var(--tds-checkbox-description-color);
817
+ cursor:text;
741
818
  }
742
819
 
743
- .tds-number-stepper-field:has([readonly]) .tds-number-stepper-button{
744
- display:none;
745
- }
820
+ .tds-checkbox-description .tds-checkbox-description-invalid-icon{
821
+ display:var(--tds-checkbox-description-invalid-icon-display);
822
+ flex-shrink:0;
823
+ margin-top:calc(.5lh - .5em);
824
+ line-height:var(--tds-checkbox-description-line-height);
825
+ }
746
826
 
747
- .tds-number-stepper-input{
748
- display:flex;
749
- flex:1;
750
- align-items:center;
751
- min-inline-size:0;
752
- padding-block:var(--tds-field-padding-block);
753
- padding-inline:var(--tds-field-padding-inline);
754
- font-family:inherit;
755
- font-size:inherit;
756
- color:inherit;
757
- outline:0;
758
- background:transparent;
759
- border:0;
827
+ .tds-checkbox--sm{
828
+ --tds-checkbox-line-height:1.35;
829
+ --tds-checkbox-input-size:var(--t-element-size-sm);
830
+ --tds-checkbox-font-size:var(--t-font-size-sm);
831
+ --tds-checkbox-description-font-size:var(--t-font-size-xs);
832
+ --tds-checkbox-description-line-height:1.3;
760
833
  }
761
834
 
762
- .tds-number-stepper-input::-webkit-inner-spin-button,.tds-number-stepper-input::-webkit-outer-spin-button{
763
- margin:0;
764
- -webkit-appearance:none;
765
- appearance:none;
766
- }
835
+ .tds-checkbox-group{
836
+ --tds-checkbox-group-font-size:var(--t-font-size-md);
837
+ --tds-checkbox-group-line-height:1.4;
838
+ --tds-checkbox-group-gap:var(--t-spacing-1);
767
839
 
768
- .tds-number-stepper-button{
769
- flex-shrink:0;
770
- align-self:center;
771
- inline-size:calc(var(--tds-field-min-height) - (var(--tds-number-stepper-button-offset) * 2));
772
- block-size:calc(var(--tds-field-min-height) - (var(--tds-number-stepper-button-offset) * 2));
840
+ --tds-checkbox-group-legend-margin-bottom:var(--tds-checkbox-group-gap);
841
+
842
+ --tds-checkbox-group-description-font-size:var(--t-font-size-sm);
843
+ --tds-checkbox-group-description-line-height:1.35;
844
+ --tds-checkbox-group-description-color:var(--t-text-color-secondary);
845
+ --tds-checkbox-group-description-invalid-icon-display:none;
846
+ display:flex;
847
+ flex-direction:column;
848
+ gap:var(--tds-checkbox-group-gap);
773
849
  padding:0;
850
+ margin:0;
851
+
852
+ font-size:var(--tds-checkbox-group-font-size);
853
+ line-height:var(--tds-checkbox-group-line-height);
854
+ border:0;
774
855
  }
775
856
 
776
- .tds-number-stepper-button + .tds-number-stepper-button{
777
- margin-inline-start:var(--tds-number-stepper-button-gap);
857
+ .tds-checkbox-group legend{
858
+ padding:0;
859
+ margin-bottom:var(--tds-checkbox-group-legend-margin-bottom);
778
860
  }
779
861
 
780
- .tds-number-stepper-button:last-of-type{
781
- margin-inline-end:var(--tds-number-stepper-button-offset);
862
+ .tds-checkbox-group:has(.tds-checkbox-group-description){
863
+ --tds-checkbox-group-legend-margin-bottom:var(--t-spacing-fourth);
782
864
  }
783
865
 
784
- .tds-date-picker{
785
- --tds-date-picker-button-offset:4px;
786
- }
866
+ .tds-checkbox-group[aria-invalid="true"]{
867
+ --tds-checkbox-group-description-color:var(--t-text-color-status-error);
868
+ --tds-checkbox-group-description-invalid-icon-display:inline-block;
869
+ }
787
870
 
788
- .tds-date-picker--lg{
789
- --tds-date-picker-button-offset:5px;
790
- }
871
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) legend::after{
872
+ margin-left:.25ch;
873
+ color:var(--t-text-color-status-error);
874
+ content:"*";
875
+ }
791
876
 
792
- .tds-date-picker-field[data-focus-within]:has(.tds-date-picker-button[data-focused]){
793
- outline-color:transparent;
794
- outline-offset:0;
795
- border-color:var(--tds-field-border-color);
796
- }
877
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
878
+ content:none;
879
+ }
797
880
 
798
- .tds-date-picker-field:has(.tds-date-picker-input[data-readonly]) .tds-date-picker-button{
799
- display:none;
881
+ .tds-checkbox-group-fields{
882
+ display:flex;
883
+ flex-direction:column;
884
+ gap:var(--tds-checkbox-group-gap);
885
+ align-items:flex-start;
800
886
  }
801
887
 
802
- .tds-date-picker-input{
803
- flex:1;
804
- padding-block:var(--tds-field-padding-block);
805
- padding-inline:var(--tds-field-padding-inline);
806
- overflow:auto clip;
807
- font-variant-numeric:tabular-nums;
808
- text-wrap:nowrap;
809
- scrollbar-width:none;
888
+ .tds-checkbox-group-description{
889
+ display:flex;
890
+ gap:var(--t-spacing-half);
891
+ align-items:flex-start;
892
+ margin:0;
893
+ font-size:var(--tds-checkbox-group-description-font-size);
894
+ line-height:var(--tds-checkbox-group-description-line-height);
895
+ color:var(--tds-checkbox-group-description-color);
896
+ cursor:text;
810
897
  }
811
898
 
812
- .tds-date-picker-input:has( + .tds-date-picker-button){
813
- padding-inline-end:0;
899
+ .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
900
+ display:var(--tds-checkbox-group-description-invalid-icon-display);
901
+ flex-shrink:0;
902
+ margin-top:calc(.5lh - .5em);
903
+ line-height:var(--tds-checkbox-group-description-line-height);
814
904
  }
815
905
 
816
- .tds-date-picker-button{
817
- flex-shrink:0;
818
- align-self:center;
819
- inline-size:calc(var(--tds-field-min-height) - (var(--tds-date-picker-button-offset) * 2));
820
- block-size:calc(var(--tds-field-min-height) - (var(--tds-date-picker-button-offset) * 2));
821
- padding:0;
822
- margin-inline-end:var(--tds-date-picker-button-offset);
906
+ .tds-checkbox-group--sm{
907
+ --tds-checkbox-group-line-height:1.35;
908
+ --tds-checkbox-group-font-size:var(--t-font-size-sm);
909
+ --tds-checkbox-group-description-font-size:var(--t-font-size-xs);
910
+ --tds-checkbox-group-description-line-height:1.3;
823
911
  }
824
912
 
825
- .tds-date-picker-popover{
826
- --tds-date-picker-popover-font-size:var(--t-font-size-md);
827
- --tds-date-picker-popover-padding:var(--t-spacing-1-half);
828
- --tds-date-picker-popover-background-color:var(--t-surface-color-card);
829
- --tds-date-picker-popover-shadow:hsl(0, 0%, 0%, .05) 0 10px 15px -3px, hsl(0, 0%, 0%, .05) 0 4px 6px -4px;
830
- --tds-date-picker-popover-interactive-timing-function:var(--t-ease-in-out);
831
- --tds-date-picker-popover-interactive-duration:var(--t-duration-200);
832
- --tds-date-picker-popover-interactive-property:color, background-color, border-color;
913
+ .tds-radio{
914
+ --tds-radio-font-size:var(--t-font-size-md);
915
+ --tds-radio-cursor:pointer;
916
+ --tds-radio-line-height:1.4;
917
+ --tds-radio-transition-property:border-width;
918
+
919
+ --tds-radio-input-size:var(--t-element-size-md);
920
+ --tds-radio-input-border-radius:var(--t-border-radius-round);
921
+ --tds-radio-input-border-color:var(--t-form-border-color);
922
+ --tds-radio-input-border-width:var(--t-form-border-width);
923
+ --tds-radio-input-background-color:var(--t-form-background-color);
924
+
925
+ --tds-radio-label-color:var(--t-form-color);
926
+
927
+ --tds-radio-description-font-size:var(--t-font-size-sm);
928
+ --tds-radio-description-line-height:1.35;
929
+ --tds-radio-description-color:var(--t-text-color-secondary);
833
930
 
834
931
  position:relative;
835
- overflow:hidden;
836
- background-color:var(--tds-date-picker-popover-background-color);
837
- border:var(--t-border-width) solid var(--t-border-color);
838
- border-radius:var(--t-border-radius);
839
- box-shadow:var(--tds-date-picker-popover-shadow);
932
+ display:inline-grid;
933
+ grid-template-columns:auto;
934
+ grid-auto-columns:1fr;
935
+ gap:var(--t-spacing-fourth) var(--t-spacing-1);
936
+ line-height:var(--tds-radio-line-height);
937
+ cursor:var(--tds-radio-cursor);
938
+ -webkit-user-select:none;
939
+ -moz-user-select:none;
940
+ user-select:none;
840
941
  }
841
942
 
842
- .tds-date-picker-popover[data-entering]{
843
- animation:tds-date-picker-popover var(--t-duration-300) var(--t-ease-out);
943
+ .tds-radio label{
944
+ grid-area:1 / 2;
945
+ font-size:var(--tds-radio-font-size);
946
+ font-weight:var(--t-font-weight-normal);
947
+ color:var(--tds-radio-label-color);
948
+ cursor:var(--tds-radio-cursor);
844
949
  }
845
950
 
846
- .tds-date-picker-popover[data-exiting]{
847
- animation:tds-date-picker-popover var(--t-duration-200) var(--t-ease-in) reverse;
951
+ .tds-radio input[type="radio"]{
952
+ position:relative;
953
+ width:1em;
954
+ height:1em;
955
+ margin:calc((1lh - 1em) / 2) 0 0;
956
+ font-size:var(--tds-radio-font-size);
957
+ line-height:inherit;
958
+ -webkit-appearance:none;
959
+ -moz-appearance:none;
960
+ appearance:none;
961
+ cursor:var(--tds-radio-cursor);
962
+ background-color:var(--tds-radio-input-background-color);
963
+ border:var(--tds-radio-input-border-width) solid var(--tds-radio-input-border-color);
964
+ border-radius:var(--tds-radio-input-border-radius);
965
+ transition-timing-function:var(--t-ease-in-out);
966
+ transition-duration:var(--t-duration-200);
967
+ transition-property:var(--tds-radio-transition-property);
848
968
  }
849
969
 
850
- .tds-date-picker-popover[data-entering],.tds-date-picker-popover[data-exiting]{
851
- will-change:opacity, transform;
970
+ :is(.tds-radio input[type="radio"]):hover:not(:disabled){
971
+ --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
972
+ --tds-radio-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
973
+ }
974
+
975
+ :is(.tds-radio input[type="radio"]):focus-visible{
976
+ outline:var(--t-focus-ring-outline);
977
+ outline-offset:var(--t-focus-ring-offset);
978
+ }
979
+
980
+ :is(.tds-radio input[type="radio"]):disabled{
981
+ pointer-events:none;
982
+ }
983
+
984
+ @media (prefers-reduced-motion: reduce){
985
+
986
+ .tds-radio input[type="radio"]{
987
+ --tds-radio-transition-property:none;
852
988
  }
989
+ }
853
990
 
854
- @keyframes tds-date-picker-popover{
855
- from{
856
- opacity:0;
857
- transform:translateY(-8px);
991
+ .tds-radio:has(input:checked){
992
+ --tds-radio-input-background-color:var(--t-form-background-color);
993
+ --tds-radio-input-border-color:var(--t-border-color-control-info);
994
+ --tds-radio-input-border-width:4px;
858
995
  }
859
- }
860
996
 
861
- @media (prefers-reduced-motion: reduce){
862
- .tds-date-picker-popover[data-entering],.tds-date-picker-popover[data-exiting]{
863
- animation:none;
997
+ .tds-radio:has(input:checked) input:hover:not(:disabled){
998
+ --tds-radio-input-background-color:var(--t-form-background-color);
999
+ --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
864
1000
  }
865
- }
866
1001
 
867
- .tds-date-picker-overlay{
868
- position:absolute;
869
- inset:0;
870
- z-index:1;
871
- display:flex;
872
- background-color:var(--tds-date-picker-popover-background-color);
873
- }
1002
+ .tds-radio:has(input:user-invalid){
1003
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
1004
+ }
874
1005
 
875
- .tds-date-picker-overlay-list{
876
- display:grid;
877
- flex:1;
878
- grid-template-columns:repeat(3, 1fr);
879
- gap:var(--t-spacing-half);
880
- padding-inline:var(--tds-date-picker-popover-padding);
881
- outline:0;
882
- scrollbar-color:var(--t-fill-color-transparency-dark-030) transparent;
883
- scrollbar-width:thin;
884
- }
885
-
886
- .tds-date-picker-overlay--month .tds-date-picker-overlay-list{
887
- grid-template-rows:repeat(4, 1fr);
888
- padding-bottom:var(--tds-date-picker-popover-padding);
889
- }
890
-
891
- .tds-date-picker-overlay--year .tds-date-picker-overlay-list{
892
- grid-auto-rows:var(--t-container-size-xl);
893
- padding-right:var(--t-spacing-1);
894
- overflow-y:auto;
895
- scroll-padding-block:calc(var(--t-focus-ring-width) + var(--t-focus-ring-offset));
896
- }
897
-
898
- .tds-date-picker-overlay-cell{
899
- display:flex;
900
- align-items:center;
901
- justify-content:center;
902
- font-family:inherit;
903
- font-size:var(--tds-date-picker-popover-font-size);
904
- color:var(--t-text-color);
905
- cursor:pointer;
906
- outline:0;
907
- background-color:transparent;
908
- border:0;
909
- border-radius:var(--t-border-radius-md);
910
- transition-timing-function:var(--tds-date-picker-popover-interactive-timing-function);
911
- transition-duration:var(--t-duration-100);
912
- transition-property:var(--tds-date-picker-popover-interactive-property);
913
- }
914
-
915
- .tds-date-picker-overlay-cell[data-hovered]{
916
- background-color:var(--t-fill-color-button-neutral-outline-hover);
917
- }
918
-
919
- .tds-date-picker-overlay-cell[data-pressed]{
920
- background-color:var(--t-fill-color-button-neutral-outline-active);
921
- }
1006
+ .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
1007
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1008
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
1009
+ }
922
1010
 
923
- .tds-date-picker-overlay-cell[data-selected]{
924
- font-weight:var(--t-font-weight-semibold);
925
- color:var(--t-text-color-inverted);
926
- background-color:var(--t-fill-color-interaction);
927
- }
1011
+ .tds-radio:has(input:disabled){
1012
+ --tds-radio-input-background-color:var(--t-form-background-color-disabled);
1013
+ --tds-radio-input-border-color:var(--t-form-border-color-disabled);
928
1014
 
929
- .tds-date-picker-overlay-cell[data-focus-visible]{
930
- outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
1015
+ --tds-radio-label-color:var(--t-form-color-disabled);
1016
+ --tds-radio-description-color:var(--t-form-color-disabled);
1017
+ --tds-radio-cursor:not-allowed;
931
1018
  }
932
1019
 
933
- .tds-date-picker-overlay-cell[data-selected][data-focus-visible]{
934
- outline-offset:var(--t-focus-ring-offset);
935
- }
1020
+ .tds-radio:has(input:disabled) input:checked{
1021
+ --tds-radio-input-background-color:var(--t-form-background-color);
1022
+ --tds-radio-input-border-color:var(--t-form-border-color-disabled);
1023
+ }
936
1024
 
937
- .tds-date-picker-calendar-heading{
1025
+ .tds-radio-description{
938
1026
  display:flex;
939
- flex:1;
940
- gap:var(--t-spacing-1);
941
- align-items:center;
942
- justify-content:flex-start;
943
- padding-inline-start:4px;
1027
+ grid-area:2 / 2;
1028
+ gap:var(--t-spacing-half);
1029
+ align-items:flex-start;
1030
+ margin:0;
1031
+ font-size:var(--tds-radio-description-font-size);
1032
+ line-height:var(--tds-radio-description-line-height);
1033
+ color:var(--tds-radio-description-color);
1034
+ cursor:text;
944
1035
  }
945
1036
 
946
- .tds-date-picker-calendar-overlay-trigger{
947
- --_background-color:transparent;
948
- position:relative;
949
- padding:0;
950
- font-family:inherit;
951
- font-size:var(--tds-date-picker-popover-font-size);
952
- font-weight:var(--t-font-weight-semibold);
953
- font-feature-settings:"ss01", "ss02";
954
- color:var(--t-text-color);
955
- cursor:pointer;
956
- outline:0;
957
- background-color:transparent;
958
- border:0;
959
- border-radius:var(--t-border-radius-md);
960
- isolation:isolate;
961
- transition-timing-function:var(--tds-date-picker-popover-interactive-timing-function);
962
- transition-duration:var(--tds-date-picker-popover-interactive-duration);
963
- transition-property:var(--tds-date-picker-popover-interactive-property);
1037
+ .tds-radio--sm{
1038
+ --tds-radio-line-height:1.35;
1039
+ --tds-radio-input-size:var(--t-element-size-sm);
1040
+ --tds-radio-font-size:var(--t-font-size-sm);
1041
+ --tds-radio-description-font-size:var(--t-font-size-xs);
1042
+ --tds-radio-description-line-height:1.3;
964
1043
  }
965
1044
 
966
- .tds-date-picker-calendar-overlay-trigger::before{
967
- position:absolute;
968
- inset:calc(var(--t-spacing-half) * -1);
969
- z-index:-1;
970
- pointer-events:inherit;
971
- content:"";
972
- background-color:var(--_background-color);
973
- border-radius:inherit;
974
- }
975
1045
 
976
- .tds-date-picker-calendar-overlay-trigger[data-hovered]{
977
- --_background-color:var(--t-fill-color-button-neutral-outline-hover);
978
- }
1046
+ :is(.tds-input input)::-webkit-search-decoration,:is(.tds-input input)::-webkit-search-cancel-button,:is(.tds-input input)::-webkit-search-results-button,:is(.tds-input input)::-webkit-search-results-decoration{
1047
+ -webkit-appearance:none;
1048
+ appearance:none;
1049
+ }
979
1050
 
980
- .tds-date-picker-calendar-overlay-trigger[data-pressed]{
981
- --_background-color:var(--t-fill-color-button-neutral-outline-active);
982
- }
1051
+ [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
1052
+ inline-size:1em;
1053
+ block-size:2em;
1054
+ }
983
1055
 
984
- .tds-date-picker-calendar-overlay-trigger[data-focus-visible]{
985
- outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
986
- outline-offset:var(--t-focus-ring-offset);
1056
+ @supports (field-sizing: content){
1057
+ .tds-input--auto-width{
1058
+ inline-size:-moz-fit-content;
1059
+ inline-size:fit-content;
1060
+ min-inline-size:min(100%, 122px);
987
1061
  }
988
1062
 
989
- .tds-date-picker-calendar{
990
- inline-size:-moz-fit-content;
991
- inline-size:fit-content;
992
- font-size:var(--tds-date-picker-popover-font-size);
1063
+ .tds-input--auto-width input{
1064
+ field-sizing:content;
1065
+ inline-size:auto;
1066
+ }
993
1067
  }
994
1068
 
995
- .tds-date-picker-calendar-body{
996
- position:relative;
997
- padding:var(--tds-date-picker-popover-padding);
998
- padding-block-start:0;
1069
+ .tds-combo-box{
1070
+ --tds-combo-box-button-offset:4px;
999
1071
  }
1000
1072
 
1001
- .tds-date-picker-calendar-header{
1002
- display:flex;
1003
- align-items:center;
1004
- justify-content:space-between;
1005
- padding:var(--tds-date-picker-popover-padding);
1073
+ .tds-combo-box[data-open] .tds-combo-box-button > svg{
1074
+ transform:rotate(.5turn);
1075
+ }
1076
+
1077
+ .tds-combo-box--lg{
1078
+ --tds-combo-box-button-offset:5px;
1006
1079
  }
1007
1080
 
1008
- .tds-date-picker-calendar-title{
1009
- padding:var(--t-spacing-half) var(--t-spacing-1);
1010
- font-size:var(--tds-date-picker-popover-font-size);
1011
- font-weight:var(--t-font-weight-semibold);
1081
+ .tds-combo-box-field:has([readonly]) .tds-combo-box-button{
1082
+ display:none;
1012
1083
  }
1013
1084
 
1014
- .tds-date-picker-calendar-nav{
1085
+ .tds-combo-box-input{
1015
1086
  display:flex;
1087
+ flex:1;
1016
1088
  align-items:center;
1017
- justify-content:center;
1018
- padding:var(--t-spacing-half);
1019
- font-size:.875em;
1020
- color:var(--t-text-color);
1021
- cursor:pointer;
1089
+ padding-block:var(--tds-field-padding-block);
1090
+ padding-inline:var(--tds-field-padding-inline);
1091
+ font-family:inherit;
1092
+ font-size:inherit;
1093
+ color:inherit;
1022
1094
  outline:0;
1023
- background-color:transparent;
1095
+ background:transparent;
1024
1096
  border:0;
1025
- border-radius:var(--t-border-radius-md);
1026
- transition-timing-function:var(--tds-date-picker-popover-interactive-timing-function);
1027
- transition-duration:var(--tds-date-picker-popover-interactive-duration);
1028
- transition-property:var(--tds-date-picker-popover-interactive-property);
1029
1097
  }
1030
1098
 
1031
- .tds-date-picker-calendar-nav[data-hovered]{
1032
- background-color:var(--t-fill-color-button-neutral-outline-hover);
1033
- }
1034
-
1035
- .tds-date-picker-calendar-nav[data-pressed]{
1036
- background-color:var(--t-fill-color-button-neutral-outline-active);
1099
+ .tds-combo-box-input:has( + .tds-combo-box-button){
1100
+ padding-inline-end:0;
1037
1101
  }
1038
1102
 
1039
- .tds-date-picker-calendar-nav[data-focus-visible]{
1040
- outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
1041
- outline-offset:var(--t-focus-ring-offset);
1103
+ .tds-combo-box-input::-moz-placeholder{
1104
+ color:var(--tds-field-placeholder-color);
1105
+ -moz-user-select:none;
1106
+ user-select:none;
1042
1107
  }
1043
1108
 
1044
- .tds-date-picker-calendar-nav[data-disabled]{
1045
- color:var(--t-text-color-disabled);
1046
- cursor:not-allowed;
1109
+ .tds-combo-box-input::placeholder{
1110
+ color:var(--tds-field-placeholder-color);
1111
+ -webkit-user-select:none;
1112
+ -moz-user-select:none;
1113
+ user-select:none;
1047
1114
  }
1048
1115
 
1049
- .tds-date-picker-calendar-grid{
1050
- font-feature-settings:"ss01", "ss02";
1051
- border-collapse:collapse;
1116
+ .tds-combo-box-button{
1117
+ flex-shrink:0;
1118
+ align-self:center;
1119
+ inline-size:calc(var(--tds-field-min-height) - (var(--tds-combo-box-button-offset) * 2));
1120
+ block-size:calc(var(--tds-field-min-height) - (var(--tds-combo-box-button-offset) * 2));
1121
+ padding:0;
1122
+ margin-inline-end:var(--tds-combo-box-button-offset);
1052
1123
  }
1053
1124
 
1054
- .tds-date-picker-calendar-grid :where(thead,tbody,tr,td,th){
1055
- padding:0;
1056
- border:0;
1125
+ .tds-combo-box-button > svg{
1126
+ inline-size:var(--tds-field-font-size);
1127
+ block-size:var(--tds-field-font-size);
1128
+ transition:transform var(--t-duration-300) var(--t-ease-in-out);
1057
1129
  }
1058
1130
 
1059
- .tds-date-picker-calendar-header-cell{
1060
- padding-block-end:var(--t-spacing-1);
1061
- font-size:.875em;
1062
- font-weight:var(--t-font-weight-medium);
1063
- color:var(--t-text-color-secondary);
1064
- text-align:center;
1131
+ .tds-combo-box-popover{
1132
+ width:var(--trigger-width);
1133
+ max-block-size:inherit;
1134
+ padding:var(--t-spacing-1);
1135
+ overflow:auto;
1136
+ scroll-behavior:smooth;
1137
+ overscroll-behavior:none;
1065
1138
  -webkit-user-select:none;
1066
1139
  -moz-user-select:none;
1067
1140
  user-select:none;
1141
+ outline:0;
1142
+ scrollbar-color:#0004 var(--t-surface-color-card);
1143
+ scrollbar-width:thin;
1144
+ background:var(--t-surface-color-card);
1145
+ background-clip:padding-box;
1146
+ border:1px solid var(--t-border-color);
1147
+ border-radius:var(--t-border-radius);
1148
+ box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
1068
1149
  }
1069
1150
 
1070
- .tds-date-picker-calendar-cell-button{
1071
- position:relative;
1072
- display:flex;
1073
- align-items:center;
1074
- justify-content:center;
1075
- inline-size:2.25em;
1076
- block-size:2.25em;
1077
- color:var(--t-text-color);
1078
- cursor:pointer;
1079
- -webkit-user-select:none;
1080
- -moz-user-select:none;
1081
- user-select:none;
1082
- outline:0;
1083
- }
1084
-
1085
- .tds-date-picker-calendar-cell-button::before{
1086
- position:absolute;
1087
- inset:0;
1088
- z-index:-1;
1089
- content:"";
1090
- background-color:var(--_background-color);
1091
- border-radius:50%;
1151
+ .tds-combo-box-popover[data-entering]{
1152
+ animation:tds-combo-box-popover var(--t-duration-300) var(--t-ease-out);
1092
1153
  }
1093
1154
 
1094
- .tds-date-picker-calendar-cell-button[data-today]::before{
1095
- box-shadow:inset 0 0 0 1.5px var(--t-border-color);
1096
- }
1097
-
1098
- .tds-date-picker-calendar-cell-button[data-outside-month]{
1099
- display:none;
1155
+ .tds-combo-box-popover[data-exiting]{
1156
+ animation:tds-combo-box-popover var(--t-duration-200) var(--t-ease-in) reverse;
1100
1157
  }
1101
1158
 
1102
- .tds-date-picker-calendar-cell-button[data-hovered]{
1103
- --_background-color:var(--t-fill-color-button-neutral-outline-hover);
1159
+ .tds-combo-box-popover[data-entering],.tds-combo-box-popover[data-exiting]{
1160
+ will-change:opacity, transform;
1104
1161
  }
1105
1162
 
1106
- .tds-date-picker-calendar-cell-button[data-pressed]{
1107
- --_background-color:var(--t-fill-color-button-neutral-outline-active);
1163
+ @keyframes tds-combo-box-popover{
1164
+ from{
1165
+ opacity:0;
1166
+ transform:translateY(-8px);
1108
1167
  }
1168
+ }
1109
1169
 
1110
- .tds-date-picker-calendar-cell-button[data-selected]{
1111
- --_background-color:var(--t-fill-color-interaction);
1112
- font-weight:var(--t-font-weight-semibold);
1113
- color:var(--t-text-color-inverted);
1114
- border-color:transparent;
1115
- }
1170
+ @media (prefers-reduced-motion: reduce){
1171
+ .tds-combo-box-popover[data-entering],.tds-combo-box-popover[data-exiting]{
1172
+ animation:none;
1173
+ }
1116
1174
 
1117
- .tds-date-picker-calendar-cell-button[data-unavailable]{
1118
- color:var(--t-text-color-disabled);
1119
- text-decoration:line-through;
1120
- cursor:not-allowed;
1175
+ .tds-combo-box-button > svg{
1176
+ transition:none;
1121
1177
  }
1178
+ }
1122
1179
 
1123
- .tds-date-picker-calendar-cell-button[data-disabled]{
1124
- color:var(--t-text-color-disabled);
1125
- }
1180
+ .tds-combo-box-list{
1181
+ padding:0;
1182
+ margin:0;
1183
+ }
1126
1184
 
1127
- .tds-date-picker-calendar-cell-button[data-focus-visible]{
1128
- outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
1129
- outline-offset:-2px;
1185
+ .tds-combo-box-list-item{
1186
+ display:block;
1187
+ padding-block:var(--t-spacing-1);
1188
+ padding-inline:var(--t-spacing-2) var(--t-spacing-1);
1189
+ overflow:hidden;
1190
+ text-overflow:ellipsis;
1191
+ font-size:1rem;
1192
+ color:var(--t-text-color);
1193
+ white-space:nowrap;
1194
+ cursor:default;
1195
+ border-radius:var(--t-border-radius);
1196
+ }
1197
+
1198
+ .tds-combo-box-list-item[data-hovered]:not([data-disabled]),.tds-combo-box-list-item[data-focus-visible]{
1199
+ background:var(--t-fill-color-neutral-070);
1130
1200
  }
1131
1201
 
1132
- .tds-date-picker-calendar-cell-button[data-focus-visible][data-selected]{
1133
- outline-offset:var(--t-focus-ring-offset);
1202
+ .tds-combo-box-list-item[data-selected]{
1203
+ background:var(--t-fill-color-button-interaction-ghost-active);
1134
1204
  }
1135
1205
 
1136
- .tds-date-picker-popover--lg{
1137
- --tds-date-picker-popover-font-size:var(--t-font-size-lg);
1138
- }
1206
+ .tds-combo-box-list-item[data-pressed]:not([data-disabled]){
1207
+ background:var(--t-fill-color-neutral-060);
1208
+ }
1139
1209
 
1210
+ .tds-combo-box-list-item[data-disabled]{
1211
+ color:var(--t-form-color-disabled);
1212
+ cursor:not-allowed;
1213
+ }
1140
1214
 
1141
- :is(.tds-input input)::-webkit-search-decoration,:is(.tds-input input)::-webkit-search-cancel-button,:is(.tds-input input)::-webkit-search-results-button,:is(.tds-input input)::-webkit-search-results-decoration{
1142
- -webkit-appearance:none;
1143
- appearance:none;
1215
+ .tds-combo-box-list-item[data-disabled][data-hovered]{
1216
+ background:transparent;
1144
1217
  }
1145
1218
 
1146
- [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
1147
- inline-size:1em;
1148
- block-size:2em;
1149
- }
1219
+ .tds-combo-box-empty-state{
1220
+ position:relative;
1221
+ min-block-size:var(--t-spacing-3);
1222
+ padding-block:var(--t-spacing-1);
1223
+ padding-inline:var(--t-spacing-2);
1224
+ font-size:var(--t-font-size-md);
1225
+ color:var(--t-text-color-secondary);
1226
+ }
1150
1227
 
1151
- @supports (field-sizing: content){
1152
- .tds-input--auto-width{
1153
- inline-size:-moz-fit-content;
1154
- inline-size:fit-content;
1155
- min-inline-size:min(100%, 122px);
1156
- }
1228
+ .tds-combo-box-load-more{
1229
+ position:relative;
1230
+ min-block-size:calc(var(--t-spacing-3) + var(--t-spacing-1));
1231
+ }
1157
1232
 
1158
- .tds-input--auto-width input{
1159
- field-sizing:content;
1160
- inline-size:auto;
1161
- }
1233
+ .tds-combo-box-empty-state,
1234
+ .tds-combo-box-load-more{
1235
+ --tds-loading-spinner-visibility:visible;
1236
+ --tds-loading-spinner-animation-play-state:running;
1162
1237
  }
1163
1238
 
1164
- .tds-toggle-switch{
1165
- --tds-toggle-switch-font-size:var(--t-font-size-md);
1166
- --tds-toggle-switch-column-gap:var(--t-spacing-1);
1167
- --tds-toggle-switch-cursor:pointer;
1168
- --tds-toggle-switch-display:inline-grid;
1169
- --tds-toggle-switch-line-height:1.4;
1239
+ .tds-combo-box-list-section:not(:first-child){
1240
+ margin-block-start:var(--t-spacing-half);
1241
+ }
1170
1242
 
1171
- --tds-toggle-switch-label-color:var(--t-form-color);
1243
+ .tds-combo-box-section-header{
1244
+ padding-block:var(--t-spacing-1);
1245
+ padding-inline:var(--t-spacing-1);
1246
+ font-size:var(--t-font-size-sm);
1247
+ font-weight:var(--t-font-weight-semibold);
1248
+ color:var(--t-text-color-secondary);
1249
+ }
1172
1250
 
1173
- --tds-toggle-switch-track-width:var(--t-container-size-md);
1174
- --tds-toggle-switch-track-outline:none;
1175
- --tds-toggle-switch-track-height:var(--t-container-size-xs);
1176
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color);
1177
- --tds-toggle-switch-track-transition:background-color var(--t-duration-100) var(--t-ease-in-out);
1251
+ .tds-number-stepper{
1252
+ --tds-number-stepper-button-offset:4px;
1253
+ --tds-number-stepper-button-gap:2px;
1254
+ }
1178
1255
 
1179
- --tds-toggle-switch-thumb-size:var(--t-element-size-md);
1180
- --tds-toggle-switch-thumb-transform:translateX(0);
1181
- --tds-toggle-switch-thumb-transition:transform var(--t-duration-200) var(--t-ease-in-out);
1256
+ .tds-number-stepper--lg{
1257
+ --tds-number-stepper-button-offset:5px;
1258
+ --tds-number-stepper-button-gap:4px;
1259
+ }
1182
1260
 
1183
- --tds-toggle-switch-description-font-size:var(--t-font-size-sm);
1184
- --tds-toggle-switch-description-line-height:1.35;
1185
- --tds-toggle-switch-description-color:var(--t-text-color-secondary);
1186
- position:relative;
1261
+ .tds-number-stepper-field:has([readonly]) .tds-number-stepper-button{
1262
+ display:none;
1263
+ }
1187
1264
 
1188
- display:var(--tds-toggle-switch-display);
1189
- grid-template-columns:auto;
1190
- grid-auto-columns:1fr;
1191
- gap:var(--t-spacing-fourth) var(--tds-toggle-switch-column-gap);
1192
- -webkit-user-select:none;
1193
- -moz-user-select:none;
1194
- user-select:none;
1265
+ .tds-number-stepper-input{
1266
+ display:flex;
1267
+ flex:1;
1268
+ align-items:center;
1269
+ min-inline-size:0;
1270
+ padding-block:var(--tds-field-padding-block);
1271
+ padding-inline:var(--tds-field-padding-inline);
1272
+ font-family:inherit;
1273
+ font-size:inherit;
1274
+ color:inherit;
1275
+ outline:0;
1276
+ background:transparent;
1277
+ border:0;
1195
1278
  }
1196
1279
 
1197
- .tds-toggle-switch input[type="checkbox"]{
1198
- position:absolute;
1199
- width:var(--tds-toggle-switch-track-width);
1200
- height:var(--tds-toggle-switch-track-height);
1280
+ .tds-number-stepper-input::-webkit-inner-spin-button,.tds-number-stepper-input::-webkit-outer-spin-button{
1201
1281
  margin:0;
1202
1282
  -webkit-appearance:none;
1203
- -moz-appearance:none;
1204
1283
  appearance:none;
1205
- cursor:var(--tds-toggle-switch-cursor);
1206
- outline:var(--tds-toggle-switch-track-outline);
1207
- outline-offset:var(--t-focus-ring-offset);
1208
- background-color:transparent;
1209
- border:0;
1210
- border-radius:var(--t-border-radius-round);
1211
1284
  }
1212
1285
 
1213
- :is(.tds-toggle-switch input[type="checkbox"]):focus-visible{
1214
- --tds-toggle-switch-track-outline:var(--t-focus-ring-outline);
1215
- }
1216
-
1217
- .tds-toggle-switch label{
1218
- display:inline-flex;
1219
- grid-area:1 / 2;
1220
- -moz-column-gap:var(--tds-toggle-switch-column-gap);
1221
- column-gap:var(--tds-toggle-switch-column-gap);
1222
- margin-top:-.09375em;
1223
- font-size:var(--tds-toggle-switch-font-size);
1224
- font-weight:var(--t-font-weight-normal);
1225
- line-height:var(--tds-toggle-switch-line-height);
1226
- color:var(--tds-toggle-switch-label-color);
1227
- cursor:var(--tds-toggle-switch-cursor);
1228
- }
1286
+ .tds-number-stepper-button{
1287
+ flex-shrink:0;
1288
+ align-self:center;
1289
+ inline-size:calc(var(--tds-field-min-height) - (var(--tds-number-stepper-button-offset) * 2));
1290
+ block-size:calc(var(--tds-field-min-height) - (var(--tds-number-stepper-button-offset) * 2));
1291
+ padding:0;
1292
+ }
1229
1293
 
1230
- .tds-toggle-switch:not(:has(input:disabled)):has(input:hover){
1231
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-hover);
1294
+ .tds-number-stepper-button + .tds-number-stepper-button{
1295
+ margin-inline-start:var(--tds-number-stepper-button-gap);
1232
1296
  }
1233
1297
 
1234
- .tds-toggle-switch:has(input:checked){
1235
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on);
1236
- --tds-toggle-switch-thumb-transform:translateX(calc(var(--tds-toggle-switch-track-width) - var(--tds-toggle-switch-thumb-size) - var(--t-spacing-half)));
1298
+ .tds-number-stepper-button:last-of-type{
1299
+ margin-inline-end:var(--tds-number-stepper-button-offset);
1237
1300
  }
1238
1301
 
1239
- .tds-toggle-switch:has(input:checked):not(:has(input:disabled)):has(input:hover){
1240
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on-hover);
1241
- }
1242
-
1243
- .tds-toggle-switch:has(input:disabled){
1244
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-disabled);
1245
- --tds-toggle-switch-label-color:var(--t-form-color-disabled);
1246
- --tds-toggle-switch-description-color:var(--t-form-color-disabled);
1247
- --tds-toggle-switch-cursor:not-allowed;
1248
- }
1302
+ .tds-date-picker{
1303
+ --tds-date-picker-button-offset:4px;
1304
+ }
1249
1305
 
1250
- .tds-toggle-switch-track{
1251
- position:relative;
1252
- flex-shrink:0;
1253
- width:var(--tds-toggle-switch-track-width);
1254
- height:var(--tds-toggle-switch-track-height);
1255
- background-color:var(--tds-toggle-switch-track-background-color);
1256
- border-radius:var(--t-border-radius-round);
1257
- transition:var(--tds-toggle-switch-track-transition);
1306
+ .tds-date-picker--lg{
1307
+ --tds-date-picker-button-offset:5px;
1258
1308
  }
1259
1309
 
1260
- .tds-toggle-switch-track::before{
1261
- position:absolute;
1262
- top:var(--t-spacing-fourth);
1263
- left:var(--t-spacing-fourth);
1264
- width:var(--tds-toggle-switch-thumb-size);
1265
- height:var(--tds-toggle-switch-thumb-size);
1266
- content:"";
1267
- background-color:#fff;
1268
- border-radius:var(--t-border-radius-round);
1269
- transform:var(--tds-toggle-switch-thumb-transform);
1270
- transition:var(--tds-toggle-switch-thumb-transition);
1271
- }
1272
-
1273
- @media (prefers-reduced-motion: reduce){
1274
-
1275
- .tds-toggle-switch-track{
1276
- --tds-toggle-switch-track-transition:none;
1277
- --tds-toggle-switch-thumb-transition:none;
1278
- }
1279
- }
1280
-
1281
- .tds-toggle-switch-description{
1282
- display:flex;
1283
- grid-area:2 / 2;
1284
- align-items:flex-start;
1285
- margin:0;
1286
- font-size:var(--tds-toggle-switch-description-font-size);
1287
- line-height:var(--tds-toggle-switch-description-line-height);
1288
- color:var(--tds-toggle-switch-description-color);
1289
- cursor:text;
1310
+ .tds-date-picker-field[data-focus-within]:has(.tds-date-picker-button[data-focused]){
1311
+ outline-color:transparent;
1312
+ outline-offset:0;
1313
+ border-color:var(--tds-field-border-color);
1290
1314
  }
1291
1315
 
1292
- .tds-toggle-switch--sm{
1293
- --tds-toggle-switch-font-size:var(--t-font-size-sm);
1294
- --tds-toggle-switch-line-height:1.35;
1295
- --tds-toggle-switch-track-height:var(--t-element-size-lg);
1296
- --tds-toggle-switch-thumb-size:var(--t-element-size-sm);
1297
- --tds-toggle-switch-description-font-size:var(--t-font-size-xs);
1298
- --tds-toggle-switch-description-line-height:1.3;
1316
+ .tds-date-picker-field:has(.tds-date-picker-input[data-readonly]) .tds-date-picker-button{
1317
+ display:none;
1299
1318
  }
1300
1319
 
1301
- .tds-toggle-switch--hide-label{
1302
- --tds-toggle-switch-display:inline-flex;
1320
+ .tds-date-picker-input{
1321
+ flex:1;
1322
+ padding-block:var(--tds-field-padding-block);
1323
+ padding-inline:var(--tds-field-padding-inline);
1324
+ overflow:auto clip;
1325
+ font-variant-numeric:tabular-nums;
1326
+ text-wrap:nowrap;
1327
+ scrollbar-width:none;
1303
1328
  }
1304
1329
 
1305
-
1306
- @media (prefers-reduced-motion: no-preference){
1307
-
1308
- :root{
1309
- interpolate-size:allow-keywords;
1310
- }
1330
+ .tds-date-picker-input:has( + .tds-date-picker-button){
1331
+ padding-inline-end:0;
1311
1332
  }
1312
1333
 
1313
- @layer tds-component{
1314
- tds-sidenav,
1315
- .tds-sidenav{
1316
- --tds-sidenav-indent:12px;
1317
- --tds-sidenav-item-depth:0;
1318
-
1319
- --tds-sidenav-item-transition:background-color var(--t-duration-200) var(--t-ease-in-out);
1334
+ .tds-date-picker-button{
1335
+ flex-shrink:0;
1336
+ align-self:center;
1337
+ inline-size:calc(var(--tds-field-min-height) - (var(--tds-date-picker-button-offset) * 2));
1338
+ block-size:calc(var(--tds-field-min-height) - (var(--tds-date-picker-button-offset) * 2));
1339
+ padding:0;
1340
+ margin-inline-end:var(--tds-date-picker-button-offset);
1341
+ }
1320
1342
 
1321
- --tds-sidenav-collapse-transition-enter:opacity var(--t-duration-300) var(--t-ease-out), transform var(--t-duration-300) var(--t-ease-out), display var(--t-duration-300) allow-discrete, overlay var(--t-duration-300) allow-discrete;
1322
- --tds-sidenav-collapse-transition-exit:opacity var(--t-duration-200) var(--t-ease-in), display var(--t-duration-200) allow-discrete, overlay var(--t-duration-200) allow-discrete;
1323
- --tds-sidenav-collapse-closed-opacity:0;
1324
- --tds-sidenav-collapse-open-opacity:1;
1325
- --tds-sidenav-collapse-closed-transform:translateY(-8px);
1326
- --tds-sidenav-collapse-open-transform:translateY(0);
1343
+ .tds-date-picker-popover{
1344
+ --tds-date-picker-popover-font-size:var(--t-font-size-md);
1345
+ --tds-date-picker-popover-padding:var(--t-spacing-1-half);
1346
+ --tds-date-picker-popover-background-color:var(--t-surface-color-card);
1347
+ --tds-date-picker-popover-shadow:hsl(0, 0%, 0%, .05) 0 10px 15px -3px, hsl(0, 0%, 0%, .05) 0 4px 6px -4px;
1348
+ --tds-date-picker-popover-interactive-timing-function:var(--t-ease-in-out);
1349
+ --tds-date-picker-popover-interactive-duration:var(--t-duration-200);
1350
+ --tds-date-picker-popover-interactive-property:color, background-color, border-color;
1327
1351
 
1328
- --tds-sidenav-item-icon-size:var(--t-element-size-md);
1329
- --tds-sidenav-item-background-hover:var(--t-fill-color-button-interaction-ghost-hover);
1330
- --tds-sidenav-item-background-active:var(--t-fill-color-button-interaction-ghost-active);
1331
- --tds-sidenav-item-background-selected:var(--t-fill-color-button-interaction-ghost-active);
1352
+ position:relative;
1353
+ overflow:hidden;
1354
+ background-color:var(--tds-date-picker-popover-background-color);
1355
+ border:var(--t-border-width) solid var(--t-border-color);
1356
+ border-radius:var(--t-border-radius);
1357
+ box-shadow:var(--tds-date-picker-popover-shadow);
1358
+ }
1332
1359
 
1333
- --tds-sidenav-item-nested-background-hover:var(--tds-sidenav-item-background-hover);
1334
- --tds-sidenav-item-nested-background-active:var(--tds-sidenav-item-background-hover);
1335
- --tds-sidenav-item-nested-background-selected:transparent;
1360
+ .tds-date-picker-popover[data-entering]{
1361
+ animation:tds-date-picker-popover var(--t-duration-300) var(--t-ease-out);
1362
+ }
1336
1363
 
1337
- --tds-sidenav-item-nested-border-color:var(--t-fill-color-neutral-050);
1338
- --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
1339
- --tds-sidenav-item-nested-border-color-selected:var(--t-border-color-status-info);
1364
+ .tds-date-picker-popover[data-exiting]{
1365
+ animation:tds-date-picker-popover var(--t-duration-200) var(--t-ease-in) reverse;
1366
+ }
1340
1367
 
1341
- --tds-sidenav-item-icon-color:var(--t-icon-color-secondary);
1342
- --tds-sidenav-item-icon-color-selected:var(--t-icon-color);
1368
+ .tds-date-picker-popover[data-entering],.tds-date-picker-popover[data-exiting]{
1369
+ will-change:opacity, transform;
1343
1370
  }
1344
1371
 
1345
- @media (prefers-reduced-motion: reduce){
1346
- tds-sidenav,
1347
- .tds-sidenav{
1348
- --tds-sidenav-collapse-transition-enter:none;
1349
- --tds-sidenav-collapse-transition-exit:none;
1350
- --tds-sidenav-collapse-closed-transform:none;
1351
- --tds-sidenav-collapse-open-transform:none;
1372
+ @keyframes tds-date-picker-popover{
1373
+ from{
1374
+ opacity:0;
1375
+ transform:translateY(-8px);
1352
1376
  }
1377
+ }
1378
+
1379
+ @media (prefers-reduced-motion: reduce){
1380
+ .tds-date-picker-popover[data-entering],.tds-date-picker-popover[data-exiting]{
1381
+ animation:none;
1353
1382
  }
1383
+ }
1354
1384
 
1355
- .tds-sidenav--theme-gray{
1356
- --tds-sidenav-item-background-hover:var(--t-fill-color-neutral-080);
1357
- --tds-sidenav-item-background-active:var(--t-fill-color-neutral-070);
1358
- --tds-sidenav-item-background-selected:var(--t-fill-color-neutral-050);
1359
- --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
1360
- --tds-sidenav-item-nested-border-color-selected:var(--t-fill-color-neutral-010);
1361
- }
1385
+ .tds-date-picker-overlay{
1386
+ position:absolute;
1387
+ inset:0;
1388
+ z-index:1;
1389
+ display:flex;
1390
+ background-color:var(--tds-date-picker-popover-background-color);
1362
1391
  }
1363
1392
 
1364
- .tds-sidenav :where(nav,ul,.tds-sidenav-section){
1365
- display:flex;
1366
- }
1393
+ .tds-date-picker-overlay-list{
1394
+ display:grid;
1395
+ flex:1;
1396
+ grid-template-columns:repeat(3, 1fr);
1397
+ gap:var(--t-spacing-half);
1398
+ padding-inline:var(--tds-date-picker-popover-padding);
1399
+ outline:0;
1400
+ scrollbar-color:var(--t-fill-color-transparency-dark-030) transparent;
1401
+ scrollbar-width:thin;
1402
+ }
1367
1403
 
1368
- .tds-sidenav :where(nav,ul,.tds-sidenav-section,.tds-sidenav-collapse){
1369
- flex-direction:column;
1370
- gap:var(--t-spacing-half);
1371
- width:100%;
1372
- }
1404
+ .tds-date-picker-overlay--month .tds-date-picker-overlay-list{
1405
+ grid-template-rows:repeat(4, 1fr);
1406
+ padding-bottom:var(--tds-date-picker-popover-padding);
1407
+ }
1373
1408
 
1374
- .tds-sidenav-section-list{
1375
- width:100%;
1376
- padding:0;
1377
- margin:0;
1378
- list-style:none;
1409
+ .tds-date-picker-overlay--year .tds-date-picker-overlay-list{
1410
+ grid-auto-rows:var(--t-container-size-xl);
1411
+ padding-right:var(--t-spacing-1);
1412
+ overflow-y:auto;
1413
+ scroll-padding-block:calc(var(--t-focus-ring-width) + var(--t-focus-ring-offset));
1379
1414
  }
1380
1415
 
1381
- .tds-sidenav-section-header{
1416
+ .tds-date-picker-overlay-cell{
1382
1417
  display:flex;
1383
- align-items:baseline;
1384
- justify-content:space-between;
1385
- padding-top:var(--t-spacing-2);
1418
+ align-items:center;
1419
+ justify-content:center;
1420
+ font-family:inherit;
1421
+ font-size:var(--tds-date-picker-popover-font-size);
1422
+ color:var(--t-text-color);
1423
+ cursor:pointer;
1424
+ outline:0;
1425
+ background-color:transparent;
1426
+ border:0;
1427
+ border-radius:var(--t-border-radius-md);
1428
+ transition-timing-function:var(--tds-date-picker-popover-interactive-timing-function);
1429
+ transition-duration:var(--t-duration-100);
1430
+ transition-property:var(--tds-date-picker-popover-interactive-property);
1386
1431
  }
1387
1432
 
1388
- .tds-sidenav-section-header h2{
1389
- margin:0;
1390
- font-size:var(--t-font-size-sm);
1433
+ .tds-date-picker-overlay-cell[data-hovered]{
1434
+ background-color:var(--t-fill-color-button-neutral-outline-hover);
1435
+ }
1436
+
1437
+ .tds-date-picker-overlay-cell[data-pressed]{
1438
+ background-color:var(--t-fill-color-button-neutral-outline-active);
1439
+ }
1440
+
1441
+ .tds-date-picker-overlay-cell[data-selected]{
1391
1442
  font-weight:var(--t-font-weight-semibold);
1392
- line-height:1.35;
1393
- color:var(--t-text-color-secondary);
1394
- text-transform:uppercase;
1443
+ color:var(--t-text-color-inverted);
1444
+ background-color:var(--t-fill-color-interaction);
1395
1445
  }
1396
1446
 
1397
- .tds-sidenav-section:first-of-type .tds-sidenav-section-header{
1398
- padding-top:0;
1447
+ .tds-date-picker-overlay-cell[data-focus-visible]{
1448
+ outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
1399
1449
  }
1400
1450
 
1401
- .tds-sidenav-section-header [slot="label-actions"]{
1402
- display:flex;
1403
- gap:var(--t-spacing-half);
1404
- align-items:center;
1451
+ .tds-date-picker-overlay-cell[data-selected][data-focus-visible]{
1452
+ outline-offset:var(--t-focus-ring-offset);
1405
1453
  }
1406
1454
 
1407
- .tds-sidenav-section [slot="section-actions"]{
1455
+ .tds-date-picker-calendar-heading{
1408
1456
  display:flex;
1409
- gap:12px;
1457
+ flex:1;
1458
+ gap:var(--t-spacing-1);
1410
1459
  align-items:center;
1411
- min-height:42px;
1412
- padding:var(--t-spacing-1) 0;
1460
+ justify-content:flex-start;
1461
+ padding-inline-start:4px;
1413
1462
  }
1414
1463
 
1415
- .tds-sidenav-section-list,
1416
- .tds-sidenav-item{
1417
- width:100%;
1464
+ .tds-date-picker-calendar-overlay-trigger{
1465
+ --_background-color:transparent;
1466
+ position:relative;
1418
1467
  padding:0;
1419
- margin:0;
1468
+ font-family:inherit;
1469
+ font-size:var(--tds-date-picker-popover-font-size);
1470
+ font-weight:var(--t-font-weight-semibold);
1471
+ font-feature-settings:"ss01", "ss02";
1472
+ color:var(--t-text-color);
1473
+ cursor:pointer;
1474
+ outline:0;
1475
+ background-color:transparent;
1476
+ border:0;
1477
+ border-radius:var(--t-border-radius-md);
1478
+ isolation:isolate;
1479
+ transition-timing-function:var(--tds-date-picker-popover-interactive-timing-function);
1480
+ transition-duration:var(--tds-date-picker-popover-interactive-duration);
1481
+ transition-property:var(--tds-date-picker-popover-interactive-property);
1420
1482
  }
1421
1483
 
1422
- .tds-sidenav-item :is(a,button){
1423
- position:relative;
1424
- display:flex;
1425
- gap:12px;
1426
- align-items:center;
1427
- width:100%;
1428
- padding:12px;
1429
- overflow:hidden;
1430
- font-size:var(--t-font-size-sm);
1431
- line-height:18px;
1432
- color:var(--t-text-color-headline);
1433
- white-space:nowrap;
1434
- text-decoration:none;
1435
- -webkit-appearance:none;
1436
- -moz-appearance:none;
1437
- appearance:none;
1438
- cursor:pointer;
1439
- background-color:var(--tds-sidenav-item-background, transparent);
1440
- border:0;
1441
- border-radius:var(--t-border-radius);
1442
- transition:var(--tds-sidenav-item-transition);
1484
+ .tds-date-picker-calendar-overlay-trigger::before{
1485
+ position:absolute;
1486
+ inset:calc(var(--t-spacing-half) * -1);
1487
+ z-index:-1;
1488
+ pointer-events:inherit;
1489
+ content:"";
1490
+ background-color:var(--_background-color);
1491
+ border-radius:inherit;
1443
1492
  }
1444
1493
 
1445
- :is(.tds-sidenav-item :is(a,button)):not(:has(.prefix,.suffix)),:is(.tds-sidenav-item :is(a,button)) :is(:not(.prefix,.suffix)){
1446
- display:block;
1447
- flex:1;
1448
- overflow:hidden;
1449
- text-overflow:ellipsis;
1450
- text-align:left;
1451
- white-space:nowrap;
1452
- }
1494
+ .tds-date-picker-calendar-overlay-trigger[data-hovered]{
1495
+ --_background-color:var(--t-fill-color-button-neutral-outline-hover);
1496
+ }
1453
1497
 
1454
- :is(.tds-sidenav-item :is(a,button)):hover,:is(.tds-sidenav-item :is(a,button)):focus-visible{
1455
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-hover);
1456
- color:var(--t-text-color-headline);
1457
- text-decoration:none;
1458
- }
1498
+ .tds-date-picker-calendar-overlay-trigger[data-pressed]{
1499
+ --_background-color:var(--t-fill-color-button-neutral-outline-active);
1500
+ }
1459
1501
 
1460
- :is(.tds-sidenav-item :is(a,button)):active{
1461
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-active);
1462
- }
1502
+ .tds-date-picker-calendar-overlay-trigger[data-focus-visible]{
1503
+ outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
1504
+ outline-offset:var(--t-focus-ring-offset);
1505
+ }
1463
1506
 
1464
- :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]){
1465
- overflow:hidden;
1466
- color:var(--tds-sidenav-item-icon-color);
1467
- }
1507
+ .tds-date-picker-calendar{
1508
+ inline-size:-moz-fit-content;
1509
+ inline-size:fit-content;
1510
+ font-size:var(--tds-date-picker-popover-font-size);
1511
+ }
1468
1512
 
1469
- :is(:is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"])),:is(:is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"])) svg{
1470
- display:block;
1471
- width:var(--tds-sidenav-item-icon-size);
1472
- height:var(--tds-sidenav-item-icon-size);
1473
- }
1513
+ .tds-date-picker-calendar-body{
1514
+ position:relative;
1515
+ padding:var(--tds-date-picker-popover-padding);
1516
+ padding-block-start:0;
1517
+ }
1474
1518
 
1475
- :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section{
1476
- --tds-sidenav-indent:19px;
1477
- }
1519
+ .tds-date-picker-calendar-header{
1520
+ display:flex;
1521
+ align-items:center;
1522
+ justify-content:space-between;
1523
+ padding:var(--tds-date-picker-popover-padding);
1524
+ }
1478
1525
 
1479
- [aria-expanded="true"]:is(.tds-sidenav-item :is(a,button)) + .tds-sidenav-section-list{
1480
- visibility:visible;
1481
- block-size:auto;
1482
- opacity:1;
1483
- }
1526
+ .tds-date-picker-calendar-title{
1527
+ padding:var(--t-spacing-half) var(--t-spacing-1);
1528
+ font-size:var(--tds-date-picker-popover-font-size);
1529
+ font-weight:var(--t-font-weight-semibold);
1530
+ }
1484
1531
 
1485
- .tds-sidenav-item.selected > :is(a,button),.tds-sidenav-item:has(.tds-sidenav-section):has(.selected) > :is(a,button){
1486
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-selected);
1487
- --tds-sidenav-item-icon-color:var(--tds-sidenav-item-icon-color-selected);
1532
+ .tds-date-picker-calendar-nav{
1533
+ display:flex;
1534
+ align-items:center;
1535
+ justify-content:center;
1536
+ padding:var(--t-spacing-half);
1537
+ font-size:.875em;
1538
+ color:var(--t-text-color);
1539
+ cursor:pointer;
1540
+ outline:0;
1541
+ background-color:transparent;
1542
+ border:0;
1543
+ border-radius:var(--t-border-radius-md);
1544
+ transition-timing-function:var(--tds-date-picker-popover-interactive-timing-function);
1545
+ transition-duration:var(--tds-date-picker-popover-interactive-duration);
1546
+ transition-property:var(--tds-date-picker-popover-interactive-property);
1547
+ }
1488
1548
 
1489
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-selected);
1490
- font-weight:var(--t-font-weight-semibold);
1549
+ .tds-date-picker-calendar-nav[data-hovered]{
1550
+ background-color:var(--t-fill-color-button-neutral-outline-hover);
1491
1551
  }
1492
1552
 
1493
- .tds-sidenav-item:has(.tds-sidenav-section){
1494
- display:flex;
1495
- flex-direction:column;
1496
- gap:var(--t-spacing-half);
1553
+ .tds-date-picker-calendar-nav[data-pressed]{
1554
+ background-color:var(--t-fill-color-button-neutral-outline-active);
1497
1555
  }
1498
1556
 
1499
- .tds-sidenav-item .tds-sidenav-section-list{
1500
- --tds-sidenav-item-depth:1;
1501
- gap:0;
1557
+ .tds-date-picker-calendar-nav[data-focus-visible]{
1558
+ outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
1559
+ outline-offset:var(--t-focus-ring-offset);
1502
1560
  }
1503
1561
 
1504
- .tds-sidenav-action--toggle + :is(.tds-sidenav-item .tds-sidenav-section-list){
1505
- visibility:hidden;
1506
- block-size:0;
1507
- overflow-y:clip;
1508
- opacity:0;
1509
- transition:content-visibility var(--t-duration-400) allow-discrete, opacity var(--t-duration-400), block-size var(--t-duration-400);
1510
- }
1562
+ .tds-date-picker-calendar-nav[data-disabled]{
1563
+ color:var(--t-text-color-disabled);
1564
+ cursor:not-allowed;
1565
+ }
1511
1566
 
1512
- :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list{
1513
- --tds-sidenav-item-depth:2;
1514
- }
1567
+ .tds-date-picker-calendar-grid{
1568
+ font-feature-settings:"ss01", "ss02";
1569
+ border-collapse:collapse;
1570
+ }
1515
1571
 
1516
- :is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
1517
- min-height:var(--t-element-size-2xl);
1518
- padding-block:9px;
1519
- padding-left:calc((var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth)) + var(--tds-sidenav-indent) + var(--t-spacing-fourth));
1520
- line-height:1;
1521
- background-color:transparent;
1522
- }
1572
+ .tds-date-picker-calendar-grid :where(thead,tbody,tr,td,th){
1573
+ padding:0;
1574
+ border:0;
1575
+ }
1523
1576
 
1524
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::before{
1525
- position:absolute;
1526
- top:0;
1527
- bottom:0;
1528
- left:calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
1529
- width:2px;
1530
- content:"";
1531
- background-color:var(--tds-sidenav-item-nested-border-color);
1532
- transition:var(--tds-sidenav-item-transition);
1533
- }
1577
+ .tds-date-picker-calendar-header-cell{
1578
+ padding-block-end:var(--t-spacing-1);
1579
+ font-size:.875em;
1580
+ font-weight:var(--t-font-weight-medium);
1581
+ color:var(--t-text-color-secondary);
1582
+ text-align:center;
1583
+ -webkit-user-select:none;
1584
+ -moz-user-select:none;
1585
+ user-select:none;
1586
+ }
1534
1587
 
1535
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::after{
1536
- position:absolute;
1537
- inset:0 0 0 calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
1538
- z-index:-1;
1539
- height:100%;
1540
- content:"";
1541
- background-color:var(--tds-sidenav-item-nested-background);
1542
- border-radius:0 var(--t-border-radius) var(--t-border-radius) 0;
1543
- transition:var(--tds-sidenav-item-transition);
1544
- }
1588
+ .tds-date-picker-calendar-cell-button{
1589
+ position:relative;
1590
+ display:flex;
1591
+ align-items:center;
1592
+ justify-content:center;
1593
+ inline-size:2.25em;
1594
+ block-size:2.25em;
1595
+ color:var(--t-text-color);
1596
+ cursor:pointer;
1597
+ -webkit-user-select:none;
1598
+ -moz-user-select:none;
1599
+ user-select:none;
1600
+ outline:0;
1601
+ }
1545
1602
 
1546
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):not(:has(.prefix,.suffix)),:is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)) :is(:not(.prefix,.suffix)){
1547
- display:block;
1548
- text-align:left;
1549
- white-space:normal;
1550
- }
1603
+ .tds-date-picker-calendar-cell-button::before{
1604
+ position:absolute;
1605
+ inset:0;
1606
+ z-index:-1;
1607
+ content:"";
1608
+ background-color:var(--_background-color);
1609
+ border-radius:50%;
1610
+ }
1551
1611
 
1552
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):hover,:is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):focus-visible{
1553
- --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-hover);
1554
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-hover);
1555
- }
1612
+ .tds-date-picker-calendar-cell-button[data-today]::before{
1613
+ box-shadow:inset 0 0 0 1.5px var(--t-border-color);
1614
+ }
1556
1615
 
1557
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):active{
1558
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-active);
1559
- }
1616
+ .tds-date-picker-calendar-cell-button[data-outside-month]{
1617
+ display:none;
1618
+ }
1560
1619
 
1561
- .selected:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
1562
- --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-selected);
1563
- font-weight:var(--t-font-weight-medium);
1564
- }
1620
+ .tds-date-picker-calendar-cell-button[data-hovered]{
1621
+ --_background-color:var(--t-fill-color-button-neutral-outline-hover);
1622
+ }
1565
1623
 
1566
- .tds-sidenav-responsive-header{
1567
- display:flex;
1568
- gap:var(--t-spacing-2);
1569
- align-items:center;
1570
- width:100%;
1571
- }
1624
+ .tds-date-picker-calendar-cell-button[data-pressed]{
1625
+ --_background-color:var(--t-fill-color-button-neutral-outline-active);
1626
+ }
1572
1627
 
1573
- .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle{
1574
- order:0;
1628
+ .tds-date-picker-calendar-cell-button[data-selected]{
1629
+ --_background-color:var(--t-fill-color-interaction);
1630
+ font-weight:var(--t-font-weight-semibold);
1631
+ color:var(--t-text-color-inverted);
1632
+ border-color:transparent;
1575
1633
  }
1576
1634
 
1577
- .tds-sidenav-responsive-header .tds-sidenav-responsive-header-label{
1578
- flex:1;
1579
- order:1;
1580
- margin:0;
1581
- font-size:var(--t-font-size-lg);
1582
- font-weight:var(--t-font-weight-medium);
1583
- color:var(--t-text-color-headline);
1635
+ .tds-date-picker-calendar-cell-button[data-unavailable]{
1636
+ color:var(--t-text-color-disabled);
1637
+ text-decoration:line-through;
1638
+ cursor:not-allowed;
1584
1639
  }
1585
1640
 
1586
- @media (max-width: 719px){
1587
- .tds-sidenav-collapse{
1588
- z-index:10001;
1589
- display:none;
1590
- max-width:min(448px, calc(100vw - 48px));
1591
- padding:0;
1592
- margin:12px 0;
1593
- position-area:bottom span-right;
1594
- overflow:hidden;
1595
- outline:0;
1596
- background:var(--t-surface-color-card);
1597
- border:0;
1598
- border-radius:6px;
1599
- box-shadow:0 8px 20px 0 rgba(0, 0, 0, .25);
1600
- opacity:var(--tds-sidenav-collapse-open-opacity);
1601
- transform:var(--tds-sidenav-collapse-open-transform);
1602
- transition:var(--tds-sidenav-collapse-transition-enter);
1603
- will-change:transform;
1641
+ .tds-date-picker-calendar-cell-button[data-disabled]{
1642
+ color:var(--t-text-color-disabled);
1604
1643
  }
1605
1644
 
1606
- .tds-sidenav-scroll-container{
1607
- --webkit-overflow-scrolling:touch;
1608
- display:block;
1609
- width:100%;
1610
- height:-moz-fit-content;
1611
- height:fit-content;
1612
- padding:var(--t-spacing-2);
1613
- overflow-y:auto;
1645
+ .tds-date-picker-calendar-cell-button[data-focus-visible]{
1646
+ outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
1647
+ outline-offset:-2px;
1648
+ }
1649
+
1650
+ .tds-date-picker-calendar-cell-button[data-focus-visible][data-selected]{
1651
+ outline-offset:var(--t-focus-ring-offset);
1614
1652
  }
1615
1653
 
1616
- .tds-sidenav-item :is(a, button) :is(.prefix){
1617
- display:none;
1618
- }
1619
- @supports selector(:popover-open){
1620
- .tds-sidenav-collapse:popover-open{
1621
- display:flex;
1654
+ .tds-date-picker-popover--lg{
1655
+ --tds-date-picker-popover-font-size:var(--t-font-size-lg);
1656
+ }
1657
+
1658
+ .tds-input:has(textarea){
1659
+ --tds-input-padding-block:6px;
1660
+ --tds-input-resizer-size:var(--t-element-size-sm);
1661
+ --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");
1662
+ }
1663
+
1664
+ @supports (x: attr(x type(*))){
1665
+
1666
+ .tds-input:has(textarea){
1667
+ --tds-input-min-height:calc((attr(rows type(<number>), 3) * 1lh) + (var(--tds-input-padding-block) * 2) + 2px);
1668
+ }
1669
+ }
1670
+
1671
+ .tds-input.tds-textarea--resize-vertical textarea{
1672
+ resize:vertical;
1673
+ }
1674
+
1675
+ .tds-input.tds-textarea--resize-none textarea{
1676
+ resize:none;
1677
+ }
1678
+
1679
+ .tds-input.tds-textarea--resize-auto textarea{
1680
+ resize:vertical;
1681
+ }
1682
+
1683
+ @supports (field-sizing: content){
1684
+ .tds-input.tds-textarea--resize-auto textarea{
1685
+ field-sizing:content;
1686
+ resize:none;
1687
+ }
1688
+ }
1689
+
1690
+ .tds-input textarea{
1691
+ --tds-input-scrollbar-thumb-color-default:var(--t-fill-color-neutral-040);
1692
+ --tds-input-scrollbar-thumb-color-hidden:transparent;
1693
+ --tds-input-scrollbar-thumb-color-hover:var(--t-fill-color-neutral-030);
1694
+ --tds-input-scrollbar-thumb-color-thumb-hover:var(--t-fill-color-neutral-020);
1695
+ --tds-input-scrollbar-thumb-color-thumb-active:var(--t-fill-color-neutral-010);
1696
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-default);
1697
+ --tds-input-scrollbar-surface-color:rgba(0, 0, 0, 0);
1698
+ --tds-input-scrollbar-thumb-border-radius:999px;
1699
+ --tds-input-scrollbar-thumb-border-width:3px;
1700
+ --tds-input-scrollbar-track-margin-block:.125rem;
1701
+ scrollbar-color:initial;
1702
+ transition-timing-function:var(--t-ease-in-out);
1703
+ transition-duration:var(--t-duration-200);
1704
+ transition-property:var(--tds-input-transition-property), --tds-input-scrollbar-thumb-color;
1705
+ }
1706
+
1707
+ @media (pointer: fine){
1708
+ :is(.tds-input textarea)::-webkit-scrollbar{
1709
+ width:12px;
1710
+ height:12px;
1711
+ cursor:default;
1622
1712
  }
1623
1713
 
1624
- .tds-sidenav-collapse:not(:popover-open){
1625
- opacity:var(--tds-sidenav-collapse-closed-opacity);
1626
- transition:var(--tds-sidenav-collapse-transition-exit);
1714
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb{
1715
+ cursor:default;
1716
+ background:var(--tds-input-scrollbar-thumb-color);
1717
+ background-clip:content-box;
1718
+ border:var(--tds-input-scrollbar-thumb-border-width) solid var(--tds-input-scrollbar-surface-color);
1719
+ border-radius:var(--tds-input-scrollbar-thumb-border-radius);
1627
1720
  }
1628
1721
 
1629
- @starting-style{
1630
- .tds-sidenav-collapse:popover-open{
1631
- opacity:var(--tds-sidenav-collapse-closed-opacity);
1632
- transform:var(--tds-sidenav-collapse-closed-transform);
1633
- }
1722
+ :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1723
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
1634
1724
  }
1635
- }
1636
- @supports not selector(:popover-open){
1637
- .tds-sidenav-collapse.\:popover-open{
1638
- display:flex;
1725
+
1726
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
1727
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
1639
1728
  }
1640
1729
 
1641
- .tds-sidenav-collapse:not(.\:popover-open){
1642
- opacity:var(--tds-sidenav-collapse-closed-opacity);
1643
- transition:var(--tds-sidenav-collapse-transition-exit);
1730
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
1731
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
1644
1732
  }
1645
- }
1646
- }
1647
1733
 
1648
- @media (min-width: 720px){
1649
- .tds-sidenav-responsive-header{
1650
- display:none;
1651
- }
1652
- }
1734
+ :is(.tds-input textarea)::-webkit-scrollbar-corner{
1735
+ background:var(--tds-input-scrollbar-surface-color);
1736
+ }
1653
1737
 
1654
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
1655
- display:none;
1738
+ :is(.tds-input textarea)::-webkit-resizer{
1739
+ background:var(--tds-input-resizer-icon) no-repeat;
1740
+ background-position:right bottom;
1741
+ background-size:var(--tds-input-resizer-size) var(--tds-input-resizer-size);
1656
1742
  }
1657
1743
 
1658
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
1659
- display:block;
1744
+ :is(.tds-input textarea)::-webkit-scrollbar-track{
1745
+ margin-block:var(--tds-input-scrollbar-track-margin-block);
1746
+ cursor:default;
1660
1747
  }
1661
1748
 
1662
- tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1663
- display:flex;
1664
- flex-direction:column;
1749
+ @supports (-moz-appearance: none){
1750
+ :is(.tds-input textarea){
1751
+ scrollbar-color:var(--tds-input-scrollbar-thumb-color-default) var(--tds-input-scrollbar-surface-color);
1752
+ scrollbar-width:thin;
1753
+ }
1754
+
1755
+ @media (hover){
1756
+ :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1757
+ scrollbar-color:var(--tds-input-scrollbar-thumb-color-hover) var(--tds-input-scrollbar-surface-color);
1758
+ }
1759
+ }
1665
1760
  }
1761
+ }
1762
+
1763
+ .tds-time-field-input{
1764
+ --tds-field-date-segment-padding-inline:1px;
1765
+ padding-block:var(--tds-field-padding-block);
1766
+ padding-inline:var(--tds-field-padding-inline);
1767
+ font-variant-numeric:tabular-nums;
1768
+ }
1666
1769
 
1667
1770
  .tds-input{
1668
1771
  --tds-input-border-color:var(--t-form-border-color);
@@ -1947,249 +2050,146 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1947
2050
  color:var(--tds-field-color);
1948
2051
  }
1949
2052
 
1950
- .tds-time-field-input{
1951
- --tds-field-date-segment-padding-inline:1px;
1952
- padding-block:var(--tds-field-padding-block);
1953
- padding-inline:var(--tds-field-padding-inline);
1954
- font-variant-numeric:tabular-nums;
1955
- }
1956
-
1957
- .tds-radio{
1958
- --tds-radio-font-size:var(--t-font-size-md);
1959
- --tds-radio-cursor:pointer;
1960
- --tds-radio-line-height:1.4;
1961
- --tds-radio-transition-property:border-width;
2053
+ .tds-toggle-switch{
2054
+ --tds-toggle-switch-font-size:var(--t-font-size-md);
2055
+ --tds-toggle-switch-column-gap:var(--t-spacing-1);
2056
+ --tds-toggle-switch-cursor:pointer;
2057
+ --tds-toggle-switch-display:inline-grid;
2058
+ --tds-toggle-switch-line-height:1.4;
1962
2059
 
1963
- --tds-radio-input-size:var(--t-element-size-md);
1964
- --tds-radio-input-border-radius:var(--t-border-radius-round);
1965
- --tds-radio-input-border-color:var(--t-form-border-color);
1966
- --tds-radio-input-border-width:var(--t-form-border-width);
1967
- --tds-radio-input-background-color:transparent;
2060
+ --tds-toggle-switch-label-color:var(--t-form-color);
1968
2061
 
1969
- --tds-radio-label-color:var(--t-form-color);
2062
+ --tds-toggle-switch-track-width:var(--t-container-size-md);
2063
+ --tds-toggle-switch-track-outline:none;
2064
+ --tds-toggle-switch-track-height:var(--t-container-size-xs);
2065
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color);
2066
+ --tds-toggle-switch-track-transition:background-color var(--t-duration-100) var(--t-ease-in-out);
1970
2067
 
1971
- --tds-radio-description-font-size:var(--t-font-size-sm);
1972
- --tds-radio-description-line-height:1.35;
1973
- --tds-radio-description-color:var(--t-text-color-secondary);
2068
+ --tds-toggle-switch-thumb-size:var(--t-element-size-md);
2069
+ --tds-toggle-switch-thumb-transform:translateX(0);
2070
+ --tds-toggle-switch-thumb-transition:transform var(--t-duration-200) var(--t-ease-in-out);
1974
2071
 
2072
+ --tds-toggle-switch-description-font-size:var(--t-font-size-sm);
2073
+ --tds-toggle-switch-description-line-height:1.35;
2074
+ --tds-toggle-switch-description-color:var(--t-text-color-secondary);
1975
2075
  position:relative;
1976
- display:inline-grid;
2076
+
2077
+ display:var(--tds-toggle-switch-display);
1977
2078
  grid-template-columns:auto;
1978
2079
  grid-auto-columns:1fr;
1979
- gap:var(--t-spacing-fourth) var(--t-spacing-1);
1980
- line-height:var(--tds-radio-line-height);
1981
- cursor:var(--tds-radio-cursor);
1982
- -webkit-user-select:none;
1983
- -moz-user-select:none;
1984
- user-select:none;
1985
- }
1986
-
1987
- .tds-radio label{
1988
- grid-area:1 / 2;
1989
- font-size:var(--tds-radio-font-size);
1990
- font-weight:var(--t-font-weight-normal);
1991
- color:var(--tds-radio-label-color);
1992
- cursor:var(--tds-radio-cursor);
1993
- }
1994
-
1995
- .tds-radio input[type="radio"]{
1996
- position:relative;
1997
- width:1em;
1998
- height:1em;
1999
- margin:calc((1lh - 1em) / 2) 0 0;
2000
- font-size:var(--tds-radio-font-size);
2001
- line-height:inherit;
2002
- -webkit-appearance:none;
2003
- -moz-appearance:none;
2004
- appearance:none;
2005
- cursor:var(--tds-radio-cursor);
2006
- background-color:var(--tds-radio-input-background-color);
2007
- border:var(--tds-radio-input-border-width) solid var(--tds-radio-input-border-color);
2008
- border-radius:var(--tds-radio-input-border-radius);
2009
- transition-timing-function:var(--t-ease-in-out);
2010
- transition-duration:var(--t-duration-200);
2011
- transition-property:var(--tds-radio-transition-property);
2012
- }
2013
-
2014
- :is(.tds-radio input[type="radio"]):hover:not(:disabled){
2015
- --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
2016
- --tds-radio-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
2017
- }
2018
-
2019
- :is(.tds-radio input[type="radio"]):focus-visible{
2020
- outline:var(--t-focus-ring-outline);
2021
- outline-offset:var(--t-focus-ring-offset);
2022
- }
2023
-
2024
- :is(.tds-radio input[type="radio"]):disabled{
2025
- pointer-events:none;
2026
- }
2027
-
2028
- @media (prefers-reduced-motion: reduce){
2029
-
2030
- .tds-radio input[type="radio"]{
2031
- --tds-radio-transition-property:none;
2032
- }
2033
- }
2034
-
2035
- .tds-radio:has(input:checked){
2036
- --tds-radio-input-background-color:var(--t-form-background-color);
2037
- --tds-radio-input-border-color:var(--t-border-color-control-info);
2038
- --tds-radio-input-border-width:4px;
2039
- }
2040
-
2041
- .tds-radio:has(input:checked) input:hover:not(:disabled){
2042
- --tds-radio-input-background-color:var(--t-form-background-color);
2043
- --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
2044
- }
2045
-
2046
- .tds-radio:has(input:user-invalid){
2047
- --tds-radio-input-border-color:var(--t-form-border-color-error);
2048
- }
2049
-
2050
- .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
2051
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
2052
- --tds-radio-input-background-color:var(--t-form-background-color-error);
2053
- }
2054
-
2055
- .tds-radio:has(input:disabled){
2056
- --tds-radio-input-background-color:var(--t-form-background-color-disabled);
2057
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
2058
-
2059
- --tds-radio-label-color:var(--t-form-color-disabled);
2060
- --tds-radio-description-color:var(--t-form-color-disabled);
2061
- --tds-radio-cursor:not-allowed;
2062
- }
2063
-
2064
- .tds-radio:has(input:disabled) input:checked{
2065
- --tds-radio-input-background-color:var(--t-form-background-color);
2066
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
2067
- }
2068
-
2069
- .tds-radio-description{
2070
- display:flex;
2071
- grid-area:2 / 2;
2072
- gap:var(--t-spacing-half);
2073
- align-items:flex-start;
2074
- margin:0;
2075
- font-size:var(--tds-radio-description-font-size);
2076
- line-height:var(--tds-radio-description-line-height);
2077
- color:var(--tds-radio-description-color);
2078
- cursor:text;
2079
- }
2080
-
2081
- .tds-radio--sm{
2082
- --tds-radio-line-height:1.35;
2083
- --tds-radio-input-size:var(--t-element-size-sm);
2084
- --tds-radio-font-size:var(--t-font-size-sm);
2085
- --tds-radio-description-font-size:var(--t-font-size-xs);
2086
- --tds-radio-description-line-height:1.3;
2087
- }
2088
-
2089
- .tds-input:has(textarea){
2090
- --tds-input-padding-block:6px;
2091
- --tds-input-resizer-size:var(--t-element-size-sm);
2092
- --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");
2093
- }
2094
-
2095
- @supports (x: attr(x type(*))){
2096
-
2097
- .tds-input:has(textarea){
2098
- --tds-input-min-height:calc((attr(rows type(<number>), 3) * 1lh) + (var(--tds-input-padding-block) * 2) + 2px);
2080
+ gap:var(--t-spacing-fourth) var(--tds-toggle-switch-column-gap);
2081
+ -webkit-user-select:none;
2082
+ -moz-user-select:none;
2083
+ user-select:none;
2099
2084
  }
2100
- }
2101
-
2102
- .tds-input.tds-textarea--resize-vertical textarea{
2103
- resize:vertical;
2104
- }
2105
2085
 
2106
- .tds-input.tds-textarea--resize-none textarea{
2107
- resize:none;
2108
- }
2086
+ .tds-toggle-switch input[type="checkbox"]{
2087
+ position:absolute;
2088
+ width:var(--tds-toggle-switch-track-width);
2089
+ height:var(--tds-toggle-switch-track-height);
2090
+ margin:0;
2091
+ -webkit-appearance:none;
2092
+ -moz-appearance:none;
2093
+ appearance:none;
2094
+ cursor:var(--tds-toggle-switch-cursor);
2095
+ outline:var(--tds-toggle-switch-track-outline);
2096
+ outline-offset:var(--t-focus-ring-offset);
2097
+ background-color:transparent;
2098
+ border:0;
2099
+ border-radius:var(--t-border-radius-round);
2100
+ }
2109
2101
 
2110
- .tds-input.tds-textarea--resize-auto textarea{
2111
- resize:vertical;
2102
+ :is(.tds-toggle-switch input[type="checkbox"]):focus-visible{
2103
+ --tds-toggle-switch-track-outline:var(--t-focus-ring-outline);
2112
2104
  }
2113
2105
 
2114
- @supports (field-sizing: content){
2115
- .tds-input.tds-textarea--resize-auto textarea{
2116
- field-sizing:content;
2117
- resize:none;
2118
- }
2119
- }
2106
+ .tds-toggle-switch label{
2107
+ display:inline-flex;
2108
+ grid-area:1 / 2;
2109
+ -moz-column-gap:var(--tds-toggle-switch-column-gap);
2110
+ column-gap:var(--tds-toggle-switch-column-gap);
2111
+ margin-top:-.09375em;
2112
+ font-size:var(--tds-toggle-switch-font-size);
2113
+ font-weight:var(--t-font-weight-normal);
2114
+ line-height:var(--tds-toggle-switch-line-height);
2115
+ color:var(--tds-toggle-switch-label-color);
2116
+ cursor:var(--tds-toggle-switch-cursor);
2117
+ }
2120
2118
 
2121
- .tds-input textarea{
2122
- --tds-input-scrollbar-thumb-color-default:var(--t-fill-color-neutral-040);
2123
- --tds-input-scrollbar-thumb-color-hidden:transparent;
2124
- --tds-input-scrollbar-thumb-color-hover:var(--t-fill-color-neutral-030);
2125
- --tds-input-scrollbar-thumb-color-thumb-hover:var(--t-fill-color-neutral-020);
2126
- --tds-input-scrollbar-thumb-color-thumb-active:var(--t-fill-color-neutral-010);
2127
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-default);
2128
- --tds-input-scrollbar-surface-color:rgba(0, 0, 0, 0);
2129
- --tds-input-scrollbar-thumb-border-radius:999px;
2130
- --tds-input-scrollbar-thumb-border-width:3px;
2131
- --tds-input-scrollbar-track-margin-block:.125rem;
2132
- scrollbar-color:initial;
2133
- transition-timing-function:var(--t-ease-in-out);
2134
- transition-duration:var(--t-duration-200);
2135
- transition-property:var(--tds-input-transition-property), --tds-input-scrollbar-thumb-color;
2136
- }
2119
+ .tds-toggle-switch:not(:has(input:disabled)):has(input:hover){
2120
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-hover);
2121
+ }
2137
2122
 
2138
- @media (pointer: fine){
2139
- :is(.tds-input textarea)::-webkit-scrollbar{
2140
- width:12px;
2141
- height:12px;
2142
- cursor:default;
2143
- }
2123
+ .tds-toggle-switch:has(input:checked){
2124
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on);
2125
+ --tds-toggle-switch-thumb-transform:translateX(calc(var(--tds-toggle-switch-track-width) - var(--tds-toggle-switch-thumb-size) - var(--t-spacing-half)));
2126
+ }
2144
2127
 
2145
- :is(.tds-input textarea)::-webkit-scrollbar-thumb{
2146
- cursor:default;
2147
- background:var(--tds-input-scrollbar-thumb-color);
2148
- background-clip:content-box;
2149
- border:var(--tds-input-scrollbar-thumb-border-width) solid var(--tds-input-scrollbar-surface-color);
2150
- border-radius:var(--tds-input-scrollbar-thumb-border-radius);
2128
+ .tds-toggle-switch:has(input:checked):not(:has(input:disabled)):has(input:hover){
2129
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on-hover);
2151
2130
  }
2152
2131
 
2153
- :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
2154
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
2155
- }
2132
+ .tds-toggle-switch:has(input:disabled){
2133
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-disabled);
2134
+ --tds-toggle-switch-label-color:var(--t-form-color-disabled);
2135
+ --tds-toggle-switch-description-color:var(--t-form-color-disabled);
2136
+ --tds-toggle-switch-cursor:not-allowed;
2137
+ }
2156
2138
 
2157
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
2158
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
2159
- }
2139
+ .tds-toggle-switch-track{
2140
+ position:relative;
2141
+ flex-shrink:0;
2142
+ width:var(--tds-toggle-switch-track-width);
2143
+ height:var(--tds-toggle-switch-track-height);
2144
+ background-color:var(--tds-toggle-switch-track-background-color);
2145
+ border-radius:var(--t-border-radius-round);
2146
+ transition:var(--tds-toggle-switch-track-transition);
2147
+ }
2160
2148
 
2161
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
2162
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
2163
- }
2149
+ .tds-toggle-switch-track::before{
2150
+ position:absolute;
2151
+ top:var(--t-spacing-fourth);
2152
+ left:var(--t-spacing-fourth);
2153
+ width:var(--tds-toggle-switch-thumb-size);
2154
+ height:var(--tds-toggle-switch-thumb-size);
2155
+ content:"";
2156
+ background-color:#fff;
2157
+ border-radius:var(--t-border-radius-round);
2158
+ transform:var(--tds-toggle-switch-thumb-transform);
2159
+ transition:var(--tds-toggle-switch-thumb-transition);
2160
+ }
2164
2161
 
2165
- :is(.tds-input textarea)::-webkit-scrollbar-corner{
2166
- background:var(--tds-input-scrollbar-surface-color);
2167
- }
2162
+ @media (prefers-reduced-motion: reduce){
2168
2163
 
2169
- :is(.tds-input textarea)::-webkit-resizer{
2170
- background:var(--tds-input-resizer-icon) no-repeat;
2171
- background-position:right bottom;
2172
- background-size:var(--tds-input-resizer-size) var(--tds-input-resizer-size);
2173
- }
2164
+ .tds-toggle-switch-track{
2165
+ --tds-toggle-switch-track-transition:none;
2166
+ --tds-toggle-switch-thumb-transition:none;
2167
+ }
2168
+ }
2174
2169
 
2175
- :is(.tds-input textarea)::-webkit-scrollbar-track{
2176
- margin-block:var(--tds-input-scrollbar-track-margin-block);
2177
- cursor:default;
2178
- }
2170
+ .tds-toggle-switch-description{
2171
+ display:flex;
2172
+ grid-area:2 / 2;
2173
+ align-items:flex-start;
2174
+ margin:0;
2175
+ font-size:var(--tds-toggle-switch-description-font-size);
2176
+ line-height:var(--tds-toggle-switch-description-line-height);
2177
+ color:var(--tds-toggle-switch-description-color);
2178
+ cursor:text;
2179
+ }
2179
2180
 
2180
- @supports (-moz-appearance: none){
2181
- :is(.tds-input textarea){
2182
- scrollbar-color:var(--tds-input-scrollbar-thumb-color-default) var(--tds-input-scrollbar-surface-color);
2183
- scrollbar-width:thin;
2184
- }
2181
+ .tds-toggle-switch--sm{
2182
+ --tds-toggle-switch-font-size:var(--t-font-size-sm);
2183
+ --tds-toggle-switch-line-height:1.35;
2184
+ --tds-toggle-switch-track-height:var(--t-element-size-lg);
2185
+ --tds-toggle-switch-thumb-size:var(--t-element-size-sm);
2186
+ --tds-toggle-switch-description-font-size:var(--t-font-size-xs);
2187
+ --tds-toggle-switch-description-line-height:1.3;
2188
+ }
2185
2189
 
2186
- @media (hover){
2187
- :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
2188
- scrollbar-color:var(--tds-input-scrollbar-thumb-color-hover) var(--tds-input-scrollbar-surface-color);
2189
- }
2190
- }
2191
- }
2192
- }
2190
+ .tds-toggle-switch--hide-label{
2191
+ --tds-toggle-switch-display:inline-flex;
2192
+ }
2193
2193
 
2194
2194
  .tds-radio-group{
2195
2195
  --tds-radio-group-font-size:var(--t-font-size-md);
@@ -2543,15 +2543,19 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
2543
2543
  opacity:0;
2544
2544
  }
2545
2545
 
2546
+ .tds-select:has(> button){
2547
+ anchor-scope:--tds-select-anchor;
2548
+ }
2549
+
2546
2550
  .tds-select:has( > button) > button{
2547
2551
  display:block;
2548
2552
  padding-inline-end:calc(var(--tds-select-caret-size) + var(--tds-select-caret-inline-offset) + .75ch);
2553
+ anchor-name:--tds-select-anchor;
2549
2554
  overflow:hidden;
2550
2555
  text-overflow:ellipsis;
2551
2556
  color:var(--tds-select-placeholder-color);
2552
2557
  white-space:nowrap;
2553
2558
  background-image:none;
2554
- anchor-name:--tds-select-anchor;
2555
2559
  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);
2556
2560
  -webkit-tap-highlight-color:transparent;
2557
2561
  }
@@ -2574,7 +2578,6 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
2574
2578
  }
2575
2579
 
2576
2580
  .tds-select:has( > button) [popover]{
2577
- position-anchor:--tds-select-anchor;
2578
2581
  inset:auto;
2579
2582
  inline-size:-moz-max-content;
2580
2583
  inline-size:max-content;
@@ -2584,6 +2587,7 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
2584
2587
  padding:var(--tds-select-dropdown-padding);
2585
2588
  margin-block:var(--tds-select-dropdown-margin-block);
2586
2589
  position-area:block-end span-inline-start;
2590
+ position-anchor:--tds-select-anchor;
2587
2591
  position-try-fallbacks:flip-block, flip-inline;
2588
2592
  overflow:auto;
2589
2593
  overflow-x:hidden;
@@ -3252,7 +3256,8 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
3252
3256
 
3253
3257
  .tds-btn--infield[data-disabled]{
3254
3258
  color:var(--tds-btn-color-disabled);
3255
- pointer-events:none;
3259
+ pointer-events:auto;
3260
+ cursor:default;
3256
3261
  background-color:var(--tds-btn-bg-disabled);
3257
3262
  border-color:var(--tds-btn-border-color-disabled);
3258
3263
  }
@@ -4160,6 +4165,131 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
4160
4165
  @media (prefers-color-scheme: dark){
4161
4166
  }
4162
4167
 
4168
+ .tds-dropdown-popover{
4169
+ min-inline-size:10rem;
4170
+ max-inline-size:24rem;
4171
+ padding:var(--t-spacing-1);
4172
+ overflow:auto;
4173
+ overscroll-behavior:none;
4174
+ -webkit-user-select:none;
4175
+ -moz-user-select:none;
4176
+ user-select:none;
4177
+ outline:0;
4178
+ scrollbar-color:#0004 var(--t-surface-color-card);
4179
+ scrollbar-width:thin;
4180
+ background:var(--t-surface-color-card);
4181
+ background-clip:padding-box;
4182
+ border:1px solid var(--t-border-color);
4183
+ border-radius:var(--t-border-radius);
4184
+ box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
4185
+ }
4186
+ .tds-dropdown-popover[data-entering]{
4187
+ animation:tds-dropdown-popover var(--t-duration-300) var(--t-ease-out);
4188
+ }
4189
+ .tds-dropdown-popover[data-exiting]{
4190
+ animation:tds-dropdown-popover var(--t-duration-200) var(--t-ease-in) reverse;
4191
+ }
4192
+ .tds-dropdown-popover[data-entering],.tds-dropdown-popover[data-exiting]{
4193
+ will-change:opacity, transform;
4194
+ }
4195
+ @keyframes tds-dropdown-popover{
4196
+ from{
4197
+ opacity:0;
4198
+ transform:translateY(-8px);
4199
+ }
4200
+ }
4201
+ @media (prefers-reduced-motion: reduce){
4202
+ .tds-dropdown-popover[data-entering],.tds-dropdown-popover[data-exiting]{
4203
+ animation:none;
4204
+ }
4205
+ }
4206
+ .tds-dropdown-popover [role="menu"]{
4207
+ outline:0;
4208
+ }
4209
+ .tds-dropdown-item{
4210
+ --tds-dropdown-item-color:var(--t-text-color);
4211
+
4212
+ display:flex;
4213
+ gap:var(--t-spacing-1);
4214
+ align-items:center;
4215
+ padding-block:var(--t-spacing-1);
4216
+ padding-inline:var(--t-spacing-2);
4217
+ font-size:1rem;
4218
+ color:var(--tds-dropdown-item-color);
4219
+ text-decoration:none;
4220
+ cursor:default;
4221
+ outline:0;
4222
+ border-radius:var(--t-border-radius);
4223
+ }
4224
+ .tds-dropdown-item[data-hovered]:not([data-disabled]),.tds-dropdown-item[data-focus-visible]{
4225
+ background:var(--t-fill-color-neutral-070);
4226
+ }
4227
+ .tds-dropdown-item[data-pressed]:not([data-disabled]){
4228
+ background:var(--t-fill-color-neutral-060);
4229
+ }
4230
+ .tds-dropdown-item[data-disabled]{
4231
+ --tds-dropdown-item-color:var(--t-form-color-disabled);
4232
+
4233
+ cursor:not-allowed;
4234
+ }
4235
+ .tds-dropdown-item--destructive{
4236
+ --tds-dropdown-item-color:var(--t-text-color-status-error);
4237
+ }
4238
+ .tds-dropdown-item--staff-only{
4239
+ --tds-dropdown-item-color:var(--t-fill-color-product-staff);
4240
+ }
4241
+ a.tds-dropdown-item:is(:hover, :active){
4242
+ color:var(--tds-dropdown-item-color);
4243
+ }
4244
+ .tds-dropdown-item [slot="prefix"],
4245
+ .tds-dropdown-item [slot="suffix"]{
4246
+ flex-shrink:0;
4247
+ }
4248
+ .tds-dropdown-item [slot="label"]{
4249
+ flex:1;
4250
+ min-width:0;
4251
+ overflow:hidden;
4252
+ text-overflow:ellipsis;
4253
+ white-space:nowrap;
4254
+ }
4255
+ .tds-dropdown-item [slot="description"]{
4256
+ font-size:var(--t-font-size-sm);
4257
+ color:var(--t-text-color-secondary);
4258
+ }
4259
+ .tds-dropdown-item:has([slot="description"]){
4260
+ display:grid;
4261
+ grid-template-areas:"prefix label suffix" "prefix description suffix";
4262
+ grid-template-columns:auto 1fr auto;
4263
+ }
4264
+ .tds-dropdown-item:has([slot="description"]) [slot="prefix"]{
4265
+ grid-area:prefix;
4266
+ }
4267
+ .tds-dropdown-item:has([slot="description"]) [slot="label"]{
4268
+ grid-area:label;
4269
+ }
4270
+ .tds-dropdown-item:has([slot="description"]) [slot="description"]{
4271
+ grid-area:description;
4272
+ }
4273
+ .tds-dropdown-item:has([slot="description"]) [slot="suffix"]{
4274
+ grid-area:suffix;
4275
+ }
4276
+ .tds-dropdown-section:not(:first-child){
4277
+ margin-block-start:var(--t-spacing-half);
4278
+ }
4279
+ .tds-dropdown-section-label{
4280
+ padding-block:var(--t-spacing-1);
4281
+ padding-inline:var(--t-spacing-1);
4282
+ font-size:var(--t-font-size-sm);
4283
+ font-weight:var(--t-font-weight-semibold);
4284
+ color:var(--t-text-color-secondary);
4285
+ }
4286
+ .tds-dropdown-separator{
4287
+ margin-block:var(--t-spacing-half);
4288
+ margin-inline:0;
4289
+ border:0;
4290
+ border-top:1px solid var(--t-border-color);
4291
+ }
4292
+
4163
4293
  .t-banner{
4164
4294
  --t-banner-font-size:var(--t-font-size-md);
4165
4295
  --t-banner-font-color:var(--t-text-color);