@planningcenter/tapestry 4.0.0-rc.7 → 4.0.0-rc.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/reactRender.css +1057 -1057
  2. package/dist/reactRender.css.map +1 -1
  3. package/dist/reactRenderLegacy.css +1057 -1057
  4. package/dist/reactRenderLegacy.css.map +1 -1
  5. package/package.json +2 -2
package/dist/reactRenderLegacy.css CHANGED
@@ -677,283 +677,6 @@
677
677
  [data-padding-inline-xl="7"]{ padding-inline:var(--t-spacing-7); }
678
678
  }
679
679
 
680
- @layer t-critical{
681
- tds-page-header:not(.hydrated){
682
- display:none;
683
- }
684
- }
685
-
686
- @layer t-component{
687
- .tds-page-header{
688
- --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
689
- --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
690
- --tds-page-header-color:var(--t-text-color);
691
- --tds-page-header-bottom-border-color:transparent;
692
- --tds-page-header-headline-color:var(--t-text-color-headline);
693
- --tds-page-header-headline-font-size:var(--t-font-size-2xl);
694
- --tds-page-header-padding-x:var(--t-spacing-2);
695
- --tds-page-header-padding-y:var(--t-spacing-2);
696
- --tds-page-header-nav-padding-x:var(--tds-page-header-padding-x, var(--t-spacing-3));
697
- --tds-page-header-nav-gap:var(--t-spacing-1);
698
- --tds-page-header-nav-background:linear-gradient(180deg, var(--tds-page-header-nav-background-start, rgba(0, 0, 0, 0)) 0%, var(--tds-page-header-nav-background-end, rgba(0, 0, 0, .1)) 100%);
699
- --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
700
- --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
701
- --tds-page-header-nav-item-color:var(--t-text-color-secondary);
702
- --tds-page-header-nav-item-background-color:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 35%);
703
- --tds-page-header-nav-item-border-width:1px;
704
-
705
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
706
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color);
707
-
708
- --tds-page-header-nav-item-color-hover:var(--t-text-color);
709
- --tds-page-header-nav-item-background-color-hover:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 20%);
710
- --tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
711
-
712
- --tds-page-header-nav-item-background-color-active:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 10%);
713
- --tds-page-header-nav-item-border-color-active:var(--tds-page-header-nav-item-background-color-active);
714
-
715
- --tds-page-header-nav-item-color-disabled:var(--t-text-color-disabled);
716
- --tds-page-header-nav-item-background-color-disabled:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 50%);
717
- --tds-page-header-nav-item-border-color-disabled:var(--tds-page-header-nav-item-background-color-disabled);
718
-
719
- --tds-page-header-nav-item-color-selected:var(--t-text-color);
720
- --tds-page-header-nav-item-background-color-selected:var(--t-surface-color-canvas);
721
- --tds-page-header-nav-item-border-color-selected:var(--tds-page-header-nav-item-background-color-selected);
722
- --tds-page-header-nav-item-border-bottom-color-selected:var(--tds-page-header-nav-item-background-color-selected);
723
- --tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning);
724
- }
725
-
726
- .tds-page-header--profile{
727
- --tds-page-header-padding-y:20px;
728
- }
729
-
730
- @supports (color: light-dark(#fff, #000)){
731
- .tds-page-header{
732
- --tds-page-header-nav-background-start:light-dark(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0));
733
- --tds-page-header-nav-background-end:light-dark(rgba(0, 0, 0, .05), rgba(255, 255, 255, .1));
734
- }
735
- }
736
-
737
- @media (min-width: 600px){
738
- .tds-page-header{
739
- --tds-page-header-background-color:var(--t-surface-color-canvas);
740
- --tds-page-header-color:var(--t-text-color-secondary);
741
- --tds-page-header-bottom-border-color:var(--t-border-color);
742
- --tds-page-header-padding-x:var(--t-spacing-3);
743
- --tds-page-header-headline-font-size:var(--t-font-size-3xl);
744
- --tds-page-header-nav-gap:var(--t-spacing-half);
745
- --tds-page-header-nav-background:transparent;
746
- --tds-page-header-nav-item-padding-x:var(--t-spacing-2);
747
- --tds-page-header-nav-item-border-width:1px;
748
- --tds-page-header-nav-item-color:var(--t-text-color);
749
- --tds-page-header-nav-item-background-color:var(--t-fill-color-neutral-070);
750
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-bottom-border-color);
751
- --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-060);
752
- --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-050);
753
- --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
754
- --tds-page-header-nav-item-border-color-selected:var(--t-border-color);
755
- }
756
- }
757
- }
758
-
759
- .tds-page-header{
760
- display:flex;
761
- flex-direction:column;
762
- padding-top:var(--tds-page-header-padding-y);
763
- color:var(--tds-page-header-color);
764
- background:var(--tds-page-header-background-color);
765
- border-bottom:1px solid var(--tds-page-header-bottom-border-color);
766
- }
767
-
768
- .tds-page-header:not(.has-nav){
769
- padding-bottom:var(--tds-page-header-padding-y);
770
- }
771
-
772
- .tds-page-header.inactive{
773
- background:var(--tds-page-header-background-color-inactive);
774
- }
775
-
776
- .tds-page-header :is([slot="actions"],.tds-page-header__actions){
777
- width:100%;
778
- }
779
-
780
- .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
781
- display:flex;
782
- flex-flow:row wrap;
783
- gap:var(--t-spacing-half) var(--t-spacing-1);
784
- align-items:flex-start;
785
- justify-content:flex-start;
786
- min-width:0;
787
- }
788
-
789
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)):not(:has(ul)),:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) ul{
790
- display:flex;
791
- gap:var(--tds-page-header-nav-gap);
792
- padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
793
- margin:0 0 -1px;
794
- overflow:auto;
795
- list-style:none;
796
- background:var(--tds-page-header-nav-background);
797
- }
798
-
799
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button){
800
- position:relative;
801
- display:inline-flex;
802
- padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
803
- font-size:var(--t-font-size-sm);
804
- line-height:22px;
805
- color:var(--tds-page-header-nav-item-color);
806
- white-space:nowrap;
807
- text-decoration:none;
808
- -webkit-appearance:none;
809
- -moz-appearance:none;
810
- appearance:none;
811
- cursor:pointer;
812
- outline-offset:-2px;
813
- background-color:var(--tds-page-header-nav-item-background-color);
814
- background-clip:padding-box;
815
- border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
816
- border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
817
- border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
818
- }
819
-
820
- .selected:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)){
821
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-selected);
822
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-selected);
823
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-selected);
824
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-selected);
825
- }
826
-
827
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):hover{
828
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
829
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
830
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
831
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-hover);
832
- }
833
-
834
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):active{
835
- background-color:var(--tds-page-header-nav-item-background-color-active);
836
- border-color:var(--tds-page-header-nav-item-border-color-active);
837
- border-bottom-color:var(--tds-page-header-nav-item-background-color-active);
838
- }
839
-
840
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):disabled{
841
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-disabled);
842
- color:var(--tds-page-header-nav-item-color-disabled);
843
- cursor:not-allowed;
844
- background-color:var(--tds-page-header-nav-item-background-color-disabled);
845
- opacity:1;
846
- }
847
-
848
- @media (min-width: 600px){
849
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected)::after{
850
- position:absolute;
851
- inset:auto -1px -1px;
852
- height:1px;
853
- pointer-events:none;
854
- content:"";
855
- background-color:var(--tds-page-header-bottom-border-color);
856
- }
857
- }
858
-
859
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
860
- position:relative;
861
- }
862
-
863
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator)) :is(a,button){
864
- -webkit-mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
865
- mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
866
- }
867
-
868
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::before,:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
869
- position:absolute;
870
- top:-5px;
871
- right:-2px;
872
- width:10px;
873
- height:10px;
874
- content:"";
875
- background:var(--tds-page-header-nav-item-indicator-color);
876
- border-radius:50%;
877
- }
878
-
879
- @media (prefers-reduced-motion: no-preference){
880
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
881
- animation:indicator-pulse 1.25s ease infinite;
882
- }
883
- }
884
-
885
- .tds-page-header__title-bar{
886
- display:flex;
887
- flex-direction:column;
888
- gap:var(--t-spacing-2) var(--t-spacing-1);
889
- align-items:flex-start;
890
- justify-content:space-between;
891
- padding:0 var(--tds-page-header-padding-x);
892
- }
893
-
894
- .tds-page-header--profile > .tds-page-header__title-bar{
895
- align-items:center;
896
- }
897
-
898
- .tds-page-header__primary{
899
- width:100%;
900
- }
901
-
902
- .tds-page-header__primary h1{
903
- margin:0;
904
- font-size:var(--tds-page-header-headline-font-size);
905
- font-weight:var(--t-font-weight-normal);
906
- line-height:32px;
907
- color:var(--tds-page-header-headline-color);
908
- overflow-wrap:break-word;
909
- }
910
-
911
- @media (min-width: 960px){
912
- .tds-page-header__primary{
913
- flex:1 1 max-content;
914
- width:auto;
915
- min-width:0;
916
- max-width:100%;
917
- }
918
-
919
- .tds-page-header__title-bar,
920
- .tds-page-header--profile .tds-page-header__title-bar{
921
- flex-flow:row nowrap;
922
- row-gap:12px;
923
- align-items:flex-start;
924
- }
925
- .tds-page-header :is([slot="actions"],.tds-page-header__actions){
926
- width:auto;
927
- }
928
-
929
- .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
930
- justify-content:flex-end;
931
- }
932
- }
933
-
934
- .tds-page-header-phone,
935
- .tds-page-header-email{
936
- color:var(--tds-page-header-color);
937
- white-space:nowrap;
938
- }
939
- .tds-page-header-email{
940
- max-width:100%;
941
- overflow:hidden;
942
- text-overflow:ellipsis;
943
- }
944
-
945
- @keyframes indicator-pulse{
946
- 0%{
947
- opacity:.3;
948
- transform:scale(.9);
949
- }
950
-
951
- 100%{
952
- opacity:0;
953
- transform:scale(1.75);
954
- }
955
- }
956
-
957
680
 
958
681
  @media (prefers-reduced-motion: no-preference){
959
682
 
@@ -1358,6 +1081,80 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1358
1081
  border-end-end-radius:var(--tds-btn-border-radius);
1359
1082
  }
1360
1083
 
1084
+ .tds-checkbox-group{
1085
+ --tds-checkbox-group-font-size:var(--t-font-size-md);
1086
+ --tds-checkbox-group-line-height:1.4;
1087
+ --tds-checkbox-group-gap:var(--t-spacing-1);
1088
+
1089
+ --tds-checkbox-group-description-font-size:var(--t-font-size-sm);
1090
+ --tds-checkbox-group-description-line-height:1.35;
1091
+ --tds-checkbox-group-description-color:var(--t-text-color-secondary);
1092
+ --tds-checkbox-group-description-invalid-icon-display:none;
1093
+ display:flex;
1094
+ flex-direction:column;
1095
+ gap:0;
1096
+ padding:0;
1097
+ margin:0;
1098
+
1099
+ font-size:var(--tds-checkbox-group-font-size);
1100
+ line-height:var(--tds-checkbox-group-line-height);
1101
+ border:0;
1102
+ }
1103
+
1104
+ .tds-checkbox-group legend{
1105
+ float:left;
1106
+ padding:0;
1107
+ margin:0;
1108
+ }
1109
+
1110
+ .tds-checkbox-group[aria-invalid="true"]{
1111
+ --tds-checkbox-group-description-color:var(--t-text-color-status-error);
1112
+ --tds-checkbox-group-description-invalid-icon-display:inline-block;
1113
+ }
1114
+
1115
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) legend::after{
1116
+ margin-left:.25ch;
1117
+ color:var(--t-text-color-status-error);
1118
+ content:"*";
1119
+ }
1120
+
1121
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
1122
+ content:none;
1123
+ }
1124
+
1125
+ .tds-checkbox-group-fields{
1126
+ display:flex;
1127
+ flex-direction:column;
1128
+ gap:var(--tds-checkbox-group-gap);
1129
+ align-items:flex-start;
1130
+ margin-top:var(--t-spacing-1);
1131
+ }
1132
+
1133
+ .tds-checkbox-group-description{
1134
+ display:flex;
1135
+ gap:var(--t-spacing-half);
1136
+ align-items:flex-start;
1137
+ margin:var(--t-spacing-fourth) 0 0;
1138
+ font-size:var(--tds-checkbox-group-description-font-size);
1139
+ line-height:var(--tds-checkbox-group-description-line-height);
1140
+ color:var(--tds-checkbox-group-description-color);
1141
+ cursor:text;
1142
+ }
1143
+
1144
+ .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
1145
+ display:var(--tds-checkbox-group-description-invalid-icon-display);
1146
+ flex-shrink:0;
1147
+ margin-top:calc(.5lh - .5em);
1148
+ line-height:var(--tds-checkbox-group-description-line-height);
1149
+ }
1150
+
1151
+ .tds-checkbox-group--sm{
1152
+ --tds-checkbox-group-line-height:1.35;
1153
+ --tds-checkbox-group-font-size:var(--t-font-size-sm);
1154
+ --tds-checkbox-group-description-font-size:var(--t-font-size-xs);
1155
+ --tds-checkbox-group-description-line-height:1.3;
1156
+ }
1157
+
1361
1158
  .tds-checkbox{
1362
1159
  --tds-checkbox-font-size:var(--t-font-size-md);
1363
1160
  --tds-checkbox-cursor:pointer;
@@ -1497,281 +1294,60 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1497
1294
  }
