@planningcenter/tapestry 3.2.3-rc.3 → 3.2.3-rc.5

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.
@@ -647,138 +647,6 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
647
647
  }
648
648
  }
649
649
 
650
- .tds-radio{
651
- --tds-radio-font-size:var(--t-font-size-md);
652
- --tds-radio-cursor:pointer;
653
- --tds-radio-line-height:1.4;
654
- --tds-radio-transition-property:border-width;
655
-
656
- --tds-radio-input-size:var(--t-element-size-md);
657
- --tds-radio-input-border-radius:var(--t-border-radius-round);
658
- --tds-radio-input-border-color:var(--t-form-border-color);
659
- --tds-radio-input-border-width:var(--t-form-border-width);
660
- --tds-radio-input-background-color:transparent;
661
-
662
- --tds-radio-label-color:var(--t-form-color);
663
-
664
- --tds-radio-description-font-size:var(--t-font-size-sm);
665
- --tds-radio-description-line-height:1.35;
666
- --tds-radio-description-color:var(--t-text-color-secondary);
667
-
668
- position:relative;
669
- display:inline-grid;
670
- grid-template-columns:auto;
671
- grid-auto-columns:1fr;
672
- gap:var(--t-spacing-fourth) var(--t-spacing-1);
673
- line-height:var(--tds-radio-line-height);
674
- cursor:var(--tds-radio-cursor);
675
- -webkit-user-select:none;
676
- -moz-user-select:none;
677
- user-select:none;
678
- }
679
-
680
- .tds-radio label{
681
- grid-area:1 / 2;
682
- font-size:var(--tds-radio-font-size);
683
- font-weight:var(--t-font-weight-normal);
684
- color:var(--tds-radio-label-color);
685
- cursor:var(--tds-radio-cursor);
686
- }
687
-
688
- .tds-radio input[type="radio"]{
689
- position:relative;
690
- width:1em;
691
- height:1em;
692
- margin:calc((1lh - 1em) / 2) 0 0;
693
- font-size:var(--tds-radio-font-size);
694
- line-height:inherit;
695
- -webkit-appearance:none;
696
- -moz-appearance:none;
697
- appearance:none;
698
- cursor:var(--tds-radio-cursor);
699
- background-color:var(--tds-radio-input-background-color);
700
- border:var(--tds-radio-input-border-width) solid var(--tds-radio-input-border-color);
701
- border-radius:var(--tds-radio-input-border-radius);
702
- transition-timing-function:var(--t-ease-in-out);
703
- transition-duration:var(--t-duration-200);
704
- transition-property:var(--tds-radio-transition-property);
705
- }
706
-
707
- :is(.tds-radio input[type="radio"]):hover:not(:disabled){
708
- --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
709
- --tds-radio-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
710
- }
711
-
712
- :is(.tds-radio input[type="radio"]):focus-visible{
713
- outline:var(--t-focus-ring-outline);
714
- outline-offset:var(--t-focus-ring-offset);
715
- }
716
-
717
- :is(.tds-radio input[type="radio"]):disabled{
718
- pointer-events:none;
719
- }
720
-
721
- @media (prefers-reduced-motion: reduce){
722
-
723
- .tds-radio input[type="radio"]{
724
- --tds-radio-transition-property:none;
725
- }
726
- }
727
-
728
- .tds-radio:has(input:checked){
729
- --tds-radio-input-background-color:var(--t-form-background-color);
730
- --tds-radio-input-border-color:var(--t-border-color-control-info);
731
- --tds-radio-input-border-width:4px;
732
- }
733
-
734
- .tds-radio:has(input:checked) input:hover:not(:disabled){
735
- --tds-radio-input-background-color:var(--t-form-background-color);
736
- --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
737
- }
738
-
739
- .tds-radio:has(input:user-invalid){
740
- --tds-radio-input-border-color:var(--t-form-border-color-error);
741
- }
742
-
743
- .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
744
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
745
- --tds-radio-input-background-color:var(--t-form-background-color-error);
746
- }
747
-
748
- .tds-radio:has(input:disabled){
749
- --tds-radio-input-background-color:var(--t-form-background-color-disabled);
750
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
751
-
752
- --tds-radio-label-color:var(--t-form-color-disabled);
753
- --tds-radio-description-color:var(--t-form-color-disabled);
754
- --tds-radio-cursor:not-allowed;
755
- }
756
-
757
- .tds-radio:has(input:disabled) input:checked{
758
- --tds-radio-input-background-color:var(--t-form-background-color);
759
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
760
- }
761
-
762
- .tds-radio-description{
763
- display:flex;
764
- grid-area:2 / 2;
765
- gap:var(--t-spacing-half);
766
- align-items:flex-start;
767
- margin:0;
768
- font-size:var(--tds-radio-description-font-size);
769
- line-height:var(--tds-radio-description-line-height);
770
- color:var(--tds-radio-description-color);
771
- cursor:text;
772
- }
773
-
774
- .tds-radio--sm{
775
- --tds-radio-line-height:1.35;
776
- --tds-radio-input-size:var(--t-element-size-sm);
777
- --tds-radio-font-size:var(--t-font-size-sm);
778
- --tds-radio-description-font-size:var(--t-font-size-xs);
779
- --tds-radio-description-line-height:1.3;
780
- }
781
-
782
650
  .tds-checkbox{
783
651
  --tds-checkbox-font-size:var(--t-font-size-md);
784
652
  --tds-checkbox-cursor:pointer;
@@ -973,6 +841,138 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
973
841
  --tds-checkbox-description-line-height:1.3;
974
842
  }
