@planningcenter/tapestry 4.1.0-rc.12 → 4.1.0-rc.13

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 +1028 -1028
  2. package/dist/reactRender.css.map +1 -1
  3. package/dist/reactRenderLegacy.css +1028 -1028
  4. package/dist/reactRenderLegacy.css.map +1 -1
  5. package/package.json +2 -2
package/dist/reactRender.css CHANGED
@@ -677,281 +677,273 @@
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);
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;
892
858
  }
893
859
 
894
- .tds-page-header--profile > .tds-page-header__title-bar{
895
- align-items:center;
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);
896
865
  }
897
866
 
898
- .tds-page-header__primary{
899
- width:100%;
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;
900
873
  }
901
874
 
902
- .tds-page-header__primary h1{
875
+ .tds-checkbox-group{
876
+ --tds-checkbox-group-font-size:var(--t-font-size-md);
877
+ --tds-checkbox-group-line-height:1.4;
878
+ --tds-checkbox-group-gap:var(--t-spacing-1);
879
+
880
+ --tds-checkbox-group-description-font-size:var(--t-font-size-sm);
881
+ --tds-checkbox-group-description-line-height:1.35;
882
+ --tds-checkbox-group-description-color:var(--t-text-color-secondary);
883
+ --tds-checkbox-group-description-invalid-icon-display:none;
884
+ display:flex;
885
+ flex-direction:column;
886
+ gap:0;
887
+ padding:0;
888
+ margin:0;
889
+
890
+ font-size:var(--tds-checkbox-group-font-size);
891
+ line-height:var(--tds-checkbox-group-line-height);
892
+ border:0;
893
+ }
894
+
895
+ .tds-checkbox-group legend{
896
+ float:left;
897
+ padding:0;
903
898
  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
899
  }
910
900
 
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%;
901
+ .tds-checkbox-group[aria-invalid="true"]{
902
+ --tds-checkbox-group-description-color:var(--t-text-color-status-error);
903
+ --tds-checkbox-group-description-invalid-icon-display:inline-block;
917
904
  }
918
905
 
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;
906
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) legend::after{
907
+ margin-left:.25ch;
908
+ color:var(--t-text-color-status-error);
909
+ content:"*";
927
910
  }
928
911
 
929
- .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
930
- justify-content:flex-end;
912
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
913
+ content:none;
931
914
  }
932
- }
933
915
 
