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

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 +557 -557
  2. package/dist/reactRender.css.map +1 -1
  3. package/dist/reactRenderLegacy.css +557 -557
  4. package/dist/reactRenderLegacy.css.map +1 -1
  5. package/package.json +2 -2
package/dist/reactRender.css CHANGED
@@ -677,241 +677,281 @@
677
677
  [data-padding-inline-xl="7"]{ padding-inline:var(--t-spacing-7); }
678
678
  }
679
679
 
680
- .tds-button-group{
681
- display:inline-flex;
680
+ @layer t-critical{
681
+ tds-page-header:not(.hydrated){
682
+ display:none;
683
+ }
682
684
  }
683
- .tds-button-group > .tds-btn{
684
- --tds-button-group-item-z-index:1;
685
685
 
686
- position:relative;
687
- z-index:var(--tds-button-group-item-z-index);
688
- border-radius:0;
689
- }
690
- :is(.tds-button-group > .tds-btn):not(:first-child){
691
- margin-inline-start:calc(var(--tds-btn-border-width) * -1);
692
- }
693
- :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:first-child)::before,:is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:last-child)::after{
694
- position:absolute;
695
- inset-block:calc(var(--tds-btn-border-width) * -1);
696
- width:var(--tds-btn-border-width);
697
- pointer-events:none;
698
- content:"";
699
- background-color:var(--t-border-color-white);
700
- }
701
- :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:first-child)::before{
702
- inset-inline-start:calc(var(--tds-btn-border-width) * -1);
703
- }
704
- :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:last-child)::after{
705
- inset-inline-end:calc(var(--tds-btn-border-width) * -1);
706
- }
707
- :is(.tds-button-group > .tds-btn):hover{
708
- --tds-button-group-item-z-index:2;
709
- }
710
- :is(.tds-button-group > .tds-btn):focus-visible{
711
- --tds-button-group-item-z-index:5;
712
- }
713
- .tds-button-group > .tds-btn:first-child{
714
- border-start-start-radius:var(--tds-btn-border-radius);
715
- border-end-start-radius:var(--tds-btn-border-radius);
716
- }
717
- .tds-button-group > .tds-btn:last-child{
718
- border-start-end-radius:var(--tds-btn-border-radius);
719
- border-end-end-radius:var(--tds-btn-border-radius);
720
- }
686
+ @layer t-component{
687
+ .tds-page-header{
688
+ --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
689
+ --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
690
+ --tds-page-header-color:var(--t-text-color);
691
+ --tds-page-header-bottom-border-color:transparent;
692
+ --tds-page-header-headline-color:var(--t-text-color-headline);
693
+ --tds-page-header-headline-font-size:var(--t-font-size-2xl);
694
+ --tds-page-header-padding-x:var(--t-spacing-2);
695
+ --tds-page-header-padding-y:var(--t-spacing-2);
696
+ --tds-page-header-nav-padding-x:var(--tds-page-header-padding-x, var(--t-spacing-3));
697
+ --tds-page-header-nav-gap:var(--t-spacing-1);
698
+ --tds-page-header-nav-background:linear-gradient(180deg, var(--tds-page-header-nav-background-start, rgba(0, 0, 0, 0)) 0%, var(--tds-page-header-nav-background-end, rgba(0, 0, 0, .1)) 100%);
699
+ --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
700
+ --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
701
+ --tds-page-header-nav-item-color:var(--t-text-color-secondary);
702
+ --tds-page-header-nav-item-background-color:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 35%);
703
+ --tds-page-header-nav-item-border-width:1px;
721
704
 
722
- .tds-checkbox{
723
- --tds-checkbox-font-size:var(--t-font-size-md);
724
- --tds-checkbox-cursor:pointer;
725
- --tds-checkbox-line-height:1.4;
726
- --tds-checkbox-transition-property:background-color, border-color;
705
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
706
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color);
727
707
 
728
- --tds-checkbox-input-size:var(--t-element-size-md);
729
- --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
730
- --tds-checkbox-input-border-color:var(--t-form-border-color);
731
- --tds-checkbox-input-background-color:var(--t-form-background-color);
708
+ --tds-page-header-nav-item-color-hover:var(--t-text-color);
709
+ --tds-page-header-nav-item-background-color-hover:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 20%);
710
+ --tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
732
711
 
733
- --tds-checkbox-input-icon:none;
734
- --tds-checkbox-input-icon-visibility:hidden;
735
- --tds-checkbox-input-icon-opacity:0;
736
- --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
712
+ --tds-page-header-nav-item-background-color-active:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 10%);
713
+ --tds-page-header-nav-item-border-color-active:var(--tds-page-header-nav-item-background-color-active);
737
714
 
738
- --tds-checkbox-label-color:var(--t-form-color);
715
+ --tds-page-header-nav-item-color-disabled:var(--t-text-color-disabled);
716
+ --tds-page-header-nav-item-background-color-disabled:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 50%);
717
+ --tds-page-header-nav-item-border-color-disabled:var(--tds-page-header-nav-item-background-color-disabled);
739
718
 
740
- --tds-checkbox-description-font-size:var(--t-font-size-sm);
741
- --tds-checkbox-description-line-height:1.35;
742
- --tds-checkbox-description-color:var(--t-text-color-secondary);
743
- --tds-checkbox-description-invalid-icon-display:none;
719
+ --tds-page-header-nav-item-color-selected:var(--t-text-color);
720
+ --tds-page-header-nav-item-background-color-selected:var(--t-surface-color-canvas);
721
+ --tds-page-header-nav-item-border-color-selected:var(--tds-page-header-nav-item-background-color-selected);
722
+ --tds-page-header-nav-item-border-bottom-color-selected:var(--tds-page-header-nav-item-background-color-selected);
723
+ --tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning);
724
+ }
744
725
 