975
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);
899
+ }
900
+
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);
904
+ }
905
+
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
+ }
910
+
911
+ :is(.tds-radio input[type="radio"]):disabled{
912
+ pointer-events:none;
913
+ }
914
+
915
+ @media (prefers-reduced-motion: reduce){
916
+
917
+ .tds-radio input[type="radio"]{
918
+ --tds-radio-transition-property:none;
919
+ }
920
+ }
921
+
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;
926
+ }
927
+
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);
931
+ }
932
+
933
+ .tds-radio:has(input:user-invalid){
934
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
935
+ }
936
+
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);
940
+ }
941
+
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;
949
+ }
950
+
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);
954
+ }
955
+
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
+ }
967
+
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
+ }
975
+
976
976
  .tds-radio-group{
977
977
  --tds-radio-group-font-size:var(--t-font-size-md);
978
978
  --tds-radio-group-line-height:1.4;
@@ -1060,111 +1060,6 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1060
1060
  --tds-radio-group-description-line-height:1.3;
1061
1061
  }
1062
1062
 
1063
- .tds-input:has(textarea){
1064
- --tds-input-padding-block:6px;
1065
- --tds-input-resizer-size:var(--t-element-size-sm);
1066
- --tds-input-resizer-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cg fill='none' stroke='%236f7784' stroke-linecap='round' stroke-width='1.25'%3E%3Cpath d='M5.5 13l7.5-7.5'/%3E%3Cpath d='M9 13l4-4'/%3E%3C/g%3E%3C/svg%3E");
1067
- }
1068
-
1069
- @supports (x: attr(x type(*))){
1070
-
1071
- .tds-input:has(textarea){
1072
- --tds-input-min-height:calc((attr(rows type(<number>), 3) * 1lh) + (var(--tds-input-padding-block) * 2) + 2px);
1073
- }
1074
- }
1075
-
1076
- .tds-input.tds-textarea--resize-vertical textarea{
1077
- resize:vertical;
1078
- }
1079
-
1080
- .tds-input.tds-textarea--resize-none textarea{
1081
- resize:none;
1082
- }
1083
-
1084
- .tds-input.tds-textarea--resize-auto textarea{
1085
- resize:vertical;
1086
- }
1087
-
1088
- @supports (field-sizing: content){
1089
- .tds-input.tds-textarea--resize-auto textarea{
1090
- field-sizing:content;
1091
- resize:none;
1092
- }
1093
- }
1094
-
1095
- .tds-input textarea{
1096
- --tds-input-scrollbar-thumb-color-default:var(--t-fill-color-neutral-040);
1097
- --tds-input-scrollbar-thumb-color-hidden:transparent;
1098
- --tds-input-scrollbar-thumb-color-hover:var(--t-fill-color-neutral-030);
1099
- --tds-input-scrollbar-thumb-color-thumb-hover:var(--t-fill-color-neutral-020);
1100
- --tds-input-scrollbar-thumb-color-thumb-active:var(--t-fill-color-neutral-010);
1101
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-default);
1102
- --tds-input-scrollbar-surface-color:rgba(0, 0, 0, 0);
1103
- --tds-input-scrollbar-thumb-border-radius:999px;
1104
- --tds-input-scrollbar-thumb-border-width:3px;
1105
- --tds-input-scrollbar-track-margin-block:.125rem;
1106
- scrollbar-color:initial;
1107
- transition-timing-function:var(--t-ease-in-out);
1108
- transition-duration:var(--t-duration-200);
1109
- transition-property:var(--tds-input-transition-property), --tds-input-scrollbar-thumb-color;
1110
- }
1111
-
1112
- @media (pointer: fine){
1113
- :is(.tds-input textarea)::-webkit-scrollbar{
1114
- width:12px;
1115
- height:12px;
1116
- cursor:default;
1117
- }
1118
-
1119
- :is(.tds-input textarea)::-webkit-scrollbar-thumb{
1120
- cursor:default;
1121
- background:var(--tds-input-scrollbar-thumb-color);
1122
- background-clip:content-box;
1123
- border:var(--tds-input-scrollbar-thumb-border-width) solid var(--tds-input-scrollbar-surface-color);
1124
- border-radius:var(--tds-input-scrollbar-thumb-border-radius);
1125
- }
1126
-
1127
- :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1128
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
1129
- }
1130
-
1131
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
1132
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
1133
- }
1134
-
1135
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
1136
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
1137
- }
1138
-
1139
- :is(.tds-input textarea)::-webkit-scrollbar-corner{
1140
- background:var(--tds-input-scrollbar-surface-color);
1141
- }
1142
-
1143
- :is(.tds-input textarea)::-webkit-resizer{
1144
- background:var(--tds-input-resizer-icon) no-repeat;
1145
- background-position:right bottom;
1146
- background-size:var(--tds-input-resizer-size) var(--tds-input-resizer-size);
1147
- }
1148
-
1149
- :is(.tds-input textarea)::-webkit-scrollbar-track{
1150
- margin-block:var(--tds-input-scrollbar-track-margin-block);
1151
- cursor:default;
1152
- }
1153
-
1154
- @supports (-moz-appearance: none){
1155
- :is(.tds-input textarea){
1156
- scrollbar-color:var(--tds-input-scrollbar-thumb-color-default) var(--tds-input-scrollbar-surface-color);
1157
- scrollbar-width:thin;
1158
- }
1159
-
1160
- @media (hover){
1161
- :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1162
- scrollbar-color:var(--tds-input-scrollbar-thumb-color-hover) var(--tds-input-scrollbar-surface-color);
1163
- }
1164
- }
1165
- }
1166
- }
1167
-
1168
1063
  .tds-toggle-switch{
1169
1064
  --tds-toggle-switch-font-size:var(--t-font-size-md);
1170
1065
  --tds-toggle-switch-column-gap:var(--t-spacing-1);
@@ -1673,72 +1568,177 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1673
1568
  transition:var(--tds-select-caret-transition);
1674
1569
  }