934
- .tds-page-header-phone,
935
- .tds-page-header-email{
936
- color:var(--tds-page-header-color);
937
- white-space:nowrap;
916
+ .tds-checkbox-group-fields{
917
+ display:flex;
918
+ flex-direction:column;
919
+ gap:var(--tds-checkbox-group-gap);
920
+ align-items:flex-start;
921
+ margin-top:var(--t-spacing-1);
938
922
  }
939
- .tds-page-header-email{
940
- max-width:100%;
941
- overflow:hidden;
942
- text-overflow:ellipsis;
923
+
924
+ .tds-checkbox-group-description{
925
+ display:flex;
926
+ gap:var(--t-spacing-half);
927
+ align-items:flex-start;
928
+ margin:var(--t-spacing-fourth) 0 0;
929
+ font-size:var(--tds-checkbox-group-description-font-size);
930
+ line-height:var(--tds-checkbox-group-description-line-height);
931
+ color:var(--tds-checkbox-group-description-color);
932
+ cursor:text;
943
933
  }
944
934
 
945
- @keyframes indicator-pulse{
946
- 0%{
947
- opacity:.3;
948
- transform:scale(.9);
935
+ .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
936
+ display:var(--tds-checkbox-group-description-invalid-icon-display);
937
+ flex-shrink:0;
938
+ margin-top:calc(.5lh - .5em);
939
+ line-height:var(--tds-checkbox-group-description-line-height);
949
940
  }
950
941
 
951
- 100%{
952
- opacity:0;
953
- transform:scale(1.75);
954
- }
942
+ .tds-checkbox-group--sm{
943
+ --tds-checkbox-group-line-height:1.35;
944
+ --tds-checkbox-group-font-size:var(--t-font-size-sm);
945
+ --tds-checkbox-group-description-font-size:var(--t-font-size-xs);
946
+ --tds-checkbox-group-description-line-height:1.3;
955
947
  }
956
948
 
957
949
 
@@ -1011,622 +1003,311 @@
1011
1003
  --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
1012
1004
  --tds-sidenav-item-nested-border-color-selected:var(--t-fill-color-neutral-010);
1013
1005
  }
1014
- }
1015
-
1016
- .tds-sidenav :where(nav,ul,.tds-sidenav-section){
1017
- display:flex;
1018
- }
1019
-
1020
- .tds-sidenav :where(nav,ul,.tds-sidenav-section,.tds-sidenav-collapse){
1021
- flex-direction:column;
1022
- gap:var(--t-spacing-half);
1023
- width:100%;
1024
- }
1025
-
1026
- .tds-sidenav-section-list{
1027
- width:100%;
1028
- padding:0;
1029
- margin:0;
1030
- list-style:none;
1031
- }
1032
-
1033
- .tds-sidenav-section-header{
1034
- display:flex;
1035
- align-items:baseline;
1036
- justify-content:space-between;
1037
- padding-top:var(--t-spacing-2);
1038
- }
1039
-
1040
- .tds-sidenav-section-header h2{
1041
- margin:0;
1042
- font-size:var(--t-font-size-sm);
1043
- font-weight:var(--t-font-weight-semibold);
1044
- line-height:1.35;
1045
- color:var(--t-text-color-secondary);
1046
- text-transform:uppercase;
1047
- }
1048
-
1049
- .tds-sidenav-section:first-of-type .tds-sidenav-section-header{
1050
- padding-top:0;
1051
- }
1052
-
1053
- .tds-sidenav-section-header [slot="label-actions"]{
1054
- display:flex;
1055
- gap:var(--t-spacing-half);
1056
- align-items:center;
1057
- }
1058
-
1059
- .tds-sidenav-section [slot="section-actions"]{
1060
- display:flex;
1061
- gap:12px;
1062
- align-items:center;
1063
- min-height:42px;
1064
- padding:var(--t-spacing-1) 0;
1065
- }
1066
-
1067
- .tds-sidenav-section-list,
1068
- .tds-sidenav-item{
1069
- width:100%;
1070
- padding:0;
1071
- margin:0;
1072
- }
1073
-
1074
- .tds-sidenav-item :is(a,button){
1075
- position:relative;
1076
- display:flex;
1077
- gap:12px;
1078
- align-items:center;
1079
- width:100%;
1080
- padding:12px;
1081
- overflow:hidden;
1082
- font-size:var(--t-font-size-sm);
1083
- line-height:18px;
1084
- color:var(--t-text-color-headline);
1085
- white-space:nowrap;
1086
- text-decoration:none;
1087
- -webkit-appearance:none;
1088
- -moz-appearance:none;
1089
- appearance:none;
1090
- cursor:pointer;
1091
- background-color:var(--tds-sidenav-item-background, transparent);
1092
- border:0;
1093
- border-radius:var(--t-border-radius);
1094
- transition:var(--tds-sidenav-item-transition);
1095
- }
1096
-
1097
- :is(.tds-sidenav-item :is(a,button)):not(:has(.prefix,.suffix)),:is(.tds-sidenav-item :is(a,button)) :is(:not(.prefix,.suffix)){
1098
- display:block;
1099
- flex:1;
1100
- overflow:hidden;
1101
- text-overflow:ellipsis;
1102
- text-align:left;
1103
- white-space:nowrap;
1104
- }
1105
-
1106
- :is(.tds-sidenav-item :is(a,button)):hover,:is(.tds-sidenav-item :is(a,button)):focus-visible{
1107
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-hover);
1108
- color:var(--t-text-color-headline);
1109
- text-decoration:none;
1110
- }
1111
-
1112
- :is(.tds-sidenav-item :is(a,button)):active{
1113
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-active);
1114
- }
1115
-
1116
- :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]){
1117
- overflow:hidden;
1118
- color:var(--tds-sidenav-item-icon-color);
1119
- }
1120
-
1121
- :is(:is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"])),:is(:is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"])) svg{
1122
- display:block;
1123
- width:var(--tds-sidenav-item-icon-size);
1124
- height:var(--tds-sidenav-item-icon-size);
1125
- }
1126
-
1127
- :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section{
1128
- --tds-sidenav-indent:19px;
1129
- }
1130
-
1131
- [aria-expanded="true"]:is(.tds-sidenav-item :is(a,button)) + .tds-sidenav-section-list{
1132
- visibility:visible;
1133
- block-size:auto;
1134
- opacity:1;
1135
- }
1136
-
1137
- .tds-sidenav-item.selected > :is(a,button),.tds-sidenav-item:has(.tds-sidenav-section):has(.selected) > :is(a,button){
1138
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-selected);
1139
- --tds-sidenav-item-icon-color:var(--tds-sidenav-item-icon-color-selected);
1140
-
1141
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-selected);
1142
- font-weight:var(--t-font-weight-semibold);
1143
- }
1144
-
1145
- .tds-sidenav-item:has(.tds-sidenav-section){
1146
- display:flex;
1147
- flex-direction:column;
1148
- gap:var(--t-spacing-half);
1149
- }
1150
-
1151
- .tds-sidenav-item .tds-sidenav-section-list{
1152
- --tds-sidenav-item-depth:1;
1153
- gap:0;
1154
- }
1155
-
1156
- .tds-sidenav-action--toggle + :is(.tds-sidenav-item .tds-sidenav-section-list){
1157
- visibility:hidden;
1158
- block-size:0;
1159
- overflow-y:clip;
1160
- opacity:0;
1161
- transition:content-visibility var(--t-duration-400) allow-discrete, opacity var(--t-duration-400), block-size var(--t-duration-400);
1162
- }
1163
-
1164
- :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list{
1165
- --tds-sidenav-item-depth:2;
1166
- }
1167
-
1168
- :is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
1169
- min-height:var(--t-element-size-2xl);
1170
- padding-block:9px;
1171
- padding-left:calc((var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth)) + var(--tds-sidenav-indent) + var(--t-spacing-fourth));
1172
- line-height:1;
1173
- background-color:transparent;
1174
- }
1175
-
1176
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::before{
1177
- position:absolute;
1178
- top:0;
1179
- bottom:0;
1180
- left:calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
1181
- width:2px;
1182
- content:"";
1183
- background-color:var(--tds-sidenav-item-nested-border-color);
1184
- transition:var(--tds-sidenav-item-transition);
1185
- }
1186
-
1187
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::after{
1188
- position:absolute;
1189
- inset:0 0 0 calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
1190
- z-index:-1;
1191
- height:100%;
1192
- content:"";
1193
- background-color:var(--tds-sidenav-item-nested-background);
1194
- border-radius:0 var(--t-border-radius) var(--t-border-radius) 0;
1195
- transition:var(--tds-sidenav-item-transition);
1196
- }
1197
-
1198
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):not(:has(.prefix,.suffix)),:is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)) :is(:not(.prefix,.suffix)){
1199
- display:block;
1200
- text-align:left;
1201
- white-space:normal;
1202
- }
1203
-
1204
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):hover,:is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):focus-visible{
1205
- --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-hover);
1206
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-hover);
1207
- }
1208
-
1209
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):active{
1210
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-active);
1211
- }
1212
-
1213
- .selected:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
1214
- --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-selected);
1215
- font-weight:var(--t-font-weight-medium);
1216
- }
1217
-
1218
- .tds-sidenav-responsive-header{
1219
- display:flex;
1220
- gap:var(--t-spacing-2);
1221
- align-items:center;
1222
- width:100%;
1223
- }
1224
-
1225
- .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle{
1226
- order:0;
1227
- }
1228
-
1229
- .tds-sidenav-responsive-header .tds-sidenav-responsive-header-label{
1230
- flex:1;
1231
- order:1;
1232
- margin:0;
1233
- font-size:var(--t-font-size-lg);
1234
- font-weight:var(--t-font-weight-medium);
1235
- color:var(--t-text-color-headline);
1236
- }
1237
-
1238
- @media (max-width: 719px){
1239
- .tds-sidenav-collapse{
1240
- z-index:10001;
1241
- display:none;
1242
- max-width:min(448px, calc(100vw - 48px));
1243
- padding:0;
1244
- margin:12px 0;
1245
- position-area:bottom span-right;
1246
- overflow:hidden;
1247
- outline:0;
1248
- background:var(--t-surface-color-card);
1249
- border:0;
1250
- border-radius:6px;
1251
- box-shadow:0 8px 20px 0 rgba(0, 0, 0, .25);
1252
- opacity:var(--tds-sidenav-collapse-open-opacity);
1253
- transform:var(--tds-sidenav-collapse-open-transform);
1254
- transition:var(--tds-sidenav-collapse-transition-enter);
1255
- will-change:transform;
1256
- }
1257
-
1258
- .tds-sidenav-scroll-container{
1259
- --webkit-overflow-scrolling:touch;
1260
- display:block;
1261
- width:100%;
1262
- height:-moz-fit-content;
1263
- height:fit-content;
1264
- padding:var(--t-spacing-2);
1265
- overflow-y:auto;
1266
- }
1267
-
1268
- .tds-sidenav-item :is(a, button) :is(.prefix){
1269
- display:none;
1270
- }
1271
- @supports selector(:popover-open){
1272
- .tds-sidenav-collapse:popover-open{
1273
- display:flex;
1274
- }
1275
-
1276
- .tds-sidenav-collapse:not(:popover-open){
1277
- opacity:var(--tds-sidenav-collapse-closed-opacity);
1278
- transition:var(--tds-sidenav-collapse-transition-exit);
1279
- }
1280
-
1281
- @starting-style{
1282
- .tds-sidenav-collapse:popover-open{
1283
- opacity:var(--tds-sidenav-collapse-closed-opacity);
1284
- transform:var(--tds-sidenav-collapse-closed-transform);
1285
- }
1286
- }
1287
- }
1288
- @supports not selector(:popover-open){
1289
- .tds-sidenav-collapse.\:popover-open{
1290
- display:flex;
1291
- }
1292
-
1293
- .tds-sidenav-collapse:not(.\:popover-open){
1294
- opacity:var(--tds-sidenav-collapse-closed-opacity);
1295
- transition:var(--tds-sidenav-collapse-transition-exit);
1296
- }
1297
- }
1298
- }
1299
-
1300
- @media (min-width: 720px){
1301
- .tds-sidenav-responsive-header{
1302
- display:none;
1303
- }
1304
- }
1305
-
1306
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
1307
- display:none;
1308
- }
1309
-
1310
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
1311
- display:block;
1312
- }
1313
-
1314
- tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1315
- display:flex;
1316
- flex-direction:column;
1317
- }
1318
-
1319
- .tds-button-group{
1320
- display:inline-flex;
1321
- }
1322
- .tds-button-group > .tds-btn{
1323
- --tds-button-group-item-z-index:1;
1324
-
1325
- position:relative;
1326
- z-index:var(--tds-button-group-item-z-index);
1327
- border-radius:0;
1328
- }
1329
- :is(.tds-button-group > .tds-btn):not(:first-child){
1330
- margin-inline-start:calc(var(--tds-btn-border-width) * -1);
1331
- }
1332
- :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{
1333
- position:absolute;
1334
- inset-block:calc(var(--tds-btn-border-width) * -1);
1335
- width:var(--tds-btn-border-width);
1336
- pointer-events:none;
1337
- content:"";
1338
- background-color:var(--t-border-color-white);
1339
- }
1340
- :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:first-child)::before{
1341
- inset-inline-start:calc(var(--tds-btn-border-width) * -1);
1342
- }
1343
- :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:last-child)::after{
1344
- inset-inline-end:calc(var(--tds-btn-border-width) * -1);
1345
- }
1346
- :is(.tds-button-group > .tds-btn):hover{
1347
- --tds-button-group-item-z-index:2;
1348
- }
1349
- :is(.tds-button-group > .tds-btn):focus-visible{
1350
- --tds-button-group-item-z-index:5;
1351
- }
1352
- .tds-button-group > .tds-btn:first-child{
1353
- border-start-start-radius:var(--tds-btn-border-radius);
1354
- border-end-start-radius:var(--tds-btn-border-radius);
1355
- }
1356
- .tds-button-group > .tds-btn:last-child{
1357
- border-start-end-radius:var(--tds-btn-border-radius);
1358
- border-end-end-radius:var(--tds-btn-border-radius);
1359
- }
1006
+ }
1360
1007
 
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);
1008
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section){
1009
+ display:flex;
1010
+ }
1365
1011
 
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;
1012
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section,.tds-sidenav-collapse){
1013
+ flex-direction:column;
1014
+ gap:var(--t-spacing-half);
1015
+ width:100%;
1016
+ }
1017
+
1018
+ .tds-sidenav-section-list{
1019
+ width:100%;
1373
1020
  padding:0;
1374
1021
  margin:0;
1022
+ list-style:none;
1023
+ }
1375
1024
 
