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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/reactRender.css +662 -662
  2. package/dist/reactRender.css.map +1 -1
  3. package/dist/reactRenderLegacy.css +662 -662
  4. package/dist/reactRenderLegacy.css.map +1 -1
  5. package/package.json +2 -2
package/dist/reactRender.css CHANGED
@@ -677,242 +677,324 @@
677
677
  [data-padding-inline-xl="7"]{ padding-inline:var(--t-spacing-7); }
678
678
  }
679
679
 
680
- .tds-button-group{
681
- display:inline-flex;
680
+ @layer t-critical{
681
+ tds-page-header:not(.hydrated){
682
+ display:none;
683
+ }
682
684
  }
683
- .tds-button-group > .tds-btn{
684
- --tds-button-group-item-z-index:1;
685
685
 
686
- position:relative;
687
- z-index:var(--tds-button-group-item-z-index);
688
- border-radius:0;
689
- }
690
- :is(.tds-button-group > .tds-btn):not(:first-child){
691
- margin-inline-start:calc(var(--tds-btn-border-width) * -1);
692
- }
693
- :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:first-child)::before,:is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:last-child)::after{
694
- position:absolute;
695
- inset-block:calc(var(--tds-btn-border-width) * -1);
696
- width:var(--tds-btn-border-width);
697
- pointer-events:none;
698
- content:"";
699
- background-color:var(--t-border-color-white);
700
- }
701
- :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:first-child)::before{
702
- inset-inline-start:calc(var(--tds-btn-border-width) * -1);
703
- }
704
- :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:last-child)::after{
705
- inset-inline-end:calc(var(--tds-btn-border-width) * -1);
706
- }
707
- :is(.tds-button-group > .tds-btn):hover{
708
- --tds-button-group-item-z-index:2;
709
- }
710
- :is(.tds-button-group > .tds-btn):focus-visible{
711
- --tds-button-group-item-z-index:5;
712
- }
713
- .tds-button-group > .tds-btn:first-child{
714
- border-start-start-radius:var(--tds-btn-border-radius);
715
- border-end-start-radius:var(--tds-btn-border-radius);
716
- }
717
- .tds-button-group > .tds-btn:last-child{
718
- border-start-end-radius:var(--tds-btn-border-radius);
719
- border-end-end-radius:var(--tds-btn-border-radius);
720
- }
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;
721
704
 
722
- .tds-checkbox{
723
- --tds-checkbox-font-size:var(--t-font-size-md);
724
- --tds-checkbox-cursor:pointer;
725
- --tds-checkbox-line-height:1.4;
726
- --tds-checkbox-transition-property:background-color, border-color;
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);
727
707
 
728
- --tds-checkbox-input-size:var(--t-element-size-md);
729
- --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
730
- --tds-checkbox-input-border-color:var(--t-form-border-color);
731
- --tds-checkbox-input-background-color:var(--t-form-background-color);
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);
732
711
 
733
- --tds-checkbox-input-icon:none;
734
- --tds-checkbox-input-icon-visibility:hidden;
735
- --tds-checkbox-input-icon-opacity:0;
736
- --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
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);
737
714
 
738
- --tds-checkbox-label-color:var(--t-form-color);
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);
739
718
 
740
- --tds-checkbox-description-font-size:var(--t-font-size-sm);
741
- --tds-checkbox-description-line-height:1.35;
742
- --tds-checkbox-description-color:var(--t-text-color-secondary);
743
- --tds-checkbox-description-invalid-icon-display:none;
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
+ }
744
725
 
745
- position:relative;
746
- display:inline-grid;
747
- grid-template-columns:auto;
748
- grid-auto-columns:1fr;
749
- gap:var(--t-spacing-fourth) 0;
750
- line-height:var(--tds-checkbox-line-height);
751
- -webkit-user-select:none;
752
- -moz-user-select:none;
753
- user-select:none;
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
+ }
754
757
  }
755
758
 
756
- .tds-checkbox label{
757
- grid-area:1 / 2;
758
- padding-inline-start:var(--t-spacing-1);
759
- font-size:var(--tds-checkbox-font-size);
760
- font-weight:var(--t-font-weight-normal);
761
- color:var(--tds-checkbox-label-color);
762
- cursor:var(--tds-checkbox-cursor);
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);
763
770
  }
764
771
 
765
- .tds-checkbox tds-indeterminate{
766
- display:flex;
772
+ .tds-page-header.inactive{
773
+ background:var(--tds-page-header-background-color-inactive);
767
774
  }
768
775
 
769
- .tds-checkbox input[type="checkbox"]{
770
- position:relative;
771
- width:1em;
772
- height:1em;
773
- margin:calc((1lh - 1em) / 2) 0 0;
774
- font-size:var(--tds-checkbox-font-size);
775
- line-height:inherit;
776
- -webkit-appearance:none;
777
- -moz-appearance:none;
778
- appearance:none;
779
- cursor:var(--tds-checkbox-cursor);
780
- background-color:var(--tds-checkbox-input-background-color);
781
- border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
782
- border-radius:var(--tds-checkbox-input-border-radius);
783
- transition-timing-function:var(--t-ease-in-out);
784
- transition-duration:var(--t-duration-200);
785
- transition-property:var(--tds-checkbox-transition-property);
776
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
777
+ width:100%;
786
778
  }
787
779
 
788
- :is(.tds-checkbox input[type="checkbox"])::before{
789
- position:absolute;
790
- top:50%;
791
- left:50%;
792
- visibility:var(--tds-checkbox-input-icon-visibility);
793
- width:100%;
794
- height:100%;
795
- content:"";
796
- background-color:var(--tds-checkbox-input-icon-fill);
797
- border-radius:var(--tds-checkbox-input-border-radius);
798
- opacity:var(--tds-checkbox-input-icon-opacity);
799
- -webkit-mask-image:var(--tds-checkbox-input-icon);
800
- mask-image:var(--tds-checkbox-input-icon);
801
- -webkit-mask-repeat:no-repeat;
802
- mask-repeat:no-repeat;
803
- -webkit-mask-size:contain;
804
- mask-size:contain;
805
- transform:translate(-50%, -50%);
806
- }
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
+ }
807
788
 
808
- :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
809
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
810
- --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
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);
811
797
  }
812
798
 