745
- position:relative;
746
- display:inline-grid;
747
- grid-template-columns:auto;
748
- grid-auto-columns:1fr;
749
- gap:var(--t-spacing-fourth) 0;
750
- line-height:var(--tds-checkbox-line-height);
751
- -webkit-user-select:none;
752
- -moz-user-select:none;
753
- user-select:none;
726
+ .tds-page-header--profile{
727
+ --tds-page-header-padding-y:20px;
728
+ }
729
+
730
+ @supports (color: light-dark(#fff, #000)){
731
+ .tds-page-header{
732
+ --tds-page-header-nav-background-start:light-dark(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0));
733
+ --tds-page-header-nav-background-end:light-dark(rgba(0, 0, 0, .05), rgba(255, 255, 255, .1));
734
+ }
735
+ }
736
+
737
+ @media (min-width: 600px){
738
+ .tds-page-header{
739
+ --tds-page-header-background-color:var(--t-surface-color-canvas);
740
+ --tds-page-header-color:var(--t-text-color-secondary);
741
+ --tds-page-header-bottom-border-color:var(--t-border-color);
742
+ --tds-page-header-padding-x:var(--t-spacing-3);
743
+ --tds-page-header-headline-font-size:var(--t-font-size-3xl);
744
+ --tds-page-header-nav-gap:var(--t-spacing-half);
745
+ --tds-page-header-nav-background:transparent;
746
+ --tds-page-header-nav-item-padding-x:var(--t-spacing-2);
747
+ --tds-page-header-nav-item-border-width:1px;
748
+ --tds-page-header-nav-item-color:var(--t-text-color);
749
+ --tds-page-header-nav-item-background-color:var(--t-fill-color-neutral-070);
750
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-bottom-border-color);
751
+ --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-060);
752
+ --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-050);
753
+ --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
754
+ --tds-page-header-nav-item-border-color-selected:var(--t-border-color);
755
+ }
756
+ }
754
757
  }
755
758
 
756
- .tds-checkbox label{
757
- grid-area:1 / 2;
758
- padding-inline-start:var(--t-spacing-1);
759
- font-size:var(--tds-checkbox-font-size);
760
- font-weight:var(--t-font-weight-normal);
761
- color:var(--tds-checkbox-label-color);
762
- cursor:var(--tds-checkbox-cursor);
759
+ .tds-page-header{
760
+ display:flex;
761
+ flex-direction:column;
762
+ padding-top:var(--tds-page-header-padding-y);
763
+ color:var(--tds-page-header-color);
764
+ background:var(--tds-page-header-background-color);
765
+ border-bottom:1px solid var(--tds-page-header-bottom-border-color);
766
+ }
767
+
768
+ .tds-page-header:not(.has-nav){
769
+ padding-bottom:var(--tds-page-header-padding-y);
763
770
  }
764
771
 
765
- .tds-checkbox tds-indeterminate{
766
- display:flex;
772
+ .tds-page-header.inactive{
773
+ background:var(--tds-page-header-background-color-inactive);
767
774
  }
768
775
 
769
- .tds-checkbox input[type="checkbox"]{
770
- position:relative;
771
- width:1em;
772
- height:1em;
773
- margin:calc((1lh - 1em) / 2) 0 0;
774
- font-size:var(--tds-checkbox-font-size);
775
- line-height:inherit;
776
- -webkit-appearance:none;
777
- -moz-appearance:none;
778
- appearance:none;
779
- cursor:var(--tds-checkbox-cursor);
780
- background-color:var(--tds-checkbox-input-background-color);
781
- border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
782
- border-radius:var(--tds-checkbox-input-border-radius);
783
- transition-timing-function:var(--t-ease-in-out);
784
- transition-duration:var(--t-duration-200);
785
- transition-property:var(--tds-checkbox-transition-property);
776
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
777
+ width:100%;
786
778
  }
787
779
 
788
- :is(.tds-checkbox input[type="checkbox"])::before{
789
- position:absolute;
790
- top:50%;
791
- left:50%;
792
- visibility:var(--tds-checkbox-input-icon-visibility);
793
- width:100%;
794
- height:100%;
795
- content:"";
796
- background-color:var(--tds-checkbox-input-icon-fill);
797
- border-radius:var(--tds-checkbox-input-border-radius);
798
- opacity:var(--tds-checkbox-input-icon-opacity);
799
- -webkit-mask-image:var(--tds-checkbox-input-icon);
800
- mask-image:var(--tds-checkbox-input-icon);
801
- -webkit-mask-repeat:no-repeat;
802
- mask-repeat:no-repeat;
803
- -webkit-mask-size:contain;
804
- mask-size:contain;
805
- transform:translate(-50%, -50%);
806
- }
780
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
781
+ display:flex;
782
+ flex-flow:row wrap;
783
+ gap:var(--t-spacing-half) var(--t-spacing-1);
784
+ align-items:flex-start;
785
+ justify-content:flex-start;
786
+ min-width:0;
787
+ }
807
788
 
808
- :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
809
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
810
- --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
789
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)):not(:has(ul)),:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) ul{
790
+ display:flex;
791
+ gap:var(--tds-page-header-nav-gap);
792
+ padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
793
+ margin:0 0 -1px;
794
+ overflow:auto;
795
+ list-style:none;
796
+ background:var(--tds-page-header-nav-background);
811
797
  }
812
798
 
813
- :is(.tds-checkbox input[type="checkbox"]):focus-visible{
814
- outline:var(--t-focus-ring-outline);
815
- outline-offset:var(--t-focus-ring-offset);
799
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button){
800
+ position:relative;
801
+ display:inline-flex;
802
+ padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
803
+ font-size:var(--t-font-size-sm);
804
+ line-height:22px;
805
+ color:var(--tds-page-header-nav-item-color);
806
+ white-space:nowrap;
807
+ text-decoration:none;
808
+ -webkit-appearance:none;
809
+ -moz-appearance:none;
810
+ appearance:none;
811
+ cursor:pointer;
812
+ outline-offset:-2px;
813
+ background-color:var(--tds-page-header-nav-item-background-color);
814
+ background-clip:padding-box;
815
+ border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
816
+ border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
817
+ border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
816
818
  }
817
819
 
818
- :is(.tds-checkbox input[type="checkbox"]):disabled{
819
- pointer-events:none;
820
- }
820
+ .selected:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)){
821
+ --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-selected);
822
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-selected);
823
+ --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-selected);
824
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-selected);
825
+ }
821
826
 
822
- @media (prefers-reduced-motion: reduce){
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
+ }
823
833
 
824
- .tds-checkbox input[type="checkbox"]{
825
- --tds-checkbox-transition-property:none;
826
- }
827
- }
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
+ }
828
839
 
829
- .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
830
- --tds-checkbox-input-background-color:var(--t-fill-color-control);
831
- --tds-checkbox-input-border-color:var(--t-border-color-control-info);
832
- --tds-checkbox-input-icon-visibility:visible;
833
- --tds-checkbox-input-icon-opacity:1;
834
- }
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
+ }
835
847
 