1498
1295
 
1499
1296
  :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{
1500
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1501
- --tds-checkbox-input-background-color:var(--t-form-border-color-error);
1502
- }
1503
-
1504
- :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){
1505
- --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
1506
- --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
1507
- }
1508
-
1509
- .tds-checkbox:has(input:required) label::after{
1510
- margin-left:.25ch;
1511
- color:var(--t-text-color-status-error);
1512
- content:"*";
1513
- }
1514
-
1515
- .tds-checkbox:has(input:disabled){
1516
- --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
1517
- --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
1518
-
1519
- --tds-checkbox-label-color:var(--t-form-color-disabled);
1520
- --tds-checkbox-description-color:var(--t-form-color-disabled);
1521
- --tds-checkbox-cursor:not-allowed;
1522
- }
1523
-
1524
- .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
1525
- --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
1526
- }
1527
-
1528
- .tds-checkbox-description{
1529
- display:flex;
1530
- grid-area:2 / 2;
1531
- gap:var(--t-spacing-half);
1532
- align-items:flex-start;
1533
- padding-inline-start:var(--t-spacing-1);
1534
- margin:0;
1535
- font-size:var(--tds-checkbox-description-font-size);
1536
- line-height:var(--tds-checkbox-description-line-height);
1537
- color:var(--tds-checkbox-description-color);
1538
- cursor:text;
1539
- }
1540
-
1541
- .tds-checkbox-description .tds-checkbox-description-invalid-icon{
1542
- display:var(--tds-checkbox-description-invalid-icon-display);
1543
- flex-shrink:0;
1544
- margin-top:calc(.5lh - .5em);
1545
- line-height:var(--tds-checkbox-description-line-height);
1546
- }
1547
-
1548
- .tds-checkbox--sm{
1549
- --tds-checkbox-line-height:1.35;
1550
- --tds-checkbox-input-size:var(--t-element-size-sm);
1551
- --tds-checkbox-font-size:var(--t-font-size-sm);
1552
- --tds-checkbox-description-font-size:var(--t-font-size-xs);
1553
- --tds-checkbox-description-line-height:1.3;
1554
- }
1555
-
1556
- .tds-checkbox-group{
1557
- --tds-checkbox-group-font-size:var(--t-font-size-md);
1558
- --tds-checkbox-group-line-height:1.4;
1559
- --tds-checkbox-group-gap:var(--t-spacing-1);
1560
-
1561
- --tds-checkbox-group-description-font-size:var(--t-font-size-sm);
1562
- --tds-checkbox-group-description-line-height:1.35;
1563
- --tds-checkbox-group-description-color:var(--t-text-color-secondary);
1564
- --tds-checkbox-group-description-invalid-icon-display:none;
1565
- display:flex;
1566
- flex-direction:column;
1567
- gap:0;
1568
- padding:0;
1569
- margin:0;
1570
-
1571
- font-size:var(--tds-checkbox-group-font-size);
1572
- line-height:var(--tds-checkbox-group-line-height);
1573
- border:0;
1574
- }
1575
-
1576
- .tds-checkbox-group legend{
1577
- float:left;
1578
- padding:0;
1579
- margin:0;
1580
- }
1581
-
1582
- .tds-checkbox-group[aria-invalid="true"]{
1583
- --tds-checkbox-group-description-color:var(--t-text-color-status-error);
1584
- --tds-checkbox-group-description-invalid-icon-display:inline-block;
1585
- }
1586
-
1587
- .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) legend::after{
1588
- margin-left:.25ch;
1589
- color:var(--t-text-color-status-error);
1590
- content:"*";
1591
- }
1592
-
1593
- .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
1594
- content:none;
1595
- }
1596
-
1597
- .tds-checkbox-group-fields{
1598
- display:flex;
1599
- flex-direction:column;
1600
- gap:var(--tds-checkbox-group-gap);
1601
- align-items:flex-start;
1602
- margin-top:var(--t-spacing-1);
1603
- }
1604
-
1605
- .tds-checkbox-group-description{
1606
- display:flex;
1607
- gap:var(--t-spacing-half);
1608
- align-items:flex-start;
1609
- margin:var(--t-spacing-fourth) 0 0;
1610
- font-size:var(--tds-checkbox-group-description-font-size);
1611
- line-height:var(--tds-checkbox-group-description-line-height);
1612
- color:var(--tds-checkbox-group-description-color);
1613
- cursor:text;
1614
- }
1615
-
1616
- .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
1617
- display:var(--tds-checkbox-group-description-invalid-icon-display);
1618
- flex-shrink:0;
1619
- margin-top:calc(.5lh - .5em);
1620
- line-height:var(--tds-checkbox-group-description-line-height);
1621
- }
1622
-
1623
- .tds-checkbox-group--sm{
1624
- --tds-checkbox-group-line-height:1.35;
1625
- --tds-checkbox-group-font-size:var(--t-font-size-sm);
1626
- --tds-checkbox-group-description-font-size:var(--t-font-size-xs);
1627
- --tds-checkbox-group-description-line-height:1.3;
1628
- }
1629
-
1630
- .tds-dropdown-popover{
1631
- min-inline-size:10rem;
1632
- max-inline-size:24rem;
1633
- padding:var(--t-spacing-1);
1634
- overflow:auto;
1635
- overscroll-behavior:none;
1636
- -webkit-user-select:none;
1637
- -moz-user-select:none;
1638
- user-select:none;
1639
- outline:0;
1640
- scrollbar-color:#0004 var(--t-surface-color-card);
1641
- scrollbar-width:thin;
1642
- background:var(--t-surface-color-card);
1643
- background-clip:padding-box;
1644
- border:1px solid var(--t-border-color);
1645
- border-radius:var(--t-border-radius);
1646
- box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
1647
- }
1648
- .tds-dropdown-popover[data-entering]{
1649
- animation:tds-dropdown-popover var(--t-duration-300) var(--t-ease-out);
1650
- }
1651
- .tds-dropdown-popover[data-exiting]{
1652
- animation:tds-dropdown-popover var(--t-duration-200) var(--t-ease-in) reverse;
1653
- }
1654
- .tds-dropdown-popover[data-entering],.tds-dropdown-popover[data-exiting]{
1655
- will-change:opacity, transform;
1656
- }
1657
-
1658
- @keyframes tds-dropdown-popover{
1659
- from{
1660
- opacity:0;
1661
- transform:translateY(-8px);
1662
- }
1663
- }
1664
-
1665
- @media (prefers-reduced-motion: reduce){
1666
- .tds-dropdown-popover[data-entering],.tds-dropdown-popover[data-exiting]{
1667
- animation:none;
1668
- }
1669
- }
1670
-
1671
- .tds-dropdown-popover [role="menu"]{
1672
- outline:0;
1673
- }
1674
- .tds-dropdown-item{
1675
- --tds-dropdown-item-color:var(--t-text-color);
1676
- --tds-dropdown-item-row-gap:0;
1677
- --tds-dropdown-item-column-gap:var(--t-spacing-1);
1678
-
1679
- display:flex;
1680
- row-gap:var(--tds-dropdown-item-row-gap);
1681
- -moz-column-gap:var(--tds-dropdown-item-column-gap);
1682
- column-gap:var(--tds-dropdown-item-column-gap);
1683
- align-items:center;
1684
- padding-block:var(--t-spacing-1);
1685
- padding-inline:var(--t-spacing-2);
1686
- font-size:1rem;
1687
- color:var(--tds-dropdown-item-color);
1688
- text-decoration:none;
1689
- cursor:default;
1690
- outline:0;
1691
- border-radius:var(--t-border-radius);
1692
- }
1693
- .tds-dropdown-item[data-hovered]:not([data-disabled]),.tds-dropdown-item[data-focus-visible]{
1694
- background:var(--t-fill-color-neutral-070);
1695
- }
1696
- .tds-dropdown-item[data-pressed]:not([data-disabled]){
1697
- background:var(--t-fill-color-neutral-060);
1698
- }
1699
- .tds-dropdown-item[data-disabled]{
1700
- --tds-dropdown-item-color:var(--t-form-color-disabled);
1701
-
1702
- cursor:not-allowed;
1703
- }
1704
-
1705
- .tds-dropdown-item--destructive{
1706
- --tds-dropdown-item-color:var(--t-text-color-status-error);
1707
- }
1708
-
1709
- .tds-dropdown-item--staff-only{
1710
- --tds-dropdown-item-color:var(--t-fill-color-product-staff);
1711
- }
1712
- a.tds-dropdown-item:is(:hover, :active){
1713
- color:var(--tds-dropdown-item-color);
1714
- }
1715
- .tds-dropdown-item [slot="prefix"],
1716
- .tds-dropdown-item [slot="suffix"]{
1717
- flex-shrink:0;
1718
- }
1719
-
1720
- .tds-dropdown-item [slot="label"]{
1721
- flex:1;
1722
- min-width:0;
1723
- overflow:hidden;
1724
- text-overflow:ellipsis;
1725
- white-space:nowrap;
1726
- }
1297
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1298
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error);
1299
+ }
1727
1300
 
1728
- .tds-dropdown-item [slot="description"]{
1729
- font-size:var(--t-font-size-sm);
1730
- color:var(--t-text-color-secondary);
1731
- }
1301
+ :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){
1302
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
1303
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
1304
+ }
1732
1305
 
1733
- .tds-dropdown-item:has([slot="description"]){
1734
- --tds-dropdown-item-row-gap:var(--t-spacing-half);
1735
- --tds-dropdown-item-column-gap:0;
1306
+ .tds-checkbox:has(input:required) label::after{
1307
+ margin-left:.25ch;
1308
+ color:var(--t-text-color-status-error);
1309
+ content:"*";
1310
+ }
1736
1311
 
1737
- display:grid;
1738
- grid-template-areas:"prefix label suffix" ". description .";
1739
- grid-template-columns:auto 1fr auto;
1740
- }
1312
+ .tds-checkbox:has(input:disabled){
1313
+ --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
1314
+ --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
1741
1315
 
1742
- .tds-dropdown-item:has([slot="description"]) [slot="prefix"]{
1743
- grid-area:prefix;
1744
- margin-inline-end:var(--t-spacing-1);
1745
- }
1316
+ --tds-checkbox-label-color:var(--t-form-color-disabled);
1317
+ --tds-checkbox-description-color:var(--t-form-color-disabled);
1318
+ --tds-checkbox-cursor:not-allowed;
1319
+ }
1746
1320
 
1747
- .tds-dropdown-item:has([slot="description"]) [slot="label"]{
1748
- grid-area:label;
1749
- }
1321
+ .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
1322
+ --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
1323
+ }
1750
1324
 
