@planningcenter/tapestry 4.2.0-rc.2 → 4.2.0-rc.4

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 (9) hide show
  1. package/dist/index.css +2 -0
  2. package/dist/index.css.map +1 -1
  3. package/dist/reactRender.css +768 -766
  4. package/dist/reactRender.css.map +1 -1
  5. package/dist/reactRenderLegacy.css +768 -766
  6. package/dist/reactRenderLegacy.css.map +1 -1
  7. package/dist/unstable.css +2 -0
  8. package/dist/unstable.css.map +1 -1
  9. package/package.json +2 -2
package/dist/reactRender.css CHANGED
@@ -677,281 +677,199 @@
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
- }
680
+ .tds-checkbox{
681
+ --tds-checkbox-font-size:var(--t-font-size-md);
682
+ --tds-checkbox-cursor:pointer;
683
+ --tds-checkbox-line-height:1.4;
684
+ --tds-checkbox-transition-property:background-color, border-color;
685
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;
686
+ --tds-checkbox-input-size:var(--t-element-size-md);
687
+ --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
688
+ --tds-checkbox-input-border-color:var(--t-form-border-color);
689
+ --tds-checkbox-input-background-color:var(--t-form-background-color);
704
690
 
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);
691
+ --tds-checkbox-input-icon:none;
692
+ --tds-checkbox-input-icon-visibility:hidden;
693
+ --tds-checkbox-input-icon-opacity:0;
694
+ --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
707
695
 
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);
696
+ --tds-checkbox-label-color:var(--t-form-color);
711
697
 
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);
698
+ --tds-checkbox-description-font-size:var(--t-font-size-sm);
699
+ --tds-checkbox-description-line-height:1.35;
700
+ --tds-checkbox-description-color:var(--t-text-color-secondary);
701
+ --tds-checkbox-description-invalid-icon-display:none;
714
702
 
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);
703
+ position:relative;
704
+ display:inline-grid;
705
+ grid-template-columns:auto;
706
+ grid-auto-columns:1fr;
707
+ gap:var(--t-spacing-fourth) 0;
708
+ line-height:var(--tds-checkbox-line-height);
709
+ -webkit-user-select:none;
710
+ -moz-user-select:none;
711
+ user-select:none;
712
+ }
718
713
 
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);
714
+ .tds-checkbox label{
715
+ grid-area:1 / 2;
716
+ padding-inline-start:var(--t-spacing-1);
717
+ font-size:var(--tds-checkbox-font-size);
718
+ font-weight:var(--t-font-weight-normal);
719
+ color:var(--tds-checkbox-label-color);
720
+ cursor:var(--tds-checkbox-cursor);
724
721
  }
725
722
 
726
- .tds-page-header--profile{
727
- --tds-page-header-padding-y:20px;
723
+ .tds-checkbox tds-indeterminate{
724
+ display:flex;
728
725
  }
729
726
 
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
- }
727
+ .tds-checkbox input[type="checkbox"]{
728
+ position:relative;
729
+ width:1em;
730
+ height:1em;
731
+ margin:calc((1lh - 1em) / 2) 0 0;
732
+ font-size:var(--tds-checkbox-font-size);
733
+ line-height:inherit;
734
+ -webkit-appearance:none;
735
+ -moz-appearance:none;
736
+ appearance:none;
737
+ cursor:var(--tds-checkbox-cursor);
738
+ background-color:var(--tds-checkbox-input-background-color);
739
+ border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
740
+ border-radius:var(--tds-checkbox-input-border-radius);
741
+ transition-timing-function:var(--t-ease-in-out);
742
+ transition-duration:var(--t-duration-200);
743
+ transition-property:var(--tds-checkbox-transition-property);
735
744
  }
736
745
 
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);
746
+ :is(.tds-checkbox input[type="checkbox"])::before{
747
+ position:absolute;
748
+ top:50%;
749
+ left:50%;
750
+ visibility:var(--tds-checkbox-input-icon-visibility);
751
+ width:100%;
752
+ height:100%;
753
+ content:"";
754
+ background-color:var(--tds-checkbox-input-icon-fill);
755
+ border-radius:var(--tds-checkbox-input-border-radius);
756
+ opacity:var(--tds-checkbox-input-icon-opacity);
757
+ -webkit-mask-image:var(--tds-checkbox-input-icon);
758
+ mask-image:var(--tds-checkbox-input-icon);
759
+ -webkit-mask-repeat:no-repeat;
760
+ mask-repeat:no-repeat;
761
+ -webkit-mask-size:contain;
762
+ mask-size:contain;
763
+ transform:translate(-50%, -50%);
755
764
  }
756
- }
757
- }
758
765
 
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
- }
766
+ :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
767
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
768
+ --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
769
+ }
767
770
 
768
- .tds-page-header:not(.has-nav){
769
- padding-bottom:var(--tds-page-header-padding-y);
771
+ :is(.tds-checkbox input[type="checkbox"]):focus-visible{
772
+ outline:var(--t-focus-ring-outline);
773
+ outline-offset:var(--t-focus-ring-offset);
774
+ }
775
+
776
+ :is(.tds-checkbox input[type="checkbox"]):disabled{
777
+ pointer-events:none;
778
+ }
779
+
780
+ @media (prefers-reduced-motion: reduce){
781
+
782
+ .tds-checkbox input[type="checkbox"]{
783
+ --tds-checkbox-transition-property:none;
770
784
  }
785
+ }
771
786
 
772
- .tds-page-header.inactive{
773
- background:var(--tds-page-header-background-color-inactive);
787
+ .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
788
+ --tds-checkbox-input-background-color:var(--t-fill-color-control);
789
+ --tds-checkbox-input-border-color:var(--t-border-color-control-info);
790
+ --tds-checkbox-input-icon-visibility:visible;
791
+ --tds-checkbox-input-icon-opacity:1;
774
792
  }
775
793
 
776
- .tds-page-header :is([slot="actions"],.tds-page-header__actions){
777
- width:100%;
794
+ :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
795
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
796
+ --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
797
+ }
798
+
799
+ .tds-checkbox:has(input:checked){
800
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
778
801
  }
779
802
 
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;
803
+ .tds-checkbox:has(input:indeterminate){
804
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
787
805
  }
788
806
 
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);
807
+ .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
808
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
809
+ --tds-checkbox-description-color:var(--t-text-color-status-error);
810
+ --tds-checkbox-description-invalid-icon-display:inline-block;
811
+ }
812
+
813
+ :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
814
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
815
+ --tds-checkbox-input-background-color:var(--t-form-background-color-error);
797
816
  }
798
817
 
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
+ :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{
819
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
820
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error);
818
821
  }
819
822
 
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);
823
+ :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){
824
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
825
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
825
826
  }
826
827
 
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
- }
828
+ .tds-checkbox:has(input:required) label::after{
829
+ margin-left:.25ch;
830
+ color:var(--t-text-color-status-error);
831
+ content:"*";
832
+ }
833
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
- }
834
+ .tds-checkbox:has(input:disabled){
835
+ --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
836
+ --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
839
837
 
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
- }
838
+ --tds-checkbox-label-color:var(--t-form-color-disabled);
839
+ --tds-checkbox-description-color:var(--t-form-color-disabled);
840
+ --tds-checkbox-cursor:not-allowed;
841
+ }
858
842
 
859
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
860
- position:relative;
843
+ .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
844
+ --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
861
845
  }