1376
- font-size:var(--tds-checkbox-group-font-size);
1377
- line-height:var(--tds-checkbox-group-line-height);
1378
- border:0;
1025
+ .tds-sidenav-section-header{
1026
+ display:flex;
1027
+ align-items:baseline;
1028
+ justify-content:space-between;
1029
+ padding-top:var(--t-spacing-2);
1379
1030
  }
1380
1031
 
1381
- .tds-checkbox-group legend{
1382
- float:left;
1383
- padding:0;
1032
+ .tds-sidenav-section-header h2{
1384
1033
  margin:0;
1034
+ font-size:var(--t-font-size-sm);
1035
+ font-weight:var(--t-font-weight-semibold);
1036
+ line-height:1.35;
1037
+ color:var(--t-text-color-secondary);
1038
+ text-transform:uppercase;
1385
1039
  }
1386
1040
 
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;
1041
+ .tds-sidenav-section:first-of-type .tds-sidenav-section-header{
1042
+ padding-top:0;
1390
1043
  }
1391
1044
 
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
- }
1397
-
1398
- .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
1399
- content:none;
1400
- }
1045
+ .tds-sidenav-section-header [slot="label-actions"]{
1046
+ display:flex;
1047
+ gap:var(--t-spacing-half);
1048
+ align-items:center;
1049
+ }
1401
1050
 
1402
- .tds-checkbox-group-fields{
1051
+ .tds-sidenav-section [slot="section-actions"]{
1403
1052
  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);
1053
+ gap:12px;
1054
+ align-items:center;
1055
+ min-height:42px;
1056
+ padding:var(--t-spacing-1) 0;
1408
1057
  }
1409
1058
 
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;
1059
+ .tds-sidenav-section-list,
1060
+ .tds-sidenav-item{
1061
+ width:100%;
1062
+ padding:0;
1063
+ margin:0;
1419
1064
  }
1420
1065
 
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);
1066
+ .tds-sidenav-item :is(a,button){
1067
+ position:relative;
1068
+ display:flex;
1069
+ gap:12px;
1070
+ align-items:center;
1071
+ width:100%;
1072
+ padding:12px;
1073
+ overflow:hidden;
1074
+ font-size:var(--t-font-size-sm);
1075
+ line-height:18px;
1076
+ color:var(--t-text-color-headline);
1077
+ white-space:nowrap;
1078
+ text-decoration:none;
1079
+ -webkit-appearance:none;
1080
+ -moz-appearance:none;
1081
+ appearance:none;
1082
+ cursor:pointer;
1083
+ background-color:var(--tds-sidenav-item-background, transparent);
1084
+ border:0;
1085
+ border-radius:var(--t-border-radius);
1086
+ transition:var(--tds-sidenav-item-transition);
1426
1087
  }
1427
1088
 
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
- }
1089
+ :is(.tds-sidenav-item :is(a,button)):not(:has(.prefix,.suffix)),:is(.tds-sidenav-item :is(a,button)) :is(:not(.prefix,.suffix)){
1090
+ display:block;
1091
+ flex:1;
1092
+ overflow:hidden;
1093
+ text-overflow:ellipsis;
1094
+ text-align:left;
1095
+ white-space:nowrap;
1096
+ }
1434
1097
 
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;
1098
+ :is(.tds-sidenav-item :is(a,button)):hover,:is(.tds-sidenav-item :is(a,button)):focus-visible{
1099
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-hover);
1100
+ color:var(--t-text-color-headline);
1101
+ text-decoration:none;
1102
+ }
1440
1103
 
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);
1104
+ :is(.tds-sidenav-item :is(a,button)):active{
1105
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-active);
1106
+ }
1445
1107
 
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);
1108
+ :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]){
1109
+ overflow:hidden;
1110
+ color:var(--tds-sidenav-item-icon-color);
1111
+ }
1450
1112
 
1451
- --tds-checkbox-label-color:var(--t-form-color);
1113
+ :is(:is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"])),:is(:is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"])) svg{
1114
+ display:block;
1115
+ width:var(--tds-sidenav-item-icon-size);
1116
+ height:var(--tds-sidenav-item-icon-size);
1117
+ }
1452
1118
 
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;
1119
+ :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section{
1120
+ --tds-sidenav-indent:19px;
1121
+ }
1457
1122
 
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;
1467
- }
1123
+ [aria-expanded="true"]:is(.tds-sidenav-item :is(a,button)) + .tds-sidenav-section-list{
1124
+ visibility:visible;
1125
+ block-size:auto;
1126
+ opacity:1;
1127
+ }
1468
1128
 
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);
1129
+ .tds-sidenav-item.selected > :is(a,button),.tds-sidenav-item:has(.tds-sidenav-section):has(.selected) > :is(a,button){
1130
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-selected);
1131
+ --tds-sidenav-item-icon-color:var(--tds-sidenav-item-icon-color-selected);
1132
+
1133
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-selected);
1134
+ font-weight:var(--t-font-weight-semibold);
1476
1135
  }
1477
1136
 
1478
- .tds-checkbox tds-indeterminate{
1137
+ .tds-sidenav-item:has(.tds-sidenav-section){
1479
1138
  display:flex;
1139
+ flex-direction:column;
1140
+ gap:var(--t-spacing-half);
1480
1141
  }
1481
1142
 
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);
1143
+ .tds-sidenav-item .tds-sidenav-section-list{
1144
+ --tds-sidenav-item-depth:1;
1145
+ gap:0;
1499
1146
  }
1500
1147
 
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
- }
1148
+ .tds-sidenav-action--toggle + :is(.tds-sidenav-item .tds-sidenav-section-list){
1149
+ visibility:hidden;
1150
+ block-size:0;
1151
+ overflow-y:clip;
1152
+ opacity:0;
1153
+ transition:content-visibility var(--t-duration-400) allow-discrete, opacity var(--t-duration-400), block-size var(--t-duration-400);
1154
+ }
1155
+
1156
+ :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list{
1157
+ --tds-sidenav-item-depth:2;
1158
+ }
1159
+
1160
+ :is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
1161
+ min-height:var(--t-element-size-2xl);
1162
+ padding-block:9px;
1163
+ padding-left:calc((var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth)) + var(--tds-sidenav-indent) + var(--t-spacing-fourth));
1164
+ line-height:1;
1165
+ background-color:transparent;
1166
+ }
1167
+
1168
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::before{
1169
+ position:absolute;
1170
+ top:0;
1171
+ bottom:0;
1172
+ left:calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
1173
+ width:2px;
1174
+ content:"";
1175
+ background-color:var(--tds-sidenav-item-nested-border-color);
1176
+ transition:var(--tds-sidenav-item-transition);
1177
+ }
1178
+
1179
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::after{
1180
+ position:absolute;
1181
+ inset:0 0 0 calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
1182
+ z-index:-1;
1183
+ height:100%;
1184
+ content:"";
1185
+ background-color:var(--tds-sidenav-item-nested-background);
1186
+ border-radius:0 var(--t-border-radius) var(--t-border-radius) 0;
1187
+ transition:var(--tds-sidenav-item-transition);
1188
+ }
1189
+
1190
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):not(:has(.prefix,.suffix)),:is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)) :is(:not(.prefix,.suffix)){
1191
+ display:block;
1192
+ text-align:left;
1193
+ white-space:normal;
1194
+ }
1520
1195
 
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
- }
1196
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):hover,:is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):focus-visible{
1197
+ --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-hover);
1198
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-hover);
1199
+ }
1525
1200
 
1526
- :is(.tds-checkbox input[type="checkbox"]):focus-visible{
1527
- outline:var(--t-focus-ring-outline);
1528
- outline-offset:var(--t-focus-ring-offset);
1529
- }
1201
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):active{
1202
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-active);
1203
+ }
1530
1204
 
1531
- :is(.tds-checkbox input[type="checkbox"]):disabled{
1532
- pointer-events:none;
1205
+ .selected:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
1206
+ --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-selected);
1207
+ font-weight:var(--t-font-weight-medium);
1533
1208
  }
1534
1209
 