1751
- .tds-dropdown-item:has([slot="description"]) [slot="description"]{
1752
- grid-area:description;
1325
+ .tds-checkbox-description{
1326
+ display:flex;
1327
+ grid-area:2 / 2;
1328
+ gap:var(--t-spacing-half);
1329
+ align-items:flex-start;
1330
+ padding-inline-start:var(--t-spacing-1);
1331
+ margin:0;
1332
+ font-size:var(--tds-checkbox-description-font-size);
1333
+ line-height:var(--tds-checkbox-description-line-height);
1334
+ color:var(--tds-checkbox-description-color);
1335
+ cursor:text;
1753
1336
  }
1754
1337
 
1755
- .tds-dropdown-item:has([slot="description"]) [slot="suffix"]{
1756
- grid-area:suffix;
1757
- margin-inline-start:var(--t-spacing-1);
1758
- }
1759
- .tds-dropdown-section:not(:first-child){
1760
- margin-block-start:var(--t-spacing-half);
1761
- }
1338
+ .tds-checkbox-description .tds-checkbox-description-invalid-icon{
1339
+ display:var(--tds-checkbox-description-invalid-icon-display);
1340
+ flex-shrink:0;
1341
+ margin-top:calc(.5lh - .5em);
1342
+ line-height:var(--tds-checkbox-description-line-height);
1343
+ }
1762
1344
 
1763
- .tds-dropdown-section-label{
1764
- padding-block:var(--t-spacing-1);
1765
- padding-inline:var(--t-spacing-1);
1766
- font-size:var(--t-font-size-sm);
1767
- font-weight:var(--t-font-weight-semibold);
1768
- color:var(--t-text-color-secondary);
1769
- }
1770
- .tds-dropdown-separator{
1771
- margin-block:var(--t-spacing-half);
1772
- margin-inline:0;
1773
- border:0;
1774
- border-top:1px solid var(--t-border-color);
1345
+ .tds-checkbox--sm{
1346
+ --tds-checkbox-line-height:1.35;
1347
+ --tds-checkbox-input-size:var(--t-element-size-sm);
1348
+ --tds-checkbox-font-size:var(--t-font-size-sm);
1349
+ --tds-checkbox-description-font-size:var(--t-font-size-xs);
1350
+ --tds-checkbox-description-line-height:1.3;
1775
1351
  }
1776
1352
 
1777
1353
  .tds-combo-box{
@@ -1934,133 +1510,152 @@ a.tds-dropdown-item:is(:hover, :active){
1934
1510
  color:var(--t-text-color-secondary);
1935
1511
  }
1936
1512
 
1937
-
1938
- :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{
1939
- -webkit-appearance:none;
1940
- appearance:none;
1941
- }
1942
-
1943
- [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
1944
- inline-size:1em;
1945
- block-size:2em;
1946
- }
1947
- @supports (field-sizing: content){
1948
- .tds-input--auto-width{
1949
- inline-size:-moz-fit-content;
1950
- inline-size:fit-content;
1951
- min-inline-size:min(100%, 122px);
1513
+ .tds-dropdown-popover{
1514
+ min-inline-size:10rem;
1515
+ max-inline-size:24rem;
1516
+ padding:var(--t-spacing-1);
1517
+ overflow:auto;
1518
+ overscroll-behavior:none;
1519
+ -webkit-user-select:none;
1520
+ -moz-user-select:none;
1521
+ user-select:none;
1522
+ outline:0;
1523
+ scrollbar-color:#0004 var(--t-surface-color-card);
1524
+ scrollbar-width:thin;
1525
+ background:var(--t-surface-color-card);
1526
+ background-clip:padding-box;
1527
+ border:1px solid var(--t-border-color);
1528
+ border-radius:var(--t-border-radius);
1529
+ box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
1530
+ }
1531
+ .tds-dropdown-popover[data-entering]{
1532
+ animation:tds-dropdown-popover var(--t-duration-300) var(--t-ease-out);
1533
+ }
1534
+ .tds-dropdown-popover[data-exiting]{
1535
+ animation:tds-dropdown-popover var(--t-duration-200) var(--t-ease-in) reverse;
1536
+ }
1537
+ .tds-dropdown-popover[data-entering],.tds-dropdown-popover[data-exiting]{
1538
+ will-change:opacity, transform;
1952
1539
  }
1953
1540
 
1954
- .tds-input--auto-width input{
1955
- field-sizing:content;
1956
- inline-size:auto;
1541
+ @keyframes tds-dropdown-popover{
1542
+ from{
1543
+ opacity:0;
1544
+ transform:translateY(-8px);
1957
1545
  }
1958
1546
  }
1959
1547
 
1960
- .tds-input:has(textarea){
1961
- --tds-input-padding-block:6px;
1962
- --tds-input-resizer-size:var(--t-element-size-sm);
1963
- --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");
1548
+ @media (prefers-reduced-motion: reduce){
1549
+ .tds-dropdown-popover[data-entering],.tds-dropdown-popover[data-exiting]{
1550
+ animation:none;
1551
+ }
1964
1552
  }
1965
1553
 
1966
- @supports (x: attr(x type(*))){
1554
+ .tds-dropdown-popover [role="menu"]{
1555
+ outline:0;
1556
+ }
1557
+ .tds-dropdown-item{
1558
+ --tds-dropdown-item-color:var(--t-text-color);
1559
+ --tds-dropdown-item-row-gap:0;
1560
+ --tds-dropdown-item-column-gap:var(--t-spacing-1);
1967
1561
 
1968
- .tds-input textarea{
1969
- --tds-input-min-height:calc((attr(rows type(<number>), 3) * 1lh) + (var(--tds-input-padding-block) * 2) + 2px);
1562
+ display:flex;
1563
+ row-gap:var(--tds-dropdown-item-row-gap);
1564
+ -moz-column-gap:var(--tds-dropdown-item-column-gap);
1565
+ column-gap:var(--tds-dropdown-item-column-gap);
1566
+ align-items:center;
1567
+ padding-block:var(--t-spacing-1);
1568
+ padding-inline:var(--t-spacing-2);
1569
+ font-size:1rem;
1570
+ color:var(--tds-dropdown-item-color);
1571
+ text-decoration:none;
1572
+ cursor:default;
1573
+ outline:0;
1574
+ border-radius:var(--t-border-radius);
1970
1575
  }
1576
+ .tds-dropdown-item[data-hovered]:not([data-disabled]),.tds-dropdown-item[data-focus-visible]{
1577
+ background:var(--t-fill-color-neutral-070);
1971
1578
  }
1579
+ .tds-dropdown-item[data-pressed]:not([data-disabled]){
1580
+ background:var(--t-fill-color-neutral-060);
1581
+ }
1582
+ .tds-dropdown-item[data-disabled]{
1583
+ --tds-dropdown-item-color:var(--t-form-color-disabled);
1972
1584
 
1973
- .tds-input.tds-textarea--resize-vertical textarea{
1974
- resize:vertical;
1975
- }
1976
-
1977
- .tds-input.tds-textarea--resize-none textarea{
1978
- resize:none;
1979
- }
1980
-
1981
- .tds-input.tds-textarea--resize-auto textarea{
1982
- resize:vertical;
1983
- }
1984
-
1985
- @supports (field-sizing: content){
1986
- .tds-input.tds-textarea--resize-auto textarea{
1987
- field-sizing:content;
1988
- resize:none;
1989
- }
1990
- }
1585
+ cursor:not-allowed;
1586
+ }
1991
1587
 
1992
- .tds-input textarea{
1993
- --tds-input-scrollbar-thumb-color-default:var(--t-fill-color-neutral-040);
1994
- --tds-input-scrollbar-thumb-color-hidden:transparent;
1995
- --tds-input-scrollbar-thumb-color-hover:var(--t-fill-color-neutral-030);
1996
- --tds-input-scrollbar-thumb-color-thumb-hover:var(--t-fill-color-neutral-020);
1997
- --tds-input-scrollbar-thumb-color-thumb-active:var(--t-fill-color-neutral-010);
1998
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-default);
1999
- --tds-input-scrollbar-surface-color:rgba(0, 0, 0, 0);
2000
- --tds-input-scrollbar-thumb-border-radius:999px;
2001
- --tds-input-scrollbar-thumb-border-width:3px;
2002
- --tds-input-scrollbar-track-margin-block:.125rem;
2003
- scrollbar-color:initial;
2004
- transition-timing-function:var(--t-ease-in-out);
2005
- transition-duration:var(--t-duration-200);
2006
- transition-property:var(--tds-input-transition-property), --tds-input-scrollbar-thumb-color;
1588
+ .tds-dropdown-item--destructive{
1589
+ --tds-dropdown-item-color:var(--t-text-color-status-error);
2007
1590
  }
2008
1591
 
2009
- @media (pointer: fine){
2010
- :is(.tds-input textarea)::-webkit-scrollbar{
2011
- width:12px;
2012
- height:12px;
2013
- cursor:default;
2014
- }
1592
+ .tds-dropdown-item--staff-only{
1593
+ --tds-dropdown-item-color:var(--t-fill-color-product-staff);
1594
+ }
1595
+ a.tds-dropdown-item:is(:hover, :active){
1596
+ color:var(--tds-dropdown-item-color);
1597
+ }
1598
+ .tds-dropdown-item [slot="prefix"],
1599
+ .tds-dropdown-item [slot="suffix"]{
1600
+ flex-shrink:0;
1601
+ }
2015
1602
 
2016
- :is(.tds-input textarea)::-webkit-scrollbar-thumb{
2017
- cursor:default;
2018
- background:var(--tds-input-scrollbar-thumb-color);
2019
- background-clip:content-box;
2020
- border:var(--tds-input-scrollbar-thumb-border-width) solid var(--tds-input-scrollbar-surface-color);
2021
- border-radius:var(--tds-input-scrollbar-thumb-border-radius);
2022
- }
1603
+ .tds-dropdown-item [slot="label"]{
1604
+ flex:1;
1605
+ min-width:0;
1606
+ overflow:hidden;
1607
+ text-overflow:ellipsis;
1608
+ white-space:nowrap;
1609
+ }
2023
1610
 
2024
- :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
2025
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
2026
- }
1611
+ .tds-dropdown-item [slot="description"]{
1612
+ font-size:var(--t-font-size-sm);
1613
+ color:var(--t-text-color-secondary);
1614
+ }
2027
1615
 
2028
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
2029
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
2030
- }
1616
+ .tds-dropdown-item:has([slot="description"]){
1617
+ --tds-dropdown-item-row-gap:var(--t-spacing-half);
1618
+ --tds-dropdown-item-column-gap:0;
2031
1619
 
2032
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
2033
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
2034
- }
1620
+ display:grid;
1621
+ grid-template-areas:"prefix label suffix" ". description .";
1622
+ grid-template-columns:auto 1fr auto;
1623
+ }
2035
1624
 
2036
- :is(.tds-input textarea)::-webkit-scrollbar-corner{
2037
- background:var(--tds-input-scrollbar-surface-color);
2038
- }
1625
+ .tds-dropdown-item:has([slot="description"]) [slot="prefix"]{
1626
+ grid-area:prefix;
1627
+ margin-inline-end:var(--t-spacing-1);
1628
+ }
2039
1629
 
2040
- :is(.tds-input textarea)::-webkit-resizer{
2041
- background:var(--tds-input-resizer-icon) no-repeat;
2042
- background-position:right bottom;
2043
- background-size:var(--tds-input-resizer-size) var(--tds-input-resizer-size);
2044
- }
1630
+ .tds-dropdown-item:has([slot="description"]) [slot="label"]{
1631
+ grid-area:label;
1632
+ }
2045
1633
 
2046
- :is(.tds-input textarea)::-webkit-scrollbar-track{
2047
- margin-block:var(--tds-input-scrollbar-track-margin-block);
2048
- cursor:default;
2049
- }
1634
+ .tds-dropdown-item:has([slot="description"]) [slot="description"]{
1635
+ grid-area:description;
1636
+ }
2050
1637
 
2051
- @supports (-moz-appearance: none){
2052
- :is(.tds-input textarea){
2053
- scrollbar-color:var(--tds-input-scrollbar-thumb-color-default) var(--tds-input-scrollbar-surface-color);
2054
- scrollbar-width:thin;
2055
- }
1638
+ .tds-dropdown-item:has([slot="description"]) [slot="suffix"]{
1639
+ grid-area:suffix;
1640
+ margin-inline-start:var(--t-spacing-1);
1641
+ }
1642
+ .tds-dropdown-section:not(:first-child){
1643
+ margin-block-start:var(--t-spacing-half);
1644
+ }
2056
1645
 
2057
- @media (hover){
2058
- :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
2059
- scrollbar-color:var(--tds-input-scrollbar-thumb-color-hover) var(--tds-input-scrollbar-surface-color);
2060
- }
2061
- }
2062
- }
2063
- }
1646
+ .tds-dropdown-section-label{
1647
+ padding-block:var(--t-spacing-1);
1648
+ padding-inline:var(--t-spacing-1);
1649
+ font-size:var(--t-font-size-sm);
1650
+ font-weight:var(--t-font-weight-semibold);
1651
+ color:var(--t-text-color-secondary);
1652
+ }
1653
+ .tds-dropdown-separator{
1654
+ margin-block:var(--t-spacing-half);
1655
+ margin-inline:0;
1656
+ border:0;
1657
+ border-top:1px solid var(--t-border-color);
1658
+ }
2064
1659
 
2065
1660
  .tds-modal-overlay{
2066
1661
  position:fixed;
@@ -2206,6 +1801,111 @@ a.tds-dropdown-item:is(:hover, :active){
2206
1801
  margin-inline-end:auto;
2207
1802
  }
2208
1803
 
1804
+ .tds-input:has(textarea){
1805
+ --tds-input-padding-block:6px;
1806
+ --tds-input-resizer-size:var(--t-element-size-sm);
1807
+ --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");
1808
+ }
1809
+
1810
+ @supports (x: attr(x type(*))){
1811
+
1812
+ .tds-input textarea{
1813
+ --tds-input-min-height:calc((attr(rows type(<number>), 3) * 1lh) + (var(--tds-input-padding-block) * 2) + 2px);
1814
+ }
1815
+ }
1816
+
1817
+ .tds-input.tds-textarea--resize-vertical textarea{
1818
+ resize:vertical;
1819
+ }
1820
+
1821
+ .tds-input.tds-textarea--resize-none textarea{
1822
+ resize:none;
1823
+ }
1824
+
1825
+ .tds-input.tds-textarea--resize-auto textarea{
1826
+ resize:vertical;
1827
+ }
1828
+
1829
+ @supports (field-sizing: content){
1830
+ .tds-input.tds-textarea--resize-auto textarea{
1831
+ field-sizing:content;
1832
+ resize:none;
1833
+ }
1834
+ }
1835
+
1836
+ .tds-input textarea{
1837
+ --tds-input-scrollbar-thumb-color-default:var(--t-fill-color-neutral-040);
1838
+ --tds-input-scrollbar-thumb-color-hidden:transparent;
1839
+ --tds-input-scrollbar-thumb-color-hover:var(--t-fill-color-neutral-030);
1840
+ --tds-input-scrollbar-thumb-color-thumb-hover:var(--t-fill-color-neutral-020);
1841
+ --tds-input-scrollbar-thumb-color-thumb-active:var(--t-fill-color-neutral-010);
1842
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-default);
1843
+ --tds-input-scrollbar-surface-color:rgba(0, 0, 0, 0);
1844
+ --tds-input-scrollbar-thumb-border-radius:999px;
1845
+ --tds-input-scrollbar-thumb-border-width:3px;
1846
+ --tds-input-scrollbar-track-margin-block:.125rem;
1847
+ scrollbar-color:initial;
1848
+ transition-timing-function:var(--t-ease-in-out);
1849
+ transition-duration:var(--t-duration-200);
1850
+ transition-property:var(--tds-input-transition-property), --tds-input-scrollbar-thumb-color;
1851
+ }
1852
+
1853
+ @media (pointer: fine){
1854
+ :is(.tds-input textarea)::-webkit-scrollbar{
1855
+ width:12px;
1856
+ height:12px;
1857
+ cursor:default;
1858
+ }
1859
+
1860
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb{
1861
+ cursor:default;
1862
+ background:var(--tds-input-scrollbar-thumb-color);
1863
+ background-clip:content-box;
1864
+ border:var(--tds-input-scrollbar-thumb-border-width) solid var(--tds-input-scrollbar-surface-color);
1865
+ border-radius:var(--tds-input-scrollbar-thumb-border-radius);
1866
+ }
1867
+
1868
+ :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1869
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
1870
+ }
1871
+
1872
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
1873
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
1874
+ }
1875
+
1876
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
1877
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
1878
+ }
1879
+
1880
+ :is(.tds-input textarea)::-webkit-scrollbar-corner{
1881
+ background:var(--tds-input-scrollbar-surface-color);
1882
+ }
1883
+
1884
+ :is(.tds-input textarea)::-webkit-resizer{
1885
+ background:var(--tds-input-resizer-icon) no-repeat;
1886
+ background-position:right bottom;
1887
+ background-size:var(--tds-input-resizer-size) var(--tds-input-resizer-size);
1888
+ }
1889
+
1890
+ :is(.tds-input textarea)::-webkit-scrollbar-track{
1891
+ margin-block:var(--tds-input-scrollbar-track-margin-block);
1892
+ cursor:default;
1893
+ }
1894
+
1895
+ @supports (-moz-appearance: none){
1896
+ :is(.tds-input textarea){
1897
+ scrollbar-color:var(--tds-input-scrollbar-thumb-color-default) var(--tds-input-scrollbar-surface-color);
1898
+ scrollbar-width:thin;
1899
+ }
1900
+
1901
+ @media (hover){
1902
+ :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1903
+ scrollbar-color:var(--tds-input-scrollbar-thumb-color-hover) var(--tds-input-scrollbar-surface-color);
1904
+ }
1905
+ }
1906
+ }
1907
+ }
1908
+
2209
1909
  .tds-radio{
2210
1910
  --tds-radio-font-size:var(--t-font-size-md);
2211
1911
  --tds-radio-cursor:pointer;
@@ -2279,64 +1979,170 @@ a.tds-dropdown-item:is(:hover, :active){
2279
1979
 
2280
1980
  @media (prefers-reduced-motion: reduce){
2281
1981
 
2282
- .tds-radio input[type="radio"]{
2283
- --tds-radio-transition-property:none;
2284
- }
2285
- }
1982
+ .tds-radio input[type="radio"]{
1983
+ --tds-radio-transition-property:none;
1984
+ }
1985
+ }
1986
+
1987
+ .tds-radio:has(input:checked){
1988
+ --tds-radio-input-background-color:var(--t-icon-color-inverted);
1989
+ --tds-radio-input-border-color:var(--t-border-color-control-info);
1990
+ --tds-radio-input-border-width:4px;
1991
+ }
1992
+
1993
+ .tds-radio:has(input:checked) input:hover:not(:disabled){
1994
+ --tds-radio-input-background-color:var(--t-icon-color-inverted);
1995
+ --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
1996
+ }
1997
+
1998
+ .tds-radio:has(input:user-invalid){
1999
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
2000
+ }
2001
+
2002
+ .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
2003
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
2004
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
2005
+ }
2006
+
2007
+ .tds-radio:has(input:disabled){
2008
+ --tds-radio-input-background-color:var(--t-form-background-color-disabled);
2009
+ --tds-radio-input-border-color:var(--t-form-border-color-disabled);
2010
+
2011
+ --tds-radio-label-color:var(--t-form-color-disabled);
2012
+ --tds-radio-description-color:var(--t-form-color-disabled);
2013
+ --tds-radio-cursor:not-allowed;
2014
+ }
2015
+
2016
+ .tds-radio:has(input:disabled) input:checked{
2017
+ --tds-radio-input-background-color:var(--t-form-background-color);
2018
+ --tds-radio-input-border-color:var(--t-form-border-color-disabled);
2019
+ }
2020
+
2021
+ .tds-radio-description{
2022
+ display:flex;
2023
+ grid-area:2 / 2;
2024
+ gap:var(--t-spacing-half);
2025
+ align-items:flex-start;
2026
+ padding-inline-start:var(--t-spacing-1);
2027
+ margin:0;
2028
+ font-size:var(--tds-radio-description-font-size);
2029
+ line-height:var(--tds-radio-description-line-height);
2030
+ color:var(--tds-radio-description-color);
2031
+ cursor:text;
2032
+ }
2033
+
2034
+ .tds-radio--sm{
2035
+ --tds-radio-line-height:1.35;
2036
+ --tds-radio-input-size:var(--t-element-size-sm);
2037
+ --tds-radio-font-size:var(--t-font-size-sm);
2038
+ --tds-radio-description-font-size:var(--t-font-size-xs);
2039
+ --tds-radio-description-line-height:1.3;
2040
+ }
2041
+
2042
+
2043
+ :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{
2044
+ -webkit-appearance:none;
2045
+ appearance:none;
2046
+ }
2047
+
2048
+ [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
2049
+ inline-size:1em;
2050
+ block-size:2em;
2051
+ }
2052
+ @supports (field-sizing: content){
2053
+ .tds-input--auto-width{
2054
+ inline-size:-moz-fit-content;
2055
+ inline-size:fit-content;
2056
+ min-inline-size:min(100%, 122px);
2057
+ }
2058
+
2059
+ .tds-input--auto-width input{
2060
+ field-sizing:content;
2061
+ inline-size:auto;
2062
+ }
2063
+ }
2064
+
2065
+ .tds-radio-group{
2066
+ --tds-radio-group-font-size:var(--t-font-size-md);
2067
+ --tds-radio-group-line-height:1.4;
2068
+ --tds-radio-group-gap:var(--t-spacing-1);
2069
+
2070
+ --tds-radio-group-description-font-size:var(--t-font-size-sm);
2071
+ --tds-radio-group-description-line-height:1.35;
2072
+ --tds-radio-group-description-color:var(--t-text-color-secondary);
2073
+ --tds-radio-group-description-invalid-icon-display:none;
2074
+ display:flex;
2075
+ flex-direction:column;
2076
+ gap:0;
2077
+ padding:0;
2078
+ margin:0;
2079
+
2080
+ font-size:var(--tds-radio-group-font-size);
2081
+ line-height:var(--tds-radio-group-line-height);
2082
+ border:0;
2083
+ }
2286
2084
 
2287
- .tds-radio:has(input:checked){
2288
- --tds-radio-input-background-color:var(--t-icon-color-inverted);
2289
- --tds-radio-input-border-color:var(--t-border-color-control-info);
2290
- --tds-radio-input-border-width:4px;
2085
+ .tds-radio-group legend{
2086
+ float:left;
2087
+ padding:0;
2088
+ margin:0;
2291
2089
  }
2292
2090
 
2293
- .tds-radio:has(input:checked) input:hover:not(:disabled){
2294
- --tds-radio-input-background-color:var(--t-icon-color-inverted);
2295
- --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
2296
- }
2297
-
2298
- .tds-radio:has(input:user-invalid){
2299
- --tds-radio-input-border-color:var(--t-form-border-color-error);
2091
+ .tds-radio-group[aria-invalid="true"]{
2092
+ --tds-radio-group-description-color:var(--t-text-color-status-error);
2093
+ --tds-radio-group-description-invalid-icon-display:inline-block;
2300
2094
  }
2301
2095
 
2302
- .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
2303
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
2304
- --tds-radio-input-background-color:var(--t-form-background-color-error);
2096
+ .tds-radio-group[aria-invalid="true"] .tds-radio{
2097
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
2305
2098
  }
2306
2099
 
2307
- .tds-radio:has(input:disabled){
2308
- --tds-radio-input-background-color:var(--t-form-background-color-disabled);
2309
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
2100
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
2101
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
2102
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
2103
+ }
2310
2104
 
2311
- --tds-radio-label-color:var(--t-form-color-disabled);
2312
- --tds-radio-description-color:var(--t-form-color-disabled);
2313
- --tds-radio-cursor:not-allowed;
2314
- }
2105
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
2106
+ --tds-radio-input-background-color:var(--t-icon-color-inverted);
2107
+ }
2315
2108
 
2316
- .tds-radio:has(input:disabled) input:checked{
2317
- --tds-radio-input-background-color:var(--t-form-background-color);
2318
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
2109
+ .tds-radio-group:has(input:required) legend::after{
2110
+ margin-left:.25ch;
2111
+ color:var(--t-text-color-status-error);
2112
+ content:"*";
2319
2113
  }
2320
2114
 
2321
- .tds-radio-description{
2115
+ .tds-radio-group-fields{
2116
+ display:flex;
2117
+ flex-direction:column;
2118
+ gap:var(--tds-radio-group-gap);
2119
+ align-items:flex-start;
2120
+ margin-top:var(--t-spacing-1);
2121
+ }
2122
+
2123
+ .tds-radio-group-description{
2322
2124
  display:flex;
2323
- grid-area:2 / 2;
2324
2125
  gap:var(--t-spacing-half);
2325
2126
  align-items:flex-start;
2326
- padding-inline-start:var(--t-spacing-1);
2327
- margin:0;
2328
- font-size:var(--tds-radio-description-font-size);
2329
- line-height:var(--tds-radio-description-line-height);
2330
- color:var(--tds-radio-description-color);
2127
+ margin:var(--t-spacing-fourth) 0 0;
2128
+ font-size:var(--tds-radio-group-description-font-size);
2129
+ line-height:var(--tds-radio-group-description-line-height);
2130
+ color:var(--tds-radio-group-description-color);
2331
2131
  cursor:text;
2332
2132
  }
2333
2133
 
2334
- .tds-radio--sm{
2335
- --tds-radio-line-height:1.35;
2336
- --tds-radio-input-size:var(--t-element-size-sm);
2337
- --tds-radio-font-size:var(--t-font-size-sm);
2338
- --tds-radio-description-font-size:var(--t-font-size-xs);
2339
- --tds-radio-description-line-height:1.3;
2134
+ .tds-radio-group-description .tds-radio-group-description-invalid-icon{
2135
+ display:var(--tds-radio-group-description-invalid-icon-display);
2136
+ flex-shrink:0;
2137
+ margin-top:calc(.5lh - .5em);
2138
+ line-height:var(--tds-radio-group-description-line-height);
2139
+ }
2140
+
2141
+ .tds-radio-group--sm{
2142
+ --tds-radio-group-line-height:1.35;
2143
+ --tds-radio-group-font-size:var(--t-font-size-sm);
2144
+ --tds-radio-group-description-font-size:var(--t-font-size-xs);
2145
+ --tds-radio-group-description-line-height:1.3;
2340
2146
  }
2341
2147
 
2342
2148
  .tds-toggle-switch{
@@ -2479,89 +2285,143 @@ a.tds-dropdown-item:is(:hover, :active){
2479
2285
  --tds-toggle-switch-display:inline-flex;
2480
2286
  }
2481
2287
 
2482
- .tds-radio-group{
2483
- --tds-radio-group-font-size:var(--t-font-size-md);
2484
- --tds-radio-group-line-height:1.4;
2485
- --tds-radio-group-gap:var(--t-spacing-1);
2288
+ .tds-input{
2289
+ --tds-input-border-color:var(--t-form-border-color);
2290
+ --tds-input-border-color-hover:var(--t-form-border-color-hover);
2291
+ --tds-input-background-color:var(--t-form-background-color);
2292
+ --tds-input-color:var(--t-form-color);
2293
+ --tds-input-font-size:var(--t-font-size-md);
2294
+ --tds-input-description-color:var(--t-text-color-secondary);
2295
+ --tds-input-description-invalid-icon-display:none;
2296
+ --tds-input-min-height:var(--t-container-size-md);
2297
+ --tds-input-padding-inline:var(--t-spacing-1);
2298
+
2299
+ --tds-input-transition-property:background-color, border-color, outline-color, outline-offset;
2486
2300
 
2487
- --tds-radio-group-description-font-size:var(--t-font-size-sm);
2488
- --tds-radio-group-description-line-height:1.35;
2489
- --tds-radio-group-description-color:var(--t-text-color-secondary);
2490
- --tds-radio-group-description-invalid-icon-display:none;
2491
2301
  display:flex;
2492
2302
  flex-direction:column;
2493
- gap:0;
2494
- padding:0;
2495
- margin:0;
2496
-
2497
- font-size:var(--tds-radio-group-font-size);
2498
- line-height:var(--tds-radio-group-line-height);
2499
- border:0;
2303
+ gap:var(--t-spacing-half);
2500
2304
  }
2501
2305
 
2502
- .tds-radio-group legend{
2503
- float:left;
2504
- padding:0;
2505
- margin:0;
2306
+ .tds-input label{
2307
+ font-size:var(--t-font-size-md);
2308
+ font-weight:var(--t-font-weight-normal);
2309
+ color:var(--t-text-color);
2506
2310
  }
2507
2311
 
2508
- .tds-radio-group[aria-invalid="true"]{
2509
- --tds-radio-group-description-color:var(--t-text-color-status-error);
2510
- --tds-radio-group-description-invalid-icon-display:inline-block;
2312
+ .tds-input :is(input,textarea){
2313
+ inline-size:100%;
2314
+ block-size:auto;
2315
+ min-block-size:var(--tds-input-min-height);
2316
+ padding-block:var(--tds-input-padding-block);
2317
+ padding-inline:var(--tds-input-padding-inline);
2318
+ font-family:inherit;
2319
+ font-size:var(--tds-input-font-size);
2320
+ color:var(--tds-input-color);
2321
+ -webkit-appearance:none;
2322
+ -moz-appearance:none;
2323
+ appearance:none;
2324
+ outline:var(--t-focus-ring-width) solid transparent;
2325
+ outline-color:rgb(from var(--t-focus-ring-color) r g b / 0);
2326
+ outline-offset:0;
2327
+ background-color:var(--tds-input-background-color);
2328
+ border:var(--t-form-border-width) solid var(--tds-input-border-color);
2329
+ border-radius:var(--t-form-border-radius);
2330
+ transition-timing-function:var(--t-ease-in-out);
2331
+ transition-duration:var(--t-duration-200);
2332
+ transition-property:var(--tds-input-transition-property);
2511
2333
  }
2512
2334
 
2513
- .tds-radio-group[aria-invalid="true"] .tds-radio{
2514
- --tds-radio-input-border-color:var(--t-form-border-color-error);
2335
+ :is(.tds-input :is(input,textarea)):hover:not(:disabled,:focus-visible,[readonly]){
2336
+ border-color:var(--tds-input-border-color-hover);
2515
2337
  }
2516
2338
 
2517
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
2518
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
2519
- --tds-radio-input-background-color:var(--t-form-background-color-error);
2520
- }
2339
+ :is(.tds-input :is(input,textarea)):focus{
2340
+ outline-color:rgb(from var(--t-focus-ring-color) r g b / 0);
2341
+ }
2521
2342
 
2522
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
2523
- --tds-radio-input-background-color:var(--t-icon-color-inverted);
2524
- }
2343
+ :is(.tds-input :is(input,textarea)):focus-visible{
2344
+ outline-color:var(--t-focus-ring-color);
2345
+ outline-offset:var(--t-focus-ring-offset);
2346
+ border-color:var(--t-form-border-color-focus);
2347
+ }
2525
2348
 
2526
- .tds-radio-group:has(input:required) legend::after{
2349
+ :is(.tds-input :is(input,textarea))::-moz-placeholder{
2350
+ color:var(--t-form-placeholder-color);
2351
+ -moz-user-select:none;
2352
+ user-select:none;
2353
+ }
2354
+
2355
+ :is(.tds-input :is(input,textarea))::placeholder{
2356
+ color:var(--t-form-placeholder-color);
2357
+ -webkit-user-select:none;
2358
+ -moz-user-select:none;
2359
+ user-select:none;
2360
+ }
2361
+
2362
+ @media (prefers-reduced-motion: reduce){
2363
+
2364
+ .tds-input :is(input,textarea){
2365
+ --tds-input-transition-property:none;
2366
+ }
2367
+ }
2368
+
2369
+ .tds-input.tds-input--invalid,.tds-input:has(:is(input,textarea):is(:user-invalid,[aria-invalid="true"])){
2370
+ --tds-input-background-color:var(--t-form-background-color-error);
2371
+ --tds-input-border-color:var(--t-form-border-color-error);
2372
+ --tds-input-border-color-hover:var(--t-form-border-color-error-hover);
2373
+ --tds-input-description-color:var(--t-text-color-status-error);
2374
+ --tds-input-description-invalid-icon-display:inline-block;
2375
+ }
2376
+
2377
+ .tds-input:has(:is(input,textarea):required) label::after{
2527
2378
  margin-left:.25ch;
2528
2379
  color:var(--t-text-color-status-error);
2529
2380
  content:"*";
2530
2381
  }
2531
2382
 
2532
- .tds-radio-group-fields{
2533
- display:flex;
2534
- flex-direction:column;
2535
- gap:var(--tds-radio-group-gap);
2536
- align-items:flex-start;
2537
- margin-top:var(--t-spacing-1);
2538
- }
2383
+ .tds-input:where(:has(:is(input,textarea):disabled)){
2384
+ --tds-input-border-color:var(--t-form-border-color-disabled);
2385
+ --tds-input-background-color:var(--t-form-background-color-disabled);
2386
+ --tds-input-color:var(--t-form-color-disabled);
2387
+ }
2539
2388
 
2540
- .tds-radio-group-description{
2389
+ .tds-input:where(:has(:is(input,textarea):disabled)) :is(input,textarea){
2390
+ cursor:not-allowed;
2391
+ }
2392
+
2393
+ .tds-input:where(:has(:is(input,textarea)[readonly])){
2394
+ --tds-input-border-color:var(--t-form-border-color-readonly);
2395
+ --tds-input-background-color:var(--t-form-background-color-readonly);
2396
+ }
2397
+
2398
+ .tds-input:where(:has(:is(input,textarea)[readonly])) :is(input,textarea):focus{
2399
+ border-color:var(--tds-input-border-color-hover);
2400
+ }
2401
+
2402
+ .tds-input.tds-input--lg{
2403
+ --tds-input-min-height:var(--t-container-size-lg);
2404
+ --tds-input-font-size:var(--t-font-size-lg);
2405
+ }
2406
+
2407
+ .tds-input-description{
2541
2408
  display:flex;
2542
2409
  gap:var(--t-spacing-half);
2543
2410
  align-items:flex-start;
2544
- margin:var(--t-spacing-fourth) 0 0;
2545
- font-size:var(--tds-radio-group-description-font-size);
2546
- line-height:var(--tds-radio-group-description-line-height);
2547
- color:var(--tds-radio-group-description-color);
2411
+ margin:0;
2412
+ font-size:var(--t-font-size-sm);
2413
+ line-height:1.35;
2414
+ color:var(--tds-input-description-color, var(--t-text-color-secondary));
2548
2415
  cursor:text;
2549
2416
  }
2550
2417
 
2551
- .tds-radio-group-description .tds-radio-group-description-invalid-icon{
2552
- display:var(--tds-radio-group-description-invalid-icon-display);
2418
+ .tds-input-description .tds-input-description-invalid-icon{
2419
+ display:var(--tds-input-description-invalid-icon-display, none);
2553
2420
  flex-shrink:0;
2554
- margin-top:calc(.5lh - .5em);
2555
- line-height:var(--tds-radio-group-description-line-height);
2421
+ margin-block-start:calc(.5lh - .5em);
2422
+ line-height:1.35;
2556
2423
  }
2557
2424
 
2558
- .tds-radio-group--sm{
2559
- --tds-radio-group-line-height:1.35;
2560
- --tds-radio-group-font-size:var(--t-font-size-sm);
2561
- --tds-radio-group-description-font-size:var(--t-font-size-xs);
2562
- --tds-radio-group-description-line-height:1.3;
2563
- }
2564
-
2565
2425
  .tds-loading-spinner{
2566
2426
  position:absolute;
2567
2427
  right:0;
@@ -2589,142 +2449,282 @@ a.tds-dropdown-item:is(:hover, :active){
2589
2449
  }
2590
2450
  }
2591
2451
 
2592
- .tds-input{
2593
- --tds-input-border-color:var(--t-form-border-color);
2594
- --tds-input-border-color-hover:var(--t-form-border-color-hover);
2595
- --tds-input-background-color:var(--t-form-background-color);
2596
- --tds-input-color:var(--t-form-color);
2597
- --tds-input-font-size:var(--t-font-size-md);
2598
- --tds-input-description-color:var(--t-text-color-secondary);
2599
- --tds-input-description-invalid-icon-display:none;
2600
- --tds-input-min-height:var(--t-container-size-md);
2601
- --tds-input-padding-inline:var(--t-spacing-1);
2452
+ @layer t-critical{
2453
+ tds-page-header:not(.hydrated){
2454
+ display:none;
2455
+ }
2456
+ }
2602
2457
 
2603
- --tds-input-transition-property:background-color, border-color, outline-color, outline-offset;
2458
+ @layer t-component{
2459
+ .tds-page-header{
2460
+ --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
2461
+ --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
2462
+ --tds-page-header-color:var(--t-text-color);
2463
+ --tds-page-header-bottom-border-color:transparent;
2464
+ --tds-page-header-headline-color:var(--t-text-color-headline);
2465
+ --tds-page-header-headline-font-size:var(--t-font-size-2xl);
2466
+ --tds-page-header-padding-x:var(--t-spacing-2);
2467
+ --tds-page-header-padding-y:var(--t-spacing-2);
2468
+ --tds-page-header-nav-padding-x:var(--tds-page-header-padding-x, var(--t-spacing-3));
2469
+ --tds-page-header-nav-gap:var(--t-spacing-1);
2470
+ --tds-page-header-nav-background:linear-gradient(180deg, var(--tds-page-header-nav-background-start, rgba(0, 0, 0, 0)) 0%, var(--tds-page-header-nav-background-end, rgba(0, 0, 0, .1)) 100%);
2471
+ --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
2472
+ --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
2473
+ --tds-page-header-nav-item-color:var(--t-text-color-secondary);
2474
+ --tds-page-header-nav-item-background-color:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 35%);
2475
+ --tds-page-header-nav-item-border-width:1px;
2476
+
2477
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
2478
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color);
2479
+
2480
+ --tds-page-header-nav-item-color-hover:var(--t-text-color);
2481
+ --tds-page-header-nav-item-background-color-hover:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 20%);
2482
+ --tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
2483
+
2484
+ --tds-page-header-nav-item-background-color-active:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 10%);
2485
+ --tds-page-header-nav-item-border-color-active:var(--tds-page-header-nav-item-background-color-active);
2486
+
2487
+ --tds-page-header-nav-item-color-disabled:var(--t-text-color-disabled);
2488
+ --tds-page-header-nav-item-background-color-disabled:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 50%);
2489
+ --tds-page-header-nav-item-border-color-disabled:var(--tds-page-header-nav-item-background-color-disabled);
2490
+
2491
+ --tds-page-header-nav-item-color-selected:var(--t-text-color);
2492
+ --tds-page-header-nav-item-background-color-selected:var(--t-surface-color-canvas);
2493
+ --tds-page-header-nav-item-border-color-selected:var(--tds-page-header-nav-item-background-color-selected);
2494
+ --tds-page-header-nav-item-border-bottom-color-selected:var(--tds-page-header-nav-item-background-color-selected);
2495
+ --tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning);
2496
+ }
2497
+
2498
+ .tds-page-header--profile{
2499
+ --tds-page-header-padding-y:20px;
2500
+ }
2501
+
2502
+ @supports (color: light-dark(#fff, #000)){
2503
+ .tds-page-header{
2504
+ --tds-page-header-nav-background-start:light-dark(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0));
2505
+ --tds-page-header-nav-background-end:light-dark(rgba(0, 0, 0, .05), rgba(255, 255, 255, .1));
2506
+ }
2507
+ }
2508
+
2509
+ @media (min-width: 600px){
2510
+ .tds-page-header{
2511
+ --tds-page-header-background-color:var(--t-surface-color-canvas);
2512
+ --tds-page-header-color:var(--t-text-color-secondary);
2513
+ --tds-page-header-bottom-border-color:var(--t-border-color);
2514
+ --tds-page-header-padding-x:var(--t-spacing-3);
2515
+ --tds-page-header-headline-font-size:var(--t-font-size-3xl);
2516
+ --tds-page-header-nav-gap:var(--t-spacing-half);
2517
+ --tds-page-header-nav-background:transparent;
2518
+ --tds-page-header-nav-item-padding-x:var(--t-spacing-2);
2519
+ --tds-page-header-nav-item-border-width:1px;
2520
+ --tds-page-header-nav-item-color:var(--t-text-color);
2521
+ --tds-page-header-nav-item-background-color:var(--t-fill-color-neutral-070);
2522
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-bottom-border-color);
2523
+ --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-060);
2524
+ --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-050);
2525
+ --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
2526
+ --tds-page-header-nav-item-border-color-selected:var(--t-border-color);
2527
+ }
2528
+ }
2529
+ }
2604
2530
 
2531
+ .tds-page-header{
2605
2532
  display:flex;
2606
2533
  flex-direction:column;
2607
- gap:var(--t-spacing-half);
2534
+ padding-top:var(--tds-page-header-padding-y);
2535
+ color:var(--tds-page-header-color);
2536
+ background:var(--tds-page-header-background-color);
2537
+ border-bottom:1px solid var(--tds-page-header-bottom-border-color);
2608
2538
  }
2609
2539
 
2610
- .tds-input label{
2611
- font-size:var(--t-font-size-md);
2612
- font-weight:var(--t-font-weight-normal);
2613
- color:var(--t-text-color);
2540
+ .tds-page-header:not(.has-nav){
2541
+ padding-bottom:var(--tds-page-header-padding-y);
2614
2542
  }
2615
2543
 
2616
- .tds-input :is(input,textarea){
2617
- inline-size:100%;
2618
- block-size:auto;
2619
- min-block-size:var(--tds-input-min-height);
2620
- padding-block:var(--tds-input-padding-block);
2621
- padding-inline:var(--tds-input-padding-inline);
2622
- font-family:inherit;
2623
- font-size:var(--tds-input-font-size);
2624
- color:var(--tds-input-color);
2625
- -webkit-appearance:none;
2626
- -moz-appearance:none;
2627
- appearance:none;
2628
- outline:var(--t-focus-ring-width) solid transparent;
2629
- outline-color:rgb(from var(--t-focus-ring-color) r g b / 0);
2630
- outline-offset:0;
2631
- background-color:var(--tds-input-background-color);
2632
- border:var(--t-form-border-width) solid var(--tds-input-border-color);
2633
- border-radius:var(--t-form-border-radius);
2634
- transition-timing-function:var(--t-ease-in-out);
2635
- transition-duration:var(--t-duration-200);
2636
- transition-property:var(--tds-input-transition-property);
2544
+ .tds-page-header.inactive{
2545
+ background:var(--tds-page-header-background-color-inactive);
2637
2546
  }
2638
2547
 
2639
- :is(.tds-input :is(input,textarea)):hover:not(:disabled,:focus-visible,[readonly]){
2640
- border-color:var(--tds-input-border-color-hover);
2641
- }
2548
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
2549
+ width:100%;
2550
+ }
2642
2551
 
2643
- :is(.tds-input :is(input,textarea)):focus{
2644
- outline-color:rgb(from var(--t-focus-ring-color) r g b / 0);
2645
- }
2552
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
2553
+ display:flex;
2554
+ flex-flow:row wrap;
2555
+ gap:var(--t-spacing-half) var(--t-spacing-1);
2556
+ align-items:flex-start;
2557
+ justify-content:flex-start;
2558
+ min-width:0;
2559
+ }
2646
2560
 
2647
- :is(.tds-input :is(input,textarea)):focus-visible{
2648
- outline-color:var(--t-focus-ring-color);
2649
- outline-offset:var(--t-focus-ring-offset);
2650
- border-color:var(--t-form-border-color-focus);
2561
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)):not(:has(ul)),:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) ul{
2562
+ display:flex;
2563
+ gap:var(--tds-page-header-nav-gap);
2564
+ padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
2565
+ margin:0 0 -1px;
2566
+ overflow:auto;
2567
+ list-style:none;
2568
+ background:var(--tds-page-header-nav-background);
2651
2569
  }