862
846
 
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{
847
+ .tds-checkbox-description{
886
848
  display:flex;
887
- flex-direction:column;
888
- gap:var(--t-spacing-2) var(--t-spacing-1);
849
+ grid-area:2 / 2;
850
+ gap:var(--t-spacing-half);
889
851
  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;
852
+ padding-inline-start:var(--t-spacing-1);
853
+ margin:0;
854
+ font-size:var(--tds-checkbox-description-font-size);
855
+ line-height:var(--tds-checkbox-description-line-height);
856
+ color:var(--tds-checkbox-description-color);
857
+ cursor:text;
943
858
  }
944
859
 
945
- @keyframes indicator-pulse{
946
- 0%{
947
- opacity:.3;
948
- transform:scale(.9);
860
+ .tds-checkbox-description .tds-checkbox-description-invalid-icon{
861
+ display:var(--tds-checkbox-description-invalid-icon-display);
862
+ flex-shrink:0;
863
+ margin-top:calc(.5lh - .5em);
864
+ line-height:var(--tds-checkbox-description-line-height);
949
865
  }
950
866
 
951
- 100%{
952
- opacity:0;
953
- transform:scale(1.75);
954
- }
867
+ .tds-checkbox--sm{
868
+ --tds-checkbox-line-height:1.35;
869
+ --tds-checkbox-input-size:var(--t-element-size-sm);
870
+ --tds-checkbox-font-size:var(--t-font-size-sm);
871
+ --tds-checkbox-description-font-size:var(--t-font-size-xs);
872
+ --tds-checkbox-description-line-height:1.3;
955
873
  }
956
874
 
957
875
 
@@ -1316,199 +1234,78 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1316
1234
  flex-direction:column;
1317
1235
  }
1318
1236
 
1319
- .tds-checkbox{
1320
- --tds-checkbox-font-size:var(--t-font-size-md);
1321
- --tds-checkbox-cursor:pointer;
1322
- --tds-checkbox-line-height:1.4;
1323
- --tds-checkbox-transition-property:background-color, border-color;
1324
-
1325
- --tds-checkbox-input-size:var(--t-element-size-md);
1326
- --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
1327
- --tds-checkbox-input-border-color:var(--t-form-border-color);
1328
- --tds-checkbox-input-background-color:var(--t-form-background-color);
1329
-
1330
- --tds-checkbox-input-icon:none;
1331
- --tds-checkbox-input-icon-visibility:hidden;
1332
- --tds-checkbox-input-icon-opacity:0;
1333
- --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
1334
-
1335
- --tds-checkbox-label-color:var(--t-form-color);
1237
+ .tds-checkbox-group{
1238
+ --tds-checkbox-group-font-size:var(--t-font-size-md);
1239
+ --tds-checkbox-group-line-height:1.4;
1240
+ --tds-checkbox-group-gap:var(--t-spacing-1);
1336
1241
 
1337
- --tds-checkbox-description-font-size:var(--t-font-size-sm);
1338
- --tds-checkbox-description-line-height:1.35;
1339
- --tds-checkbox-description-color:var(--t-text-color-secondary);
1340
- --tds-checkbox-description-invalid-icon-display:none;
1242
+ --tds-checkbox-group-description-font-size:var(--t-font-size-sm);
1243
+ --tds-checkbox-group-description-line-height:1.35;
1244
+ --tds-checkbox-group-description-color:var(--t-text-color-secondary);
1245
+ --tds-checkbox-group-description-invalid-icon-display:none;
1246
+ display:flex;
1247
+ flex-direction:column;
1248
+ gap:0;
1249
+ padding:0;
1250
+ margin:0;
1341
1251
 
1342
- position:relative;
1343
- display:inline-grid;
1344
- grid-template-columns:auto;
1345
- grid-auto-columns:1fr;
1346
- gap:var(--t-spacing-fourth) 0;
1347
- line-height:var(--tds-checkbox-line-height);
1348
- -webkit-user-select:none;
1349
- -moz-user-select:none;
1350
- user-select:none;
1252
+ font-size:var(--tds-checkbox-group-font-size);
1253
+ line-height:var(--tds-checkbox-group-line-height);
1254
+ border:0;
1351
1255
  }
1352
1256
 
1353
- .tds-checkbox label{
1354
- grid-area:1 / 2;
1355
- padding-inline-start:var(--t-spacing-1);
1356
- font-size:var(--tds-checkbox-font-size);
1357
- font-weight:var(--t-font-weight-normal);
1358
- color:var(--tds-checkbox-label-color);
1359
- cursor:var(--tds-checkbox-cursor);
1360
- }
1361
-
1362
- .tds-checkbox tds-indeterminate{
1363
- display:flex;
1257
+ .tds-checkbox-group legend{
1258
+ float:left;
1259
+ padding:0;
1260
+ margin:0;
1364
1261
  }
1365
1262
 
1366
- .tds-checkbox input[type="checkbox"]{
1367
- position:relative;
1368
- width:1em;
1369
- height:1em;
1370
- margin:calc((1lh - 1em) / 2) 0 0;
1371
- font-size:var(--tds-checkbox-font-size);
1372
- line-height:inherit;
1373
- -webkit-appearance:none;
1374
- -moz-appearance:none;
1375
- appearance:none;
1376
- cursor:var(--tds-checkbox-cursor);
1377
- background-color:var(--tds-checkbox-input-background-color);
1378
- border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
1379
- border-radius:var(--tds-checkbox-input-border-radius);
1380
- transition-timing-function:var(--t-ease-in-out);
1381
- transition-duration:var(--t-duration-200);
1382
- transition-property:var(--tds-checkbox-transition-property);
1263
+ .tds-checkbox-group[aria-invalid="true"]{
1264
+ --tds-checkbox-group-description-color:var(--t-text-color-status-error);
1265
+ --tds-checkbox-group-description-invalid-icon-display:inline-block;
1383
1266
  }
1384
1267
 
1385
- :is(.tds-checkbox input[type="checkbox"])::before{
1386
- position:absolute;
1387
- top:50%;
1388
- left:50%;
1389
- visibility:var(--tds-checkbox-input-icon-visibility);
1390
- width:100%;
1391
- height:100%;
1392
- content:"";
1393
- background-color:var(--tds-checkbox-input-icon-fill);
1394
- border-radius:var(--tds-checkbox-input-border-radius);
1395
- opacity:var(--tds-checkbox-input-icon-opacity);
1396
- -webkit-mask-image:var(--tds-checkbox-input-icon);
1397
- mask-image:var(--tds-checkbox-input-icon);
1398
- -webkit-mask-repeat:no-repeat;
1399
- mask-repeat:no-repeat;
1400
- -webkit-mask-size:contain;
1401
- mask-size:contain;
1402
- transform:translate(-50%, -50%);
1403
- }
1404
-
1405
- :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
1406
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
1407
- --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
1268
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) legend::after{
1269
+ margin-left:.25ch;
1270
+ color:var(--t-text-color-status-error);
1271
+ content:"*";
1408
1272
  }
1409
1273
 
1410
- :is(.tds-checkbox input[type="checkbox"]):focus-visible{
1411
- outline:var(--t-focus-ring-outline);
1412
- outline-offset:var(--t-focus-ring-offset);
1274
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
1275
+ content:none;
1413
1276
  }
1414
1277
 
1415
- :is(.tds-checkbox input[type="checkbox"]):disabled{
1416
- pointer-events:none;
1417
- }
1278
+ .tds-checkbox-group-fields{
1279
+ display:flex;
1280
+ flex-direction:column;
1281
+ gap:var(--tds-checkbox-group-gap);
1282
+ align-items:flex-start;
1283
+ margin-top:var(--t-spacing-1);
1284
+ }
1418
1285
 
1419
- @media (prefers-reduced-motion: reduce){
1420
-
1421
- .tds-checkbox input[type="checkbox"]{
1422
- --tds-checkbox-transition-property:none;
1423
- }
1424
- }
1425
-
1426
- .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
1427
- --tds-checkbox-input-background-color:var(--t-fill-color-control);
1428
- --tds-checkbox-input-border-color:var(--t-border-color-control-info);
1429
- --tds-checkbox-input-icon-visibility:visible;
1430
- --tds-checkbox-input-icon-opacity:1;
1431
- }
1432
-
1433
- :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
1434
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
1435
- --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
1436
- }
1437
-
1438
- .tds-checkbox:has(input:checked){
1439
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
1440
- }
1441
-
1442
- .tds-checkbox:has(input:indeterminate){
1443
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
1444
- }
1445
-
1446
- .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
1447
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1448
- --tds-checkbox-description-color:var(--t-text-color-status-error);
1449
- --tds-checkbox-description-invalid-icon-display:inline-block;
1450
- }
1451
-
1452
- :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
1453
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1454
- --tds-checkbox-input-background-color:var(--t-form-background-color-error);
1455
- }
1456
-
1457
- :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{
1458
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1459
- --tds-checkbox-input-background-color:var(--t-form-border-color-error);
1460
- }
1461
-
1462
- :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){
1463
- --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
1464
- --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
1465
- }
1466
-
1467
- .tds-checkbox:has(input:required) label::after{
1468
- margin-left:.25ch;
1469
- color:var(--t-text-color-status-error);
1470
- content:"*";
1471
- }
1472
-
1473
- .tds-checkbox:has(input:disabled){
1474
- --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
1475
- --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
1476
-
1477
- --tds-checkbox-label-color:var(--t-form-color-disabled);
1478
- --tds-checkbox-description-color:var(--t-form-color-disabled);
1479
- --tds-checkbox-cursor:not-allowed;
1480
- }
1481
-
1482
- .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
1483
- --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
1484
- }
1485
-
1486
- .tds-checkbox-description{
1286
+ .tds-checkbox-group-description{
1487
1287
  display:flex;
1488
- grid-area:2 / 2;
1489
1288
  gap:var(--t-spacing-half);
1490
1289
  align-items:flex-start;
1491
- padding-inline-start:var(--t-spacing-1);
1492
- margin:0;
1493
- font-size:var(--tds-checkbox-description-font-size);
1494
- line-height:var(--tds-checkbox-description-line-height);
1495
- color:var(--tds-checkbox-description-color);
1290
+ margin:var(--t-spacing-fourth) 0 0;
1291
+ font-size:var(--tds-checkbox-group-description-font-size);
1292
+ line-height:var(--tds-checkbox-group-description-line-height);
1293
+ color:var(--tds-checkbox-group-description-color);
1496
1294
  cursor:text;
1497
1295
  }
1498
1296
 
1499
- .tds-checkbox-description .tds-checkbox-description-invalid-icon{
1500
- display:var(--tds-checkbox-description-invalid-icon-display);
1297
+ .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
1298
+ display:var(--tds-checkbox-group-description-invalid-icon-display);
1501
1299
  flex-shrink:0;
1502
1300
  margin-top:calc(.5lh - .5em);
1503
- line-height:var(--tds-checkbox-description-line-height);
1301
+ line-height:var(--tds-checkbox-group-description-line-height);
1504
1302
  }
1505
1303
 
1506
- .tds-checkbox--sm{
1507
- --tds-checkbox-line-height:1.35;
1508
- --tds-checkbox-input-size:var(--t-element-size-sm);
1509
- --tds-checkbox-font-size:var(--t-font-size-sm);
1510
- --tds-checkbox-description-font-size:var(--t-font-size-xs);
1511
- --tds-checkbox-description-line-height:1.3;
1304
+ .tds-checkbox-group--sm{
1305
+ --tds-checkbox-group-line-height:1.35;
1306
+ --tds-checkbox-group-font-size:var(--t-font-size-sm);
1307
+ --tds-checkbox-group-description-font-size:var(--t-font-size-xs);
1308
+ --tds-checkbox-group-description-line-height:1.3;
1512
1309
  }
1513
1310
 
1514
1311
  .tds-button-group{
@@ -1576,373 +1373,550 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1576
1373
  }
1577
1374
  }
1578
1375
 
1579
- .tds-radio{
1580
- --tds-radio-font-size:var(--t-font-size-md);
1581
- --tds-radio-cursor:pointer;
1582
- --tds-radio-line-height:1.4;
1583
- --tds-radio-transition-property:border-width;
1376
+ .tds-modal-overlay{
1377
+ --tds-modal-min-margin-block:var(--t-spacing-3);
1584
1378
 
1585
- --tds-radio-input-size:var(--t-element-size-md);
1586
- --tds-radio-input-border-radius:var(--t-border-radius-round);
1587
- --tds-radio-input-border-color:var(--t-form-border-color);
1588
- --tds-radio-input-border-width:var(--t-form-border-width);
1589
- --tds-radio-input-background-color:var(--t-form-background-color);
1379
+ position:fixed;
1380
+ inset:0;
1381
+ z-index:1000;
1382
+ display:grid;
1383
+ grid-template-rows:minmax(var(--tds-modal-min-margin-block), 1fr) auto minmax(var(--tds-modal-min-margin-block), 1fr);
1384
+ justify-items:center;
1385
+ overflow-y:auto;
1386
+ background:hsl(0 0% 0% / 40%);
1387
+ }
1590
1388
 
1591
- --tds-radio-label-color:var(--t-form-color);
1389
+ .tds-modal-overlay[data-entering]{
1390
+ animation:tds-modal-overlay-fade var(--t-duration-300) var(--t-ease-out);
1391
+ }
1592
1392
 
1593
- --tds-radio-description-font-size:var(--t-font-size-sm);
1594
- --tds-radio-description-line-height:1.35;
1595
- --tds-radio-description-color:var(--t-text-color-secondary);
1393
+ .tds-modal-overlay[data-exiting]{
1394
+ animation:tds-modal-overlay-fade var(--t-duration-200) var(--t-ease-in) reverse;
1395
+ }
1596
1396
 
1597
- position:relative;
1598
- display:inline-grid;
1599
- grid-template-columns:auto;
1600
- grid-auto-columns:1fr;
1601
- gap:var(--t-spacing-fourth) 0;
1602
- line-height:var(--tds-radio-line-height);
1603
- -webkit-user-select:none;
1604
- -moz-user-select:none;
1605
- user-select:none;
1397
+ @keyframes tds-modal-overlay-fade{
1398
+ from{
1399
+ opacity:0;
1400
+ }
1606
1401
  }
1607
1402
 
1608
- .tds-radio label{
1609
- grid-area:1 / 2;
1610
- padding-inline-start:var(--t-spacing-1);
1611
- font-size:var(--tds-radio-font-size);
1612
- font-weight:var(--t-font-weight-normal);
1613
- color:var(--tds-radio-label-color);
1614
- cursor:var(--tds-radio-cursor);
1403
+ .tds-modal-frame{
1404
+ --tds-modal-width:600px;
1405
+ --tds-modal-edge-margin-inline:var(--t-spacing-3);
1406
+ display:flex;
1407
+
1408
+ grid-row:2;
1409
+ justify-content:center;
1410
+ width:min(var(--tds-modal-width), calc(100% - var(--tds-modal-edge-margin-inline) * 2));
1411
+ }
1412
+
1413
+ .tds-modal-frame[data-entering]{
1414
+ animation:tds-modal-zoom var(--t-duration-300) var(--t-ease-out);
1615
1415
  }
1616
1416
 
1617
- .tds-radio input[type="radio"]{
1618
- position:relative;
1619
- width:1em;
1620
- height:1em;
1621
- margin:calc((1lh - 1em) / 2) 0 0;
1622
- font-size:var(--tds-radio-font-size);
1623
- line-height:inherit;
1624
- -webkit-appearance:none;
1625
- -moz-appearance:none;
1626
- appearance:none;
1627
- cursor:var(--tds-radio-cursor);
1628
- background-color:var(--tds-radio-input-background-color);
1629
- border:var(--tds-radio-input-border-width) solid var(--tds-radio-input-border-color);
1630
- border-radius:var(--tds-radio-input-border-radius);
1631
- transition-timing-function:var(--t-ease-in-out);
1632
- transition-duration:var(--t-duration-200);
1633
- transition-property:var(--tds-radio-transition-property);
1417
+ .tds-modal-frame[data-exiting]{
1418
+ animation:tds-modal-zoom var(--t-duration-200) var(--t-ease-in) reverse;
1634
1419
  }
1635
1420
 
1636
- :is(.tds-radio input[type="radio"]):hover:not(:disabled){
1637
- --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
1638
- --tds-radio-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
1639
- }
1421
+ .tds-modal-frame--sm{
1422
+ --tds-modal-width:400px;
1423
+ }
1640
1424
 
1641
- :is(.tds-radio input[type="radio"]):focus-visible{
1642
- outline:var(--t-focus-ring-outline);
1643
- outline-offset:var(--t-focus-ring-offset);
1644
- }
1425
+ .tds-modal-frame--lg{
1426
+ --tds-modal-width:800px;
1427
+ }
1645
1428
 
1646
- :is(.tds-radio input[type="radio"]):disabled{
1647
- pointer-events:none;
1648
- }
1429
+ .tds-modal-frame--xl{
1430
+ --tds-modal-width:1000px;
1431
+ }
1432
+
1433
+ @keyframes tds-modal-zoom{
1434
+ from{
1435
+ opacity:0;
1436
+ scale:.96;
1437
+ }
1438
+ }
1649
1439
 
1650
1440
  @media (prefers-reduced-motion: reduce){
1441
+ .tds-modal-overlay[data-entering],
1442
+ .tds-modal-overlay[data-exiting],
1443
+ .tds-modal-frame[data-entering],
1444
+ .tds-modal-frame[data-exiting]{
1445
+ animation:none;
1446
+ }
1447
+ }
1651
1448
 
1652
- .tds-radio input[type="radio"]{
1653
- --tds-radio-transition-property:none;
1449
+ .tds-modal{
1450
+ display:flex;
1451
+ flex-direction:column;
1452
+ width:100%;
1453
+ padding-block-start:var(--t-spacing-3);
1454
+ padding-inline:0;
1455
+ background:var(--t-surface-color-card);
1456
+
1457
+ border:0;
1458
+ border-radius:var(--t-border-radius-lg);
1459
+ box-shadow:0 4px 18px 0 #0003;
1460
+ }
1461
+
1462
+ .tds-modal:focus{
1463
+ outline:none;
1654
1464
  }
1655
- }
1656
1465
 
1657
- .tds-radio:has(input:checked){
1658
- --tds-radio-input-background-color:var(--t-icon-color-inverted);
1659
- --tds-radio-input-border-color:var(--t-border-color-control-info);
1660
- --tds-radio-input-border-width:4px;
1466
+ .tds-modal-header{
1467
+ display:grid;
1468
+ grid-template-columns:1fr auto;
1469
+ -moz-column-gap:var(--t-spacing-2);
1470
+ column-gap:var(--t-spacing-2);
1471
+ padding-block:0;
1472
+ padding-inline:var(--t-spacing-4);
1473
+ }
1474
+
1475
+ .tds-modal-title{
1476
+ grid-row:1;
1477
+ grid-column:1;
1478
+ margin:0;
1479
+ font-size:var(--t-font-size-2xl);
1480
+ font-weight:var(--t-font-weight-medium);
1481
+ line-height:140%;
1482
+ color:var(--t-text-color-headline);
1483
+ }
1484
+
1485
+ .tds-modal-subtitle{
1486
+ grid-row:2;
1487
+ grid-column:1;
1488
+ margin:0;
1489
+ font-size:var(--t-font-size-md);
1490
+ font-weight:var(--t-font-weight-medium);
1491
+ line-height:140%;
1492
+ color:var(--t-text-color-secondary);
1493
+ }
1494
+
1495
+ .tds-modal-close{
1496
+ grid-row:1;
1497
+ grid-column:2;
1498
+ align-self:center;
1499
+ color:var(--t-icon-color-dim);
1500
+ }
1501
+
1502
+ .tds-modal-body{
1503
+ padding-block:var(--t-spacing-3);
1504
+ padding-inline:var(--t-spacing-4);
1505
+ }
1506
+
1507
+ .tds-modal-body--full-width{
1508
+ padding-inline:0;
1509
+ }
1510
+
1511
+ .tds-modal-footer{
1512
+ display:flex;
1513
+ gap:var(--t-spacing-2);
1514
+ align-items:center;
1515
+ justify-content:flex-end;
1516
+ padding-block:var(--t-spacing-3);
1517
+ padding-inline:var(--t-spacing-4);
1518
+ border-top:1px solid var(--t-border-color);
1519
+ }
1520
+
1521
+ .tds-modal-footer > [slot="start"]{
1522
+ margin-inline-end:auto;
1523
+ }
1524
+
1525
+ @media (min-width: 720px){
1526
+ .tds-modal-overlay{
1527
+ --tds-modal-min-margin-block:0;
1661
1528
  }
1662
1529
 
1663
- .tds-radio:has(input:checked) input:hover:not(:disabled){
1664
- --tds-radio-input-background-color:var(--t-icon-color-inverted);
1665
- --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
1666
- }
1530
+ .tds-modal-footer{
1531
+ position:sticky;
1532
+ bottom:0;
1533
+ background:var(--t-surface-color-card);
1534
+ border-end-start-radius:var(--t-border-radius-lg);
1535
+ border-end-end-radius:var(--t-border-radius-lg);
1536
+ }
1537
+ }
1667
1538
 
1668
- .tds-radio:has(input:user-invalid){
1669
- --tds-radio-input-border-color:var(--t-form-border-color-error);
1539
+ @layer t-critical{
1540
+ tds-page-header:not(.hydrated){
1541
+ display:none;
1670
1542
  }
1543
+ }
1671
1544
 
1672
- .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
1673
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1674
- --tds-radio-input-background-color:var(--t-form-background-color-error);
1675
- }
1545
+ @layer t-component{
1546
+ .tds-page-header{
1547
+ --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
1548
+ --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
1549
+ --tds-page-header-color:var(--t-text-color);
1550
+ --tds-page-header-bottom-border-color:transparent;
1551
+ --tds-page-header-headline-color:var(--t-text-color-headline);
1552
+ --tds-page-header-headline-font-size:var(--t-font-size-2xl);
1553
+ --tds-page-header-padding-x:var(--t-spacing-2);
1554
+ --tds-page-header-padding-y:var(--t-spacing-2);
1555
+ --tds-page-header-nav-padding-x:var(--tds-page-header-padding-x, var(--t-spacing-3));
1556
+ --tds-page-header-nav-gap:var(--t-spacing-1);
1557
+ --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%);
1558
+ --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
1559
+ --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
1560
+ --tds-page-header-nav-item-color:var(--t-text-color-secondary);
1561
+ --tds-page-header-nav-item-background-color:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 35%);
1562
+ --tds-page-header-nav-item-border-width:1px;
1676
1563
 
1677
- .tds-radio:has(input:disabled){
1678
- --tds-radio-input-background-color:var(--t-form-background-color-disabled);
1679
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
1564
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
1565
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color);
1680
1566
 
1681
- --tds-radio-label-color:var(--t-form-color-disabled);
1682
- --tds-radio-description-color:var(--t-form-color-disabled);
1683
- --tds-radio-cursor:not-allowed;
1567
+ --tds-page-header-nav-item-color-hover:var(--t-text-color);
1568
+ --tds-page-header-nav-item-background-color-hover:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 20%);
1569
+ --tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
1570
+
1571
+ --tds-page-header-nav-item-background-color-active:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 10%);
1572
+ --tds-page-header-nav-item-border-color-active:var(--tds-page-header-nav-item-background-color-active);
1573
+
1574
+ --tds-page-header-nav-item-color-disabled:var(--t-text-color-disabled);
1575
+ --tds-page-header-nav-item-background-color-disabled:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 50%);
1576
+ --tds-page-header-nav-item-border-color-disabled:var(--tds-page-header-nav-item-background-color-disabled);
1577
+
1578
+ --tds-page-header-nav-item-color-selected:var(--t-text-color);
1579
+ --tds-page-header-nav-item-background-color-selected:var(--t-surface-color-canvas);
1580
+ --tds-page-header-nav-item-border-color-selected:var(--tds-page-header-nav-item-background-color-selected);
1581
+ --tds-page-header-nav-item-border-bottom-color-selected:var(--tds-page-header-nav-item-background-color-selected);
1582
+ --tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning);
1684
1583
  }
