@planningcenter/tapestry 3.3.1-qa-887.1 → 3.3.2-qa-889.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 (5) hide show
  1. package/dist/reactRender.css +1055 -1055
  2. package/dist/reactRender.css.map +1 -1
  3. package/dist/reactRenderLegacy.css +1055 -1055
  4. package/dist/reactRenderLegacy.css.map +1 -1
  5. package/package.json +5 -5
package/dist/reactRender.css CHANGED
@@ -276,367 +276,459 @@
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;
279
284
 
280
- @media (prefers-reduced-motion: no-preference){
281
-
282
- :root{
283
- interpolate-size:allow-keywords;
284
- }
285
- }
286
-
287
- @layer tds-component{
288
- tds-sidenav,
289
- .tds-sidenav{
290
- --tds-sidenav-indent:12px;
291
- --tds-sidenav-item-depth:0;
292
-
293
- --tds-sidenav-item-transition:background-color var(--t-duration-200) var(--t-ease-in-out);
294
-
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
- }
336
- }
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;
337
289
 
338
- .tds-sidenav :where(nav,ul,.tds-sidenav-section){
339
- display:flex;
340
- }
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);
341
294
 
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
- }
295
+ --tds-checkbox-label-color:var(--t-form-color);
347
296
 
348
- .tds-sidenav-section-list{
349
- width:100%;
350
- padding:0;
351
- margin:0;
352
- list-style:none;
353
- }
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;
354
301
 
355
- .tds-sidenav-section-header{
356
- display:flex;
357
- align-items:baseline;
358
- justify-content:space-between;
359
- padding-top:var(--t-spacing-2);
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;
360
312
  }
361
313
 
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;
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);
373
320
  }
374
321
 
375
- .tds-sidenav-section-header [slot="label-actions"]{
322
+ .tds-checkbox tds-indeterminate{
376
323
  display:flex;
377
- gap:var(--t-spacing-half);
378
- align-items:center;
379
324
  }
380
325
 
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){
326
+ .tds-checkbox input[type="checkbox"]{
397
327
  position:relative;
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;
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;
409
333
  -webkit-appearance:none;
410
334
  -moz-appearance:none;
411
335
  appearance:none;
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);
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);
417
343
  }
418
344
 
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;
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%);
426
363
  }
427
364
 
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;
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);
432
368
  }
433
369
 
434
- :is(.tds-sidenav-item :is(a,button)):active{
435
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-active);
370
+ :is(.tds-checkbox input[type="checkbox"]):focus-visible{
371
+ outline:var(--t-focus-ring-outline);
372
+ outline-offset:var(--t-focus-ring-offset);
436
373
  }
437
374
 
438
- :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]){
439
- overflow:hidden;
440
- color:var(--tds-sidenav-item-icon-color);
375
+ :is(.tds-checkbox input[type="checkbox"]):disabled{
376
+ pointer-events:none;
441
377
  }
442
378
 
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
- }
379
+ @media (prefers-reduced-motion: reduce){
448
380
 
449
- :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section{
450
- --tds-sidenav-indent:19px;
381
+ .tds-checkbox input[type="checkbox"]{
382
+ --tds-checkbox-transition-property:none;
383
+ }
451
384
  }
452
385
 
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;
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);
457
396
  }
458
397
 
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);
398
+ .tds-checkbox:has(input:checked){
399
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
400
+ }
462
401
 
463
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-selected);
464
- font-weight:var(--t-font-weight-semibold);
402
+ .tds-checkbox:has(input:indeterminate){
403
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
465
404
  }
466
405
 
467
- .tds-sidenav-item:has(.tds-sidenav-section){
468
- display:flex;
469
- flex-direction:column;
470
- gap:var(--t-spacing-half);
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;
471
410
  }
472
411
 
473
- .tds-sidenav-item .tds-sidenav-section-list{
474
- --tds-sidenav-item-depth:1;
475
- gap:0;
476
- }
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);
415
+ }
477
416
 
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);
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);
484
420
  }
485
421
 
486
- :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list{
487
- --tds-sidenav-item-depth:2;
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);
425
+ }
426
+
427
+ .tds-checkbox:has(input:required) label::after{
428
+ margin-left:.25ch;
429
+ color:var(--t-text-color-status-error);
430
+ content:"*";
488
431
  }
489
432
 
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;
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);
436
+
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
+ }
441
+
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);
496
444
  }
497
445
 
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);
507
- }
446
+ .tds-checkbox-description{
447
+ 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;
456
+ }
508
457
 
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
- }
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);
463
+ }
519
464
 
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
- }
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
+ }
525
472
 
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
- }
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);
530
477
 
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
- }
478
+ --tds-checkbox-group-legend-margin-bottom:var(--tds-checkbox-group-gap);
534
479
 
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);
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
+ }
494
+
495
+ .tds-checkbox-group legend{
496
+ padding:0;
497
+ margin-bottom:var(--tds-checkbox-group-legend-margin-bottom);
498
+ }
499
+
500
+ .tds-checkbox-group:has(.tds-checkbox-group-description){
501
+ --tds-checkbox-group-legend-margin-bottom:var(--t-spacing-fourth);
502
+ }
503
+
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;
507
+ }
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:"*";
538
513
  }
539
514
 
540
- .tds-sidenav-responsive-header{
515
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
516
+ content:none;
517
+ }
518
+
519
+ .tds-checkbox-group-fields{
541
520
  display:flex;
542
- gap:var(--t-spacing-2);
521
+ flex-direction:column;
522
+ gap:var(--tds-checkbox-group-gap);
523
+ align-items:flex-start;
524
+ }
525
+
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;
535
+ }
536
+
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);
542
+ }
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
+ }
550
+
551
+ .tds-combo-box{
552
+ --tds-combo-box-button-offset:4px;
553
+ }
554
+
555
+ .tds-combo-box[data-open] .tds-combo-box-button > svg{
556
+ transform:rotate(.5turn);
557
+ }
558
+
559
+ .tds-combo-box--lg{
560
+ --tds-combo-box-button-offset:5px;
561
+ }
562
+
563
+ .tds-combo-box-field:has([readonly]) .tds-combo-box-button{
564
+ display:none;
565
+ }
566
+
567
+ .tds-combo-box-input{
568
+ display:flex;
569
+ flex:1;
543
570
  align-items:center;
544
- width:100%;
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;
545
579
  }
546
580
 
547
- .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle{
548
- order:0;
581
+ .tds-combo-box-input:has( + .tds-combo-box-button){
582
+ padding-inline-end:0;
549
583
  }
550
584
 
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);
585
+ .tds-combo-box-input::-moz-placeholder{
586
+ color:var(--tds-field-placeholder-color);
587
+ -moz-user-select:none;
588
+ user-select:none;
558
589
  }
559
590
 
560
- @media (max-width: 719px){
561
- .tds-sidenav-collapse{
562
- z-index:10001;
563
- display:none;
564
- max-width:min(448px, calc(100vw - 48px));
565
- padding:0;
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;
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
+ }
597
+
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
+ }
606
+
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);
578
611
  }
579
612
 
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;
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;
620
+ -webkit-user-select:none;
621
+ -moz-user-select:none;
622
+ 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
+ }
632
+
633
+ .tds-combo-box-popover[data-entering]{
634
+ animation:tds-combo-box-popover var(--t-duration-300) var(--t-ease-out);
635
+ }
636
+
637
+ .tds-combo-box-popover[data-exiting]{
638
+ animation:tds-combo-box-popover var(--t-duration-200) var(--t-ease-in) reverse;
639
+ }
640
+
641
+ .tds-combo-box-popover[data-entering],.tds-combo-box-popover[data-exiting]{
642
+ will-change:opacity, transform;
643
+ }
644
+
645
+ @keyframes tds-combo-box-popover{
646
+ from{
647
+ opacity:0;
648
+ transform:translateY(-8px);
649
+ }
650
+ }
651
+
652
+ @media (prefers-reduced-motion: reduce){
653
+ .tds-combo-box-popover[data-entering],.tds-combo-box-popover[data-exiting]{
654
+ animation:none;
655
+ }
656
+
657
+ .tds-combo-box-button > svg{
658
+ transition:none;
659
+ }
660
+ }
661
+
662
+ .tds-combo-box-list{
663
+ padding:0;
664
+ margin:0;
665
+ }
666
+
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
+ }
679
+
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);
588
682
  }
589
683
 
590
- .tds-sidenav-item :is(a, button) :is(.prefix){
591
- display:none;
684
+ .tds-combo-box-list-item[data-selected]{
685
+ background:var(--t-fill-color-button-interaction-ghost-active);
592
686
  }
593
- @supports selector(:popover-open){
594
- .tds-sidenav-collapse:popover-open{
595
- display:flex;
596
- }
597
687
 
598
- .tds-sidenav-collapse:not(:popover-open){
599
- opacity:var(--tds-sidenav-collapse-closed-opacity);
600
- transition:var(--tds-sidenav-collapse-transition-exit);
601
- }
688
+ .tds-combo-box-list-item[data-pressed]:not([data-disabled]){
689
+ background:var(--t-fill-color-neutral-060);
690
+ }
602
691
 
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
- }
692
+ .tds-combo-box-list-item[data-disabled]{
693
+ color:var(--t-form-color-disabled);
694
+ cursor:not-allowed;
609
695
  }
610
- @supports not selector(:popover-open){
611
- .tds-sidenav-collapse.\:popover-open{
612
- display:flex;
613
- }
614
696
 
615
- .tds-sidenav-collapse:not(.\:popover-open){
616
- opacity:var(--tds-sidenav-collapse-closed-opacity);
617
- transition:var(--tds-sidenav-collapse-transition-exit);
697
+ .tds-combo-box-list-item[data-disabled][data-hovered]{
698
+ background:transparent;
618
699
  }
619
- }
700
+
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);
620
708
  }
621
709
 
622
- @media (min-width: 720px){
623
- .tds-sidenav-responsive-header{
624
- display:none;
625
- }
710
+ .tds-combo-box-load-more{
711
+ position:relative;
712
+ min-block-size:calc(var(--t-spacing-3) + var(--t-spacing-1));
626
713
  }
627
714
 
628
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
629
- display:none;
630
- }
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
+ }
631
720
 
632
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
633
- display:block;
634
- }
721
+ .tds-combo-box-list-section:not(:first-child){
722
+ margin-block-start:var(--t-spacing-half);
723
+ }
635
724
 