836
- :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
837
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
838
- --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
848
+ @media (min-width: 600px){
849
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected)::after{
850
+ position:absolute;
851
+ inset:auto -1px -1px;
852
+ height:1px;
853
+ pointer-events:none;
854
+ content:"";
855
+ background-color:var(--tds-page-header-bottom-border-color);
856
+ }
857
+ }
858
+
859
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
860
+ position:relative;
839
861
  }
840
862
 
841
- .tds-checkbox:has(input:checked){
842
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
843
- }
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
+ }
844
867
 
845
- .tds-checkbox:has(input:indeterminate){
846
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
847
- }
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
+ }
848
878
 
849
- .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
850
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
851
- --tds-checkbox-description-color:var(--t-text-color-status-error);
852
- --tds-checkbox-description-invalid-icon-display:inline-block;
853
- }
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
+ }
854
884
 
855
- :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
856
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
857
- --tds-checkbox-input-background-color:var(--t-form-background-color-error);
858
- }
885
+ .tds-page-header__title-bar{
886
+ display:flex;
887
+ flex-direction:column;
888
+ gap:var(--t-spacing-2) var(--t-spacing-1);
889
+ align-items:flex-start;
890
+ justify-content:space-between;
891
+ padding:0 var(--tds-page-header-padding-x);
892
+ }
859
893
 
860
- :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:checked,:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:indeterminate{
861
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
862
- --tds-checkbox-input-background-color:var(--t-form-border-color-error);
863
- }
894
+ .tds-page-header--profile > .tds-page-header__title-bar{
895
+ align-items:center;
896
+ }
864
897
 
865
- :is(:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:checked,:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:indeterminate):hover:not(:disabled){
866
- --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
867
- --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
868
- }
898
+ .tds-page-header__primary{
899
+ width:100%;
900
+ }
869
901
 
870
- .tds-checkbox:has(input:required) label::after{
871
- margin-left:.25ch;
872
- color:var(--t-text-color-status-error);
873
- content:"*";
874
- }
902
+ .tds-page-header__primary h1{
903
+ margin:0;
904
+ font-size:var(--tds-page-header-headline-font-size);
905
+ font-weight:var(--t-font-weight-normal);
906
+ line-height:32px;
907
+ color:var(--tds-page-header-headline-color);
908
+ overflow-wrap:break-word;
909
+ }
875
910
 
876
- .tds-checkbox:has(input:disabled){
877
- --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
878
- --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
911
+ @media (min-width: 960px){
912
+ .tds-page-header__primary{
913
+ flex:1 1 max-content;
914
+ width:auto;
915
+ min-width:0;
916
+ max-width:100%;
917
+ }
879
918
 
880
- --tds-checkbox-label-color:var(--t-form-color-disabled);
881
- --tds-checkbox-description-color:var(--t-form-color-disabled);
882
- --tds-checkbox-cursor:not-allowed;
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;
883
924
  }
925
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
926
+ width:auto;
927
+ }
884
928
 
885
- .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
886
- --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
929
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
930
+ justify-content:flex-end;
887
931
  }
932
+ }
888
933
 