1535
- @media (prefers-reduced-motion: reduce){
1210
+ .tds-sidenav-responsive-header{
1211
+ display:flex;
1212
+ gap:var(--t-spacing-2);
1213
+ align-items:center;
1214
+ width:100%;
1215
+ }
1536
1216
 
1537
- .tds-checkbox input[type="checkbox"]{
1538
- --tds-checkbox-transition-property:none;
1217
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle{
1218
+ order:0;
1539
1219
  }
1540
- }
1541
1220
 
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;
1221
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-label{
1222
+ flex:1;
1223
+ order:1;
1224
+ margin:0;
1225
+ font-size:var(--t-font-size-lg);
1226
+ font-weight:var(--t-font-weight-medium);
1227
+ color:var(--t-text-color-headline);
1547
1228
  }
1548
1229
 
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
- }
1553
-
1554
- .tds-checkbox:has(input:checked){
1555
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
1230
+ @media (max-width: 719px){
1231
+ .tds-sidenav-collapse{
1232
+ z-index:10001;
1233
+ display:none;
1234
+ max-width:min(448px, calc(100vw - 48px));
1235
+ padding:0;
1236
+ margin:12px 0;
1237
+ position-area:bottom span-right;
1238
+ overflow:hidden;
1239
+ outline:0;
1240
+ background:var(--t-surface-color-card);
1241
+ border:0;
1242
+ border-radius:6px;
1243
+ box-shadow:0 8px 20px 0 rgba(0, 0, 0, .25);
1244
+ opacity:var(--tds-sidenav-collapse-open-opacity);
1245
+ transform:var(--tds-sidenav-collapse-open-transform);
1246
+ transition:var(--tds-sidenav-collapse-transition-enter);
1247
+ will-change:transform;
1556
1248
  }
1557
1249
 
1558
- .tds-checkbox:has(input:indeterminate){
1559
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
1250
+ .tds-sidenav-scroll-container{
1251
+ --webkit-overflow-scrolling:touch;
1252
+ display:block;
1253
+ width:100%;
1254
+ height:-moz-fit-content;
1255
+ height:fit-content;
1256
+ padding:var(--t-spacing-2);
1257
+ overflow-y:auto;
1560
1258
  }
1561
1259
 
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;
1260
+ .tds-sidenav-item :is(a, button) :is(.prefix){
1261
+ display:none;
1566
1262
  }
1567
-
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);
1263
+ @supports selector(:popover-open){
1264
+ .tds-sidenav-collapse:popover-open{
1265
+ display:flex;
1571
1266
  }
1572
1267
 
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);
1268
+ .tds-sidenav-collapse:not(:popover-open){
1269
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
1270
+ transition:var(--tds-sidenav-collapse-transition-exit);
1576
1271
  }
1577
1272
 
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);
1273
+ @starting-style{
1274
+ .tds-sidenav-collapse:popover-open{
1275
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
1276
+ transform:var(--tds-sidenav-collapse-closed-transform);
1581
1277
  }
1582
-
1583
- .tds-checkbox:has(input:required) label::after{
1584
- margin-left:.25ch;
1585
- color:var(--t-text-color-status-error);
1586
- content:"*";
1587
1278
  }
1588
-
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);
1592
-
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
1279
  }
1597
-
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);
1280
+ @supports not selector(:popover-open){
1281
+ .tds-sidenav-collapse.\:popover-open{
1282
+ display:flex;
1600
1283
  }
1601
1284
 
1602
- .tds-checkbox-description{
1603
- display:flex;
1604
- grid-area:2 / 2;
1605
- gap:var(--t-spacing-half);
1606
- align-items:flex-start;
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);
1612
- cursor:text;
1285
+ .tds-sidenav-collapse:not(.\:popover-open){
1286
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
1287
+ transition:var(--tds-sidenav-collapse-transition-exit);
1288
+ }
1289
+ }
1613
1290
  }
1614
1291
 
1615
- .tds-checkbox-description .tds-checkbox-description-invalid-icon{
1616
- display:var(--tds-checkbox-description-invalid-icon-display);
1617
- flex-shrink:0;
1618
- margin-top:calc(.5lh - .5em);
1619
- line-height:var(--tds-checkbox-description-line-height);
1292
+ @media (min-width: 720px){
1293
+ .tds-sidenav-responsive-header{
1294
+ display:none;
1620
1295
  }
1621
-
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
1296
  }
1629
1297
 
1298
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
1299
+ display:none;
1300
+ }
1301
+
1302
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
1303
+ display:block;
1304
+ }
1305
+
1306
+ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1307
+ display:flex;
1308
+ flex-direction:column;
1309
+ }
1310
+
1630
1311
 
1631
1312
  :is(.tds-input input)::-webkit-search-decoration,:is(.tds-input input)::-webkit-search-cancel-button,:is(.tds-input input)::-webkit-search-results-button,:is(.tds-input input)::-webkit-search-results-decoration{
1632
1313
  -webkit-appearance:none;
@@ -1644,332 +1325,413 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1644
1325
  min-inline-size:min(100%, 122px);
1645
1326
  }
1646
1327
 
1647
- .tds-input--auto-width input{
1648
- field-sizing:content;
1649
- inline-size:auto;
1650
- }
1651
- }
1652
-
1653
- .tds-radio{
1654
- --tds-radio-font-size:var(--t-font-size-md);
1655
- --tds-radio-cursor:pointer;
1656
- --tds-radio-line-height:1.4;
1657
- --tds-radio-transition-property:border-width;
1658
-
1659
- --tds-radio-input-size:var(--t-element-size-md);
1660
- --tds-radio-input-border-radius:var(--t-border-radius-round);
1661
- --tds-radio-input-border-color:var(--t-form-border-color);
1662
- --tds-radio-input-border-width:var(--t-form-border-width);
1663
- --tds-radio-input-background-color:var(--t-form-background-color);
1664
-
1665
- --tds-radio-label-color:var(--t-form-color);
1666
-
1667
- --tds-radio-description-font-size:var(--t-font-size-sm);
1668
- --tds-radio-description-line-height:1.35;
1669
- --tds-radio-description-color:var(--t-text-color-secondary);
1670
-
1671
- position:relative;
1672
- display:inline-grid;
1673
- grid-template-columns:auto;
1674
- grid-auto-columns:1fr;
1675
- gap:var(--t-spacing-fourth) 0;
1676
- line-height:var(--tds-radio-line-height);
1677
- -webkit-user-select:none;
1678
- -moz-user-select:none;
1679
- user-select:none;
1680
- }
1681
-
1682
- .tds-radio label{
1683
- grid-area:1 / 2;
1684
- padding-inline-start:var(--t-spacing-1);
1685
- font-size:var(--tds-radio-font-size);
1686
- font-weight:var(--t-font-weight-normal);
1687
- color:var(--tds-radio-label-color);
1688
- cursor:var(--tds-radio-cursor);
1689
- }
1690
-
1691
- .tds-radio input[type="radio"]{
1692
- position:relative;
1693
- width:1em;
1694
- height:1em;
1695
- margin:calc((1lh - 1em) / 2) 0 0;
1696
- font-size:var(--tds-radio-font-size);
1697
- line-height:inherit;
1698
- -webkit-appearance:none;
1699
- -moz-appearance:none;
1700
- appearance:none;
1701
- cursor:var(--tds-radio-cursor);
1702
- background-color:var(--tds-radio-input-background-color);
1703
- border:var(--tds-radio-input-border-width) solid var(--tds-radio-input-border-color);
1704
- border-radius:var(--tds-radio-input-border-radius);
1705
- transition-timing-function:var(--t-ease-in-out);
1706
- transition-duration:var(--t-duration-200);
1707
- transition-property:var(--tds-radio-transition-property);
1708
- }
1709
-
1710
- :is(.tds-radio input[type="radio"]):hover:not(:disabled){
1711
- --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
1712
- --tds-radio-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
1713
- }
1714
-
1715
- :is(.tds-radio input[type="radio"]):focus-visible{
1716
- outline:var(--t-focus-ring-outline);
1717
- outline-offset:var(--t-focus-ring-offset);
1718
- }
1328
+ .tds-input--auto-width input{
1329
+ field-sizing:content;
1330
+ inline-size:auto;
1331
+ }
1332
+ }
1719
1333
 
1720
- :is(.tds-radio input[type="radio"]):disabled{
1721
- pointer-events:none;
1722
- }
1334
+ .tds-radio-group{
1335
+ --tds-radio-group-font-size:var(--t-font-size-md);
1336
+ --tds-radio-group-line-height:1.4;
1337
+ --tds-radio-group-gap:var(--t-spacing-1);
1723
1338
 
1724
- @media (prefers-reduced-motion: reduce){
1339
+ --tds-radio-group-description-font-size:var(--t-font-size-sm);
1340
+ --tds-radio-group-description-line-height:1.35;
1341
+ --tds-radio-group-description-color:var(--t-text-color-secondary);
1342
+ --tds-radio-group-description-invalid-icon-display:none;
1343
+ display:flex;
1344
+ flex-direction:column;
1345
+ gap:0;
1346
+ padding:0;
1347
+ margin:0;
1725
1348
 
1726
- .tds-radio input[type="radio"]{
1727
- --tds-radio-transition-property:none;
1728
- }
1729
- }
1349
+ font-size:var(--tds-radio-group-font-size);
1350
+ line-height:var(--tds-radio-group-line-height);
1351
+ border:0;
1352
+ }
1730
1353
 
