@planningcenter/tapestry 3.2.2-rc.14 → 3.2.2-rc.16

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -261,200 +261,6 @@
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
-
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;
274
-
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);
279
-
280
- --tds-checkbox-label-color:var(--t-form-color);
281
-
282
- --tds-checkbox-description-font-size:var(--t-font-size-sm);
283
- --tds-checkbox-description-line-height:1.35;
284
- --tds-checkbox-description-color:var(--t-text-color-secondary);
285
- --tds-checkbox-description-invalid-icon-display:none;
286
-
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;
297
- }
298
-
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);
305
- }
306
-
307
- .tds-checkbox tds-indeterminate{
308
- display:flex;
309
- }
310
-
311
- .tds-checkbox input[type="checkbox"]{
312
- 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;
318
- -webkit-appearance:none;
319
- -moz-appearance:none;
320
- 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);
328
- }
329
-
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%);
348
- }
349
-
350
- :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
351
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
352
- --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
353
- }
354
-
355
- :is(.tds-checkbox input[type="checkbox"]):focus-visible{
356
- outline:var(--t-focus-ring-outline);
357
- outline-offset:var(--t-focus-ring-offset);
358
- }
359
-
360
- :is(.tds-checkbox input[type="checkbox"]):disabled{
361
- pointer-events:none;
362
- }
363
-
364
- @media (prefers-reduced-motion: reduce){
365
-
366
- .tds-checkbox input[type="checkbox"]{
367
- --tds-checkbox-transition-property:none;
368
- }
369
- }
370
-
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);
381
- }
382
-
383
- .tds-checkbox:has(input:checked){
384
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
385
- }
386
-
387
- .tds-checkbox:has(input:indeterminate){
388
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
389
- }
390
-
391
- .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
392
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
393
- --tds-checkbox-description-color:var(--t-text-color-status-error);
394
- --tds-checkbox-description-invalid-icon-display:inline-block;
395
- }
396
-
397
- :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
398
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
399
- --tds-checkbox-input-background-color:var(--t-form-background-color-error);
400
- }
401
-
402
- :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:checked,:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:indeterminate{
403
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
404
- --tds-checkbox-input-background-color:var(--t-form-border-color-error);
405
- }
406
-
407
- :is(:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:checked,:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:indeterminate):hover:not(:disabled){
408
- --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
409
- --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
410
- }
411
-
412
- .tds-checkbox:has(input:required) label::after{
413
- margin-left:.25ch;
414
- color:var(--t-text-color-status-error);
415
- content:"*";
416
- }
417
-
418
- .tds-checkbox:has(input:disabled){
419
- --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
420
- --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
421
-
422
- --tds-checkbox-label-color:var(--t-form-color-disabled);
423
- --tds-checkbox-description-color:var(--t-form-color-disabled);
424
- --tds-checkbox-cursor:not-allowed;
425
- }
426
-
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);
429
- }
430
-
431
- .tds-checkbox-description{
432
- 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;
441
- }
442
-
443
- .tds-checkbox-description .tds-checkbox-description-invalid-icon{
444
- display:var(--tds-checkbox-description-invalid-icon-display);
445
- flex-shrink:0;
446
- margin-top:calc(.5lh - .5em);
447
- line-height:var(--tds-checkbox-description-line-height);
448
- }
449
-
450
- .tds-checkbox--sm{
451
- --tds-checkbox-line-height:1.35;
452
- --tds-checkbox-input-size:var(--t-element-size-sm);
453
- --tds-checkbox-font-size:var(--t-font-size-sm);
454
- --tds-checkbox-description-font-size:var(--t-font-size-xs);
455
- --tds-checkbox-description-line-height:1.3;
456
- }
457
-
458
264
 
459
265
  @media (prefers-reduced-motion: no-preference){
460
266
 
@@ -817,61 +623,279 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
817
623
  flex-direction:column;
818
624
  }
819
625
 
820
- .tds-radio{
821
- --tds-radio-font-size:var(--t-font-size-md);
822
- --tds-radio-cursor:pointer;
823
- --tds-radio-line-height:1.4;
824
- --tds-radio-transition-property:border-width;
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;
825
631
 
826
- --tds-radio-input-size:var(--t-element-size-md);
827
- --tds-radio-input-border-radius:var(--t-border-radius-round);
828
- --tds-radio-input-border-color:var(--t-form-border-color);
829
- --tds-radio-input-border-width:var(--t-form-border-width);
830
- --tds-radio-input-background-color:transparent;
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;
831
636
 
832
- --tds-radio-label-color:var(--t-form-color);
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);
833
641
 
834
- --tds-radio-description-font-size:var(--t-font-size-sm);
835
- --tds-radio-description-line-height:1.35;
836
- --tds-radio-description-color:var(--t-text-color-secondary);
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;
837
648
 
838
649
  position:relative;
839
650
  display:inline-grid;
840
651
  grid-template-columns:auto;
841
652
  grid-auto-columns:1fr;
842
653
  gap:var(--t-spacing-fourth) var(--t-spacing-1);
843
- line-height:var(--tds-radio-line-height);
844
- cursor:var(--tds-radio-cursor);
654
+ line-height:var(--tds-checkbox-line-height);
655
+ cursor:var(--tds-checkbox-cursor);
845
656
  -webkit-user-select:none;
846
657
  -moz-user-select:none;
847
658
  user-select:none;
848
659
  }
849
660
 
850
- .tds-radio label{
661
+ .tds-checkbox label{
851
662
  grid-area:1 / 2;
852
- font-size:var(--tds-radio-font-size);
663
+ font-size:var(--tds-checkbox-font-size);
853
664
  font-weight:var(--t-font-weight-normal);
854
- color:var(--tds-radio-label-color);
855
- cursor:var(--tds-radio-cursor);
665
+ color:var(--tds-checkbox-label-color);
666
+ cursor:var(--tds-checkbox-cursor);
856
667
  }
857
668
 
858
- .tds-radio input[type="radio"]{
669
+ .tds-checkbox tds-indeterminate{
670
+ display:flex;
671
+ }
672
+
673
+ .tds-checkbox input[type="checkbox"]{
859
674
  position:relative;
860
675
  width:1em;
861
676
  height:1em;
862
677
  margin:calc((1lh - 1em) / 2) 0 0;
863
- font-size:var(--tds-radio-font-size);
678
+ font-size:var(--tds-checkbox-font-size);
864
679
  line-height:inherit;
865
680
  -webkit-appearance:none;
866
681
  -moz-appearance:none;
867
682
  appearance:none;
868
- cursor:var(--tds-radio-cursor);
869
- background-color:var(--tds-radio-input-background-color);
870
- border:var(--tds-radio-input-border-width) solid var(--tds-radio-input-border-color);
871
- 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);
872
687
  transition-timing-function:var(--t-ease-in-out);
873
688
  transition-duration:var(--t-duration-200);
874
- transition-property:var(--tds-radio-transition-property);
689
+ transition-property:var(--tds-checkbox-transition-property);
690
+ }
691
+
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%);
710
+ }
711
+
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{
718
+ outline:var(--t-focus-ring-outline);
719
+ outline-offset:var(--t-focus-ring-offset);
720
+ }
721
+
722
+ :is(.tds-checkbox input[type="checkbox"]):disabled{
723
+ pointer-events:none;
724
+ }
725
+
726
+ @media (prefers-reduced-motion: reduce){
727
+
728
+ .tds-checkbox input[type="checkbox"]{
729
+ --tds-checkbox-transition-property:none;
730
+ }
731
+ }
732
+
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;
738
+ }
739
+
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);
743
+ }
744
+
745
+ .tds-checkbox:has(input:checked){
746
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
747
+ }
748
+
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);
762
+ }
763
+
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
+ }
768
+
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;
787
+ }
788
+
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);
791
+ }
792
+
793
+ .tds-checkbox-description{
794
+ display:flex;
795
+ grid-area:2 / 2;
796
+ gap:var(--t-spacing-half);
797
+ align-items:flex-start;
798
+ margin:0;
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);
802
+ cursor:text;
803
+ }
804
+
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;
818
+ }
819
+
820
+
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
+ }
825
+
826
+ [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
827
+ inline-size:1em;
828
+ block-size:2em;
829
+ }
830
+
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
+ }
837
+
838
+ .tds-input--auto-width input{
839
+ field-sizing:content;
840
+ inline-size:auto;
841
+ }
842
+ }
843
+
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;
864
+ grid-template-columns:auto;
865
+ grid-auto-columns:1fr;
866
+ gap:var(--t-spacing-fourth) var(--t-spacing-1);
867
+ line-height:var(--tds-radio-line-height);
868
+ cursor:var(--tds-radio-cursor);
869
+ -webkit-user-select:none;
870
+ -moz-user-select:none;
871
+ user-select:none;
872
+ }
873
+
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;
889
+ -webkit-appearance:none;
890
+ -moz-appearance:none;
891
+ appearance:none;
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);
875
899
  }
