@planningcenter/tapestry 3.2.2-rc.12 → 3.2.2-rc.13

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.
@@ -261,585 +261,441 @@
261
261
  }
262
262
  }
263
263
 
264
- .tds-radio{
265
- --tds-radio-font-size:var(--t-font-size-md);
266
- --tds-radio-cursor:pointer;
267
- --tds-radio-line-height:1.4;
268
- --tds-radio-transition-property:border-width;
264
+ .tds-checkbox{
265
+ --tds-checkbox-font-size:var(--t-font-size-md);
266
+ --tds-checkbox-cursor:pointer;
267
+ --tds-checkbox-line-height:1.4;
268
+ --tds-checkbox-transition-property:background-color, border-color;
269
269
 
270
- --tds-radio-input-size:var(--t-element-size-md);
271
- --tds-radio-input-border-radius:var(--t-border-radius-round);
272
- --tds-radio-input-border-color:var(--t-form-border-color);
273
- --tds-radio-input-border-width:var(--t-form-border-width);
274
- --tds-radio-input-background-color:transparent;
270
+ --tds-checkbox-input-size:var(--t-element-size-md);
271
+ --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
272
+ --tds-checkbox-input-border-color:var(--t-form-border-color);
273
+ --tds-checkbox-input-background-color:transparent;
275
274
 
276
- --tds-radio-label-color:var(--t-form-color);
275
+ --tds-checkbox-input-icon:none;
276
+ --tds-checkbox-input-icon-visibility:hidden;
277
+ --tds-checkbox-input-icon-opacity:0;
278
+ --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
277
279
 
278
- --tds-radio-description-font-size:var(--t-font-size-sm);
279
- --tds-radio-description-line-height:1.35;
280
- --tds-radio-description-color:var(--t-text-color-secondary);
280
+ --tds-checkbox-label-color:var(--t-form-color);
281
+
282
+ --tds-checkbox-description-font-size:var(--t-font-size-sm);
283
+ --tds-checkbox-description-line-height:1.35;
284
+ --tds-checkbox-description-color:var(--t-text-color-secondary);
285
+ --tds-checkbox-description-invalid-icon-display:none;
281
286
 
282
287
  position:relative;
283
288
  display:inline-grid;
284
289
  grid-template-columns:auto;
285
290
  grid-auto-columns:1fr;
286
291
  gap:var(--t-spacing-fourth) var(--t-spacing-1);
287
- line-height:var(--tds-radio-line-height);
288
- cursor:var(--tds-radio-cursor);
292
+ line-height:var(--tds-checkbox-line-height);
293
+ cursor:var(--tds-checkbox-cursor);
289
294
  -webkit-user-select:none;
290
295
  -moz-user-select:none;
291
296
  user-select:none;
292
297
  }
293
298
 
294
- .tds-radio label{
299
+ .tds-checkbox label{
295
300
  grid-area:1 / 2;
296
- font-size:var(--tds-radio-font-size);
301
+ font-size:var(--tds-checkbox-font-size);
297
302
  font-weight:var(--t-font-weight-normal);
298
- color:var(--tds-radio-label-color);
299
- cursor:var(--tds-radio-cursor);
303
+ color:var(--tds-checkbox-label-color);
304
+ cursor:var(--tds-checkbox-cursor);
300
305
  }
301
306
 
302
- .tds-radio input[type="radio"]{
307
+ .tds-checkbox tds-indeterminate{
308
+ display:flex;
309
+ }
310
+
311
+ .tds-checkbox input[type="checkbox"]{
303
312
  position:relative;
304
313
  width:1em;
305
314
  height:1em;
306
315
  margin:calc((1lh - 1em) / 2) 0 0;
307
- font-size:var(--tds-radio-font-size);
316
+ font-size:var(--tds-checkbox-font-size);
308
317
  line-height:inherit;
309
318
  -webkit-appearance:none;
310
319
  -moz-appearance:none;
311
320
  appearance:none;
312
- cursor:var(--tds-radio-cursor);
313
- background-color:var(--tds-radio-input-background-color);
314
- border:var(--tds-radio-input-border-width) solid var(--tds-radio-input-border-color);
315
- border-radius:var(--tds-radio-input-border-radius);
321
+ cursor:var(--tds-checkbox-cursor);
322
+ background-color:var(--tds-checkbox-input-background-color);
323
+ border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
324
+ border-radius:var(--tds-checkbox-input-border-radius);
316
325
  transition-timing-function:var(--t-ease-in-out);
317
326
  transition-duration:var(--t-duration-200);
318
- transition-property:var(--tds-radio-transition-property);
327
+ transition-property:var(--tds-checkbox-transition-property);
319
328
  }
320
329
 
321
- :is(.tds-radio input[type="radio"]):hover:not(:disabled){
322
- --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
323
- --tds-radio-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
330
+ :is(.tds-checkbox input[type="checkbox"])::before{
331
+ position:absolute;
332
+ top:50%;
333
+ left:50%;
334
+ visibility:var(--tds-checkbox-input-icon-visibility);
335
+ width:100%;
336
+ height:100%;
337
+ content:"";
338
+ background-color:var(--tds-checkbox-input-icon-fill);
339
+ border-radius:var(--tds-checkbox-input-border-radius);
340
+ opacity:var(--tds-checkbox-input-icon-opacity);
341
+ -webkit-mask-image:var(--tds-checkbox-input-icon);
342
+ mask-image:var(--tds-checkbox-input-icon);
343
+ -webkit-mask-repeat:no-repeat;
344
+ mask-repeat:no-repeat;
345
+ -webkit-mask-size:contain;
346
+ mask-size:contain;
347
+ transform:translate(-50%, -50%);
324
348
  }
325
349
 
326
- :is(.tds-radio input[type="radio"]):focus-visible{
350
+ :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
351
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
352
+ --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
353
+ }
354
+
355
+ :is(.tds-checkbox input[type="checkbox"]):focus-visible{
327
356
  outline:var(--t-focus-ring-outline);
328
357
  outline-offset:var(--t-focus-ring-offset);
329
358
  }
330
359
 
331
- :is(.tds-radio input[type="radio"]):disabled{
360
+ :is(.tds-checkbox input[type="checkbox"]):disabled{
332
361
  pointer-events:none;
333
362
  }
334
363
 
335
364
  @media (prefers-reduced-motion: reduce){
336
365
 
337
- .tds-radio input[type="radio"]{
338
- --tds-radio-transition-property:none;
366
+ .tds-checkbox input[type="checkbox"]{
367
+ --tds-checkbox-transition-property:none;
339
368
  }
340
369
  }
341
370
 
342
- .tds-radio:has(input:checked){
343
- --tds-radio-input-background-color:var(--t-form-background-color);
344
- --tds-radio-input-border-color:var(--t-border-color-control-info);
345
- --tds-radio-input-border-width:4px;
371
+ .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
372
+ --tds-checkbox-input-background-color:var(--t-fill-color-control);
373
+ --tds-checkbox-input-border-color:var(--t-border-color-control-info);
374
+ --tds-checkbox-input-icon-visibility:visible;
375
+ --tds-checkbox-input-icon-opacity:1;
346
376
  }
347
377
 
348
- .tds-radio:has(input:checked) input:hover:not(:disabled){
349
- --tds-radio-input-background-color:var(--t-form-background-color);
350
- --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
378
+ :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
379
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
380
+ --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
351
381
  }
352
382
 
353
- .tds-radio:has(input:user-invalid){
354
- --tds-radio-input-border-color:var(--t-form-border-color-error);
383
+ .tds-checkbox:has(input:checked){
384
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
355
385
  }
356
386
 
357
- .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
358
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
359
- --tds-radio-input-background-color:var(--t-form-background-color-error);
387
+ .tds-checkbox:has(input:indeterminate){
388
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
389
+ }
390
+
391
+ .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
392
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
393
+ --tds-checkbox-description-color:var(--t-text-color-status-error);
394
+ --tds-checkbox-description-invalid-icon-display:inline-block;
395
+ }
396
+
397
+ :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
398
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
399
+ --tds-checkbox-input-background-color:var(--t-form-background-color-error);
360
400
  }
361
401
 
362
- .tds-radio:has(input:disabled){
363
- --tds-radio-input-background-color:var(--t-form-background-color-disabled);
364
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
402
+ :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:checked,:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:indeterminate{
403
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
404
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error);
405
+ }
365
406
 
366
- --tds-radio-label-color:var(--t-form-color-disabled);
367
- --tds-radio-description-color:var(--t-form-color-disabled);
368
- --tds-radio-cursor:not-allowed;
407
+ :is(:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:checked,:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:indeterminate):hover:not(:disabled){
408
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
409
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
410
+ }
411
+
412
+ .tds-checkbox:has(input:required) label::after{
413
+ margin-left:.25ch;
414
+ color:var(--t-text-color-status-error);
415
+ content:"*";
416
+ }
417
+
418
+ .tds-checkbox:has(input:disabled){
419
+ --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
420
+ --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
421
+
422
+ --tds-checkbox-label-color:var(--t-form-color-disabled);
423
+ --tds-checkbox-description-color:var(--t-form-color-disabled);
424
+ --tds-checkbox-cursor:not-allowed;
369
425
  }
370
426
 
371
- .tds-radio:has(input:disabled) input:checked{
372
- --tds-radio-input-background-color:var(--t-form-background-color);
373
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
427
+ .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
428
+ --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
374
429
  }
375
430
 
376
- .tds-radio-description{
431
+ .tds-checkbox-description{
377
432
  display:flex;
378
433
  grid-area:2 / 2;
379
434
  gap:var(--t-spacing-half);
380
435
  align-items:flex-start;
381
436
  margin:0;
382
- font-size:var(--tds-radio-description-font-size);
383
- line-height:var(--tds-radio-description-line-height);
384
- color:var(--tds-radio-description-color);
437
+ font-size:var(--tds-checkbox-description-font-size);
438
+ line-height:var(--tds-checkbox-description-line-height);
439
+ color:var(--tds-checkbox-description-color);
385
440
  cursor:text;
386
441
  }
387
442
 
388
- .tds-radio--sm{
389
- --tds-radio-line-height:1.35;
390
- --tds-radio-input-size:var(--t-element-size-sm);
391
- --tds-radio-font-size:var(--t-font-size-sm);
392
- --tds-radio-description-font-size:var(--t-font-size-xs);
393
- --tds-radio-description-line-height:1.3;
443
+ .tds-checkbox-description .tds-checkbox-description-invalid-icon{
444
+ display:var(--tds-checkbox-description-invalid-icon-display);
445
+ flex-shrink:0;
446
+ margin-top:calc(.5lh - .5em);
447
+ line-height:var(--tds-checkbox-description-line-height);
448
+ }
449
+
450
+ .tds-checkbox--sm{
451
+ --tds-checkbox-line-height:1.35;
452
+ --tds-checkbox-input-size:var(--t-element-size-sm);
453
+ --tds-checkbox-font-size:var(--t-font-size-sm);
454
+ --tds-checkbox-description-font-size:var(--t-font-size-xs);
455
+ --tds-checkbox-description-line-height:1.3;
394
456
  }
395
457
 
396
458
 
397
- @media (prefers-reduced-motion: no-preference){
459
+ :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{
460
+ -webkit-appearance:none;
461
+ appearance:none;
462
+ }
398
463
 
399
- :root{
400
- interpolate-size:allow-keywords;
401
- }
402
- }
464
+ [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
465
+ inline-size:1em;
466
+ block-size:2em;
467
+ }
403
468
 
404
- @layer tds-component{
405
- tds-sidenav,
406
- .tds-sidenav{
407
- --tds-sidenav-indent:12px;
408
- --tds-sidenav-item-depth:0;
469
+ @supports (field-sizing: content){
470
+ .tds-input--auto-width{
471
+ inline-size:-moz-fit-content;
472
+ inline-size:fit-content;
473
+ min-inline-size:min(100%, 122px);
474
+ }
409
475
 
410
- --tds-sidenav-item-transition:background-color var(--t-duration-200) var(--t-ease-in-out);
476
+ .tds-input--auto-width input{
477
+ field-sizing:content;
478
+ inline-size:auto;
479
+ }
480
+ }
411
481
 
412
- --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;
413
- --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;
414
- --tds-sidenav-collapse-closed-opacity:0;
415
- --tds-sidenav-collapse-open-opacity:1;
416
- --tds-sidenav-collapse-closed-transform:translateY(-8px);
417
- --tds-sidenav-collapse-open-transform:translateY(0);
482
+ .tds-radio-group{
483
+ --tds-radio-group-font-size:var(--t-font-size-md);
484
+ --tds-radio-group-line-height:1.4;
485
+ --tds-radio-group-gap:var(--t-spacing-1);
418
486
 
419
- --tds-sidenav-item-icon-size:var(--t-element-size-md);
420
- --tds-sidenav-item-background-hover:var(--t-fill-color-button-interaction-ghost-hover);
421
- --tds-sidenav-item-background-active:var(--t-fill-color-button-interaction-ghost-active);
422
- --tds-sidenav-item-background-selected:var(--t-fill-color-button-interaction-ghost-active);
487
+ --tds-radio-group-legend-margin-bottom:var(--tds-radio-group-gap);
423
488
 
424
- --tds-sidenav-item-nested-background-hover:var(--tds-sidenav-item-background-hover);
425
- --tds-sidenav-item-nested-background-active:var(--tds-sidenav-item-background-hover);
426
- --tds-sidenav-item-nested-background-selected:transparent;
489
+ --tds-radio-group-description-font-size:var(--t-font-size-sm);
490
+ --tds-radio-group-description-line-height:1.35;
491
+ --tds-radio-group-description-color:var(--t-text-color-secondary);
492
+ --tds-radio-group-description-invalid-icon-display:none;
493
+ display:flex;
494
+ flex-direction:column;
495
+ gap:var(--tds-radio-group-gap);
496
+ padding:0;
497
+ margin:0;
427
498
 
428
- --tds-sidenav-item-nested-border-color:var(--t-fill-color-neutral-050);
429
- --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
430
- --tds-sidenav-item-nested-border-color-selected:var(--t-border-color-status-info);
499
+ font-size:var(--tds-radio-group-font-size);
500
+ line-height:var(--tds-radio-group-line-height);
501
+ border:0;
502
+ }
431
503
 
432
- --tds-sidenav-item-icon-color:var(--t-icon-color-secondary);
433
- --tds-sidenav-item-icon-color-selected:var(--t-icon-color);
504
+ .tds-radio-group legend{
505
+ padding:0;
506
+ margin-bottom:var(--tds-radio-group-legend-margin-bottom);
434
507
  }
435
508
 
436
- @media (prefers-reduced-motion: reduce){
437
- tds-sidenav,
438
- .tds-sidenav{
439
- --tds-sidenav-collapse-transition-enter:none;
440
- --tds-sidenav-collapse-transition-exit:none;
441
- --tds-sidenav-collapse-closed-transform:none;
442
- --tds-sidenav-collapse-open-transform:none;
509
+ .tds-radio-group:has(.tds-radio-group-description){
510
+ --tds-radio-group-legend-margin-bottom:var(--t-spacing-fourth);
443
511
  }
444
- }
445
512
 
446
- .tds-sidenav--theme-gray{
447
- --tds-sidenav-item-background-hover:var(--t-fill-color-neutral-080);
448
- --tds-sidenav-item-background-active:var(--t-fill-color-neutral-070);
449
- --tds-sidenav-item-background-selected:var(--t-fill-color-neutral-050);
450
- --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
451
- --tds-sidenav-item-nested-border-color-selected:var(--t-fill-color-neutral-010);
513
+ .tds-radio-group[aria-invalid="true"]{
514
+ --tds-radio-group-description-color:var(--t-text-color-status-error);
515
+ --tds-radio-group-description-invalid-icon-display:inline-block;
452
516
  }
453
- }
454
517
 
455
- .tds-sidenav :where(nav,ul,.tds-sidenav-section){
456
- display:flex;
457
- }
518
+ .tds-radio-group[aria-invalid="true"] .tds-radio{
519
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
520
+ }
458
521
 
459
- .tds-sidenav :where(nav,ul,.tds-sidenav-section,.tds-sidenav-collapse){
460
- flex-direction:column;
461
- gap:var(--t-spacing-half);
462
- width:100%;
463
- }
522
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
523
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
524
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
525
+ }
464
526
 
465
- .tds-sidenav-section-list{
466
- width:100%;
467
- padding:0;
468
- margin:0;
469
- list-style:none;
527
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
528
+ --tds-radio-input-background-color:var(--t-form-background-color);
529
+ }
530
+
531
+ .tds-radio-group:has(input:required) legend::after{
532
+ margin-left:.25ch;
533
+ color:var(--t-text-color-status-error);
534
+ content:"*";
535
+ }
536
+
537
+ .tds-radio-group-fields{
538
+ display:flex;
539
+ flex-direction:column;
540
+ gap:var(--tds-radio-group-gap);
541
+ align-items:flex-start;
470
542
  }
471
543
 
472
- .tds-sidenav-section-header{
544
+ .tds-radio-group-description{
473
545
  display:flex;
474
- align-items:baseline;
475
- justify-content:space-between;
476
- padding-top:var(--t-spacing-2);
546
+ gap:var(--t-spacing-half);
547
+ align-items:flex-start;
548
+ margin:0;
549
+ font-size:var(--tds-radio-group-description-font-size);
550
+ line-height:var(--tds-radio-group-description-line-height);
551
+ color:var(--tds-radio-group-description-color);
552
+ cursor:text;
477
553
  }
478
554
 
479
- .tds-sidenav-section-header h2{
480
- margin:0;
481
- font-size:var(--t-font-size-sm);
482
- font-weight:var(--t-font-weight-semibold);
483
- line-height:1.35;
484
- color:var(--t-text-color-secondary);
485
- text-transform:uppercase;
555
+ .tds-radio-group-description .tds-radio-group-description-invalid-icon{
556
+ display:var(--tds-radio-group-description-invalid-icon-display);
557
+ flex-shrink:0;
558
+ margin-top:calc(.5lh - .5em);
559
+ line-height:var(--tds-radio-group-description-line-height);
486
560
  }
487
561
 
488
- .tds-sidenav-section:first-of-type .tds-sidenav-section-header{
489
- padding-top:0;
490
- }
562
+ .tds-radio-group--sm{
563
+ --tds-radio-group-line-height:1.35;
564
+ --tds-radio-group-font-size:var(--t-font-size-sm);
565
+ --tds-radio-group-description-font-size:var(--t-font-size-xs);
566
+ --tds-radio-group-description-line-height:1.3;
567
+ }
491
568
 
492
- .tds-sidenav-section-header [slot="label-actions"]{
493
- display:flex;
494
- gap:var(--t-spacing-half);
495
- align-items:center;
496
- }
569
+ .tds-radio{
570
+ --tds-radio-font-size:var(--t-font-size-md);
571
+ --tds-radio-cursor:pointer;
572
+ --tds-radio-line-height:1.4;
573
+ --tds-radio-transition-property:border-width;
497
574
 
498
- .tds-sidenav-section [slot="section-actions"]{
499
- display:flex;
500
- gap:12px;
501
- align-items:center;
502
- min-height:42px;
503
- padding:var(--t-spacing-1) 0;
504
- }
575
+ --tds-radio-input-size:var(--t-element-size-md);
576
+ --tds-radio-input-border-radius:var(--t-border-radius-round);
577
+ --tds-radio-input-border-color:var(--t-form-border-color);
578
+ --tds-radio-input-border-width:var(--t-form-border-width);
579
+ --tds-radio-input-background-color:transparent;
505
580
 
506
- .tds-sidenav-section-list,
507
- .tds-sidenav-item{
508
- width:100%;
509
- padding:0;
510
- margin:0;
581
+ --tds-radio-label-color:var(--t-form-color);
582
+
583
+ --tds-radio-description-font-size:var(--t-font-size-sm);
584
+ --tds-radio-description-line-height:1.35;
585
+ --tds-radio-description-color:var(--t-text-color-secondary);
586
+
587
+ position:relative;
588
+ display:inline-grid;
589
+ grid-template-columns:auto;
590
+ grid-auto-columns:1fr;
591
+ gap:var(--t-spacing-fourth) var(--t-spacing-1);
592
+ line-height:var(--tds-radio-line-height);
593
+ cursor:var(--tds-radio-cursor);
594
+ -webkit-user-select:none;
595
+ -moz-user-select:none;
596
+ user-select:none;
511
597
  }
512
598
 
513
- .tds-sidenav-item :is(a,button){
599
+ .tds-radio label{
600
+ grid-area:1 / 2;
601
+ font-size:var(--tds-radio-font-size);
602
+ font-weight:var(--t-font-weight-normal);
603
+ color:var(--tds-radio-label-color);
604
+ cursor:var(--tds-radio-cursor);
605
+ }
606
+
607
+ .tds-radio input[type="radio"]{
514
608
  position:relative;
515
- display:flex;
516
- gap:12px;
517
- align-items:center;
518
- width:100%;
519
- padding:12px;
520
- overflow:hidden;
521
- font-size:var(--t-font-size-sm);
522
- line-height:18px;
523
- color:var(--t-text-color-headline);
524
- white-space:nowrap;
525
- text-decoration:none;
609
+ width:1em;
610
+ height:1em;
611
+ margin:calc((1lh - 1em) / 2) 0 0;
612
+ font-size:var(--tds-radio-font-size);
613
+ line-height:inherit;
526
614
  -webkit-appearance:none;
527
615
  -moz-appearance:none;
528
616
  appearance:none;
529
- cursor:pointer;
530
- background-color:var(--tds-sidenav-item-background, transparent);
531
- border:0;
532
- border-radius:var(--t-border-radius);
533
- transition:var(--tds-sidenav-item-transition);
617
+ cursor:var(--tds-radio-cursor);
618
+ background-color:var(--tds-radio-input-background-color);
619
+ border:var(--tds-radio-input-border-width) solid var(--tds-radio-input-border-color);
620
+ border-radius:var(--tds-radio-input-border-radius);
621
+ transition-timing-function:var(--t-ease-in-out);
622
+ transition-duration:var(--t-duration-200);
623
+ transition-property:var(--tds-radio-transition-property);
534
624
  }
535
625
 
536
- :is(.tds-sidenav-item :is(a,button)):not(:has(.prefix,.suffix)),:is(.tds-sidenav-item :is(a,button)) :is(:not(.prefix,.suffix)){
537
- display:block;
538
- flex:1;
539
- overflow:hidden;
540
- text-overflow:ellipsis;
541
- text-align:left;
542
- white-space:nowrap;
543
- }
544
-
545
- :is(.tds-sidenav-item :is(a,button)):hover,:is(.tds-sidenav-item :is(a,button)):focus-visible{
546
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-hover);
547
- color:var(--t-text-color-headline);
548
- text-decoration:none;
626
+ :is(.tds-radio input[type="radio"]):hover:not(:disabled){
627
+ --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
628
+ --tds-radio-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
549
629
  }
550
630
 
551
- :is(.tds-sidenav-item :is(a,button)):active{
552
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-active);
631
+ :is(.tds-radio input[type="radio"]):focus-visible{
632
+ outline:var(--t-focus-ring-outline);
633
+ outline-offset:var(--t-focus-ring-offset);
553
634
  }
554
635
 
555
- :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]){
556
- overflow:hidden;
557
- color:var(--tds-sidenav-item-icon-color);
636
+ :is(.tds-radio input[type="radio"]):disabled{
637
+ pointer-events:none;
558
638
  }
559
639
 
560
- :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{
561
- display:block;
562
- width:var(--tds-sidenav-item-icon-size);
563
- height:var(--tds-sidenav-item-icon-size);
564
- }
565
-
566
- :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section{
567
- --tds-sidenav-indent:19px;
568
- }
640
+ @media (prefers-reduced-motion: reduce){
569
641
 
570
- [aria-expanded="true"]:is(.tds-sidenav-item :is(a,button)) + .tds-sidenav-section-list{
571
- visibility:visible;
572
- block-size:auto;
573
- opacity:1;
642
+ .tds-radio input[type="radio"]{
643
+ --tds-radio-transition-property:none;
644
+ }
574
645
  }
575
646
 
576
- .tds-sidenav-item.selected > :is(a,button),.tds-sidenav-item:has(.tds-sidenav-section):has(.selected) > :is(a,button){
577
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-selected);
578
- --tds-sidenav-item-icon-color:var(--tds-sidenav-item-icon-color-selected);
579
-
580
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-selected);
581
- font-weight:var(--t-font-weight-semibold);
647
+ .tds-radio:has(input:checked){
648
+ --tds-radio-input-background-color:var(--t-form-background-color);
649
+ --tds-radio-input-border-color:var(--t-border-color-control-info);
650
+ --tds-radio-input-border-width:4px;
582
651
  }
583
652
 
584
- .tds-sidenav-item:has(.tds-sidenav-section){
585
- display:flex;
586
- flex-direction:column;
587
- gap:var(--t-spacing-half);
588
- }
653
+ .tds-radio:has(input:checked) input:hover:not(:disabled){
654
+ --tds-radio-input-background-color:var(--t-form-background-color);
655
+ --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
656
+ }
589
657
 
590
- .tds-sidenav-item .tds-sidenav-section-list{
591
- --tds-sidenav-item-depth:1;
592
- gap:0;
658
+ .tds-radio:has(input:user-invalid){
659
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
593
660
  }
594
661
 
595
- .tds-sidenav-action--toggle + :is(.tds-sidenav-item .tds-sidenav-section-list){
596
- visibility:hidden;
597
- block-size:0;
598
- overflow-y:clip;
599
- opacity:0;
600
- transition:content-visibility var(--t-duration-400) allow-discrete, opacity var(--t-duration-400), block-size var(--t-duration-400);
662
+ .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
663
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
664
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
601
665
  }
602
666
 
603
- :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list{
604
- --tds-sidenav-item-depth:2;
605
- }
667
+ .tds-radio:has(input:disabled){
668
+ --tds-radio-input-background-color:var(--t-form-background-color-disabled);
669
+ --tds-radio-input-border-color:var(--t-form-border-color-disabled);
606
670
 
607
- :is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
608
- min-height:var(--t-element-size-2xl);
609
- padding-block:9px;
610
- padding-left:calc((var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth)) + var(--tds-sidenav-indent) + var(--t-spacing-fourth));
611
- line-height:1;
612
- background-color:transparent;
613
- }
614
-
615
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::before{
616
- position:absolute;
617
- top:0;
618
- bottom:0;
619
- left:calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
620
- width:2px;
621
- content:"";
622
- background-color:var(--tds-sidenav-item-nested-border-color);
623
- transition:var(--tds-sidenav-item-transition);
624
- }
625
-
626
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::after{
627
- position:absolute;
628
- inset:0 0 0 calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
629
- z-index:-1;
630
- height:100%;
631
- content:"";
632
- background-color:var(--tds-sidenav-item-nested-background);
633
- border-radius:0 var(--t-border-radius) var(--t-border-radius) 0;
634
- transition:var(--tds-sidenav-item-transition);
635
- }
636
-
637
- :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)){
638
- display:block;
639
- text-align:left;
640
- white-space:normal;
641
- }
642
-
643
- :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{
644
- --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-hover);
645
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-hover);
646
- }
647
-
648
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):active{
649
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-active);
650
- }
651
-
652
- .selected:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
653
- --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-selected);
654
- font-weight:var(--t-font-weight-medium);
655
- }
656
-
657
- .tds-sidenav-responsive-header{
658
- display:flex;
659
- gap:var(--t-spacing-2);
660
- align-items:center;
661
- width:100%;
662
- }
663
-
664
- .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle{
665
- order:0;
666
- }
667
-
668
- .tds-sidenav-responsive-header .tds-sidenav-responsive-header-label{
669
- flex:1;
670
- order:1;
671
- margin:0;
672
- font-size:var(--t-font-size-lg);
673
- font-weight:var(--t-font-weight-medium);
674
- color:var(--t-text-color-headline);
675
- }
676
-
677
- @media (max-width: 719px){
678
- .tds-sidenav-collapse{
679
- z-index:10001;
680
- display:none;
681
- max-width:min(448px, calc(100vw - 48px));
682
- padding:0;
683
- margin:12px 0;
684
- position-area:bottom span-right;
685
- overflow:hidden;
686
- outline:0;
687
- background:var(--t-surface-color-card);
688
- border:0;
689
- border-radius:6px;
690
- box-shadow:0 8px 20px 0 rgba(0, 0, 0, .25);
691
- opacity:var(--tds-sidenav-collapse-open-opacity);
692
- transform:var(--tds-sidenav-collapse-open-transform);
693
- transition:var(--tds-sidenav-collapse-transition-enter);
694
- will-change:transform;
695
- }
696
-
697
- .tds-sidenav-scroll-container{
698
- --webkit-overflow-scrolling:touch;
699
- display:block;
700
- width:100%;
701
- height:-moz-fit-content;
702
- height:fit-content;
703
- padding:var(--t-spacing-2);
704
- overflow-y:auto;
705
- }
706
-
707
- .tds-sidenav-item :is(a, button) :is(.prefix){
708
- display:none;
709
- }
710
- @supports selector(:popover-open){
711
- .tds-sidenav-collapse:popover-open{
712
- display:flex;
713
- }
714
-
715
- .tds-sidenav-collapse:not(:popover-open){
716
- opacity:var(--tds-sidenav-collapse-closed-opacity);
717
- transition:var(--tds-sidenav-collapse-transition-exit);
718
- }
719
-
720
- @starting-style{
721
- .tds-sidenav-collapse:popover-open{
722
- opacity:var(--tds-sidenav-collapse-closed-opacity);
723
- transform:var(--tds-sidenav-collapse-closed-transform);
724
- }
725
- }
726
- }
727
- @supports not selector(:popover-open){
728
- .tds-sidenav-collapse.\:popover-open{
729
- display:flex;
730
- }
731
-
732
- .tds-sidenav-collapse:not(.\:popover-open){
733
- opacity:var(--tds-sidenav-collapse-closed-opacity);
734
- transition:var(--tds-sidenav-collapse-transition-exit);
735
- }
736
- }
737
- }
738
-
739
- @media (min-width: 720px){
740
- .tds-sidenav-responsive-header{
741
- display:none;
742
- }
743
- }
744
-
745
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
746
- display:none;
747
- }
748
-
749
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
750
- display:block;
751
- }
752
-
753
- tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
754
- display:flex;
755
- flex-direction:column;
756
- }
757
-
758
- .tds-radio-group{
759
- --tds-radio-group-font-size:var(--t-font-size-md);
760
- --tds-radio-group-line-height:1.4;
761
- --tds-radio-group-gap:var(--t-spacing-1);
762
-
763
- --tds-radio-group-legend-margin-bottom:var(--tds-radio-group-gap);
764
-
765
- --tds-radio-group-description-font-size:var(--t-font-size-sm);
766
- --tds-radio-group-description-line-height:1.35;
767
- --tds-radio-group-description-color:var(--t-text-color-secondary);
768
- --tds-radio-group-description-invalid-icon-display:none;
769
- display:flex;
770
- flex-direction:column;
771
- gap:var(--tds-radio-group-gap);
772
- padding:0;
773
- margin:0;
774
-
775
- font-size:var(--tds-radio-group-font-size);
776
- line-height:var(--tds-radio-group-line-height);
777
- border:0;
778
- }
779
-
780
- .tds-radio-group legend{
781
- padding:0;
782
- margin-bottom:var(--tds-radio-group-legend-margin-bottom);
783
- }
784
-
785
- .tds-radio-group:has(.tds-radio-group-description){
786
- --tds-radio-group-legend-margin-bottom:var(--t-spacing-fourth);
787
- }
788
-
789
- .tds-radio-group[aria-invalid="true"]{
790
- --tds-radio-group-description-color:var(--t-text-color-status-error);
791
- --tds-radio-group-description-invalid-icon-display:inline-block;
671
+ --tds-radio-label-color:var(--t-form-color-disabled);
672
+ --tds-radio-description-color:var(--t-form-color-disabled);
673
+ --tds-radio-cursor:not-allowed;
792
674
  }
793
675
 
794
- .tds-radio-group[aria-invalid="true"] .tds-radio{
795
- --tds-radio-input-border-color:var(--t-form-border-color-error);
796
- }
797
-
798
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
799
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
800
- --tds-radio-input-background-color:var(--t-form-background-color-error);
801
- }
802
-
803
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
804
- --tds-radio-input-background-color:var(--t-form-background-color);
805
- }
806
-
807
- .tds-radio-group:has(input:required) legend::after{
808
- margin-left:.25ch;
809
- color:var(--t-text-color-status-error);
810
- content:"*";
676
+ .tds-radio:has(input:disabled) input:checked{
677
+ --tds-radio-input-background-color:var(--t-form-background-color);
678
+ --tds-radio-input-border-color:var(--t-form-border-color-disabled);
811
679
  }
812
680
 
813
- .tds-radio-group-fields{
814
- display:flex;
815
- flex-direction:column;
816
- gap:var(--tds-radio-group-gap);
817
- align-items:flex-start;
818
- }
819
-
820
- .tds-radio-group-description{
681
+ .tds-radio-description{
821
682
  display:flex;
683
+ grid-area:2 / 2;
822
684
  gap:var(--t-spacing-half);
823
685
  align-items:flex-start;
824
686
  margin:0;
825
- font-size:var(--tds-radio-group-description-font-size);
826
- line-height:var(--tds-radio-group-description-line-height);
827
- color:var(--tds-radio-group-description-color);
687
+ font-size:var(--tds-radio-description-font-size);
688
+ line-height:var(--tds-radio-description-line-height);
689
+ color:var(--tds-radio-description-color);
828
690
  cursor:text;
829
691
  }
830
692
 
831
- .tds-radio-group-description .tds-radio-group-description-invalid-icon{
832
- display:var(--tds-radio-group-description-invalid-icon-display);
833
- flex-shrink:0;
834
- margin-top:calc(.5lh - .5em);
835
- line-height:var(--tds-radio-group-description-line-height);
836
- }
837
-
838
- .tds-radio-group--sm{
839
- --tds-radio-group-line-height:1.35;
840
- --tds-radio-group-font-size:var(--t-font-size-sm);
841
- --tds-radio-group-description-font-size:var(--t-font-size-xs);
842
- --tds-radio-group-description-line-height:1.3;
693
+ .tds-radio--sm{
694
+ --tds-radio-line-height:1.35;
695
+ --tds-radio-input-size:var(--t-element-size-sm);
696
+ --tds-radio-font-size:var(--t-font-size-sm);
697
+ --tds-radio-description-font-size:var(--t-font-size-xs);
698
+ --tds-radio-description-line-height:1.3;
843
699
  }
844
700
 
845
701
  .tds-toggle-switch{
@@ -983,224 +839,6 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
983
839
  --tds-toggle-switch-display:inline-flex;
984
840
  }
985
841
 
986
- .tds-checkbox{
987
- --tds-checkbox-font-size:var(--t-font-size-md);
988
- --tds-checkbox-cursor:pointer;
989
- --tds-checkbox-line-height:1.4;
990
- --tds-checkbox-transition-property:background-color, border-color;
991
-
992
- --tds-checkbox-input-size:var(--t-element-size-md);
993
- --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
994
- --tds-checkbox-input-border-color:var(--t-form-border-color);
995
- --tds-checkbox-input-background-color:transparent;
996
-
997
- --tds-checkbox-input-icon:none;
998
- --tds-checkbox-input-icon-visibility:hidden;
999
- --tds-checkbox-input-icon-opacity:0;
1000
- --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
1001
-
1002
- --tds-checkbox-label-color:var(--t-form-color);
1003
-
1004
- --tds-checkbox-description-font-size:var(--t-font-size-sm);
1005
- --tds-checkbox-description-line-height:1.35;
1006
- --tds-checkbox-description-color:var(--t-text-color-secondary);
1007
- --tds-checkbox-description-invalid-icon-display:none;
1008
-
1009
- position:relative;
1010
- display:inline-grid;
1011
- grid-template-columns:auto;
1012
- grid-auto-columns:1fr;
1013
- gap:var(--t-spacing-fourth) var(--t-spacing-1);
1014
- line-height:var(--tds-checkbox-line-height);
1015
- cursor:var(--tds-checkbox-cursor);
1016
- -webkit-user-select:none;
1017
- -moz-user-select:none;
1018
- user-select:none;
1019
- }
1020
-
1021
- .tds-checkbox label{
1022
- grid-area:1 / 2;
1023
- font-size:var(--tds-checkbox-font-size);
1024
- font-weight:var(--t-font-weight-normal);
1025
- color:var(--tds-checkbox-label-color);
1026
- cursor:var(--tds-checkbox-cursor);
1027
- }
1028
-
1029
- .tds-checkbox tds-indeterminate{
1030
- display:flex;
1031
- }
1032
-
1033
- .tds-checkbox input[type="checkbox"]{
1034
- position:relative;
1035
- width:1em;
1036
- height:1em;
1037
- margin:calc((1lh - 1em) / 2) 0 0;
1038
- font-size:var(--tds-checkbox-font-size);
1039
- line-height:inherit;
1040
- -webkit-appearance:none;
1041
- -moz-appearance:none;
1042
- appearance:none;
1043
- cursor:var(--tds-checkbox-cursor);
1044
- background-color:var(--tds-checkbox-input-background-color);
1045
- border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
1046
- border-radius:var(--tds-checkbox-input-border-radius);
1047
- transition-timing-function:var(--t-ease-in-out);
1048
- transition-duration:var(--t-duration-200);
1049
- transition-property:var(--tds-checkbox-transition-property);
1050
- }
1051
-
1052
- :is(.tds-checkbox input[type="checkbox"])::before{
1053
- position:absolute;
1054
- top:50%;
1055
- left:50%;
1056
- visibility:var(--tds-checkbox-input-icon-visibility);
1057
- width:100%;
1058
- height:100%;
1059
- content:"";
1060
- background-color:var(--tds-checkbox-input-icon-fill);
1061
- border-radius:var(--tds-checkbox-input-border-radius);
1062
- opacity:var(--tds-checkbox-input-icon-opacity);
1063
- -webkit-mask-image:var(--tds-checkbox-input-icon);
1064
- mask-image:var(--tds-checkbox-input-icon);
1065
- -webkit-mask-repeat:no-repeat;
1066
- mask-repeat:no-repeat;
1067
- -webkit-mask-size:contain;
1068
- mask-size:contain;
1069
- transform:translate(-50%, -50%);
1070
- }
1071
-
1072
- :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
1073
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
1074
- --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
1075
- }
1076
-
1077
- :is(.tds-checkbox input[type="checkbox"]):focus-visible{
1078
- outline:var(--t-focus-ring-outline);
1079
- outline-offset:var(--t-focus-ring-offset);
1080
- }
1081
-
1082
- :is(.tds-checkbox input[type="checkbox"]):disabled{
1083
- pointer-events:none;
1084
- }
1085
-
1086
- @media (prefers-reduced-motion: reduce){
1087
-
1088
- .tds-checkbox input[type="checkbox"]{
1089
- --tds-checkbox-transition-property:none;
1090
- }
1091
- }
1092
-
1093
- .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
1094
- --tds-checkbox-input-background-color:var(--t-fill-color-control);
1095
- --tds-checkbox-input-border-color:var(--t-border-color-control-info);
1096
- --tds-checkbox-input-icon-visibility:visible;
1097
- --tds-checkbox-input-icon-opacity:1;
1098
- }
1099
-
1100
- :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
1101
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
1102
- --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
1103
- }
1104
-
1105
- .tds-checkbox:has(input:checked){
1106
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
1107
- }
1108
-
1109
- .tds-checkbox:has(input:indeterminate){
1110
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
1111
- }
1112
-
1113
- .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
1114
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1115
- --tds-checkbox-description-color:var(--t-text-color-status-error);
1116
- --tds-checkbox-description-invalid-icon-display:inline-block;
1117
- }
1118
-
1119
- :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
1120
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1121
- --tds-checkbox-input-background-color:var(--t-form-background-color-error);
1122
- }
1123
-
1124
- :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{
1125
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1126
- --tds-checkbox-input-background-color:var(--t-form-border-color-error);
1127
- }
1128
-
1129
- :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){
1130
- --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
1131
- --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
1132
- }
1133
-
1134
- .tds-checkbox:has(input:required) label::after{
1135
- margin-left:.25ch;
1136
- color:var(--t-text-color-status-error);
1137
- content:"*";
1138
- }
1139
-
1140
- .tds-checkbox:has(input:disabled){
1141
- --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
1142
- --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
1143
-
1144
- --tds-checkbox-label-color:var(--t-form-color-disabled);
1145
- --tds-checkbox-description-color:var(--t-form-color-disabled);
1146
- --tds-checkbox-cursor:not-allowed;
1147
- }
1148
-
1149
- .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
1150
- --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
1151
- }
1152
-
1153
- .tds-checkbox-description{
1154
- display:flex;
1155
- grid-area:2 / 2;
1156
- gap:var(--t-spacing-half);
1157
- align-items:flex-start;
1158
- margin:0;
1159
- font-size:var(--tds-checkbox-description-font-size);
1160
- line-height:var(--tds-checkbox-description-line-height);
1161
- color:var(--tds-checkbox-description-color);
1162
- cursor:text;
1163
- }
1164
-
1165
- .tds-checkbox-description .tds-checkbox-description-invalid-icon{
1166
- display:var(--tds-checkbox-description-invalid-icon-display);
1167
- flex-shrink:0;
1168
- margin-top:calc(.5lh - .5em);
1169
- line-height:var(--tds-checkbox-description-line-height);
1170
- }
1171
-
1172
- .tds-checkbox--sm{
1173
- --tds-checkbox-line-height:1.35;
1174
- --tds-checkbox-input-size:var(--t-element-size-sm);
1175
- --tds-checkbox-font-size:var(--t-font-size-sm);
1176
- --tds-checkbox-description-font-size:var(--t-font-size-xs);
1177
- --tds-checkbox-description-line-height:1.3;
1178
- }
1179
-
1180
-
1181
- :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{
1182
- -webkit-appearance:none;
1183
- appearance:none;
1184
- }
1185
-
1186
- [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
1187
- inline-size:1em;
1188
- block-size:2em;
1189
- }
1190
-
1191
- @supports (field-sizing: content){
1192
- .tds-input--auto-width{
1193
- inline-size:-moz-fit-content;
1194
- inline-size:fit-content;
1195
- min-inline-size:min(100%, 122px);
1196
- }
1197
-
1198
- .tds-input--auto-width input{
1199
- field-sizing:content;
1200
- inline-size:auto;
1201
- }
1202
- }
1203
-
1204
842
  .tds-select{
1205
843
  --tds-select-border-color:var(--t-form-border-color);
1206
844
  --tds-select-border-color-hover:var(--t-form-border-color-hover);
@@ -1699,46 +1337,408 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1699
1337
  border-radius:var(--tds-input-scrollbar-thumb-border-radius);
1700
1338
  }