1731
- .tds-radio:has(input:checked){
1732
- --tds-radio-input-background-color:var(--t-icon-color-inverted);
1733
- --tds-radio-input-border-color:var(--t-border-color-control-info);
1734
- --tds-radio-input-border-width:4px;
1354
+ .tds-radio-group legend{
1355
+ float:left;
1356
+ padding:0;
1357
+ margin:0;
1735
1358
  }
1736
1359
 
1737
- .tds-radio:has(input:checked) input:hover:not(:disabled){
1738
- --tds-radio-input-background-color:var(--t-icon-color-inverted);
1739
- --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
1740
- }
1741
-
1742
- .tds-radio:has(input:user-invalid){
1743
- --tds-radio-input-border-color:var(--t-form-border-color-error);
1360
+ .tds-radio-group[aria-invalid="true"]{
1361
+ --tds-radio-group-description-color:var(--t-text-color-status-error);
1362
+ --tds-radio-group-description-invalid-icon-display:inline-block;
1744
1363
  }
1745
1364
 
1746
- .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
1747
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1748
- --tds-radio-input-background-color:var(--t-form-background-color-error);
1365
+ .tds-radio-group[aria-invalid="true"] .tds-radio{
1366
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
1749
1367
  }
1750
1368
 
1751
- .tds-radio:has(input:disabled){
1752
- --tds-radio-input-background-color:var(--t-form-background-color-disabled);
1753
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
1369
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
1370
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1371
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
1372
+ }
1754
1373
 
1755
- --tds-radio-label-color:var(--t-form-color-disabled);
1756
- --tds-radio-description-color:var(--t-form-color-disabled);
1757
- --tds-radio-cursor:not-allowed;
1758
- }
1374
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
1375
+ --tds-radio-input-background-color:var(--t-icon-color-inverted);
1376
+ }
1759
1377
 
1760
- .tds-radio:has(input:disabled) input:checked{
1761
- --tds-radio-input-background-color:var(--t-form-background-color);
1762
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
1378
+ .tds-radio-group:has(input:required) legend::after{
1379
+ margin-left:.25ch;
1380
+ color:var(--t-text-color-status-error);
1381
+ content:"*";
1763
1382
  }
1764
1383
 
1765
- .tds-radio-description{
1384
+ .tds-radio-group-fields{
1385
+ display:flex;
1386
+ flex-direction:column;
1387
+ gap:var(--tds-radio-group-gap);
1388
+ align-items:flex-start;
1389
+ margin-top:var(--t-spacing-1);
1390
+ }
1391
+
1392
+ .tds-radio-group-description{
1766
1393
  display:flex;
1767
- grid-area:2 / 2;
1768
1394
  gap:var(--t-spacing-half);
1769
1395
  align-items:flex-start;
1770
- padding-inline-start:var(--t-spacing-1);
1771
- margin:0;
1772
- font-size:var(--tds-radio-description-font-size);
1773
- line-height:var(--tds-radio-description-line-height);
1774
- color:var(--tds-radio-description-color);
1396
+ margin:var(--t-spacing-fourth) 0 0;
1397
+ font-size:var(--tds-radio-group-description-font-size);
1398
+ line-height:var(--tds-radio-group-description-line-height);
1399
+ color:var(--tds-radio-group-description-color);
1775
1400
  cursor:text;
1776
1401
  }
1777
1402
 
1778
- .tds-radio--sm{
1779
- --tds-radio-line-height:1.35;
1780
- --tds-radio-input-size:var(--t-element-size-sm);
1781
- --tds-radio-font-size:var(--t-font-size-sm);
1782
- --tds-radio-description-font-size:var(--t-font-size-xs);
1783
- --tds-radio-description-line-height:1.3;
1403
+ .tds-radio-group-description .tds-radio-group-description-invalid-icon{
1404
+ display:var(--tds-radio-group-description-invalid-icon-display);
1405
+ flex-shrink:0;
1406
+ margin-top:calc(.5lh - .5em);
1407
+ line-height:var(--tds-radio-group-description-line-height);
1408
+ }
1409
+
1410
+ .tds-radio-group--sm{
1411
+ --tds-radio-group-line-height:1.35;
1412
+ --tds-radio-group-font-size:var(--t-font-size-sm);
1413
+ --tds-radio-group-description-font-size:var(--t-font-size-xs);
1414
+ --tds-radio-group-description-line-height:1.3;
1784
1415
  }
1785
1416
 
1786
- .tds-input:has(textarea){
1787
- --tds-input-padding-block:6px;
1788
- --tds-input-resizer-size:var(--t-element-size-sm);
1789
- --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");
1417
+ @layer t-critical{
1418
+ tds-page-header:not(.hydrated){
1419
+ display:none;
1420
+ }
1790
1421
  }
1791
1422
 
1792
- @supports (x: attr(x type(*))){
1423
+ @layer t-component{
1424
+ .tds-page-header{
1425
+ --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
1426
+ --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
1427
+ --tds-page-header-color:var(--t-text-color);
1428
+ --tds-page-header-bottom-border-color:transparent;
1429
+ --tds-page-header-headline-color:var(--t-text-color-headline);
1430
+ --tds-page-header-headline-font-size:var(--t-font-size-2xl);
1431
+ --tds-page-header-padding-x:var(--t-spacing-2);
1432
+ --tds-page-header-padding-y:var(--t-spacing-2);
1433
+ --tds-page-header-nav-padding-x:var(--tds-page-header-padding-x, var(--t-spacing-3));
1434
+ --tds-page-header-nav-gap:var(--t-spacing-1);
1435
+ --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%);
1436
+ --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
1437
+ --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
1438
+ --tds-page-header-nav-item-color:var(--t-text-color-secondary);
1439
+ --tds-page-header-nav-item-background-color:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 35%);
1440
+ --tds-page-header-nav-item-border-width:1px;
1793
1441
 
1794
- .tds-input textarea{
1795
- --tds-input-min-height:calc((attr(rows type(<number>), 3) * 1lh) + (var(--tds-input-padding-block) * 2) + 2px);
1796
- }
1797
- }
1442
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
1443
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color);
1798
1444
 
1799
- .tds-input.tds-textarea--resize-vertical textarea{
1800
- resize:vertical;
1801
- }
1445
+ --tds-page-header-nav-item-color-hover:var(--t-text-color);
1446
+ --tds-page-header-nav-item-background-color-hover:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 20%);
1447
+ --tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
1802
1448
 
1803
- .tds-input.tds-textarea--resize-none textarea{
1804
- resize:none;
1805
- }
1449
+ --tds-page-header-nav-item-background-color-active:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 10%);
1450
+ --tds-page-header-nav-item-border-color-active:var(--tds-page-header-nav-item-background-color-active);
1806
1451
 
1807
- .tds-input.tds-textarea--resize-auto textarea{
1808
- resize:vertical;
1452
+ --tds-page-header-nav-item-color-disabled:var(--t-text-color-disabled);
1453
+ --tds-page-header-nav-item-background-color-disabled:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 50%);
1454
+ --tds-page-header-nav-item-border-color-disabled:var(--tds-page-header-nav-item-background-color-disabled);
1455
+
1456
+ --tds-page-header-nav-item-color-selected:var(--t-text-color);
1457
+ --tds-page-header-nav-item-background-color-selected:var(--t-surface-color-canvas);
1458
+ --tds-page-header-nav-item-border-color-selected:var(--tds-page-header-nav-item-background-color-selected);
1459
+ --tds-page-header-nav-item-border-bottom-color-selected:var(--tds-page-header-nav-item-background-color-selected);
1460
+ --tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning);
1461
+ }
1462
+
1463
+ .tds-page-header--profile{
1464
+ --tds-page-header-padding-y:20px;
1465
+ }
1466
+
1467
+ @supports (color: light-dark(#fff, #000)){
1468
+ .tds-page-header{
1469
+ --tds-page-header-nav-background-start:light-dark(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0));
1470
+ --tds-page-header-nav-background-end:light-dark(rgba(0, 0, 0, .05), rgba(255, 255, 255, .1));
1809
1471
  }
1472
+ }
1810
1473
 