1685
1584
 
1686
- .tds-radio:has(input:disabled) input:checked{
1687
- --tds-radio-input-background-color:var(--t-form-background-color);
1688
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
1585
+ .tds-page-header--profile{
1586
+ --tds-page-header-padding-y:20px;
1587
+ }
1588
+
1589
+ @supports (color: light-dark(#fff, #000)){
1590
+ .tds-page-header{
1591
+ --tds-page-header-nav-background-start:light-dark(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0));
1592
+ --tds-page-header-nav-background-end:light-dark(rgba(0, 0, 0, .05), rgba(255, 255, 255, .1));
1689
1593
  }
1594
+ }
1690
1595
 
1691
- .tds-radio-description{
1692
- display:flex;
1693
- grid-area:2 / 2;
1694
- gap:var(--t-spacing-half);
1695
- align-items:flex-start;
1696
- padding-inline-start:var(--t-spacing-1);
1697
- margin:0;
1698
- font-size:var(--tds-radio-description-font-size);
1699
- line-height:var(--tds-radio-description-line-height);
1700
- color:var(--tds-radio-description-color);
1701
- cursor:text;
1596
+ @media (min-width: 600px){
1597
+ .tds-page-header{
1598
+ --tds-page-header-background-color:var(--t-surface-color-canvas);
1599
+ --tds-page-header-color:var(--t-text-color-secondary);
1600
+ --tds-page-header-bottom-border-color:var(--t-border-color);
1601
+ --tds-page-header-padding-x:var(--t-spacing-3);
1602
+ --tds-page-header-headline-font-size:var(--t-font-size-3xl);
1603
+ --tds-page-header-nav-gap:var(--t-spacing-half);
1604
+ --tds-page-header-nav-background:transparent;
1605
+ --tds-page-header-nav-item-padding-x:var(--t-spacing-2);
1606
+ --tds-page-header-nav-item-border-width:1px;
1607
+ --tds-page-header-nav-item-color:var(--t-text-color);
1608
+ --tds-page-header-nav-item-background-color:var(--t-fill-color-neutral-070);
1609
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-bottom-border-color);
1610
+ --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-060);
1611
+ --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-050);
1612
+ --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
1613
+ --tds-page-header-nav-item-border-color-selected:var(--t-border-color);
1614
+ }
1615
+ }
1702
1616
  }