813
- :is(.tds-checkbox input[type="checkbox"]):focus-visible{
814
- outline:var(--t-focus-ring-outline);
815
- outline-offset:var(--t-focus-ring-offset);
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;
816
818
  }
817
819
 
818
- :is(.tds-checkbox input[type="checkbox"]):disabled{
819
- pointer-events:none;
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;
820
861
  }
821
862
 
822
- @media (prefers-reduced-motion: reduce){
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
+ }
823
884
 
824
- .tds-checkbox input[type="checkbox"]{
825
- --tds-checkbox-transition-property:none;
826
- }
827
- }
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
+ }
828
893
 
829
- .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
830
- --tds-checkbox-input-background-color:var(--t-fill-color-control);
831
- --tds-checkbox-input-border-color:var(--t-border-color-control-info);
832
- --tds-checkbox-input-icon-visibility:visible;
833
- --tds-checkbox-input-icon-opacity:1;
894
+ .tds-page-header--profile > .tds-page-header__title-bar{
895
+ align-items:center;
834
896
  }
835
897
 
836
- :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
837
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
838
- --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
839
- }
898
+ .tds-page-header__primary{
899
+ width:100%;
900
+ }
840
901
 
841
- .tds-checkbox:has(input:checked){
842
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
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;
843
909
  }
844
910
 
845
- .tds-checkbox:has(input:indeterminate){
846
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
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%;
847
917
  }
848
918
 
849
- .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
850
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
851
- --tds-checkbox-description-color:var(--t-text-color-status-error);
852
- --tds-checkbox-description-invalid-icon-display:inline-block;
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;
853
924
  }
854
-
855
- :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
856
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
857
- --tds-checkbox-input-background-color:var(--t-form-background-color-error);
858
- }
859
-
860
- :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{
861
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
862
- --tds-checkbox-input-background-color:var(--t-form-border-color-error);
925
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
926
+ width:auto;
863
927
  }
864
928
 
865
- :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){
866
- --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
867
- --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
868
- }
869
-
870
- .tds-checkbox:has(input:required) label::after{
871
- margin-left:.25ch;
872
- color:var(--t-text-color-status-error);
873
- content:"*";
929
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
930
+ justify-content:flex-end;
874
931
  }
932
+ }
875
933
 
876
- .tds-checkbox:has(input:disabled){
877
- --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
878
- --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
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
+ }
879
944
 
880
- --tds-checkbox-label-color:var(--t-form-color-disabled);
881
- --tds-checkbox-description-color:var(--t-form-color-disabled);
882
- --tds-checkbox-cursor:not-allowed;
945
+ @keyframes indicator-pulse{
946
+ 0%{
947
+ opacity:.3;
948
+ transform:scale(.9);
883
949
  }
884
950
 
885
- .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
886
- --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
887
- }
951
+ 100%{
952
+ opacity:0;
953
+ transform:scale(1.75);
954
+ }
955
+ }
888
956
 
889
- .tds-checkbox-description{
890
- display:flex;
891
- grid-area:2 / 2;
892
- gap:var(--t-spacing-half);
893
- align-items:flex-start;
894
- padding-inline-start:var(--t-spacing-1);
895
- margin:0;
896
- font-size:var(--tds-checkbox-description-font-size);
897
- line-height:var(--tds-checkbox-description-line-height);
898
- color:var(--tds-checkbox-description-color);
899
- cursor:text;
957
+ .tds-button-group{
958
+ display:inline-flex;
900
959
  }
960
+ .tds-button-group > .tds-btn{
961
+ --tds-button-group-item-z-index:1;
901
962
 
902
- .tds-checkbox-description .tds-checkbox-description-invalid-icon{
903
- display:var(--tds-checkbox-description-invalid-icon-display);
904
- flex-shrink:0;
905
- margin-top:calc(.5lh - .5em);
906
- line-height:var(--tds-checkbox-description-line-height);
963
+ position:relative;
964
+ z-index:var(--tds-button-group-item-z-index);
965
+ border-radius:0;
966
+ }
967
+ :is(.tds-button-group > .tds-btn):not(:first-child){
968
+ margin-inline-start:calc(var(--tds-btn-border-width) * -1);
969
+ }
970
+ :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:first-child)::before,:is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:last-child)::after{
971
+ position:absolute;
972
+ inset-block:calc(var(--tds-btn-border-width) * -1);
973
+ width:var(--tds-btn-border-width);
974
+ pointer-events:none;
975
+ content:"";
976
+ background-color:var(--t-border-color-white);
977
+ }
978
+ :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:first-child)::before{
979
+ inset-inline-start:calc(var(--tds-btn-border-width) * -1);
980
+ }
981
+ :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:last-child)::after{
982
+ inset-inline-end:calc(var(--tds-btn-border-width) * -1);
983
+ }
984
+ :is(.tds-button-group > .tds-btn):hover{
985
+ --tds-button-group-item-z-index:2;
986
+ }
987
+ :is(.tds-button-group > .tds-btn):focus-visible{
988
+ --tds-button-group-item-z-index:5;
989
+ }
990
+ .tds-button-group > .tds-btn:first-child{
991
+ border-start-start-radius:var(--tds-btn-border-radius);
992
+ border-end-start-radius:var(--tds-btn-border-radius);
993
+ }
994
+ .tds-button-group > .tds-btn:last-child{
995
+ border-start-end-radius:var(--tds-btn-border-radius);
996
+ border-end-end-radius:var(--tds-btn-border-radius);
907
997
  }
908
-
909
- .tds-checkbox--sm{
910
- --tds-checkbox-line-height:1.35;
911
- --tds-checkbox-input-size:var(--t-element-size-sm);
912
- --tds-checkbox-font-size:var(--t-font-size-sm);
913
- --tds-checkbox-description-font-size:var(--t-font-size-xs);
914
- --tds-checkbox-description-line-height:1.3;
915
- }
916
998
 
917
999
 
918
1000
  @media (prefers-reduced-motion: no-preference){
@@ -1276,355 +1358,273 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1276
1358
  flex-direction:column;
1277
1359
  }
1278
1360
 