889
- .tds-checkbox-description{
890
- display:flex;
891
- grid-area:2 / 2;
892
- gap:var(--t-spacing-half);
893
- align-items:flex-start;
894
- padding-inline-start:var(--t-spacing-1);
895
- margin:0;
896
- font-size:var(--tds-checkbox-description-font-size);
897
- line-height:var(--tds-checkbox-description-line-height);
898
- color:var(--tds-checkbox-description-color);
899
- cursor:text;
934
+ .tds-page-header-phone,
935
+ .tds-page-header-email{
936
+ color:var(--tds-page-header-color);
937
+ white-space:nowrap;
938
+ }
939
+ .tds-page-header-email{
940
+ max-width:100%;
941
+ overflow:hidden;
942
+ text-overflow:ellipsis;
900
943
  }
901
944
 
902
- .tds-checkbox-description .tds-checkbox-description-invalid-icon{
903
- display:var(--tds-checkbox-description-invalid-icon-display);
904
- flex-shrink:0;
905
- margin-top:calc(.5lh - .5em);
906
- line-height:var(--tds-checkbox-description-line-height);
945
+ @keyframes indicator-pulse{
946
+ 0%{
947
+ opacity:.3;
948
+ transform:scale(.9);
907
949
  }
908
950
 
909
- .tds-checkbox--sm{
910
- --tds-checkbox-line-height:1.35;
911
- --tds-checkbox-input-size:var(--t-element-size-sm);
912
- --tds-checkbox-font-size:var(--t-font-size-sm);
913
- --tds-checkbox-description-font-size:var(--t-font-size-xs);
914
- --tds-checkbox-description-line-height:1.3;
951
+ 100%{
952
+ opacity:0;
953
+ transform:scale(1.75);
954
+ }
915
955
  }
916
956
 
917
957
 
@@ -1251,382 +1291,268 @@
1251
1291
  }
1252
1292
 
1253
1293
  .tds-sidenav-collapse:not(.\:popover-open){
1254
- opacity:var(--tds-sidenav-collapse-closed-opacity);
1255
- transition:var(--tds-sidenav-collapse-transition-exit);
1256
- }
1257
- }
1258
- }
1259
-
1260
- @media (min-width: 720px){
1261
- .tds-sidenav-responsive-header{
1262
- display:none;
1263
- }
1264
- }
1265
-
1266
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
1267
- display:none;
1268
- }
1269
-
1270
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
1271
- display:block;
1272
- }
1273
-
1274
- tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1275
- display:flex;
1276
- flex-direction:column;
1277
- }
1278
-
1279
- @layer t-critical{
1280
- tds-page-header:not(.hydrated){
1281
- display:none;
1282
- }
1283
- }
1284
-
1285
- @layer t-component{
1286
- .tds-page-header{
1287
- --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
1288
- --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
1289
- --tds-page-header-color:var(--t-text-color);
1290
- --tds-page-header-bottom-border-color:transparent;
1291
- --tds-page-header-headline-color:var(--t-text-color-headline);
1292
- --tds-page-header-headline-font-size:var(--t-font-size-2xl);
1293
- --tds-page-header-padding-x:var(--t-spacing-2);
1294
- --tds-page-header-padding-y:var(--t-spacing-2);
1295
- --tds-page-header-nav-padding-x:var(--tds-page-header-padding-x, var(--t-spacing-3));
1296
- --tds-page-header-nav-gap:var(--t-spacing-1);
1297
- --tds-page-header-nav-background:linear-gradient(180deg, var(--tds-page-header-nav-background-start, rgba(0, 0, 0, 0)) 0%, var(--tds-page-header-nav-background-end, rgba(0, 0, 0, .1)) 100%);
1298
- --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
1299
- --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
1300
- --tds-page-header-nav-item-color:var(--t-text-color-secondary);
1301
- --tds-page-header-nav-item-background-color:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 35%);
1302
- --tds-page-header-nav-item-border-width:1px;
1303
-
1304
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
1305
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color);
1306
-
1307
- --tds-page-header-nav-item-color-hover:var(--t-text-color);
1308
- --tds-page-header-nav-item-background-color-hover:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 20%);
1309
- --tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
1310
-
1311
- --tds-page-header-nav-item-background-color-active:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 10%);
1312
- --tds-page-header-nav-item-border-color-active:var(--tds-page-header-nav-item-background-color-active);
1313
-
1314
- --tds-page-header-nav-item-color-disabled:var(--t-text-color-disabled);
1315
- --tds-page-header-nav-item-background-color-disabled:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 50%);
1316
- --tds-page-header-nav-item-border-color-disabled:var(--tds-page-header-nav-item-background-color-disabled);
1317
-
1318
- --tds-page-header-nav-item-color-selected:var(--t-text-color);
1319
- --tds-page-header-nav-item-background-color-selected:var(--t-surface-color-canvas);
1320
- --tds-page-header-nav-item-border-color-selected:var(--tds-page-header-nav-item-background-color-selected);
1321
- --tds-page-header-nav-item-border-bottom-color-selected:var(--tds-page-header-nav-item-background-color-selected);
1322
- --tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning);
1323
- }
1324
-
1325
- .tds-page-header--profile{
1326
- --tds-page-header-padding-y:20px;
1327
- }
1328
-
1329
- @supports (color: light-dark(#fff, #000)){
1330
- .tds-page-header{
1331
- --tds-page-header-nav-background-start:light-dark(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0));
1332
- --tds-page-header-nav-background-end:light-dark(rgba(0, 0, 0, .05), rgba(255, 255, 255, .1));
1333
- }
1334
- }
1335
-
1336
- @media (min-width: 600px){
1337
- .tds-page-header{
1338
- --tds-page-header-background-color:var(--t-surface-color-canvas);
1339
- --tds-page-header-color:var(--t-text-color-secondary);
1340
- --tds-page-header-bottom-border-color:var(--t-border-color);
1341
- --tds-page-header-padding-x:var(--t-spacing-3);
1342
- --tds-page-header-headline-font-size:var(--t-font-size-3xl);
1343
- --tds-page-header-nav-gap:var(--t-spacing-half);
1344
- --tds-page-header-nav-background:transparent;
1345
- --tds-page-header-nav-item-padding-x:var(--t-spacing-2);
1346
- --tds-page-header-nav-item-border-width:1px;
1347
- --tds-page-header-nav-item-color:var(--t-text-color);
1348
- --tds-page-header-nav-item-background-color:var(--t-fill-color-neutral-070);
1349
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-bottom-border-color);
1350
- --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-060);
1351
- --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-050);
1352
- --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
1353
- --tds-page-header-nav-item-border-color-selected:var(--t-border-color);
1354
- }
1355
- }
1356
- }
1357
-
1358
- .tds-page-header{
1359
- display:flex;
1360
- flex-direction:column;
1361
- padding-top:var(--tds-page-header-padding-y);
1362
- color:var(--tds-page-header-color);
1363
- background:var(--tds-page-header-background-color);
1364
- border-bottom:1px solid var(--tds-page-header-bottom-border-color);
1365
- }
1366
-
1367
- .tds-page-header:not(.has-nav){
1368
- padding-bottom:var(--tds-page-header-padding-y);
1369
- }
1370
-
1371
- .tds-page-header.inactive{
1372
- background:var(--tds-page-header-background-color-inactive);
1373
- }
1374
-
1375
- .tds-page-header :is([slot="actions"],.tds-page-header__actions){
1376
- width:100%;
1377
- }
1378
-
1379
- .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
1380
- display:flex;
1381
- flex-flow:row wrap;
1382
- gap:var(--t-spacing-half) var(--t-spacing-1);
1383
- align-items:flex-start;
1384
- justify-content:flex-start;
1385
- min-width:0;
1386
- }
1387
-
1388
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)):not(:has(ul)),:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) ul{
1389
- display:flex;
1390
- gap:var(--tds-page-header-nav-gap);
1391
- padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
1392
- margin:0 0 -1px;
1393
- overflow:auto;
1394
- list-style:none;
1395
- background:var(--tds-page-header-nav-background);
1396
- }
1397
-
1398
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button){
1399
- position:relative;
1400
- display:inline-flex;
1401
- padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
1402
- font-size:var(--t-font-size-sm);
1403
- line-height:22px;
1404
- color:var(--tds-page-header-nav-item-color);
1405
- white-space:nowrap;
1406
- text-decoration:none;
1407
- -webkit-appearance:none;
1408
- -moz-appearance:none;
1409
- appearance:none;
1410
- cursor:pointer;
1411
- outline-offset:-2px;
1412
- background-color:var(--tds-page-header-nav-item-background-color);
1413
- background-clip:padding-box;
1414
- border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
1415
- border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
1416
- border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
1417
- }
1418
-
1419
- .selected:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)){
1420
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-selected);
1421
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-selected);
1422
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-selected);
1423
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-selected);
1424
- }
1425
-
1426
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):hover{
1427
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
1428
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
1429
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
1430
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-hover);
1431
- }
1294
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
1295
+ transition:var(--tds-sidenav-collapse-transition-exit);
1296
+ }
1297
+ }
1298
+ }
1432
1299
 
1433
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):active{
1434
- background-color:var(--tds-page-header-nav-item-background-color-active);
1435
- border-color:var(--tds-page-header-nav-item-border-color-active);
1436
- border-bottom-color:var(--tds-page-header-nav-item-background-color-active);
1437
- }
1300
+ @media (min-width: 720px){
1301
+ .tds-sidenav-responsive-header{
1302
+ display:none;
1303
+ }
1304
+ }
1438
1305
 