2652
2570
 
2653
- :is(.tds-input :is(input,textarea))::-moz-placeholder{
2654
- color:var(--t-form-placeholder-color);
2655
- -moz-user-select:none;
2656
- user-select:none;
2571
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button){
2572
+ position:relative;
2573
+ display:inline-flex;
2574
+ padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
2575
+ font-size:var(--t-font-size-sm);
2576
+ line-height:22px;
2577
+ color:var(--tds-page-header-nav-item-color);
2578
+ white-space:nowrap;
2579
+ text-decoration:none;
2580
+ -webkit-appearance:none;
2581
+ -moz-appearance:none;
2582
+ appearance:none;
2583
+ cursor:pointer;
2584
+ outline-offset:-2px;
2585
+ background-color:var(--tds-page-header-nav-item-background-color);
2586
+ background-clip:padding-box;
2587
+ border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
2588
+ border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
2589
+ border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
2657
2590
  }
2658
2591
 
2659
- :is(.tds-input :is(input,textarea))::placeholder{
2660
- color:var(--t-form-placeholder-color);
2661
- -webkit-user-select:none;
2662
- -moz-user-select:none;
2663
- user-select:none;
2664
- }
2592
+ .selected:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)){
2593
+ --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-selected);
2594
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-selected);
2595
+ --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-selected);
2596
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-selected);
2597
+ }
2665
2598
 