636
- tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
637
- display:flex;
638
- flex-direction:column;
639
- }
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
+ }
640
732
 
641
733
  .tds-date-picker{
642
734
  --tds-date-picker-button-offset:4px;
@@ -994,754 +1086,662 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
994
1086
  --tds-date-picker-popover-font-size:var(--t-font-size-lg);
995
1087
  }
996
1088
 
997
- .tds-checkbox{
998
- --tds-checkbox-font-size:var(--t-font-size-md);
999
- --tds-checkbox-cursor:pointer;
1000
- --tds-checkbox-line-height:1.4;
1001
- --tds-checkbox-transition-property:background-color, border-color;
1002
-
1003
- --tds-checkbox-input-size:var(--t-element-size-md);
1004
- --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
1005
- --tds-checkbox-input-border-color:var(--t-form-border-color);
1006
- --tds-checkbox-input-background-color:transparent;
1007
-
1008
- --tds-checkbox-input-icon:none;
1009
- --tds-checkbox-input-icon-visibility:hidden;
1010
- --tds-checkbox-input-icon-opacity:0;
1011
- --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
1012
-
1013
- --tds-checkbox-label-color:var(--t-form-color);
1014
1089
 
1015
- --tds-checkbox-description-font-size:var(--t-font-size-sm);
1016
- --tds-checkbox-description-line-height:1.35;
1017
- --tds-checkbox-description-color:var(--t-text-color-secondary);
1018
- --tds-checkbox-description-invalid-icon-display:none;
1090
+ @media (prefers-reduced-motion: no-preference){
1019
1091
 
1020
- position:relative;
1021
- display:inline-grid;
1022
- grid-template-columns:auto;
1023
- grid-auto-columns:1fr;
1024
- gap:var(--t-spacing-fourth) var(--t-spacing-1);
1025
- line-height:var(--tds-checkbox-line-height);
1026
- cursor:var(--tds-checkbox-cursor);
1027
- -webkit-user-select:none;
1028
- -moz-user-select:none;
1029
- user-select:none;
1092
+ :root{
1093
+ interpolate-size:allow-keywords;
1030
1094
  }
1031
-
1032
- .tds-checkbox label{
1033
- grid-area:1 / 2;
1034
- font-size:var(--tds-checkbox-font-size);
1035
- font-weight:var(--t-font-weight-normal);
1036
- color:var(--tds-checkbox-label-color);
1037
- cursor:var(--tds-checkbox-cursor);
1038
- }
1039
-
1040
- .tds-checkbox tds-indeterminate{
1041
- display:flex;
1042
- }
1043
-
1044
- .tds-checkbox input[type="checkbox"]{
1045
- position:relative;
1046
- width:1em;
1047
- height:1em;
1048
- margin:calc((1lh - 1em) / 2) 0 0;
1049
- font-size:var(--tds-checkbox-font-size);
1050
- line-height:inherit;
1051
- -webkit-appearance:none;
1052
- -moz-appearance:none;
1053
- appearance:none;
1054
- cursor:var(--tds-checkbox-cursor);
1055
- background-color:var(--tds-checkbox-input-background-color);
1056
- border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
1057
- border-radius:var(--tds-checkbox-input-border-radius);
1058
- transition-timing-function:var(--t-ease-in-out);
1059
- transition-duration:var(--t-duration-200);
1060
- transition-property:var(--tds-checkbox-transition-property);
1061
- }
1062
-
1063
- :is(.tds-checkbox input[type="checkbox"])::before{
1064
- position:absolute;
1065
- top:50%;
1066
- left:50%;
1067
- visibility:var(--tds-checkbox-input-icon-visibility);
1068
- width:100%;
1069
- height:100%;
1070
- content:"";
1071
- background-color:var(--tds-checkbox-input-icon-fill);
1072
- border-radius:var(--tds-checkbox-input-border-radius);
1073
- opacity:var(--tds-checkbox-input-icon-opacity);
1074
- -webkit-mask-image:var(--tds-checkbox-input-icon);
1075
- mask-image:var(--tds-checkbox-input-icon);
1076
- -webkit-mask-repeat:no-repeat;
1077
- mask-repeat:no-repeat;
1078
- -webkit-mask-size:contain;
1079
- mask-size:contain;
1080
- transform:translate(-50%, -50%);
1081
- }
1082
-
1083
- :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
1084
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
1085
- --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
1086
- }
1087
-
1088
- :is(.tds-checkbox input[type="checkbox"]):focus-visible{
1089
- outline:var(--t-focus-ring-outline);
1090
- outline-offset:var(--t-focus-ring-offset);
1091
- }
1092
-
1093
- :is(.tds-checkbox input[type="checkbox"]):disabled{
1094
- pointer-events:none;
1095
- }
1096
-
1097
- @media (prefers-reduced-motion: reduce){
1098
-
1099
- .tds-checkbox input[type="checkbox"]{
1100
- --tds-checkbox-transition-property:none;
1101
- }
1102
- }
1103
-
1104
- .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
1105
- --tds-checkbox-input-background-color:var(--t-fill-color-control);
1106
- --tds-checkbox-input-border-color:var(--t-border-color-control-info);
1107
- --tds-checkbox-input-icon-visibility:visible;
1108
- --tds-checkbox-input-icon-opacity:1;
1109
- }
1110
-
1111
- :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
1112
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
1113
- --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
1114
- }
1115
-
1116
- .tds-checkbox:has(input:checked){
1117
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
1118
- }
1119
-
1120
- .tds-checkbox:has(input:indeterminate){
1121
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
1122
1095
  }
1123
1096
 
1124
- .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
1125
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1126
- --tds-checkbox-description-color:var(--t-text-color-status-error);
1127
- --tds-checkbox-description-invalid-icon-display:inline-block;
1128
- }
1097
+ @layer tds-component{
1098
+ tds-sidenav,
1099
+ .tds-sidenav{
1100
+ --tds-sidenav-indent:12px;
1101
+ --tds-sidenav-item-depth:0;
1129
1102
 
1130
- :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
1131
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1132
- --tds-checkbox-input-background-color:var(--t-form-background-color-error);
1133
- }
1103
+ --tds-sidenav-item-transition:background-color var(--t-duration-200) var(--t-ease-in-out);
1134
1104
 
1135
- :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{
1136
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1137
- --tds-checkbox-input-background-color:var(--t-form-border-color-error);
1138
- }
1105
+ --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;
1106
+ --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;
1107
+ --tds-sidenav-collapse-closed-opacity:0;
1108
+ --tds-sidenav-collapse-open-opacity:1;
1109
+ --tds-sidenav-collapse-closed-transform:translateY(-8px);
1110
+ --tds-sidenav-collapse-open-transform:translateY(0);
1139
1111
 
1140
- :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){
1141
- --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
1142
- --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
1143
- }
1112
+ --tds-sidenav-item-icon-size:var(--t-element-size-md);
1113
+ --tds-sidenav-item-background-hover:var(--t-fill-color-button-interaction-ghost-hover);
1114
+ --tds-sidenav-item-background-active:var(--t-fill-color-button-interaction-ghost-active);
1115
+ --tds-sidenav-item-background-selected:var(--t-fill-color-button-interaction-ghost-active);
1144
1116
 
1145
- .tds-checkbox:has(input:required) label::after{
1146
- margin-left:.25ch;
1147
- color:var(--t-text-color-status-error);
1148
- content:"*";
1149
- }
1117
+ --tds-sidenav-item-nested-background-hover:var(--tds-sidenav-item-background-hover);
1118
+ --tds-sidenav-item-nested-background-active:var(--tds-sidenav-item-background-hover);
1119
+ --tds-sidenav-item-nested-background-selected:transparent;
1150
1120
 
1151
- .tds-checkbox:has(input:disabled){
1152
- --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
1153
- --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
1121
+ --tds-sidenav-item-nested-border-color:var(--t-fill-color-neutral-050);
1122
+ --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
1123
+ --tds-sidenav-item-nested-border-color-selected:var(--t-border-color-status-info);
1154
1124
 
1155
- --tds-checkbox-label-color:var(--t-form-color-disabled);
1156
- --tds-checkbox-description-color:var(--t-form-color-disabled);
1157
- --tds-checkbox-cursor:not-allowed;
1125
+ --tds-sidenav-item-icon-color:var(--t-icon-color-secondary);
1126
+ --tds-sidenav-item-icon-color-selected:var(--t-icon-color);
1158
1127
  }
1159
1128
 
1160
- .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
1161
- --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
1129
+ @media (prefers-reduced-motion: reduce){
1130
+ tds-sidenav,
1131
+ .tds-sidenav{
1132
+ --tds-sidenav-collapse-transition-enter:none;
1133
+ --tds-sidenav-collapse-transition-exit:none;
1134
+ --tds-sidenav-collapse-closed-transform:none;
1135
+ --tds-sidenav-collapse-open-transform:none;
1136
+ }
1162
1137
  }
1163
1138
 
1164
- .tds-checkbox-description{
1165
- display:flex;
1166
- grid-area:2 / 2;
1167
- gap:var(--t-spacing-half);
1168
- align-items:flex-start;
1169
- margin:0;
1170
- font-size:var(--tds-checkbox-description-font-size);
1171
- line-height:var(--tds-checkbox-description-line-height);
1172
- color:var(--tds-checkbox-description-color);
1173
- cursor:text;
1139
+ .tds-sidenav--theme-gray{
1140
+ --tds-sidenav-item-background-hover:var(--t-fill-color-neutral-080);
1141
+ --tds-sidenav-item-background-active:var(--t-fill-color-neutral-070);
1142
+ --tds-sidenav-item-background-selected:var(--t-fill-color-neutral-050);
1143
+ --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
1144
+ --tds-sidenav-item-nested-border-color-selected:var(--t-fill-color-neutral-010);
1145
+ }
1174
1146
  }
1175
1147
 
1176
- .tds-checkbox-description .tds-checkbox-description-invalid-icon{
1177
- display:var(--tds-checkbox-description-invalid-icon-display);
1178
- flex-shrink:0;
1179
- margin-top:calc(.5lh - .5em);
1180
- line-height:var(--tds-checkbox-description-line-height);
1148
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section){
1149
+ display:flex;
1181
1150
  }
1182
1151
 