1279
- @layer t-critical{
1280
- tds-page-header:not(.hydrated){
1281
- display:none;
1282
- }
1283
- }
1284
-
1285
- @layer t-component{
1286
- .tds-page-header{
1287
- --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
1288
- --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
1289
- --tds-page-header-color:var(--t-text-color);
1290
- --tds-page-header-bottom-border-color:transparent;
1291
- --tds-page-header-headline-color:var(--t-text-color-headline);
1292
- --tds-page-header-headline-font-size:var(--t-font-size-2xl);
1293
- --tds-page-header-padding-x:var(--t-spacing-2);
1294
- --tds-page-header-padding-y:var(--t-spacing-2);
1295
- --tds-page-header-nav-padding-x:var(--tds-page-header-padding-x, var(--t-spacing-3));
1296
- --tds-page-header-nav-gap:var(--t-spacing-1);
1297
- --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%);
1298
- --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
1299
- --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
1300
- --tds-page-header-nav-item-color:var(--t-text-color-secondary);
1301
- --tds-page-header-nav-item-background-color:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 35%);
1302
- --tds-page-header-nav-item-border-width:1px;
1303
-
1304
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
1305
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color);
1306
-
1307
- --tds-page-header-nav-item-color-hover:var(--t-text-color);
1308
- --tds-page-header-nav-item-background-color-hover:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 20%);
1309
- --tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
1310
-
1311
- --tds-page-header-nav-item-background-color-active:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 10%);
1312
- --tds-page-header-nav-item-border-color-active:var(--tds-page-header-nav-item-background-color-active);
1313
-
1314
- --tds-page-header-nav-item-color-disabled:var(--t-text-color-disabled);
1315
- --tds-page-header-nav-item-background-color-disabled:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 50%);
1316
- --tds-page-header-nav-item-border-color-disabled:var(--tds-page-header-nav-item-background-color-disabled);
1317
-
1318
- --tds-page-header-nav-item-color-selected:var(--t-text-color);
1319
- --tds-page-header-nav-item-background-color-selected:var(--t-surface-color-canvas);
1320
- --tds-page-header-nav-item-border-color-selected:var(--tds-page-header-nav-item-background-color-selected);
1321
- --tds-page-header-nav-item-border-bottom-color-selected:var(--tds-page-header-nav-item-background-color-selected);
1322
- --tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning);
1323
- }
1324
-
1325
- .tds-page-header--profile{
1326
- --tds-page-header-padding-y:20px;
1327
- }
1328
-
1329
- @supports (color: light-dark(#fff, #000)){
1330
- .tds-page-header{
1331
- --tds-page-header-nav-background-start:light-dark(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0));
1332
- --tds-page-header-nav-background-end:light-dark(rgba(0, 0, 0, .05), rgba(255, 255, 255, .1));
1333
- }
1334
- }
1361
+ .tds-checkbox-group{
1362
+ --tds-checkbox-group-font-size:var(--t-font-size-md);
1363
+ --tds-checkbox-group-line-height:1.4;
1364
+ --tds-checkbox-group-gap:var(--t-spacing-1);
1335
1365
 
1336
- @media (min-width: 600px){
1337
- .tds-page-header{
1338
- --tds-page-header-background-color:var(--t-surface-color-canvas);
1339
- --tds-page-header-color:var(--t-text-color-secondary);
1340
- --tds-page-header-bottom-border-color:var(--t-border-color);
1341
- --tds-page-header-padding-x:var(--t-spacing-3);
1342
- --tds-page-header-headline-font-size:var(--t-font-size-3xl);
1343
- --tds-page-header-nav-gap:var(--t-spacing-half);
1344
- --tds-page-header-nav-background:transparent;
1345
- --tds-page-header-nav-item-padding-x:var(--t-spacing-2);
1346
- --tds-page-header-nav-item-border-width:1px;
1347
- --tds-page-header-nav-item-color:var(--t-text-color);
1348
- --tds-page-header-nav-item-background-color:var(--t-fill-color-neutral-070);
1349
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-bottom-border-color);
1350
- --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-060);
1351
- --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-050);
1352
- --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
1353
- --tds-page-header-nav-item-border-color-selected:var(--t-border-color);
1354
- }
1355
- }
1356
- }
1366
+ --tds-checkbox-group-description-font-size:var(--t-font-size-sm);
1367
+ --tds-checkbox-group-description-line-height:1.35;
1368
+ --tds-checkbox-group-description-color:var(--t-text-color-secondary);
1369
+ --tds-checkbox-group-description-invalid-icon-display:none;
1370
+ display:flex;
1371
+ flex-direction:column;
1372
+ gap:0;
1373
+ padding:0;
1374
+ margin:0;
1357
1375
 
1358
- .tds-page-header{
1359
- display:flex;
1360
- flex-direction:column;
1361
- padding-top:var(--tds-page-header-padding-y);
1362
- color:var(--tds-page-header-color);
1363
- background:var(--tds-page-header-background-color);
1364
- border-bottom:1px solid var(--tds-page-header-bottom-border-color);
1376
+ font-size:var(--tds-checkbox-group-font-size);
1377
+ line-height:var(--tds-checkbox-group-line-height);
1378
+ border:0;
1365
1379
  }
1366
1380
 
1367
- .tds-page-header:not(.has-nav){
1368
- padding-bottom:var(--tds-page-header-padding-y);
1369
- }
1370
-
1371
- .tds-page-header.inactive{
1372
- background:var(--tds-page-header-background-color-inactive);
1373
- }
1374
-
1375
- .tds-page-header :is([slot="actions"],.tds-page-header__actions){
1376
- width:100%;
1381
+ .tds-checkbox-group legend{
1382
+ float:left;
1383
+ padding:0;
1384
+ margin:0;
1377
1385
  }
1378
1386
 
1379
- .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
1380
- display:flex;
1381
- flex-flow:row wrap;
1382
- gap:var(--t-spacing-half) var(--t-spacing-1);
1383
- align-items:flex-start;
1384
- justify-content:flex-start;
1385
- min-width:0;
1387
+ .tds-checkbox-group[aria-invalid="true"]{
1388
+ --tds-checkbox-group-description-color:var(--t-text-color-status-error);
1389
+ --tds-checkbox-group-description-invalid-icon-display:inline-block;
1386
1390
  }
1387
1391
 
1388
- :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{
1389
- display:flex;
1390
- gap:var(--tds-page-header-nav-gap);
1391
- padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
1392
- margin:0 0 -1px;
1393
- overflow:auto;
1394
- list-style:none;
1395
- background:var(--tds-page-header-nav-background);
1392
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) legend::after{
1393
+ margin-left:.25ch;
1394
+ color:var(--t-text-color-status-error);
1395
+ content:"*";
1396
1396
  }
1397
1397
 
1398
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button){
1399
- position:relative;
1400
- display:inline-flex;
1401
- padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
1402
- font-size:var(--t-font-size-sm);
1403
- line-height:22px;
1404
- color:var(--tds-page-header-nav-item-color);
1405
- white-space:nowrap;
1406
- text-decoration:none;
1407
- -webkit-appearance:none;
1408
- -moz-appearance:none;
1409
- appearance:none;
1410
- cursor:pointer;
1411
- outline-offset:-2px;
1412
- background-color:var(--tds-page-header-nav-item-background-color);
1413
- background-clip:padding-box;
1414
- border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
1415
- border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
1416
- border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
1398
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
1399
+ content:none;
1417
1400
  }