1439
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):disabled{
1440
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-disabled);
1441
- color:var(--tds-page-header-nav-item-color-disabled);
1442
- cursor:not-allowed;
1443
- background-color:var(--tds-page-header-nav-item-background-color-disabled);
1444
- opacity:1;
1445
- }
1306
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
1307
+ display:none;
1308
+ }
1446
1309
 
1447
- @media (min-width: 600px){
1448
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected)::after{
1449
- position:absolute;
1450
- inset:auto -1px -1px;
1451
- height:1px;
1452
- pointer-events:none;
1453
- content:"";
1454
- background-color:var(--tds-page-header-bottom-border-color);
1455
- }
1456
- }
1310
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
1311
+ display:block;
1312
+ }
1457
1313
 
1458
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
1459
- position:relative;
1314
+ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1315
+ display:flex;
1316
+ flex-direction:column;
1460
1317
  }
1461
1318
 
1462
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator)) :is(a,button){
1463
- -webkit-mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
1464
- mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
1465
- }
1319
+ .tds-checkbox{
1320
+ --tds-checkbox-font-size:var(--t-font-size-md);
1321
+ --tds-checkbox-cursor:pointer;
1322
+ --tds-checkbox-line-height:1.4;
1323
+ --tds-checkbox-transition-property:background-color, border-color;
1466
1324
 
1467
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::before,:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
1468
- position:absolute;
1469
- top:-5px;
1470
- right:-2px;
1471
- width:10px;
1472
- height:10px;
1473
- content:"";
1474
- background:var(--tds-page-header-nav-item-indicator-color);
1475
- border-radius:50%;
1476
- }
1325
+ --tds-checkbox-input-size:var(--t-element-size-md);
1326
+ --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
1327
+ --tds-checkbox-input-border-color:var(--t-form-border-color);
1328
+ --tds-checkbox-input-background-color:var(--t-form-background-color);
1477
1329
 
1478
- @media (prefers-reduced-motion: no-preference){
1479
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
1480
- animation:indicator-pulse 1.25s ease infinite;
1481
- }
1482
- }
1330
+ --tds-checkbox-input-icon:none;
1331
+ --tds-checkbox-input-icon-visibility:hidden;
1332
+ --tds-checkbox-input-icon-opacity:0;
1333
+ --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
1483
1334
 
1484
- .tds-page-header__title-bar{
1485
- display:flex;
1486
- flex-direction:column;
1487
- gap:var(--t-spacing-2) var(--t-spacing-1);
1488
- align-items:flex-start;
1489
- justify-content:space-between;
1490
- padding:0 var(--tds-page-header-padding-x);
1491
- }
1335
+ --tds-checkbox-label-color:var(--t-form-color);
1492
1336
 
1493
- .tds-page-header--profile > .tds-page-header__title-bar{
1494
- align-items:center;
1495
- }
1337
+ --tds-checkbox-description-font-size:var(--t-font-size-sm);
1338
+ --tds-checkbox-description-line-height:1.35;
1339
+ --tds-checkbox-description-color:var(--t-text-color-secondary);
1340
+ --tds-checkbox-description-invalid-icon-display:none;
1496
1341
 
1497
- .tds-page-header__primary{
1498
- width:100%;
1342
+ position:relative;
1343
+ display:inline-grid;
1344
+ grid-template-columns:auto;
1345
+ grid-auto-columns:1fr;
1346
+ gap:var(--t-spacing-fourth) 0;
1347
+ line-height:var(--tds-checkbox-line-height);
1348
+ -webkit-user-select:none;
1349
+ -moz-user-select:none;
1350
+ user-select:none;
1499
1351
  }
1500
1352
 
