@planningcenter/tapestry 3.2.2-rc.1 → 3.2.2-rc.3

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 +964 -964
  2. package/dist/reactRender.css.map +1 -1
  3. package/dist/reactRenderLegacy.css +964 -964
  4. package/dist/reactRenderLegacy.css.map +1 -1
  5. package/package.json +2 -2
package/dist/reactRender.css CHANGED
@@ -261,834 +261,717 @@
261
261
  }
262
262
  }
263
263
 
264
- .tds-checkbox{
265
- --tds-checkbox-font-size:var(--t-font-size-md);
266
- --tds-checkbox-cursor:pointer;
267
- --tds-checkbox-line-height:1.4;
268
- --tds-checkbox-transition-property:background-color, border-color;
269
264
 
270
- --tds-checkbox-input-size:var(--t-element-size-md);
271
- --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
272
- --tds-checkbox-input-border-color:var(--t-form-border-color);
273
- --tds-checkbox-input-background-color:transparent;
265
+ @media (prefers-reduced-motion: no-preference){
274
266
 
275
- --tds-checkbox-input-icon:none;
276
- --tds-checkbox-input-icon-visibility:hidden;
277
- --tds-checkbox-input-icon-opacity:0;
278
- --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
267
+ :root{
268
+ interpolate-size:allow-keywords;
269
+ }
270
+ }
279
271
 
280
- --tds-checkbox-label-color:var(--t-form-color);
272
+ @layer tds-component{
273
+ tds-sidenav,
274
+ .tds-sidenav{
275
+ --tds-sidenav-indent:12px;
276
+ --tds-sidenav-item-depth:0;
281
277
 
282
- --tds-checkbox-description-font-size:var(--t-font-size-sm);
283
- --tds-checkbox-description-line-height:1.35;
284
- --tds-checkbox-description-color:var(--t-text-color-secondary);
285
- --tds-checkbox-description-invalid-icon-display:none;
278
+ --tds-sidenav-item-transition:background-color var(--t-duration-200) var(--t-ease-in-out);
286
279
 
287
- position:relative;
288
- display:inline-grid;
289
- grid-template-columns:auto;
290
- grid-auto-columns:1fr;
291
- gap:var(--t-spacing-fourth) var(--t-spacing-1);
292
- line-height:var(--tds-checkbox-line-height);
293
- cursor:var(--tds-checkbox-cursor);
294
- -webkit-user-select:none;
295
- -moz-user-select:none;
296
- user-select:none;
280
+ --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;
281
+ --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;
282
+ --tds-sidenav-collapse-closed-opacity:0;
283
+ --tds-sidenav-collapse-open-opacity:1;
284
+ --tds-sidenav-collapse-closed-transform:translateY(-8px);
285
+ --tds-sidenav-collapse-open-transform:translateY(0);
286
+
287
+ --tds-sidenav-item-icon-size:var(--t-element-size-md);
288
+ --tds-sidenav-item-background-hover:var(--t-fill-color-button-interaction-ghost-hover);
289
+ --tds-sidenav-item-background-active:var(--t-fill-color-button-interaction-ghost-active);
290
+ --tds-sidenav-item-background-selected:var(--t-fill-color-button-interaction-ghost-active);
291
+
292
+ --tds-sidenav-item-nested-background-hover:var(--tds-sidenav-item-background-hover);
293
+ --tds-sidenav-item-nested-background-active:var(--tds-sidenav-item-background-hover);
294
+ --tds-sidenav-item-nested-background-selected:transparent;
295
+
296
+ --tds-sidenav-item-nested-border-color:var(--t-fill-color-neutral-050);
297
+ --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
298
+ --tds-sidenav-item-nested-border-color-selected:var(--t-border-color-status-info);
299
+
300
+ --tds-sidenav-item-icon-color:var(--t-icon-color-secondary);
301
+ --tds-sidenav-item-icon-color-selected:var(--t-icon-color);
302
+ }
303
+
304
+ @media (prefers-reduced-motion: reduce){
305
+ tds-sidenav,
306
+ .tds-sidenav{
307
+ --tds-sidenav-collapse-transition-enter:none;
308
+ --tds-sidenav-collapse-transition-exit:none;
309
+ --tds-sidenav-collapse-closed-transform:none;
310
+ --tds-sidenav-collapse-open-transform:none;
311
+ }
312
+ }
313
+
314
+ .tds-sidenav--theme-gray{
315
+ --tds-sidenav-item-background-hover:var(--t-fill-color-neutral-080);
316
+ --tds-sidenav-item-background-active:var(--t-fill-color-neutral-070);
317
+ --tds-sidenav-item-background-selected:var(--t-fill-color-neutral-050);
318
+ --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
319
+ --tds-sidenav-item-nested-border-color-selected:var(--t-fill-color-neutral-010);
320
+ }
297
321
  }
298
322
 
299
- .tds-checkbox label{
300
- grid-area:1 / 2;
301
- font-size:var(--tds-checkbox-font-size);
302
- font-weight:var(--t-font-weight-normal);
303
- color:var(--tds-checkbox-label-color);
304
- cursor:var(--tds-checkbox-cursor);
323
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section){
324
+ display:flex;
305
325
  }
306
326
 
307
- .tds-checkbox tds-indeterminate{
327
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section,.tds-sidenav-collapse){
328
+ flex-direction:column;
329
+ gap:var(--t-spacing-half);
330
+ width:100%;
331
+ }
332
+
333
+ .tds-sidenav-section-list{
334
+ width:100%;
335
+ padding:0;
336
+ margin:0;
337
+ list-style:none;
338
+ }
339
+
340
+ .tds-sidenav-section-header{
341
+ display:flex;
342
+ align-items:baseline;
343
+ justify-content:space-between;
344
+ padding-top:var(--t-spacing-2);
345
+ }
346
+
347
+ .tds-sidenav-section-header h2{
348
+ margin:0;
349
+ font-size:var(--t-font-size-sm);
350
+ font-weight:var(--t-font-weight-semibold);
351
+ line-height:1.35;
352
+ color:var(--t-text-color-secondary);
353
+ text-transform:uppercase;
354
+ }
355
+
356
+ .tds-sidenav-section:first-of-type .tds-sidenav-section-header{
357
+ padding-top:0;
358
+ }
359
+
360
+ .tds-sidenav-section-header [slot="label-actions"]{
308
361
  display:flex;
362
+ gap:var(--t-spacing-half);
363
+ align-items:center;
309
364
  }
310
365
 
311
- .tds-checkbox input[type="checkbox"]{
366
+ .tds-sidenav-section [slot="section-actions"]{
367
+ display:flex;
368
+ gap:12px;
369
+ align-items:center;
370
+ min-height:42px;
371
+ padding:var(--t-spacing-1) 0;
372
+ }
373
+
374
+ .tds-sidenav-section-list,
375
+ .tds-sidenav-item{
376
+ width:100%;
377
+ padding:0;
378
+ margin:0;
379
+ }
380
+
381
+ .tds-sidenav-item :is(a,button){
312
382
  position:relative;
313
- width:1em;
314
- height:1em;
315
- margin:calc((1lh - 1em) / 2) 0 0;
316
- font-size:var(--tds-checkbox-font-size);
317
- line-height:inherit;
383
+ display:flex;
384
+ gap:12px;
385
+ align-items:center;
386
+ width:100%;
387
+ padding:12px;
388
+ overflow:hidden;
389
+ font-size:var(--t-font-size-sm);
390
+ line-height:18px;
391
+ color:var(--t-text-color-headline);
392
+ white-space:nowrap;
393
+ text-decoration:none;
318
394
  -webkit-appearance:none;
319
395
  -moz-appearance:none;
320
396
  appearance:none;
321
- cursor:var(--tds-checkbox-cursor);
322
- background-color:var(--tds-checkbox-input-background-color);
323
- border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
324
- border-radius:var(--tds-checkbox-input-border-radius);
325
- transition-timing-function:var(--t-ease-in-out);
326
- transition-duration:var(--t-duration-200);
327
- transition-property:var(--tds-checkbox-transition-property);
397
+ cursor:pointer;
398
+ background-color:var(--tds-sidenav-item-background, transparent);
399
+ border:0;
400
+ border-radius:var(--t-border-radius);
401
+ transition:var(--tds-sidenav-item-transition);
328
402
  }
329
403
 
330
- :is(.tds-checkbox input[type="checkbox"])::before{
331
- position:absolute;
332
- top:50%;
333
- left:50%;
334
- visibility:var(--tds-checkbox-input-icon-visibility);
335
- width:100%;
336
- height:100%;
337
- content:"";
338
- background-color:var(--tds-checkbox-input-icon-fill);
339
- border-radius:var(--tds-checkbox-input-border-radius);
340
- opacity:var(--tds-checkbox-input-icon-opacity);
341
- -webkit-mask-image:var(--tds-checkbox-input-icon);
342
- mask-image:var(--tds-checkbox-input-icon);
343
- -webkit-mask-repeat:no-repeat;
344
- mask-repeat:no-repeat;
345
- -webkit-mask-size:contain;
346
- mask-size:contain;
347
- transform:translate(-50%, -50%);
404
+ :is(.tds-sidenav-item :is(a,button)):not(:has(.prefix,.suffix)),:is(.tds-sidenav-item :is(a,button)) :is(:not(.prefix,.suffix)){
405
+ display:block;
406
+ flex:1;
407
+ overflow:hidden;
408
+ text-overflow:ellipsis;
409
+ text-align:left;
410
+ white-space:nowrap;
348
411
  }
349
412
 
350
- :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
351
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
352
- --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
413
+ :is(.tds-sidenav-item :is(a,button)):hover,:is(.tds-sidenav-item :is(a,button)):focus-visible{
414
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-hover);
415
+ color:var(--t-text-color-headline);
416
+ text-decoration:none;
353
417
  }
354
418
 
355
- :is(.tds-checkbox input[type="checkbox"]):focus-visible{
356
- outline:var(--t-focus-ring-outline);
357
- outline-offset:var(--t-focus-ring-offset);
419
+ :is(.tds-sidenav-item :is(a,button)):active{
420
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-active);
358
421
  }
359
422
 
360
- :is(.tds-checkbox input[type="checkbox"]):disabled{
361
- pointer-events:none;
423
+ :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]){
424
+ overflow:hidden;
425
+ color:var(--tds-sidenav-item-icon-color);
362
426
  }
363
427
 
364
- @media (prefers-reduced-motion: reduce){
428
+ :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{
429
+ display:block;
430
+ width:var(--tds-sidenav-item-icon-size);
431
+ height:var(--tds-sidenav-item-icon-size);
432
+ }
365
433
 
366
- .tds-checkbox input[type="checkbox"]{
367
- --tds-checkbox-transition-property:none;
368
- }
434
+ :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section{
435
+ --tds-sidenav-indent:19px;
369
436
  }
370
437
 
371
- .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
372
- --tds-checkbox-input-background-color:var(--t-fill-color-control);
373
- --tds-checkbox-input-border-color:var(--t-border-color-control-info);
374
- --tds-checkbox-input-icon-visibility:visible;
375
- --tds-checkbox-input-icon-opacity:1;
376
- }
377
-
378
- :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
379
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
380
- --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
438
+ [aria-expanded="true"]:is(.tds-sidenav-item :is(a,button)) + .tds-sidenav-section-list{
439
+ visibility:visible;
440
+ block-size:auto;
441
+ opacity:1;
381
442
  }
382
443
 
383
- .tds-checkbox:has(input:checked){
384
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
385
- }
444
+ .tds-sidenav-item.selected > :is(a,button),.tds-sidenav-item:has(.tds-sidenav-section):has(.selected) > :is(a,button){
445
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-selected);
446
+ --tds-sidenav-item-icon-color:var(--tds-sidenav-item-icon-color-selected);
386
447
 
387
- .tds-checkbox:has(input:indeterminate){
388
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
448
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-selected);
449
+ font-weight:var(--t-font-weight-semibold);
389
450
  }
390
451
 