1418
1401
 
1419
- .selected:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)){
1420
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-selected);
1421
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-selected);
1422
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-selected);
1423
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-selected);
1424
- }
1402
+ .tds-checkbox-group-fields{
1403
+ display:flex;
1404
+ flex-direction:column;
1405
+ gap:var(--tds-checkbox-group-gap);
1406
+ align-items:flex-start;
1407
+ margin-top:var(--t-spacing-1);
1408
+ }
1425
1409
 
1426
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):hover{
1427
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
1428
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
1429
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
1430
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-hover);
1431
- }
1410
+ .tds-checkbox-group-description{
1411
+ display:flex;
1412
+ gap:var(--t-spacing-half);
1413
+ align-items:flex-start;
1414
+ margin:var(--t-spacing-fourth) 0 0;
1415
+ font-size:var(--tds-checkbox-group-description-font-size);
1416
+ line-height:var(--tds-checkbox-group-description-line-height);
1417
+ color:var(--tds-checkbox-group-description-color);
1418
+ cursor:text;
1419
+ }
1432
1420
 
1433
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):active{
1434
- background-color:var(--tds-page-header-nav-item-background-color-active);
1435
- border-color:var(--tds-page-header-nav-item-border-color-active);
1436
- border-bottom-color:var(--tds-page-header-nav-item-background-color-active);
1437
- }
1421
+ .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
1422
+ display:var(--tds-checkbox-group-description-invalid-icon-display);
1423
+ flex-shrink:0;
1424
+ margin-top:calc(.5lh - .5em);
1425
+ line-height:var(--tds-checkbox-group-description-line-height);
1426
+ }
1438
1427
 
1439
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):disabled{
1440
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-disabled);
1441
- color:var(--tds-page-header-nav-item-color-disabled);
1442
- cursor:not-allowed;
1443
- background-color:var(--tds-page-header-nav-item-background-color-disabled);
1444
- opacity:1;
1445
- }
1428
+ .tds-checkbox-group--sm{
1429
+ --tds-checkbox-group-line-height:1.35;
1430
+ --tds-checkbox-group-font-size:var(--t-font-size-sm);
1431
+ --tds-checkbox-group-description-font-size:var(--t-font-size-xs);
1432
+ --tds-checkbox-group-description-line-height:1.3;
1433
+ }
1446
1434
 
1447
- @media (min-width: 600px){
1448
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected)::after{
1449
- position:absolute;
1450
- inset:auto -1px -1px;
1451
- height:1px;
1452
- pointer-events:none;
1453
- content:"";
1454
- background-color:var(--tds-page-header-bottom-border-color);
1455
- }
1456
- }
1435
+ .tds-checkbox{
1436
+ --tds-checkbox-font-size:var(--t-font-size-md);
1437
+ --tds-checkbox-cursor:pointer;
1438
+ --tds-checkbox-line-height:1.4;
1439
+ --tds-checkbox-transition-property:background-color, border-color;
1457
1440
 
1458
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
1459
- position:relative;
1460
- }
1441
+ --tds-checkbox-input-size:var(--t-element-size-md);
1442
+ --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
1443
+ --tds-checkbox-input-border-color:var(--t-form-border-color);
1444
+ --tds-checkbox-input-background-color:var(--t-form-background-color);
1461
1445
 
1462
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator)) :is(a,button){
1463
- -webkit-mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
1464
- mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
1465
- }
1446
+ --tds-checkbox-input-icon:none;
1447
+ --tds-checkbox-input-icon-visibility:hidden;
1448
+ --tds-checkbox-input-icon-opacity:0;
1449
+ --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
1466
1450
 
1467
- :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{
1468
- position:absolute;
1469
- top:-5px;
1470
- right:-2px;
1471
- width:10px;
1472
- height:10px;
1473
- content:"";
1474
- background:var(--tds-page-header-nav-item-indicator-color);
1475
- border-radius:50%;
1476
- }
1451
+ --tds-checkbox-label-color:var(--t-form-color);
1477
1452
 
1478
- @media (prefers-reduced-motion: no-preference){
1479
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
1480
- animation:indicator-pulse 1.25s ease infinite;
1481
- }
1482
- }
1453
+ --tds-checkbox-description-font-size:var(--t-font-size-sm);
1454
+ --tds-checkbox-description-line-height:1.35;
1455
+ --tds-checkbox-description-color:var(--t-text-color-secondary);
1456
+ --tds-checkbox-description-invalid-icon-display:none;
1483
1457
 
1484
- .tds-page-header__title-bar{
1485
- display:flex;
1486
- flex-direction:column;
1487
- gap:var(--t-spacing-2) var(--t-spacing-1);
1488
- align-items:flex-start;
1489
- justify-content:space-between;
1490
- padding:0 var(--tds-page-header-padding-x);
1458
+ position:relative;
1459
+ display:inline-grid;
1460
+ grid-template-columns:auto;
1461
+ grid-auto-columns:1fr;
1462
+ gap:var(--t-spacing-fourth) 0;
1463
+ line-height:var(--tds-checkbox-line-height);
1464
+ -webkit-user-select:none;
1465
+ -moz-user-select:none;
1466
+ user-select:none;
1491
1467
  }
1492
1468
 