876
900
 
877
901
  :is(.tds-radio input[type="radio"]):hover:not(:disabled){
@@ -949,30 +973,6 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
949
973
  --tds-radio-description-line-height:1.3;
950
974
  }
951
975
 
952
-
953
- :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{
954
- -webkit-appearance:none;
955
- appearance:none;
956
- }
957
-
958
- [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
959
- inline-size:1em;
960
- block-size:2em;
961
- }
962
-
963
- @supports (field-sizing: content){
964
- .tds-input--auto-width{
965
- inline-size:-moz-fit-content;
966
- inline-size:fit-content;
967
- min-inline-size:min(100%, 122px);
968
- }
969
-
970
- .tds-input--auto-width input{
971
- field-sizing:content;
972
- inline-size:auto;
973
- }
974
- }
975
-
976
976
  .tds-toggle-switch{
977
977
  --tds-toggle-switch-font-size:var(--t-font-size-md);
978
978
  --tds-toggle-switch-column-gap:var(--t-spacing-1);
@@ -1219,25 +1219,112 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1219
1219
  }
1220
1220
  }
1221
1221
 
1222
- .tds-select{
1223
- --tds-select-border-color:var(--t-form-border-color);
1224
- --tds-select-border-color-hover:var(--t-form-border-color-hover);
1225
- --tds-select-border-color-active:var(--t-form-border-color-hover);
1226
- --tds-select-background-color:var(--t-form-background-color);
1227
- --tds-select-color:var(--t-form-color);
1228
- --tds-select-placeholder-color:var(--t-form-placeholder-color);
1229
- --tds-select-font-size:var(--t-font-size-md);
1230
- --tds-select-min-height:var(--t-container-size-md);
1231
- --tds-select-padding-block:6px;
1232
- --tds-select-description-color:var(--t-text-color-secondary);
1233
- --tds-select-description-invalid-icon-display:none;
1234
- --tds-select-transition-property:background-color, border-color, outline-color, outline-offset;
1235
- --tds-select-background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTEzLDZsLTUsNWwtNSwtNXoiIGZpbGw9IiMzRDNEM0QiLz48L3N2Zz4=");
1236
- --tds-select-caret-size:1em;
1237
- --tds-select-caret-inline-offset:.75em;
1238
- --tds-select-caret-transition:transform var(--t-duration-300) var(--t-ease-in-out);
1222
+ .tds-radio-group{
1223
+ --tds-radio-group-font-size:var(--t-font-size-md);
1224
+ --tds-radio-group-line-height:1.4;
1225
+ --tds-radio-group-gap:var(--t-spacing-1);
1239
1226
 
1240
- --tds-select-dropdown-background-color:var(--t-surface-color-card);
1227
+ --tds-radio-group-legend-margin-bottom:var(--tds-radio-group-gap);
1228
+
1229
+ --tds-radio-group-description-font-size:var(--t-font-size-sm);
1230
+ --tds-radio-group-description-line-height:1.35;
1231
+ --tds-radio-group-description-color:var(--t-text-color-secondary);
1232
+ --tds-radio-group-description-invalid-icon-display:none;
1233
+ display:flex;
1234
+ flex-direction:column;
1235
+ gap:var(--tds-radio-group-gap);
1236
+ padding:0;
1237
+ margin:0;
1238
+
1239
+ font-size:var(--tds-radio-group-font-size);
1240
+ line-height:var(--tds-radio-group-line-height);
1241
+ border:0;
1242
+ }
1243
+
1244
+ .tds-radio-group legend{
1245
+ padding:0;
1246
+ margin-bottom:var(--tds-radio-group-legend-margin-bottom);
1247
+ }
1248
+
1249
+ .tds-radio-group:has(.tds-radio-group-description){
1250
+ --tds-radio-group-legend-margin-bottom:var(--t-spacing-fourth);
1251
+ }
1252
+
1253
+ .tds-radio-group[aria-invalid="true"]{
1254
+ --tds-radio-group-description-color:var(--t-text-color-status-error);
1255
+ --tds-radio-group-description-invalid-icon-display:inline-block;
1256
+ }
1257
+
1258
+ .tds-radio-group[aria-invalid="true"] .tds-radio{
1259
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
1260
+ }
1261
+
1262
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
1263
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1264
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
1265
+ }
1266
+
1267
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
1268
+ --tds-radio-input-background-color:var(--t-form-background-color);
1269
+ }
1270
+
1271
+ .tds-radio-group:has(input:required) legend::after{
1272
+ margin-left:.25ch;
1273
+ color:var(--t-text-color-status-error);
1274
+ content:"*";
1275
+ }
1276
+
1277
+ .tds-radio-group-fields{
1278
+ display:flex;
1279
+ flex-direction:column;
1280
+ gap:var(--tds-radio-group-gap);
1281
+ align-items:flex-start;
1282
+ }
1283
+
1284
+ .tds-radio-group-description{
1285
+ display:flex;
1286
+ gap:var(--t-spacing-half);
1287
+ align-items:flex-start;
1288
+ margin:0;
1289
+ font-size:var(--tds-radio-group-description-font-size);
1290
+ line-height:var(--tds-radio-group-description-line-height);
1291
+ color:var(--tds-radio-group-description-color);
1292
+ cursor:text;
1293
+ }
1294
+
1295
+ .tds-radio-group-description .tds-radio-group-description-invalid-icon{
1296
+ display:var(--tds-radio-group-description-invalid-icon-display);
1297
+ flex-shrink:0;
1298
+ margin-top:calc(.5lh - .5em);
1299
+ line-height:var(--tds-radio-group-description-line-height);
1300
+ }
1301
+
1302
+ .tds-radio-group--sm{
1303
+ --tds-radio-group-line-height:1.35;
1304
+ --tds-radio-group-font-size:var(--t-font-size-sm);
1305
+ --tds-radio-group-description-font-size:var(--t-font-size-xs);
1306
+ --tds-radio-group-description-line-height:1.3;
1307
+ }
1308
+
1309
+ .tds-select{
1310
+ --tds-select-border-color:var(--t-form-border-color);
1311
+ --tds-select-border-color-hover:var(--t-form-border-color-hover);
1312
+ --tds-select-border-color-active:var(--t-form-border-color-hover);
1313
+ --tds-select-background-color:var(--t-form-background-color);
1314
+ --tds-select-color:var(--t-form-color);
1315
+ --tds-select-placeholder-color:var(--t-form-placeholder-color);
1316
+ --tds-select-font-size:var(--t-font-size-md);
1317
+ --tds-select-min-height:var(--t-container-size-md);
1318
+ --tds-select-padding-block:6px;
1319
+ --tds-select-description-color:var(--t-text-color-secondary);
1320
+ --tds-select-description-invalid-icon-display:none;
1321
+ --tds-select-transition-property:background-color, border-color, outline-color, outline-offset;
1322
+ --tds-select-background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTEzLDZsLTUsNWwtNSwtNXoiIGZpbGw9IiMzRDNEM0QiLz48L3N2Zz4=");
1323
+ --tds-select-caret-size:1em;
1324
+ --tds-select-caret-inline-offset:.75em;
1325
+ --tds-select-caret-transition:transform var(--t-duration-300) var(--t-ease-in-out);
1326
+
1327
+ --tds-select-dropdown-background-color:var(--t-surface-color-card);
1241
1328
  --tds-select-dropdown-border:1px solid var(--t-border-color);
1242
1329
  --tds-select-dropdown-padding:var(--t-spacing-1);
1243
1330
  --tds-select-dropdown-margin-block:5px;
@@ -1653,93 +1740,6 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1653
1740
  }
1654
1741
  }
1655
1742
 