1675
1570
 
1676
- :is(.tds-select select:has( > button))::picker(select):not(:popover-open){
1677
- opacity:var(--tds-select-dropdown-closed-opacity);
1678
- transform:var(--tds-select-dropdown-closed-transform);
1679
- transition:var(--tds-select-dropdown-transition-exit);
1571
+ :is(.tds-select select:has( > button))::picker(select):not(:popover-open){
1572
+ opacity:var(--tds-select-dropdown-closed-opacity);
1573
+ transform:var(--tds-select-dropdown-closed-transform);
1574
+ transition:var(--tds-select-dropdown-transition-exit);
1575
+ }
1576
+
1577
+ :is(.tds-select select:has( > button)):open,:is(.tds-select select:has( > button)):focus-within{
1578
+ outline-color:var(--t-focus-ring-color);
1579
+ outline-offset:var(--t-focus-ring-offset);
1580
+ border-color:var(--tds-select-border-color-active);
1581
+ }
1582
+
1583
+ :is(.tds-select select:has( > button)):open::picker-icon{
1584
+ opacity:1;
1585
+ transform:rotate(.5turn);
1586
+ }
1587
+
1588
+ :is(.tds-select select:has( > button)) selectedcontent{
1589
+ overflow:hidden;
1590
+ text-overflow:ellipsis;
1591
+ line-height:calc(var(--tds-select-min-height) - 2px);
1592
+ white-space:nowrap;
1593
+ }
1594
+
1595
+ :is(.tds-select select:has( > button)):has(option[hidden][disabled][value=""]:checked) > button{
1596
+ color:var(--tds-select-placeholder-color);
1597
+ }
1598
+
1599
+ :is(.tds-select select:has( > button))::picker(select){
1600
+ inset:auto;
1601
+ inline-size:-moz-max-content;
1602
+ inline-size:max-content;
1603
+ min-inline-size:anchor-size(width);
1604
+ max-inline-size:100vi;
1605
+ padding:var(--tds-select-dropdown-padding);
1606
+ margin-block:var(--tds-select-dropdown-margin-block);
1607
+ position-try-fallbacks:flip-block, flip-inline;
1608
+ overflow:auto;
1609
+ overflow-x:hidden;
1610
+ scroll-behavior:var(--tds-select-dropdown-scroll-behavior);
1611
+ overscroll-behavior:none;
1612
+ -webkit-user-select:none;
1613
+ -moz-user-select:none;
1614
+ user-select:none;
1615
+ scrollbar-color:var(--tds-select-dropdown-scrollbar-color);
1616
+ scrollbar-width:var(--tds-select-dropdown-scrollbar-width);
1617
+ background:var(--tds-select-dropdown-background-color);
1618
+ border:var(--tds-select-dropdown-border);
1619
+ border-radius:var(--tds-select-dropdown-border-radius);
1620
+ box-shadow:var(--tds-select-dropdown-box-shadow);
1621
+ opacity:var(--tds-select-dropdown-open-opacity);
1622
+ transform:var(--tds-select-dropdown-open-transform);
1623
+ transition:var(--tds-select-dropdown-transition-enter);
1624
+ }
1625
+
1626
+ :is(.tds-select select:has( > button)) option::checkmark{
1627
+ display:none;
1628
+ }
1629
+
1630
+ @starting-style{
1631
+ :is(.tds-select select:has( > button))::picker(select):popover-open{
1632
+ opacity:var(--tds-select-dropdown-closed-opacity);
1633
+ transform:var(--tds-select-dropdown-closed-transform);
1634
+ }
1635
+ }
1636
+ }
1637
+
1638
+ .tds-input:has(textarea){
1639
+ --tds-input-padding-block:6px;
1640
+ --tds-input-resizer-size:var(--t-element-size-sm);
1641
+ --tds-input-resizer-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cg fill='none' stroke='%236f7784' stroke-linecap='round' stroke-width='1.25'%3E%3Cpath d='M5.5 13l7.5-7.5'/%3E%3Cpath d='M9 13l4-4'/%3E%3C/g%3E%3C/svg%3E");
1642
+ }
1643
+
1644
+ @supports (x: attr(x type(*))){
1645
+
1646
+ .tds-input:has(textarea){
1647
+ --tds-input-min-height:calc((attr(rows type(<number>), 3) * 1lh) + (var(--tds-input-padding-block) * 2) + 2px);
1648
+ }
1649
+ }
1650
+
1651
+ .tds-input.tds-textarea--resize-vertical textarea{
1652
+ resize:vertical;
1653
+ }
1654
+
1655
+ .tds-input.tds-textarea--resize-none textarea{
1656
+ resize:none;
1657
+ }
1658
+
1659
+ .tds-input.tds-textarea--resize-auto textarea{
1660
+ resize:vertical;
1661
+ }
1662
+
1663
+ @supports (field-sizing: content){
1664
+ .tds-input.tds-textarea--resize-auto textarea{
1665
+ field-sizing:content;
1666
+ resize:none;
1667
+ }
1668
+ }
1669
+
1670
+ .tds-input textarea{
1671
+ --tds-input-scrollbar-thumb-color-default:var(--t-fill-color-neutral-040);
1672
+ --tds-input-scrollbar-thumb-color-hidden:transparent;
1673
+ --tds-input-scrollbar-thumb-color-hover:var(--t-fill-color-neutral-030);
1674
+ --tds-input-scrollbar-thumb-color-thumb-hover:var(--t-fill-color-neutral-020);
1675
+ --tds-input-scrollbar-thumb-color-thumb-active:var(--t-fill-color-neutral-010);
1676
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-default);
1677
+ --tds-input-scrollbar-surface-color:rgba(0, 0, 0, 0);
1678
+ --tds-input-scrollbar-thumb-border-radius:999px;
1679
+ --tds-input-scrollbar-thumb-border-width:3px;
1680
+ --tds-input-scrollbar-track-margin-block:.125rem;
1681
+ scrollbar-color:initial;
1682
+ transition-timing-function:var(--t-ease-in-out);
1683
+ transition-duration:var(--t-duration-200);
1684
+ transition-property:var(--tds-input-transition-property), --tds-input-scrollbar-thumb-color;
1685
+ }
1686
+
1687
+ @media (pointer: fine){
1688
+ :is(.tds-input textarea)::-webkit-scrollbar{
1689
+ width:12px;
1690
+ height:12px;
1691
+ cursor:default;
1692
+ }
1693
+
1694
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb{
1695
+ cursor:default;
1696
+ background:var(--tds-input-scrollbar-thumb-color);
1697
+ background-clip:content-box;
1698
+ border:var(--tds-input-scrollbar-thumb-border-width) solid var(--tds-input-scrollbar-surface-color);
1699
+ border-radius:var(--tds-input-scrollbar-thumb-border-radius);
1680
1700
  }
1681
1701
 
1682
- :is(.tds-select select:has( > button)):open,:is(.tds-select select:has( > button)):focus-within{
1683
- outline-color:var(--t-focus-ring-color);
1684
- outline-offset:var(--t-focus-ring-offset);
1685
- border-color:var(--tds-select-border-color-active);
1702
+ :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1703
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
1686
1704
  }
1687
1705
 
1688
- :is(.tds-select select:has( > button)):open::picker-icon{
1689
- opacity:1;
1690
- transform:rotate(.5turn);
1706
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
1707
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
1691
1708
  }
1692
1709
 
1693
- :is(.tds-select select:has( > button)) selectedcontent{
1694
- overflow:hidden;
1695
- text-overflow:ellipsis;
1696
- line-height:calc(var(--tds-select-min-height) - 2px);
1697
- white-space:nowrap;
1710
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
1711
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
1698
1712
  }
1699
1713
 
1700
- :is(.tds-select select:has( > button)):has(option[hidden][disabled][value=""]:checked) > button{
1701
- color:var(--tds-select-placeholder-color);
1714
+ :is(.tds-input textarea)::-webkit-scrollbar-corner{
1715
+ background:var(--tds-input-scrollbar-surface-color);
1702
1716
  }
1703
1717
 
1704
- :is(.tds-select select:has( > button))::picker(select){
1705
- inset:auto;
1706
- inline-size:-moz-max-content;
1707
- inline-size:max-content;
1708
- min-inline-size:anchor-size(width);
1709
- max-inline-size:100vi;
1710
- padding:var(--tds-select-dropdown-padding);
1711
- margin-block:var(--tds-select-dropdown-margin-block);
1712
- position-try-fallbacks:flip-block, flip-inline;
1713
- overflow:auto;
1714
- overflow-x:hidden;
1715
- scroll-behavior:var(--tds-select-dropdown-scroll-behavior);
1716
- overscroll-behavior:none;
1717
- -webkit-user-select:none;
1718
- -moz-user-select:none;
1719
- user-select:none;
1720
- scrollbar-color:var(--tds-select-dropdown-scrollbar-color);
1721
- scrollbar-width:var(--tds-select-dropdown-scrollbar-width);
1722
- background:var(--tds-select-dropdown-background-color);
1723
- border:var(--tds-select-dropdown-border);
1724
- border-radius:var(--tds-select-dropdown-border-radius);
1725
- box-shadow:var(--tds-select-dropdown-box-shadow);
1726
- opacity:var(--tds-select-dropdown-open-opacity);
1727
- transform:var(--tds-select-dropdown-open-transform);
1728
- transition:var(--tds-select-dropdown-transition-enter);
1718
+ :is(.tds-input textarea)::-webkit-resizer{
1719
+ background:var(--tds-input-resizer-icon) no-repeat;
1720
+ background-position:right bottom;
1721
+ background-size:var(--tds-input-resizer-size) var(--tds-input-resizer-size);
1729
1722
  }
1730
1723
 
1731
- :is(.tds-select select:has( > button)) option::checkmark{
1732
- display:none;
1724
+ :is(.tds-input textarea)::-webkit-scrollbar-track{
1725
+ margin-block:var(--tds-input-scrollbar-track-margin-block);
1726
+ cursor:default;
1733
1727
  }
1734
1728
 
1735
- @starting-style{
1736
- :is(.tds-select select:has( > button))::picker(select):popover-open{
1737
- opacity:var(--tds-select-dropdown-closed-opacity);
1738
- transform:var(--tds-select-dropdown-closed-transform);
1729
+ @supports (-moz-appearance: none){
1730
+ :is(.tds-input textarea){
1731
+ scrollbar-color:var(--tds-input-scrollbar-thumb-color-default) var(--tds-input-scrollbar-surface-color);
1732
+ scrollbar-width:thin;
1733
+ }
1734
+
1735
+ @media (hover){
1736
+ :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1737
+ scrollbar-color:var(--tds-input-scrollbar-thumb-color-hover) var(--tds-input-scrollbar-surface-color);
1738
+ }
1739
1739
  }
1740
1740
  }
1741
- }
1741
+ }
1742
1742
 
1743
1743
  .tds-input{
1744
1744
  --tds-input-border-color:var(--t-form-border-color);
@@ -3322,6 +3322,84 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
3322
3322
  @media (prefers-color-scheme: dark){
3323
3323
  }
3324
3324
 
3325
+ .tds-checkbox-group{
3326
+ --tds-checkbox-group-font-size:var(--t-font-size-md);
3327
+ --tds-checkbox-group-line-height:1.4;
3328
+ --tds-checkbox-group-gap:var(--t-spacing-1);
3329
+
3330
+ --tds-checkbox-group-legend-margin-bottom:var(--tds-checkbox-group-gap);
3331
+
3332
+ --tds-checkbox-group-description-font-size:var(--t-font-size-sm);
3333
+ --tds-checkbox-group-description-line-height:1.35;
3334
+ --tds-checkbox-group-description-color:var(--t-text-color-secondary);
3335
+ --tds-checkbox-group-description-invalid-icon-display:none;
3336
+ display:flex;
3337
+ flex-direction:column;
3338
+ gap:var(--tds-checkbox-group-gap);
3339
+ padding:0;
3340
+ margin:0;
3341
+
3342
+ font-size:var(--tds-checkbox-group-font-size);
3343
+ line-height:var(--tds-checkbox-group-line-height);
3344
+ border:0;
3345
+ }
3346
+
3347
+ .tds-checkbox-group legend{
3348
+ padding:0;
3349
+ margin-bottom:var(--tds-checkbox-group-legend-margin-bottom);
3350
+ }
3351
+
3352
+ .tds-checkbox-group:has(.tds-checkbox-group-description){
3353
+ --tds-checkbox-group-legend-margin-bottom:var(--t-spacing-fourth);
3354
+ }
3355
+
3356
+ .tds-checkbox-group[aria-invalid="true"]{
3357
+ --tds-checkbox-group-description-color:var(--t-text-color-status-error);
3358
+ --tds-checkbox-group-description-invalid-icon-display:inline-block;
3359
+ }
3360
+
3361
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) legend::after{
3362
+ margin-left:.25ch;
3363
+ color:var(--t-text-color-status-error);
3364
+ content:"*";
3365
+ }
3366
+
3367
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
3368
+ content:none;
3369
+ }
3370
+
3371
+ .tds-checkbox-group-fields{
3372
+ display:flex;
3373
+ flex-direction:column;
3374
+ gap:var(--tds-checkbox-group-gap);
3375
+ align-items:flex-start;
3376
+ }
3377
+
3378
+ .tds-checkbox-group-description{
3379
+ display:flex;
3380
+ gap:var(--t-spacing-half);
3381
+ align-items:flex-start;
3382
+ margin:0;
3383
+ font-size:var(--tds-checkbox-group-description-font-size);
3384
+ line-height:var(--tds-checkbox-group-description-line-height);
3385
+ color:var(--tds-checkbox-group-description-color);
3386
+ cursor:text;
3387
+ }
3388
+
3389
+ .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
3390
+ display:var(--tds-checkbox-group-description-invalid-icon-display);
3391
+ flex-shrink:0;
3392
+ margin-top:calc(.5lh - .5em);
3393
+ line-height:var(--tds-checkbox-group-description-line-height);
3394
+ }
3395
+
3396
+ .tds-checkbox-group--sm{
3397
+ --tds-checkbox-group-line-height:1.35;
3398
+ --tds-checkbox-group-font-size:var(--t-font-size-sm);
3399
+ --tds-checkbox-group-description-font-size:var(--t-font-size-xs);
3400
+ --tds-checkbox-group-description-line-height:1.3;
3401
+ }
3402
+
3325
3403
  .tds-combo-box{
3326
3404
  --tds-combo-box-border-color:var(--t-form-border-color);
3327
3405
  --tds-combo-box-border-color-hover:var(--t-form-border-color-hover);
@@ -3574,6 +3652,13 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
3574
3652
  background:transparent;
3575
3653
  }
3576
3654
 
3655
+ .tds-combo-box-empty-state{
3656
+ padding-block:var(--t-spacing-1);
3657
+ padding-inline:var(--t-spacing-2);
3658
+ font-size:var(--t-font-size-md);
3659
+ color:var(--t-text-color-secondary);
3660
+ }
3661
+
3577
3662
  .tds-combo-box-list-section:not(:first-child){
3578
3663
  margin-block-start:var(--t-spacing-half);
3579
3664
  }
@@ -3604,82 +3689,157 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
3604
3689
  line-height:1.35;
3605
3690
  }