391
- .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
392
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
393
- --tds-checkbox-description-color:var(--t-text-color-status-error);
394
- --tds-checkbox-description-invalid-icon-display:inline-block;
452
+ .tds-sidenav-item:has(.tds-sidenav-section){
453
+ display:flex;
454
+ flex-direction:column;
455
+ gap:var(--t-spacing-half);
395
456
  }
396
457
 
397
- :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
398
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
399
- --tds-checkbox-input-background-color:var(--t-form-background-color-error);
458
+ .tds-sidenav-item .tds-sidenav-section-list{
459
+ --tds-sidenav-item-depth:1;
460
+ gap:0;
461
+ }
462
+
463
+ .tds-sidenav-action--toggle + :is(.tds-sidenav-item .tds-sidenav-section-list){
464
+ visibility:hidden;
465
+ block-size:0;
466
+ overflow-y:clip;
467
+ opacity:0;
468
+ transition:content-visibility var(--t-duration-400) allow-discrete, opacity var(--t-duration-400), block-size var(--t-duration-400);
400
469
  }
401
470
 
402
- :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:checked,:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:indeterminate{
403
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
404
- --tds-checkbox-input-background-color:var(--t-form-border-color-error);
471
+ :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list{
472
+ --tds-sidenav-item-depth:2;
405
473
  }
406
474
 
407
- :is(:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:checked,:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:indeterminate):hover:not(:disabled){
408
- --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
409
- --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
475
+ :is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
476
+ min-height:var(--t-element-size-2xl);
477
+ padding-block:9px;
478
+ padding-left:calc((var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth)) + var(--tds-sidenav-indent) + var(--t-spacing-fourth));
479
+ line-height:1;
480
+ background-color:transparent;
481
+ }
482
+
483
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::before{
484
+ position:absolute;
485
+ top:0;
486
+ bottom:0;
487
+ left:calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
488
+ width:2px;
489
+ content:"";
490
+ background-color:var(--tds-sidenav-item-nested-border-color);
491
+ transition:var(--tds-sidenav-item-transition);
410
492
  }
411
493
 
412
- .tds-checkbox:has(input:required) label::after{
413
- margin-left:.25ch;
414
- color:var(--t-text-color-status-error);
415
- content:"*";
416
- }
494
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::after{
495
+ position:absolute;
496
+ inset:0 0 0 calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
497
+ z-index:-1;
498
+ height:100%;
499
+ content:"";
500
+ background-color:var(--tds-sidenav-item-nested-background);
501
+ border-radius:0 var(--t-border-radius) var(--t-border-radius) 0;
502
+ transition:var(--tds-sidenav-item-transition);
503
+ }
417
504
 
418
- .tds-checkbox:has(input:disabled){
419
- --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
420
- --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
505
+ :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)){
506
+ display:block;
507
+ text-align:left;
508
+ white-space:normal;
509
+ }
421
510
 
422
- --tds-checkbox-label-color:var(--t-form-color-disabled);
423
- --tds-checkbox-description-color:var(--t-form-color-disabled);
424
- --tds-checkbox-cursor:not-allowed;
425
- }
511
+ :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{
512
+ --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-hover);
513
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-hover);
514
+ }
426
515
 
427
- .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
428
- --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
516
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):active{
517
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-active);
518
+ }
519
+
520
+ .selected:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
521
+ --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-selected);
522
+ font-weight:var(--t-font-weight-medium);
429
523
  }
430
524
 