2666
- @media (prefers-reduced-motion: reduce){
2599
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):hover{
2600
+ --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
2601
+ --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
2602
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
2603
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-hover);
2604
+ }
2667
2605
 
2668
- .tds-input :is(input,textarea){
2669
- --tds-input-transition-property:none;
2670
- }
2606
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):active{
2607
+ background-color:var(--tds-page-header-nav-item-background-color-active);
2608
+ border-color:var(--tds-page-header-nav-item-border-color-active);
2609
+ border-bottom-color:var(--tds-page-header-nav-item-background-color-active);
2610
+ }
2611
+
2612
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):disabled{
2613
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-disabled);
2614
+ color:var(--tds-page-header-nav-item-color-disabled);
2615
+ cursor:not-allowed;
2616
+ background-color:var(--tds-page-header-nav-item-background-color-disabled);
2617
+ opacity:1;
2618
+ }
2619
+
2620
+ @media (min-width: 600px){
2621
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected)::after{
2622
+ position:absolute;
2623
+ inset:auto -1px -1px;
2624
+ height:1px;
2625
+ pointer-events:none;
2626
+ content:"";
2627
+ background-color:var(--tds-page-header-bottom-border-color);
2628
+ }
2629
+ }
2630
+
2631
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
2632
+ position:relative;
2671
2633
  }