3606
3691
 
3607
- .tds-checkbox-group{
3608
- --tds-checkbox-group-font-size:var(--t-font-size-md);
3609
- --tds-checkbox-group-line-height:1.4;
3610
- --tds-checkbox-group-gap:var(--t-spacing-1);
3611
-
3612
- --tds-checkbox-group-legend-margin-bottom:var(--tds-checkbox-group-gap);
3692
+ .tds-number-stepper{
3693
+ --tds-number-stepper-border-color:var(--t-form-border-color);
3694
+ --tds-number-stepper-border-color-hover:var(--t-form-border-color-hover);
3695
+ --tds-number-stepper-border-color-active:var(--t-form-border-color-focus);
3696
+ --tds-number-stepper-background-color:var(--t-form-background-color);
3697
+ --tds-number-stepper-color:var(--t-form-color);
3698
+ --tds-number-stepper-font-size:var(--t-font-size-md);
3699
+ --tds-number-stepper-min-height:var(--t-container-size-md);
3700
+ --tds-number-stepper-padding-block:6px;
3701
+ --tds-number-stepper-button-offset:4px;
3702
+ --tds-number-stepper-button-gap:2px;
3703
+ --tds-number-stepper-description-color:var(--t-text-color-secondary);
3704
+ --tds-number-stepper-description-invalid-icon-display:none;
3613
3705
 
3614
- --tds-checkbox-group-description-font-size:var(--t-font-size-sm);
3615
- --tds-checkbox-group-description-line-height:1.35;
3616
- --tds-checkbox-group-description-color:var(--t-text-color-secondary);
3617
- --tds-checkbox-group-description-invalid-icon-display:none;
3706
+ position:relative;
3618
3707
  display:flex;
3619
3708
  flex-direction:column;
3620
- gap:var(--tds-checkbox-group-gap);
3621
- padding:0;
3622
- margin:0;
3709
+ gap:var(--t-spacing-half);
3710
+ }
3623
3711
 
3624
- font-size:var(--tds-checkbox-group-font-size);
3625
- line-height:var(--tds-checkbox-group-line-height);
3626
- border:0;
3712
+ .tds-number-stepper[data-required] .tds-number-stepper-label::after{
3713
+ margin-left:.25ch;
3714
+ color:var(--t-text-color-status-error);
3715
+ content:"*";
3716
+ }
3717
+
3718
+ .tds-number-stepper[data-invalid]{
3719
+ --tds-number-stepper-border-color:var(--t-form-border-color-error);
3720
+ --tds-number-stepper-border-color-hover:var(--t-form-border-color-error-hover);
3721
+ --tds-number-stepper-border-color-active:var(--t-form-border-color-error-hover);
3722
+ --tds-number-stepper-background-color:var(--t-form-background-color-error);
3723
+ --tds-number-stepper-description-color:var(--t-text-color-status-error);
3724
+ --tds-number-stepper-description-invalid-icon-display:inline-block;
3725
+ }
3726
+
3727
+ .tds-number-stepper[data-disabled]{
3728
+ --tds-number-stepper-border-color:var(--t-form-border-color-disabled);
3729
+ --tds-number-stepper-background-color:var(--t-form-background-color-disabled);
3730
+ --tds-number-stepper-color:var(--t-form-color-disabled);
3731
+ }
3732
+
3733
+ .tds-number-stepper[data-disabled] .tds-number-stepper-label{
3734
+ color:var(--t-form-color-disabled);
3735
+ }
3736
+
3737
+ .tds-number-stepper[data-disabled] .tds-number-stepper-field{
3738
+ cursor:not-allowed;
3739
+ }
3740
+
3741
+ .tds-number-stepper--lg{
3742
+ --tds-number-stepper-min-height:var(--t-container-size-lg);
3743
+ --tds-number-stepper-font-size:var(--t-font-size-lg);
3744
+ --tds-number-stepper-button-offset:5px;
3745
+ --tds-number-stepper-button-gap:4px;
3746
+ }
3747
+
3748
+ .tds-number-stepper-label{
3749
+ font-size:var(--t-font-size-md);
3750
+ font-weight:var(--t-font-weight-normal);
3751
+ color:var(--t-text-color);
3752
+ cursor:default;
3753
+ }
3754
+
3755
+ .tds-number-stepper-field{
3756
+ display:flex;
3757
+ gap:var(--tds-number-stepper-button-gap);
3758
+ align-items:center;
3759
+ inline-size:100%;
3760
+ min-block-size:var(--tds-number-stepper-min-height);
3761
+ font-family:inherit;
3762
+ font-size:var(--tds-number-stepper-font-size);
3763
+ line-height:1;
3764
+ color:var(--tds-number-stepper-color);
3765
+ -webkit-appearance:none;
3766
+ -moz-appearance:none;
3767
+ appearance:none;
3768
+ cursor:default;
3769
+ outline:var(--t-focus-ring-width) solid transparent;
3770
+ outline-offset:0;
3771
+ background-color:var(--tds-number-stepper-background-color);
3772
+ border:var(--t-form-border-width) solid var(--tds-number-stepper-border-color);
3773
+ border-radius:var(--t-form-border-radius);
3627
3774
  }
3628
3775
 
3629
- .tds-checkbox-group legend{
3630
- padding:0;
3631
- margin-bottom:var(--tds-checkbox-group-legend-margin-bottom);
3776
+ .tds-number-stepper-field[data-hovered]:not([data-focus-visible],[data-focus-within],[data-disabled]){
3777
+ border-color:var(--tds-number-stepper-border-color-hover);
3632
3778
  }
3633
3779
 
3634
- .tds-checkbox-group:has(.tds-checkbox-group-description){
3635
- --tds-checkbox-group-legend-margin-bottom:var(--t-spacing-fourth);
3780
+ .tds-number-stepper-field[data-focus-within]{
3781
+ outline-color:var(--t-focus-ring-color);
3782
+ outline-offset:var(--t-focus-ring-offset);
3783
+ border-color:var(--tds-number-stepper-border-color-active);
3636
3784
  }
3637
3785
 
3638
- .tds-checkbox-group[aria-invalid="true"]{
3639
- --tds-checkbox-group-description-color:var(--t-text-color-status-error);
3640
- --tds-checkbox-group-description-invalid-icon-display:inline-block;
3786
+ .tds-number-stepper-field:has([readonly]){
3787
+ --tds-number-stepper-background-color:var(--t-form-background-color-readonly);
3641
3788
  }
3642
3789
 
3643
- .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) legend::after{
3644
- margin-left:.25ch;
3645
- color:var(--t-text-color-status-error);
3646
- content:"*";
3647
- }
3648
-
3649
- .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
3650
- content:none;
3790
+ .tds-number-stepper-field[data-focus-within]:has([readonly]){
3791
+ border-color:var(--t-form-border-color-hover);
3651
3792
  }
3652
3793
 
3653
- .tds-checkbox-group-fields{
3794
+ .tds-number-stepper-input{
3654
3795
  display:flex;
3655
- flex-direction:column;
3656
- gap:var(--tds-checkbox-group-gap);
3657
- align-items:flex-start;
3796
+ flex:1;
3797
+ align-items:center;
3798
+ min-inline-size:0;
3799
+ padding-block:var(--tds-number-stepper-padding-block);
3800
+ padding-inline:var(--t-spacing-1);
3801
+ font-family:inherit;
3802
+ font-size:inherit;
3803
+ color:inherit;
3804
+ outline:0;
3805
+ background:transparent;
3806
+ border:0;
3658
3807
  }
3659
3808
 
3660
- .tds-checkbox-group-description{
3809
+ .tds-number-stepper-input::-webkit-inner-spin-button,.tds-number-stepper-input::-webkit-outer-spin-button{
3810
+ margin:0;
3811
+ -webkit-appearance:none;
3812
+ appearance:none;
3813
+ }
3814
+
3815
+ .tds-number-stepper-button{
3816
+ flex-shrink:0;
3817
+ align-self:center;
3818
+ inline-size:calc(var(--tds-number-stepper-min-height) - (var(--tds-number-stepper-button-offset) * 2));
3819
+ block-size:calc(var(--tds-number-stepper-min-height) - (var(--tds-number-stepper-button-offset) * 2));
3820
+ padding:0;
3821
+ }
3822
+
3823
+ .tds-number-stepper-button:last-of-type{
3824
+ margin-inline-end:var(--tds-number-stepper-button-offset);
3825
+ }
3826
+
3827
+ .tds-number-stepper-description{
3661
3828
  display:flex;
3662
3829
  gap:var(--t-spacing-half);
3663
3830
  align-items:flex-start;
3664
3831
  margin:0;
3665
- font-size:var(--tds-checkbox-group-description-font-size);
3666
- line-height:var(--tds-checkbox-group-description-line-height);
3667
- color:var(--tds-checkbox-group-description-color);
3832
+ font-size:var(--t-font-size-sm);
3833
+ line-height:1.35;
3834
+ color:var(--tds-number-stepper-description-color, var(--t-text-color-secondary));
3668
3835
  cursor:text;
3669
3836
  }
3670
3837
 
3671
- .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
3672
- display:var(--tds-checkbox-group-description-invalid-icon-display);
3673
- flex-shrink:0;
3674
- margin-top:calc(.5lh - .5em);
3675
- line-height:var(--tds-checkbox-group-description-line-height);
3676
- }
3677
-
3678
- .tds-checkbox-group--sm{
3679
- --tds-checkbox-group-line-height:1.35;
3680
- --tds-checkbox-group-font-size:var(--t-font-size-sm);
3681
- --tds-checkbox-group-description-font-size:var(--t-font-size-xs);
3682
- --tds-checkbox-group-description-line-height:1.3;
3838
+ .tds-number-stepper-description-invalid-icon{
3839
+ display:var(--tds-number-stepper-description-invalid-icon-display, none);
3840
+ flex-shrink:0;
3841
+ margin-block-start:calc(.5lh - .5em);
3842
+ line-height:1.35;
3683
3843
  }
3684
3844
 
3685
3845
  .tds-date-picker{
@@ -4240,159 +4400,6 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
4240
4400
  line-height:1.35;
4241
4401
  }
4242
4402
 
4243
- .tds-number-stepper{
4244
- --tds-number-stepper-border-color:var(--t-form-border-color);
4245
- --tds-number-stepper-border-color-hover:var(--t-form-border-color-hover);
4246
- --tds-number-stepper-border-color-active:var(--t-form-border-color-focus);
4247
- --tds-number-stepper-background-color:var(--t-form-background-color);
4248
- --tds-number-stepper-color:var(--t-form-color);
4249
- --tds-number-stepper-font-size:var(--t-font-size-md);
4250
- --tds-number-stepper-min-height:var(--t-container-size-md);
4251
- --tds-number-stepper-padding-block:6px;
4252
- --tds-number-stepper-button-offset:4px;
4253
- --tds-number-stepper-button-gap:2px;
4254
- --tds-number-stepper-description-color:var(--t-text-color-secondary);
4255
- --tds-number-stepper-description-invalid-icon-display:none;
4256
-
4257
- position:relative;
4258
- display:flex;
4259
- flex-direction:column;
4260
- gap:var(--t-spacing-half);
4261
- }
4262
-
4263
- .tds-number-stepper[data-required] .tds-number-stepper-label::after{
4264
- margin-left:.25ch;
4265
- color:var(--t-text-color-status-error);
4266
- content:"*";
4267
- }
4268
-
4269
- .tds-number-stepper[data-invalid]{
4270
- --tds-number-stepper-border-color:var(--t-form-border-color-error);
4271
- --tds-number-stepper-border-color-hover:var(--t-form-border-color-error-hover);
4272
- --tds-number-stepper-border-color-active:var(--t-form-border-color-error-hover);
4273
- --tds-number-stepper-background-color:var(--t-form-background-color-error);
4274
- --tds-number-stepper-description-color:var(--t-text-color-status-error);
4275
- --tds-number-stepper-description-invalid-icon-display:inline-block;
4276
- }
4277
-
4278
- .tds-number-stepper[data-disabled]{
4279
- --tds-number-stepper-border-color:var(--t-form-border-color-disabled);
4280
- --tds-number-stepper-background-color:var(--t-form-background-color-disabled);
4281
- --tds-number-stepper-color:var(--t-form-color-disabled);
4282
- }
4283
-
4284
- .tds-number-stepper[data-disabled] .tds-number-stepper-label{
4285
- color:var(--t-form-color-disabled);
4286
- }
4287
-
4288
- .tds-number-stepper[data-disabled] .tds-number-stepper-field{
4289
- cursor:not-allowed;
4290
- }
4291
-
4292
- .tds-number-stepper--lg{
4293
- --tds-number-stepper-min-height:var(--t-container-size-lg);
4294
- --tds-number-stepper-font-size:var(--t-font-size-lg);
4295
- --tds-number-stepper-button-offset:5px;
4296
- --tds-number-stepper-button-gap:4px;
4297
- }
4298
-
4299
- .tds-number-stepper-label{
4300
- font-size:var(--t-font-size-md);
4301
- font-weight:var(--t-font-weight-normal);
4302
- color:var(--t-text-color);
4303
- cursor:default;
4304
- }
4305
-
4306
- .tds-number-stepper-field{
4307
- display:flex;
4308
- gap:var(--tds-number-stepper-button-gap);
4309
- align-items:center;
4310
- inline-size:100%;
4311
- min-block-size:var(--tds-number-stepper-min-height);
4312
- font-family:inherit;
4313
- font-size:var(--tds-number-stepper-font-size);
4314
- line-height:1;
4315
- color:var(--tds-number-stepper-color);
4316
- -webkit-appearance:none;
4317
- -moz-appearance:none;
4318
- appearance:none;
4319
- cursor:default;
4320
- outline:var(--t-focus-ring-width) solid transparent;
4321
- outline-offset:0;
4322
- background-color:var(--tds-number-stepper-background-color);
4323
- border:var(--t-form-border-width) solid var(--tds-number-stepper-border-color);
4324
- border-radius:var(--t-form-border-radius);
4325
- }
4326
-
4327
- .tds-number-stepper-field[data-hovered]:not([data-focus-visible],[data-focus-within],[data-disabled]){
4328
- border-color:var(--tds-number-stepper-border-color-hover);
4329
- }
4330
-
4331
- .tds-number-stepper-field[data-focus-within]{
4332
- outline-color:var(--t-focus-ring-color);
4333
- outline-offset:var(--t-focus-ring-offset);
4334
- border-color:var(--tds-number-stepper-border-color-active);
4335
- }
4336
-
4337
- .tds-number-stepper-field:has([readonly]){
4338
- --tds-number-stepper-background-color:var(--t-form-background-color-readonly);
4339
- }
4340
-
4341
- .tds-number-stepper-field[data-focus-within]:has([readonly]){
4342
- border-color:var(--t-form-border-color-hover);
4343
- }
4344
-
4345
- .tds-number-stepper-input{
4346
- display:flex;
4347
- flex:1;
4348
- align-items:center;
4349
- min-inline-size:0;
4350
- padding-block:var(--tds-number-stepper-padding-block);
4351
- padding-inline:var(--t-spacing-1);
4352
- font-family:inherit;
4353
- font-size:inherit;
4354
- color:inherit;
4355
- outline:0;
4356
- background:transparent;
4357
- border:0;
4358
- }
4359
-
4360
- .tds-number-stepper-input::-webkit-inner-spin-button,.tds-number-stepper-input::-webkit-outer-spin-button{
4361
- margin:0;
4362
- -webkit-appearance:none;
4363
- appearance:none;
4364
- }
4365
-
4366
- .tds-number-stepper-button{
4367
- flex-shrink:0;
4368
- align-self:center;
4369
- inline-size:calc(var(--tds-number-stepper-min-height) - (var(--tds-number-stepper-button-offset) * 2));
4370
- block-size:calc(var(--tds-number-stepper-min-height) - (var(--tds-number-stepper-button-offset) * 2));
4371
- padding:0;
4372
- }
4373
-
4374
- .tds-number-stepper-button:last-of-type{
4375
- margin-inline-end:var(--tds-number-stepper-button-offset);
4376
- }
4377
-
4378
- .tds-number-stepper-description{
4379
- display:flex;
4380
- gap:var(--t-spacing-half);
4381
- align-items:flex-start;
4382
- margin:0;
4383
- font-size:var(--t-font-size-sm);
4384
- line-height:1.35;
4385
- color:var(--tds-number-stepper-description-color, var(--t-text-color-secondary));
4386
- cursor:text;
4387
- }
4388
-
4389
- .tds-number-stepper-description-invalid-icon{
4390
- display:var(--tds-number-stepper-description-invalid-icon-display, none);
4391
- flex-shrink:0;
4392
- margin-block-start:calc(.5lh - .5em);
4393
- line-height:1.35;
4394
- }
4395
-
4396
4403
  .t-banner{
4397
4404
  --t-banner-font-size:var(--t-font-size-md);
4398
4405
  --t-banner-font-color:var(--t-text-color);