1703
1617
 
1704
- .tds-radio--sm{
1705
- --tds-radio-line-height:1.35;
1706
- --tds-radio-input-size:var(--t-element-size-sm);
1707
- --tds-radio-font-size:var(--t-font-size-sm);
1708
- --tds-radio-description-font-size:var(--t-font-size-xs);
1709
- --tds-radio-description-line-height:1.3;
1618
+ .tds-page-header{
1619
+ display:flex;
1620
+ flex-direction:column;
1621
+ padding-top:var(--tds-page-header-padding-y);
1622
+ color:var(--tds-page-header-color);
1623
+ background:var(--tds-page-header-background-color);
1624
+ border-bottom:1px solid var(--tds-page-header-bottom-border-color);
1710
1625
  }
1711
1626
 
1712
- .tds-checkbox-group{
1713
- --tds-checkbox-group-font-size:var(--t-font-size-md);
1714
- --tds-checkbox-group-line-height:1.4;
1715
- --tds-checkbox-group-gap:var(--t-spacing-1);
1627
+ .tds-page-header:not(.has-nav){
1628
+ padding-bottom:var(--tds-page-header-padding-y);
1629
+ }
1716
1630
 
1717
- --tds-checkbox-group-description-font-size:var(--t-font-size-sm);
1718
- --tds-checkbox-group-description-line-height:1.35;
1719
- --tds-checkbox-group-description-color:var(--t-text-color-secondary);
1720
- --tds-checkbox-group-description-invalid-icon-display:none;
1721
- display:flex;
1722
- flex-direction:column;
1723
- gap:0;
1724
- padding:0;
1725
- margin:0;
1631
+ .tds-page-header.inactive{
1632
+ background:var(--tds-page-header-background-color-inactive);
1633
+ }
1726
1634
 
1727
- font-size:var(--tds-checkbox-group-font-size);
1728
- line-height:var(--tds-checkbox-group-line-height);
1729
- border:0;
1730
- }
1635
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
1636
+ width:100%;
1637
+ }
1731
1638
 