1501
- .tds-page-header__primary h1{
1502
- margin:0;
1503
- font-size:var(--tds-page-header-headline-font-size);
1353
+ .tds-checkbox label{
1354
+ grid-area:1 / 2;
1355
+ padding-inline-start:var(--t-spacing-1);
1356
+ font-size:var(--tds-checkbox-font-size);
1504
1357
  font-weight:var(--t-font-weight-normal);
1505
- line-height:32px;
1506
- color:var(--tds-page-header-headline-color);
1507
- overflow-wrap:break-word;
1358
+ color:var(--tds-checkbox-label-color);
1359
+ cursor:var(--tds-checkbox-cursor);
1508
1360
  }
1509
1361
 
1510
- @media (min-width: 960px){
1511
- .tds-page-header__primary{
1512
- flex:1 1 max-content;
1513
- width:auto;
1514
- min-width:0;
1515
- max-width:100%;
1362
+ .tds-checkbox tds-indeterminate{
1363
+ display:flex;
1516
1364
  }
1517
1365
 
1518
- .tds-page-header__title-bar,
1519
- .tds-page-header--profile .tds-page-header__title-bar{
1520
- flex-flow:row nowrap;
1521
- row-gap:12px;
1522
- align-items:flex-start;
1366
+ .tds-checkbox input[type="checkbox"]{
1367
+ position:relative;
1368
+ width:1em;
1369
+ height:1em;
1370
+ margin:calc((1lh - 1em) / 2) 0 0;
1371
+ font-size:var(--tds-checkbox-font-size);
1372
+ line-height:inherit;
1373
+ -webkit-appearance:none;
1374
+ -moz-appearance:none;
1375
+ appearance:none;
1376
+ cursor:var(--tds-checkbox-cursor);
1377
+ background-color:var(--tds-checkbox-input-background-color);
1378
+ border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
1379
+ border-radius:var(--tds-checkbox-input-border-radius);
1380
+ transition-timing-function:var(--t-ease-in-out);
1381
+ transition-duration:var(--t-duration-200);
1382
+ transition-property:var(--tds-checkbox-transition-property);
1523
1383
  }
1524
- .tds-page-header :is([slot="actions"],.tds-page-header__actions){
1525
- width:auto;
1384
+
1385
+ :is(.tds-checkbox input[type="checkbox"])::before{
1386
+ position:absolute;
1387
+ top:50%;
1388
+ left:50%;
1389
+ visibility:var(--tds-checkbox-input-icon-visibility);
1390
+ width:100%;
1391
+ height:100%;
1392
+ content:"";
1393
+ background-color:var(--tds-checkbox-input-icon-fill);
1394
+ border-radius:var(--tds-checkbox-input-border-radius);
1395
+ opacity:var(--tds-checkbox-input-icon-opacity);
1396
+ -webkit-mask-image:var(--tds-checkbox-input-icon);
1397
+ mask-image:var(--tds-checkbox-input-icon);
1398
+ -webkit-mask-repeat:no-repeat;
1399
+ mask-repeat:no-repeat;
1400
+ -webkit-mask-size:contain;
1401
+ mask-size:contain;
1402
+ transform:translate(-50%, -50%);
1526
1403
  }
1527
1404
 
1528
- .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
1529
- justify-content:flex-end;
1405
+ :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
1406
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
1407
+ --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
1530
1408
  }
1531
- }
1532
1409
 
1533
- .tds-page-header-phone,
1534
- .tds-page-header-email{
1535
- color:var(--tds-page-header-color);
1536
- white-space:nowrap;
1537
- }
1538
- .tds-page-header-email{
1539
- max-width:100%;
1540
- overflow:hidden;
1541
- text-overflow:ellipsis;
1542
- }
1410
+ :is(.tds-checkbox input[type="checkbox"]):focus-visible{
1411
+ outline:var(--t-focus-ring-outline);
1412
+ outline-offset:var(--t-focus-ring-offset);
1413
+ }
1543
1414
 
1544
- @keyframes indicator-pulse{
1545
- 0%{
1546
- opacity:.3;
1547
- transform:scale(.9);
1548
- }
1415
+ :is(.tds-checkbox input[type="checkbox"]):disabled{
1416
+ pointer-events:none;
1417
+ }
1549
1418
 
1550
- 100%{
1551
- opacity:0;
1552
- transform:scale(1.75);
1419
+ @media (prefers-reduced-motion: reduce){
1420
+
1421
+ .tds-checkbox input[type="checkbox"]{
1422
+ --tds-checkbox-transition-property:none;
1553
1423
  }
1554
- }
1424
+ }
1555
1425
 
1556
- .tds-checkbox-group{
1557
- --tds-checkbox-group-font-size:var(--t-font-size-md);
1558
- --tds-checkbox-group-line-height:1.4;
1559
- --tds-checkbox-group-gap:var(--t-spacing-1);
1426
+ .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
1427
+ --tds-checkbox-input-background-color:var(--t-fill-color-control);
1428
+ --tds-checkbox-input-border-color:var(--t-border-color-control-info);
1429
+ --tds-checkbox-input-icon-visibility:visible;
1430
+ --tds-checkbox-input-icon-opacity:1;
1431
+ }
1560
1432
 
1561
- --tds-checkbox-group-description-font-size:var(--t-font-size-sm);
1562
- --tds-checkbox-group-description-line-height:1.35;
1563
- --tds-checkbox-group-description-color:var(--t-text-color-secondary);
1564
- --tds-checkbox-group-description-invalid-icon-display:none;
1565
- display:flex;
1566
- flex-direction:column;
1567
- gap:0;
1568
- padding:0;
1569
- margin:0;
1433
+ :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
1434
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
1435
+ --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
1436
+ }
1570
1437
 
1571
- font-size:var(--tds-checkbox-group-font-size);
1572
- line-height:var(--tds-checkbox-group-line-height);
1573
- border:0;
1574
- }
1438
+ .tds-checkbox:has(input:checked){
1439
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
1440
+ }
1575
1441
 
1576
- .tds-checkbox-group legend{
1577
- float:left;
1578
- padding:0;
1579
- margin:0;
1442
+ .tds-checkbox:has(input:indeterminate){
1443
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
1580
1444
  }
1581
1445
 
1582
- .tds-checkbox-group[aria-invalid="true"]{
1583
- --tds-checkbox-group-description-color:var(--t-text-color-status-error);
1584
- --tds-checkbox-group-description-invalid-icon-display:inline-block;
1446
+ .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
1447
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1448
+ --tds-checkbox-description-color:var(--t-text-color-status-error);
1449
+ --tds-checkbox-description-invalid-icon-display:inline-block;
1585
1450
  }
1586
1451
 
1587
- .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) legend::after{
1452
+ :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
1453
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1454
+ --tds-checkbox-input-background-color:var(--t-form-background-color-error);
1455
+ }
1456
+
1457
+ :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:checked,:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:indeterminate{
1458
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1459
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error);
1460
+ }
1461
+
1462
+ :is(:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:checked,:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:indeterminate):hover:not(:disabled){
1463
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
1464
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
1465
+ }
1466
+
1467
+ .tds-checkbox:has(input:required) label::after{
1588
1468
  margin-left:.25ch;
1589
1469
  color:var(--t-text-color-status-error);
1590
1470
  content:"*";
1591
1471
  }
1592
1472
 
1593
- .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
1594
- content:none;
1595
- }
1473
+ .tds-checkbox:has(input:disabled){
1474
+ --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
1475
+ --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
1596
1476
 
1597
- .tds-checkbox-group-fields{
1598
- display:flex;
1599
- flex-direction:column;
1600
- gap:var(--tds-checkbox-group-gap);
1601
- align-items:flex-start;
1602
- margin-top:var(--t-spacing-1);
1603
- }
1477
+ --tds-checkbox-label-color:var(--t-form-color-disabled);
1478
+ --tds-checkbox-description-color:var(--t-form-color-disabled);
1479
+ --tds-checkbox-cursor:not-allowed;
1480
+ }
1604
1481
 
1605
- .tds-checkbox-group-description{
1482
+ .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
1483
+ --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
1484
+ }
1485
+
1486
+ .tds-checkbox-description{
1606
1487
  display:flex;
1488
+ grid-area:2 / 2;
1607
1489
  gap:var(--t-spacing-half);
1608
1490
  align-items:flex-start;
1609
- margin:var(--t-spacing-fourth) 0 0;
1610
- font-size:var(--tds-checkbox-group-description-font-size);
1611
- line-height:var(--tds-checkbox-group-description-line-height);
1612
- color:var(--tds-checkbox-group-description-color);
1491
+ padding-inline-start:var(--t-spacing-1);
1492
+ margin:0;
1493
+ font-size:var(--tds-checkbox-description-font-size);
1494
+ line-height:var(--tds-checkbox-description-line-height);
1495
+ color:var(--tds-checkbox-description-color);
1613
1496
  cursor:text;
1614
1497
  }