1811
- @supports (field-sizing: content){
1812
- .tds-input.tds-textarea--resize-auto textarea{
1813
- field-sizing:content;
1814
- resize:none;
1815
- }
1474
+ @media (min-width: 600px){
1475
+ .tds-page-header{
1476
+ --tds-page-header-background-color:var(--t-surface-color-canvas);
1477
+ --tds-page-header-color:var(--t-text-color-secondary);
1478
+ --tds-page-header-bottom-border-color:var(--t-border-color);
1479
+ --tds-page-header-padding-x:var(--t-spacing-3);
1480
+ --tds-page-header-headline-font-size:var(--t-font-size-3xl);
1481
+ --tds-page-header-nav-gap:var(--t-spacing-half);
1482
+ --tds-page-header-nav-background:transparent;
1483
+ --tds-page-header-nav-item-padding-x:var(--t-spacing-2);
1484
+ --tds-page-header-nav-item-border-width:1px;
1485
+ --tds-page-header-nav-item-color:var(--t-text-color);
1486
+ --tds-page-header-nav-item-background-color:var(--t-fill-color-neutral-070);
1487
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-bottom-border-color);
1488
+ --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-060);
1489
+ --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-050);
1490
+ --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
1491
+ --tds-page-header-nav-item-border-color-selected:var(--t-border-color);
1816
1492
  }
1493
+ }
1494
+ }
1817
1495
 
1818
- .tds-input textarea{
1819
- --tds-input-scrollbar-thumb-color-default:var(--t-fill-color-neutral-040);
1820
- --tds-input-scrollbar-thumb-color-hidden:transparent;
1821
- --tds-input-scrollbar-thumb-color-hover:var(--t-fill-color-neutral-030);
1822
- --tds-input-scrollbar-thumb-color-thumb-hover:var(--t-fill-color-neutral-020);
1823
- --tds-input-scrollbar-thumb-color-thumb-active:var(--t-fill-color-neutral-010);
1824
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-default);
1825
- --tds-input-scrollbar-surface-color:rgba(0, 0, 0, 0);
1826
- --tds-input-scrollbar-thumb-border-radius:999px;
1827
- --tds-input-scrollbar-thumb-border-width:3px;
1828
- --tds-input-scrollbar-track-margin-block:.125rem;
1829
- scrollbar-color:initial;
1830
- transition-timing-function:var(--t-ease-in-out);
1831
- transition-duration:var(--t-duration-200);
1832
- transition-property:var(--tds-input-transition-property), --tds-input-scrollbar-thumb-color;
1496
+ .tds-page-header{
1497
+ display:flex;
1498
+ flex-direction:column;
1499
+ padding-top:var(--tds-page-header-padding-y);
1500
+ color:var(--tds-page-header-color);
1501
+ background:var(--tds-page-header-background-color);
1502
+ border-bottom:1px solid var(--tds-page-header-bottom-border-color);
1833
1503
  }
1834
1504
 
1835
- @media (pointer: fine){
1836
- :is(.tds-input textarea)::-webkit-scrollbar{
1837
- width:12px;
1838
- height:12px;
1839
- cursor:default;
1840
- }
1505
+ .tds-page-header:not(.has-nav){
1506
+ padding-bottom:var(--tds-page-header-padding-y);
1507
+ }
1508
+
1509
+ .tds-page-header.inactive{
1510
+ background:var(--tds-page-header-background-color-inactive);
1511
+ }
1512
+
1513
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
1514
+ width:100%;
1515
+ }
1516
+
1517
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
1518
+ display:flex;
1519
+ flex-flow:row wrap;
1520
+ gap:var(--t-spacing-half) var(--t-spacing-1);
1521
+ align-items:flex-start;
1522
+ justify-content:flex-start;
1523
+ min-width:0;
1524
+ }
1841
1525
 
1842
- :is(.tds-input textarea)::-webkit-scrollbar-thumb{
1843
- cursor:default;
1844
- background:var(--tds-input-scrollbar-thumb-color);
1845
- background-clip:content-box;
1846
- border:var(--tds-input-scrollbar-thumb-border-width) solid var(--tds-input-scrollbar-surface-color);
1847
- border-radius:var(--tds-input-scrollbar-thumb-border-radius);
1526
+ :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{
1527
+ display:flex;
1528
+ gap:var(--tds-page-header-nav-gap);
1529
+ padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
1530
+ margin:0 0 -1px;
1531
+ overflow:auto;
1532
+ list-style:none;
1533
+ background:var(--tds-page-header-nav-background);
1848
1534
  }
1849
1535
 
1850
- :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1851
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
1536
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button){
1537
+ position:relative;
1538
+ display:inline-flex;
1539
+ padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
1540
+ font-size:var(--t-font-size-sm);
1541
+ line-height:22px;
1542
+ color:var(--tds-page-header-nav-item-color);
1543
+ white-space:nowrap;
1544
+ text-decoration:none;
1545
+ -webkit-appearance:none;
1546
+ -moz-appearance:none;
1547
+ appearance:none;
1548
+ cursor:pointer;
1549
+ outline-offset:-2px;
1550
+ background-color:var(--tds-page-header-nav-item-background-color);
1551
+ background-clip:padding-box;
1552
+ border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
1553
+ border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
1554
+ border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
1852
1555
  }
1853
1556
 
1854
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
1855
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
1856
- }
1557
+ .selected:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)){
1558
+ --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-selected);
1559
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-selected);
1560
+ --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-selected);
1561
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-selected);
1562
+ }
1857
1563
 
1858
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
1859
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
1860
- }
1564
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):hover{
1565
+ --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
1566
+ --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
1567
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
1568
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-hover);
1569
+ }
1861
1570
 
1862
- :is(.tds-input textarea)::-webkit-scrollbar-corner{
1863
- background:var(--tds-input-scrollbar-surface-color);
1864
- }
1571
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):active{
1572
+ background-color:var(--tds-page-header-nav-item-background-color-active);
1573
+ border-color:var(--tds-page-header-nav-item-border-color-active);
1574
+ border-bottom-color:var(--tds-page-header-nav-item-background-color-active);
1575
+ }
1865
1576
 
1866
- :is(.tds-input textarea)::-webkit-resizer{
1867
- background:var(--tds-input-resizer-icon) no-repeat;
1868
- background-position:right bottom;
1869
- background-size:var(--tds-input-resizer-size) var(--tds-input-resizer-size);
1870
- }
1577
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):disabled{
1578
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-disabled);
1579
+ color:var(--tds-page-header-nav-item-color-disabled);
1580
+ cursor:not-allowed;
1581
+ background-color:var(--tds-page-header-nav-item-background-color-disabled);
1582
+ opacity:1;
1583
+ }
1871
1584
 
1872
- :is(.tds-input textarea)::-webkit-scrollbar-track{
1873
- margin-block:var(--tds-input-scrollbar-track-margin-block);
1874
- cursor:default;
1585
+ @media (min-width: 600px){
1586
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected)::after{
1587
+ position:absolute;
1588
+ inset:auto -1px -1px;
1589
+ height:1px;
1590
+ pointer-events:none;
1591
+ content:"";
1592
+ background-color:var(--tds-page-header-bottom-border-color);
1593
+ }
1594
+ }
1595
+
1596
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
1597
+ position:relative;
1875
1598
  }
1876
1599
 
1877
- @supports (-moz-appearance: none){
1878
- :is(.tds-input textarea){
1879
- scrollbar-color:var(--tds-input-scrollbar-thumb-color-default) var(--tds-input-scrollbar-surface-color);
1880
- scrollbar-width:thin;
1600
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator)) :is(a,button){
1601
+ -webkit-mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
1602
+ mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
1881
1603
  }
1882
1604
 
1883
- @media (hover){
1884
- :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1885
- scrollbar-color:var(--tds-input-scrollbar-thumb-color-hover) var(--tds-input-scrollbar-surface-color);
1886
- }
1605
+ :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{
1606
+ position:absolute;
1607
+ top:-5px;
1608
+ right:-2px;
1609
+ width:10px;
1610
+ height:10px;
1611
+ content:"";
1612
+ background:var(--tds-page-header-nav-item-indicator-color);
1613
+ border-radius:50%;
1887
1614
  }
1888
- }
1889
- }
1890
1615
 
1891
- .tds-radio-group{
1892
- --tds-radio-group-font-size:var(--t-font-size-md);
1893
- --tds-radio-group-line-height:1.4;
1894
- --tds-radio-group-gap:var(--t-spacing-1);
1616
+ @media (prefers-reduced-motion: no-preference){
1617
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
1618
+ animation:indicator-pulse 1.25s ease infinite;
1619
+ }
1620
+ }
1895
1621
 