1701
1339
 
1702
- :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1703
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
1340
+ :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1341
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
1342
+ }
1343
+
1344
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
1345
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
1346
+ }
1347
+
1348
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
1349
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
1350
+ }
1351
+
1352
+ :is(.tds-input textarea)::-webkit-scrollbar-corner{
1353
+ background:var(--tds-input-scrollbar-surface-color);
1354
+ }
1355
+
1356
+ :is(.tds-input textarea)::-webkit-resizer{
1357
+ background:var(--tds-input-resizer-icon) no-repeat;
1358
+ background-position:right bottom;
1359
+ background-size:var(--tds-input-resizer-size) var(--tds-input-resizer-size);
1360
+ }
1361
+
1362
+ :is(.tds-input textarea)::-webkit-scrollbar-track{
1363
+ margin-block:var(--tds-input-scrollbar-track-margin-block);
1364
+ cursor:default;
1365
+ }
1366
+
1367
+ @supports (-moz-appearance: none){
1368
+ :is(.tds-input textarea){
1369
+ scrollbar-color:var(--tds-input-scrollbar-thumb-color-default) var(--tds-input-scrollbar-surface-color);
1370
+ scrollbar-width:thin;
1371
+ }
1372
+
1373
+ @media (hover){
1374
+ :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1375
+ scrollbar-color:var(--tds-input-scrollbar-thumb-color-hover) var(--tds-input-scrollbar-surface-color);
1376
+ }
1377
+ }
1378
+ }
1379
+ }
1380
+
1381
+
1382
+ @media (prefers-reduced-motion: no-preference){
1383
+
1384
+ :root{
1385
+ interpolate-size:allow-keywords;
1386
+ }
1387
+ }
1388
+
1389
+ @layer tds-component{
1390
+ tds-sidenav,
1391
+ .tds-sidenav{
1392
+ --tds-sidenav-indent:12px;
1393
+ --tds-sidenav-item-depth:0;
1394
+
1395
+ --tds-sidenav-item-transition:background-color var(--t-duration-200) var(--t-ease-in-out);
1396
+
1397
+ --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;
1398
+ --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;
1399
+ --tds-sidenav-collapse-closed-opacity:0;
1400
+ --tds-sidenav-collapse-open-opacity:1;
1401
+ --tds-sidenav-collapse-closed-transform:translateY(-8px);
1402
+ --tds-sidenav-collapse-open-transform:translateY(0);
1403
+
1404
+ --tds-sidenav-item-icon-size:var(--t-element-size-md);
1405
+ --tds-sidenav-item-background-hover:var(--t-fill-color-button-interaction-ghost-hover);
1406
+ --tds-sidenav-item-background-active:var(--t-fill-color-button-interaction-ghost-active);
1407
+ --tds-sidenav-item-background-selected:var(--t-fill-color-button-interaction-ghost-active);
1408
+
1409
+ --tds-sidenav-item-nested-background-hover:var(--tds-sidenav-item-background-hover);
1410
+ --tds-sidenav-item-nested-background-active:var(--tds-sidenav-item-background-hover);
1411
+ --tds-sidenav-item-nested-background-selected:transparent;
1412
+
1413
+ --tds-sidenav-item-nested-border-color:var(--t-fill-color-neutral-050);
1414
+ --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
1415
+ --tds-sidenav-item-nested-border-color-selected:var(--t-border-color-status-info);
1416
+
1417
+ --tds-sidenav-item-icon-color:var(--t-icon-color-secondary);
1418
+ --tds-sidenav-item-icon-color-selected:var(--t-icon-color);
1419
+ }
1420
+
1421
+ @media (prefers-reduced-motion: reduce){
1422
+ tds-sidenav,
1423
+ .tds-sidenav{
1424
+ --tds-sidenav-collapse-transition-enter:none;
1425
+ --tds-sidenav-collapse-transition-exit:none;
1426
+ --tds-sidenav-collapse-closed-transform:none;
1427
+ --tds-sidenav-collapse-open-transform:none;
1428
+ }
1429
+ }
1430
+
1431
+ .tds-sidenav--theme-gray{
1432
+ --tds-sidenav-item-background-hover:var(--t-fill-color-neutral-080);
1433
+ --tds-sidenav-item-background-active:var(--t-fill-color-neutral-070);
1434
+ --tds-sidenav-item-background-selected:var(--t-fill-color-neutral-050);
1435
+ --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
1436
+ --tds-sidenav-item-nested-border-color-selected:var(--t-fill-color-neutral-010);
1437
+ }
1438
+ }
1439
+
1440
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section){
1441
+ display:flex;
1442
+ }
1443
+
1444
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section,.tds-sidenav-collapse){
1445
+ flex-direction:column;
1446
+ gap:var(--t-spacing-half);
1447
+ width:100%;
1448
+ }
1449
+
1450
+ .tds-sidenav-section-list{
1451
+ width:100%;
1452
+ padding:0;
1453
+ margin:0;
1454
+ list-style:none;
1455
+ }
1456
+
1457
+ .tds-sidenav-section-header{
1458
+ display:flex;
1459
+ align-items:baseline;
1460
+ justify-content:space-between;
1461
+ padding-top:var(--t-spacing-2);
1462
+ }
1463
+
1464
+ .tds-sidenav-section-header h2{
1465
+ margin:0;
1466
+ font-size:var(--t-font-size-sm);
1467
+ font-weight:var(--t-font-weight-semibold);
1468
+ line-height:1.35;
1469
+ color:var(--t-text-color-secondary);
1470
+ text-transform:uppercase;
1471
+ }
1472
+
1473
+ .tds-sidenav-section:first-of-type .tds-sidenav-section-header{
1474
+ padding-top:0;
1475
+ }
1476
+
1477
+ .tds-sidenav-section-header [slot="label-actions"]{
1478
+ display:flex;
1479
+ gap:var(--t-spacing-half);
1480
+ align-items:center;
1481
+ }
1482
+
1483
+ .tds-sidenav-section [slot="section-actions"]{
1484
+ display:flex;
1485
+ gap:12px;
1486
+ align-items:center;
1487
+ min-height:42px;
1488
+ padding:var(--t-spacing-1) 0;
1489
+ }
1490
+
1491
+ .tds-sidenav-section-list,
1492
+ .tds-sidenav-item{
1493
+ width:100%;
1494
+ padding:0;
1495
+ margin:0;
1496
+ }
1497
+
1498
+ .tds-sidenav-item :is(a,button){
1499
+ position:relative;
1500
+ display:flex;
1501
+ gap:12px;
1502
+ align-items:center;
1503
+ width:100%;
1504
+ padding:12px;
1505
+ overflow:hidden;
1506
+ font-size:var(--t-font-size-sm);
1507
+ line-height:18px;
1508
+ color:var(--t-text-color-headline);
1509
+ white-space:nowrap;
1510
+ text-decoration:none;
1511
+ -webkit-appearance:none;
1512
+ -moz-appearance:none;
1513
+ appearance:none;
1514
+ cursor:pointer;
1515
+ background-color:var(--tds-sidenav-item-background, transparent);
1516
+ border:0;
1517
+ border-radius:var(--t-border-radius);
1518
+ transition:var(--tds-sidenav-item-transition);
1519
+ }
1520
+
1521
+ :is(.tds-sidenav-item :is(a,button)):not(:has(.prefix,.suffix)),:is(.tds-sidenav-item :is(a,button)) :is(:not(.prefix,.suffix)){
1522
+ display:block;
1523
+ flex:1;
1524
+ overflow:hidden;
1525
+ text-overflow:ellipsis;
1526
+ text-align:left;
1527
+ white-space:nowrap;
1528
+ }
1529
+
1530
+ :is(.tds-sidenav-item :is(a,button)):hover,:is(.tds-sidenav-item :is(a,button)):focus-visible{
1531
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-hover);
1532
+ color:var(--t-text-color-headline);
1533
+ text-decoration:none;
1534
+ }
1535
+
1536
+ :is(.tds-sidenav-item :is(a,button)):active{
1537
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-active);
1538
+ }
1539
+
1540
+ :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]){
1541
+ overflow:hidden;
1542
+ color:var(--tds-sidenav-item-icon-color);
1543
+ }
1544
+
1545
+ :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{
1546
+ display:block;
1547
+ width:var(--tds-sidenav-item-icon-size);
1548
+ height:var(--tds-sidenav-item-icon-size);
1549
+ }
1550
+
1551
+ :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section{
1552
+ --tds-sidenav-indent:19px;
1553
+ }
1554
+
1555
+ [aria-expanded="true"]:is(.tds-sidenav-item :is(a,button)) + .tds-sidenav-section-list{
1556
+ visibility:visible;
1557
+ block-size:auto;
1558
+ opacity:1;
1559
+ }
1560
+
1561
+ .tds-sidenav-item.selected > :is(a,button),.tds-sidenav-item:has(.tds-sidenav-section):has(.selected) > :is(a,button){
1562
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-selected);
1563
+ --tds-sidenav-item-icon-color:var(--tds-sidenav-item-icon-color-selected);
1564
+
1565
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-selected);
1566
+ font-weight:var(--t-font-weight-semibold);
1567
+ }
1568
+
1569
+ .tds-sidenav-item:has(.tds-sidenav-section){
1570
+ display:flex;
1571
+ flex-direction:column;
1572
+ gap:var(--t-spacing-half);
1573
+ }
1574
+
1575
+ .tds-sidenav-item .tds-sidenav-section-list{
1576
+ --tds-sidenav-item-depth:1;
1577
+ gap:0;
1578
+ }
1579
+
1580
+ .tds-sidenav-action--toggle + :is(.tds-sidenav-item .tds-sidenav-section-list){
1581
+ visibility:hidden;
1582
+ block-size:0;
1583
+ overflow-y:clip;
1584
+ opacity:0;
1585
+ transition:content-visibility var(--t-duration-400) allow-discrete, opacity var(--t-duration-400), block-size var(--t-duration-400);
1586
+ }
1587
+
1588
+ :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list{
1589
+ --tds-sidenav-item-depth:2;
1590
+ }
1591
+
1592
+ :is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
1593
+ min-height:var(--t-element-size-2xl);
1594
+ padding-block:9px;
1595
+ padding-left:calc((var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth)) + var(--tds-sidenav-indent) + var(--t-spacing-fourth));
1596
+ line-height:1;
1597
+ background-color:transparent;
1598
+ }
1599
+
1600
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::before{
1601
+ position:absolute;
1602
+ top:0;
1603
+ bottom:0;
1604
+ left:calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
1605
+ width:2px;
1606
+ content:"";
1607
+ background-color:var(--tds-sidenav-item-nested-border-color);
1608
+ transition:var(--tds-sidenav-item-transition);
1609
+ }
1610
+
1611
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::after{
1612
+ position:absolute;
1613
+ inset:0 0 0 calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
1614
+ z-index:-1;
1615
+ height:100%;
1616
+ content:"";
1617
+ background-color:var(--tds-sidenav-item-nested-background);
1618
+ border-radius:0 var(--t-border-radius) var(--t-border-radius) 0;
1619
+ transition:var(--tds-sidenav-item-transition);
1620
+ }
1621
+
1622
+ :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)){
1623
+ display:block;
1624
+ text-align:left;
1625
+ white-space:normal;
1626
+ }
1627
+
1628
+ :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{
1629
+ --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-hover);
1630
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-hover);
1631
+ }
1632
+
1633
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):active{
1634
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-active);
1635
+ }
1636
+
1637
+ .selected:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
1638
+ --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-selected);
1639
+ font-weight:var(--t-font-weight-medium);
1640
+ }
1641
+
1642
+ .tds-sidenav-responsive-header{
1643
+ display:flex;
1644
+ gap:var(--t-spacing-2);
1645
+ align-items:center;
1646
+ width:100%;
1647
+ }
1648
+
1649
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle{
1650
+ order:0;
1651
+ }
1652
+
1653
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-label{
1654
+ flex:1;
1655
+ order:1;
1656
+ margin:0;
1657
+ font-size:var(--t-font-size-lg);
1658
+ font-weight:var(--t-font-weight-medium);
1659
+ color:var(--t-text-color-headline);
1660
+ }
1661
+
1662
+ @media (max-width: 719px){
1663
+ .tds-sidenav-collapse{
1664
+ z-index:10001;
1665
+ display:none;
1666
+ max-width:min(448px, calc(100vw - 48px));
1667
+ padding:0;
1668
+ margin:12px 0;
1669
+ position-area:bottom span-right;
1670
+ overflow:hidden;
1671
+ outline:0;
1672
+ background:var(--t-surface-color-card);
1673
+ border:0;
1674
+ border-radius:6px;
1675
+ box-shadow:0 8px 20px 0 rgba(0, 0, 0, .25);
1676
+ opacity:var(--tds-sidenav-collapse-open-opacity);
1677
+ transform:var(--tds-sidenav-collapse-open-transform);
1678
+ transition:var(--tds-sidenav-collapse-transition-enter);
1679
+ will-change:transform;
1680
+ }
1681
+
1682
+ .tds-sidenav-scroll-container{
1683
+ --webkit-overflow-scrolling:touch;
1684
+ display:block;
1685
+ width:100%;
1686
+ height:-moz-fit-content;
1687
+ height:fit-content;
1688
+ padding:var(--t-spacing-2);
1689
+ overflow-y:auto;
1690
+ }
1691
+
1692
+ .tds-sidenav-item :is(a, button) :is(.prefix){
1693
+ display:none;
1694
+ }
1695
+ @supports selector(:popover-open){
1696
+ .tds-sidenav-collapse:popover-open{
1697
+ display:flex;
1698
+ }
1699
+
1700
+ .tds-sidenav-collapse:not(:popover-open){
1701
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
1702
+ transition:var(--tds-sidenav-collapse-transition-exit);
1704
1703
  }
1705
1704
 
1706
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
1707
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
1705
+ @starting-style{
1706
+ .tds-sidenav-collapse:popover-open{
1707
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
1708
+ transform:var(--tds-sidenav-collapse-closed-transform);
1709
+ }
1708
1710
  }
1709
-
1710
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
1711
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
1711
+ }
1712
+ @supports not selector(:popover-open){
1713
+ .tds-sidenav-collapse.\:popover-open{
1714
+ display:flex;
1712
1715
  }
1713
1716
 
1714
- :is(.tds-input textarea)::-webkit-scrollbar-corner{
1715
- background:var(--tds-input-scrollbar-surface-color);
1717
+ .tds-sidenav-collapse:not(.\:popover-open){
1718
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
1719
+ transition:var(--tds-sidenav-collapse-transition-exit);
1716
1720
  }
1721
+ }
1722
+ }
1717
1723
 
1718
- :is(.tds-input textarea)::-webkit-resizer{
1719
- background:var(--tds-input-resizer-icon) no-repeat;
1720
- background-position:right bottom;
1721
- background-size:var(--tds-input-resizer-size) var(--tds-input-resizer-size);
1722
- }
1724
+ @media (min-width: 720px){
1725
+ .tds-sidenav-responsive-header{
1726
+ display:none;
1727
+ }
1728
+ }
1723
1729
 
1724
- :is(.tds-input textarea)::-webkit-scrollbar-track{
1725
- margin-block:var(--tds-input-scrollbar-track-margin-block);
1726
- cursor:default;
1730
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
1731
+ display:none;
1727
1732
  }
1728
1733
 
1729
- @supports (-moz-appearance: none){
1730
- :is(.tds-input textarea){
1731
- scrollbar-color:var(--tds-input-scrollbar-thumb-color-default) var(--tds-input-scrollbar-surface-color);
1732
- scrollbar-width:thin;
1733
- }
1734
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
1735
+ display:block;
1736
+ }
1734
1737
 
1735
- @media (hover){
1736
- :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1737
- scrollbar-color:var(--tds-input-scrollbar-thumb-color-hover) var(--tds-input-scrollbar-surface-color);
1738
- }
1739
- }
1738
+ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1739
+ display:flex;
1740
+ flex-direction:column;
1740
1741
  }