1493
- .tds-page-header--profile > .tds-page-header__title-bar{
1494
- align-items:center;
1469
+ .tds-checkbox label{
1470
+ grid-area:1 / 2;
1471
+ padding-inline-start:var(--t-spacing-1);
1472
+ font-size:var(--tds-checkbox-font-size);
1473
+ font-weight:var(--t-font-weight-normal);
1474
+ color:var(--tds-checkbox-label-color);
1475
+ cursor:var(--tds-checkbox-cursor);
1495
1476
  }
1496
1477
 
1497
- .tds-page-header__primary{
1498
- width:100%;
1499
- }
1500
-
1501
- .tds-page-header__primary h1{
1502
- margin:0;
1503
- font-size:var(--tds-page-header-headline-font-size);
1504
- font-weight:var(--t-font-weight-normal);
1505
- line-height:32px;
1506
- color:var(--tds-page-header-headline-color);
1507
- overflow-wrap:break-word;
1478
+ .tds-checkbox tds-indeterminate{
1479
+ display:flex;
1508
1480
  }
1509
1481
 
1510
- @media (min-width: 960px){
1511
- .tds-page-header__primary{
1512
- flex:1 1 max-content;
1513
- width:auto;
1514
- min-width:0;
1515
- max-width:100%;
1482
+ .tds-checkbox input[type="checkbox"]{
1483
+ position:relative;
1484
+ width:1em;
1485
+ height:1em;
1486
+ margin:calc((1lh - 1em) / 2) 0 0;
1487
+ font-size:var(--tds-checkbox-font-size);
1488
+ line-height:inherit;
1489
+ -webkit-appearance:none;
1490
+ -moz-appearance:none;
1491
+ appearance:none;
1492
+ cursor:var(--tds-checkbox-cursor);
1493
+ background-color:var(--tds-checkbox-input-background-color);
1494
+ border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
1495
+ border-radius:var(--tds-checkbox-input-border-radius);
1496
+ transition-timing-function:var(--t-ease-in-out);
1497
+ transition-duration:var(--t-duration-200);
1498
+ transition-property:var(--tds-checkbox-transition-property);
1516
1499
  }
1517
1500
 
1518
- .tds-page-header__title-bar,
1519
- .tds-page-header--profile .tds-page-header__title-bar{
1520
- flex-flow:row nowrap;
1521
- row-gap:12px;
1522
- align-items:flex-start;
1523
- }
1524
- .tds-page-header :is([slot="actions"],.tds-page-header__actions){
1525
- width:auto;
1501
+ :is(.tds-checkbox input[type="checkbox"])::before{
1502
+ position:absolute;
1503
+ top:50%;
1504
+ left:50%;
1505
+ visibility:var(--tds-checkbox-input-icon-visibility);
1506
+ width:100%;
1507
+ height:100%;
1508
+ content:"";
1509
+ background-color:var(--tds-checkbox-input-icon-fill);
1510
+ border-radius:var(--tds-checkbox-input-border-radius);
1511
+ opacity:var(--tds-checkbox-input-icon-opacity);
1512
+ -webkit-mask-image:var(--tds-checkbox-input-icon);
1513
+ mask-image:var(--tds-checkbox-input-icon);
1514
+ -webkit-mask-repeat:no-repeat;
1515
+ mask-repeat:no-repeat;
1516
+ -webkit-mask-size:contain;
1517
+ mask-size:contain;
1518
+ transform:translate(-50%, -50%);
1519
+ }
1520
+
1521
+ :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
1522
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
1523
+ --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
1524
+ }
1525
+
1526
+ :is(.tds-checkbox input[type="checkbox"]):focus-visible{
1527
+ outline:var(--t-focus-ring-outline);
1528
+ outline-offset:var(--t-focus-ring-offset);
1526
1529
  }
1527
1530
 
1528
- .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
1529
- justify-content:flex-end;
1531
+ :is(.tds-checkbox input[type="checkbox"]):disabled{
1532
+ pointer-events:none;
1530
1533
  }
1531
- }
1532
1534
 
1533
- .tds-page-header-phone,
1534
- .tds-page-header-email{
1535
- color:var(--tds-page-header-color);
1536
- white-space:nowrap;
1537
- }
1538
- .tds-page-header-email{
1539
- max-width:100%;
1540
- overflow:hidden;
1541
- text-overflow:ellipsis;
1542
- }
1535
+ @media (prefers-reduced-motion: reduce){
1543
1536
 
1544
- @keyframes indicator-pulse{
1545
- 0%{
1546
- opacity:.3;
1547
- transform:scale(.9);
1537
+ .tds-checkbox input[type="checkbox"]{
1538
+ --tds-checkbox-transition-property:none;
1548
1539
  }
1540
+ }
1549
1541
 
1550
- 100%{
1551
- opacity:0;
1552
- transform:scale(1.75);
1542
+ .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
1543
+ --tds-checkbox-input-background-color:var(--t-fill-color-control);
1544
+ --tds-checkbox-input-border-color:var(--t-border-color-control-info);
1545
+ --tds-checkbox-input-icon-visibility:visible;
1546
+ --tds-checkbox-input-icon-opacity:1;
1553
1547
  }
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
1548
 
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;
1549
+ :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
1550
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
1551
+ --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
1552
+ }
1570
1553
 
1571
- font-size:var(--tds-checkbox-group-font-size);
1572
- line-height:var(--tds-checkbox-group-line-height);
1573
- border:0;
1574
- }
1554
+ .tds-checkbox:has(input:checked){
1555
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
1556
+ }
1575
1557
 
1576
- .tds-checkbox-group legend{
1577
- float:left;
1578
- padding:0;
1579
- margin:0;
1558
+ .tds-checkbox:has(input:indeterminate){
1559
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
1580
1560
  }
1581
1561
 
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;
1562
+ .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
1563
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1564
+ --tds-checkbox-description-color:var(--t-text-color-status-error);
1565
+ --tds-checkbox-description-invalid-icon-display:inline-block;
1585
1566
  }
1586
1567
 
1587
- .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) legend::after{
1568
+ :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
1569
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1570
+ --tds-checkbox-input-background-color:var(--t-form-background-color-error);
1571
+ }
1572
+
1573
+ :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{
1574
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1575
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error);
1576
+ }
1577
+
1578
+ :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){
1579
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
1580
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
1581
+ }
1582
+
1583
+ .tds-checkbox:has(input:required) label::after{
1588
1584
  margin-left:.25ch;
1589
1585
  color:var(--t-text-color-status-error);
1590
1586
  content:"*";
1591
1587
  }