1183
- .tds-checkbox--sm{
1184
- --tds-checkbox-line-height:1.35;
1185
- --tds-checkbox-input-size:var(--t-element-size-sm);
1186
- --tds-checkbox-font-size:var(--t-font-size-sm);
1187
- --tds-checkbox-description-font-size:var(--t-font-size-xs);
1188
- --tds-checkbox-description-line-height:1.3;
1152
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section,.tds-sidenav-collapse){
1153
+ flex-direction:column;
1154
+ gap:var(--t-spacing-half);
1155
+ width:100%;
1156
+ }
1157
+
1158
+ .tds-sidenav-section-list{
1159
+ width:100%;
1160
+ padding:0;
1161
+ margin:0;
1162
+ list-style:none;
1189
1163
  }
1190
1164
 
1191
- .tds-radio{
1192
- --tds-radio-font-size:var(--t-font-size-md);
1193
- --tds-radio-cursor:pointer;
1194
- --tds-radio-line-height:1.4;
1195
- --tds-radio-transition-property:border-width;
1165
+ .tds-sidenav-section-header{
1166
+ display:flex;
1167
+ align-items:baseline;
1168
+ justify-content:space-between;
1169
+ padding-top:var(--t-spacing-2);
1170
+ }
1196
1171
 
1197
- --tds-radio-input-size:var(--t-element-size-md);
1198
- --tds-radio-input-border-radius:var(--t-border-radius-round);
1199
- --tds-radio-input-border-color:var(--t-form-border-color);
1200
- --tds-radio-input-border-width:var(--t-form-border-width);
1201
- --tds-radio-input-background-color:transparent;
1172
+ .tds-sidenav-section-header h2{
1173
+ margin:0;
1174
+ font-size:var(--t-font-size-sm);
1175
+ font-weight:var(--t-font-weight-semibold);
1176
+ line-height:1.35;
1177
+ color:var(--t-text-color-secondary);
1178
+ text-transform:uppercase;
1179
+ }
1202
1180
 
1203
- --tds-radio-label-color:var(--t-form-color);
1181
+ .tds-sidenav-section:first-of-type .tds-sidenav-section-header{
1182
+ padding-top:0;
1183
+ }
1204
1184
 
1205
- --tds-radio-description-font-size:var(--t-font-size-sm);
1206
- --tds-radio-description-line-height:1.35;
1207
- --tds-radio-description-color:var(--t-text-color-secondary);
1185
+ .tds-sidenav-section-header [slot="label-actions"]{
1186
+ display:flex;
1187
+ gap:var(--t-spacing-half);
1188
+ align-items:center;
1189
+ }
1208
1190
 
1209
- position:relative;
1210
- display:inline-grid;
1211
- grid-template-columns:auto;
1212
- grid-auto-columns:1fr;
1213
- gap:var(--t-spacing-fourth) var(--t-spacing-1);
1214
- line-height:var(--tds-radio-line-height);
1215
- cursor:var(--tds-radio-cursor);
1216
- -webkit-user-select:none;
1217
- -moz-user-select:none;
1218
- user-select:none;
1191
+ .tds-sidenav-section [slot="section-actions"]{
1192
+ display:flex;
1193
+ gap:12px;
1194
+ align-items:center;
1195
+ min-height:42px;
1196
+ padding:var(--t-spacing-1) 0;
1219
1197
  }
1220
1198
 
1221
- .tds-radio label{
1222
- grid-area:1 / 2;
1223
- font-size:var(--tds-radio-font-size);
1224
- font-weight:var(--t-font-weight-normal);
1225
- color:var(--tds-radio-label-color);
1226
- cursor:var(--tds-radio-cursor);
1227
- }
1199
+ .tds-sidenav-section-list,
1200
+ .tds-sidenav-item{
1201
+ width:100%;
1202
+ padding:0;
1203
+ margin:0;
1204
+ }
1228
1205
 
1229
- .tds-radio input[type="radio"]{
1206
+ .tds-sidenav-item :is(a,button){
1230
1207
  position:relative;
1231
- width:1em;
1232
- height:1em;
1233
- margin:calc((1lh - 1em) / 2) 0 0;
1234
- font-size:var(--tds-radio-font-size);
1235
- line-height:inherit;
1208
+ display:flex;
1209
+ gap:12px;
1210
+ align-items:center;
1211
+ width:100%;
1212
+ padding:12px;
1213
+ overflow:hidden;
1214
+ font-size:var(--t-font-size-sm);
1215
+ line-height:18px;
1216
+ color:var(--t-text-color-headline);
1217
+ white-space:nowrap;
1218
+ text-decoration:none;
1236
1219
  -webkit-appearance:none;
1237
1220
  -moz-appearance:none;
1238
1221
  appearance:none;
1239
- cursor:var(--tds-radio-cursor);
1240
- background-color:var(--tds-radio-input-background-color);
1241
- border:var(--tds-radio-input-border-width) solid var(--tds-radio-input-border-color);
1242
- border-radius:var(--tds-radio-input-border-radius);
1243
- transition-timing-function:var(--t-ease-in-out);
1244
- transition-duration:var(--t-duration-200);
1245
- transition-property:var(--tds-radio-transition-property);
1222
+ cursor:pointer;
1223
+ background-color:var(--tds-sidenav-item-background, transparent);
1224
+ border:0;
1225
+ border-radius:var(--t-border-radius);
1226
+ transition:var(--tds-sidenav-item-transition);
1246
1227
  }
1247
1228
 
1248
- :is(.tds-radio input[type="radio"]):hover:not(:disabled){
1249
- --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
1250
- --tds-radio-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
1229
+ :is(.tds-sidenav-item :is(a,button)):not(:has(.prefix,.suffix)),:is(.tds-sidenav-item :is(a,button)) :is(:not(.prefix,.suffix)){
1230
+ display:block;
1231
+ flex:1;
1232
+ overflow:hidden;
1233
+ text-overflow:ellipsis;
1234
+ text-align:left;
1235
+ white-space:nowrap;
1251
1236
  }
1252
1237
 
1253
- :is(.tds-radio input[type="radio"]):focus-visible{
1254
- outline:var(--t-focus-ring-outline);
1255
- outline-offset:var(--t-focus-ring-offset);
1238
+ :is(.tds-sidenav-item :is(a,button)):hover,:is(.tds-sidenav-item :is(a,button)):focus-visible{
1239
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-hover);
1240
+ color:var(--t-text-color-headline);
1241
+ text-decoration:none;
1256
1242
  }
1257
1243
 
1258
- :is(.tds-radio input[type="radio"]):disabled{
1259
- pointer-events:none;
1244
+ :is(.tds-sidenav-item :is(a,button)):active{
1245
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-active);
1260
1246
  }
1261
1247
 
1262
- @media (prefers-reduced-motion: reduce){
1263
-
1264
- .tds-radio input[type="radio"]{
1265
- --tds-radio-transition-property:none;
1266
- }
1248
+ :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]){
1249
+ overflow:hidden;
1250
+ color:var(--tds-sidenav-item-icon-color);
1267
1251
  }
1268
1252
 
1269
- .tds-radio:has(input:checked){
1270
- --tds-radio-input-background-color:var(--t-form-background-color);
1271
- --tds-radio-input-border-color:var(--t-border-color-control-info);
1272
- --tds-radio-input-border-width:4px;
1273
- }
1253
+ :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{
1254
+ display:block;
1255
+ width:var(--tds-sidenav-item-icon-size);
1256
+ height:var(--tds-sidenav-item-icon-size);
1257
+ }
1274
1258
 
1275
- .tds-radio:has(input:checked) input:hover:not(:disabled){
1276
- --tds-radio-input-background-color:var(--t-form-background-color);
1277
- --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
1259
+ :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section{
1260
+ --tds-sidenav-indent:19px;
1278
1261
  }
1279
1262
 
1280
- .tds-radio:has(input:user-invalid){
1281
- --tds-radio-input-border-color:var(--t-form-border-color-error);
1282
- }
1283
-
1284
- .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
1285
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1286
- --tds-radio-input-background-color:var(--t-form-background-color-error);
1263
+ [aria-expanded="true"]:is(.tds-sidenav-item :is(a,button)) + .tds-sidenav-section-list{
1264
+ visibility:visible;
1265
+ block-size:auto;
1266
+ opacity:1;
1287
1267
  }
1288
1268
 
1289
- .tds-radio:has(input:disabled){
1290
- --tds-radio-input-background-color:var(--t-form-background-color-disabled);
1291
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
1269
+ .tds-sidenav-item.selected > :is(a,button),.tds-sidenav-item:has(.tds-sidenav-section):has(.selected) > :is(a,button){
1270
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-selected);
1271
+ --tds-sidenav-item-icon-color:var(--tds-sidenav-item-icon-color-selected);
1292
1272
 
1293
- --tds-radio-label-color:var(--t-form-color-disabled);
1294
- --tds-radio-description-color:var(--t-form-color-disabled);
1295
- --tds-radio-cursor:not-allowed;
1273
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-selected);
1274
+ font-weight:var(--t-font-weight-semibold);
1296
1275
  }
1297
1276
 
1298
- .tds-radio:has(input:disabled) input:checked{
1299
- --tds-radio-input-background-color:var(--t-form-background-color);
1300
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
1301
- }
1302
-
1303
- .tds-radio-description{
1304
- display:flex;
1305
- grid-area:2 / 2;
1306
- gap:var(--t-spacing-half);
1307
- align-items:flex-start;
1308
- margin:0;
1309
- font-size:var(--tds-radio-description-font-size);
1310
- line-height:var(--tds-radio-description-line-height);
1311
- color:var(--tds-radio-description-color);
1312
- cursor:text;
1313
- }
1277
+ .tds-sidenav-item:has(.tds-sidenav-section){
1278
+ display:flex;
1279
+ flex-direction:column;
1280
+ gap:var(--t-spacing-half);
1281
+ }
1314
1282
 
1315
- .tds-radio--sm{
1316
- --tds-radio-line-height:1.35;
1317
- --tds-radio-input-size:var(--t-element-size-sm);
1318
- --tds-radio-font-size:var(--t-font-size-sm);
1319
- --tds-radio-description-font-size:var(--t-font-size-xs);
1320
- --tds-radio-description-line-height:1.3;
1321
- }
1283
+ .tds-sidenav-item .tds-sidenav-section-list{
1284
+ --tds-sidenav-item-depth:1;
1285
+ gap:0;
1286
+ }
1322
1287
 
1288
+ .tds-sidenav-action--toggle + :is(.tds-sidenav-item .tds-sidenav-section-list){
1289
+ visibility:hidden;
1290
+ block-size:0;
1291
+ overflow-y:clip;
1292
+ opacity:0;
1293
+ transition:content-visibility var(--t-duration-400) allow-discrete, opacity var(--t-duration-400), block-size var(--t-duration-400);
1294
+ }
1323
1295
 
1324
- :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{
1325
- -webkit-appearance:none;
1326
- appearance:none;
1296
+ :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list{
1297
+ --tds-sidenav-item-depth:2;
1327
1298
  }
1328
1299
 
1329
- [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
1330
- inline-size:1em;
1331
- block-size:2em;
1300
+ :is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
1301
+ min-height:var(--t-element-size-2xl);
1302
+ padding-block:9px;
1303
+ padding-left:calc((var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth)) + var(--tds-sidenav-indent) + var(--t-spacing-fourth));
1304
+ line-height:1;
1305
+ background-color:transparent;
1332
1306
  }
1333
1307
 
1334
- @supports (field-sizing: content){
1335
- .tds-input--auto-width{
1336
- inline-size:-moz-fit-content;
1337
- inline-size:fit-content;
1338
- min-inline-size:min(100%, 122px);
1339
- }
1308
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::before{
1309
+ position:absolute;
1310
+ top:0;
1311
+ bottom:0;
1312
+ left:calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
1313
+ width:2px;
1314
+ content:"";
1315
+ background-color:var(--tds-sidenav-item-nested-border-color);
1316
+ transition:var(--tds-sidenav-item-transition);
1317
+ }
1340
1318
 
1341
- .tds-input--auto-width input{
1342
- field-sizing:content;
1343
- inline-size:auto;
1344
- }
1345
- }
1319
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::after{
1320
+ position:absolute;
1321
+ inset:0 0 0 calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
1322
+ z-index:-1;
1323
+ height:100%;
1324
+ content:"";
1325
+ background-color:var(--tds-sidenav-item-nested-background);
1326
+ border-radius:0 var(--t-border-radius) var(--t-border-radius) 0;
1327
+ transition:var(--tds-sidenav-item-transition);
1328
+ }
1346
1329
 
1347
- .tds-combo-box{
1348
- --tds-combo-box-button-offset:4px;
1349
- }
1330
+ :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)){
1331
+ display:block;
1332
+ text-align:left;
1333
+ white-space:normal;
1334
+ }
1350
1335
 