1741
- }
1742
1742
 
1743
1743
  .tds-input{
1744
1744
  --tds-input-border-color:var(--t-form-border-color);
@@ -3323,84 +3323,6 @@ a[class="tds-btn"]{
3323
3323
  @media (prefers-color-scheme: dark){
3324
3324
  }
3325
3325
 
3326
- .tds-checkbox-group{
3327
- --tds-checkbox-group-font-size:var(--t-font-size-md);
3328
- --tds-checkbox-group-line-height:1.4;
3329
- --tds-checkbox-group-gap:var(--t-spacing-1);
3330
-
3331
- --tds-checkbox-group-legend-margin-bottom:var(--tds-checkbox-group-gap);
3332
-
3333
- --tds-checkbox-group-description-font-size:var(--t-font-size-sm);
3334
- --tds-checkbox-group-description-line-height:1.35;
3335
- --tds-checkbox-group-description-color:var(--t-text-color-secondary);
3336
- --tds-checkbox-group-description-invalid-icon-display:none;
3337
- display:flex;
3338
- flex-direction:column;
3339
- gap:var(--tds-checkbox-group-gap);
3340
- padding:0;
3341
- margin:0;
3342
-
3343
- font-size:var(--tds-checkbox-group-font-size);
3344
- line-height:var(--tds-checkbox-group-line-height);
3345
- border:0;
3346
- }
3347
-
3348
- .tds-checkbox-group legend{
3349
- padding:0;
3350
- margin-bottom:var(--tds-checkbox-group-legend-margin-bottom);
3351
- }
3352
-
3353
- .tds-checkbox-group:has(.tds-checkbox-group-description){
3354
- --tds-checkbox-group-legend-margin-bottom:var(--t-spacing-fourth);
3355
- }
3356
-
3357
- .tds-checkbox-group[aria-invalid="true"]{
3358
- --tds-checkbox-group-description-color:var(--t-text-color-status-error);
3359
- --tds-checkbox-group-description-invalid-icon-display:inline-block;
3360
- }
3361
-
3362
- .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) legend::after{
3363
- margin-left:.25ch;
3364
- color:var(--t-text-color-status-error);
3365
- content:"*";
3366
- }
3367
-
3368
- .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
3369
- content:none;
3370
- }
3371
-
3372
- .tds-checkbox-group-fields{
3373
- display:flex;
3374
- flex-direction:column;
3375
- gap:var(--tds-checkbox-group-gap);
3376
- align-items:flex-start;
3377
- }
3378
-
3379
- .tds-checkbox-group-description{
3380
- display:flex;
3381
- gap:var(--t-spacing-half);
3382
- align-items:flex-start;
3383
- margin:0;
3384
- font-size:var(--tds-checkbox-group-description-font-size);
3385
- line-height:var(--tds-checkbox-group-description-line-height);
3386
- color:var(--tds-checkbox-group-description-color);
3387
- cursor:text;
3388
- }
3389
-
3390
- .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
3391
- display:var(--tds-checkbox-group-description-invalid-icon-display);
3392
- flex-shrink:0;
3393
- margin-top:calc(.5lh - .5em);
3394
- line-height:var(--tds-checkbox-group-description-line-height);
3395
- }
3396
-
3397
- .tds-checkbox-group--sm{
3398
- --tds-checkbox-group-line-height:1.35;
3399
- --tds-checkbox-group-font-size:var(--t-font-size-sm);
3400
- --tds-checkbox-group-description-font-size:var(--t-font-size-xs);
3401
- --tds-checkbox-group-description-line-height:1.3;
3402
- }
3403
-
3404
3326
  .tds-date-picker{
3405
3327
  --tds-date-picker-border-color:var(--t-form-border-color);
3406
3328
  --tds-date-picker-border-color-hover:var(--t-form-border-color-hover);
@@ -3936,57 +3858,205 @@ a[class="tds-btn"]{
3936
3858
  border-radius:var(--t-border-radius);
3937
3859
  }
3938
3860
 
3939
- .tds-combo-box-list-item[data-hovered]:not([data-disabled]){
3940
- background:var(--t-fill-color-neutral-070);
3861
+ .tds-combo-box-list-item[data-hovered]:not([data-disabled]){
3862
+ background:var(--t-fill-color-neutral-070);
3863
+ }
3864
+
3865
+ .tds-combo-box-list-item[data-selected]{
3866
+ background:var(--t-fill-color-button-interaction-ghost-active);
3867
+ }
3868
+
3869
+ .tds-combo-box-list-item[data-focus-visible]{
3870
+ outline:var(--t-focus-ring-outline);
3871
+ outline-offset:-1px;
3872
+ }
3873
+
3874
+ .tds-combo-box-list-item[data-disabled]{
3875
+ color:var(--t-form-color-disabled);
3876
+ cursor:not-allowed;
3877
+ }
3878
+
3879
+ .tds-combo-box-list-item[data-disabled][data-hovered]{
3880
+ background:transparent;
3881
+ }
3882
+
3883
+ .tds-combo-box-list-section:not(:first-child){
3884
+ margin-block-start:var(--t-spacing-half);
3885
+ }
3886
+
3887
+ .tds-combo-box-section-header{
3888
+ padding-block:var(--t-spacing-1);
3889
+ padding-inline:var(--t-spacing-1);
3890
+ font-size:var(--t-font-size-sm);
3891
+ font-weight:var(--t-font-weight-semibold);
3892
+ color:var(--t-text-color-secondary);
3893
+ }
3894
+
3895
+ .tds-combo-box-description{
3896
+ display:flex;
3897
+ gap:var(--t-spacing-half);
3898
+ align-items:flex-start;
3899
+ margin:0;
3900
+ font-size:var(--t-font-size-sm);
3901
+ line-height:1.35;
3902
+ color:var(--tds-combo-box-description-color, var(--t-text-color-secondary));
3903
+ cursor:text;
3904
+ }
3905
+
3906
+ .tds-combo-box-description-invalid-icon{
3907
+ display:var(--tds-combo-box-description-invalid-icon-display, none);
3908
+ flex-shrink:0;
3909
+ margin-block-start:calc(.5lh - .5em);
3910
+ line-height:1.35;
3911
+ }
3912
+
3913
+ .tds-time-field{
3914
+ --tds-time-field-border-color:var(--t-form-border-color);
3915
+ --tds-time-field-border-color-hover:var(--t-form-border-color-hover);
3916
+ --tds-time-field-border-color-active:var(--t-form-border-color-focus);
3917
+ --tds-time-field-background-color:var(--t-form-background-color);
3918
+ --tds-time-field-color:var(--t-form-color);
3919
+ --tds-time-field-placeholder-color:var(--t-form-placeholder-color);
3920
+ --tds-time-field-font-size:var(--t-font-size-md);
3921
+ --tds-time-field-min-height:var(--t-container-size-md);
3922
+ --tds-time-field-padding-block:6px;
3923
+ --tds-time-field-description-color:var(--t-text-color-secondary);
3924
+ --tds-time-field-description-invalid-icon-display:none;
3925
+
3926
+ position:relative;
3927
+ display:flex;
3928
+ flex-direction:column;
3929
+ gap:var(--t-spacing-half);
3930
+ }
3931
+
3932
+ .tds-time-field[data-required] .tds-time-field-label::after{
3933
+ margin-left:.25ch;
3934
+ color:var(--t-text-color-status-error);
3935
+ content:"*";
3936
+ }
3937
+
3938
+ .tds-time-field[data-invalid]{
3939
+ --tds-time-field-border-color:var(--t-form-border-color-error);
3940
+ --tds-time-field-border-color-hover:var(--t-form-border-color-error-hover);
3941
+ --tds-time-field-border-color-active:var(--t-form-border-color-error-hover);
3942
+ --tds-time-field-background-color:var(--t-form-background-color-error);
3943
+ --tds-time-field-description-color:var(--t-text-color-status-error);
3944
+ --tds-time-field-description-invalid-icon-display:inline-block;
3945
+ }
3946
+
3947
+ .tds-time-field[data-disabled]{
3948
+ --tds-time-field-border-color:var(--t-form-border-color-disabled);
3949
+ --tds-time-field-background-color:var(--t-form-background-color-disabled);
3950
+ --tds-time-field-color:var(--t-form-color-disabled);
3951
+ --tds-time-field-placeholder-color:var(--t-form-color-disabled);
3952
+ }
3953
+
3954
+ .tds-time-field[data-disabled] .tds-time-field-label{
3955
+ color:var(--t-form-color-disabled);
3956
+ }
3957
+
3958
+ .tds-time-field[data-disabled] .tds-time-field-input{
3959
+ cursor:not-allowed;
3960
+ }
3961
+
3962
+ .tds-time-field--lg{
3963
+ --tds-time-field-min-height:var(--t-container-size-lg);
3964
+ --tds-time-field-font-size:var(--t-font-size-lg);
3965
+ }
3966
+
3967
+ .tds-time-field-label{
3968
+ font-size:var(--t-font-size-md);
3969
+ font-weight:var(--t-font-weight-normal);
3970
+ color:var(--t-text-color);
3971
+ cursor:default;
3972
+ }
3973
+
3974
+ .tds-time-field-input{
3975
+ display:flex;
3976
+ align-items:center;
3977
+ inline-size:100%;
3978
+ min-block-size:var(--tds-time-field-min-height);
3979
+ padding-block:var(--tds-time-field-padding-block);
3980
+ padding-inline:var(--t-spacing-1);
3981
+ font-family:inherit;
3982
+ font-size:var(--tds-time-field-font-size);
3983
+ font-variant-numeric:tabular-nums;
3984
+ line-height:1;
3985
+ color:var(--tds-time-field-color);
3986
+ cursor:text;
3987
+ outline:var(--t-focus-ring-width) solid transparent;
3988
+ outline-offset:0;
3989
+ background-color:var(--tds-time-field-background-color);
3990
+ border:var(--t-form-border-width) solid var(--tds-time-field-border-color);
3991
+ border-radius:var(--t-form-border-radius);
3992
+ }
3993
+
3994
+ .tds-time-field-input[data-hovered]:not([data-focus-visible],[data-focused],[data-disabled]){
3995
+ border-color:var(--tds-time-field-border-color-hover);
3941
3996
  }
3942
3997
 
3943
- .tds-combo-box-list-item[data-selected]{
3944
- background:var(--t-fill-color-button-interaction-ghost-active);
3998
+ .tds-time-field-input[data-focus-within]{
3999
+ outline-color:var(--t-focus-ring-color);
4000
+ outline-offset:var(--t-focus-ring-offset);
4001
+ border-color:var(--tds-time-field-border-color-active);
3945
4002
  }
3946
4003
 
3947
- .tds-combo-box-list-item[data-focus-visible]{
3948
- outline:var(--t-focus-ring-outline);
3949
- outline-offset:-1px;
4004
+ .tds-time-field-input[data-readonly]{
4005
+ color:var(--t-form-color-readonly);
4006
+ background-color:var(--t-form-background-color-readonly);
4007
+ border-color:var(--t-form-border-color-readonly);
3950
4008
  }
3951
4009
 
3952
- .tds-combo-box-list-item[data-disabled]{
3953
- color:var(--t-form-color-disabled);
3954
- cursor:not-allowed;
3955
- }
4010
+ .tds-time-field-input[data-readonly][data-hovered]{
4011
+ border-color:var(--t-form-border-color-readonly);
4012
+ }
3956
4013
 
3957
- .tds-combo-box-list-item[data-disabled][data-hovered]{
3958
- background:transparent;
4014
+ .tds-time-field-input[data-readonly][data-focus-within]{
4015
+ outline-color:var(--t-focus-ring-color);
4016
+ outline-offset:var(--t-focus-ring-offset);
4017
+ border-color:var(--t-form-border-color-hover);
3959
4018
  }
3960
4019
 
3961
- .tds-combo-box-list-section:not(:first-child){
3962
- margin-block-start:var(--t-spacing-half);
4020
+ .tds-time-field-segment{
4021
+ padding-inline:1px;
4022
+ font-variant-numeric:tabular-nums;
4023
+ cursor:text;
4024
+ caret-color:transparent;
4025
+ border-radius:var(--t-border-radius-sm);
4026
+ }
4027
+
4028
+ .tds-time-field-segment[data-placeholder]{
4029
+ color:var(--tds-time-field-placeholder-color);
3963
4030
  }
3964
4031
 
3965
- .tds-combo-box-section-header{
3966
- padding-block:var(--t-spacing-1);
3967
- padding-inline:var(--t-spacing-1);
3968
- font-size:var(--t-font-size-sm);
3969
- font-weight:var(--t-font-weight-semibold);
3970
- color:var(--t-text-color-secondary);
4032
+ .tds-time-field-segment[data-focused]{
4033
+ color:var(--t-text-color-inverted);
4034
+ outline:0;
4035
+ background:var(--t-fill-color-interaction);
4036
+ }
4037
+
4038
+ .tds-time-field-segment-separator{
4039
+ padding-inline:0;
4040
+ color:var(--tds-time-field-placeholder-color);
3971
4041
  }
3972
4042
 
3973
- .tds-combo-box-description{
4043
+ .tds-time-field-description{
3974
4044
  display:flex;
3975
4045
  gap:var(--t-spacing-half);
3976
4046
  align-items:flex-start;
3977
4047
  margin:0;
3978
4048
  font-size:var(--t-font-size-sm);
3979
4049
  line-height:1.35;
3980
- color:var(--tds-combo-box-description-color, var(--t-text-color-secondary));
4050
+ color:var(--tds-time-field-description-color, var(--t-text-color-secondary));
3981
4051
  cursor:text;
3982
4052
  }
3983
4053
 
3984
- .tds-combo-box-description-invalid-icon{
3985
- display:var(--tds-combo-box-description-invalid-icon-display, none);
3986
- flex-shrink:0;
3987
- margin-block-start:calc(.5lh - .5em);
3988
- line-height:1.35;
3989
- }
4054
+ .tds-time-field-description .tds-time-field-description-invalid-icon{
4055
+ display:var(--tds-time-field-description-invalid-icon-display, none);
4056
+ flex-shrink:0;
4057
+ margin-block-start:calc(.5lh - .5em);
4058
+ line-height:1.35;
4059
+ }
3990
4060
 
3991
4061
  .tds-number-stepper{
3992
4062
  --tds-number-stepper-border-color:var(--t-form-border-color);
@@ -4141,154 +4211,84 @@ a[class="tds-btn"]{
4141
4211
  line-height:1.35;
4142
4212
  }
4143
4213
 
4144
- .tds-time-field{
4145
- --tds-time-field-border-color:var(--t-form-border-color);
4146
- --tds-time-field-border-color-hover:var(--t-form-border-color-hover);
4147
- --tds-time-field-border-color-active:var(--t-form-border-color-focus);
4148
- --tds-time-field-background-color:var(--t-form-background-color);
4149
- --tds-time-field-color:var(--t-form-color);
4150
- --tds-time-field-placeholder-color:var(--t-form-placeholder-color);
4151
- --tds-time-field-font-size:var(--t-font-size-md);
4152
- --tds-time-field-min-height:var(--t-container-size-md);
4153
- --tds-time-field-padding-block:6px;
4154
- --tds-time-field-description-color:var(--t-text-color-secondary);
4155
- --tds-time-field-description-invalid-icon-display:none;
4214
+ .tds-checkbox-group{
4215
+ --tds-checkbox-group-font-size:var(--t-font-size-md);
4216
+ --tds-checkbox-group-line-height:1.4;
4217
+ --tds-checkbox-group-gap:var(--t-spacing-1);
4156
4218
 
4157
- position:relative;
4219
+ --tds-checkbox-group-legend-margin-bottom:var(--tds-checkbox-group-gap);
4220
+
4221
+ --tds-checkbox-group-description-font-size:var(--t-font-size-sm);
4222
+ --tds-checkbox-group-description-line-height:1.35;
4223
+ --tds-checkbox-group-description-color:var(--t-text-color-secondary);
4224
+ --tds-checkbox-group-description-invalid-icon-display:none;
4158
4225
  display:flex;
4159
4226
  flex-direction:column;
4160
- gap:var(--t-spacing-half);
4161
- }
4162
-
4163
- .tds-time-field[data-required] .tds-time-field-label::after{
4164
- margin-left:.25ch;
4165
- color:var(--t-text-color-status-error);
4166
- content:"*";
4167
- }
4168
-
4169
- .tds-time-field[data-invalid]{
4170
- --tds-time-field-border-color:var(--t-form-border-color-error);
4171
- --tds-time-field-border-color-hover:var(--t-form-border-color-error-hover);
4172
- --tds-time-field-border-color-active:var(--t-form-border-color-error-hover);
4173
- --tds-time-field-background-color:var(--t-form-background-color-error);
4174
- --tds-time-field-description-color:var(--t-text-color-status-error);
4175
- --tds-time-field-description-invalid-icon-display:inline-block;
4176
- }
4177
-
4178
- .tds-time-field[data-disabled]{
4179
- --tds-time-field-border-color:var(--t-form-border-color-disabled);
4180
- --tds-time-field-background-color:var(--t-form-background-color-disabled);
4181
- --tds-time-field-color:var(--t-form-color-disabled);
4182
- --tds-time-field-placeholder-color:var(--t-form-color-disabled);
4183
- }
4184
-
4185
- .tds-time-field[data-disabled] .tds-time-field-label{
4186
- color:var(--t-form-color-disabled);
4187
- }
4188
-
4189
- .tds-time-field[data-disabled] .tds-time-field-input{
4190
- cursor:not-allowed;
4191
- }
4192
-
4193
- .tds-time-field--lg{
4194
- --tds-time-field-min-height:var(--t-container-size-lg);
4195
- --tds-time-field-font-size:var(--t-font-size-lg);
4196
- }
4197
-
4198
- .tds-time-field-label{
4199
- font-size:var(--t-font-size-md);
4200
- font-weight:var(--t-font-weight-normal);
4201
- color:var(--t-text-color);
4202
- cursor:default;
4203
- }
4227
+ gap:var(--tds-checkbox-group-gap);
4228
+ padding:0;
4229
+ margin:0;
4204
4230
 
4205
- .tds-time-field-input{
4206
- display:flex;
4207
- align-items:center;
4208
- inline-size:100%;
4209
- min-block-size:var(--tds-time-field-min-height);
4210
- padding-block:var(--tds-time-field-padding-block);
4211
- padding-inline:var(--t-spacing-1);
4212
- font-family:inherit;
4213
- font-size:var(--tds-time-field-font-size);
4214
- font-variant-numeric:tabular-nums;
4215
- line-height:1;
4216
- color:var(--tds-time-field-color);
4217
- cursor:text;
4218
- outline:var(--t-focus-ring-width) solid transparent;
4219
- outline-offset:0;
4220
- background-color:var(--tds-time-field-background-color);
4221
- border:var(--t-form-border-width) solid var(--tds-time-field-border-color);
4222
- border-radius:var(--t-form-border-radius);
4231
+ font-size:var(--tds-checkbox-group-font-size);
4232
+ line-height:var(--tds-checkbox-group-line-height);
4233
+ border:0;
4223
4234
  }
4224
4235
 
4225
- .tds-time-field-input[data-hovered]:not([data-focus-visible],[data-focused],[data-disabled]){
4226
- border-color:var(--tds-time-field-border-color-hover);
4236
+ .tds-checkbox-group legend{
4237
+ padding:0;
4238
+ margin-bottom:var(--tds-checkbox-group-legend-margin-bottom);
4227
4239
  }
4228
4240
 
4229
- .tds-time-field-input[data-focus-within]{
4230
- outline-color:var(--t-focus-ring-color);
4231
- outline-offset:var(--t-focus-ring-offset);
4232
- border-color:var(--tds-time-field-border-color-active);
4241
+ .tds-checkbox-group:has(.tds-checkbox-group-description){
4242
+ --tds-checkbox-group-legend-margin-bottom:var(--t-spacing-fourth);
4233
4243
  }
4234
4244
 
4235
- .tds-time-field-input[data-readonly]{
4236
- color:var(--t-form-color-readonly);
4237
- background-color:var(--t-form-background-color-readonly);
4238
- border-color:var(--t-form-border-color-readonly);
4245
+ .tds-checkbox-group[aria-invalid="true"]{
4246
+ --tds-checkbox-group-description-color:var(--t-text-color-status-error);
4247
+ --tds-checkbox-group-description-invalid-icon-display:inline-block;
4239
4248
  }
4240
4249
 
4241
- .tds-time-field-input[data-readonly][data-hovered]{
4242
- border-color:var(--t-form-border-color-readonly);
4250
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) legend::after{
4251
+ margin-left:.25ch;
4252
+ color:var(--t-text-color-status-error);
4253
+ content:"*";
4243
4254
  }
4244
4255
 
4245
- .tds-time-field-input[data-readonly][data-focus-within]{
4246
- outline-color:var(--t-focus-ring-color);
4247
- outline-offset:var(--t-focus-ring-offset);
4248
- border-color:var(--t-form-border-color-hover);
4256
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
4257
+ content:none;
4249
4258
  }
4250
4259
 
4251
- .tds-time-field-segment{
4252
- padding-inline:1px;
4253
- font-variant-numeric:tabular-nums;
4254
- cursor:text;
4255
- caret-color:transparent;
4256
- border-radius:var(--t-border-radius-sm);
4257
- }
4258
-
4259
- .tds-time-field-segment[data-placeholder]{
4260
- color:var(--tds-time-field-placeholder-color);
4261
- }
4262
-
4263
- .tds-time-field-segment[data-focused]{
4264
- color:var(--t-text-color-inverted);
4265
- outline:0;
4266
- background:var(--t-fill-color-interaction);
4267
- }
4268
-
4269
- .tds-time-field-segment-separator{
4270
- padding-inline:0;
4271
- color:var(--tds-time-field-placeholder-color);
4260
+ .tds-checkbox-group-fields{
4261
+ display:flex;
4262
+ flex-direction:column;
4263
+ gap:var(--tds-checkbox-group-gap);
4264
+ align-items:flex-start;
4272
4265
  }
4273
4266
 
4274
- .tds-time-field-description{
4267
+ .tds-checkbox-group-description{
4275
4268
  display:flex;
4276
4269
  gap:var(--t-spacing-half);
4277
4270
  align-items:flex-start;
4278
4271
  margin:0;
4279
- font-size:var(--t-font-size-sm);
4280
- line-height:1.35;
4281
- color:var(--tds-time-field-description-color, var(--t-text-color-secondary));
4272
+ font-size:var(--tds-checkbox-group-description-font-size);
4273
+ line-height:var(--tds-checkbox-group-description-line-height);
4274
+ color:var(--tds-checkbox-group-description-color);
4282
4275
  cursor:text;
4283
4276
  }
4284
4277
 
4285
- .tds-time-field-description .tds-time-field-description-invalid-icon{
4286
- display:var(--tds-time-field-description-invalid-icon-display, none);
4278
+ .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
4279
+ display:var(--tds-checkbox-group-description-invalid-icon-display);
4287
4280
  flex-shrink:0;
4288
- margin-block-start:calc(.5lh - .5em);
4289
- line-height:1.35;
4281
+ margin-top:calc(.5lh - .5em);
4282
+ line-height:var(--tds-checkbox-group-description-line-height);
4290
4283
  }
4291
4284
 
4285
+ .tds-checkbox-group--sm{
4286
+ --tds-checkbox-group-line-height:1.35;
4287
+ --tds-checkbox-group-font-size:var(--t-font-size-sm);
4288
+ --tds-checkbox-group-description-font-size:var(--t-font-size-xs);
4289
+ --tds-checkbox-group-description-line-height:1.3;
4290
+ }
4291
+
4292
4292
  .t-banner{
4293
4293
  --t-banner-font-size:var(--t-font-size-md);
4294
4294
  --t-banner-font-color:var(--t-text-color);