1896
- --tds-radio-group-description-font-size:var(--t-font-size-sm);
1897
- --tds-radio-group-description-line-height:1.35;
1898
- --tds-radio-group-description-color:var(--t-text-color-secondary);
1899
- --tds-radio-group-description-invalid-icon-display:none;
1622
+ .tds-page-header__title-bar{
1900
1623
  display:flex;
1901
1624
  flex-direction:column;
1902
- gap:0;
1903
- padding:0;
1904
- margin:0;
1625
+ gap:var(--t-spacing-2) var(--t-spacing-1);
1626
+ align-items:flex-start;
1627
+ justify-content:space-between;
1628
+ padding:0 var(--tds-page-header-padding-x);
1629
+ }
1905
1630
 
1906
- font-size:var(--tds-radio-group-font-size);
1907
- line-height:var(--tds-radio-group-line-height);
1908
- border:0;
1631
+ .tds-page-header--profile > .tds-page-header__title-bar{
1632
+ align-items:center;
1633
+ }
1634
+
1635
+ .tds-page-header__primary{
1636
+ width:100%;
1909
1637
  }
1910
1638
 
1911
- .tds-radio-group legend{
1912
- float:left;
1913
- padding:0;
1639
+ .tds-page-header__primary h1{
1914
1640
  margin:0;
1641
+ font-size:var(--tds-page-header-headline-font-size);
1642
+ font-weight:var(--t-font-weight-normal);
1643
+ line-height:32px;
1644
+ color:var(--tds-page-header-headline-color);
1645
+ overflow-wrap:break-word;
1915
1646
  }
1916
1647
 
1917
- .tds-radio-group[aria-invalid="true"]{
1918
- --tds-radio-group-description-color:var(--t-text-color-status-error);
1919
- --tds-radio-group-description-invalid-icon-display:inline-block;
1648
+ @media (min-width: 960px){
1649
+ .tds-page-header__primary{
1650
+ flex:1 1 max-content;
1651
+ width:auto;
1652
+ min-width:0;
1653
+ max-width:100%;
1920
1654
  }
1921
1655
 
1922
- .tds-radio-group[aria-invalid="true"] .tds-radio{
1923
- --tds-radio-input-border-color:var(--t-form-border-color-error);
1656
+ .tds-page-header__title-bar,
1657
+ .tds-page-header--profile .tds-page-header__title-bar{
1658
+ flex-flow:row nowrap;
1659
+ row-gap:12px;
1660
+ align-items:flex-start;
1661
+ }
1662
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
1663
+ width:auto;
1924
1664
  }
1925
1665
 
1926
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
1927
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1928
- --tds-radio-input-background-color:var(--t-form-background-color-error);
1929
- }
1666
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
1667
+ justify-content:flex-end;
1668
+ }
1669
+ }
1930
1670
 
1931
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
1932
- --tds-radio-input-background-color:var(--t-icon-color-inverted);
1933
- }
1671
+ .tds-page-header-phone,
1672
+ .tds-page-header-email{
1673
+ color:var(--tds-page-header-color);
1674
+ white-space:nowrap;
1675
+ }
1676
+ .tds-page-header-email{
1677
+ max-width:100%;
1678
+ overflow:hidden;
1679
+ text-overflow:ellipsis;
1680
+ }
1934
1681
 