1592
1588
 
1593
- .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
1594
- content:none;
1595
- }
1589
+ .tds-checkbox:has(input:disabled){
1590
+ --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
1591
+ --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
1596
1592
 
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
- }
1593
+ --tds-checkbox-label-color:var(--t-form-color-disabled);
1594
+ --tds-checkbox-description-color:var(--t-form-color-disabled);
1595
+ --tds-checkbox-cursor:not-allowed;
1596
+ }
1604
1597
 
1605
- .tds-checkbox-group-description{
1598
+ .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
1599
+ --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
1600
+ }
1601
+
1602
+ .tds-checkbox-description{
1606
1603
  display:flex;
1604
+ grid-area:2 / 2;
1607
1605
  gap:var(--t-spacing-half);
1608
1606
  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);
1607
+ padding-inline-start:var(--t-spacing-1);
1608
+ margin:0;
1609
+ font-size:var(--tds-checkbox-description-font-size);
1610
+ line-height:var(--tds-checkbox-description-line-height);
1611
+ color:var(--tds-checkbox-description-color);
1613
1612
  cursor:text;
1614
1613
  }
1615
1614
 
1616
- .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
1617
- display:var(--tds-checkbox-group-description-invalid-icon-display);
1615
+ .tds-checkbox-description .tds-checkbox-description-invalid-icon{
1616
+ display:var(--tds-checkbox-description-invalid-icon-display);
1618
1617
  flex-shrink:0;
1619
1618
  margin-top:calc(.5lh - .5em);
1620
- line-height:var(--tds-checkbox-group-description-line-height);
1619
+ line-height:var(--tds-checkbox-description-line-height);
1621
1620
  }
1622
1621
 
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;
1622
+ .tds-checkbox--sm{
1623
+ --tds-checkbox-line-height:1.35;
1624
+ --tds-checkbox-input-size:var(--t-element-size-sm);
1625
+ --tds-checkbox-font-size:var(--t-font-size-sm);
1626
+ --tds-checkbox-description-font-size:var(--t-font-size-xs);
1627
+ --tds-checkbox-description-line-height:1.3;
1628
1628
  }
1629
1629
 
1630
1630
 
@@ -1783,89 +1783,6 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1783
1783
  --tds-radio-description-line-height:1.3;
1784
1784
  }
1785
1785
 
1786
- .tds-radio-group{
1787
- --tds-radio-group-font-size:var(--t-font-size-md);
1788
- --tds-radio-group-line-height:1.4;
1789
- --tds-radio-group-gap:var(--t-spacing-1);
1790
-
1791
- --tds-radio-group-description-font-size:var(--t-font-size-sm);
1792
- --tds-radio-group-description-line-height:1.35;
1793
- --tds-radio-group-description-color:var(--t-text-color-secondary);
1794
- --tds-radio-group-description-invalid-icon-display:none;
1795
- display:flex;
1796
- flex-direction:column;
1797
- gap:0;
1798
- padding:0;
1799
- margin:0;
1800
-
1801
- font-size:var(--tds-radio-group-font-size);
1802
- line-height:var(--tds-radio-group-line-height);
1803
- border:0;
1804
- }
1805
-
1806
- .tds-radio-group legend{
1807
- float:left;
1808
- padding:0;
1809
- margin:0;
1810
- }
1811
-
1812
- .tds-radio-group[aria-invalid="true"]{
1813
- --tds-radio-group-description-color:var(--t-text-color-status-error);
1814
- --tds-radio-group-description-invalid-icon-display:inline-block;
1815
- }
1816
-
1817
- .tds-radio-group[aria-invalid="true"] .tds-radio{
1818
- --tds-radio-input-border-color:var(--t-form-border-color-error);
1819
- }
1820
-
1821
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
1822
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1823
- --tds-radio-input-background-color:var(--t-form-background-color-error);
1824
- }
1825
-
1826
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
1827
- --tds-radio-input-background-color:var(--t-icon-color-inverted);
1828
- }
1829
-
1830
- .tds-radio-group:has(input:required) legend::after{
1831
- margin-left:.25ch;
1832
- color:var(--t-text-color-status-error);
1833
- content:"*";
1834
- }
1835
-
1836
- .tds-radio-group-fields{
1837
- display:flex;
1838
- flex-direction:column;
1839
- gap:var(--tds-radio-group-gap);
1840
- align-items:flex-start;
1841
- margin-top:var(--t-spacing-1);
1842
- }
1843
-
1844
- .tds-radio-group-description{
1845
- display:flex;
1846
- gap:var(--t-spacing-half);
1847
- align-items:flex-start;
1848
- margin:var(--t-spacing-fourth) 0 0;
1849
- font-size:var(--tds-radio-group-description-font-size);
1850
- line-height:var(--tds-radio-group-description-line-height);
1851
- color:var(--tds-radio-group-description-color);
1852
- cursor:text;
1853
- }
1854
-
1855
- .tds-radio-group-description .tds-radio-group-description-invalid-icon{
1856
- display:var(--tds-radio-group-description-invalid-icon-display);
1857
- flex-shrink:0;
1858
- margin-top:calc(.5lh - .5em);
1859
- line-height:var(--tds-radio-group-description-line-height);
1860
- }
1861
-
1862
- .tds-radio-group--sm{
1863
- --tds-radio-group-line-height:1.35;
1864
- --tds-radio-group-font-size:var(--t-font-size-sm);
1865
- --tds-radio-group-description-font-size:var(--t-font-size-xs);
1866
- --tds-radio-group-description-line-height:1.3;
1867
- }
1868
-
1869
1786
  .tds-modal-overlay{
1870
1787
  --tds-modal-min-margin-block:var(--t-spacing-3);
1871
1788
 
@@ -2015,123 +1932,101 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
2015
1932
  margin-inline-end:auto;
2016
1933
  }
2017
1934
 