1351
- .tds-combo-box[data-open] .tds-combo-box-button > svg{
1352
- transform:rotate(.5turn);
1353
- }
1336
+ :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{
1337
+ --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-hover);
1338
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-hover);
1339
+ }
1354
1340
 
1355
- .tds-combo-box--lg{
1356
- --tds-combo-box-button-offset:5px;
1357
- }
1341
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):active{
1342
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-active);
1343
+ }
1358
1344
 
1359
- .tds-combo-box-field:has([readonly]) .tds-combo-box-button{
1360
- display:none;
1361
- }
1345
+ .selected:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
1346
+ --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-selected);
1347
+ font-weight:var(--t-font-weight-medium);
1348
+ }
1362
1349
 
1363
- .tds-combo-box-input{
1350
+ .tds-sidenav-responsive-header{
1364
1351
  display:flex;
1365
- flex:1;
1352
+ gap:var(--t-spacing-2);
1366
1353
  align-items:center;
1367
- padding-block:var(--tds-field-padding-block);
1368
- padding-inline:var(--tds-field-padding-inline);
1369
- font-family:inherit;
1370
- font-size:inherit;
1371
- color:inherit;
1372
- outline:0;
1373
- background:transparent;
1374
- border:0;
1354
+ width:100%;
1375
1355
  }
1376
1356
 
1377
- .tds-combo-box-input:has( + .tds-combo-box-button){
1378
- padding-inline-end:0;
1357
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle{
1358
+ order:0;
1379
1359
  }
1380
1360
 
1381
- .tds-combo-box-input::-moz-placeholder{
1382
- color:var(--tds-field-placeholder-color);
1383
- -moz-user-select:none;
1384
- user-select:none;
1361
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-label{
1362
+ flex:1;
1363
+ order:1;
1364
+ margin:0;
1365
+ font-size:var(--t-font-size-lg);
1366
+ font-weight:var(--t-font-weight-medium);
1367
+ color:var(--t-text-color-headline);
1385
1368
  }
1386
1369
 
1387
- .tds-combo-box-input::placeholder{
1388
- color:var(--tds-field-placeholder-color);
1389
- -webkit-user-select:none;
1390
- -moz-user-select:none;
1391
- user-select:none;
1370
+ @media (max-width: 719px){
1371
+ .tds-sidenav-collapse{
1372
+ z-index:10001;
1373
+ display:none;
1374
+ max-width:min(448px, calc(100vw - 48px));
1375
+ padding:0;
1376
+ margin:12px 0;
1377
+ position-area:bottom span-right;
1378
+ overflow:hidden;
1379
+ outline:0;
1380
+ background:var(--t-surface-color-card);
1381
+ border:0;
1382
+ border-radius:6px;
1383
+ box-shadow:0 8px 20px 0 rgba(0, 0, 0, .25);
1384
+ opacity:var(--tds-sidenav-collapse-open-opacity);
1385
+ transform:var(--tds-sidenav-collapse-open-transform);
1386
+ transition:var(--tds-sidenav-collapse-transition-enter);
1387
+ will-change:transform;
1392
1388
  }
1393
1389
 
1394
- .tds-combo-box-button{
1395
- flex-shrink:0;
1396
- align-self:center;
1397
- inline-size:calc(var(--tds-field-min-height) - (var(--tds-combo-box-button-offset) * 2));
1398
- block-size:calc(var(--tds-field-min-height) - (var(--tds-combo-box-button-offset) * 2));
1399
- padding:0;
1400
- margin-inline-end:var(--tds-combo-box-button-offset);
1401
- }
1402
-
1403
- .tds-combo-box-button > svg{
1404
- inline-size:var(--tds-field-font-size);
1405
- block-size:var(--tds-field-font-size);
1406
- transition:transform var(--t-duration-300) var(--t-ease-in-out);
1390
+ .tds-sidenav-scroll-container{
1391
+ --webkit-overflow-scrolling:touch;
1392
+ display:block;
1393
+ width:100%;
1394
+ height:-moz-fit-content;
1395
+ height:fit-content;
1396
+ padding:var(--t-spacing-2);
1397
+ overflow-y:auto;
1407
1398
  }
1408
1399
 
1409
- .tds-combo-box-popover{
1410
- width:var(--trigger-width);
1411
- max-block-size:inherit;
1412
- padding:var(--t-spacing-1);
1413
- overflow:auto;
1414
- scroll-behavior:smooth;
1415
- overscroll-behavior:none;
1416
- -webkit-user-select:none;
1417
- -moz-user-select:none;
1418
- user-select:none;
1419
- outline:0;
1420
- scrollbar-color:#0004 #0000;
1421
- scrollbar-width:thin;
1422
- background:var(--t-surface-color-card);
1423
- background-clip:padding-box;
1424
- border:1px solid var(--t-border-color);
1425
- border-radius:var(--t-border-radius);
1426
- box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
1427
- }
1428
-
1429
- .tds-combo-box-popover[data-entering]{
1430
- animation:tds-combo-box-popover var(--t-duration-300) var(--t-ease-out);
1400
+ .tds-sidenav-item :is(a, button) :is(.prefix){
1401
+ display:none;
1431
1402
  }
1403
+ @supports selector(:popover-open){
1404
+ .tds-sidenav-collapse:popover-open{
1405
+ display:flex;
1406
+ }
1432
1407
 
1433
- .tds-combo-box-popover[data-exiting]{
1434
- animation:tds-combo-box-popover var(--t-duration-200) var(--t-ease-in) reverse;
1408
+ .tds-sidenav-collapse:not(:popover-open){
1409
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
1410
+ transition:var(--tds-sidenav-collapse-transition-exit);
1411
+ }
1412
+
1413
+ @starting-style{
1414
+ .tds-sidenav-collapse:popover-open{
1415
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
1416
+ transform:var(--tds-sidenav-collapse-closed-transform);
1417
+ }
1418
+ }
1435
1419
  }
1420
+ @supports not selector(:popover-open){
1421
+ .tds-sidenav-collapse.\:popover-open{
1422
+ display:flex;
1423
+ }
1436
1424
 
1437
- .tds-combo-box-popover[data-entering],.tds-combo-box-popover[data-exiting]{
1438
- will-change:opacity, transform;
1425
+ .tds-sidenav-collapse:not(.\:popover-open){
1426
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
1427
+ transition:var(--tds-sidenav-collapse-transition-exit);
1428
+ }
1439
1429
  }
1430
+ }
1440
1431
 
1441
- @keyframes tds-combo-box-popover{
1442
- from{
1443
- opacity:0;
1444
- transform:translateY(-8px);
1432
+ @media (min-width: 720px){
1433
+ .tds-sidenav-responsive-header{
1434
+ display:none;
1445
1435
  }
1446
1436
  }
1447
1437
 
1448
- @media (prefers-reduced-motion: reduce){
1449
- .tds-combo-box-popover[data-entering],.tds-combo-box-popover[data-exiting]{
1450
- animation:none;
1438
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
1439
+ display:none;
1451
1440
  }
1452
1441
 
1453
- .tds-combo-box-button > svg{
1454
- transition:none;
1455
- }
1456
- }
1442
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
1443
+ display:block;
1444
+ }
1457
1445
 
1458
- .tds-combo-box-list{
1459
- padding:0;
1460
- margin:0;
1461
- }
1446
+ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1447
+ display:flex;
1448
+ flex-direction:column;
1449
+ }
1462
1450
 
1463
- .tds-combo-box-list-item{
1464
- display:block;
1465
- padding-block:var(--t-spacing-1);
1466
- padding-inline:var(--t-spacing-2) var(--t-spacing-1);
1467
- overflow:hidden;
1468
- text-overflow:ellipsis;
1469
- font-size:1rem;
1470
- color:var(--t-text-color);
1471
- white-space:nowrap;
1472
- cursor:default;
1473
- border-radius:var(--t-border-radius);
1474
- }
1475
1451
 
1476
- .tds-combo-box-list-item[data-hovered]:not([data-disabled]),.tds-combo-box-list-item[data-focus-visible]{
1477
- background:var(--t-fill-color-neutral-070);
1478
- }
1452
+ :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{
1453
+ -webkit-appearance:none;
1454
+ appearance:none;
1455
+ }
1479
1456
 
1480
- .tds-combo-box-list-item[data-selected]{
1481
- background:var(--t-fill-color-button-interaction-ghost-active);
1482
- }
1457
+ [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
1458
+ inline-size:1em;
1459
+ block-size:2em;
1460
+ }
1483
1461
 
1484
- .tds-combo-box-list-item[data-pressed]:not([data-disabled]){
1485
- background:var(--t-fill-color-neutral-060);
1462
+ @supports (field-sizing: content){
1463
+ .tds-input--auto-width{
1464
+ inline-size:-moz-fit-content;
1465
+ inline-size:fit-content;
1466
+ min-inline-size:min(100%, 122px);
1486
1467
  }
1487
1468
 
1488
- .tds-combo-box-list-item[data-disabled]{
1489
- color:var(--t-form-color-disabled);
1490
- cursor:not-allowed;
1469
+ .tds-input--auto-width input{
1470
+ field-sizing:content;
1471
+ inline-size:auto;
1491
1472
  }
1473
+ }
1492
1474
 
1493
- .tds-combo-box-list-item[data-disabled][data-hovered]{
1494
- background:transparent;
1495
- }
1475
+ .tds-number-stepper{
1476
+ --tds-number-stepper-button-offset:4px;
1477
+ --tds-number-stepper-button-gap:2px;
1478
+ }
1496
1479
 
1497
- .tds-combo-box-empty-state{
1498
- position:relative;
1499
- min-block-size:var(--t-spacing-3);
1500
- padding-block:var(--t-spacing-1);
1501
- padding-inline:var(--t-spacing-2);
1502
- font-size:var(--t-font-size-md);
1503
- color:var(--t-text-color-secondary);
1480
+ .tds-number-stepper--lg{
1481
+ --tds-number-stepper-button-offset:5px;
1482
+ --tds-number-stepper-button-gap:4px;
1504
1483
  }
1505
1484
 
1506
- .tds-combo-box-load-more{
1507
- position:relative;
1508
- min-block-size:calc(var(--t-spacing-3) + var(--t-spacing-1));
1485
+ .tds-number-stepper-field:has([readonly]) .tds-number-stepper-button{
1486
+ display:none;
1509
1487
  }
1510
1488
 
1511
- .tds-combo-box-empty-state,
1512
- .tds-combo-box-load-more{
1513
- --tds-loading-spinner-visibility:visible;
1514
- --tds-loading-spinner-animation-play-state:running;
1489
+ .tds-number-stepper-input{
1490
+ display:flex;
1491
+ flex:1;
1492
+ align-items:center;
1493
+ min-inline-size:0;
1494
+ padding-block:var(--tds-field-padding-block);
1495
+ padding-inline:var(--tds-field-padding-inline);
1496
+ font-family:inherit;
1497
+ font-size:inherit;
1498
+ color:inherit;
1499
+ outline:0;
1500
+ background:transparent;
1501
+ border:0;
1515
1502
  }
1516
1503
 
1517
- .tds-combo-box-list-section:not(:first-child){
1518
- margin-block-start:var(--t-spacing-half);
1504
+ .tds-number-stepper-input::-webkit-inner-spin-button,.tds-number-stepper-input::-webkit-outer-spin-button{
1505
+ margin:0;
1506
+ -webkit-appearance:none;
1507
+ appearance:none;
1519
1508
  }
1520
1509
 
1521
- .tds-combo-box-section-header{
1522
- padding-block:var(--t-spacing-1);
1523
- padding-inline:var(--t-spacing-1);
1524
- font-size:var(--t-font-size-sm);
1525
- font-weight:var(--t-font-weight-semibold);
1526
- color:var(--t-text-color-secondary);
1510
+ .tds-number-stepper-button{
1511
+ flex-shrink:0;
1512
+ align-self:center;
1513
+ inline-size:calc(var(--tds-field-min-height) - (var(--tds-number-stepper-button-offset) * 2));
1514
+ block-size:calc(var(--tds-field-min-height) - (var(--tds-number-stepper-button-offset) * 2));
1515
+ padding:0;
1527
1516
  }
1528
1517
 
1529
- .tds-checkbox-group{
1530
- --tds-checkbox-group-font-size:var(--t-font-size-md);
1531
- --tds-checkbox-group-line-height:1.4;
1532
- --tds-checkbox-group-gap:var(--t-spacing-1);
1518
+ .tds-number-stepper-button + .tds-number-stepper-button{
1519
+ margin-inline-start:var(--tds-number-stepper-button-gap);
1520
+ }
1533
1521
 
1534
- --tds-checkbox-group-legend-margin-bottom:var(--tds-checkbox-group-gap);
1522
+ .tds-number-stepper-button:last-of-type{
1523
+ margin-inline-end:var(--tds-number-stepper-button-offset);
1524
+ }
1535
1525
 
1536
- --tds-checkbox-group-description-font-size:var(--t-font-size-sm);
1537
- --tds-checkbox-group-description-line-height:1.35;
1538
- --tds-checkbox-group-description-color:var(--t-text-color-secondary);
1539
- --tds-checkbox-group-description-invalid-icon-display:none;
1526
+ .tds-radio-group{
1527
+ --tds-radio-group-font-size:var(--t-font-size-md);
1528
+ --tds-radio-group-line-height:1.4;
1529
+ --tds-radio-group-gap:var(--t-spacing-1);
1530
+
1531
+ --tds-radio-group-legend-margin-bottom:var(--tds-radio-group-gap);
1532
+
1533
+ --tds-radio-group-description-font-size:var(--t-font-size-sm);
1534
+ --tds-radio-group-description-line-height:1.35;
1535
+ --tds-radio-group-description-color:var(--t-text-color-secondary);
1536
+ --tds-radio-group-description-invalid-icon-display:none;
1540
1537
  display:flex;
1541
1538
  flex-direction:column;
1542
- gap:var(--tds-checkbox-group-gap);
1539
+ gap:var(--tds-radio-group-gap);
1543
1540
  padding:0;
1544
1541
  margin:0;
1545
1542
 
1546
- font-size:var(--tds-checkbox-group-font-size);
1547
- line-height:var(--tds-checkbox-group-line-height);
1543
+ font-size:var(--tds-radio-group-font-size);
1544
+ line-height:var(--tds-radio-group-line-height);
1548
1545
  border:0;
1549
1546
  }
1550
1547
 
1551
- .tds-checkbox-group legend{
1548
+ .tds-radio-group legend{
1552
1549
  padding:0;
1553
- margin-bottom:var(--tds-checkbox-group-legend-margin-bottom);
1550
+ margin-bottom:var(--tds-radio-group-legend-margin-bottom);
1554
1551
  }
1555
1552
 
1556
- .tds-checkbox-group:has(.tds-checkbox-group-description){
1557
- --tds-checkbox-group-legend-margin-bottom:var(--t-spacing-fourth);
1553
+ .tds-radio-group:has(.tds-radio-group-description){
1554
+ --tds-radio-group-legend-margin-bottom:var(--t-spacing-fourth);
1558
1555
  }
1559
1556
 
1560
- .tds-checkbox-group[aria-invalid="true"]{
1561
- --tds-checkbox-group-description-color:var(--t-text-color-status-error);
1562
- --tds-checkbox-group-description-invalid-icon-display:inline-block;
1557
+ .tds-radio-group[aria-invalid="true"]{
1558
+ --tds-radio-group-description-color:var(--t-text-color-status-error);
1559
+ --tds-radio-group-description-invalid-icon-display:inline-block;
1563
1560
  }
1564
1561
 
1565
- .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) legend::after{
1562
+ .tds-radio-group[aria-invalid="true"] .tds-radio{
1563
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
1564
+ }
1565
+
1566
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
1567
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1568
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
1569
+ }
1570
+
1571
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
1572
+ --tds-radio-input-background-color:var(--t-form-background-color);
1573
+ }
1574
+
1575
+ .tds-radio-group:has(input:required) legend::after{
1566
1576
  margin-left:.25ch;
1567
1577
  color:var(--t-text-color-status-error);
1568
1578
  content:"*";
1569
1579
  }
1570
1580
 
1571
- .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
1572
- content:none;
1573
- }
1574
-
1575
- .tds-checkbox-group-fields{
1581
+ .tds-radio-group-fields{
1576
1582
  display:flex;
1577
1583
  flex-direction:column;
1578
- gap:var(--tds-checkbox-group-gap);
1584
+ gap:var(--tds-radio-group-gap);
1579
1585
  align-items:flex-start;
1580
1586
  }
1581
1587
 
1582
- .tds-checkbox-group-description{
1588
+ .tds-radio-group-description{
1583
1589
  display:flex;
1584
1590
  gap:var(--t-spacing-half);
1585
1591
  align-items:flex-start;
1586
1592
  margin:0;
1587
- font-size:var(--tds-checkbox-group-description-font-size);
1588
- line-height:var(--tds-checkbox-group-description-line-height);
1589
- color:var(--tds-checkbox-group-description-color);
1593
+ font-size:var(--tds-radio-group-description-font-size);
1594
+ line-height:var(--tds-radio-group-description-line-height);
1595
+ color:var(--tds-radio-group-description-color);
1590
1596
  cursor:text;
1591
1597
  }
1592
1598
 
1593
- .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
1594
- display:var(--tds-checkbox-group-description-invalid-icon-display);
1599
+ .tds-radio-group-description .tds-radio-group-description-invalid-icon{
1600
+ display:var(--tds-radio-group-description-invalid-icon-display);
1595
1601
  flex-shrink:0;
1596
1602
  margin-top:calc(.5lh - .5em);
1597
- line-height:var(--tds-checkbox-group-description-line-height);
1603
+ line-height:var(--tds-radio-group-description-line-height);
1598
1604
  }
1599
1605
 
1600
- .tds-checkbox-group--sm{
1601
- --tds-checkbox-group-line-height:1.35;
1602
- --tds-checkbox-group-font-size:var(--t-font-size-sm);
1603
- --tds-checkbox-group-description-font-size:var(--t-font-size-xs);
1604
- --tds-checkbox-group-description-line-height:1.3;
1606
+ .tds-radio-group--sm{
1607
+ --tds-radio-group-line-height:1.35;
1608
+ --tds-radio-group-font-size:var(--t-font-size-sm);
1609
+ --tds-radio-group-description-font-size:var(--t-font-size-xs);
1610
+ --tds-radio-group-description-line-height:1.3;
1605
1611
  }
1606
1612
 
1607
- .tds-radio-group{
1608
- --tds-radio-group-font-size:var(--t-font-size-md);
1609
- --tds-radio-group-line-height:1.4;
1610
- --tds-radio-group-gap:var(--t-spacing-1);
1613
+ .tds-radio{
1614
+ --tds-radio-font-size:var(--t-font-size-md);
1615
+ --tds-radio-cursor:pointer;
1616
+ --tds-radio-line-height:1.4;
1617
+ --tds-radio-transition-property:border-width;
1611
1618
 
1612
- --tds-radio-group-legend-margin-bottom:var(--tds-radio-group-gap);
1619
+ --tds-radio-input-size:var(--t-element-size-md);
1620
+ --tds-radio-input-border-radius:var(--t-border-radius-round);
1621
+ --tds-radio-input-border-color:var(--t-form-border-color);
1622
+ --tds-radio-input-border-width:var(--t-form-border-width);
1623
+ --tds-radio-input-background-color:transparent;
1613
1624
 
1614
- --tds-radio-group-description-font-size:var(--t-font-size-sm);
1615
- --tds-radio-group-description-line-height:1.35;
1616
- --tds-radio-group-description-color:var(--t-text-color-secondary);
1617
- --tds-radio-group-description-invalid-icon-display:none;
1618
- display:flex;
1619
- flex-direction:column;
1620
- gap:var(--tds-radio-group-gap);
1621
- padding:0;
1622
- margin:0;
1625
+ --tds-radio-label-color:var(--t-form-color);
1623
1626
 
1624
- font-size:var(--tds-radio-group-font-size);
1625
- line-height:var(--tds-radio-group-line-height);
1626
- border:0;
1627
+ --tds-radio-description-font-size:var(--t-font-size-sm);
1628
+ --tds-radio-description-line-height:1.35;
1629
+ --tds-radio-description-color:var(--t-text-color-secondary);
1630
+
1631
+ position:relative;
1632
+ display:inline-grid;
1633
+ grid-template-columns:auto;
1634
+ grid-auto-columns:1fr;
1635
+ gap:var(--t-spacing-fourth) var(--t-spacing-1);
1636
+ line-height:var(--tds-radio-line-height);
1637
+ cursor:var(--tds-radio-cursor);
1638
+ -webkit-user-select:none;
1639
+ -moz-user-select:none;
1640
+ user-select:none;
1627
1641
  }
1628
1642
 
1629
- .tds-radio-group legend{
1630
- padding:0;
1631
- margin-bottom:var(--tds-radio-group-legend-margin-bottom);
1643
+ .tds-radio label{
1644
+ grid-area:1 / 2;
1645
+ font-size:var(--tds-radio-font-size);
1646
+ font-weight:var(--t-font-weight-normal);
1647
+ color:var(--tds-radio-label-color);
1648
+ cursor:var(--tds-radio-cursor);
1649
+ }
1650
+
1651
+ .tds-radio input[type="radio"]{
1652
+ position:relative;
1653
+ width:1em;
1654
+ height:1em;
1655
+ margin:calc((1lh - 1em) / 2) 0 0;
1656
+ font-size:var(--tds-radio-font-size);
1657
+ line-height:inherit;
1658
+ -webkit-appearance:none;
1659
+ -moz-appearance:none;
1660
+ appearance:none;
1661
+ cursor:var(--tds-radio-cursor);
1662
+ background-color:var(--tds-radio-input-background-color);
1663
+ border:var(--tds-radio-input-border-width) solid var(--tds-radio-input-border-color);
1664
+ border-radius:var(--tds-radio-input-border-radius);
1665
+ transition-timing-function:var(--t-ease-in-out);
1666
+ transition-duration:var(--t-duration-200);
1667
+ transition-property:var(--tds-radio-transition-property);
1668
+ }
1669
+
1670
+ :is(.tds-radio input[type="radio"]):hover:not(:disabled){
1671
+ --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
1672
+ --tds-radio-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
1673
+ }
1674
+
1675
+ :is(.tds-radio input[type="radio"]):focus-visible{
1676
+ outline:var(--t-focus-ring-outline);
1677
+ outline-offset:var(--t-focus-ring-offset);
1678
+ }
1679
+
1680
+ :is(.tds-radio input[type="radio"]):disabled{
1681
+ pointer-events:none;
1682
+ }
1683
+
1684
+ @media (prefers-reduced-motion: reduce){
1685
+
1686
+ .tds-radio input[type="radio"]{
1687
+ --tds-radio-transition-property:none;
1632
1688
  }
1689
+ }
1633
1690
 
1634
- .tds-radio-group:has(.tds-radio-group-description){
1635
- --tds-radio-group-legend-margin-bottom:var(--t-spacing-fourth);
1691
+ .tds-radio:has(input:checked){
1692
+ --tds-radio-input-background-color:var(--t-form-background-color);
1693
+ --tds-radio-input-border-color:var(--t-border-color-control-info);
1694
+ --tds-radio-input-border-width:4px;
1636
1695
  }
1637
1696
 
1638
- .tds-radio-group[aria-invalid="true"]{
1639
- --tds-radio-group-description-color:var(--t-text-color-status-error);
1640
- --tds-radio-group-description-invalid-icon-display:inline-block;
1697
+ .tds-radio:has(input:checked) input:hover:not(:disabled){
1698
+ --tds-radio-input-background-color:var(--t-form-background-color);
1699
+ --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
1700
+ }
1701
+
1702
+ .tds-radio:has(input:user-invalid){
1703
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
1641
1704
  }
1642
1705
 
1643
- .tds-radio-group[aria-invalid="true"] .tds-radio{
1644
- --tds-radio-input-border-color:var(--t-form-border-color-error);
1706
+ .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
1707
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1708
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
1645
1709
  }
1646
1710
 
1647
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
1648
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1649
- --tds-radio-input-background-color:var(--t-form-background-color-error);
1650
- }
1711
+ .tds-radio:has(input:disabled){
1712
+ --tds-radio-input-background-color:var(--t-form-background-color-disabled);
1713
+ --tds-radio-input-border-color:var(--t-form-border-color-disabled);
1651
1714
 
1652
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
1653
- --tds-radio-input-background-color:var(--t-form-background-color);
1654
- }
1715
+ --tds-radio-label-color:var(--t-form-color-disabled);
1716
+ --tds-radio-description-color:var(--t-form-color-disabled);
1717
+ --tds-radio-cursor:not-allowed;
1718
+ }
1655
1719
 
1656
- .tds-radio-group:has(input:required) legend::after{
1657
- margin-left:.25ch;
1658
- color:var(--t-text-color-status-error);
1659
- content:"*";
1720
+ .tds-radio:has(input:disabled) input:checked{
1721
+ --tds-radio-input-background-color:var(--t-form-background-color);
1722
+ --tds-radio-input-border-color:var(--t-form-border-color-disabled);
1660
1723
  }
1661
1724
 
1662
- .tds-radio-group-fields{
1663
- display:flex;
1664
- flex-direction:column;
1665
- gap:var(--tds-radio-group-gap);
1666
- align-items:flex-start;
1667
- }
1668
-
1669
- .tds-radio-group-description{
1725
+ .tds-radio-description{
1670
1726
  display:flex;
1727
+ grid-area:2 / 2;
1671
1728
  gap:var(--t-spacing-half);
1672
1729
  align-items:flex-start;
1673
1730
  margin:0;
1674
- font-size:var(--tds-radio-group-description-font-size);
1675
- line-height:var(--tds-radio-group-description-line-height);
1676
- color:var(--tds-radio-group-description-color);
1731
+ font-size:var(--tds-radio-description-font-size);
1732
+ line-height:var(--tds-radio-description-line-height);
1733
+ color:var(--tds-radio-description-color);
1677
1734
  cursor:text;
1678
1735
  }
1679
1736
 
1680
- .tds-radio-group-description .tds-radio-group-description-invalid-icon{
1681
- display:var(--tds-radio-group-description-invalid-icon-display);
1682
- flex-shrink:0;
1683
- margin-top:calc(.5lh - .5em);
1684
- line-height:var(--tds-radio-group-description-line-height);
1685
- }
1686
-
1687
- .tds-radio-group--sm{
1688
- --tds-radio-group-line-height:1.35;
1689
- --tds-radio-group-font-size:var(--t-font-size-sm);
1690
- --tds-radio-group-description-font-size:var(--t-font-size-xs);
1691
- --tds-radio-group-description-line-height:1.3;
1692
- }
1693
-
1694
- .tds-number-stepper{
1695
- --tds-number-stepper-button-offset:4px;
1696
- --tds-number-stepper-button-gap:2px;
1697
- }
1698
-
1699
- .tds-number-stepper--lg{
1700
- --tds-number-stepper-button-offset:5px;
1701
- --tds-number-stepper-button-gap:4px;
1702
- }
1703
-
1704
- .tds-number-stepper-field:has([readonly]) .tds-number-stepper-button{
1705
- display:none;
1706
- }
1707
-
1708
- .tds-number-stepper-input{
1709
- display:flex;
1710
- flex:1;
1711
- align-items:center;
1712
- min-inline-size:0;
1713
- padding-block:var(--tds-field-padding-block);
1714
- padding-inline:var(--tds-field-padding-inline);
1715
- font-family:inherit;
1716
- font-size:inherit;
1717
- color:inherit;
1718
- outline:0;
1719
- background:transparent;
1720
- border:0;
1721
- }
1722
-
1723
- .tds-number-stepper-input::-webkit-inner-spin-button,.tds-number-stepper-input::-webkit-outer-spin-button{
1724
- margin:0;
1725
- -webkit-appearance:none;
1726
- appearance:none;
1727
- }
1728
-
1729
- .tds-number-stepper-button{
1730
- flex-shrink:0;
1731
- align-self:center;
1732
- inline-size:calc(var(--tds-field-min-height) - (var(--tds-number-stepper-button-offset) * 2));
1733
- block-size:calc(var(--tds-field-min-height) - (var(--tds-number-stepper-button-offset) * 2));
1734
- padding:0;
1737
+ .tds-radio--sm{
1738
+ --tds-radio-line-height:1.35;
1739
+ --tds-radio-input-size:var(--t-element-size-sm);
1740
+ --tds-radio-font-size:var(--t-font-size-sm);
1741
+ --tds-radio-description-font-size:var(--t-font-size-xs);
1742
+ --tds-radio-description-line-height:1.3;
1735
1743
  }
1736
1744
 
1737
- .tds-number-stepper-button + .tds-number-stepper-button{
1738
- margin-inline-start:var(--tds-number-stepper-button-gap);
1739
- }
1740
-
1741
- .tds-number-stepper-button:last-of-type{
1742
- margin-inline-end:var(--tds-number-stepper-button-offset);
1743
- }
1744
-
1745
1745
  .tds-input:has(textarea){
1746
1746
  --tds-input-padding-block:6px;
1747
1747
  --tds-input-resizer-size:var(--t-element-size-sm);
@@ -1847,13 +1847,6 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1847
1847
  }
1848
1848
  }
1849
1849
 
1850
- .tds-time-field-input{
1851
- --tds-field-date-segment-padding-inline:1px;
1852
- padding-block:var(--tds-field-padding-block);
1853
- padding-inline:var(--tds-field-padding-inline);
1854
- font-variant-numeric:tabular-nums;
1855
- }
1856
-
1857
1850
  .tds-input{
1858
1851
  --tds-input-border-color:var(--t-form-border-color);
1859
1852
  --tds-input-border-color-hover:var(--t-form-border-color-hover);
@@ -2075,66 +2068,214 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
2075
2068
  border-color:var(--tds-field-border-color-hover);
2076
2069
  }
2077
2070
 
2078
- .tds-field-control[data-focus-within]{
2079
- outline-color:var(--t-focus-ring-color);
2080
- outline-offset:var(--t-focus-ring-offset);
2081
- border-color:var(--tds-field-border-color-active);
2071
+ .tds-field-control[data-focus-within]{
2072
+ outline-color:var(--t-focus-ring-color);
2073
+ outline-offset:var(--t-focus-ring-offset);
2074
+ border-color:var(--tds-field-border-color-active);
2075
+ }
2076
+
2077
+ .tds-field-control[data-readonly],.tds-field-control:has([data-readonly]),.tds-field-control:has([readonly]){
2078
+ --tds-field-border-color:var(--t-form-border-color-readonly);
2079
+ --tds-field-border-color-hover:var(--t-form-border-color-readonly);
2080
+ --tds-field-background-color:var(--t-form-background-color-readonly);
2081
+ color:var(--t-form-color-readonly);
2082
+ }
2083
+
2084
+ [data-focus-within]:is(.tds-field-control[data-readonly],.tds-field-control:has([data-readonly]),.tds-field-control:has([readonly])){
2085
+ border-color:var(--t-form-border-color-hover);
2086
+ }
2087
+
2088
+ .tds-field-description{
2089
+ display:flex;
2090
+ gap:var(--t-spacing-half);
2091
+ align-items:flex-start;
2092
+ margin:0;
2093
+ font-size:var(--t-font-size-sm);
2094
+ line-height:1.35;
2095
+ color:var(--tds-field-description-color, var(--t-text-color-secondary));
2096
+ cursor:text;
2097
+ }
2098
+
2099
+ .tds-field-description .tds-field-description-invalid-icon{
2100
+ display:var(--tds-field-description-invalid-icon-display, none);
2101
+ flex-shrink:0;
2102
+ margin-block-start:calc(.5lh - .5em);
2103
+ line-height:1.35;
2104
+ }
2105
+
2106
+ .tds-field-date-segment{
2107
+ padding-inline:var(--tds-field-date-segment-padding-inline, 2px);
2108
+ text-align:end;
2109
+ text-wrap:nowrap;
2110
+ caret-color:transparent;
2111
+ border-radius:var(--t-border-radius-sm);
2112
+ }
2113
+
2114
+ .tds-field-date-segment[data-placeholder]{
2115
+ color:var(--tds-field-placeholder-color);
2116
+ }
2117
+
2118
+ .tds-field-date-segment[data-focused]{
2119
+ color:var(--t-text-color-inverted);
2120
+ outline:0;
2121
+ background-color:var(--t-fill-color-interaction);
2122
+ }
2123
+
2124
+ .tds-field-date-segment-separator{
2125
+ padding-inline:0;
2126
+ color:var(--tds-field-placeholder-color);
2127
+ }
2128
+
2129
+ .tds-field-date-segment:not([data-placeholder]) + .tds-field-date-segment-separator{
2130
+ color:var(--tds-field-color);
2131
+ }
2132
+
2133
+ .tds-toggle-switch{
2134
+ --tds-toggle-switch-font-size:var(--t-font-size-md);
2135
+ --tds-toggle-switch-column-gap:var(--t-spacing-1);
2136
+ --tds-toggle-switch-cursor:pointer;
2137
+ --tds-toggle-switch-display:inline-grid;
2138
+ --tds-toggle-switch-line-height:1.4;
2139
+
2140
+ --tds-toggle-switch-label-color:var(--t-form-color);
2141
+
2142
+ --tds-toggle-switch-track-width:var(--t-container-size-md);
2143
+ --tds-toggle-switch-track-outline:none;
2144
+ --tds-toggle-switch-track-height:var(--t-container-size-xs);
2145
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color);
2146
+ --tds-toggle-switch-track-transition:background-color var(--t-duration-100) var(--t-ease-in-out);
2147
+
2148
+ --tds-toggle-switch-thumb-size:var(--t-element-size-md);
2149
+ --tds-toggle-switch-thumb-transform:translateX(0);
2150
+ --tds-toggle-switch-thumb-transition:transform var(--t-duration-200) var(--t-ease-in-out);
2151
+
2152
+ --tds-toggle-switch-description-font-size:var(--t-font-size-sm);
2153
+ --tds-toggle-switch-description-line-height:1.35;
2154
+ --tds-toggle-switch-description-color:var(--t-text-color-secondary);
2155
+ position:relative;
2156
+
2157
+ display:var(--tds-toggle-switch-display);
2158
+ grid-template-columns:auto;
2159
+ grid-auto-columns:1fr;
2160
+ gap:var(--t-spacing-fourth) var(--tds-toggle-switch-column-gap);
2161
+ -webkit-user-select:none;
2162
+ -moz-user-select:none;
2163
+ user-select:none;
2164
+ }
2165
+
2166
+ .tds-toggle-switch input[type="checkbox"]{
2167
+ position:absolute;
2168
+ width:var(--tds-toggle-switch-track-width);
2169
+ height:var(--tds-toggle-switch-track-height);
2170
+ margin:0;
2171
+ -webkit-appearance:none;
2172
+ -moz-appearance:none;
2173
+ appearance:none;
2174
+ cursor:var(--tds-toggle-switch-cursor);
2175
+ outline:var(--tds-toggle-switch-track-outline);
2176
+ outline-offset:var(--t-focus-ring-offset);
2177
+ background-color:transparent;
2178
+ border:0;
2179
+ border-radius:var(--t-border-radius-round);
2180
+ }
2181
+
2182
+ :is(.tds-toggle-switch input[type="checkbox"]):focus-visible{
2183
+ --tds-toggle-switch-track-outline:var(--t-focus-ring-outline);
2184
+ }
2185
+
2186
+ .tds-toggle-switch label{
2187
+ display:inline-flex;
2188
+ grid-area:1 / 2;
2189
+ -moz-column-gap:var(--tds-toggle-switch-column-gap);
2190
+ column-gap:var(--tds-toggle-switch-column-gap);
2191
+ margin-top:-.09375em;
2192
+ font-size:var(--tds-toggle-switch-font-size);
2193
+ font-weight:var(--t-font-weight-normal);
2194
+ line-height:var(--tds-toggle-switch-line-height);
2195
+ color:var(--tds-toggle-switch-label-color);
2196
+ cursor:var(--tds-toggle-switch-cursor);
2197
+ }
2198
+
2199
+ .tds-toggle-switch:not(:has(input:disabled)):has(input:hover){
2200
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-hover);
2082
2201
  }
2083
2202
 
2084
- .tds-field-control[data-readonly],.tds-field-control:has([data-readonly]),.tds-field-control:has([readonly]){
2085
- --tds-field-border-color:var(--t-form-border-color-readonly);
2086
- --tds-field-border-color-hover:var(--t-form-border-color-readonly);
2087
- --tds-field-background-color:var(--t-form-background-color-readonly);
2088
- color:var(--t-form-color-readonly);
2203
+ .tds-toggle-switch:has(input:checked){
2204
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on);
2205
+ --tds-toggle-switch-thumb-transform:translateX(calc(var(--tds-toggle-switch-track-width) - var(--tds-toggle-switch-thumb-size) - var(--t-spacing-half)));
2089
2206
  }
2090
2207
 
2091
- [data-focus-within]:is(.tds-field-control[data-readonly],.tds-field-control:has([data-readonly]),.tds-field-control:has([readonly])){
2092
- border-color:var(--t-form-border-color-hover);
2208
+ .tds-toggle-switch:has(input:checked):not(:has(input:disabled)):has(input:hover){
2209
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on-hover);
2093
2210
  }
2094
2211
 
2095
- .tds-field-description{
2096
- display:flex;
2097
- gap:var(--t-spacing-half);
2098
- align-items:flex-start;
2099
- margin:0;
2100
- font-size:var(--t-font-size-sm);
2101
- line-height:1.35;
2102
- color:var(--tds-field-description-color, var(--t-text-color-secondary));
2103
- cursor:text;
2104
- }
2105
-
2106
- .tds-field-description .tds-field-description-invalid-icon{
2107
- display:var(--tds-field-description-invalid-icon-display, none);
2108
- flex-shrink:0;
2109
- margin-block-start:calc(.5lh - .5em);
2110
- line-height:1.35;
2212
+ .tds-toggle-switch:has(input:disabled){
2213
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-disabled);
2214
+ --tds-toggle-switch-label-color:var(--t-form-color-disabled);
2215
+ --tds-toggle-switch-description-color:var(--t-form-color-disabled);
2216
+ --tds-toggle-switch-cursor:not-allowed;
2111
2217
  }
2112
2218
 
2113
- .tds-field-date-segment{
2114
- padding-inline:var(--tds-field-date-segment-padding-inline, 2px);
2115
- text-align:end;
2116
- text-wrap:nowrap;
2117
- caret-color:transparent;
2118
- border-radius:var(--t-border-radius-sm);
2219
+ .tds-toggle-switch-track{
2220
+ position:relative;
2221
+ flex-shrink:0;
2222
+ width:var(--tds-toggle-switch-track-width);
2223
+ height:var(--tds-toggle-switch-track-height);
2224
+ background-color:var(--tds-toggle-switch-track-background-color);
2225
+ border-radius:var(--t-border-radius-round);
2226
+ transition:var(--tds-toggle-switch-track-transition);
2119
2227
  }
2120
2228
 
2121
- .tds-field-date-segment[data-placeholder]{
2122
- color:var(--tds-field-placeholder-color);
2229
+ .tds-toggle-switch-track::before{
2230
+ position:absolute;
2231
+ top:var(--t-spacing-fourth);
2232
+ left:var(--t-spacing-fourth);
2233
+ width:var(--tds-toggle-switch-thumb-size);
2234
+ height:var(--tds-toggle-switch-thumb-size);
2235
+ content:"";
2236
+ background-color:#fff;
2237
+ border-radius:var(--t-border-radius-round);
2238
+ transform:var(--tds-toggle-switch-thumb-transform);
2239
+ transition:var(--tds-toggle-switch-thumb-transition);
2123
2240
  }
2124
2241
 
2125
- .tds-field-date-segment[data-focused]{
2126
- color:var(--t-text-color-inverted);
2127
- outline:0;
2128
- background-color:var(--t-fill-color-interaction);
2242
+ @media (prefers-reduced-motion: reduce){
2243
+
2244
+ .tds-toggle-switch-track{
2245
+ --tds-toggle-switch-track-transition:none;
2246
+ --tds-toggle-switch-thumb-transition:none;
2247
+ }
2129
2248
  }
2130
2249
 
2131
- .tds-field-date-segment-separator{
2132
- padding-inline:0;
2133
- color:var(--tds-field-placeholder-color);
2250
+ .tds-toggle-switch-description{
2251
+ display:flex;
2252
+ grid-area:2 / 2;
2253
+ align-items:flex-start;
2254
+ margin:0;
2255
+ font-size:var(--tds-toggle-switch-description-font-size);
2256
+ line-height:var(--tds-toggle-switch-description-line-height);
2257
+ color:var(--tds-toggle-switch-description-color);
2258
+ cursor:text;
2134
2259
  }
2135
2260
 
2136
- .tds-field-date-segment:not([data-placeholder]) + .tds-field-date-segment-separator{
2137
- color:var(--tds-field-color);
2261
+ .tds-toggle-switch--sm{
2262
+ --tds-toggle-switch-font-size:var(--t-font-size-sm);
2263
+ --tds-toggle-switch-line-height:1.35;
2264
+ --tds-toggle-switch-track-height:var(--t-element-size-lg);
2265
+ --tds-toggle-switch-thumb-size:var(--t-element-size-sm);
2266
+ --tds-toggle-switch-description-font-size:var(--t-font-size-xs);
2267
+ --tds-toggle-switch-description-line-height:1.3;
2268
+ }
2269
+
2270
+ .tds-toggle-switch--hide-label{
2271
+ --tds-toggle-switch-display:inline-flex;
2272
+ }
2273
+
2274
+ .tds-time-field-input{
2275
+ --tds-field-date-segment-padding-inline:1px;
2276
+ padding-block:var(--tds-field-padding-block);
2277
+ padding-inline:var(--tds-field-padding-inline);
2278
+ font-variant-numeric:tabular-nums;
2138
2279
  }
2139
2280
 
2140
2281
  .tds-select{
@@ -2569,147 +2710,6 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
2569
2710
  }
2570
2711
  }
2571
2712
 
2572
- .tds-toggle-switch{
2573
- --tds-toggle-switch-font-size:var(--t-font-size-md);
2574
- --tds-toggle-switch-column-gap:var(--t-spacing-1);
2575
- --tds-toggle-switch-cursor:pointer;
2576
- --tds-toggle-switch-display:inline-grid;
2577
- --tds-toggle-switch-line-height:1.4;
2578
-
2579
- --tds-toggle-switch-label-color:var(--t-form-color);
2580
-
2581
- --tds-toggle-switch-track-width:var(--t-container-size-md);
2582
- --tds-toggle-switch-track-outline:none;
2583
- --tds-toggle-switch-track-height:var(--t-container-size-xs);
2584
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color);
2585
- --tds-toggle-switch-track-transition:background-color var(--t-duration-100) var(--t-ease-in-out);
2586
-
2587
- --tds-toggle-switch-thumb-size:var(--t-element-size-md);
2588
- --tds-toggle-switch-thumb-transform:translateX(0);
2589
- --tds-toggle-switch-thumb-transition:transform var(--t-duration-200) var(--t-ease-in-out);
2590
-
2591
- --tds-toggle-switch-description-font-size:var(--t-font-size-sm);
2592
- --tds-toggle-switch-description-line-height:1.35;
2593
- --tds-toggle-switch-description-color:var(--t-text-color-secondary);
2594
- position:relative;
2595
-
2596
- display:var(--tds-toggle-switch-display);
2597
- grid-template-columns:auto;
2598
- grid-auto-columns:1fr;
2599
- gap:var(--t-spacing-fourth) var(--tds-toggle-switch-column-gap);
2600
- -webkit-user-select:none;
2601
- -moz-user-select:none;
2602
- user-select:none;
2603
- }
2604
-
2605
- .tds-toggle-switch input[type="checkbox"]{
2606
- position:absolute;
2607
- width:var(--tds-toggle-switch-track-width);
2608
- height:var(--tds-toggle-switch-track-height);
2609
- margin:0;
2610
- -webkit-appearance:none;
2611
- -moz-appearance:none;
2612
- appearance:none;
2613
- cursor:var(--tds-toggle-switch-cursor);
2614
- outline:var(--tds-toggle-switch-track-outline);
2615
- outline-offset:var(--t-focus-ring-offset);
2616
- background-color:transparent;
2617
- border:0;
2618
- border-radius:var(--t-border-radius-round);
2619
- }
2620
-
2621
- :is(.tds-toggle-switch input[type="checkbox"]):focus-visible{
2622
- --tds-toggle-switch-track-outline:var(--t-focus-ring-outline);
2623
- }
2624
-
2625
- .tds-toggle-switch label{
2626
- display:inline-flex;
2627
- grid-area:1 / 2;
2628
- -moz-column-gap:var(--tds-toggle-switch-column-gap);
2629
- column-gap:var(--tds-toggle-switch-column-gap);
2630
- margin-top:-.09375em;
2631
- font-size:var(--tds-toggle-switch-font-size);
2632
- font-weight:var(--t-font-weight-normal);
2633
- line-height:var(--tds-toggle-switch-line-height);
2634
- color:var(--tds-toggle-switch-label-color);
2635
- cursor:var(--tds-toggle-switch-cursor);
2636
- }
2637
-
2638
- .tds-toggle-switch:not(:has(input:disabled)):has(input:hover){
2639
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-hover);
2640
- }
2641
-
2642
- .tds-toggle-switch:has(input:checked){
2643
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on);
2644
- --tds-toggle-switch-thumb-transform:translateX(calc(var(--tds-toggle-switch-track-width) - var(--tds-toggle-switch-thumb-size) - var(--t-spacing-half)));
2645
- }
2646
-
2647
- .tds-toggle-switch:has(input:checked):not(:has(input:disabled)):has(input:hover){
2648
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on-hover);
2649
- }
2650
-
2651
- .tds-toggle-switch:has(input:disabled){
2652
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-disabled);
2653
- --tds-toggle-switch-label-color:var(--t-form-color-disabled);
2654
- --tds-toggle-switch-description-color:var(--t-form-color-disabled);
2655
- --tds-toggle-switch-cursor:not-allowed;
2656
- }
2657
-
2658
- .tds-toggle-switch-track{
2659
- position:relative;
2660
- flex-shrink:0;
2661
- width:var(--tds-toggle-switch-track-width);
2662
- height:var(--tds-toggle-switch-track-height);
2663
- background-color:var(--tds-toggle-switch-track-background-color);
2664
- border-radius:var(--t-border-radius-round);
2665
- transition:var(--tds-toggle-switch-track-transition);
2666
- }
2667
-
2668
- .tds-toggle-switch-track::before{
2669
- position:absolute;
2670
- top:var(--t-spacing-fourth);
2671
- left:var(--t-spacing-fourth);
2672
- width:var(--tds-toggle-switch-thumb-size);
2673
- height:var(--tds-toggle-switch-thumb-size);
2674
- content:"";
2675
- background-color:#fff;
2676
- border-radius:var(--t-border-radius-round);
2677
- transform:var(--tds-toggle-switch-thumb-transform);
2678
- transition:var(--tds-toggle-switch-thumb-transition);
2679
- }
2680
-
2681
- @media (prefers-reduced-motion: reduce){
2682
-
2683
- .tds-toggle-switch-track{
2684
- --tds-toggle-switch-track-transition:none;
2685
- --tds-toggle-switch-thumb-transition:none;
2686
- }
2687
- }
2688
-
2689
- .tds-toggle-switch-description{
2690
- display:flex;
2691
- grid-area:2 / 2;
2692
- align-items:flex-start;
2693
- margin:0;
2694
- font-size:var(--tds-toggle-switch-description-font-size);
2695
- line-height:var(--tds-toggle-switch-description-line-height);
2696
- color:var(--tds-toggle-switch-description-color);
2697
- cursor:text;
2698
- }
2699
-
2700
- .tds-toggle-switch--sm{
2701
- --tds-toggle-switch-font-size:var(--t-font-size-sm);
2702
- --tds-toggle-switch-line-height:1.35;
2703
- --tds-toggle-switch-track-height:var(--t-element-size-lg);
2704
- --tds-toggle-switch-thumb-size:var(--t-element-size-sm);
2705
- --tds-toggle-switch-description-font-size:var(--t-font-size-xs);
2706
- --tds-toggle-switch-description-line-height:1.3;
2707
- }
2708
-
2709
- .tds-toggle-switch--hide-label{
2710
- --tds-toggle-switch-display:inline-flex;
2711
- }
2712
-
2713
2713
  .tds-loading-spinner{
2714
2714
  --tds-loading-spinner-size:1.25em;
2715
2715