1935
- .tds-radio-group:has(input:required) legend::after{
1936
- margin-left:.25ch;
1937
- color:var(--t-text-color-status-error);
1938
- content:"*";
1939
- }
1682
+ @keyframes indicator-pulse{
1683
+ 0%{
1684
+ opacity:.3;
1685
+ transform:scale(.9);
1686
+ }
1940
1687
 
1941
- .tds-radio-group-fields{
1942
- display:flex;
1943
- flex-direction:column;
1944
- gap:var(--tds-radio-group-gap);
1945
- align-items:flex-start;
1946
- margin-top:var(--t-spacing-1);
1688
+ 100%{
1689
+ opacity:0;
1690
+ transform:scale(1.75);
1691
+ }
1947
1692
  }
1948
1693
 
1949
- .tds-radio-group-description{
1950
- display:flex;
1951
- gap:var(--t-spacing-half);
1952
- align-items:flex-start;
1953
- margin:var(--t-spacing-fourth) 0 0;
1954
- font-size:var(--tds-radio-group-description-font-size);
1955
- line-height:var(--tds-radio-group-description-line-height);
1956
- color:var(--tds-radio-group-description-color);
1957
- cursor:text;
1694
+ .tds-button-group{
1695
+ display:inline-flex;
1958
1696
  }
1697
+ .tds-button-group > .tds-btn{
1698
+ --tds-button-group-item-z-index:1;
1959
1699
 
1960
- .tds-radio-group-description .tds-radio-group-description-invalid-icon{
1961
- display:var(--tds-radio-group-description-invalid-icon-display);
1962
- flex-shrink:0;
1963
- margin-top:calc(.5lh - .5em);
1964
- line-height:var(--tds-radio-group-description-line-height);
1700
+ position:relative;
1701
+ z-index:var(--tds-button-group-item-z-index);
1702
+ border-radius:0;
1703
+ }
1704
+ :is(.tds-button-group > .tds-btn):not(:first-child){
1705
+ margin-inline-start:calc(var(--tds-btn-border-width) * -1);
1706
+ }
1707
+ :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{
1708
+ position:absolute;
1709
+ inset-block:calc(var(--tds-btn-border-width) * -1);
1710
+ width:var(--tds-btn-border-width);
1711
+ pointer-events:none;
1712
+ content:"";
1713
+ background-color:var(--t-border-color-white);
1714
+ }
1715
+ :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:first-child)::before{
1716
+ inset-inline-start:calc(var(--tds-btn-border-width) * -1);
1717
+ }
1718
+ :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:last-child)::after{
1719
+ inset-inline-end:calc(var(--tds-btn-border-width) * -1);
1720
+ }
1721
+ :is(.tds-button-group > .tds-btn):hover{
1722
+ --tds-button-group-item-z-index:2;
1723
+ }
1724
+ :is(.tds-button-group > .tds-btn):focus-visible{
1725
+ --tds-button-group-item-z-index:5;
1726
+ }
1727
+ .tds-button-group > .tds-btn:first-child{
1728
+ border-start-start-radius:var(--tds-btn-border-radius);
1729
+ border-end-start-radius:var(--tds-btn-border-radius);
1730
+ }
1731
+ .tds-button-group > .tds-btn:last-child{
1732
+ border-start-end-radius:var(--tds-btn-border-radius);
1733
+ border-end-end-radius:var(--tds-btn-border-radius);
1965
1734
  }
1966
-
1967
- .tds-radio-group--sm{
1968
- --tds-radio-group-line-height:1.35;
1969
- --tds-radio-group-font-size:var(--t-font-size-sm);
1970
- --tds-radio-group-description-font-size:var(--t-font-size-xs);
1971
- --tds-radio-group-description-line-height:1.3;
1972
- }
1973
1735
 
1974
1736
  .tds-toggle-switch{
1975
1737
  --tds-toggle-switch-font-size:var(--t-font-size-md);
@@ -2111,6 +1873,244 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
2111
1873
  --tds-toggle-switch-display:inline-flex;
2112
1874
  }
2113
1875
 
1876
+ .tds-input:has(textarea){
1877
+ --tds-input-padding-block:6px;
1878
+ --tds-input-resizer-size:var(--t-element-size-sm);
1879
+ --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");
1880
+ }
1881
+
1882
+ @supports (x: attr(x type(*))){
1883
+
1884
+ .tds-input textarea{
1885
+ --tds-input-min-height:calc((attr(rows type(<number>), 3) * 1lh) + (var(--tds-input-padding-block) * 2) + 2px);
1886
+ }
1887
+ }
1888
+
1889
+ .tds-input.tds-textarea--resize-vertical textarea{
1890
+ resize:vertical;
1891
+ }
1892
+
1893
+ .tds-input.tds-textarea--resize-none textarea{
1894
+ resize:none;
1895
+ }
1896
+
1897
+ .tds-input.tds-textarea--resize-auto textarea{
1898
+ resize:vertical;
1899
+ }
1900
+
1901
+ @supports (field-sizing: content){
1902
+ .tds-input.tds-textarea--resize-auto textarea{
1903
+ field-sizing:content;
1904
+ resize:none;
1905
+ }
1906
+ }
1907
+
1908
+ .tds-input textarea{
1909
+ --tds-input-scrollbar-thumb-color-default:var(--t-fill-color-neutral-040);
1910
+ --tds-input-scrollbar-thumb-color-hidden:transparent;
1911
+ --tds-input-scrollbar-thumb-color-hover:var(--t-fill-color-neutral-030);
1912
+ --tds-input-scrollbar-thumb-color-thumb-hover:var(--t-fill-color-neutral-020);
1913
+ --tds-input-scrollbar-thumb-color-thumb-active:var(--t-fill-color-neutral-010);
1914
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-default);
1915
+ --tds-input-scrollbar-surface-color:rgba(0, 0, 0, 0);
1916
+ --tds-input-scrollbar-thumb-border-radius:999px;
1917
+ --tds-input-scrollbar-thumb-border-width:3px;
1918
+ --tds-input-scrollbar-track-margin-block:.125rem;
1919
+ scrollbar-color:initial;
1920
+ transition-timing-function:var(--t-ease-in-out);
1921
+ transition-duration:var(--t-duration-200);
1922
+ transition-property:var(--tds-input-transition-property), --tds-input-scrollbar-thumb-color;
1923
+ }
1924
+
1925
+ @media (pointer: fine){
1926
+ :is(.tds-input textarea)::-webkit-scrollbar{
1927
+ width:12px;
1928
+ height:12px;
1929
+ cursor:default;
1930
+ }
1931
+
1932
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb{
1933
+ cursor:default;
1934
+ background:var(--tds-input-scrollbar-thumb-color);
1935
+ background-clip:content-box;
1936
+ border:var(--tds-input-scrollbar-thumb-border-width) solid var(--tds-input-scrollbar-surface-color);
1937
+ border-radius:var(--tds-input-scrollbar-thumb-border-radius);
1938
+ }
1939
+
1940
+ :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1941
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
1942
+ }
1943
+
1944
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
1945
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
1946
+ }
1947
+
1948
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
1949
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
1950
+ }
1951
+
1952
+ :is(.tds-input textarea)::-webkit-scrollbar-corner{
1953
+ background:var(--tds-input-scrollbar-surface-color);
1954
+ }
1955
+
1956
+ :is(.tds-input textarea)::-webkit-resizer{
1957
+ background:var(--tds-input-resizer-icon) no-repeat;
1958
+ background-position:right bottom;
1959
+ background-size:var(--tds-input-resizer-size) var(--tds-input-resizer-size);
1960
+ }
1961
+
1962
+ :is(.tds-input textarea)::-webkit-scrollbar-track{
1963
+ margin-block:var(--tds-input-scrollbar-track-margin-block);
1964
+ cursor:default;
1965
+ }
1966
+
1967
+ @supports (-moz-appearance: none){
1968
+ :is(.tds-input textarea){
1969
+ scrollbar-color:var(--tds-input-scrollbar-thumb-color-default) var(--tds-input-scrollbar-surface-color);
1970
+ scrollbar-width:thin;
1971
+ }
1972
+
1973
+ @media (hover){
1974
+ :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1975
+ scrollbar-color:var(--tds-input-scrollbar-thumb-color-hover) var(--tds-input-scrollbar-surface-color);
1976
+ }
1977
+ }
1978
+ }
1979
+ }
1980
+
1981
+ .tds-radio{
1982
+ --tds-radio-font-size:var(--t-font-size-md);
1983
+ --tds-radio-cursor:pointer;
1984
+ --tds-radio-line-height:1.4;
1985
+ --tds-radio-transition-property:border-width;
1986
+
1987
+ --tds-radio-input-size:var(--t-element-size-md);
1988
+ --tds-radio-input-border-radius:var(--t-border-radius-round);
1989
+ --tds-radio-input-border-color:var(--t-form-border-color);
1990
+ --tds-radio-input-border-width:var(--t-form-border-width);
1991
+ --tds-radio-input-background-color:var(--t-form-background-color);
1992
+
1993
+ --tds-radio-label-color:var(--t-form-color);
1994
+
1995
+ --tds-radio-description-font-size:var(--t-font-size-sm);
1996
+ --tds-radio-description-line-height:1.35;
1997
+ --tds-radio-description-color:var(--t-text-color-secondary);
1998
+
1999
+ position:relative;
2000
+ display:inline-grid;
2001
+ grid-template-columns:auto;
2002
+ grid-auto-columns:1fr;
2003
+ gap:var(--t-spacing-fourth) 0;
2004
+ line-height:var(--tds-radio-line-height);
2005
+ -webkit-user-select:none;
2006
+ -moz-user-select:none;
2007
+ user-select:none;
2008
+ }
2009
+
2010
+ .tds-radio label{
2011
+ grid-area:1 / 2;
2012
+ padding-inline-start:var(--t-spacing-1);
2013
+ font-size:var(--tds-radio-font-size);
2014
+ font-weight:var(--t-font-weight-normal);
2015
+ color:var(--tds-radio-label-color);
2016
+ cursor:var(--tds-radio-cursor);
2017
+ }
2018
+
2019
+ .tds-radio input[type="radio"]{
2020
+ position:relative;
2021
+ width:1em;
2022
+ height:1em;
2023
+ margin:calc((1lh - 1em) / 2) 0 0;
2024
+ font-size:var(--tds-radio-font-size);
2025
+ line-height:inherit;
2026
+ -webkit-appearance:none;
2027
+ -moz-appearance:none;
2028
+ appearance:none;
2029
+ cursor:var(--tds-radio-cursor);
2030
+ background-color:var(--tds-radio-input-background-color);
2031
+ border:var(--tds-radio-input-border-width) solid var(--tds-radio-input-border-color);
2032
+ border-radius:var(--tds-radio-input-border-radius);
2033
+ transition-timing-function:var(--t-ease-in-out);
2034
+ transition-duration:var(--t-duration-200);
2035
+ transition-property:var(--tds-radio-transition-property);
2036
+ }
2037
+
2038
+ :is(.tds-radio input[type="radio"]):hover:not(:disabled){
2039
+ --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
2040
+ --tds-radio-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
2041
+ }
2042
+
2043
+ :is(.tds-radio input[type="radio"]):focus-visible{
2044
+ outline:var(--t-focus-ring-outline);
2045
+ outline-offset:var(--t-focus-ring-offset);
2046
+ }
2047
+
2048
+ :is(.tds-radio input[type="radio"]):disabled{
2049
+ pointer-events:none;
2050
+ }
2051
+
2052
+ @media (prefers-reduced-motion: reduce){
2053
+
2054
+ .tds-radio input[type="radio"]{
2055
+ --tds-radio-transition-property:none;
2056
+ }
2057
+ }
2058
+
2059
+ .tds-radio:has(input:checked){
2060
+ --tds-radio-input-background-color:var(--t-icon-color-inverted);
2061
+ --tds-radio-input-border-color:var(--t-border-color-control-info);
2062
+ --tds-radio-input-border-width:4px;
2063
+ }
2064
+
2065
+ .tds-radio:has(input:checked) input:hover:not(:disabled){
2066
+ --tds-radio-input-background-color:var(--t-icon-color-inverted);
2067
+ --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
2068
+ }
2069
+
2070
+ .tds-radio:has(input:user-invalid){
2071
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
2072
+ }
2073
+
2074
+ .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
2075
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
2076
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
2077
+ }
2078
+
2079
+ .tds-radio:has(input:disabled){
2080
+ --tds-radio-input-background-color:var(--t-form-background-color-disabled);
2081
+ --tds-radio-input-border-color:var(--t-form-border-color-disabled);
2082
+
2083
+ --tds-radio-label-color:var(--t-form-color-disabled);
2084
+ --tds-radio-description-color:var(--t-form-color-disabled);
2085
+ --tds-radio-cursor:not-allowed;
2086
+ }
2087
+
2088
+ .tds-radio:has(input:disabled) input:checked{
2089
+ --tds-radio-input-background-color:var(--t-form-background-color);
2090
+ --tds-radio-input-border-color:var(--t-form-border-color-disabled);
2091
+ }
2092
+
2093
+ .tds-radio-description{
2094
+ display:flex;
2095
+ grid-area:2 / 2;
2096
+ gap:var(--t-spacing-half);
2097
+ align-items:flex-start;
2098
+ padding-inline-start:var(--t-spacing-1);
2099
+ margin:0;
2100
+ font-size:var(--tds-radio-description-font-size);
2101
+ line-height:var(--tds-radio-description-line-height);
2102
+ color:var(--tds-radio-description-color);
2103
+ cursor:text;
2104
+ }
2105
+
2106
+ .tds-radio--sm{
2107
+ --tds-radio-line-height:1.35;
2108
+ --tds-radio-input-size:var(--t-element-size-sm);
2109
+ --tds-radio-font-size:var(--t-font-size-sm);
2110
+ --tds-radio-description-font-size:var(--t-font-size-xs);
2111
+ --tds-radio-description-line-height:1.3;
2112
+ }
2113
+
2114
2114
  .tds-modal-overlay{
2115
2115
  --tds-modal-min-margin-block:var(--t-spacing-3);
2116
2116