1615
1498
 
1616
- .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
1617
- display:var(--tds-checkbox-group-description-invalid-icon-display);
1499
+ .tds-checkbox-description .tds-checkbox-description-invalid-icon{
1500
+ display:var(--tds-checkbox-description-invalid-icon-display);
1618
1501
  flex-shrink:0;
1619
1502
  margin-top:calc(.5lh - .5em);
1620
- line-height:var(--tds-checkbox-group-description-line-height);
1503
+ line-height:var(--tds-checkbox-description-line-height);
1621
1504
  }
1622
1505
 
1623
- .tds-checkbox-group--sm{
1624
- --tds-checkbox-group-line-height:1.35;
1625
- --tds-checkbox-group-font-size:var(--t-font-size-sm);
1626
- --tds-checkbox-group-description-font-size:var(--t-font-size-xs);
1627
- --tds-checkbox-group-description-line-height:1.3;
1506
+ .tds-checkbox--sm{
1507
+ --tds-checkbox-line-height:1.35;
1508
+ --tds-checkbox-input-size:var(--t-element-size-sm);
1509
+ --tds-checkbox-font-size:var(--t-font-size-sm);
1510
+ --tds-checkbox-description-font-size:var(--t-font-size-xs);
1511
+ --tds-checkbox-description-line-height:1.3;
1628
1512
  }
1629
1513
 
1514
+ .tds-button-group{
1515
+ display:inline-flex;
1516
+ }
1517
+ .tds-button-group > .tds-btn{
1518
+ --tds-button-group-item-z-index:1;
1519
+
1520
+ position:relative;
1521
+ z-index:var(--tds-button-group-item-z-index);
1522
+ border-radius:0;
1523
+ }
1524
+ :is(.tds-button-group > .tds-btn):not(:first-child){
1525
+ margin-inline-start:calc(var(--tds-btn-border-width) * -1);
1526
+ }
1527
+ :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{
1528
+ position:absolute;
1529
+ inset-block:calc(var(--tds-btn-border-width) * -1);
1530
+ width:var(--tds-btn-border-width);
1531
+ pointer-events:none;
1532
+ content:"";
1533
+ background-color:var(--t-border-color-white);
1534
+ }
1535
+ :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:first-child)::before{
1536
+ inset-inline-start:calc(var(--tds-btn-border-width) * -1);
1537
+ }
1538
+ :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:last-child)::after{
1539
+ inset-inline-end:calc(var(--tds-btn-border-width) * -1);
1540
+ }
1541
+ :is(.tds-button-group > .tds-btn):hover{
1542
+ --tds-button-group-item-z-index:2;
1543
+ }
1544
+ :is(.tds-button-group > .tds-btn):focus-visible{
1545
+ --tds-button-group-item-z-index:5;
1546
+ }
1547
+ .tds-button-group > .tds-btn:first-child{
1548
+ border-start-start-radius:var(--tds-btn-border-radius);
1549
+ border-end-start-radius:var(--tds-btn-border-radius);
1550
+ }
1551
+ .tds-button-group > .tds-btn:last-child{
1552
+ border-start-end-radius:var(--tds-btn-border-radius);
1553
+ border-end-end-radius:var(--tds-btn-border-radius);
1554
+ }
1555
+
1630
1556
 
1631
1557
  :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
1558
  -webkit-appearance:none;
@@ -1783,87 +1709,78 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1783
1709
  --tds-radio-description-line-height:1.3;
1784
1710
  }
1785
1711
 