1732
- .tds-checkbox-group legend{
1733
- float:left;
1734
- padding:0;
1735
- margin:0;
1639
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
1640
+ display:flex;
1641
+ flex-flow:row wrap;
1642
+ gap:var(--t-spacing-half) var(--t-spacing-1);
1643
+ align-items:flex-start;
1644
+ justify-content:flex-start;
1645
+ min-width:0;
1736
1646
  }
1737
1647
 
1738
- .tds-checkbox-group[aria-invalid="true"]{
1739
- --tds-checkbox-group-description-color:var(--t-text-color-status-error);
1740
- --tds-checkbox-group-description-invalid-icon-display:inline-block;
1741
- }
1648
+ :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{
1649
+ display:flex;
1650
+ gap:var(--tds-page-header-nav-gap);
1651
+ padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
1652
+ margin:0 0 -1px;
1653
+ overflow:auto;
1654
+ list-style:none;
1655
+ background:var(--tds-page-header-nav-background);
1656
+ }
1657
+
1658
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button){
1659
+ position:relative;
1660
+ display:inline-flex;
1661
+ padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
1662
+ font-size:var(--t-font-size-sm);
1663
+ line-height:22px;
1664
+ color:var(--tds-page-header-nav-item-color);
1665
+ white-space:nowrap;
1666
+ text-decoration:none;
1667
+ -webkit-appearance:none;
1668
+ -moz-appearance:none;
1669
+ appearance:none;
1670
+ cursor:pointer;
1671
+ outline-offset:-2px;
1672
+ background-color:var(--tds-page-header-nav-item-background-color);
1673
+ background-clip:padding-box;
1674
+ border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
1675
+ border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
1676
+ border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
1677
+ }
1678
+
1679
+ .selected:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)){
1680
+ --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-selected);
1681
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-selected);
1682
+ --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-selected);
1683
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-selected);
1684
+ }
1685
+
1686
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):hover{
1687
+ --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
1688
+ --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
1689
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
1690
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-hover);
1691
+ }
1692
+
1693
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):active{
1694
+ background-color:var(--tds-page-header-nav-item-background-color-active);
1695
+ border-color:var(--tds-page-header-nav-item-border-color-active);
1696
+ border-bottom-color:var(--tds-page-header-nav-item-background-color-active);
1697
+ }
1698
+
1699
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):disabled{
1700
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-disabled);
1701
+ color:var(--tds-page-header-nav-item-color-disabled);
1702
+ cursor:not-allowed;
1703
+ background-color:var(--tds-page-header-nav-item-background-color-disabled);
1704
+ opacity:1;
1705
+ }
1706
+
1707
+ @media (min-width: 600px){
1708
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected)::after{
1709
+ position:absolute;
1710
+ inset:auto -1px -1px;
1711
+ height:1px;
1712
+ pointer-events:none;
1713
+ content:"";
1714
+ background-color:var(--tds-page-header-bottom-border-color);
1715
+ }
1716
+ }
1742
1717
 