2672
2634
 
2673
- .tds-input.tds-input--invalid,.tds-input:has(:is(input,textarea):is(:user-invalid,[aria-invalid="true"])){
2674
- --tds-input-background-color:var(--t-form-background-color-error);
2675
- --tds-input-border-color:var(--t-form-border-color-error);
2676
- --tds-input-border-color-hover:var(--t-form-border-color-error-hover);
2677
- --tds-input-description-color:var(--t-text-color-status-error);
2678
- --tds-input-description-invalid-icon-display:inline-block;
2635
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator)) :is(a,button){
2636
+ -webkit-mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
2637
+ mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
2638
+ }
2639
+
2640
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::before,:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
2641
+ position:absolute;
2642
+ top:-5px;
2643
+ right:-2px;
2644
+ width:10px;
2645
+ height:10px;
2646
+ content:"";
2647
+ background:var(--tds-page-header-nav-item-indicator-color);
2648
+ border-radius:50%;
2649
+ }
2650
+
2651
+ @media (prefers-reduced-motion: no-preference){
2652
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
2653
+ animation:indicator-pulse 1.25s ease infinite;
2654
+ }
2655
+ }
2656
+
2657
+ .tds-page-header__title-bar{
2658
+ display:flex;
2659
+ flex-direction:column;
2660
+ gap:var(--t-spacing-2) var(--t-spacing-1);
2661
+ align-items:flex-start;
2662
+ justify-content:space-between;
2663
+ padding:0 var(--tds-page-header-padding-x);
2664
+ }
2665
+
2666
+ .tds-page-header--profile > .tds-page-header__title-bar{
2667
+ align-items:center;
2679
2668
  }
2680
2669
 
2681
- .tds-input:has(:is(input,textarea):required) label::after{
2682
- margin-left:.25ch;
2683
- color:var(--t-text-color-status-error);
2684
- content:"*";
2685
- }
2670
+ .tds-page-header__primary{
2671
+ width:100%;
2672
+ }
2686
2673
 