1786
- .tds-radio-group{
1787
- --tds-radio-group-font-size:var(--t-font-size-md);
1788
- --tds-radio-group-line-height:1.4;
1789
- --tds-radio-group-gap:var(--t-spacing-1);
1712
+ .tds-checkbox-group{
1713
+ --tds-checkbox-group-font-size:var(--t-font-size-md);
1714
+ --tds-checkbox-group-line-height:1.4;
1715
+ --tds-checkbox-group-gap:var(--t-spacing-1);
1790
1716
 
1791
- --tds-radio-group-description-font-size:var(--t-font-size-sm);
1792
- --tds-radio-group-description-line-height:1.35;
1793
- --tds-radio-group-description-color:var(--t-text-color-secondary);
1794
- --tds-radio-group-description-invalid-icon-display:none;
1717
+ --tds-checkbox-group-description-font-size:var(--t-font-size-sm);
1718
+ --tds-checkbox-group-description-line-height:1.35;
1719
+ --tds-checkbox-group-description-color:var(--t-text-color-secondary);
1720
+ --tds-checkbox-group-description-invalid-icon-display:none;
1795
1721
  display:flex;
1796
1722
  flex-direction:column;
1797
1723
  gap:0;
1798
1724
  padding:0;
1799
1725
  margin:0;
1800
1726
 
1801
- font-size:var(--tds-radio-group-font-size);
1802
- line-height:var(--tds-radio-group-line-height);
1727
+ font-size:var(--tds-checkbox-group-font-size);
1728
+ line-height:var(--tds-checkbox-group-line-height);
1803
1729
  border:0;
1804
1730
  }
1805
1731
 
1806
- .tds-radio-group legend{
1732
+ .tds-checkbox-group legend{
1807
1733
  float:left;
1808
1734
  padding:0;
1809
1735
  margin:0;
1810
1736
  }
1811
1737
 
1812
- .tds-radio-group[aria-invalid="true"]{
1813
- --tds-radio-group-description-color:var(--t-text-color-status-error);
1814
- --tds-radio-group-description-invalid-icon-display:inline-block;
1738
+ .tds-checkbox-group[aria-invalid="true"]{
1739
+ --tds-checkbox-group-description-color:var(--t-text-color-status-error);
1740
+ --tds-checkbox-group-description-invalid-icon-display:inline-block;
1815
1741
  }
1816
1742
 
1817
- .tds-radio-group[aria-invalid="true"] .tds-radio{
1818
- --tds-radio-input-border-color:var(--t-form-border-color-error);
1819
- }
1820
-
1821
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
1822
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1823
- --tds-radio-input-background-color:var(--t-form-background-color-error);
1824
- }
1825
-
1826
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
1827
- --tds-radio-input-background-color:var(--t-icon-color-inverted);
1828
- }
1829
-
1830
- .tds-radio-group:has(input:required) legend::after{
1743
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) legend::after{
1831
1744
  margin-left:.25ch;
1832
1745
  color:var(--t-text-color-status-error);
1833
1746
  content:"*";
1834
1747
  }
1835
1748
 
1836
- .tds-radio-group-fields{
1749
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
1750
+ content:none;
1751
+ }
1752
+
1753
+ .tds-checkbox-group-fields{
1837
1754
  display:flex;
1838
1755
  flex-direction:column;
1839
- gap:var(--tds-radio-group-gap);
1756
+ gap:var(--tds-checkbox-group-gap);
1840
1757
  align-items:flex-start;
1841
1758
  margin-top:var(--t-spacing-1);
1842
1759
  }
1843
1760
 
1844
- .tds-radio-group-description{
1761
+ .tds-checkbox-group-description{
1845
1762
  display:flex;
1846
1763
  gap:var(--t-spacing-half);
1847
1764
  align-items:flex-start;
1848
1765
  margin:var(--t-spacing-fourth) 0 0;
1849
- font-size:var(--tds-radio-group-description-font-size);
1850
- line-height:var(--tds-radio-group-description-line-height);
1851
- color:var(--tds-radio-group-description-color);
1766
+ font-size:var(--tds-checkbox-group-description-font-size);
1767
+ line-height:var(--tds-checkbox-group-description-line-height);
1768
+ color:var(--tds-checkbox-group-description-color);
1852
1769
  cursor:text;
1853
1770
  }
1854
1771
 
1855
- .tds-radio-group-description .tds-radio-group-description-invalid-icon{
1856
- display:var(--tds-radio-group-description-invalid-icon-display);
1772
+ .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
1773
+ display:var(--tds-checkbox-group-description-invalid-icon-display);
1857
1774
  flex-shrink:0;
1858
1775
  margin-top:calc(.5lh - .5em);
1859
- line-height:var(--tds-radio-group-description-line-height);
1776
+ line-height:var(--tds-checkbox-group-description-line-height);
1860
1777
  }
1861
1778
 
1862
- .tds-radio-group--sm{
1863
- --tds-radio-group-line-height:1.35;
1864
- --tds-radio-group-font-size:var(--t-font-size-sm);
1865
- --tds-radio-group-description-font-size:var(--t-font-size-xs);
1866
- --tds-radio-group-description-line-height:1.3;
1779
+ .tds-checkbox-group--sm{
1780
+ --tds-checkbox-group-line-height:1.35;
1781
+ --tds-checkbox-group-font-size:var(--t-font-size-sm);
1782
+ --tds-checkbox-group-description-font-size:var(--t-font-size-xs);
1783
+ --tds-checkbox-group-description-line-height:1.3;
1867
1784
  }
1868
1785
 
1869
1786
  .tds-modal-overlay{
@@ -2027,6 +1944,89 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
2027
1944
  }
2028
1945
  }
2029
1946
 
1947
+ .tds-radio-group{
1948
+ --tds-radio-group-font-size:var(--t-font-size-md);
1949
+ --tds-radio-group-line-height:1.4;
1950
+ --tds-radio-group-gap:var(--t-spacing-1);
1951
+
1952
+ --tds-radio-group-description-font-size:var(--t-font-size-sm);
1953
+ --tds-radio-group-description-line-height:1.35;
1954
+ --tds-radio-group-description-color:var(--t-text-color-secondary);
1955
+ --tds-radio-group-description-invalid-icon-display:none;
1956
+ display:flex;
1957
+ flex-direction:column;
1958
+ gap:0;
1959
+ padding:0;
1960
+ margin:0;
1961
+
1962
+ font-size:var(--tds-radio-group-font-size);
1963
+ line-height:var(--tds-radio-group-line-height);
1964
+ border:0;
1965
+ }
1966
+
1967
+ .tds-radio-group legend{
1968
+ float:left;
1969
+ padding:0;
1970
+ margin:0;
1971
+ }
1972
+
1973
+ .tds-radio-group[aria-invalid="true"]{
1974
+ --tds-radio-group-description-color:var(--t-text-color-status-error);
1975
+ --tds-radio-group-description-invalid-icon-display:inline-block;
1976
+ }
1977
+
1978
+ .tds-radio-group[aria-invalid="true"] .tds-radio{
1979
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
1980
+ }
1981
+
1982
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
1983
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1984
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
1985
+ }
1986
+
1987
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
1988
+ --tds-radio-input-background-color:var(--t-icon-color-inverted);
1989
+ }
1990
+
1991
+ .tds-radio-group:has(input:required) legend::after{
1992
+ margin-left:.25ch;
1993
+ color:var(--t-text-color-status-error);
1994
+ content:"*";
1995
+ }
1996
+
1997
+ .tds-radio-group-fields{
1998
+ display:flex;
1999
+ flex-direction:column;
2000
+ gap:var(--tds-radio-group-gap);
2001
+ align-items:flex-start;
2002
+ margin-top:var(--t-spacing-1);
2003
+ }
2004
+
2005
+ .tds-radio-group-description{
2006
+ display:flex;
2007
+ gap:var(--t-spacing-half);
2008
+ align-items:flex-start;
2009
+ margin:var(--t-spacing-fourth) 0 0;
2010
+ font-size:var(--tds-radio-group-description-font-size);
2011
+ line-height:var(--tds-radio-group-description-line-height);
2012
+ color:var(--tds-radio-group-description-color);
2013
+ cursor:text;
2014
+ }
2015
+
2016
+ .tds-radio-group-description .tds-radio-group-description-invalid-icon{
2017
+ display:var(--tds-radio-group-description-invalid-icon-display);
2018
+ flex-shrink:0;
2019
+ margin-top:calc(.5lh - .5em);
2020
+ line-height:var(--tds-radio-group-description-line-height);
2021
+ }
2022
+
2023
+ .tds-radio-group--sm{
2024
+ --tds-radio-group-line-height:1.35;
2025
+ --tds-radio-group-font-size:var(--t-font-size-sm);
2026
+ --tds-radio-group-description-font-size:var(--t-font-size-xs);
2027
+ --tds-radio-group-description-line-height:1.3;
2028
+ }
2029
+
2030
2030
  .tds-input:has(textarea){
2031
2031
  --tds-input-padding-block:6px;
2032
2032
  --tds-input-resizer-size:var(--t-element-size-sm);