431
- .tds-checkbox-description{
525
+ .tds-sidenav-responsive-header{
432
526
  display:flex;
433
- grid-area:2 / 2;
434
- gap:var(--t-spacing-half);
435
- align-items:flex-start;
436
- margin:0;
437
- font-size:var(--tds-checkbox-description-font-size);
438
- line-height:var(--tds-checkbox-description-line-height);
439
- color:var(--tds-checkbox-description-color);
440
- cursor:text;
527
+ gap:var(--t-spacing-2);
528
+ align-items:center;
529
+ width:100%;
441
530
  }
442
531
 
443
- .tds-checkbox-description .tds-checkbox-description-invalid-icon{
444
- display:var(--tds-checkbox-description-invalid-icon-display);
445
- flex-shrink:0;
446
- margin-top:calc(.5lh - .5em);
447
- line-height:var(--tds-checkbox-description-line-height);
532
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle{
533
+ order:0;
448
534
  }
449
535
 
450
- .tds-checkbox--sm{
451
- --tds-checkbox-line-height:1.35;
452
- --tds-checkbox-input-size:var(--t-element-size-sm);
453
- --tds-checkbox-font-size:var(--t-font-size-sm);
454
- --tds-checkbox-description-font-size:var(--t-font-size-xs);
455
- --tds-checkbox-description-line-height:1.3;
536
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-label{
537
+ flex:1;
538
+ order:1;
539
+ margin:0;
540
+ font-size:var(--t-font-size-lg);
541
+ font-weight:var(--t-font-weight-medium);
542
+ color:var(--t-text-color-headline);
543
+ }
544
+
545
+ @media (max-width: 719px){
546
+ .tds-sidenav-collapse{
547
+ z-index:10001;
548
+ display:none;
549
+ max-width:min(448px, calc(100vw - 48px));
550
+ padding:0;
551
+ margin:12px 0;
552
+ position-area:bottom span-right;
553
+ overflow:hidden;
554
+ outline:0;
555
+ background:var(--t-surface-color-card);
556
+ border:0;
557
+ border-radius:6px;
558
+ box-shadow:0 8px 20px 0 rgba(0, 0, 0, .25);
559
+ opacity:var(--tds-sidenav-collapse-open-opacity);
560
+ transform:var(--tds-sidenav-collapse-open-transform);
561
+ transition:var(--tds-sidenav-collapse-transition-enter);
562
+ will-change:transform;
563
+ }
564
+
565
+ .tds-sidenav-scroll-container{
566
+ --webkit-overflow-scrolling:touch;
567
+ display:block;
568
+ width:100%;
569
+ height:-moz-fit-content;
570
+ height:fit-content;
571
+ padding:var(--t-spacing-2);
572
+ overflow-y:auto;
573
+ }
574
+
575
+ .tds-sidenav-item :is(a, button) :is(.prefix){
576
+ display:none;
577
+ }
578
+ @supports selector(:popover-open){
579
+ .tds-sidenav-collapse:popover-open{
580
+ display:flex;
581
+ }
582
+
583
+ .tds-sidenav-collapse:not(:popover-open){
584
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
585
+ transition:var(--tds-sidenav-collapse-transition-exit);
586
+ }
587
+
588
+ @starting-style{
589
+ .tds-sidenav-collapse:popover-open{
590
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
591
+ transform:var(--tds-sidenav-collapse-closed-transform);
592
+ }
593
+ }
594
+ }
595
+ @supports not selector(:popover-open){
596
+ .tds-sidenav-collapse.\:popover-open{
597
+ display:flex;
598
+ }
599
+
600
+ .tds-sidenav-collapse:not(.\:popover-open){
601
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
602
+ transition:var(--tds-sidenav-collapse-transition-exit);
603
+ }
604
+ }
456
605
  }
457
606
 
458
- .tds-radio{
459
- --tds-radio-font-size:var(--t-font-size-md);
460
- --tds-radio-cursor:pointer;
461
- --tds-radio-line-height:1.4;
462
- --tds-radio-transition-property:border-width;
607
+ @media (min-width: 720px){
608
+ .tds-sidenav-responsive-header{
609
+ display:none;
610
+ }
611
+ }
463
612
 
464
- --tds-radio-input-size:var(--t-element-size-md);
465
- --tds-radio-input-border-radius:var(--t-border-radius-round);
466
- --tds-radio-input-border-color:var(--t-form-border-color);
467
- --tds-radio-input-border-width:var(--t-form-border-width);
468
- --tds-radio-input-background-color:transparent;
613
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
614
+ display:none;
615
+ }
469
616
 
470
- --tds-radio-label-color:var(--t-form-color);
617
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
618
+ display:block;
619
+ }
471
620
 
472
- --tds-radio-description-font-size:var(--t-font-size-sm);
473
- --tds-radio-description-line-height:1.35;
474
- --tds-radio-description-color:var(--t-text-color-secondary);
621
+ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
622
+ display:flex;
623
+ flex-direction:column;
624
+ }
625
+
626
+ .tds-checkbox{
627
+ --tds-checkbox-font-size:var(--t-font-size-md);
628
+ --tds-checkbox-cursor:pointer;
629
+ --tds-checkbox-line-height:1.4;
630
+ --tds-checkbox-transition-property:background-color, border-color;
631
+
632
+ --tds-checkbox-input-size:var(--t-element-size-md);
633
+ --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
634
+ --tds-checkbox-input-border-color:var(--t-form-border-color);
635
+ --tds-checkbox-input-background-color:transparent;
636
+
637
+ --tds-checkbox-input-icon:none;
638
+ --tds-checkbox-input-icon-visibility:hidden;
639
+ --tds-checkbox-input-icon-opacity:0;
640
+ --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
641
+
642
+ --tds-checkbox-label-color:var(--t-form-color);
643
+
644
+ --tds-checkbox-description-font-size:var(--t-font-size-sm);
645
+ --tds-checkbox-description-line-height:1.35;
646
+ --tds-checkbox-description-color:var(--t-text-color-secondary);
647
+ --tds-checkbox-description-invalid-icon-display:none;
475
648
 
476
649
  position:relative;
477
650
  display:inline-grid;
478
651
  grid-template-columns:auto;
479
652
  grid-auto-columns:1fr;
480
653
  gap:var(--t-spacing-fourth) var(--t-spacing-1);
481
- line-height:var(--tds-radio-line-height);
482
- cursor:var(--tds-radio-cursor);
654
+ line-height:var(--tds-checkbox-line-height);
655
+ cursor:var(--tds-checkbox-cursor);
483
656
  -webkit-user-select:none;
484
657
  -moz-user-select:none;
485
658
  user-select:none;
486
659
  }
487
660
 
488
- .tds-radio label{
661
+ .tds-checkbox label{
489
662
  grid-area:1 / 2;
490
- font-size:var(--tds-radio-font-size);
663
+ font-size:var(--tds-checkbox-font-size);
491
664
  font-weight:var(--t-font-weight-normal);
492
- color:var(--tds-radio-label-color);
493
- cursor:var(--tds-radio-cursor);
665
+ color:var(--tds-checkbox-label-color);
666
+ cursor:var(--tds-checkbox-cursor);
494
667
  }
495
668
 
496
- .tds-radio input[type="radio"]{
669
+ .tds-checkbox tds-indeterminate{
670
+ display:flex;
671
+ }
672
+
673
+ .tds-checkbox input[type="checkbox"]{
497
674
  position:relative;
498
675
  width:1em;
499
676
  height:1em;
500
677
  margin:calc((1lh - 1em) / 2) 0 0;
501
- font-size:var(--tds-radio-font-size);
678
+ font-size:var(--tds-checkbox-font-size);
502
679
  line-height:inherit;
503
680
  -webkit-appearance:none;
504
681
  -moz-appearance:none;
505
682
  appearance:none;
506
- cursor:var(--tds-radio-cursor);
507
- background-color:var(--tds-radio-input-background-color);
508
- border:var(--tds-radio-input-border-width) solid var(--tds-radio-input-border-color);
509
- border-radius:var(--tds-radio-input-border-radius);
683
+ cursor:var(--tds-checkbox-cursor);
684
+ background-color:var(--tds-checkbox-input-background-color);
685
+ border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
686
+ border-radius:var(--tds-checkbox-input-border-radius);
510
687
  transition-timing-function:var(--t-ease-in-out);
511
688
  transition-duration:var(--t-duration-200);
512
- transition-property:var(--tds-radio-transition-property);
689
+ transition-property:var(--tds-checkbox-transition-property);
513
690
  }
514
691
 
515
- :is(.tds-radio input[type="radio"]):hover:not(:disabled){
516
- --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
517
- --tds-radio-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
692
+ :is(.tds-checkbox input[type="checkbox"])::before{
693
+ position:absolute;
694
+ top:50%;
695
+ left:50%;
696
+ visibility:var(--tds-checkbox-input-icon-visibility);
697
+ width:100%;
698
+ height:100%;
699
+ content:"";
700
+ background-color:var(--tds-checkbox-input-icon-fill);
701
+ border-radius:var(--tds-checkbox-input-border-radius);
702
+ opacity:var(--tds-checkbox-input-icon-opacity);
703
+ -webkit-mask-image:var(--tds-checkbox-input-icon);
704
+ mask-image:var(--tds-checkbox-input-icon);
705
+ -webkit-mask-repeat:no-repeat;
706
+ mask-repeat:no-repeat;
707
+ -webkit-mask-size:contain;
708
+ mask-size:contain;
709
+ transform:translate(-50%, -50%);
518
710
  }
519
711
 
520
- :is(.tds-radio input[type="radio"]):focus-visible{
712
+ :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
713
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
714
+ --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
715
+ }
716
+
717
+ :is(.tds-checkbox input[type="checkbox"]):focus-visible{
521
718
  outline:var(--t-focus-ring-outline);
522
719
  outline-offset:var(--t-focus-ring-offset);
523
720
  }
524
721
 
525
- :is(.tds-radio input[type="radio"]):disabled{
722
+ :is(.tds-checkbox input[type="checkbox"]):disabled{
526
723
  pointer-events:none;
527
724
  }
528
725
 
529
726
  @media (prefers-reduced-motion: reduce){
530
727
 
531
- .tds-radio input[type="radio"]{
532
- --tds-radio-transition-property:none;
728
+ .tds-checkbox input[type="checkbox"]{
729
+ --tds-checkbox-transition-property:none;
533
730
  }
534
731
  }
535
732
 
536
- .tds-radio:has(input:checked){
537
- --tds-radio-input-background-color:var(--t-form-background-color);
538
- --tds-radio-input-border-color:var(--t-border-color-control-info);
539
- --tds-radio-input-border-width:4px;
733
+ .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
734
+ --tds-checkbox-input-background-color:var(--t-fill-color-control);
735
+ --tds-checkbox-input-border-color:var(--t-border-color-control-info);
736
+ --tds-checkbox-input-icon-visibility:visible;
737
+ --tds-checkbox-input-icon-opacity:1;
540
738
  }
541
739
 
542
- .tds-radio:has(input:checked) input:hover:not(:disabled){
543
- --tds-radio-input-background-color:var(--t-form-background-color);
544
- --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
740
+ :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
741
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
742
+ --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
545
743
  }
546
744
 
547
- .tds-radio:has(input:user-invalid){
548
- --tds-radio-input-border-color:var(--t-form-border-color-error);
745
+ .tds-checkbox:has(input:checked){
746
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
549
747
  }
550
748
 
551
- .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
552
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
553
- --tds-radio-input-background-color:var(--t-form-background-color-error);
749
+ .tds-checkbox:has(input:indeterminate){
750
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
751
+ }
752
+
753
+ .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
754
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
755
+ --tds-checkbox-description-color:var(--t-text-color-status-error);
756
+ --tds-checkbox-description-invalid-icon-display:inline-block;
757
+ }
758
+
759
+ :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
760
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
761
+ --tds-checkbox-input-background-color:var(--t-form-background-color-error);
554
762
  }
555
763
 
556
- .tds-radio:has(input:disabled){
557
- --tds-radio-input-background-color:var(--t-form-background-color-disabled);
558
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
764
+ :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{
765
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
766
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error);
767
+ }
559
768
 
560
- --tds-radio-label-color:var(--t-form-color-disabled);
561
- --tds-radio-description-color:var(--t-form-color-disabled);
562
- --tds-radio-cursor:not-allowed;
769
+ :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){
770
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
771
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
772
+ }
773
+
774
+ .tds-checkbox:has(input:required) label::after{
775
+ margin-left:.25ch;
776
+ color:var(--t-text-color-status-error);
777
+ content:"*";
778
+ }
779
+
780
+ .tds-checkbox:has(input:disabled){
781
+ --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
782
+ --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
783
+
784
+ --tds-checkbox-label-color:var(--t-form-color-disabled);
785
+ --tds-checkbox-description-color:var(--t-form-color-disabled);
786
+ --tds-checkbox-cursor:not-allowed;
563
787
  }
564
788
 
565
- .tds-radio:has(input:disabled) input:checked{
566
- --tds-radio-input-background-color:var(--t-form-background-color);
567
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
789
+ .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
790
+ --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
568
791
  }
569
792
 
570
- .tds-radio-description{
793
+ .tds-checkbox-description{
571
794
  display:flex;
572
795
  grid-area:2 / 2;
573
796
  gap:var(--t-spacing-half);
574
797
  align-items:flex-start;
575
798
  margin:0;
576
- font-size:var(--tds-radio-description-font-size);
577
- line-height:var(--tds-radio-description-line-height);
578
- color:var(--tds-radio-description-color);
799
+ font-size:var(--tds-checkbox-description-font-size);
800
+ line-height:var(--tds-checkbox-description-line-height);
801
+ color:var(--tds-checkbox-description-color);
579
802
  cursor:text;
580
803
  }
581
804
 
582
- .tds-radio--sm{
583
- --tds-radio-line-height:1.35;
584
- --tds-radio-input-size:var(--t-element-size-sm);
585
- --tds-radio-font-size:var(--t-font-size-sm);
586
- --tds-radio-description-font-size:var(--t-font-size-xs);
587
- --tds-radio-description-line-height:1.3;
805
+ .tds-checkbox-description .tds-checkbox-description-invalid-icon{
806
+ display:var(--tds-checkbox-description-invalid-icon-display);
807
+ flex-shrink:0;
808
+ margin-top:calc(.5lh - .5em);
809
+ line-height:var(--tds-checkbox-description-line-height);
810
+ }
811
+
812
+ .tds-checkbox--sm{
813
+ --tds-checkbox-line-height:1.35;
814
+ --tds-checkbox-input-size:var(--t-element-size-sm);
815
+ --tds-checkbox-font-size:var(--t-font-size-sm);
816
+ --tds-checkbox-description-font-size:var(--t-font-size-xs);
817
+ --tds-checkbox-description-line-height:1.3;
588
818
  }
589
819
 
590
- .tds-toggle-switch{
591
- --tds-toggle-switch-font-size:var(--t-font-size-md);
592
- --tds-toggle-switch-column-gap:var(--t-spacing-1);
593
- --tds-toggle-switch-cursor:pointer;
594
- --tds-toggle-switch-display:inline-grid;
595
- --tds-toggle-switch-line-height:1.4;
596
820
 
597
- --tds-toggle-switch-label-color:var(--t-form-color);
821
+ :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{
822
+ -webkit-appearance:none;
823
+ appearance:none;
824
+ }
598
825
 
599
- --tds-toggle-switch-track-width:var(--t-container-size-md);
600
- --tds-toggle-switch-track-outline:none;
601
- --tds-toggle-switch-track-height:var(--t-container-size-xs);
602
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color);
603
- --tds-toggle-switch-track-transition:background-color var(--t-duration-100) var(--t-ease-in-out);
826
+ [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
827
+ inline-size:1em;
828
+ block-size:2em;
829
+ }
604
830
 
605
- --tds-toggle-switch-thumb-size:var(--t-element-size-md);
606
- --tds-toggle-switch-thumb-transform:translateX(0);
607
- --tds-toggle-switch-thumb-transition:transform var(--t-duration-200) var(--t-ease-in-out);
831
+ @supports (field-sizing: content){
832
+ .tds-input--auto-width{
833
+ inline-size:-moz-fit-content;
834
+ inline-size:fit-content;
835
+ min-inline-size:min(100%, 122px);
836
+ }
608
837
 
609
- --tds-toggle-switch-description-font-size:var(--t-font-size-sm);
610
- --tds-toggle-switch-description-line-height:1.35;
611
- --tds-toggle-switch-description-color:var(--t-text-color-secondary);
612
- position:relative;
838
+ .tds-input--auto-width input{
839
+ field-sizing:content;
840
+ inline-size:auto;
841
+ }
842
+ }
613
843
 
614
- display:var(--tds-toggle-switch-display);
844
+ .tds-radio{
845
+ --tds-radio-font-size:var(--t-font-size-md);
846
+ --tds-radio-cursor:pointer;
847
+ --tds-radio-line-height:1.4;
848
+ --tds-radio-transition-property:border-width;
849
+
850
+ --tds-radio-input-size:var(--t-element-size-md);
851
+ --tds-radio-input-border-radius:var(--t-border-radius-round);
852
+ --tds-radio-input-border-color:var(--t-form-border-color);
853
+ --tds-radio-input-border-width:var(--t-form-border-width);
854
+ --tds-radio-input-background-color:transparent;
855
+
856
+ --tds-radio-label-color:var(--t-form-color);
857
+
858
+ --tds-radio-description-font-size:var(--t-font-size-sm);
859
+ --tds-radio-description-line-height:1.35;
860
+ --tds-radio-description-color:var(--t-text-color-secondary);
861
+
862
+ position:relative;
863
+ display:inline-grid;
615
864
  grid-template-columns:auto;
616
865
  grid-auto-columns:1fr;
617
- gap:var(--t-spacing-fourth) var(--tds-toggle-switch-column-gap);
866
+ gap:var(--t-spacing-fourth) var(--t-spacing-1);
867
+ line-height:var(--tds-radio-line-height);
868
+ cursor:var(--tds-radio-cursor);
618
869
  -webkit-user-select:none;
619
870
  -moz-user-select:none;
620
871
  user-select:none;
621
872
  }
622
873
 
623
- .tds-toggle-switch input[type="checkbox"]{
624
- position:absolute;
625
- width:var(--tds-toggle-switch-track-width);
626
- height:var(--tds-toggle-switch-track-height);
627
- margin:0;
874
+ .tds-radio label{
875
+ grid-area:1 / 2;
876
+ font-size:var(--tds-radio-font-size);
877
+ font-weight:var(--t-font-weight-normal);
878
+ color:var(--tds-radio-label-color);
879
+ cursor:var(--tds-radio-cursor);
880
+ }
881
+
882
+ .tds-radio input[type="radio"]{
883
+ position:relative;
884
+ width:1em;
885
+ height:1em;
886
+ margin:calc((1lh - 1em) / 2) 0 0;
887
+ font-size:var(--tds-radio-font-size);
888
+ line-height:inherit;
628
889
  -webkit-appearance:none;
629
890
  -moz-appearance:none;
630
891
  appearance:none;
631
- cursor:var(--tds-toggle-switch-cursor);
632
- outline:var(--tds-toggle-switch-track-outline);
633
- outline-offset:var(--t-focus-ring-offset);
634
- background-color:transparent;
635
- border:0;
636
- border-radius:var(--t-border-radius-round);
892
+ cursor:var(--tds-radio-cursor);
893
+ background-color:var(--tds-radio-input-background-color);
894
+ border:var(--tds-radio-input-border-width) solid var(--tds-radio-input-border-color);
895
+ border-radius:var(--tds-radio-input-border-radius);
896
+ transition-timing-function:var(--t-ease-in-out);
897
+ transition-duration:var(--t-duration-200);
898
+ transition-property:var(--tds-radio-transition-property);
637
899
  }
638
900
 
639
- :is(.tds-toggle-switch input[type="checkbox"]):focus-visible{
640
- --tds-toggle-switch-track-outline:var(--t-focus-ring-outline);
901
+ :is(.tds-radio input[type="radio"]):hover:not(:disabled){
902
+ --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
903
+ --tds-radio-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
641
904
  }
642
905
 
643
- .tds-toggle-switch label{
644
- display:inline-flex;
645
- grid-area:1 / 2;
646
- -moz-column-gap:var(--tds-toggle-switch-column-gap);
647
- column-gap:var(--tds-toggle-switch-column-gap);
648
- margin-top:-.09375em;
649
- font-size:var(--tds-toggle-switch-font-size);
650
- font-weight:var(--t-font-weight-normal);
651
- line-height:var(--tds-toggle-switch-line-height);
652
- color:var(--tds-toggle-switch-label-color);
653
- cursor:var(--tds-toggle-switch-cursor);
654
- }
906
+ :is(.tds-radio input[type="radio"]):focus-visible{
907
+ outline:var(--t-focus-ring-outline);
908
+ outline-offset:var(--t-focus-ring-offset);
909
+ }
655
910
 
656
- .tds-toggle-switch:not(:has(input:disabled)):has(input:hover){
657
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-hover);
658
- }
911
+ :is(.tds-radio input[type="radio"]):disabled{
912
+ pointer-events:none;
913
+ }
659
914
 
660
- .tds-toggle-switch:has(input:checked){
661
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on);
662
- --tds-toggle-switch-thumb-transform:translateX(calc(var(--tds-toggle-switch-track-width) - var(--tds-toggle-switch-thumb-size) - var(--t-spacing-half)));
663
- }
915
+ @media (prefers-reduced-motion: reduce){
664
916
 
665
- .tds-toggle-switch:has(input:checked):not(:has(input:disabled)):has(input:hover){
666
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on-hover);
667
- }
668
-
669
- .tds-toggle-switch:has(input:disabled){
670
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-disabled);
671
- --tds-toggle-switch-label-color:var(--t-form-color-disabled);
672
- --tds-toggle-switch-description-color:var(--t-form-color-disabled);
673
- --tds-toggle-switch-cursor:not-allowed;
674
- }
675
-
676
- .tds-toggle-switch-track{
677
- position:relative;
678
- flex-shrink:0;
679
- width:var(--tds-toggle-switch-track-width);
680
- height:var(--tds-toggle-switch-track-height);
681
- background-color:var(--tds-toggle-switch-track-background-color);
682
- border-radius:var(--t-border-radius-round);
683
- transition:var(--tds-toggle-switch-track-transition);
684
- }
685
-
686
- .tds-toggle-switch-track::before{
687
- position:absolute;
688
- top:var(--t-spacing-fourth);
689
- left:var(--t-spacing-fourth);
690
- width:var(--tds-toggle-switch-thumb-size);
691
- height:var(--tds-toggle-switch-thumb-size);
692
- content:"";
693
- background-color:#fff;
694
- border-radius:var(--t-border-radius-round);
695
- transform:var(--tds-toggle-switch-thumb-transform);
696
- transition:var(--tds-toggle-switch-thumb-transition);
697
- }
698
-
699
- @media (prefers-reduced-motion: reduce){
700
-
701
- .tds-toggle-switch-track{
702
- --tds-toggle-switch-track-transition:none;
703
- --tds-toggle-switch-thumb-transition:none;
704
- }
705
- }
706
-
707
- .tds-toggle-switch-description{
708
- display:flex;
709
- grid-area:2 / 2;
710
- align-items:flex-start;
711
- margin:0;
712
- font-size:var(--tds-toggle-switch-description-font-size);
713
- line-height:var(--tds-toggle-switch-description-line-height);
714
- color:var(--tds-toggle-switch-description-color);
715
- cursor:text;
716
- }
717
-
718
- .tds-toggle-switch--sm{
719
- --tds-toggle-switch-font-size:var(--t-font-size-sm);
720
- --tds-toggle-switch-line-height:1.35;
721
- --tds-toggle-switch-track-height:var(--t-element-size-lg);
722
- --tds-toggle-switch-thumb-size:var(--t-element-size-sm);
723
- --tds-toggle-switch-description-font-size:var(--t-font-size-xs);
724
- --tds-toggle-switch-description-line-height:1.3;
725
- }
726
-
727
- .tds-toggle-switch--hide-label{
728
- --tds-toggle-switch-display:inline-flex;
729
- }
730
-
731
-
732
- @media (prefers-reduced-motion: no-preference){
733
-
734
- :root{
735
- interpolate-size:allow-keywords;
736
- }
737
- }
738
-
739
- @layer tds-component{
740
- tds-sidenav,
741
- .tds-sidenav{
742
- --tds-sidenav-indent:12px;
743
- --tds-sidenav-item-depth:0;
744
-
745
- --tds-sidenav-item-transition:background-color var(--t-duration-200) var(--t-ease-in-out);
746
-
747
- --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;
748
- --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;
749
- --tds-sidenav-collapse-closed-opacity:0;
750
- --tds-sidenav-collapse-open-opacity:1;
751
- --tds-sidenav-collapse-closed-transform:translateY(-8px);
752
- --tds-sidenav-collapse-open-transform:translateY(0);
753
-
754
- --tds-sidenav-item-icon-size:var(--t-element-size-md);
755
- --tds-sidenav-item-background-hover:var(--t-fill-color-button-interaction-ghost-hover);
756
- --tds-sidenav-item-background-active:var(--t-fill-color-button-interaction-ghost-active);
757
- --tds-sidenav-item-background-selected:var(--t-fill-color-button-interaction-ghost-active);
758
-
759
- --tds-sidenav-item-nested-background-hover:var(--tds-sidenav-item-background-hover);
760
- --tds-sidenav-item-nested-background-active:var(--tds-sidenav-item-background-hover);
761
- --tds-sidenav-item-nested-background-selected:transparent;
762
-
763
- --tds-sidenav-item-nested-border-color:var(--t-fill-color-neutral-050);
764
- --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
765
- --tds-sidenav-item-nested-border-color-selected:var(--t-border-color-status-info);
766
-
767
- --tds-sidenav-item-icon-color:var(--t-icon-color-secondary);
768
- --tds-sidenav-item-icon-color-selected:var(--t-icon-color);
769
- }
770
-
771
- @media (prefers-reduced-motion: reduce){
772
- tds-sidenav,
773
- .tds-sidenav{
774
- --tds-sidenav-collapse-transition-enter:none;
775
- --tds-sidenav-collapse-transition-exit:none;
776
- --tds-sidenav-collapse-closed-transform:none;
777
- --tds-sidenav-collapse-open-transform:none;
778
- }
779
- }
780
-
781
- .tds-sidenav--theme-gray{
782
- --tds-sidenav-item-background-hover:var(--t-fill-color-neutral-080);
783
- --tds-sidenav-item-background-active:var(--t-fill-color-neutral-070);
784
- --tds-sidenav-item-background-selected:var(--t-fill-color-neutral-050);
785
- --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
786
- --tds-sidenav-item-nested-border-color-selected:var(--t-fill-color-neutral-010);
787
- }
788
- }
789
-
790
- .tds-sidenav :where(nav,ul,.tds-sidenav-section){
791
- display:flex;
792
- }
793
-
794
- .tds-sidenav :where(nav,ul,.tds-sidenav-section,.tds-sidenav-collapse){
795
- flex-direction:column;
796
- gap:var(--t-spacing-half);
797
- width:100%;
798
- }
799
-
800
- .tds-sidenav-section-list{
801
- width:100%;
802
- padding:0;
803
- margin:0;
804
- list-style:none;
805
- }
806
-
807
- .tds-sidenav-section-header{
808
- display:flex;
809
- align-items:baseline;
810
- justify-content:space-between;
811
- padding-top:var(--t-spacing-2);
812
- }
813
-
814
- .tds-sidenav-section-header h2{
815
- margin:0;
816
- font-size:var(--t-font-size-sm);
817
- font-weight:var(--t-font-weight-semibold);
818
- line-height:1.35;
819
- color:var(--t-text-color-secondary);
820
- text-transform:uppercase;
821
- }
822
-
823
- .tds-sidenav-section:first-of-type .tds-sidenav-section-header{
824
- padding-top:0;
825
- }
826
-
827
- .tds-sidenav-section-header [slot="label-actions"]{
828
- display:flex;
829
- gap:var(--t-spacing-half);
830
- align-items:center;
831
- }
832
-
833
- .tds-sidenav-section [slot="section-actions"]{
834
- display:flex;
835
- gap:12px;
836
- align-items:center;
837
- min-height:42px;
838
- padding:var(--t-spacing-1) 0;
839
- }
840
-
841
- .tds-sidenav-section-list,
842
- .tds-sidenav-item{
843
- width:100%;
844
- padding:0;
845
- margin:0;
846
- }
847
-
848
- .tds-sidenav-item :is(a,button){
849
- position:relative;
850
- display:flex;
851
- gap:12px;
852
- align-items:center;
853
- width:100%;
854
- padding:12px;
855
- overflow:hidden;
856
- font-size:var(--t-font-size-sm);
857
- line-height:18px;
858
- color:var(--t-text-color-headline);
859
- white-space:nowrap;
860
- text-decoration:none;
861
- -webkit-appearance:none;
862
- -moz-appearance:none;
863
- appearance:none;
864
- cursor:pointer;
865
- background-color:var(--tds-sidenav-item-background, transparent);
866
- border:0;
867
- border-radius:var(--t-border-radius);
868
- transition:var(--tds-sidenav-item-transition);
869
- }
870
-
871
- :is(.tds-sidenav-item :is(a,button)):not(:has(.prefix,.suffix)),:is(.tds-sidenav-item :is(a,button)) :is(:not(.prefix,.suffix)){
872
- display:block;
873
- flex:1;
874
- overflow:hidden;
875
- text-overflow:ellipsis;
876
- text-align:left;
877
- white-space:nowrap;
878
- }
879
-
880
- :is(.tds-sidenav-item :is(a,button)):hover,:is(.tds-sidenav-item :is(a,button)):focus-visible{
881
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-hover);
882
- color:var(--t-text-color-headline);
883
- text-decoration:none;
884
- }
885
-
886
- :is(.tds-sidenav-item :is(a,button)):active{
887
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-active);
888
- }
889
-
890
- :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]){
891
- overflow:hidden;
892
- color:var(--tds-sidenav-item-icon-color);
893
- }
894
-
895
- :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{
896
- display:block;
897
- width:var(--tds-sidenav-item-icon-size);
898
- height:var(--tds-sidenav-item-icon-size);
899
- }
900
-
901
- :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section{
902
- --tds-sidenav-indent:19px;
903
- }
904
-
905
- [aria-expanded="true"]:is(.tds-sidenav-item :is(a,button)) + .tds-sidenav-section-list{
906
- visibility:visible;
907
- block-size:auto;
908
- opacity:1;
909
- }
910
-
911
- .tds-sidenav-item.selected > :is(a,button),.tds-sidenav-item:has(.tds-sidenav-section):has(.selected) > :is(a,button){
912
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-selected);
913
- --tds-sidenav-item-icon-color:var(--tds-sidenav-item-icon-color-selected);
914
-
915
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-selected);
916
- font-weight:var(--t-font-weight-semibold);
917
- }
918
-
919
- .tds-sidenav-item:has(.tds-sidenav-section){
920
- display:flex;
921
- flex-direction:column;
922
- gap:var(--t-spacing-half);
923
- }
924
-
925
- .tds-sidenav-item .tds-sidenav-section-list{
926
- --tds-sidenav-item-depth:1;
927
- gap:0;
917
+ .tds-radio input[type="radio"]{
918
+ --tds-radio-transition-property:none;
928
919
  }
929
-
930
- .tds-sidenav-action--toggle + :is(.tds-sidenav-item .tds-sidenav-section-list){
931
- visibility:hidden;
932
- block-size:0;
933
- overflow-y:clip;
934
- opacity:0;
935
- transition:content-visibility var(--t-duration-400) allow-discrete, opacity var(--t-duration-400), block-size var(--t-duration-400);
936
- }
937
-
938
- :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list{
939
- --tds-sidenav-item-depth:2;
940
- }
941
-
942
- :is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
943
- min-height:var(--t-element-size-2xl);
944
- padding-block:9px;
945
- padding-left:calc((var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth)) + var(--tds-sidenav-indent) + var(--t-spacing-fourth));
946
- line-height:1;
947
- background-color:transparent;
948
- }
949
-
950
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::before{
951
- position:absolute;
952
- top:0;
953
- bottom:0;
954
- left:calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
955
- width:2px;
956
- content:"";
957
- background-color:var(--tds-sidenav-item-nested-border-color);
958
- transition:var(--tds-sidenav-item-transition);
959
- }
960
-
961
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::after{
962
- position:absolute;
963
- inset:0 0 0 calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
964
- z-index:-1;
965
- height:100%;
966
- content:"";
967
- background-color:var(--tds-sidenav-item-nested-background);
968
- border-radius:0 var(--t-border-radius) var(--t-border-radius) 0;
969
- transition:var(--tds-sidenav-item-transition);
970
- }
971
-
972
- :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)){
973
- display:block;
974
- text-align:left;
975
- white-space:normal;
976
- }
977
-
978
- :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{
979
- --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-hover);
980
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-hover);
981
- }
982
-
983
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):active{
984
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-active);
985
- }
986
-
987
- .selected:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
988
- --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-selected);
989
- font-weight:var(--t-font-weight-medium);
990
920
  }