2687
- .tds-input:where(:has(:is(input,textarea):disabled)){
2688
- --tds-input-border-color:var(--t-form-border-color-disabled);
2689
- --tds-input-background-color:var(--t-form-background-color-disabled);
2690
- --tds-input-color:var(--t-form-color-disabled);
2674
+ .tds-page-header__primary h1{
2675
+ margin:0;
2676
+ font-size:var(--tds-page-header-headline-font-size);
2677
+ font-weight:var(--t-font-weight-normal);
2678
+ line-height:32px;
2679
+ color:var(--tds-page-header-headline-color);
2680
+ overflow-wrap:break-word;
2691
2681
  }
2692
2682
 
2693
- .tds-input:where(:has(:is(input,textarea):disabled)) :is(input,textarea){
2694
- cursor:not-allowed;
2695
- }
2696
-
2697
- .tds-input:where(:has(:is(input,textarea)[readonly])){
2698
- --tds-input-border-color:var(--t-form-border-color-readonly);
2699
- --tds-input-background-color:var(--t-form-background-color-readonly);
2683
+ @media (min-width: 960px){
2684
+ .tds-page-header__primary{
2685
+ flex:1 1 max-content;
2686
+ width:auto;
2687
+ min-width:0;
2688
+ max-width:100%;
2700
2689
  }
2701
2690
 
2702
- .tds-input:where(:has(:is(input,textarea)[readonly])) :is(input,textarea):focus{
2703
- border-color:var(--tds-input-border-color-hover);
2691
+ .tds-page-header__title-bar,
2692
+ .tds-page-header--profile .tds-page-header__title-bar{
2693
+ flex-flow:row nowrap;
2694
+ row-gap:12px;
2695
+ align-items:flex-start;
2696
+ }
2697
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
2698
+ width:auto;
2704
2699
  }
2705
2700
 
2706
- .tds-input.tds-input--lg{
2707
- --tds-input-min-height:var(--t-container-size-lg);
2708
- --tds-input-font-size:var(--t-font-size-lg);
2709
- }
2701
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
2702
+ justify-content:flex-end;
2703
+ }
2704
+ }
2710
2705
 
2711
- .tds-input-description{
2712
- display:flex;
2713
- gap:var(--t-spacing-half);
2714
- align-items:flex-start;
2715
- margin:0;
2716
- font-size:var(--t-font-size-sm);
2717
- line-height:1.35;
2718
- color:var(--tds-input-description-color, var(--t-text-color-secondary));
2719
- cursor:text;
2706
+ .tds-page-header-phone,
2707
+ .tds-page-header-email{
2708
+ color:var(--tds-page-header-color);
2709
+ white-space:nowrap;
2710
+ }
2711
+ .tds-page-header-email{
2712
+ max-width:100%;
2713
+ overflow:hidden;
2714
+ text-overflow:ellipsis;
2720
2715
  }
2721
2716
 
2722
- .tds-input-description .tds-input-description-invalid-icon{
2723
- display:var(--tds-input-description-invalid-icon-display, none);
2724
- flex-shrink:0;
2725
- margin-block-start:calc(.5lh - .5em);
2726
- line-height:1.35;
2717
+ @keyframes indicator-pulse{
2718
+ 0%{
2719
+ opacity:.3;
2720
+ transform:scale(.9);
2721
+ }
2722
+
2723
+ 100%{
2724
+ opacity:0;
2725
+ transform:scale(1.75);
2727
2726
  }
2727
+ }
2728
2728
 
2729
2729
  @layer t-critical, t-component;
2730
2730
 
@@ -4215,98 +4215,227 @@ a.tds-dropdown-item:is(:hover, :active){
4215
4215
  [data-flex-align-self-xl="end"]{ align-self:end; }
4216
4216
  [data-flex-align-self-xl="baseline"]{ align-self:baseline; }
4217
4217
 
4218
- [data-flex-justify-xl="start"]{ justify-content:start; }
4219
- [data-flex-justify-xl="center"]{ justify-content:center; }
4220
- [data-flex-justify-xl="end"]{ justify-content:end; }
4221
- [data-flex-justify-xl="space-between"]{ justify-content:space-between; }
4222
- [data-flex-justify-xl="space-around"]{ justify-content:space-around; }
4223
- [data-flex-justify-xl="space-evenly"]{ justify-content:space-evenly; }
4218
+ [data-flex-justify-xl="start"]{ justify-content:start; }
4219
+ [data-flex-justify-xl="center"]{ justify-content:center; }
4220
+ [data-flex-justify-xl="end"]{ justify-content:end; }
4221
+ [data-flex-justify-xl="space-between"]{ justify-content:space-between; }
4222
+ [data-flex-justify-xl="space-around"]{ justify-content:space-around; }
4223
+ [data-flex-justify-xl="space-evenly"]{ justify-content:space-evenly; }
4224
+
4225
+ [data-flex-wrap-xl="nowrap"]{ flex-wrap:nowrap; }
4226
+ [data-flex-wrap-xl="wrap"]{ flex-wrap:wrap; }
4227
+ [data-flex-wrap-xl="wrap-reverse"]{ flex-wrap:wrap-reverse; }
4228
+
4229
+ [data-flex-grow-xl="0"]{ flex-grow:0; }
4230
+ [data-flex-grow-xl="1"]{ flex-grow:1; }
4231
+
4232
+ [data-flex-shrink-xl="0"]{ flex-shrink:0; }
4233
+ [data-flex-shrink-xl="1"]{ flex-shrink:1; }
4234
+
4235
+ [data-flex-gap-xl="0"]{ gap:0; }
4236
+ [data-flex-gap-xl="0.25"]{ gap:var(--t-spacing-fourth); }
4237
+ [data-flex-gap-xl="0.5"]{ gap:var(--t-spacing-half); }
4238
+ [data-flex-gap-xl="1"]{ gap:var(--t-spacing-1); }
4239
+ [data-flex-gap-xl="1.5"]{ gap:var(--t-spacing-1-half); }
4240
+ [data-flex-gap-xl="2"]{ gap:var(--t-spacing-2); }
4241
+ [data-flex-gap-xl="3"]{ gap:var(--t-spacing-3); }
4242
+ [data-flex-gap-xl="4"]{ gap:var(--t-spacing-4); }
4243
+ [data-flex-gap-xl="5"]{ gap:var(--t-spacing-5); }
4244
+ [data-flex-gap-xl="6"]{ gap:var(--t-spacing-6); }
4245
+ [data-flex-gap-xl="7"]{ gap:var(--t-spacing-7); }
4246
+
4247
+ [data-flex-row-gap-xl="0"]{ row-gap:0; }
4248
+ [data-flex-row-gap-xl="0.25"]{ row-gap:var(--t-spacing-fourth); }
4249
+ [data-flex-row-gap-xl="0.5"]{ row-gap:var(--t-spacing-half); }
4250
+ [data-flex-row-gap-xl="1"]{ row-gap:var(--t-spacing-1); }
4251
+ [data-flex-row-gap-xl="1.5"]{ row-gap:var(--t-spacing-1-half); }
4252
+ [data-flex-row-gap-xl="2"]{ row-gap:var(--t-spacing-2); }
4253
+ [data-flex-row-gap-xl="3"]{ row-gap:var(--t-spacing-3); }
4254
+ [data-flex-row-gap-xl="4"]{ row-gap:var(--t-spacing-4); }
4255
+ [data-flex-row-gap-xl="5"]{ row-gap:var(--t-spacing-5); }
4256
+ [data-flex-row-gap-xl="6"]{ row-gap:var(--t-spacing-6); }
4257
+ [data-flex-row-gap-xl="7"]{ row-gap:var(--t-spacing-7); }
4258
+
4259
+ [data-flex-column-gap-xl="0"]{ -moz-column-gap:0; column-gap:0; }
4260
+ [data-flex-column-gap-xl="0.25"]{ -moz-column-gap:var(--t-spacing-fourth); column-gap:var(--t-spacing-fourth); }
4261
+ [data-flex-column-gap-xl="0.5"]{ -moz-column-gap:var(--t-spacing-half); column-gap:var(--t-spacing-half); }
4262
+ [data-flex-column-gap-xl="1"]{ -moz-column-gap:var(--t-spacing-1); column-gap:var(--t-spacing-1); }
4263
+ [data-flex-column-gap-xl="1.5"]{ -moz-column-gap:var(--t-spacing-1-half); column-gap:var(--t-spacing-1-half); }
4264
+ [data-flex-column-gap-xl="2"]{ -moz-column-gap:var(--t-spacing-2); column-gap:var(--t-spacing-2); }
4265
+ [data-flex-column-gap-xl="3"]{ -moz-column-gap:var(--t-spacing-3); column-gap:var(--t-spacing-3); }
4266
+ [data-flex-column-gap-xl="4"]{ -moz-column-gap:var(--t-spacing-4); column-gap:var(--t-spacing-4); }
4267
+ [data-flex-column-gap-xl="5"]{ -moz-column-gap:var(--t-spacing-5); column-gap:var(--t-spacing-5); }
4268
+ [data-flex-column-gap-xl="6"]{ -moz-column-gap:var(--t-spacing-6); column-gap:var(--t-spacing-6); }
4269
+ [data-flex-column-gap-xl="7"]{ -moz-column-gap:var(--t-spacing-7); column-gap:var(--t-spacing-7); }
4270
+
4271
+ [data-flex-basis-xl="auto"]{ flex-basis:auto; }
4272
+ [data-flex-basis-xl="0"]{ flex-basis:0; }
4273
+ [data-flex-basis-xl="100%"]{ flex-basis:100%; }
4274
+
4275
+ [data-padding-xl="0"]{ padding:0; }
4276
+ [data-padding-xl="0.25"]{ padding:var(--t-spacing-fourth); }
4277
+ [data-padding-xl="0.5"]{ padding:var(--t-spacing-half); }
4278
+ [data-padding-xl="1"]{ padding:var(--t-spacing-1); }
4279
+ [data-padding-xl="1.5"]{ padding:var(--t-spacing-1-half); }
4280
+ [data-padding-xl="2"]{ padding:var(--t-spacing-2); }
4281
+ [data-padding-xl="3"]{ padding:var(--t-spacing-3); }
4282
+ [data-padding-xl="4"]{ padding:var(--t-spacing-4); }
4283
+ [data-padding-xl="5"]{ padding:var(--t-spacing-5); }
4284
+ [data-padding-xl="6"]{ padding:var(--t-spacing-6); }
4285
+ [data-padding-xl="7"]{ padding:var(--t-spacing-7); }
4286
+
4287
+ [data-padding-block-xl="0"]{ padding-block:0; }
4288
+ [data-padding-block-xl="0.25"]{ padding-block:var(--t-spacing-fourth); }
4289
+ [data-padding-block-xl="0.5"]{ padding-block:var(--t-spacing-half); }
4290
+ [data-padding-block-xl="1"]{ padding-block:var(--t-spacing-1); }
4291
+ [data-padding-block-xl="1.5"]{ padding-block:var(--t-spacing-1-half); }
4292
+ [data-padding-block-xl="2"]{ padding-block:var(--t-spacing-2); }
4293
+ [data-padding-block-xl="3"]{ padding-block:var(--t-spacing-3); }
4294
+ [data-padding-block-xl="4"]{ padding-block:var(--t-spacing-4); }
4295
+ [data-padding-block-xl="5"]{ padding-block:var(--t-spacing-5); }
4296
+ [data-padding-block-xl="6"]{ padding-block:var(--t-spacing-6); }
4297
+ [data-padding-block-xl="7"]{ padding-block:var(--t-spacing-7); }
4298
+
4299
+ [data-padding-inline-xl="0"]{ padding-inline:0; }
4300
+ [data-padding-inline-xl="0.25"]{ padding-inline:var(--t-spacing-fourth); }
4301
+ [data-padding-inline-xl="0.5"]{ padding-inline:var(--t-spacing-half); }
4302
+ [data-padding-inline-xl="1"]{ padding-inline:var(--t-spacing-1); }
4303
+ [data-padding-inline-xl="1.5"]{ padding-inline:var(--t-spacing-1-half); }
4304
+ [data-padding-inline-xl="2"]{ padding-inline:var(--t-spacing-2); }
4305
+ [data-padding-inline-xl="3"]{ padding-inline:var(--t-spacing-3); }
4306
+ [data-padding-inline-xl="4"]{ padding-inline:var(--t-spacing-4); }
4307
+ [data-padding-inline-xl="5"]{ padding-inline:var(--t-spacing-5); }
4308
+ [data-padding-inline-xl="6"]{ padding-inline:var(--t-spacing-6); }
4309
+ [data-padding-inline-xl="7"]{ padding-inline:var(--t-spacing-7); }
4310
+ }
4311
+
4312
+ .tds-search-input-control{
4313
+ --tds-search-input-outline-color:rgb(from var(--t-focus-ring-color) r g b / 0);
4314
+ --tds-search-input-outline-offset:0;
4315
+ --tds-search-input-cursor:text;
4316
+
4317
+ display:flex;
4318
+ gap:var(--tds-field-padding-inline);
4319
+ align-items:center;
4320
+ inline-size:100%;
4321
+ min-block-size:var(--tds-field-min-height);
4322
+ padding-inline:var(--tds-field-padding-inline);
4323
+ font-size:var(--tds-field-font-size);
4324
+ color:var(--tds-field-color);
4325
+ cursor:var(--tds-search-input-cursor);
4326
+ outline:var(--t-focus-ring-width) solid transparent;
4327
+ outline-color:var(--tds-search-input-outline-color);
4328
+ outline-offset:var(--tds-search-input-outline-offset);
4329
+ background-color:var(--tds-field-background-color);
4330
+ border:var(--t-form-border-width) solid var(--tds-field-border-color);
4331
+ border-radius:var(--t-form-border-radius);
4332
+ transition-timing-function:var(--t-ease-in-out);
4333
+ transition-duration:var(--t-duration-200);
4334
+ transition-property:background-color, border-color, outline-color, outline-offset;
4335
+ }
4336
+
4337
+ .tds-search-input-control:hover:not(:has(input:focus),:has(:disabled,[readonly])){
4338
+ border-color:var(--tds-field-border-color-hover);
4339
+ }
4340
+
4341
+ .tds-search-input-control:has(input:focus){
4342
+ --tds-search-input-outline-color:var(--t-focus-ring-color);
4343
+ --tds-search-input-outline-offset:var(--t-focus-ring-offset);
4344
+
4345
+ border-color:var(--t-form-border-color-focus);
4346
+ }
4347
+
4348
+ .tds-search-input-control input{
4349
+ flex:1;
4350
+ min-inline-size:0;
4351
+ padding:0;
4352
+ overflow:hidden;
4353
+ text-overflow:ellipsis;
4354
+ font-family:inherit;
4355
+ font-size:inherit;
4356
+ color:inherit;
4357
+ white-space:nowrap;
4358
+ -webkit-appearance:none;
4359
+ -moz-appearance:none;
4360
+ appearance:none;
4361
+ outline:0;
4362
+ background-color:transparent;
4363
+ border:0;
4364
+ }
4365
+
4366
+ :is(.tds-search-input-control input)::-moz-placeholder{
4367
+ color:var(--tds-field-placeholder-color);
4368
+ -moz-user-select:none;
4369
+ user-select:none;
4370
+ }
4371
+
4372
+ :is(.tds-search-input-control input)::placeholder{
4373
+ color:var(--tds-field-placeholder-color);
4374
+ -webkit-user-select:none;
4375
+ -moz-user-select:none;
4376
+ user-select:none;
4377
+ }
4378
+
4379
+ :is(.tds-search-input-control input)::-webkit-search-decoration,:is(.tds-search-input-control input)::-webkit-search-cancel-button,:is(.tds-search-input-control input)::-webkit-search-results-button,:is(.tds-search-input-control input)::-webkit-search-results-decoration{
4380
+ -webkit-appearance:none;
4381
+ appearance:none;
4382
+ }
4383
+
4384
+ .tds-search-input-control .tds-search-input-icon{
4385
+ flex-shrink:0;
4386
+ inline-size:1em;
4387
+ color:var(--t-icon-color-dim);
4388
+ }
4224
4389
 
4225
- [data-flex-wrap-xl="nowrap"]{ flex-wrap:nowrap; }
4226
- [data-flex-wrap-xl="wrap"]{ flex-wrap:wrap; }
4227
- [data-flex-wrap-xl="wrap-reverse"]{ flex-wrap:wrap-reverse; }
4390
+ .tds-search-input-control .tds-search-input-clear-icon{
4391
+ inline-size:calc(var(--tds-field-font-size) * .8);
4392
+ block-size:calc(var(--tds-field-font-size) * .8);
4393
+ }
4228
4394
 
4229
- [data-flex-grow-xl="0"]{ flex-grow:0; }
4230
- [data-flex-grow-xl="1"]{ flex-grow:1; }
4395
+ .tds-search-input-control .tds-btn{
4396
+ --tds-btn-color:var(--t-icon-color-dim);
4397
+ --tds-btn-padding-truncated-x:0;
4398
+ --tds-search-input-clear-button-display:none;
4231
4399
 
4232
- [data-flex-shrink-xl="0"]{ flex-shrink:0; }
4233
- [data-flex-shrink-xl="1"]{ flex-shrink:1; }
4400
+ display:var(--tds-search-input-clear-button-display);
4401
+ flex-shrink:0;
4402
+ }
4234
4403
 
4235
- [data-flex-gap-xl="0"]{ gap:0; }
4236
- [data-flex-gap-xl="0.25"]{ gap:var(--t-spacing-fourth); }
4237
- [data-flex-gap-xl="0.5"]{ gap:var(--t-spacing-half); }
4238
- [data-flex-gap-xl="1"]{ gap:var(--t-spacing-1); }
4239
- [data-flex-gap-xl="1.5"]{ gap:var(--t-spacing-1-half); }
4240
- [data-flex-gap-xl="2"]{ gap:var(--t-spacing-2); }
4241
- [data-flex-gap-xl="3"]{ gap:var(--t-spacing-3); }
4242
- [data-flex-gap-xl="4"]{ gap:var(--t-spacing-4); }
4243
- [data-flex-gap-xl="5"]{ gap:var(--t-spacing-5); }
4244
- [data-flex-gap-xl="6"]{ gap:var(--t-spacing-6); }
4245
- [data-flex-gap-xl="7"]{ gap:var(--t-spacing-7); }
4404
+ .tds-search-input-control:has(input:is(:user-invalid,[aria-invalid="true"])){
4405
+ --tds-field-background-color:var(--t-form-background-color-error);
4406
+ --tds-field-border-color:var(--t-form-border-color-error);
4407
+ --tds-field-border-color-hover:var(--t-form-border-color-error-hover);
4408
+ }
4246
4409
 
4247
- [data-flex-row-gap-xl="0"]{ row-gap:0; }
4248
- [data-flex-row-gap-xl="0.25"]{ row-gap:var(--t-spacing-fourth); }
4249
- [data-flex-row-gap-xl="0.5"]{ row-gap:var(--t-spacing-half); }
4250
- [data-flex-row-gap-xl="1"]{ row-gap:var(--t-spacing-1); }
4251
- [data-flex-row-gap-xl="1.5"]{ row-gap:var(--t-spacing-1-half); }
4252
- [data-flex-row-gap-xl="2"]{ row-gap:var(--t-spacing-2); }
4253
- [data-flex-row-gap-xl="3"]{ row-gap:var(--t-spacing-3); }
4254
- [data-flex-row-gap-xl="4"]{ row-gap:var(--t-spacing-4); }
4255
- [data-flex-row-gap-xl="5"]{ row-gap:var(--t-spacing-5); }
4256
- [data-flex-row-gap-xl="6"]{ row-gap:var(--t-spacing-6); }
4257
- [data-flex-row-gap-xl="7"]{ row-gap:var(--t-spacing-7); }
4410
+ .tds-search-input-control:has(:disabled){
4411
+ --tds-field-border-color:var(--t-form-border-color-disabled);
4412
+ --tds-field-background-color:var(--t-form-background-color-disabled);
4413
+ --tds-field-color:var(--t-form-color-disabled);
4414
+ --tds-search-input-cursor:not-allowed;
4415
+ }
4258
4416
 
4259
- [data-flex-column-gap-xl="0"]{ -moz-column-gap:0; column-gap:0; }
4260
- [data-flex-column-gap-xl="0.25"]{ -moz-column-gap:var(--t-spacing-fourth); column-gap:var(--t-spacing-fourth); }
4261
- [data-flex-column-gap-xl="0.5"]{ -moz-column-gap:var(--t-spacing-half); column-gap:var(--t-spacing-half); }
4262
- [data-flex-column-gap-xl="1"]{ -moz-column-gap:var(--t-spacing-1); column-gap:var(--t-spacing-1); }
4263
- [data-flex-column-gap-xl="1.5"]{ -moz-column-gap:var(--t-spacing-1-half); column-gap:var(--t-spacing-1-half); }
4264
- [data-flex-column-gap-xl="2"]{ -moz-column-gap:var(--t-spacing-2); column-gap:var(--t-spacing-2); }
4265
- [data-flex-column-gap-xl="3"]{ -moz-column-gap:var(--t-spacing-3); column-gap:var(--t-spacing-3); }
4266
- [data-flex-column-gap-xl="4"]{ -moz-column-gap:var(--t-spacing-4); column-gap:var(--t-spacing-4); }
4267
- [data-flex-column-gap-xl="5"]{ -moz-column-gap:var(--t-spacing-5); column-gap:var(--t-spacing-5); }
4268
- [data-flex-column-gap-xl="6"]{ -moz-column-gap:var(--t-spacing-6); column-gap:var(--t-spacing-6); }
4269
- [data-flex-column-gap-xl="7"]{ -moz-column-gap:var(--t-spacing-7); column-gap:var(--t-spacing-7); }
4417
+ .tds-search-input-control:has([readonly]){
4418
+ --tds-field-border-color:var(--t-form-border-color-readonly);
4419
+ --tds-field-border-color-hover:var(--t-form-border-color-readonly);
4420
+ --tds-field-background-color:var(--t-form-background-color-readonly);
4421
+ --tds-field-color:var(--t-form-color-readonly);
4422
+ }
4270
4423
 
4271
- [data-flex-basis-xl="auto"]{ flex-basis:auto; }
4272
- [data-flex-basis-xl="0"]{ flex-basis:0; }
4273
- [data-flex-basis-xl="100%"]{ flex-basis:100%; }
4424
+ .tds-search-input-control:has([readonly]):has(input:focus){
4425
+ border-color:var(--t-form-border-color-hover);
4426
+ }
4274
4427
 
4275
- [data-padding-xl="0"]{ padding:0; }
4276
- [data-padding-xl="0.25"]{ padding:var(--t-spacing-fourth); }
4277
- [data-padding-xl="0.5"]{ padding:var(--t-spacing-half); }
4278
- [data-padding-xl="1"]{ padding:var(--t-spacing-1); }
4279
- [data-padding-xl="1.5"]{ padding:var(--t-spacing-1-half); }
4280
- [data-padding-xl="2"]{ padding:var(--t-spacing-2); }
4281
- [data-padding-xl="3"]{ padding:var(--t-spacing-3); }
4282
- [data-padding-xl="4"]{ padding:var(--t-spacing-4); }
4283
- [data-padding-xl="5"]{ padding:var(--t-spacing-5); }
4284
- [data-padding-xl="6"]{ padding:var(--t-spacing-6); }
4285
- [data-padding-xl="7"]{ padding:var(--t-spacing-7); }
4428
+ @media (prefers-reduced-motion: reduce){
4286
4429
 
4287
- [data-padding-block-xl="0"]{ padding-block:0; }
4288
- [data-padding-block-xl="0.25"]{ padding-block:var(--t-spacing-fourth); }
4289
- [data-padding-block-xl="0.5"]{ padding-block:var(--t-spacing-half); }
4290
- [data-padding-block-xl="1"]{ padding-block:var(--t-spacing-1); }
4291
- [data-padding-block-xl="1.5"]{ padding-block:var(--t-spacing-1-half); }
4292
- [data-padding-block-xl="2"]{ padding-block:var(--t-spacing-2); }
4293
- [data-padding-block-xl="3"]{ padding-block:var(--t-spacing-3); }
4294
- [data-padding-block-xl="4"]{ padding-block:var(--t-spacing-4); }
4295
- [data-padding-block-xl="5"]{ padding-block:var(--t-spacing-5); }
4296
- [data-padding-block-xl="6"]{ padding-block:var(--t-spacing-6); }
4297
- [data-padding-block-xl="7"]{ padding-block:var(--t-spacing-7); }
4430
+ .tds-search-input-control{
4431
+ transition-property:none;
4432
+ }
4433
+ }
4298
4434
 
4299
- [data-padding-inline-xl="0"]{ padding-inline:0; }
4300
- [data-padding-inline-xl="0.25"]{ padding-inline:var(--t-spacing-fourth); }
4301
- [data-padding-inline-xl="0.5"]{ padding-inline:var(--t-spacing-half); }
4302
- [data-padding-inline-xl="1"]{ padding-inline:var(--t-spacing-1); }
4303
- [data-padding-inline-xl="1.5"]{ padding-inline:var(--t-spacing-1-half); }
4304
- [data-padding-inline-xl="2"]{ padding-inline:var(--t-spacing-2); }
4305
- [data-padding-inline-xl="3"]{ padding-inline:var(--t-spacing-3); }
4306
- [data-padding-inline-xl="4"]{ padding-inline:var(--t-spacing-4); }
4307
- [data-padding-inline-xl="5"]{ padding-inline:var(--t-spacing-5); }
4308
- [data-padding-inline-xl="6"]{ padding-inline:var(--t-spacing-6); }
4309
- [data-padding-inline-xl="7"]{ padding-inline:var(--t-spacing-7); }
4435
+ .tds-search-input-control--has-value:is(:hover, :has(input:focus)):not(
4436
+ :has(:disabled, [readonly])
4437
+ ) .tds-btn{
4438
+ --tds-search-input-clear-button-display:flex;
4310
4439
  }
4311
4440
 
4312
4441
  .tds-data-table-wrapper{
@@ -4578,135 +4707,6 @@ a.tds-dropdown-item:is(:hover, :active){
4578
4707
  content:"➖";
4579
4708
  }
4580
4709
 
4581
- .tds-search-input-control{
4582
- --tds-search-input-outline-color:rgb(from var(--t-focus-ring-color) r g b / 0);
4583
- --tds-search-input-outline-offset:0;
4584
- --tds-search-input-cursor:text;
4585
-
4586
- display:flex;
4587
- gap:var(--tds-field-padding-inline);
4588
- align-items:center;
4589
- inline-size:100%;
4590
- min-block-size:var(--tds-field-min-height);
4591
- padding-inline:var(--tds-field-padding-inline);
4592
- font-size:var(--tds-field-font-size);
4593
- color:var(--tds-field-color);
4594
- cursor:var(--tds-search-input-cursor);
4595
- outline:var(--t-focus-ring-width) solid transparent;
4596
- outline-color:var(--tds-search-input-outline-color);
4597
- outline-offset:var(--tds-search-input-outline-offset);
4598
- background-color:var(--tds-field-background-color);
4599
- border:var(--t-form-border-width) solid var(--tds-field-border-color);
4600
- border-radius:var(--t-form-border-radius);
4601
- transition-timing-function:var(--t-ease-in-out);
4602
- transition-duration:var(--t-duration-200);
4603
- transition-property:background-color, border-color, outline-color, outline-offset;
4604
- }
4605
-
4606
- .tds-search-input-control:hover:not(:has(input:focus),:has(:disabled,[readonly])){
4607
- border-color:var(--tds-field-border-color-hover);
4608
- }
4609
-
4610
- .tds-search-input-control:has(input:focus){
4611
- --tds-search-input-outline-color:var(--t-focus-ring-color);
4612
- --tds-search-input-outline-offset:var(--t-focus-ring-offset);
4613
-
4614
- border-color:var(--t-form-border-color-focus);
4615
- }
4616
-
4617
- .tds-search-input-control input{
4618
- flex:1;
4619
- min-inline-size:0;
4620
- padding:0;
4621
- overflow:hidden;
4622
- text-overflow:ellipsis;
4623
- font-family:inherit;
4624
- font-size:inherit;
4625
- color:inherit;
4626
- white-space:nowrap;
4627
- -webkit-appearance:none;
4628
- -moz-appearance:none;
4629
- appearance:none;
4630
- outline:0;
4631
- background-color:transparent;
4632
- border:0;
4633
- }
4634
-
4635
- :is(.tds-search-input-control input)::-moz-placeholder{
4636
- color:var(--tds-field-placeholder-color);
4637
- -moz-user-select:none;
4638
- user-select:none;
4639
- }
4640
-
4641
- :is(.tds-search-input-control input)::placeholder{
4642
- color:var(--tds-field-placeholder-color);
4643
- -webkit-user-select:none;
4644
- -moz-user-select:none;
4645
- user-select:none;
4646
- }
4647
-
4648
- :is(.tds-search-input-control input)::-webkit-search-decoration,:is(.tds-search-input-control input)::-webkit-search-cancel-button,:is(.tds-search-input-control input)::-webkit-search-results-button,:is(.tds-search-input-control input)::-webkit-search-results-decoration{
4649
- -webkit-appearance:none;
4650
- appearance:none;
4651
- }
4652
-
4653
- .tds-search-input-control .tds-search-input-icon{
4654
- flex-shrink:0;
4655
- inline-size:1em;
4656
- color:var(--t-icon-color-dim);
4657
- }
4658
-
4659
- .tds-search-input-control .tds-search-input-clear-icon{
4660
- inline-size:calc(var(--tds-field-font-size) * .8);
4661
- block-size:calc(var(--tds-field-font-size) * .8);
4662
- }
4663
-
4664
- .tds-search-input-control .tds-btn{
4665
- --tds-btn-color:var(--t-icon-color-dim);
4666
- --tds-btn-padding-truncated-x:0;
4667
- --tds-search-input-clear-button-display:none;
4668
-
4669
- display:var(--tds-search-input-clear-button-display);
4670
- flex-shrink:0;
4671
- }
4672
-
4673
- .tds-search-input-control:has(input:is(:user-invalid,[aria-invalid="true"])){
4674
- --tds-field-background-color:var(--t-form-background-color-error);
4675
- --tds-field-border-color:var(--t-form-border-color-error);
4676
- --tds-field-border-color-hover:var(--t-form-border-color-error-hover);
4677
- }
4678
-
4679
- .tds-search-input-control:has(:disabled){
4680
- --tds-field-border-color:var(--t-form-border-color-disabled);
4681
- --tds-field-background-color:var(--t-form-background-color-disabled);
4682
- --tds-field-color:var(--t-form-color-disabled);
4683
- --tds-search-input-cursor:not-allowed;
4684
- }
4685
-
4686
- .tds-search-input-control:has([readonly]){
4687
- --tds-field-border-color:var(--t-form-border-color-readonly);
4688
- --tds-field-border-color-hover:var(--t-form-border-color-readonly);
4689
- --tds-field-background-color:var(--t-form-background-color-readonly);
4690
- --tds-field-color:var(--t-form-color-readonly);
4691
- }
4692
-
4693
- .tds-search-input-control:has([readonly]):has(input:focus){
4694
- border-color:var(--t-form-border-color-hover);
4695
- }
4696
-
4697
- @media (prefers-reduced-motion: reduce){
4698
-
4699
- .tds-search-input-control{
4700
- transition-property:none;
4701
- }
4702
- }
4703
-
4704
- .tds-search-input-control--has-value:is(:hover, :has(input:focus)):not(
4705
- :has(:disabled, [readonly])
4706
- ) .tds-btn{
4707
- --tds-search-input-clear-button-display:flex;
4708
- }
4709
-
4710
4710
  .t-banner{
4711
4711
  --t-banner-font-size:var(--t-font-size-md);
4712
4712
  --t-banner-font-color:var(--t-text-color);