2018
- @media (min-width: 720px){
2019
- .tds-modal-overlay{
2020
- --tds-modal-min-margin-block:0;
2021
- }
2022
-
2023
- .tds-modal-footer{
2024
- position:sticky;
2025
- bottom:0;
2026
- background:var(--t-surface-color-card);
2027
- }
2028
- }
2029
-
2030
- .tds-input:has(textarea){
2031
- --tds-input-padding-block:6px;
2032
- --tds-input-resizer-size:var(--t-element-size-sm);
2033
- --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");
2034
- }
2035
-
2036
- @supports (x: attr(x type(*))){
2037
-
2038
- .tds-input textarea{
2039
- --tds-input-min-height:calc((attr(rows type(<number>), 3) * 1lh) + (var(--tds-input-padding-block) * 2) + 2px);
2040
- }
2041
- }
2042
-
2043
- .tds-input.tds-textarea--resize-vertical textarea{
2044
- resize:vertical;
2045
- }
1935
+ @media (min-width: 720px){
1936
+ .tds-modal-overlay{
1937
+ --tds-modal-min-margin-block:0;
1938
+ }
2046
1939
 
2047
- .tds-input.tds-textarea--resize-none textarea{
2048
- resize:none;
2049
- }
1940
+ .tds-modal-footer{
1941
+ position:sticky;
1942
+ bottom:0;
1943
+ background:var(--t-surface-color-card);
1944
+ }
1945
+ }
2050
1946
 
2051
- .tds-input.tds-textarea--resize-auto textarea{
2052
- resize:vertical;
2053
- }
1947
+ .tds-radio-group{
1948
+ --tds-radio-group-font-size:var(--t-font-size-md);
1949
+ --tds-radio-group-line-height:1.4;
1950
+ --tds-radio-group-gap:var(--t-spacing-1);
2054
1951
 
2055
- @supports (field-sizing: content){
2056
- .tds-input.tds-textarea--resize-auto textarea{
2057
- field-sizing:content;
2058
- resize:none;
2059
- }
2060
- }
1952
+ --tds-radio-group-description-font-size:var(--t-font-size-sm);
1953
+ --tds-radio-group-description-line-height:1.35;
1954
+ --tds-radio-group-description-color:var(--t-text-color-secondary);
1955
+ --tds-radio-group-description-invalid-icon-display:none;
1956
+ display:flex;
1957
+ flex-direction:column;
1958
+ gap:0;
1959
+ padding:0;
1960
+ margin:0;
2061
1961
 
2062
- .tds-input textarea{
2063
- --tds-input-scrollbar-thumb-color-default:var(--t-fill-color-neutral-040);
2064
- --tds-input-scrollbar-thumb-color-hidden:transparent;
2065
- --tds-input-scrollbar-thumb-color-hover:var(--t-fill-color-neutral-030);
2066
- --tds-input-scrollbar-thumb-color-thumb-hover:var(--t-fill-color-neutral-020);
2067
- --tds-input-scrollbar-thumb-color-thumb-active:var(--t-fill-color-neutral-010);
2068
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-default);
2069
- --tds-input-scrollbar-surface-color:rgba(0, 0, 0, 0);
2070
- --tds-input-scrollbar-thumb-border-radius:999px;
2071
- --tds-input-scrollbar-thumb-border-width:3px;
2072
- --tds-input-scrollbar-track-margin-block:.125rem;
2073
- scrollbar-color:initial;
2074
- transition-timing-function:var(--t-ease-in-out);
2075
- transition-duration:var(--t-duration-200);
2076
- transition-property:var(--tds-input-transition-property), --tds-input-scrollbar-thumb-color;
1962
+ font-size:var(--tds-radio-group-font-size);
1963
+ line-height:var(--tds-radio-group-line-height);
1964
+ border:0;
2077
1965
  }
2078
1966
 
2079
- @media (pointer: fine){
2080
- :is(.tds-input textarea)::-webkit-scrollbar{
2081
- width:12px;
2082
- height:12px;
2083
- cursor:default;
2084
- }
2085
-
2086
- :is(.tds-input textarea)::-webkit-scrollbar-thumb{
2087
- cursor:default;
2088
- background:var(--tds-input-scrollbar-thumb-color);
2089
- background-clip:content-box;
2090
- border:var(--tds-input-scrollbar-thumb-border-width) solid var(--tds-input-scrollbar-surface-color);
2091
- border-radius:var(--tds-input-scrollbar-thumb-border-radius);
2092
- }
1967
+ .tds-radio-group legend{
1968
+ float:left;
1969
+ padding:0;
1970
+ margin:0;
1971
+ }
2093
1972
 
2094
- :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
2095
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
2096
- }
1973
+ .tds-radio-group[aria-invalid="true"]{
1974
+ --tds-radio-group-description-color:var(--t-text-color-status-error);
1975
+ --tds-radio-group-description-invalid-icon-display:inline-block;
1976
+ }
2097
1977
 
2098
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
2099
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
1978
+ .tds-radio-group[aria-invalid="true"] .tds-radio{
1979
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
2100
1980
  }
2101
1981
 
2102
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
2103
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
2104
- }
1982
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
1983
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1984
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
1985
+ }
2105
1986
 
2106
- :is(.tds-input textarea)::-webkit-scrollbar-corner{
2107
- background:var(--tds-input-scrollbar-surface-color);
2108
- }
1987
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
1988
+ --tds-radio-input-background-color:var(--t-icon-color-inverted);
1989
+ }
2109
1990
 
2110
- :is(.tds-input textarea)::-webkit-resizer{
2111
- background:var(--tds-input-resizer-icon) no-repeat;
2112
- background-position:right bottom;
2113
- background-size:var(--tds-input-resizer-size) var(--tds-input-resizer-size);
1991
+ .tds-radio-group:has(input:required) legend::after{
1992
+ margin-left:.25ch;
1993
+ color:var(--t-text-color-status-error);
1994
+ content:"*";
2114
1995
  }
2115
1996
 
2116
- :is(.tds-input textarea)::-webkit-scrollbar-track{
2117
- margin-block:var(--tds-input-scrollbar-track-margin-block);
2118
- cursor:default;
2119
- }
1997
+ .tds-radio-group-fields{
1998
+ display:flex;
1999
+ flex-direction:column;
2000
+ gap:var(--tds-radio-group-gap);
2001
+ align-items:flex-start;
2002
+ margin-top:var(--t-spacing-1);
2003
+ }
2120
2004
 
2121
- @supports (-moz-appearance: none){
2122
- :is(.tds-input textarea){
2123
- scrollbar-color:var(--tds-input-scrollbar-thumb-color-default) var(--tds-input-scrollbar-surface-color);
2124
- scrollbar-width:thin;
2125
- }
2005
+ .tds-radio-group-description{
2006
+ display:flex;
2007
+ gap:var(--t-spacing-half);
2008
+ align-items:flex-start;
2009
+ margin:var(--t-spacing-fourth) 0 0;
2010
+ font-size:var(--tds-radio-group-description-font-size);
2011
+ line-height:var(--tds-radio-group-description-line-height);
2012
+ color:var(--tds-radio-group-description-color);
2013
+ cursor:text;
2014
+ }
2126
2015
 
2127
- @media (hover){
2128
- :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
2129
- scrollbar-color:var(--tds-input-scrollbar-thumb-color-hover) var(--tds-input-scrollbar-surface-color);
2130
- }
2131
- }
2132
- }
2016
+ .tds-radio-group-description .tds-radio-group-description-invalid-icon{
2017
+ display:var(--tds-radio-group-description-invalid-icon-display);
2018
+ flex-shrink:0;
2019
+ margin-top:calc(.5lh - .5em);
2020
+ line-height:var(--tds-radio-group-description-line-height);
2133
2021
  }