991
921
 
992
- .tds-sidenav-responsive-header{
993
- display:flex;
994
- gap:var(--t-spacing-2);
995
- align-items:center;
996
- width:100%;
997
- }
998
-
999
- .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle{
1000
- order:0;
1001
- }
1002
-
1003
- .tds-sidenav-responsive-header .tds-sidenav-responsive-header-label{
1004
- flex:1;
1005
- order:1;
1006
- margin:0;
1007
- font-size:var(--t-font-size-lg);
1008
- font-weight:var(--t-font-weight-medium);
1009
- color:var(--t-text-color-headline);
1010
- }
1011
-
1012
- @media (max-width: 719px){
1013
- .tds-sidenav-collapse{
1014
- z-index:10001;
1015
- display:none;
1016
- max-width:min(448px, calc(100vw - 48px));
1017
- padding:0;
1018
- margin:12px 0;
1019
- position-area:bottom span-right;
1020
- overflow:hidden;
1021
- outline:0;
1022
- background:var(--t-surface-color-card);
1023
- border:0;
1024
- border-radius:6px;
1025
- box-shadow:0 8px 20px 0 rgba(0, 0, 0, .25);
1026
- opacity:var(--tds-sidenav-collapse-open-opacity);
1027
- transform:var(--tds-sidenav-collapse-open-transform);
1028
- transition:var(--tds-sidenav-collapse-transition-enter);
1029
- will-change:transform;
1030
- }
1031
-
1032
- .tds-sidenav-scroll-container{
1033
- --webkit-overflow-scrolling:touch;
1034
- display:block;
1035
- width:100%;
1036
- height:-moz-fit-content;
1037
- height:fit-content;
1038
- padding:var(--t-spacing-2);
1039
- overflow-y:auto;
1040
- }
1041
-
1042
- .tds-sidenav-item :is(a, button) :is(.prefix){
1043
- display:none;
922
+ .tds-radio:has(input:checked){
923
+ --tds-radio-input-background-color:var(--t-form-background-color);
924
+ --tds-radio-input-border-color:var(--t-border-color-control-info);
925
+ --tds-radio-input-border-width:4px;
1044
926
  }
1045
- @supports selector(:popover-open){
1046
- .tds-sidenav-collapse:popover-open{
1047
- display:flex;
1048
- }
1049
927
 
1050
- .tds-sidenav-collapse:not(:popover-open){
1051
- opacity:var(--tds-sidenav-collapse-closed-opacity);
1052
- transition:var(--tds-sidenav-collapse-transition-exit);
928
+ .tds-radio:has(input:checked) input:hover:not(:disabled){
929
+ --tds-radio-input-background-color:var(--t-form-background-color);
930
+ --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
1053
931
  }
1054
932
 
1055
- @starting-style{
1056
- .tds-sidenav-collapse:popover-open{
1057
- opacity:var(--tds-sidenav-collapse-closed-opacity);
1058
- transform:var(--tds-sidenav-collapse-closed-transform);
1059
- }
1060
- }
933
+ .tds-radio:has(input:user-invalid){
934
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
1061
935
  }
1062
- @supports not selector(:popover-open){
1063
- .tds-sidenav-collapse.\:popover-open{
1064
- display:flex;
1065
- }
1066
936
 
1067
- .tds-sidenav-collapse:not(.\:popover-open){
1068
- opacity:var(--tds-sidenav-collapse-closed-opacity);
1069
- transition:var(--tds-sidenav-collapse-transition-exit);
937
+ .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
938
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
939
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
1070
940
  }
1071
- }
1072
- }
1073
941
 
1074
- @media (min-width: 720px){
1075
- .tds-sidenav-responsive-header{
1076
- display:none;
942
+ .tds-radio:has(input:disabled){
943
+ --tds-radio-input-background-color:var(--t-form-background-color-disabled);
944
+ --tds-radio-input-border-color:var(--t-form-border-color-disabled);
945
+
946
+ --tds-radio-label-color:var(--t-form-color-disabled);
947
+ --tds-radio-description-color:var(--t-form-color-disabled);
948
+ --tds-radio-cursor:not-allowed;
1077
949
  }
1078
- }
1079
950
 
1080
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
1081
- display:none;
951
+ .tds-radio:has(input:disabled) input:checked{
952
+ --tds-radio-input-background-color:var(--t-form-background-color);
953
+ --tds-radio-input-border-color:var(--t-form-border-color-disabled);
1082
954
  }
1083
955
 
1084
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
1085
- display:block;
1086
- }
956
+ .tds-radio-description{
957
+ display:flex;
958
+ grid-area:2 / 2;
959
+ gap:var(--t-spacing-half);
960
+ align-items:flex-start;
961
+ margin:0;
962
+ font-size:var(--tds-radio-description-font-size);
963
+ line-height:var(--tds-radio-description-line-height);
964
+ color:var(--tds-radio-description-color);
965
+ cursor:text;
966
+ }
1087
967
 
1088
- tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1089
- display:flex;
1090
- flex-direction:column;
1091
- }
968
+ .tds-radio--sm{
969
+ --tds-radio-line-height:1.35;
970
+ --tds-radio-input-size:var(--t-element-size-sm);
971
+ --tds-radio-font-size:var(--t-font-size-sm);
972
+ --tds-radio-description-font-size:var(--t-font-size-xs);
973
+ --tds-radio-description-line-height:1.3;
974
+ }
1092
975
 
1093
976
  .tds-input:has(textarea){
1094
977
  --tds-input-padding-block:6px;
@@ -1282,28 +1165,145 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1282
1165
  --tds-radio-group-description-line-height:1.3;
1283
1166
  }
1284
1167
 
1168
+ .tds-toggle-switch{
1169
+ --tds-toggle-switch-font-size:var(--t-font-size-md);
1170
+ --tds-toggle-switch-column-gap:var(--t-spacing-1);
1171
+ --tds-toggle-switch-cursor:pointer;
1172
+ --tds-toggle-switch-display:inline-grid;
1173
+ --tds-toggle-switch-line-height:1.4;
1174
+
1175
+ --tds-toggle-switch-label-color:var(--t-form-color);
1176
+
1177
+ --tds-toggle-switch-track-width:var(--t-container-size-md);
1178
+ --tds-toggle-switch-track-outline:none;
1179
+ --tds-toggle-switch-track-height:var(--t-container-size-xs);
1180
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color);
1181
+ --tds-toggle-switch-track-transition:background-color var(--t-duration-100) var(--t-ease-in-out);
1182
+
1183
+ --tds-toggle-switch-thumb-size:var(--t-element-size-md);
1184
+ --tds-toggle-switch-thumb-transform:translateX(0);
1185
+ --tds-toggle-switch-thumb-transition:transform var(--t-duration-200) var(--t-ease-in-out);
1186
+
1187
+ --tds-toggle-switch-description-font-size:var(--t-font-size-sm);
1188
+ --tds-toggle-switch-description-line-height:1.35;
1189
+ --tds-toggle-switch-description-color:var(--t-text-color-secondary);
1190
+ position:relative;
1191
+
1192
+ display:var(--tds-toggle-switch-display);
1193
+ grid-template-columns:auto;
1194
+ grid-auto-columns:1fr;
1195
+ gap:var(--t-spacing-fourth) var(--tds-toggle-switch-column-gap);
1196
+ -webkit-user-select:none;
1197
+ -moz-user-select:none;
1198
+ user-select:none;
1199
+ }
1200
+
1201
+ .tds-toggle-switch input[type="checkbox"]{
1202
+ position:absolute;
1203
+ width:var(--tds-toggle-switch-track-width);
1204
+ height:var(--tds-toggle-switch-track-height);
1205
+ margin:0;
1206
+ -webkit-appearance:none;
1207
+ -moz-appearance:none;
1208
+ appearance:none;
1209
+ cursor:var(--tds-toggle-switch-cursor);
1210
+ outline:var(--tds-toggle-switch-track-outline);
1211
+ outline-offset:var(--t-focus-ring-offset);
1212
+ background-color:transparent;
1213
+ border:0;
1214
+ border-radius:var(--t-border-radius-round);
1215
+ }
1285
1216
 
1286
- :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{
1287
- -webkit-appearance:none;
1288
- appearance:none;
1217
+ :is(.tds-toggle-switch input[type="checkbox"]):focus-visible{
1218
+ --tds-toggle-switch-track-outline:var(--t-focus-ring-outline);
1289
1219
  }
1290
1220
 
1291
- [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
1292
- inline-size:1em;
1293
- block-size:2em;
1221
+ .tds-toggle-switch label{
1222
+ display:inline-flex;
1223
+ grid-area:1 / 2;
1224
+ -moz-column-gap:var(--tds-toggle-switch-column-gap);
1225
+ column-gap:var(--tds-toggle-switch-column-gap);
1226
+ margin-top:-.09375em;
1227
+ font-size:var(--tds-toggle-switch-font-size);
1228
+ font-weight:var(--t-font-weight-normal);
1229
+ line-height:var(--tds-toggle-switch-line-height);
1230
+ color:var(--tds-toggle-switch-label-color);
1231
+ cursor:var(--tds-toggle-switch-cursor);
1232
+ }
1233
+
1234
+ .tds-toggle-switch:not(:has(input:disabled)):has(input:hover){
1235
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-hover);
1236
+ }
1237
+
1238
+ .tds-toggle-switch:has(input:checked){
1239
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on);
1240
+ --tds-toggle-switch-thumb-transform:translateX(calc(var(--tds-toggle-switch-track-width) - var(--tds-toggle-switch-thumb-size) - var(--t-spacing-half)));
1241
+ }
1242
+
1243
+ .tds-toggle-switch:has(input:checked):not(:has(input:disabled)):has(input:hover){
1244
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on-hover);
1294
1245
  }