1743
- .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) legend::after{
1744
- margin-left:.25ch;
1745
- color:var(--t-text-color-status-error);
1746
- content:"*";
1718
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
1719
+ position:relative;
1747
1720
  }
1748
1721
 
1749
- .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
1750
- content:none;
1751
- }
1722
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator)) :is(a,button){
1723
+ -webkit-mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
1724
+ mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
1725
+ }
1752
1726
 
1753
- .tds-checkbox-group-fields{
1754
- display:flex;
1755
- flex-direction:column;
1756
- gap:var(--tds-checkbox-group-gap);
1757
- align-items:flex-start;
1758
- margin-top:var(--t-spacing-1);
1759
- }
1727
+ :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{
1728
+ position:absolute;
1729
+ top:-5px;
1730
+ right:-2px;
1731
+ width:10px;
1732
+ height:10px;
1733
+ content:"";
1734
+ background:var(--tds-page-header-nav-item-indicator-color);
1735
+ border-radius:50%;
1736
+ }
1760
1737
 
1761
- .tds-checkbox-group-description{
1738
+ @media (prefers-reduced-motion: no-preference){
1739
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
1740
+ animation:indicator-pulse 1.25s ease infinite;
1741
+ }
1742
+ }
1743
+
1744
+ .tds-page-header__title-bar{
1762
1745
  display:flex;
1763
- gap:var(--t-spacing-half);
1746
+ flex-direction:column;
1747
+ gap:var(--t-spacing-2) var(--t-spacing-1);
1764
1748
  align-items:flex-start;
1765
- margin:var(--t-spacing-fourth) 0 0;
1766
- font-size:var(--tds-checkbox-group-description-font-size);
1767
- line-height:var(--tds-checkbox-group-description-line-height);
1768
- color:var(--tds-checkbox-group-description-color);
1769
- cursor:text;
1749
+ justify-content:space-between;
1750
+ padding:0 var(--tds-page-header-padding-x);
1770
1751
  }
1771
1752
 
1772
- .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
1773
- display:var(--tds-checkbox-group-description-invalid-icon-display);
1774
- flex-shrink:0;
1775
- margin-top:calc(.5lh - .5em);
1776
- line-height:var(--tds-checkbox-group-description-line-height);
1753
+ .tds-page-header--profile > .tds-page-header__title-bar{
1754
+ align-items:center;
1777
1755
  }
1778
1756
 