2134
2022
 
2023
+ .tds-radio-group--sm{
2024
+ --tds-radio-group-line-height:1.35;
2025
+ --tds-radio-group-font-size:var(--t-font-size-sm);
2026
+ --tds-radio-group-description-font-size:var(--t-font-size-xs);
2027
+ --tds-radio-group-description-line-height:1.3;
2028
+ }
2029
+
2135
2030
  .tds-toggle-switch{
2136
2031
  --tds-toggle-switch-font-size:var(--t-font-size-md);
2137
2032
  --tds-toggle-switch-cursor:pointer;
@@ -2272,6 +2167,111 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
2272
2167
  --tds-toggle-switch-display:inline-flex;
2273
2168
  }
2274
2169
 
2170
+ .tds-input:has(textarea){
2171
+ --tds-input-padding-block:6px;
2172
+ --tds-input-resizer-size:var(--t-element-size-sm);
2173
+ --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");
2174
+ }
2175
+
2176
+ @supports (x: attr(x type(*))){
2177
+
2178
+ .tds-input textarea{
2179
+ --tds-input-min-height:calc((attr(rows type(<number>), 3) * 1lh) + (var(--tds-input-padding-block) * 2) + 2px);
2180
+ }
2181
+ }
2182
+
2183
+ .tds-input.tds-textarea--resize-vertical textarea{
2184
+ resize:vertical;
2185
+ }
2186
+
2187
+ .tds-input.tds-textarea--resize-none textarea{
2188
+ resize:none;
2189
+ }
2190
+
2191
+ .tds-input.tds-textarea--resize-auto textarea{
2192
+ resize:vertical;
2193
+ }
2194
+
2195
+ @supports (field-sizing: content){
2196
+ .tds-input.tds-textarea--resize-auto textarea{
2197
+ field-sizing:content;
2198
+ resize:none;
2199
+ }
2200
+ }
2201
+
2202
+ .tds-input textarea{
2203
+ --tds-input-scrollbar-thumb-color-default:var(--t-fill-color-neutral-040);
2204
+ --tds-input-scrollbar-thumb-color-hidden:transparent;
2205
+ --tds-input-scrollbar-thumb-color-hover:var(--t-fill-color-neutral-030);
2206
+ --tds-input-scrollbar-thumb-color-thumb-hover:var(--t-fill-color-neutral-020);
2207
+ --tds-input-scrollbar-thumb-color-thumb-active:var(--t-fill-color-neutral-010);
2208
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-default);
2209
+ --tds-input-scrollbar-surface-color:rgba(0, 0, 0, 0);
2210
+ --tds-input-scrollbar-thumb-border-radius:999px;
2211
+ --tds-input-scrollbar-thumb-border-width:3px;
2212
+ --tds-input-scrollbar-track-margin-block:.125rem;
2213
+ scrollbar-color:initial;
2214
+ transition-timing-function:var(--t-ease-in-out);
2215
+ transition-duration:var(--t-duration-200);
2216
+ transition-property:var(--tds-input-transition-property), --tds-input-scrollbar-thumb-color;
2217
+ }
2218
+
2219
+ @media (pointer: fine){
2220
+ :is(.tds-input textarea)::-webkit-scrollbar{
2221
+ width:12px;
2222
+ height:12px;
2223
+ cursor:default;
2224
+ }
2225
+
2226
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb{
2227
+ cursor:default;
2228
+ background:var(--tds-input-scrollbar-thumb-color);
2229
+ background-clip:content-box;
2230
+ border:var(--tds-input-scrollbar-thumb-border-width) solid var(--tds-input-scrollbar-surface-color);
2231
+ border-radius:var(--tds-input-scrollbar-thumb-border-radius);
2232
+ }
2233
+
2234
+ :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
2235
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
2236
+ }
2237
+
2238
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
2239
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
2240
+ }
2241
+
2242
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
2243
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
2244
+ }
2245
+
2246
+ :is(.tds-input textarea)::-webkit-scrollbar-corner{
2247
+ background:var(--tds-input-scrollbar-surface-color);
2248
+ }
2249
+
2250
+ :is(.tds-input textarea)::-webkit-resizer{
2251
+ background:var(--tds-input-resizer-icon) no-repeat;
2252
+ background-position:right bottom;
2253
+ background-size:var(--tds-input-resizer-size) var(--tds-input-resizer-size);
2254
+ }
2255
+
2256
+ :is(.tds-input textarea)::-webkit-scrollbar-track{
2257
+ margin-block:var(--tds-input-scrollbar-track-margin-block);
2258
+ cursor:default;
2259
+ }
2260
+
2261
+ @supports (-moz-appearance: none){
2262
+ :is(.tds-input textarea){
2263
+ scrollbar-color:var(--tds-input-scrollbar-thumb-color-default) var(--tds-input-scrollbar-surface-color);
2264
+ scrollbar-width:thin;
2265
+ }
2266
+
2267
+ @media (hover){
2268
+ :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
2269
+ scrollbar-color:var(--tds-input-scrollbar-thumb-color-hover) var(--tds-input-scrollbar-surface-color);
2270
+ }
2271
+ }
2272
+ }
2273
+ }
2274
+
2275
2275
  .tds-input{
2276
2276
  --tds-input-border-color:var(--t-form-border-color);
2277
2277
  --tds-input-border-color-hover:var(--t-form-border-color-hover);