1295
1246
 
1296
- @supports (field-sizing: content){
1297
- .tds-input--auto-width{
1298
- inline-size:-moz-fit-content;
1299
- inline-size:fit-content;
1300
- min-inline-size:min(100%, 122px);
1247
+ .tds-toggle-switch:has(input:disabled){
1248
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-disabled);
1249
+ --tds-toggle-switch-label-color:var(--t-form-color-disabled);
1250
+ --tds-toggle-switch-description-color:var(--t-form-color-disabled);
1251
+ --tds-toggle-switch-cursor:not-allowed;
1301
1252
  }
1302
1253
 
1303
- .tds-input--auto-width input{
1304
- field-sizing:content;
1305
- inline-size:auto;
1254
+ .tds-toggle-switch-track{
1255
+ position:relative;
1256
+ flex-shrink:0;
1257
+ width:var(--tds-toggle-switch-track-width);
1258
+ height:var(--tds-toggle-switch-track-height);
1259
+ background-color:var(--tds-toggle-switch-track-background-color);
1260
+ border-radius:var(--t-border-radius-round);
1261
+ transition:var(--tds-toggle-switch-track-transition);
1262
+ }
1263
+
1264
+ .tds-toggle-switch-track::before{
1265
+ position:absolute;
1266
+ top:var(--t-spacing-fourth);
1267
+ left:var(--t-spacing-fourth);
1268
+ width:var(--tds-toggle-switch-thumb-size);
1269
+ height:var(--tds-toggle-switch-thumb-size);
1270
+ content:"";
1271
+ background-color:#fff;
1272
+ border-radius:var(--t-border-radius-round);
1273
+ transform:var(--tds-toggle-switch-thumb-transform);
1274
+ transition:var(--tds-toggle-switch-thumb-transition);
1275
+ }
1276
+
1277
+ @media (prefers-reduced-motion: reduce){
1278
+
1279
+ .tds-toggle-switch-track{
1280
+ --tds-toggle-switch-track-transition:none;
1281
+ --tds-toggle-switch-thumb-transition:none;
1282
+ }
1306
1283
  }
1284
+
1285
+ .tds-toggle-switch-description{
1286
+ display:flex;
1287
+ grid-area:2 / 2;
1288
+ align-items:flex-start;
1289
+ margin:0;
1290
+ font-size:var(--tds-toggle-switch-description-font-size);
1291
+ line-height:var(--tds-toggle-switch-description-line-height);
1292
+ color:var(--tds-toggle-switch-description-color);
1293
+ cursor:text;
1294
+ }
1295
+
1296
+ .tds-toggle-switch--sm{
1297
+ --tds-toggle-switch-font-size:var(--t-font-size-sm);
1298
+ --tds-toggle-switch-line-height:1.35;
1299
+ --tds-toggle-switch-track-height:var(--t-element-size-lg);
1300
+ --tds-toggle-switch-thumb-size:var(--t-element-size-sm);
1301
+ --tds-toggle-switch-description-font-size:var(--t-font-size-xs);
1302
+ --tds-toggle-switch-description-line-height:1.3;
1303
+ }
1304
+
1305
+ .tds-toggle-switch--hide-label{
1306
+ --tds-toggle-switch-display:inline-flex;
1307
1307
  }
1308
1308
 
1309
1309
  .tds-select{
@@ -3681,18 +3681,19 @@ a[class="tds-btn"]{
3681
3681
  line-height:1.35;
3682
3682
  }
3683
3683
 
3684
- .tds-time-field{
3685
- --tds-time-field-border-color:var(--t-form-border-color);
3686
- --tds-time-field-border-color-hover:var(--t-form-border-color-hover);
3687
- --tds-time-field-border-color-active:var(--t-form-border-color-focus);
3688
- --tds-time-field-background-color:var(--t-form-background-color);
3689
- --tds-time-field-color:var(--t-form-color);
3690
- --tds-time-field-placeholder-color:var(--t-form-placeholder-color);
3691
- --tds-time-field-font-size:var(--t-font-size-md);
3692
- --tds-time-field-min-height:var(--t-container-size-md);
3693
- --tds-time-field-padding-block:6px;
3694
- --tds-time-field-description-color:var(--t-text-color-secondary);
3695
- --tds-time-field-description-invalid-icon-display:none;
3684
+ .tds-date-picker{
3685
+ --tds-date-picker-border-color:var(--t-form-border-color);
3686
+ --tds-date-picker-border-color-hover:var(--t-form-border-color-hover);
3687
+ --tds-date-picker-border-color-active:var(--t-form-border-color-focus);
3688
+ --tds-date-picker-background-color:var(--t-form-background-color);
3689
+ --tds-date-picker-color:var(--t-form-color);
3690
+ --tds-date-picker-placeholder-color:var(--t-form-placeholder-color);
3691
+ --tds-date-picker-font-size:var(--t-font-size-md);
3692
+ --tds-date-picker-min-height:var(--t-container-size-md);
3693
+ --tds-date-picker-padding-block:6px;
3694
+ --tds-date-picker-button-offset:4px;
3695
+ --tds-date-picker-description-color:var(--t-text-color-secondary);
3696
+ --tds-date-picker-description-invalid-icon-display:none;
3696
3697
 
3697
3698
  position:relative;
3698
3699
  display:flex;
@@ -3700,135 +3701,291 @@ a[class="tds-btn"]{
3700
3701
  gap:var(--t-spacing-half);
3701
3702
  }
3702
3703
 
3703
- .tds-time-field[data-required] .tds-time-field-label::after{
3704
+ .tds-date-picker[data-required] .tds-date-picker-label::after{
3704
3705
  margin-left:.25ch;
3705
3706
  color:var(--t-text-color-status-error);
3706
3707
  content:"*";
3707
3708
  }
3708
3709
 
3709
- .tds-time-field[data-invalid]{
3710
- --tds-time-field-border-color:var(--t-form-border-color-error);
3711
- --tds-time-field-border-color-hover:var(--t-form-border-color-error-hover);
3712
- --tds-time-field-border-color-active:var(--t-form-border-color-error-hover);
3713
- --tds-time-field-background-color:var(--t-form-background-color-error);
3714
- --tds-time-field-description-color:var(--t-text-color-status-error);
3715
- --tds-time-field-description-invalid-icon-display:inline-block;
3710
+ .tds-date-picker[data-invalid]{
3711
+ --tds-date-picker-border-color:var(--t-form-border-color-error);
3712
+ --tds-date-picker-border-color-hover:var(--t-form-border-color-error-hover);
3713
+ --tds-date-picker-border-color-active:var(--t-form-border-color-error-hover);
3714
+ --tds-date-picker-background-color:var(--t-form-background-color-error);
3715
+ --tds-date-picker-description-color:var(--t-text-color-status-error);
3716
+ --tds-date-picker-description-invalid-icon-display:inline-block;
3716
3717
  }
3717
3718
 
3718
- .tds-time-field[data-disabled]{
3719
- --tds-time-field-border-color:var(--t-form-border-color-disabled);
3720
- --tds-time-field-background-color:var(--t-form-background-color-disabled);
3721
- --tds-time-field-color:var(--t-form-color-disabled);
3722
- --tds-time-field-placeholder-color:var(--t-form-color-disabled);
3719
+ .tds-date-picker[data-disabled]{
3720
+ --tds-date-picker-border-color:var(--t-form-border-color-disabled);
3721
+ --tds-date-picker-background-color:var(--t-form-background-color-disabled);
3722
+ --tds-date-picker-color:var(--t-form-color-disabled);
3723
+ --tds-date-picker-placeholder-color:var(--t-form-color-disabled);
3723
3724
  }
3724
3725
 
3725
- .tds-time-field[data-disabled] .tds-time-field-label{
3726
- color:var(--t-form-color-disabled);
3727
- }
3728
-
3729
- .tds-time-field[data-disabled] .tds-time-field-input{
3726
+ .tds-date-picker[data-disabled] .tds-date-picker-field{
3730
3727
  cursor:not-allowed;
3731
3728
  }
3732
3729
 
3733
- .tds-time-field--lg{
3734
- --tds-time-field-min-height:var(--t-container-size-lg);
3735
- --tds-time-field-font-size:var(--t-font-size-lg);
3730
+ .tds-date-picker--lg{
3731
+ --tds-date-picker-min-height:var(--t-container-size-lg);
3732
+ --tds-date-picker-font-size:var(--t-font-size-lg);
3733
+ --tds-date-picker-button-offset:5px;
3736
3734
  }
3737
3735
 
3738
- .tds-time-field-label{
3736
+ .tds-date-picker-label{
3739
3737
  font-size:var(--t-font-size-md);
3740
3738
  font-weight:var(--t-font-weight-normal);
3741
3739
  color:var(--t-text-color);
3742
3740
  cursor:default;
3743
3741
  }
3744
3742
 
3745
- .tds-time-field-input{
3743
+ .tds-date-picker-field{
3746
3744
  display:flex;
3747
3745
  align-items:center;
3748
3746
  inline-size:100%;
3749
- min-block-size:var(--tds-time-field-min-height);
3750
- padding-block:var(--tds-time-field-padding-block);
3751
- padding-inline:var(--t-spacing-1);
3747
+ min-block-size:var(--tds-date-picker-min-height);
3752
3748
  font-family:inherit;
3753
- font-size:var(--tds-time-field-font-size);
3754
- font-variant-numeric:tabular-nums;
3749
+ font-size:var(--tds-date-picker-font-size);
3755
3750
  line-height:1;
3756
- color:var(--tds-time-field-color);
3751
+ color:var(--tds-date-picker-color);
3752
+ -webkit-appearance:none;
3753
+ -moz-appearance:none;
3754
+ appearance:none;
3757
3755
  cursor:text;
3758
3756
  outline:var(--t-focus-ring-width) solid transparent;
3759
3757
  outline-offset:0;
3760
- background-color:var(--tds-time-field-background-color);
3761
- border:var(--t-form-border-width) solid var(--tds-time-field-border-color);
3758
+ background-color:var(--tds-date-picker-background-color);
3759
+ border:var(--t-form-border-width) solid var(--tds-date-picker-border-color);
3762
3760
  border-radius:var(--t-form-border-radius);
3763
3761
  }
3764
3762
 
3765
- .tds-time-field-input[data-hovered]:not([data-focus-visible],[data-focused],[data-disabled]){
3766
- border-color:var(--tds-time-field-border-color-hover);
3763
+ .tds-date-picker-field[data-hovered]:not([data-focus-visible],[data-focus-within],[data-disabled]){
3764
+ border-color:var(--tds-date-picker-border-color-hover);
3767
3765
  }
3768
3766
 
3769
- .tds-time-field-input[data-focus-within]{
3767
+ .tds-date-picker-field[data-focus-within]{
3770
3768
  outline-color:var(--t-focus-ring-color);
3771
3769
  outline-offset:var(--t-focus-ring-offset);
3772
- border-color:var(--tds-time-field-border-color-active);
3770
+ border-color:var(--tds-date-picker-border-color-active);
3773
3771
  }
3774
3772
 
3775
- .tds-time-field-input[data-readonly]{
3773
+ .tds-date-picker-field:has(.tds-date-picker-input[data-readonly]){
3776
3774
  color:var(--t-form-color-readonly);
3777
3775
  background-color:var(--t-form-background-color-readonly);
3778
3776
  border-color:var(--t-form-border-color-readonly);
3779
3777
  }
3780
3778
 
3781
- .tds-time-field-input[data-readonly][data-hovered]{
3779
+ .tds-date-picker-field[data-hovered]:has(.tds-date-picker-input[data-readonly]){
3782
3780
  border-color:var(--t-form-border-color-readonly);
3783
3781
  }
3784
3782
 
3785
- .tds-time-field-input[data-readonly][data-focus-within]{
3783
+ .tds-date-picker-field[data-focus-within]:has(.tds-date-picker-input[data-readonly]){
3786
3784
  outline-color:var(--t-focus-ring-color);
3787
3785
  outline-offset:var(--t-focus-ring-offset);
3788
3786
  border-color:var(--t-form-border-color-hover);
3789
3787
  }
3790
3788
 
3791
- .tds-time-field-segment{
3792
- padding-inline:1px;
3789
+ .tds-date-picker-input{
3790
+ flex:1;
3791
+ padding-block:var(--tds-date-picker-padding-block);
3792
+ padding-inline-start:var(--t-spacing-1);
3793
3793
  font-variant-numeric:tabular-nums;
3794
- cursor:text;
3794
+ }
3795
+
3796
+ .tds-date-picker-segment{
3797
+ padding-inline:2px;
3795
3798
  caret-color:transparent;
3796
3799
  border-radius:var(--t-border-radius-sm);
3797
3800
  }
3798
3801
 
3799
- .tds-time-field-segment[data-placeholder]{
3800
- color:var(--tds-time-field-placeholder-color);
3802
+ .tds-date-picker-segment[data-placeholder]{
3803
+ color:var(--tds-date-picker-placeholder-color);
3801
3804
  }
3802
3805
 
3803
- .tds-time-field-segment[data-focused]{
3806
+ .tds-date-picker-segment[data-focused]{
3804
3807
  color:var(--t-text-color-inverted);
3805
3808
  outline:0;
3806
3809
  background:var(--t-fill-color-interaction);
3807
3810
  }
3808
3811
 
3809
- .tds-time-field-segment-separator{
3812
+ .tds-date-picker-segment-separator{
3810
3813
  padding-inline:0;
3811
- color:var(--tds-time-field-placeholder-color);
3814
+ color:var(--tds-date-picker-placeholder-color);
3812
3815
  }
3813
3816
 
3814
- .tds-time-field-description{
3817
+ .tds-date-picker-description{
3815
3818
  display:flex;
3816
3819
  gap:var(--t-spacing-half);
3817
3820
  align-items:flex-start;
3818
3821
  margin:0;
3819
3822
  font-size:var(--t-font-size-sm);
3820
3823
  line-height:1.35;
3821
- color:var(--tds-time-field-description-color, var(--t-text-color-secondary));
3824
+ color:var(--tds-date-picker-description-color, var(--t-text-color-secondary));
3822
3825
  cursor:text;
3823
3826
  }
3824
3827
 
3825
- .tds-time-field-description .tds-time-field-description-invalid-icon{
3826
- display:var(--tds-time-field-description-invalid-icon-display, none);
3828
+ .tds-date-picker-description .tds-date-picker-description-invalid-icon{
3829
+ display:var(--tds-date-picker-description-invalid-icon-display, none);
3827
3830
  flex-shrink:0;
3828
3831
  margin-block-start:calc(.5lh - .5em);
3829
3832
  line-height:1.35;
3830
3833
  }
3831
3834
 
3835
+ .tds-date-picker-button{
3836
+ flex-shrink:0;
3837
+ align-self:center;
3838
+ inline-size:calc(var(--tds-date-picker-min-height) - (var(--tds-date-picker-button-offset) * 2));
3839
+ block-size:calc(var(--tds-date-picker-min-height) - (var(--tds-date-picker-button-offset) * 2));
3840
+ padding:0;
3841
+ margin-inline-end:var(--tds-date-picker-button-offset);
3842
+ }
3843
+
3844
+ .tds-date-picker-popover{
3845
+ padding:var(--t-spacing-2);
3846
+ background:var(--t-surface-color-card);
3847
+ border:1px solid var(--t-border-color);
3848
+ border-radius:var(--t-border-radius);
3849
+ box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
3850
+ }
3851
+
3852
+ .tds-date-picker-popover[data-entering]{
3853
+ animation:tds-date-picker-popover-enter 160ms ease;
3854
+ }
3855
+
3856
+ .tds-date-picker-popover[data-exiting]{
3857
+ animation:tds-date-picker-popover-exit 130ms ease;
3858
+ }
3859
+
3860
+ @keyframes tds-date-picker-popover-enter{
3861
+ from{
3862
+ opacity:0;
3863
+ transform:translateY(-8px);
3864
+ }
3865
+ }
3866
+
3867
+ @keyframes tds-date-picker-popover-exit{
3868
+ to{
3869
+ opacity:0;
3870
+ transform:translateY(-8px);
3871
+ }
3872
+ }
3873
+
3874
+ @media (prefers-reduced-motion: reduce){
3875
+ .tds-date-picker-popover[data-entering],.tds-date-picker-popover[data-exiting]{
3876
+ animation:none;
3877
+ }
3878
+ }
3879
+
3880
+ .tds-date-picker-calendar{
3881
+ inline-size:-moz-fit-content;
3882
+ inline-size:fit-content;
3883
+ }
3884
+
3885
+ .tds-date-picker-calendar-header{
3886
+ display:flex;
3887
+ align-items:center;
3888
+ justify-content:space-between;
3889
+ padding-block-end:var(--t-spacing-1);
3890
+ }
3891
+
3892
+ .tds-date-picker-calendar-title{
3893
+ flex:1;
3894
+ margin:0;
3895
+ font-size:var(--t-font-size-md);
3896
+ font-weight:var(--t-font-weight-semibold);
3897
+ text-align:center;
3898
+ }
3899
+
3900
+ .tds-date-picker-calendar-nav{
3901
+ display:flex;
3902
+ align-items:center;
3903
+ justify-content:center;
3904
+ padding:var(--t-spacing-half);
3905
+ color:var(--t-text-color);
3906
+ cursor:default;
3907
+ outline:0;
3908
+ background:transparent;
3909
+ border:0;
3910
+ border-radius:var(--t-border-radius-sm);
3911
+ }
3912
+
3913
+ .tds-date-picker-calendar-nav[data-hovered]{
3914
+ background:var(--t-fill-color-neutral-070);
3915
+ }
3916
+
3917
+ .tds-date-picker-calendar-nav[data-pressed]{
3918
+ background:var(--t-fill-color-button-interaction-ghost-active);
3919
+ }
3920
+
3921
+ .tds-date-picker-calendar-nav[data-focus-visible]{
3922
+ outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
3923
+ outline-offset:var(--t-focus-ring-offset);
3924
+ }
3925
+
3926
+ .tds-date-picker-calendar-nav[data-disabled]{
3927
+ color:var(--t-form-color-disabled);
3928
+ cursor:not-allowed;
3929
+ }
3930
+
3931
+ .tds-date-picker-calendar-grid{
3932
+ border-collapse:collapse;
3933
+ }
3934
+
3935
+ .tds-date-picker-calendar-header-cell{
3936
+ padding-block:var(--t-spacing-half);
3937
+ font-size:var(--t-font-size-sm);
3938
+ font-weight:var(--t-font-weight-normal);
3939
+ color:var(--t-text-color-secondary);
3940
+ text-align:center;
3941
+ }
3942
+
3943
+ .tds-date-picker-calendar-cell{
3944
+ display:flex;
3945
+ align-items:center;
3946
+ justify-content:center;
3947
+ inline-size:2.25rem;
3948
+ block-size:2.25rem;
3949
+ font-size:var(--t-font-size-md);
3950
+ color:var(--t-text-color);
3951
+ cursor:default;
3952
+ outline:0;
3953
+ border-radius:var(--t-border-radius-sm);
3954
+ }
3955
+
3956
+ .tds-date-picker-calendar-cell[data-hovered]{
3957
+ background:var(--t-fill-color-neutral-070);
3958
+ }
3959
+
3960
+ .tds-date-picker-calendar-cell[data-pressed]{
3961
+ background:var(--t-fill-color-button-interaction-ghost-active);
3962
+ }
3963
+
3964
+ .tds-date-picker-calendar-cell[data-selected]{
3965
+ color:var(--t-text-color-inverted);
3966
+ background:var(--t-fill-color-interaction);
3967
+ }
3968
+
3969
+ .tds-date-picker-calendar-cell[data-focus-visible]{
3970
+ outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
3971
+ outline-offset:var(--t-focus-ring-offset);
3972
+ }
3973
+
3974
+ .tds-date-picker-calendar-cell[data-unavailable]{
3975
+ color:var(--t-text-color-secondary);
3976
+ text-decoration:line-through;
3977
+ cursor:not-allowed;
3978
+ }
3979
+
3980
+ .tds-date-picker-calendar-cell[data-disabled]{
3981
+ color:var(--t-form-color-disabled);
3982
+ cursor:not-allowed;
3983
+ }
3984
+
3985
+ .tds-date-picker-calendar-cell[data-outside-month]{
3986
+ color:var(--t-text-color-secondary);
3987
+ }
3988
+
3832
3989
  .tds-number-stepper{
3833
3990
  --tds-number-stepper-border-color:var(--t-form-border-color);
3834
3991
  --tds-number-stepper-border-color-hover:var(--t-form-border-color-hover);
@@ -3982,19 +4139,18 @@ a[class="tds-btn"]{
3982
4139
  line-height:1.35;
3983
4140
  }
3984
4141
 
3985
- .tds-date-picker{
3986
- --tds-date-picker-border-color:var(--t-form-border-color);
3987
- --tds-date-picker-border-color-hover:var(--t-form-border-color-hover);
3988
- --tds-date-picker-border-color-active:var(--t-form-border-color-focus);
3989
- --tds-date-picker-background-color:var(--t-form-background-color);
3990
- --tds-date-picker-color:var(--t-form-color);
3991
- --tds-date-picker-placeholder-color:var(--t-form-placeholder-color);
3992
- --tds-date-picker-font-size:var(--t-font-size-md);
3993
- --tds-date-picker-min-height:var(--t-container-size-md);
3994
- --tds-date-picker-padding-block:6px;
3995
- --tds-date-picker-button-offset:4px;
3996
- --tds-date-picker-description-color:var(--t-text-color-secondary);
3997
- --tds-date-picker-description-invalid-icon-display:none;
4142
+ .tds-time-field{
4143
+ --tds-time-field-border-color:var(--t-form-border-color);
4144
+ --tds-time-field-border-color-hover:var(--t-form-border-color-hover);
4145
+ --tds-time-field-border-color-active:var(--t-form-border-color-focus);
4146
+ --tds-time-field-background-color:var(--t-form-background-color);
4147
+ --tds-time-field-color:var(--t-form-color);
4148
+ --tds-time-field-placeholder-color:var(--t-form-placeholder-color);
4149
+ --tds-time-field-font-size:var(--t-font-size-md);
4150
+ --tds-time-field-min-height:var(--t-container-size-md);
4151
+ --tds-time-field-padding-block:6px;
4152
+ --tds-time-field-description-color:var(--t-text-color-secondary);
4153
+ --tds-time-field-description-invalid-icon-display:none;
3998
4154
 
3999
4155
  position:relative;
4000
4156
  display:flex;
@@ -4002,291 +4158,135 @@ a[class="tds-btn"]{
4002
4158
  gap:var(--t-spacing-half);
4003
4159
  }
4004
4160
 
4005
- .tds-date-picker[data-required] .tds-date-picker-label::after{
4161
+ .tds-time-field[data-required] .tds-time-field-label::after{
4006
4162
  margin-left:.25ch;
4007
4163
  color:var(--t-text-color-status-error);
4008
4164
  content:"*";
4009
4165
  }
4010
4166
 
4011
- .tds-date-picker[data-invalid]{
4012
- --tds-date-picker-border-color:var(--t-form-border-color-error);
4013
- --tds-date-picker-border-color-hover:var(--t-form-border-color-error-hover);
4014
- --tds-date-picker-border-color-active:var(--t-form-border-color-error-hover);
4015
- --tds-date-picker-background-color:var(--t-form-background-color-error);
4016
- --tds-date-picker-description-color:var(--t-text-color-status-error);
4017
- --tds-date-picker-description-invalid-icon-display:inline-block;
4167
+ .tds-time-field[data-invalid]{
4168
+ --tds-time-field-border-color:var(--t-form-border-color-error);
4169
+ --tds-time-field-border-color-hover:var(--t-form-border-color-error-hover);
4170
+ --tds-time-field-border-color-active:var(--t-form-border-color-error-hover);
4171
+ --tds-time-field-background-color:var(--t-form-background-color-error);
4172
+ --tds-time-field-description-color:var(--t-text-color-status-error);
4173
+ --tds-time-field-description-invalid-icon-display:inline-block;
4018
4174
  }
4019
4175
 
4020
- .tds-date-picker[data-disabled]{
4021
- --tds-date-picker-border-color:var(--t-form-border-color-disabled);
4022
- --tds-date-picker-background-color:var(--t-form-background-color-disabled);
4023
- --tds-date-picker-color:var(--t-form-color-disabled);
4024
- --tds-date-picker-placeholder-color:var(--t-form-color-disabled);
4176
+ .tds-time-field[data-disabled]{
4177
+ --tds-time-field-border-color:var(--t-form-border-color-disabled);
4178
+ --tds-time-field-background-color:var(--t-form-background-color-disabled);
4179
+ --tds-time-field-color:var(--t-form-color-disabled);
4180
+ --tds-time-field-placeholder-color:var(--t-form-color-disabled);
4025
4181
  }
4026
4182
 
4027
- .tds-date-picker[data-disabled] .tds-date-picker-field{
4183
+ .tds-time-field[data-disabled] .tds-time-field-label{
4184
+ color:var(--t-form-color-disabled);
4185
+ }
4186
+
4187
+ .tds-time-field[data-disabled] .tds-time-field-input{
4028
4188
  cursor:not-allowed;
4029
4189
  }
4030
4190
 
4031
- .tds-date-picker--lg{
4032
- --tds-date-picker-min-height:var(--t-container-size-lg);
4033
- --tds-date-picker-font-size:var(--t-font-size-lg);
4034
- --tds-date-picker-button-offset:5px;
4191
+ .tds-time-field--lg{
4192
+ --tds-time-field-min-height:var(--t-container-size-lg);
4193
+ --tds-time-field-font-size:var(--t-font-size-lg);
4035
4194
  }
4036
4195
 
4037
- .tds-date-picker-label{
4196
+ .tds-time-field-label{
4038
4197
  font-size:var(--t-font-size-md);
4039
4198
  font-weight:var(--t-font-weight-normal);
4040
4199
  color:var(--t-text-color);
4041
4200
  cursor:default;
4042
4201
  }
4043
4202
 
4044
- .tds-date-picker-field{
4203
+ .tds-time-field-input{
4045
4204
  display:flex;
4046
4205
  align-items:center;
4047
4206
  inline-size:100%;
4048
- min-block-size:var(--tds-date-picker-min-height);
4207
+ min-block-size:var(--tds-time-field-min-height);
4208
+ padding-block:var(--tds-time-field-padding-block);
4209
+ padding-inline:var(--t-spacing-1);
4049
4210
  font-family:inherit;
4050
- font-size:var(--tds-date-picker-font-size);
4211
+ font-size:var(--tds-time-field-font-size);
4212
+ font-variant-numeric:tabular-nums;
4051
4213
  line-height:1;
4052
- color:var(--tds-date-picker-color);
4053
- -webkit-appearance:none;
4054
- -moz-appearance:none;
4055
- appearance:none;
4214
+ color:var(--tds-time-field-color);
4056
4215
  cursor:text;
4057
4216
  outline:var(--t-focus-ring-width) solid transparent;
4058
4217
  outline-offset:0;
4059
- background-color:var(--tds-date-picker-background-color);
4060
- border:var(--t-form-border-width) solid var(--tds-date-picker-border-color);
4218
+ background-color:var(--tds-time-field-background-color);
4219
+ border:var(--t-form-border-width) solid var(--tds-time-field-border-color);
4061
4220
  border-radius:var(--t-form-border-radius);
4062
4221
  }
4063
4222
 
4064
- .tds-date-picker-field[data-hovered]:not([data-focus-visible],[data-focus-within],[data-disabled]){
4065
- border-color:var(--tds-date-picker-border-color-hover);
4223
+ .tds-time-field-input[data-hovered]:not([data-focus-visible],[data-focused],[data-disabled]){
4224
+ border-color:var(--tds-time-field-border-color-hover);
4066
4225
  }
4067
4226
 
4068
- .tds-date-picker-field[data-focus-within]{
4227
+ .tds-time-field-input[data-focus-within]{
4069
4228
  outline-color:var(--t-focus-ring-color);
4070
4229
  outline-offset:var(--t-focus-ring-offset);
4071
- border-color:var(--tds-date-picker-border-color-active);
4230
+ border-color:var(--tds-time-field-border-color-active);
4072
4231
  }
4073
4232
 
4074
- .tds-date-picker-field:has(.tds-date-picker-input[data-readonly]){
4233
+ .tds-time-field-input[data-readonly]{
4075
4234
  color:var(--t-form-color-readonly);
4076
4235
  background-color:var(--t-form-background-color-readonly);
4077
4236
  border-color:var(--t-form-border-color-readonly);
4078
4237
  }
4079
4238
 
4080
- .tds-date-picker-field[data-hovered]:has(.tds-date-picker-input[data-readonly]){
4239
+ .tds-time-field-input[data-readonly][data-hovered]{
4081
4240
  border-color:var(--t-form-border-color-readonly);
4082
4241
  }
4083
4242
 
4084
- .tds-date-picker-field[data-focus-within]:has(.tds-date-picker-input[data-readonly]){
4243
+ .tds-time-field-input[data-readonly][data-focus-within]{
4085
4244
  outline-color:var(--t-focus-ring-color);
4086
4245
  outline-offset:var(--t-focus-ring-offset);
4087
4246
  border-color:var(--t-form-border-color-hover);
4088
4247
  }
4089
4248
 
4090
- .tds-date-picker-input{
4091
- flex:1;
4092
- padding-block:var(--tds-date-picker-padding-block);
4093
- padding-inline-start:var(--t-spacing-1);
4249
+ .tds-time-field-segment{
4250
+ padding-inline:1px;
4094
4251
  font-variant-numeric:tabular-nums;
4095
- }
4096
-
4097
- .tds-date-picker-segment{
4098
- padding-inline:2px;
4252
+ cursor:text;
4099
4253
  caret-color:transparent;
4100
4254
  border-radius:var(--t-border-radius-sm);
4101
4255
  }
4102
4256
 
4103
- .tds-date-picker-segment[data-placeholder]{
4104
- color:var(--tds-date-picker-placeholder-color);
4257
+ .tds-time-field-segment[data-placeholder]{
4258
+ color:var(--tds-time-field-placeholder-color);
4105
4259
  }
4106
4260
 
4107
- .tds-date-picker-segment[data-focused]{
4261
+ .tds-time-field-segment[data-focused]{
4108
4262
  color:var(--t-text-color-inverted);
4109
4263
  outline:0;
4110
4264
  background:var(--t-fill-color-interaction);
4111
4265
  }
4112
4266
 
4113
- .tds-date-picker-segment-separator{
4267
+ .tds-time-field-segment-separator{
4114
4268
  padding-inline:0;
4115
- color:var(--tds-date-picker-placeholder-color);
4269
+ color:var(--tds-time-field-placeholder-color);
4116
4270
  }
4117
4271
 
4118
- .tds-date-picker-description{
4272
+ .tds-time-field-description{
4119
4273
  display:flex;
4120
4274
  gap:var(--t-spacing-half);
4121
4275
  align-items:flex-start;
4122
4276
  margin:0;
4123
4277
  font-size:var(--t-font-size-sm);
4124
4278
  line-height:1.35;
4125
- color:var(--tds-date-picker-description-color, var(--t-text-color-secondary));
4279
+ color:var(--tds-time-field-description-color, var(--t-text-color-secondary));
4126
4280
  cursor:text;
4127
4281
  }
4128
4282
 
4129
- .tds-date-picker-description .tds-date-picker-description-invalid-icon{
4130
- display:var(--tds-date-picker-description-invalid-icon-display, none);
4283
+ .tds-time-field-description .tds-time-field-description-invalid-icon{
4284
+ display:var(--tds-time-field-description-invalid-icon-display, none);
4131
4285
  flex-shrink:0;
4132
4286
  margin-block-start:calc(.5lh - .5em);
4133
4287
  line-height:1.35;
4134
4288
  }
4135
4289
 
4136
- .tds-date-picker-button{
4137
- flex-shrink:0;
4138
- align-self:center;
4139
- inline-size:calc(var(--tds-date-picker-min-height) - (var(--tds-date-picker-button-offset) * 2));
4140
- block-size:calc(var(--tds-date-picker-min-height) - (var(--tds-date-picker-button-offset) * 2));
4141
- padding:0;
4142
- margin-inline-end:var(--tds-date-picker-button-offset);
4143
- }
4144
-
4145
- .tds-date-picker-popover{
4146
- padding:var(--t-spacing-2);
4147
- background:var(--t-surface-color-card);
4148
- border:1px solid var(--t-border-color);
4149
- border-radius:var(--t-border-radius);
4150
- box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
4151
- }
4152
-
4153
- .tds-date-picker-popover[data-entering]{
4154
- animation:tds-date-picker-popover-enter 160ms ease;
4155
- }
4156
-
4157
- .tds-date-picker-popover[data-exiting]{
4158
- animation:tds-date-picker-popover-exit 130ms ease;
4159
- }
4160
-
4161
- @keyframes tds-date-picker-popover-enter{
4162
- from{
4163
- opacity:0;
4164
- transform:translateY(-8px);
4165
- }
4166
- }
4167
-
4168
- @keyframes tds-date-picker-popover-exit{
4169
- to{
4170
- opacity:0;
4171
- transform:translateY(-8px);
4172
- }
4173
- }
4174
-
4175
- @media (prefers-reduced-motion: reduce){
4176
- .tds-date-picker-popover[data-entering],.tds-date-picker-popover[data-exiting]{
4177
- animation:none;
4178
- }
4179
- }
4180
-
4181
- .tds-date-picker-calendar{
4182
- inline-size:-moz-fit-content;
4183
- inline-size:fit-content;
4184
- }
4185
-
4186
- .tds-date-picker-calendar-header{
4187
- display:flex;
4188
- align-items:center;
4189
- justify-content:space-between;
4190
- padding-block-end:var(--t-spacing-1);
4191
- }
4192
-
4193
- .tds-date-picker-calendar-title{
4194
- flex:1;
4195
- margin:0;
4196
- font-size:var(--t-font-size-md);
4197
- font-weight:var(--t-font-weight-semibold);
4198
- text-align:center;
4199
- }
4200
-
4201
- .tds-date-picker-calendar-nav{
4202
- display:flex;
4203
- align-items:center;
4204
- justify-content:center;
4205
- padding:var(--t-spacing-half);
4206
- color:var(--t-text-color);
4207
- cursor:default;
4208
- outline:0;
4209
- background:transparent;
4210
- border:0;
4211
- border-radius:var(--t-border-radius-sm);
4212
- }
4213
-
4214
- .tds-date-picker-calendar-nav[data-hovered]{
4215
- background:var(--t-fill-color-neutral-070);
4216
- }
4217
-
4218
- .tds-date-picker-calendar-nav[data-pressed]{
4219
- background:var(--t-fill-color-button-interaction-ghost-active);
4220
- }
4221
-
4222
- .tds-date-picker-calendar-nav[data-focus-visible]{
4223
- outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
4224
- outline-offset:var(--t-focus-ring-offset);
4225
- }
4226
-
4227
- .tds-date-picker-calendar-nav[data-disabled]{
4228
- color:var(--t-form-color-disabled);
4229
- cursor:not-allowed;
4230
- }
4231
-
4232
- .tds-date-picker-calendar-grid{
4233
- border-collapse:collapse;
4234
- }
4235
-
4236
- .tds-date-picker-calendar-header-cell{
4237
- padding-block:var(--t-spacing-half);
4238
- font-size:var(--t-font-size-sm);
4239
- font-weight:var(--t-font-weight-normal);
4240
- color:var(--t-text-color-secondary);
4241
- text-align:center;
4242
- }
4243
-
4244
- .tds-date-picker-calendar-cell{
4245
- display:flex;
4246
- align-items:center;
4247
- justify-content:center;
4248
- inline-size:2.25rem;
4249
- block-size:2.25rem;
4250
- font-size:var(--t-font-size-md);
4251
- color:var(--t-text-color);
4252
- cursor:default;
4253
- outline:0;
4254
- border-radius:var(--t-border-radius-sm);
4255
- }
4256
-
4257
- .tds-date-picker-calendar-cell[data-hovered]{
4258
- background:var(--t-fill-color-neutral-070);
4259
- }
4260
-
4261
- .tds-date-picker-calendar-cell[data-pressed]{
4262
- background:var(--t-fill-color-button-interaction-ghost-active);
4263
- }
4264
-
4265
- .tds-date-picker-calendar-cell[data-selected]{
4266
- color:var(--t-text-color-inverted);
4267
- background:var(--t-fill-color-interaction);
4268
- }
4269
-
4270
- .tds-date-picker-calendar-cell[data-focus-visible]{
4271
- outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
4272
- outline-offset:var(--t-focus-ring-offset);
4273
- }
4274
-
4275
- .tds-date-picker-calendar-cell[data-unavailable]{
4276
- color:var(--t-text-color-secondary);
4277
- text-decoration:line-through;
4278
- cursor:not-allowed;
4279
- }
4280
-
4281
- .tds-date-picker-calendar-cell[data-disabled]{
4282
- color:var(--t-form-color-disabled);
4283
- cursor:not-allowed;
4284
- }
4285
-
4286
- .tds-date-picker-calendar-cell[data-outside-month]{
4287
- color:var(--t-text-color-secondary);
4288
- }
4289
-
4290
4290
  .t-banner{
4291
4291
  --t-banner-font-size:var(--t-font-size-md);
4292
4292
  --t-banner-font-color:var(--t-text-color);