1779
- .tds-checkbox-group--sm{
1780
- --tds-checkbox-group-line-height:1.35;
1781
- --tds-checkbox-group-font-size:var(--t-font-size-sm);
1782
- --tds-checkbox-group-description-font-size:var(--t-font-size-xs);
1783
- --tds-checkbox-group-description-line-height:1.3;
1784
- }
1785
-
1786
- .tds-modal-overlay{
1787
- --tds-modal-min-margin-block:var(--t-spacing-3);
1788
-
1789
- position:fixed;
1790
- inset:0;
1791
- z-index:1000;
1792
- display:grid;
1793
- grid-template-rows:minmax(var(--tds-modal-min-margin-block), 1fr) auto minmax(var(--tds-modal-min-margin-block), 1fr);
1794
- justify-items:center;
1795
- overflow-y:auto;
1796
- background:hsl(0 0% 0% / 40%);
1757
+ .tds-page-header__primary{
1758
+ width:100%;
1797
1759
  }
1798
1760
 
1799
- .tds-modal-overlay[data-entering]{
1800
- animation:tds-modal-overlay-fade var(--t-duration-300) var(--t-ease-out);
1761
+ .tds-page-header__primary h1{
1762
+ margin:0;
1763
+ font-size:var(--tds-page-header-headline-font-size);
1764
+ font-weight:var(--t-font-weight-normal);
1765
+ line-height:32px;
1766
+ color:var(--tds-page-header-headline-color);
1767
+ overflow-wrap:break-word;
1801
1768
  }
1802
1769
 
1803
- .tds-modal-overlay[data-exiting]{
1804
- animation:tds-modal-overlay-fade var(--t-duration-200) var(--t-ease-in) reverse;
1770
+ @media (min-width: 960px){
1771
+ .tds-page-header__primary{
1772
+ flex:1 1 max-content;
1773
+ width:auto;
1774
+ min-width:0;
1775
+ max-width:100%;
1805
1776
  }
1806
1777
 
1807
- @keyframes tds-modal-overlay-fade{
1808
- from{
1809
- opacity:0;
1778
+ .tds-page-header__title-bar,
1779
+ .tds-page-header--profile .tds-page-header__title-bar{
1780
+ flex-flow:row nowrap;
1781
+ row-gap:12px;
1782
+ align-items:flex-start;
1810
1783
  }
1811
- }
1784
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
1785
+ width:auto;
1786
+ }
1812
1787
 
1813
- .tds-modal-frame{
1814
- --tds-modal-width:600px;
1815
- --tds-modal-edge-margin-inline:var(--t-spacing-3);
1816
- display:flex;
1788
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
1789
+ justify-content:flex-end;
1790
+ }
1791
+ }
1817
1792
 
1818
- grid-row:2;
1819
- justify-content:center;
1820
- width:min(var(--tds-modal-width), calc(100% - var(--tds-modal-edge-margin-inline) * 2));
1793
+ .tds-page-header-phone,
1794
+ .tds-page-header-email{
1795
+ color:var(--tds-page-header-color);
1796
+ white-space:nowrap;
1797
+ }
1798
+ .tds-page-header-email{
1799
+ max-width:100%;
1800
+ overflow:hidden;
1801
+ text-overflow:ellipsis;
1821
1802
  }
1822
1803
 
1823
- .tds-modal-frame[data-entering]{
1824
- animation:tds-modal-zoom var(--t-duration-300) var(--t-ease-out);
1804
+ @keyframes indicator-pulse{
1805
+ 0%{
1806
+ opacity:.3;
1807
+ transform:scale(.9);
1825
1808
  }
1826
1809
 
1827
- .tds-modal-frame[data-exiting]{
1828
- animation:tds-modal-zoom var(--t-duration-200) var(--t-ease-in) reverse;
1810
+ 100%{
1811
+ opacity:0;
1812
+ transform:scale(1.75);
1829
1813
  }
1830
-
1831
- .tds-modal-frame--sm{
1832
- --tds-modal-width:400px;
1833
1814
  }
1834
1815
 
1835
- .tds-modal-frame--lg{
1836
- --tds-modal-width:800px;
1816
+ .tds-input:has(textarea){
1817
+ --tds-input-padding-block:6px;
1818
+ --tds-input-resizer-size:var(--t-element-size-sm);
1819
+ --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");
1837
1820
  }
1838
1821
 
1839
- .tds-modal-frame--xl{
1840
- --tds-modal-width:1000px;
1841
- }
1822
+ @supports (x: attr(x type(*))){
1842
1823
 
1843
- @keyframes tds-modal-zoom{
1844
- from{
1845
- opacity:0;
1846
- scale:.96;
1847
- }
1824
+ .tds-input textarea{
1825
+ --tds-input-min-height:calc((attr(rows type(<number>), 3) * 1lh) + (var(--tds-input-padding-block) * 2) + 2px);
1848
1826
  }
1849
-
1850
- @media (prefers-reduced-motion: reduce){
1851
- .tds-modal-overlay[data-entering],
1852
- .tds-modal-overlay[data-exiting],
1853
- .tds-modal-frame[data-entering],
1854
- .tds-modal-frame[data-exiting]{
1855
- animation:none;
1856
1827
  }
1857
- }
1858
1828
 
1859
- .tds-modal{
1860
- display:flex;
1861
- flex-direction:column;
1862
- width:100%;
1863
- padding-block-start:var(--t-spacing-3);
1864
- padding-inline:0;
1865
- background:var(--t-surface-color-card);
1829
+ .tds-input.tds-textarea--resize-vertical textarea{
1830
+ resize:vertical;
1831
+ }
1866
1832
 
1867
- border:0;
1868
- border-radius:var(--t-border-radius-lg);
1869
- box-shadow:0 4px 18px 0 #0003;
1870
- }
1833
+ .tds-input.tds-textarea--resize-none textarea{
1834
+ resize:none;
1835
+ }
1871
1836
 
1872
- .tds-modal:focus{
1873
- outline:none;
1874
- }
1837
+ .tds-input.tds-textarea--resize-auto textarea{
1838
+ resize:vertical;
1839
+ }
1875
1840
 
1876
- .tds-modal-header{
1877
- display:grid;
1878
- grid-template-columns:1fr auto;
1879
- -moz-column-gap:var(--t-spacing-2);
1880
- column-gap:var(--t-spacing-2);
1881
- padding-block:0;
1882
- padding-inline:var(--t-spacing-4);
1883
- }
1841
+ @supports (field-sizing: content){
1842
+ .tds-input.tds-textarea--resize-auto textarea{
1843
+ field-sizing:content;
1844
+ resize:none;
1845
+ }
1846
+ }
1884
1847
 
1885
- .tds-modal-title{
1886
- grid-row:1;
1887
- grid-column:1;
1888
- margin:0;
1889
- font-size:var(--t-font-size-2xl);
1890
- font-weight:var(--t-font-weight-medium);
1891
- line-height:140%;
1892
- color:var(--t-text-color-headline);
1848
+ .tds-input textarea{
1849
+ --tds-input-scrollbar-thumb-color-default:var(--t-fill-color-neutral-040);
1850
+ --tds-input-scrollbar-thumb-color-hidden:transparent;
1851
+ --tds-input-scrollbar-thumb-color-hover:var(--t-fill-color-neutral-030);
1852
+ --tds-input-scrollbar-thumb-color-thumb-hover:var(--t-fill-color-neutral-020);
1853
+ --tds-input-scrollbar-thumb-color-thumb-active:var(--t-fill-color-neutral-010);
1854
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-default);
1855
+ --tds-input-scrollbar-surface-color:rgba(0, 0, 0, 0);
1856
+ --tds-input-scrollbar-thumb-border-radius:999px;
1857
+ --tds-input-scrollbar-thumb-border-width:3px;
1858
+ --tds-input-scrollbar-track-margin-block:.125rem;
1859
+ scrollbar-color:initial;
1860
+ transition-timing-function:var(--t-ease-in-out);
1861
+ transition-duration:var(--t-duration-200);
1862
+ transition-property:var(--tds-input-transition-property), --tds-input-scrollbar-thumb-color;
1893
1863
  }
1894
1864
 
1895
- .tds-modal-subtitle{
1896
- grid-row:2;
1897
- grid-column:1;
1898
- margin:0;
1899
- font-size:var(--t-font-size-md);
1900
- font-weight:var(--t-font-weight-medium);
1901
- line-height:140%;
1902
- color:var(--t-text-color-secondary);
1903
- }
1865
+ @media (pointer: fine){
1866
+ :is(.tds-input textarea)::-webkit-scrollbar{
1867
+ width:12px;
1868
+ height:12px;
1869
+ cursor:default;
1870
+ }
1871
+
1872
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb{
1873
+ cursor:default;
1874
+ background:var(--tds-input-scrollbar-thumb-color);
1875
+ background-clip:content-box;
1876
+ border:var(--tds-input-scrollbar-thumb-border-width) solid var(--tds-input-scrollbar-surface-color);
1877
+ border-radius:var(--tds-input-scrollbar-thumb-border-radius);
1878
+ }
1904
1879
 
1905
- .tds-modal-close{
1906
- grid-row:1;
1907
- grid-column:2;
1908
- align-self:center;
1909
- color:var(--t-icon-color-dim);
1910
- }
1880
+ :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1881
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
1882
+ }
1911
1883
 
1912
- .tds-modal-body{
1913
- padding-block:var(--t-spacing-3);
1914
- padding-inline:var(--t-spacing-4);
1915
- }
1884
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
1885
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
1886
+ }
1916
1887
 
1917
- .tds-modal-body--full-width{
1918
- padding-inline:0;
1919
- }
1888
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
1889
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
1890
+ }
1920
1891
 
1921
- .tds-modal-footer{
1922
- display:flex;
1923
- gap:var(--t-spacing-2);
1924
- align-items:center;
1925
- justify-content:flex-end;
1926
- padding-block:var(--t-spacing-3);
1927
- padding-inline:var(--t-spacing-4);
1928
- border-top:1px solid var(--t-border-color);
1929
- }
1892
+ :is(.tds-input textarea)::-webkit-scrollbar-corner{
1893
+ background:var(--tds-input-scrollbar-surface-color);
1894
+ }
1930
1895
 
1931
- .tds-modal-footer > [slot="start"]{
1932
- margin-inline-end:auto;
1933
- }
1896
+ :is(.tds-input textarea)::-webkit-resizer{
1897
+ background:var(--tds-input-resizer-icon) no-repeat;
1898
+ background-position:right bottom;
1899
+ background-size:var(--tds-input-resizer-size) var(--tds-input-resizer-size);
1900
+ }
1934
1901
 
1935
- @media (min-width: 720px){
1936
- .tds-modal-overlay{
1937
- --tds-modal-min-margin-block:0;
1938
- }
1902
+ :is(.tds-input textarea)::-webkit-scrollbar-track{
1903
+ margin-block:var(--tds-input-scrollbar-track-margin-block);
1904
+ cursor:default;
1905
+ }
1939
1906
 
1940
- .tds-modal-footer{
1941
- position:sticky;
1942
- bottom:0;
1943
- background:var(--t-surface-color-card);
1907
+ @supports (-moz-appearance: none){
1908
+ :is(.tds-input textarea){
1909
+ scrollbar-color:var(--tds-input-scrollbar-thumb-color-default) var(--tds-input-scrollbar-surface-color);
1910
+ scrollbar-width:thin;
1911
+ }
1912
+
1913
+ @media (hover){
1914
+ :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1915
+ scrollbar-color:var(--tds-input-scrollbar-thumb-color-hover) var(--tds-input-scrollbar-surface-color);
1916
+ }
1917
+ }
1918
+ }
1944
1919
  }
1945
- }
1946
1920
 
1947
1921
  .tds-radio-group{
1948
1922
  --tds-radio-group-font-size:var(--t-font-size-md);
@@ -2027,110 +2001,138 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
2027
2001
  --tds-radio-group-description-line-height:1.3;
2028
2002
  }
2029
2003
 
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
- }
2004
+ .tds-radio{
2005
+ --tds-radio-font-size:var(--t-font-size-md);
2006
+ --tds-radio-cursor:pointer;
2007
+ --tds-radio-line-height:1.4;
2008
+ --tds-radio-transition-property:border-width;
2035
2009
 
2036
- @supports (x: attr(x type(*))){
2010
+ --tds-radio-input-size:var(--t-element-size-md);
2011
+ --tds-radio-input-border-radius:var(--t-border-radius-round);
2012
+ --tds-radio-input-border-color:var(--t-form-border-color);
2013
+ --tds-radio-input-border-width:var(--t-form-border-width);
2014
+ --tds-radio-input-background-color:var(--t-form-background-color);
2037
2015
 
2038
- .tds-input textarea{
2039
- --tds-input-min-height:calc((attr(rows type(<number>), 3) * 1lh) + (var(--tds-input-padding-block) * 2) + 2px);
2016
+ --tds-radio-label-color:var(--t-form-color);
2017
+
2018
+ --tds-radio-description-font-size:var(--t-font-size-sm);
2019
+ --tds-radio-description-line-height:1.35;
2020
+ --tds-radio-description-color:var(--t-text-color-secondary);
2021
+
2022
+ position:relative;
2023
+ display:inline-grid;
2024
+ grid-template-columns:auto;
2025
+ grid-auto-columns:1fr;
2026
+ gap:var(--t-spacing-fourth) 0;
2027
+ line-height:var(--tds-radio-line-height);
2028
+ -webkit-user-select:none;
2029
+ -moz-user-select:none;
2030
+ user-select:none;
2040
2031
  }
2032
+
2033
+ .tds-radio label{
2034
+ grid-area:1 / 2;
2035
+ padding-inline-start:var(--t-spacing-1);
2036
+ font-size:var(--tds-radio-font-size);
2037
+ font-weight:var(--t-font-weight-normal);
2038
+ color:var(--tds-radio-label-color);
2039
+ cursor:var(--tds-radio-cursor);
2041
2040
  }
2042
2041
 
2043
- .tds-input.tds-textarea--resize-vertical textarea{
2044
- resize:vertical;
2045
- }
2042
+ .tds-radio input[type="radio"]{
2043
+ position:relative;
2044
+ width:1em;
2045
+ height:1em;
2046
+ margin:calc((1lh - 1em) / 2) 0 0;
2047
+ font-size:var(--tds-radio-font-size);
2048
+ line-height:inherit;
2049
+ -webkit-appearance:none;
2050
+ -moz-appearance:none;
2051
+ appearance:none;
2052
+ cursor:var(--tds-radio-cursor);
2053
+ background-color:var(--tds-radio-input-background-color);
2054
+ border:var(--tds-radio-input-border-width) solid var(--tds-radio-input-border-color);
2055
+ border-radius:var(--tds-radio-input-border-radius);
2056
+ transition-timing-function:var(--t-ease-in-out);
2057
+ transition-duration:var(--t-duration-200);
2058
+ transition-property:var(--tds-radio-transition-property);
2059
+ }
2046
2060
 
2047
- .tds-input.tds-textarea--resize-none textarea{
2048
- resize:none;
2061
+ :is(.tds-radio input[type="radio"]):hover:not(:disabled){
2062
+ --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
2063
+ --tds-radio-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
2049
2064
  }
2050
2065
 
2051
- .tds-input.tds-textarea--resize-auto textarea{
2052
- resize:vertical;
2066
+ :is(.tds-radio input[type="radio"]):focus-visible{
2067
+ outline:var(--t-focus-ring-outline);
2068
+ outline-offset:var(--t-focus-ring-offset);
2053
2069
  }
2054
2070
 
2055
- @supports (field-sizing: content){
2056
- .tds-input.tds-textarea--resize-auto textarea{
2057
- field-sizing:content;
2058
- resize:none;
2059
- }
2071
+ :is(.tds-radio input[type="radio"]):disabled{
2072
+ pointer-events:none;
2060
2073
  }
2061
2074
 
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;
2077
- }
2075
+ @media (prefers-reduced-motion: reduce){
2078
2076
 
2079
- @media (pointer: fine){
2080
- :is(.tds-input textarea)::-webkit-scrollbar{
2081
- width:12px;
2082
- height:12px;
2083
- cursor:default;
2077
+ .tds-radio input[type="radio"]{
2078
+ --tds-radio-transition-property:none;
2079
+ }
2084
2080
  }
2085
2081
 
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
- }
2082
+ .tds-radio:has(input:checked){
2083
+ --tds-radio-input-background-color:var(--t-icon-color-inverted);
2084
+ --tds-radio-input-border-color:var(--t-border-color-control-info);
2085
+ --tds-radio-input-border-width:4px;
2086
+ }
2093
2087
 
2094
- :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
2095
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
2088
+ .tds-radio:has(input:checked) input:hover:not(:disabled){
2089
+ --tds-radio-input-background-color:var(--t-icon-color-inverted);
2090
+ --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
2096
2091
  }
2097
2092
 
2098
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
2099
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
2100
- }
2093
+ .tds-radio:has(input:user-invalid){
2094
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
2095
+ }
2101
2096
 
2102
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
2103
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
2097
+ .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
2098
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
2099
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
2104
2100
  }
2105
2101
 
2106
- :is(.tds-input textarea)::-webkit-scrollbar-corner{
2107
- background:var(--tds-input-scrollbar-surface-color);
2108
- }
2102
+ .tds-radio:has(input:disabled){
2103
+ --tds-radio-input-background-color:var(--t-form-background-color-disabled);
2104
+ --tds-radio-input-border-color:var(--t-form-border-color-disabled);
2109
2105
 
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);
2114
- }
2106
+ --tds-radio-label-color:var(--t-form-color-disabled);
2107
+ --tds-radio-description-color:var(--t-form-color-disabled);
2108
+ --tds-radio-cursor:not-allowed;
2109
+ }
2115
2110
 
2116
- :is(.tds-input textarea)::-webkit-scrollbar-track{
2117
- margin-block:var(--tds-input-scrollbar-track-margin-block);
2118
- cursor:default;
2111
+ .tds-radio:has(input:disabled) input:checked{
2112
+ --tds-radio-input-background-color:var(--t-form-background-color);
2113
+ --tds-radio-input-border-color:var(--t-form-border-color-disabled);
2119
2114
  }
2120
2115
 
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
- }
2116
+ .tds-radio-description{
2117
+ display:flex;
2118
+ grid-area:2 / 2;
2119
+ gap:var(--t-spacing-half);
2120
+ align-items:flex-start;
2121
+ padding-inline-start:var(--t-spacing-1);
2122
+ margin:0;
2123
+ font-size:var(--tds-radio-description-font-size);
2124
+ line-height:var(--tds-radio-description-line-height);
2125
+ color:var(--tds-radio-description-color);
2126
+ cursor:text;
2127
+ }
2126
2128
 
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
- }
2133
- }
2129
+ .tds-radio--sm{
2130
+ --tds-radio-line-height:1.35;
2131
+ --tds-radio-input-size:var(--t-element-size-sm);
2132
+ --tds-radio-font-size:var(--t-font-size-sm);
2133
+ --tds-radio-description-font-size:var(--t-font-size-xs);
2134
+ --tds-radio-description-line-height:1.3;
2135
+ }
2134
2136
 
2135
2137
  .tds-toggle-switch{
2136
2138
  --tds-toggle-switch-font-size:var(--t-font-size-md);