1656
- .tds-radio-group{
1657
- --tds-radio-group-font-size:var(--t-font-size-md);
1658
- --tds-radio-group-line-height:1.4;
1659
- --tds-radio-group-gap:var(--t-spacing-1);
1660
-
1661
- --tds-radio-group-legend-margin-bottom:var(--tds-radio-group-gap);
1662
-
1663
- --tds-radio-group-description-font-size:var(--t-font-size-sm);
1664
- --tds-radio-group-description-line-height:1.35;
1665
- --tds-radio-group-description-color:var(--t-text-color-secondary);
1666
- --tds-radio-group-description-invalid-icon-display:none;
1667
- display:flex;
1668
- flex-direction:column;
1669
- gap:var(--tds-radio-group-gap);
1670
- padding:0;
1671
- margin:0;
1672
-
1673
- font-size:var(--tds-radio-group-font-size);
1674
- line-height:var(--tds-radio-group-line-height);
1675
- border:0;
1676
- }
1677
-
1678
- .tds-radio-group legend{
1679
- padding:0;
1680
- margin-bottom:var(--tds-radio-group-legend-margin-bottom);
1681
- }
1682
-
1683
- .tds-radio-group:has(.tds-radio-group-description){
1684
- --tds-radio-group-legend-margin-bottom:var(--t-spacing-fourth);
1685
- }
1686
-
1687
- .tds-radio-group[aria-invalid="true"]{
1688
- --tds-radio-group-description-color:var(--t-text-color-status-error);
1689
- --tds-radio-group-description-invalid-icon-display:inline-block;
1690
- }
1691
-
1692
- .tds-radio-group[aria-invalid="true"] .tds-radio{
1693
- --tds-radio-input-border-color:var(--t-form-border-color-error);
1694
- }
1695
-
1696
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
1697
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1698
- --tds-radio-input-background-color:var(--t-form-background-color-error);
1699
- }
1700
-
1701
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
1702
- --tds-radio-input-background-color:var(--t-form-background-color);
1703
- }
1704
-
1705
- .tds-radio-group:has(input:required) legend::after{
1706
- margin-left:.25ch;
1707
- color:var(--t-text-color-status-error);
1708
- content:"*";
1709
- }
1710
-
1711
- .tds-radio-group-fields{
1712
- display:flex;
1713
- flex-direction:column;
1714
- gap:var(--tds-radio-group-gap);
1715
- align-items:flex-start;
1716
- }
1717
-
1718
- .tds-radio-group-description{
1719
- display:flex;
1720
- gap:var(--t-spacing-half);
1721
- align-items:flex-start;
1722
- margin:0;
1723
- font-size:var(--tds-radio-group-description-font-size);
1724
- line-height:var(--tds-radio-group-description-line-height);
1725
- color:var(--tds-radio-group-description-color);
1726
- cursor:text;
1727
- }
1728
-
1729
- .tds-radio-group-description .tds-radio-group-description-invalid-icon{
1730
- display:var(--tds-radio-group-description-invalid-icon-display);
1731
- flex-shrink:0;
1732
- margin-top:calc(.5lh - .5em);
1733
- line-height:var(--tds-radio-group-description-line-height);
1734
- }
1735
-
1736
- .tds-radio-group--sm{
1737
- --tds-radio-group-line-height:1.35;
1738
- --tds-radio-group-font-size:var(--t-font-size-sm);
1739
- --tds-radio-group-description-font-size:var(--t-font-size-xs);
1740
- --tds-radio-group-description-line-height:1.3;
1741
- }
1742
-
1743
1743
  .tds-input{
1744
1744
  --tds-input-border-color:var(--t-form-border-color);
1745
1745
  --tds-input-border-color-hover:var(--t-form-border-color-hover);
@@ -3683,19 +3683,19 @@ a[class="tds-btn"]{
3683
3683
  --tds-checkbox-group-description-line-height:1.3;
3684
3684
  }
3685
3685
 
3686
- .tds-number-stepper{
3687
- --tds-number-stepper-border-color:var(--t-form-border-color);
3688
- --tds-number-stepper-border-color-hover:var(--t-form-border-color-hover);
3689
- --tds-number-stepper-border-color-active:var(--t-form-border-color-focus);
3690
- --tds-number-stepper-background-color:var(--t-form-background-color);
3691
- --tds-number-stepper-color:var(--t-form-color);
3692
- --tds-number-stepper-font-size:var(--t-font-size-md);
3693
- --tds-number-stepper-min-height:var(--t-container-size-md);
3694
- --tds-number-stepper-padding-block:6px;
3695
- --tds-number-stepper-button-offset:4px;
3696
- --tds-number-stepper-button-gap:2px;
3697
- --tds-number-stepper-description-color:var(--t-text-color-secondary);
3698
- --tds-number-stepper-description-invalid-icon-display:none;
3686
+ .tds-date-picker{
3687
+ --tds-date-picker-border-color:var(--t-form-border-color);
3688
+ --tds-date-picker-border-color-hover:var(--t-form-border-color-hover);
3689
+ --tds-date-picker-border-color-active:var(--t-form-border-color-focus);
3690
+ --tds-date-picker-background-color:var(--t-form-background-color);
3691
+ --tds-date-picker-color:var(--t-form-color);
3692
+ --tds-date-picker-placeholder-color:var(--t-form-placeholder-color);
3693
+ --tds-date-picker-font-size:var(--t-font-size-md);
3694
+ --tds-date-picker-min-height:var(--t-container-size-md);
3695
+ --tds-date-picker-padding-block:6px;
3696
+ --tds-date-picker-button-offset:4px;
3697
+ --tds-date-picker-description-color:var(--t-text-color-secondary);
3698
+ --tds-date-picker-description-invalid-icon-display:none;
3699
3699
 
3700
3700
  position:relative;
3701
3701
  display:flex;
@@ -3703,151 +3703,304 @@ a[class="tds-btn"]{
3703
3703
  gap:var(--t-spacing-half);
3704
3704
  }
3705
3705
 
3706
- .tds-number-stepper[data-required] .tds-number-stepper-label::after{
3706
+ .tds-date-picker[data-required] .tds-date-picker-label::after{
3707
3707
  margin-left:.25ch;
3708
3708
  color:var(--t-text-color-status-error);
3709
3709
  content:"*";
3710
3710
  }
3711
3711
 
3712
- .tds-number-stepper[data-invalid]{
3713
- --tds-number-stepper-border-color:var(--t-form-border-color-error);
3714
- --tds-number-stepper-border-color-hover:var(--t-form-border-color-error-hover);
3715
- --tds-number-stepper-border-color-active:var(--t-form-border-color-error-hover);
3716
- --tds-number-stepper-background-color:var(--t-form-background-color-error);
3717
- --tds-number-stepper-description-color:var(--t-text-color-status-error);
3718
- --tds-number-stepper-description-invalid-icon-display:inline-block;
3712
+ .tds-date-picker[data-invalid]{
3713
+ --tds-date-picker-border-color:var(--t-form-border-color-error);
3714
+ --tds-date-picker-border-color-hover:var(--t-form-border-color-error-hover);
3715
+ --tds-date-picker-border-color-active:var(--t-form-border-color-error-hover);
3716
+ --tds-date-picker-background-color:var(--t-form-background-color-error);
3717
+ --tds-date-picker-description-color:var(--t-text-color-status-error);
3718
+ --tds-date-picker-description-invalid-icon-display:inline-block;
3719
3719
  }
3720
3720
 
3721
- .tds-number-stepper[data-disabled]{
3722
- --tds-number-stepper-border-color:var(--t-form-border-color-disabled);
3723
- --tds-number-stepper-background-color:var(--t-form-background-color-disabled);
3724
- --tds-number-stepper-color:var(--t-form-color-disabled);
3721
+ .tds-date-picker[data-disabled]{
3722
+ --tds-date-picker-border-color:var(--t-form-border-color-disabled);
3723
+ --tds-date-picker-background-color:var(--t-form-background-color-disabled);
3724
+ --tds-date-picker-color:var(--t-form-color-disabled);
3725
+ --tds-date-picker-placeholder-color:var(--t-form-color-disabled);
3725
3726
  }
3726
3727
 
3727
- .tds-number-stepper[data-disabled] .tds-number-stepper-label{
3728
- color:var(--t-form-color-disabled);
3729
- }
3730
-
3731
- .tds-number-stepper[data-disabled] .tds-number-stepper-field{
3728
+ .tds-date-picker[data-disabled] .tds-date-picker-field{
3732
3729
  cursor:not-allowed;
3733
3730
  }
3734
3731
 
3735
- .tds-number-stepper--lg{
3736
- --tds-number-stepper-min-height:var(--t-container-size-lg);
3737
- --tds-number-stepper-font-size:var(--t-font-size-lg);
3738
- --tds-number-stepper-button-offset:5px;
3739
- --tds-number-stepper-button-gap:4px;
3732
+ .tds-date-picker--lg{
3733
+ --tds-date-picker-min-height:var(--t-container-size-lg);
3734
+ --tds-date-picker-font-size:var(--t-font-size-lg);
3735
+ --tds-date-picker-button-offset:5px;
3740
3736
  }
3741
3737
 
3742
- .tds-number-stepper-label{
3738
+ .tds-date-picker-label{
3743
3739
  font-size:var(--t-font-size-md);
3744
3740
  font-weight:var(--t-font-weight-normal);
3745
3741
  color:var(--t-text-color);
3746
3742
  cursor:default;
3747
3743
  }
3748
3744
 
3749
- .tds-number-stepper-field{
3745
+ .tds-date-picker-field{
3750
3746
  display:flex;
3751
- gap:var(--tds-number-stepper-button-gap);
3752
3747
  align-items:center;
3753
3748
  inline-size:100%;
3754
- min-block-size:var(--tds-number-stepper-min-height);
3749
+ min-block-size:var(--tds-date-picker-min-height);
3755
3750
  font-family:inherit;
3756
- font-size:var(--tds-number-stepper-font-size);
3751
+ font-size:var(--tds-date-picker-font-size);
3757
3752
  line-height:1;
3758
- color:var(--tds-number-stepper-color);
3753
+ color:var(--tds-date-picker-color);
3759
3754
  -webkit-appearance:none;
3760
3755
  -moz-appearance:none;
3761
3756
  appearance:none;
3762
- cursor:default;
3757
+ cursor:text;
3763
3758
  outline:var(--t-focus-ring-width) solid transparent;
3764
3759
  outline-offset:0;
3765
- background-color:var(--tds-number-stepper-background-color);
3766
- border:var(--t-form-border-width) solid var(--tds-number-stepper-border-color);
3760
+ background-color:var(--tds-date-picker-background-color);
3761
+ border:var(--t-form-border-width) solid var(--tds-date-picker-border-color);
3767
3762
  border-radius:var(--t-form-border-radius);
3768
3763
  }
3769
3764
 
3770
- .tds-number-stepper-field[data-hovered]:not([data-focus-visible],[data-focus-within],[data-disabled]){
3771
- border-color:var(--tds-number-stepper-border-color-hover);
3765
+ .tds-date-picker-field[data-hovered]:not([data-focus-visible],[data-focus-within],[data-disabled]){
3766
+ border-color:var(--tds-date-picker-border-color-hover);
3772
3767
  }
3773
3768
 
3774
- .tds-number-stepper-field[data-focus-within]{
3769
+ .tds-date-picker-field[data-focus-within]{
3775
3770
  outline-color:var(--t-focus-ring-color);
3776
3771
  outline-offset:var(--t-focus-ring-offset);
3777
- border-color:var(--tds-number-stepper-border-color-active);
3772
+ border-color:var(--tds-date-picker-border-color-active);
3778
3773
  }
3779
3774
 
3780
- .tds-number-stepper-field:has([readonly]){
3781
- --tds-number-stepper-background-color:var(--t-form-background-color-readonly);
3775
+ .tds-date-picker-field:has(.tds-date-picker-input[data-readonly]){
3776
+ color:var(--t-form-color-readonly);
3777
+ background-color:var(--t-form-background-color-readonly);
3778
+ border-color:var(--t-form-border-color-readonly);
3782
3779
  }
3783
3780
 
3784
- .tds-number-stepper-field[data-focus-within]:has([readonly]){
3781
+ .tds-date-picker-field[data-hovered]:has(.tds-date-picker-input[data-readonly]){
3782
+ border-color:var(--t-form-border-color-readonly);
3783
+ }
3784
+
3785
+ .tds-date-picker-field[data-focus-within]:has(.tds-date-picker-input[data-readonly]){
3786
+ outline-color:var(--t-focus-ring-color);
3787
+ outline-offset:var(--t-focus-ring-offset);
3785
3788
  border-color:var(--t-form-border-color-hover);
3786
3789
  }
3787
3790
 
3788
- .tds-number-stepper-input{
3789
- display:flex;
3791
+ .tds-date-picker-input{
3790
3792
  flex:1;
3791
- align-items:center;
3792
- min-inline-size:0;
3793
- padding-block:var(--tds-number-stepper-padding-block);
3794
- padding-inline:var(--t-spacing-1);
3795
- font-family:inherit;
3796
- font-size:inherit;
3797
- color:inherit;
3798
- outline:0;
3799
- background:transparent;
3800
- border:0;
3793
+ padding-block:var(--tds-date-picker-padding-block);
3794
+ padding-inline-start:var(--t-spacing-1);
3795
+ font-variant-numeric:tabular-nums;
3801
3796
  }
3802
3797
 
3803
- .tds-number-stepper-input::-webkit-inner-spin-button,.tds-number-stepper-input::-webkit-outer-spin-button{
3804
- margin:0;
3805
- -webkit-appearance:none;
3806
- appearance:none;
3807
- }
3808
-
3809
- .tds-number-stepper-button{
3810
- flex-shrink:0;
3811
- align-self:center;
3812
- inline-size:calc(var(--tds-number-stepper-min-height) - (var(--tds-number-stepper-button-offset) * 2));
3813
- block-size:calc(var(--tds-number-stepper-min-height) - (var(--tds-number-stepper-button-offset) * 2));
3814
- padding:0;
3798
+ .tds-date-picker-segment{
3799
+ padding-inline:2px;
3800
+ caret-color:transparent;
3801
+ border-radius:var(--t-border-radius-sm);
3815
3802
  }
3816
3803
 
3817
- .tds-number-stepper-button:last-of-type{
3818
- margin-inline-end:var(--tds-number-stepper-button-offset);
3804
+ .tds-date-picker-segment[data-placeholder]{
3805
+ color:var(--tds-date-picker-placeholder-color);
3819
3806
  }
3820
3807
 
3821
- .tds-number-stepper-description{
3808
+ .tds-date-picker-segment[data-focused]{
3809
+ color:var(--t-text-color-inverted);
3810
+ outline:0;
3811
+ background:var(--t-fill-color-interaction);
3812
+ }
3813
+
3814
+ .tds-date-picker-segment-separator{
3815
+ padding-inline:0;
3816
+ color:var(--tds-date-picker-placeholder-color);
3817
+ }
3818
+
3819
+ .tds-date-picker-description{
3822
3820
  display:flex;
3823
3821
  gap:var(--t-spacing-half);
3824
3822
  align-items:flex-start;
3825
3823
  margin:0;
3826
3824
  font-size:var(--t-font-size-sm);
3827
3825
  line-height:1.35;
3828
- color:var(--tds-number-stepper-description-color, var(--t-text-color-secondary));
3826
+ color:var(--tds-date-picker-description-color, var(--t-text-color-secondary));
3829
3827
  cursor:text;
3830
3828
  }
3831
3829
 
3832
- .tds-number-stepper-description-invalid-icon{
3833
- display:var(--tds-number-stepper-description-invalid-icon-display, none);
3830
+ .tds-date-picker-description .tds-date-picker-description-invalid-icon{
3831
+ display:var(--tds-date-picker-description-invalid-icon-display, none);
3832
+ flex-shrink:0;
3833
+ margin-block-start:calc(.5lh - .5em);
3834
+ line-height:1.35;
3835
+ }
3836
+
3837
+ .tds-date-picker-button{
3834
3838
  flex-shrink:0;
3835
- margin-block-start:calc(.5lh - .5em);
3836
- line-height:1.35;
3839
+ align-self:center;
3840
+ inline-size:calc(var(--tds-date-picker-min-height) - (var(--tds-date-picker-button-offset) * 2));
3841
+ block-size:calc(var(--tds-date-picker-min-height) - (var(--tds-date-picker-button-offset) * 2));
3842
+ padding:0;
3843
+ margin-inline-end:var(--tds-date-picker-button-offset);
3837
3844
  }
3838
3845
 
3839
- .tds-time-field{
3840
- --tds-time-field-border-color:var(--t-form-border-color);
3841
- --tds-time-field-border-color-hover:var(--t-form-border-color-hover);
3842
- --tds-time-field-border-color-active:var(--t-form-border-color-focus);
3843
- --tds-time-field-background-color:var(--t-form-background-color);
3844
- --tds-time-field-color:var(--t-form-color);
3845
- --tds-time-field-placeholder-color:var(--t-form-placeholder-color);
3846
- --tds-time-field-font-size:var(--t-font-size-md);
3847
- --tds-time-field-min-height:var(--t-container-size-md);
3848
- --tds-time-field-padding-block:6px;
3849
- --tds-time-field-description-color:var(--t-text-color-secondary);
3850
- --tds-time-field-description-invalid-icon-display:none;
3846
+ .tds-date-picker-popover{
3847
+ padding:var(--t-spacing-2);
3848
+ background:var(--t-surface-color-card);
3849
+ border:1px solid var(--t-border-color);
3850
+ border-radius:var(--t-border-radius);
3851
+ box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
3852
+ }
3853
+
3854
+ .tds-date-picker-popover[data-entering]{
3855
+ animation:tds-date-picker-popover-enter 160ms ease;
3856
+ }
3857
+
3858
+ .tds-date-picker-popover[data-exiting]{
3859
+ animation:tds-date-picker-popover-exit 130ms ease;
3860
+ }
3861
+
3862
+ @keyframes tds-date-picker-popover-enter{
3863
+ from{
3864
+ opacity:0;
3865
+ transform:translateY(-8px);
3866
+ }
3867
+ }
3868
+
3869
+ @keyframes tds-date-picker-popover-exit{
3870
+ to{
3871
+ opacity:0;
3872
+ transform:translateY(-8px);
3873
+ }
3874
+ }
3875
+
3876
+ @media (prefers-reduced-motion: reduce){
3877
+ .tds-date-picker-popover[data-entering],.tds-date-picker-popover[data-exiting]{
3878
+ animation:none;
3879
+ }
3880
+ }
3881
+
3882
+ .tds-date-picker-calendar{
3883
+ inline-size:-moz-fit-content;
3884
+ inline-size:fit-content;
3885
+ }
3886
+
3887
+ .tds-date-picker-calendar-header{
3888
+ display:flex;
3889
+ align-items:center;
3890
+ justify-content:space-between;
3891
+ padding-block-end:var(--t-spacing-1);
3892
+ }
3893
+
3894
+ .tds-date-picker-calendar-title{
3895
+ flex:1;
3896
+ margin:0;
3897
+ font-size:var(--t-font-size-md);
3898
+ font-weight:var(--t-font-weight-semibold);
3899
+ text-align:center;
3900
+ }
3901
+
3902
+ .tds-date-picker-calendar-nav{
3903
+ display:flex;
3904
+ align-items:center;
3905
+ justify-content:center;
3906
+ padding:var(--t-spacing-half);
3907
+ color:var(--t-text-color);
3908
+ cursor:default;
3909
+ outline:0;
3910
+ background:transparent;
3911
+ border:0;
3912
+ border-radius:var(--t-border-radius-sm);
3913
+ }
3914
+
3915
+ .tds-date-picker-calendar-nav[data-hovered]{
3916
+ background:var(--t-fill-color-neutral-070);
3917
+ }
3918
+
3919
+ .tds-date-picker-calendar-nav[data-pressed]{
3920
+ background:var(--t-fill-color-button-interaction-ghost-active);
3921
+ }
3922
+
3923
+ .tds-date-picker-calendar-nav[data-focus-visible]{
3924
+ outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
3925
+ outline-offset:var(--t-focus-ring-offset);
3926
+ }
3927
+
3928
+ .tds-date-picker-calendar-nav[data-disabled]{
3929
+ color:var(--t-form-color-disabled);
3930
+ cursor:not-allowed;
3931
+ }
3932
+
3933
+ .tds-date-picker-calendar-grid{
3934
+ border-collapse:collapse;
3935
+ }
3936
+
3937
+ .tds-date-picker-calendar-header-cell{
3938
+ padding-block:var(--t-spacing-half);
3939
+ font-size:var(--t-font-size-sm);
3940
+ font-weight:var(--t-font-weight-normal);
3941
+ color:var(--t-text-color-secondary);
3942
+ text-align:center;
3943
+ }
3944
+
3945
+ .tds-date-picker-calendar-cell{
3946
+ display:flex;
3947
+ align-items:center;
3948
+ justify-content:center;
3949
+ inline-size:2.25rem;
3950
+ block-size:2.25rem;
3951
+ font-size:var(--t-font-size-md);
3952
+ color:var(--t-text-color);
3953
+ cursor:default;
3954
+ outline:0;
3955
+ border-radius:var(--t-border-radius-sm);
3956
+ }
3957
+
3958
+ .tds-date-picker-calendar-cell[data-hovered]{
3959
+ background:var(--t-fill-color-neutral-070);
3960
+ }
3961
+
3962
+ .tds-date-picker-calendar-cell[data-pressed]{
3963
+ background:var(--t-fill-color-button-interaction-ghost-active);
3964
+ }
3965
+
3966
+ .tds-date-picker-calendar-cell[data-selected]{
3967
+ color:var(--t-text-color-inverted);
3968
+ background:var(--t-fill-color-interaction);
3969
+ }
3970
+
3971
+ .tds-date-picker-calendar-cell[data-focus-visible]{
3972
+ outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
3973
+ outline-offset:var(--t-focus-ring-offset);
3974
+ }
3975
+
3976
+ .tds-date-picker-calendar-cell[data-unavailable]{
3977
+ color:var(--t-text-color-secondary);
3978
+ text-decoration:line-through;
3979
+ cursor:not-allowed;
3980
+ }
3981
+
3982
+ .tds-date-picker-calendar-cell[data-disabled]{
3983
+ color:var(--t-form-color-disabled);
3984
+ cursor:not-allowed;
3985
+ }
3986
+
3987
+ .tds-date-picker-calendar-cell[data-outside-month]{
3988
+ color:var(--t-text-color-secondary);
3989
+ }
3990
+
3991
+ .tds-number-stepper{
3992
+ --tds-number-stepper-border-color:var(--t-form-border-color);
3993
+ --tds-number-stepper-border-color-hover:var(--t-form-border-color-hover);
3994
+ --tds-number-stepper-border-color-active:var(--t-form-border-color-focus);
3995
+ --tds-number-stepper-background-color:var(--t-form-background-color);
3996
+ --tds-number-stepper-color:var(--t-form-color);
3997
+ --tds-number-stepper-font-size:var(--t-font-size-md);
3998
+ --tds-number-stepper-min-height:var(--t-container-size-md);
3999
+ --tds-number-stepper-padding-block:6px;
4000
+ --tds-number-stepper-button-offset:4px;
4001
+ --tds-number-stepper-button-gap:2px;
4002
+ --tds-number-stepper-description-color:var(--t-text-color-secondary);
4003
+ --tds-number-stepper-description-invalid-icon-display:none;
3851
4004
 
3852
4005
  position:relative;
3853
4006
  display:flex;
@@ -3855,148 +4008,151 @@ a[class="tds-btn"]{
3855
4008
  gap:var(--t-spacing-half);
3856
4009
  }
3857
4010
 
3858
- .tds-time-field[data-required] .tds-time-field-label::after{
4011
+ .tds-number-stepper[data-required] .tds-number-stepper-label::after{
3859
4012
  margin-left:.25ch;
3860
4013
  color:var(--t-text-color-status-error);
3861
4014
  content:"*";
3862
4015
  }
3863
4016
 
3864
- .tds-time-field[data-invalid]{
3865
- --tds-time-field-border-color:var(--t-form-border-color-error);
3866
- --tds-time-field-border-color-hover:var(--t-form-border-color-error-hover);
3867
- --tds-time-field-border-color-active:var(--t-form-border-color-error-hover);
3868
- --tds-time-field-background-color:var(--t-form-background-color-error);
3869
- --tds-time-field-description-color:var(--t-text-color-status-error);
3870
- --tds-time-field-description-invalid-icon-display:inline-block;
4017
+ .tds-number-stepper[data-invalid]{
4018
+ --tds-number-stepper-border-color:var(--t-form-border-color-error);
4019
+ --tds-number-stepper-border-color-hover:var(--t-form-border-color-error-hover);
4020
+ --tds-number-stepper-border-color-active:var(--t-form-border-color-error-hover);
4021
+ --tds-number-stepper-background-color:var(--t-form-background-color-error);
4022
+ --tds-number-stepper-description-color:var(--t-text-color-status-error);
4023
+ --tds-number-stepper-description-invalid-icon-display:inline-block;
3871
4024
  }
3872
4025
 
3873
- .tds-time-field[data-disabled]{
3874
- --tds-time-field-border-color:var(--t-form-border-color-disabled);
3875
- --tds-time-field-background-color:var(--t-form-background-color-disabled);
3876
- --tds-time-field-color:var(--t-form-color-disabled);
3877
- --tds-time-field-placeholder-color:var(--t-form-color-disabled);
4026
+ .tds-number-stepper[data-disabled]{
4027
+ --tds-number-stepper-border-color:var(--t-form-border-color-disabled);
4028
+ --tds-number-stepper-background-color:var(--t-form-background-color-disabled);
4029
+ --tds-number-stepper-color:var(--t-form-color-disabled);
3878
4030
  }
3879
4031
 
3880
- .tds-time-field[data-disabled] .tds-time-field-label{
4032
+ .tds-number-stepper[data-disabled] .tds-number-stepper-label{
3881
4033
  color:var(--t-form-color-disabled);
3882
4034
  }
3883
4035
 
3884
- .tds-time-field[data-disabled] .tds-time-field-input{
4036
+ .tds-number-stepper[data-disabled] .tds-number-stepper-field{
3885
4037
  cursor:not-allowed;
3886
4038
  }
3887
4039
 
3888
- .tds-time-field--lg{
3889
- --tds-time-field-min-height:var(--t-container-size-lg);
3890
- --tds-time-field-font-size:var(--t-font-size-lg);
4040
+ .tds-number-stepper--lg{
4041
+ --tds-number-stepper-min-height:var(--t-container-size-lg);
4042
+ --tds-number-stepper-font-size:var(--t-font-size-lg);
4043
+ --tds-number-stepper-button-offset:5px;
4044
+ --tds-number-stepper-button-gap:4px;
3891
4045
  }
3892
4046
 
3893
- .tds-time-field-label{
4047
+ .tds-number-stepper-label{
3894
4048
  font-size:var(--t-font-size-md);
3895
4049
  font-weight:var(--t-font-weight-normal);
3896
4050
  color:var(--t-text-color);
3897
4051
  cursor:default;
3898
4052
  }
3899
4053
 
3900
- .tds-time-field-input{
4054
+ .tds-number-stepper-field{
3901
4055
  display:flex;
4056
+ gap:var(--tds-number-stepper-button-gap);
3902
4057
  align-items:center;
3903
4058
  inline-size:100%;
3904
- min-block-size:var(--tds-time-field-min-height);
3905
- padding-block:var(--tds-time-field-padding-block);
3906
- padding-inline:var(--t-spacing-1);
4059
+ min-block-size:var(--tds-number-stepper-min-height);
3907
4060
  font-family:inherit;
3908
- font-size:var(--tds-time-field-font-size);
3909
- font-variant-numeric:tabular-nums;
4061
+ font-size:var(--tds-number-stepper-font-size);
3910
4062
  line-height:1;
3911
- color:var(--tds-time-field-color);
3912
- cursor:text;
4063
+ color:var(--tds-number-stepper-color);
4064
+ -webkit-appearance:none;
4065
+ -moz-appearance:none;
4066
+ appearance:none;
4067
+ cursor:default;
3913
4068
  outline:var(--t-focus-ring-width) solid transparent;
3914
4069
  outline-offset:0;
3915
- background-color:var(--tds-time-field-background-color);
3916
- border:var(--t-form-border-width) solid var(--tds-time-field-border-color);
4070
+ background-color:var(--tds-number-stepper-background-color);
4071
+ border:var(--t-form-border-width) solid var(--tds-number-stepper-border-color);
3917
4072
  border-radius:var(--t-form-border-radius);
3918
4073
  }
3919
4074
 
3920
- .tds-time-field-input[data-hovered]:not([data-focus-visible],[data-focused],[data-disabled]){
3921
- border-color:var(--tds-time-field-border-color-hover);
4075
+ .tds-number-stepper-field[data-hovered]:not([data-focus-visible],[data-focus-within],[data-disabled]){
4076
+ border-color:var(--tds-number-stepper-border-color-hover);
3922
4077
  }
3923
4078
 
3924
- .tds-time-field-input[data-focus-within]{
4079
+ .tds-number-stepper-field[data-focus-within]{
3925
4080
  outline-color:var(--t-focus-ring-color);
3926
4081
  outline-offset:var(--t-focus-ring-offset);
3927
- border-color:var(--tds-time-field-border-color-active);
4082
+ border-color:var(--tds-number-stepper-border-color-active);
3928
4083
  }
3929
4084
 
3930
- .tds-time-field-input[data-readonly]{
3931
- color:var(--t-form-color-readonly);
3932
- background-color:var(--t-form-background-color-readonly);
3933
- border-color:var(--t-form-border-color-readonly);
4085
+ .tds-number-stepper-field:has([readonly]){
4086
+ --tds-number-stepper-background-color:var(--t-form-background-color-readonly);
3934
4087
  }
3935
4088
 
3936
- .tds-time-field-input[data-readonly][data-hovered]{
3937
- border-color:var(--t-form-border-color-readonly);
3938
- }
3939
-
3940
- .tds-time-field-input[data-readonly][data-focus-within]{
3941
- outline-color:var(--t-focus-ring-color);
3942
- outline-offset:var(--t-focus-ring-offset);
4089
+ .tds-number-stepper-field[data-focus-within]:has([readonly]){
3943
4090
  border-color:var(--t-form-border-color-hover);
3944
4091
  }
3945
4092
 
3946
- .tds-time-field-segment{
3947
- padding-inline:1px;
3948
- font-variant-numeric:tabular-nums;
3949
- cursor:text;
3950
- caret-color:transparent;
3951
- border-radius:var(--t-border-radius-sm);
4093
+ .tds-number-stepper-input{
4094
+ display:flex;
4095
+ flex:1;
4096
+ align-items:center;
4097
+ min-inline-size:0;
4098
+ padding-block:var(--tds-number-stepper-padding-block);
4099
+ padding-inline:var(--t-spacing-1);
4100
+ font-family:inherit;
4101
+ font-size:inherit;
4102
+ color:inherit;
4103
+ outline:0;
4104
+ background:transparent;
4105
+ border:0;
3952
4106
  }
3953
4107
 
3954
- .tds-time-field-segment[data-placeholder]{
3955
- color:var(--tds-time-field-placeholder-color);
3956
- }
3957
-
3958
- .tds-time-field-segment[data-focused]{
3959
- color:var(--t-text-color-inverted);
3960
- outline:0;
3961
- background:var(--t-fill-color-interaction);
4108
+ .tds-number-stepper-input::-webkit-inner-spin-button,.tds-number-stepper-input::-webkit-outer-spin-button{
4109
+ margin:0;
4110
+ -webkit-appearance:none;
4111
+ appearance:none;
3962
4112
  }
3963
4113
 
3964
- .tds-time-field-segment-separator{
3965
- padding-inline:0;
3966
- color:var(--tds-time-field-placeholder-color);
4114
+ .tds-number-stepper-button{
4115
+ flex-shrink:0;
4116
+ align-self:center;
4117
+ inline-size:calc(var(--tds-number-stepper-min-height) - (var(--tds-number-stepper-button-offset) * 2));
4118
+ block-size:calc(var(--tds-number-stepper-min-height) - (var(--tds-number-stepper-button-offset) * 2));
4119
+ padding:0;
3967
4120
  }
3968
4121
 
3969
- .tds-time-field-description{
4122
+ .tds-number-stepper-button:last-of-type{
4123
+ margin-inline-end:var(--tds-number-stepper-button-offset);
4124
+ }
4125
+
4126
+ .tds-number-stepper-description{
3970
4127
  display:flex;
3971
4128
  gap:var(--t-spacing-half);
3972
4129
  align-items:flex-start;
3973
4130
  margin:0;
3974
4131
  font-size:var(--t-font-size-sm);
3975
4132
  line-height:1.35;
3976
- color:var(--tds-time-field-description-color, var(--t-text-color-secondary));
4133
+ color:var(--tds-number-stepper-description-color, var(--t-text-color-secondary));
3977
4134
  cursor:text;
3978
4135
  }
3979
4136
 
3980
- .tds-time-field-description .tds-time-field-description-invalid-icon{
3981
- display:var(--tds-time-field-description-invalid-icon-display, none);
3982
- flex-shrink:0;
3983
- margin-block-start:calc(.5lh - .5em);
3984
- line-height:1.35;
3985
- }
4137
+ .tds-number-stepper-description-invalid-icon{
4138
+ display:var(--tds-number-stepper-description-invalid-icon-display, none);
4139
+ flex-shrink:0;
4140
+ margin-block-start:calc(.5lh - .5em);
4141
+ line-height:1.35;
4142
+ }
3986
4143
 
3987
- .tds-date-picker{
3988
- --tds-date-picker-border-color:var(--t-form-border-color);
3989
- --tds-date-picker-border-color-hover:var(--t-form-border-color-hover);
3990
- --tds-date-picker-border-color-active:var(--t-form-border-color-focus);
3991
- --tds-date-picker-background-color:var(--t-form-background-color);
3992
- --tds-date-picker-color:var(--t-form-color);
3993
- --tds-date-picker-placeholder-color:var(--t-form-placeholder-color);
3994
- --tds-date-picker-font-size:var(--t-font-size-md);
3995
- --tds-date-picker-min-height:var(--t-container-size-md);
3996
- --tds-date-picker-padding-block:6px;
3997
- --tds-date-picker-button-offset:4px;
3998
- --tds-date-picker-description-color:var(--t-text-color-secondary);
3999
- --tds-date-picker-description-invalid-icon-display:none;
4144
+ .tds-time-field{
4145
+ --tds-time-field-border-color:var(--t-form-border-color);
4146
+ --tds-time-field-border-color-hover:var(--t-form-border-color-hover);
4147
+ --tds-time-field-border-color-active:var(--t-form-border-color-focus);
4148
+ --tds-time-field-background-color:var(--t-form-background-color);
4149
+ --tds-time-field-color:var(--t-form-color);
4150
+ --tds-time-field-placeholder-color:var(--t-form-placeholder-color);
4151
+ --tds-time-field-font-size:var(--t-font-size-md);
4152
+ --tds-time-field-min-height:var(--t-container-size-md);
4153
+ --tds-time-field-padding-block:6px;
4154
+ --tds-time-field-description-color:var(--t-text-color-secondary);
4155
+ --tds-time-field-description-invalid-icon-display:none;
4000
4156
 
4001
4157
  position:relative;
4002
4158
  display:flex;
@@ -4004,291 +4160,135 @@ a[class="tds-btn"]{
4004
4160
  gap:var(--t-spacing-half);
4005
4161
  }
4006
4162
 
4007
- .tds-date-picker[data-required] .tds-date-picker-label::after{
4163
+ .tds-time-field[data-required] .tds-time-field-label::after{
4008
4164
  margin-left:.25ch;
4009
4165
  color:var(--t-text-color-status-error);
4010
4166
  content:"*";
4011
4167
  }
4012
4168
 
4013
- .tds-date-picker[data-invalid]{
4014
- --tds-date-picker-border-color:var(--t-form-border-color-error);
4015
- --tds-date-picker-border-color-hover:var(--t-form-border-color-error-hover);
4016
- --tds-date-picker-border-color-active:var(--t-form-border-color-error-hover);
4017
- --tds-date-picker-background-color:var(--t-form-background-color-error);
4018
- --tds-date-picker-description-color:var(--t-text-color-status-error);
4019
- --tds-date-picker-description-invalid-icon-display:inline-block;
4169
+ .tds-time-field[data-invalid]{
4170
+ --tds-time-field-border-color:var(--t-form-border-color-error);
4171
+ --tds-time-field-border-color-hover:var(--t-form-border-color-error-hover);
4172
+ --tds-time-field-border-color-active:var(--t-form-border-color-error-hover);
4173
+ --tds-time-field-background-color:var(--t-form-background-color-error);
4174
+ --tds-time-field-description-color:var(--t-text-color-status-error);
4175
+ --tds-time-field-description-invalid-icon-display:inline-block;
4020
4176
  }
4021
4177
 
4022
- .tds-date-picker[data-disabled]{
4023
- --tds-date-picker-border-color:var(--t-form-border-color-disabled);
4024
- --tds-date-picker-background-color:var(--t-form-background-color-disabled);
4025
- --tds-date-picker-color:var(--t-form-color-disabled);
4026
- --tds-date-picker-placeholder-color:var(--t-form-color-disabled);
4178
+ .tds-time-field[data-disabled]{
4179
+ --tds-time-field-border-color:var(--t-form-border-color-disabled);
4180
+ --tds-time-field-background-color:var(--t-form-background-color-disabled);
4181
+ --tds-time-field-color:var(--t-form-color-disabled);
4182
+ --tds-time-field-placeholder-color:var(--t-form-color-disabled);
4027
4183
  }
4028
4184
 
4029
- .tds-date-picker[data-disabled] .tds-date-picker-field{
4185
+ .tds-time-field[data-disabled] .tds-time-field-label{
4186
+ color:var(--t-form-color-disabled);
4187
+ }
4188
+
4189
+ .tds-time-field[data-disabled] .tds-time-field-input{
4030
4190
  cursor:not-allowed;
4031
4191
  }
4032
4192
 
4033
- .tds-date-picker--lg{
4034
- --tds-date-picker-min-height:var(--t-container-size-lg);
4035
- --tds-date-picker-font-size:var(--t-font-size-lg);
4036
- --tds-date-picker-button-offset:5px;
4193
+ .tds-time-field--lg{
4194
+ --tds-time-field-min-height:var(--t-container-size-lg);
4195
+ --tds-time-field-font-size:var(--t-font-size-lg);
4037
4196
  }
4038
4197
 
4039
- .tds-date-picker-label{
4198
+ .tds-time-field-label{
4040
4199
  font-size:var(--t-font-size-md);
4041
4200
  font-weight:var(--t-font-weight-normal);
4042
4201
  color:var(--t-text-color);
4043
4202
  cursor:default;
4044
4203
  }
4045
4204
 
4046
- .tds-date-picker-field{
4205
+ .tds-time-field-input{
4047
4206
  display:flex;
4048
4207
  align-items:center;
4049
4208
  inline-size:100%;
4050
- min-block-size:var(--tds-date-picker-min-height);
4209
+ min-block-size:var(--tds-time-field-min-height);
4210
+ padding-block:var(--tds-time-field-padding-block);
4211
+ padding-inline:var(--t-spacing-1);
4051
4212
  font-family:inherit;
4052
- font-size:var(--tds-date-picker-font-size);
4213
+ font-size:var(--tds-time-field-font-size);
4214
+ font-variant-numeric:tabular-nums;
4053
4215
  line-height:1;
4054
- color:var(--tds-date-picker-color);
4055
- -webkit-appearance:none;
4056
- -moz-appearance:none;
4057
- appearance:none;
4216
+ color:var(--tds-time-field-color);
4058
4217
  cursor:text;
4059
4218
  outline:var(--t-focus-ring-width) solid transparent;
4060
4219
  outline-offset:0;
4061
- background-color:var(--tds-date-picker-background-color);
4062
- border:var(--t-form-border-width) solid var(--tds-date-picker-border-color);
4220
+ background-color:var(--tds-time-field-background-color);
4221
+ border:var(--t-form-border-width) solid var(--tds-time-field-border-color);
4063
4222
  border-radius:var(--t-form-border-radius);
4064
4223
  }
4065
4224
 
4066
- .tds-date-picker-field[data-hovered]:not([data-focus-visible],[data-focus-within],[data-disabled]){
4067
- border-color:var(--tds-date-picker-border-color-hover);
4225
+ .tds-time-field-input[data-hovered]:not([data-focus-visible],[data-focused],[data-disabled]){
4226
+ border-color:var(--tds-time-field-border-color-hover);
4068
4227
  }
4069
4228
 
4070
- .tds-date-picker-field[data-focus-within]{
4229
+ .tds-time-field-input[data-focus-within]{
4071
4230
  outline-color:var(--t-focus-ring-color);
4072
4231
  outline-offset:var(--t-focus-ring-offset);
4073
- border-color:var(--tds-date-picker-border-color-active);
4232
+ border-color:var(--tds-time-field-border-color-active);
4074
4233
  }
4075
4234
 
4076
- .tds-date-picker-field:has(.tds-date-picker-input[data-readonly]){
4235
+ .tds-time-field-input[data-readonly]{
4077
4236
  color:var(--t-form-color-readonly);
4078
4237
  background-color:var(--t-form-background-color-readonly);
4079
4238
  border-color:var(--t-form-border-color-readonly);
4080
4239
  }
4081
4240
 
4082
- .tds-date-picker-field[data-hovered]:has(.tds-date-picker-input[data-readonly]){
4241
+ .tds-time-field-input[data-readonly][data-hovered]{
4083
4242
  border-color:var(--t-form-border-color-readonly);
4084
4243
  }
4085
4244
 
4086
- .tds-date-picker-field[data-focus-within]:has(.tds-date-picker-input[data-readonly]){
4245
+ .tds-time-field-input[data-readonly][data-focus-within]{
4087
4246
  outline-color:var(--t-focus-ring-color);
4088
4247
  outline-offset:var(--t-focus-ring-offset);
4089
4248
  border-color:var(--t-form-border-color-hover);
4090
4249
  }
4091
4250
 
4092
- .tds-date-picker-input{
4093
- flex:1;
4094
- padding-block:var(--tds-date-picker-padding-block);
4095
- padding-inline-start:var(--t-spacing-1);
4251
+ .tds-time-field-segment{
4252
+ padding-inline:1px;
4096
4253
  font-variant-numeric:tabular-nums;
4097
- }
4098
-
4099
- .tds-date-picker-segment{
4100
- padding-inline:2px;
4254
+ cursor:text;
4101
4255
  caret-color:transparent;
4102
4256
  border-radius:var(--t-border-radius-sm);
4103
4257
  }
4104
4258
 
4105
- .tds-date-picker-segment[data-placeholder]{
4106
- color:var(--tds-date-picker-placeholder-color);
4259
+ .tds-time-field-segment[data-placeholder]{
4260
+ color:var(--tds-time-field-placeholder-color);
4107
4261
  }
4108
4262
 
4109
- .tds-date-picker-segment[data-focused]{
4263
+ .tds-time-field-segment[data-focused]{
4110
4264
  color:var(--t-text-color-inverted);
4111
4265
  outline:0;
4112
4266
  background:var(--t-fill-color-interaction);
4113
4267
  }
4114
4268
 
4115
- .tds-date-picker-segment-separator{
4269
+ .tds-time-field-segment-separator{
4116
4270
  padding-inline:0;
4117
- color:var(--tds-date-picker-placeholder-color);
4271
+ color:var(--tds-time-field-placeholder-color);
4118
4272
  }
4119
4273
 
4120
- .tds-date-picker-description{
4274
+ .tds-time-field-description{
4121
4275
  display:flex;
4122
4276
  gap:var(--t-spacing-half);
4123
4277
  align-items:flex-start;
4124
4278
  margin:0;
4125
4279
  font-size:var(--t-font-size-sm);
4126
4280
  line-height:1.35;
4127
- color:var(--tds-date-picker-description-color, var(--t-text-color-secondary));
4281
+ color:var(--tds-time-field-description-color, var(--t-text-color-secondary));
4128
4282
  cursor:text;
4129
4283
  }
4130
4284
 
4131
- .tds-date-picker-description .tds-date-picker-description-invalid-icon{
4132
- display:var(--tds-date-picker-description-invalid-icon-display, none);
4285
+ .tds-time-field-description .tds-time-field-description-invalid-icon{
4286
+ display:var(--tds-time-field-description-invalid-icon-display, none);
4133
4287
  flex-shrink:0;
4134
4288
  margin-block-start:calc(.5lh - .5em);
4135
4289
  line-height:1.35;
4136
4290
  }
4137
4291
 
4138
- .tds-date-picker-button{
4139
- flex-shrink:0;
4140
- align-self:center;
4141
- inline-size:calc(var(--tds-date-picker-min-height) - (var(--tds-date-picker-button-offset) * 2));
4142
- block-size:calc(var(--tds-date-picker-min-height) - (var(--tds-date-picker-button-offset) * 2));
4143
- padding:0;
4144
- margin-inline-end:var(--tds-date-picker-button-offset);
4145
- }
4146
-
4147
- .tds-date-picker-popover{
4148
- padding:var(--t-spacing-2);
4149
- background:var(--t-surface-color-card);
4150
- border:1px solid var(--t-border-color);
4151
- border-radius:var(--t-border-radius);
4152
- box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
4153
- }
4154
-
4155
- .tds-date-picker-popover[data-entering]{
4156
- animation:tds-date-picker-popover-enter 160ms ease;
4157
- }
4158
-
4159
- .tds-date-picker-popover[data-exiting]{
4160
- animation:tds-date-picker-popover-exit 130ms ease;
4161
- }
4162
-
4163
- @keyframes tds-date-picker-popover-enter{
4164
- from{
4165
- opacity:0;
4166
- transform:translateY(-8px);
4167
- }
4168
- }
4169
-
4170
- @keyframes tds-date-picker-popover-exit{
4171
- to{
4172
- opacity:0;
4173
- transform:translateY(-8px);
4174
- }
4175
- }
4176
-
4177
- @media (prefers-reduced-motion: reduce){
4178
- .tds-date-picker-popover[data-entering],.tds-date-picker-popover[data-exiting]{
4179
- animation:none;
4180
- }
4181
- }
4182
-
4183
- .tds-date-picker-calendar{
4184
- inline-size:-moz-fit-content;
4185
- inline-size:fit-content;
4186
- }
4187
-
4188
- .tds-date-picker-calendar-header{
4189
- display:flex;
4190
- align-items:center;
4191
- justify-content:space-between;
4192
- padding-block-end:var(--t-spacing-1);
4193
- }
4194
-
4195
- .tds-date-picker-calendar-title{
4196
- flex:1;
4197
- margin:0;
4198
- font-size:var(--t-font-size-md);
4199
- font-weight:var(--t-font-weight-semibold);
4200
- text-align:center;
4201
- }
4202
-
4203
- .tds-date-picker-calendar-nav{
4204
- display:flex;
4205
- align-items:center;
4206
- justify-content:center;
4207
- padding:var(--t-spacing-half);
4208
- color:var(--t-text-color);
4209
- cursor:default;
4210
- outline:0;
4211
- background:transparent;
4212
- border:0;
4213
- border-radius:var(--t-border-radius-sm);
4214
- }
4215
-
4216
- .tds-date-picker-calendar-nav[data-hovered]{
4217
- background:var(--t-fill-color-neutral-070);
4218
- }
4219
-
4220
- .tds-date-picker-calendar-nav[data-pressed]{
4221
- background:var(--t-fill-color-button-interaction-ghost-active);
4222
- }
4223
-
4224
- .tds-date-picker-calendar-nav[data-focus-visible]{
4225
- outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
4226
- outline-offset:var(--t-focus-ring-offset);
4227
- }
4228
-
4229
- .tds-date-picker-calendar-nav[data-disabled]{
4230
- color:var(--t-form-color-disabled);
4231
- cursor:not-allowed;
4232
- }
4233
-
4234
- .tds-date-picker-calendar-grid{
4235
- border-collapse:collapse;
4236
- }
4237
-
4238
- .tds-date-picker-calendar-header-cell{
4239
- padding-block:var(--t-spacing-half);
4240
- font-size:var(--t-font-size-sm);
4241
- font-weight:var(--t-font-weight-normal);
4242
- color:var(--t-text-color-secondary);
4243
- text-align:center;
4244
- }
4245
-
4246
- .tds-date-picker-calendar-cell{
4247
- display:flex;
4248
- align-items:center;
4249
- justify-content:center;
4250
- inline-size:2.25rem;
4251
- block-size:2.25rem;
4252
- font-size:var(--t-font-size-md);
4253
- color:var(--t-text-color);
4254
- cursor:default;
4255
- outline:0;
4256
- border-radius:var(--t-border-radius-sm);
4257
- }
4258
-
4259
- .tds-date-picker-calendar-cell[data-hovered]{
4260
- background:var(--t-fill-color-neutral-070);
4261
- }
4262
-
4263
- .tds-date-picker-calendar-cell[data-pressed]{
4264
- background:var(--t-fill-color-button-interaction-ghost-active);
4265
- }
4266
-
4267
- .tds-date-picker-calendar-cell[data-selected]{
4268
- color:var(--t-text-color-inverted);
4269
- background:var(--t-fill-color-interaction);
4270
- }
4271
-
4272
- .tds-date-picker-calendar-cell[data-focus-visible]{
4273
- outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
4274
- outline-offset:var(--t-focus-ring-offset);
4275
- }
4276
-
4277
- .tds-date-picker-calendar-cell[data-unavailable]{
4278
- color:var(--t-text-color-secondary);
4279
- text-decoration:line-through;
4280
- cursor:not-allowed;
4281
- }
4282
-
4283
- .tds-date-picker-calendar-cell[data-disabled]{
4284
- color:var(--t-form-color-disabled);
4285
- cursor:not-allowed;
4286
- }
4287
-
4288
- .tds-date-picker-calendar-cell[data-outside-month]{
4289
- color:var(--t-text-color-secondary);
4290
- }
4291
-
4292
4292
  .t-banner{
4293
4293
  --t-banner-font-size:var(--t-font-size-md);
4294
4294
  --t-banner-font-color:var(--t-text-color);