@planningcenter/tapestry 4.0.0-rc.8 → 4.0.0

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 (78) hide show
  1. package/dist/componentRegistration.js +4 -0
  2. package/dist/componentRegistration.js.map +1 -1
  3. package/dist/components/DataTable/DataTable.d.ts +50 -2
  4. package/dist/components/DataTable/DataTable.d.ts.map +1 -1
  5. package/dist/components/DataTable/DataTable.js +107 -30
  6. package/dist/components/DataTable/DataTable.js.map +1 -1
  7. package/dist/components/DataTable/ResultsCount.d.ts +52 -0
  8. package/dist/components/DataTable/ResultsCount.d.ts.map +1 -0
  9. package/dist/components/DataTable/ResultsCount.js +76 -0
  10. package/dist/components/DataTable/ResultsCount.js.map +1 -0
  11. package/dist/components/DataTable/TableActions.d.ts +41 -0
  12. package/dist/components/DataTable/TableActions.d.ts.map +1 -0
  13. package/dist/components/DataTable/TableActions.js +47 -0
  14. package/dist/components/DataTable/TableActions.js.map +1 -0
  15. package/dist/components/button/BaseButton.d.ts.map +1 -1
  16. package/dist/components/button/BaseButton.js +16 -3
  17. package/dist/components/button/BaseButton.js.map +1 -1
  18. package/dist/components/combo-box/ComboBox.js +19 -19
  19. package/dist/components/combo-box/ComboBox.js.map +1 -1
  20. package/dist/components/internal/LoadingSpinner.js +2 -2
  21. package/dist/components/internal/LoadingSpinner.js.map +1 -1
  22. package/dist/components/internal/index.d.ts +2 -0
  23. package/dist/components/internal/index.d.ts.map +1 -1
  24. package/dist/components/internal/tooltip/Tooltip.d.ts +32 -0
  25. package/dist/components/internal/tooltip/Tooltip.d.ts.map +1 -0
  26. package/dist/components/internal/tooltip/Tooltip.js +12 -0
  27. package/dist/components/internal/tooltip/Tooltip.js.map +1 -0
  28. package/dist/components/internal/tooltip/TooltipTriggerContext.d.ts +7 -0
  29. package/dist/components/internal/tooltip/TooltipTriggerContext.d.ts.map +1 -0
  30. package/dist/components/internal/tooltip/TooltipTriggerContext.js +7 -0
  31. package/dist/components/internal/tooltip/TooltipTriggerContext.js.map +1 -0
  32. package/dist/components/internal/tooltip/index.d.ts +4 -0
  33. package/dist/components/internal/tooltip/index.d.ts.map +1 -0
  34. package/dist/components/link/IconLink.d.ts +3 -3
  35. package/dist/components/page-header/index.js +1 -1
  36. package/dist/components/search-input/SearchInput.d.ts +1 -0
  37. package/dist/components/search-input/SearchInput.d.ts.map +1 -1
  38. package/dist/components/search-input/SearchInput.js +1 -0
  39. package/dist/components/search-input/SearchInput.js.map +1 -1
  40. package/dist/components/sidenav/index.js +1 -1
  41. package/dist/index.css +213 -10
  42. package/dist/index.css.map +1 -1
  43. package/dist/index.d.ts +1 -0
  44. package/dist/index.d.ts.map +1 -1
  45. package/dist/index.js +1 -0
  46. package/dist/index.js.map +1 -1
  47. package/dist/packages/tapestry-wc/dist/components/{p-Dq8WF4tc.js → p-BETHN12f.js} +3 -3
  48. package/dist/packages/tapestry-wc/dist/components/{p-Dq8WF4tc.js.map → p-BETHN12f.js.map} +1 -1
  49. package/dist/packages/tapestry-wc/dist/components/{p-B00sJe3H.js → p-BkcPquCH.js} +3 -3
  50. package/dist/packages/tapestry-wc/dist/components/{p-B00sJe3H.js.map → p-BkcPquCH.js.map} +1 -1
  51. package/dist/packages/tapestry-wc/dist/components/{p-Bn0hHWDB.js → p-DlXOzBfb.js} +2 -2
  52. package/dist/packages/tapestry-wc/dist/components/{p-Bn0hHWDB.js.map → p-DlXOzBfb.js.map} +1 -1
  53. package/dist/packages/tapestry-wc/dist/components/{p-nyMzpSUR.js → p-EYzqvkpp.js} +2 -2
  54. package/dist/packages/tapestry-wc/dist/components/{p-nyMzpSUR.js.map → p-EYzqvkpp.js.map} +1 -1
  55. package/dist/packages/tapestry-wc/dist/components/{p-T7x-WXUY.js → p-OeNi4FkF.js} +3 -3
  56. package/dist/packages/tapestry-wc/dist/components/{p-T7x-WXUY.js.map → p-OeNi4FkF.js.map} +1 -1
  57. package/dist/packages/tapestry-wc/dist/components/tds-page-header-nav.js +2 -2
  58. package/dist/packages/tapestry-wc/dist/components/tds-page-header-nav.js.map +1 -1
  59. package/dist/packages/tapestry-wc/dist/components/tds-page-header.js +3 -3
  60. package/dist/packages/tapestry-wc/dist/components/tds-page-header.js.map +1 -1
  61. package/dist/packages/tapestry-wc/dist/components/tds-sidenav-item.js +3 -3
  62. package/dist/packages/tapestry-wc/dist/components/tds-sidenav-item.js.map +1 -1
  63. package/dist/packages/tapestry-wc/dist/components/tds-sidenav-responsive-header.js +2 -2
  64. package/dist/packages/tapestry-wc/dist/components/tds-sidenav-responsive-header.js.map +1 -1
  65. package/dist/packages/tapestry-wc/dist/components/tds-sidenav-section.js +3 -3
  66. package/dist/packages/tapestry-wc/dist/components/tds-sidenav-section.js.map +1 -1
  67. package/dist/packages/tapestry-wc/dist/components/tds-sidenav.js +5 -5
  68. package/dist/packages/tapestry-wc/dist/components/tds-sidenav.js.map +1 -1
  69. package/dist/reactRender.css +1785 -1633
  70. package/dist/reactRender.css.map +1 -1
  71. package/dist/reactRenderLegacy.css +1785 -1633
  72. package/dist/reactRenderLegacy.css.map +1 -1
  73. package/dist/unstable.css +630 -478
  74. package/dist/unstable.css.map +1 -1
  75. package/dist/unstable.d.ts +0 -1
  76. package/dist/unstable.d.ts.map +1 -1
  77. package/dist/unstable.js +1 -1
  78. package/package.json +8 -6
@@ -677,837 +677,759 @@
677
677
  [data-padding-inline-xl="7"]{ padding-inline:var(--t-spacing-7); }
678
678
  }
679
679
 
680
-
681
- @media (prefers-reduced-motion: no-preference){
682
-
683
- :root{
684
- interpolate-size:allow-keywords;
685
- }
680
+ @layer t-critical{
681
+ tds-page-header:not(.hydrated){
682
+ display:none;
686
683
  }
684
+ }
687
685
 
688
- @layer tds-component{
689
- tds-sidenav,
690
- .tds-sidenav{
691
- --tds-sidenav-indent:12px;
692
- --tds-sidenav-item-depth:0;
693
-
694
- --tds-sidenav-item-transition:background-color var(--t-duration-200) var(--t-ease-in-out);
695
-
696
- --tds-sidenav-collapse-transition-enter:opacity var(--t-duration-300) var(--t-ease-out), transform var(--t-duration-300) var(--t-ease-out), display var(--t-duration-300) allow-discrete, overlay var(--t-duration-300) allow-discrete;
697
- --tds-sidenav-collapse-transition-exit:opacity var(--t-duration-200) var(--t-ease-in), display var(--t-duration-200) allow-discrete, overlay var(--t-duration-200) allow-discrete;
698
- --tds-sidenav-collapse-closed-opacity:0;
699
- --tds-sidenav-collapse-open-opacity:1;
700
- --tds-sidenav-collapse-closed-transform:translateY(-8px);
701
- --tds-sidenav-collapse-open-transform:translateY(0);
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;
702
704
 
703
- --tds-sidenav-item-icon-size:var(--t-element-size-md);
704
- --tds-sidenav-item-background-hover:var(--t-fill-color-button-interaction-ghost-hover);
705
- --tds-sidenav-item-background-active:var(--t-fill-color-button-interaction-ghost-active);
706
- --tds-sidenav-item-background-selected:var(--t-fill-color-button-interaction-ghost-active);
705
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
706
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color);
707
707
 
708
- --tds-sidenav-item-nested-background-hover:var(--tds-sidenav-item-background-hover);
709
- --tds-sidenav-item-nested-background-active:var(--tds-sidenav-item-background-hover);
710
- --tds-sidenav-item-nested-background-selected:transparent;
708
+ --tds-page-header-nav-item-color-hover:var(--t-text-color);
709
+ --tds-page-header-nav-item-background-color-hover:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 20%);
710
+ --tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
711
711
 
712
- --tds-sidenav-item-nested-border-color:var(--t-fill-color-neutral-050);
713
- --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
714
- --tds-sidenav-item-nested-border-color-selected:var(--t-border-color-status-info);
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);
715
714
 
716
- --tds-sidenav-item-icon-color:var(--t-icon-color-secondary);
717
- --tds-sidenav-item-icon-color-selected:var(--t-icon-color);
718
- }
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);
719
718
 
720
- @media (prefers-reduced-motion: reduce){
721
- tds-sidenav,
722
- .tds-sidenav{
723
- --tds-sidenav-collapse-transition-enter:none;
724
- --tds-sidenav-collapse-transition-exit:none;
725
- --tds-sidenav-collapse-closed-transform:none;
726
- --tds-sidenav-collapse-open-transform: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);
727
724
  }
728
- }
729
725
 
730
- .tds-sidenav--theme-gray{
731
- --tds-sidenav-item-background-hover:var(--t-fill-color-neutral-080);
732
- --tds-sidenav-item-background-active:var(--t-fill-color-neutral-070);
733
- --tds-sidenav-item-background-selected:var(--t-fill-color-neutral-050);
734
- --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
735
- --tds-sidenav-item-nested-border-color-selected:var(--t-fill-color-neutral-010);
726
+ .tds-page-header--profile{
727
+ --tds-page-header-padding-y:20px;
736
728
  }
737
- }
738
729
 
739
- .tds-sidenav :where(nav,ul,.tds-sidenav-section){
740
- display:flex;
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
+ }
741
735
  }
742
736
 
743
- .tds-sidenav :where(nav,ul,.tds-sidenav-section,.tds-sidenav-collapse){
744
- flex-direction:column;
745
- gap:var(--t-spacing-half);
746
- width:100%;
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
+ }
747
756
  }
748
-
749
- .tds-sidenav-section-list{
750
- width:100%;
751
- padding:0;
752
- margin:0;
753
- list-style:none;
754
757
  }
755
758
 
756
- .tds-sidenav-section-header{
759
+ .tds-page-header{
757
760
  display:flex;
758
- align-items:baseline;
759
- justify-content:space-between;
760
- padding-top:var(--t-spacing-2);
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);
761
766
  }
762
767
 
763
- .tds-sidenav-section-header h2{
764
- margin:0;
765
- font-size:var(--t-font-size-sm);
766
- font-weight:var(--t-font-weight-semibold);
767
- line-height:1.35;
768
- color:var(--t-text-color-secondary);
769
- text-transform:uppercase;
768
+ .tds-page-header:not(.has-nav){
769
+ padding-bottom:var(--tds-page-header-padding-y);
770
770
  }
771
771
 
772
- .tds-sidenav-section:first-of-type .tds-sidenav-section-header{
773
- padding-top:0;
772
+ .tds-page-header.inactive{
773
+ background:var(--tds-page-header-background-color-inactive);
774
774
  }
775
775
 
776
- .tds-sidenav-section-header [slot="label-actions"]{
777
- display:flex;
778
- gap:var(--t-spacing-half);
779
- align-items:center;
776
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
777
+ width:100%;
780
778
  }
781
779
 
782
- .tds-sidenav-section [slot="section-actions"]{
783
- display:flex;
784
- gap:12px;
785
- align-items:center;
786
- min-height:42px;
787
- padding:var(--t-spacing-1) 0;
788
- }
789
-
790
- .tds-sidenav-section-list,
791
- .tds-sidenav-item{
792
- width:100%;
793
- padding:0;
794
- margin:0;
795
- }
796
-
797
- .tds-sidenav-item :is(a,button){
798
- position:relative;
780
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
799
781
  display:flex;
800
- gap:12px;
801
- align-items:center;
802
- width:100%;
803
- padding:12px;
804
- overflow:hidden;
805
- font-size:var(--t-font-size-sm);
806
- line-height:18px;
807
- color:var(--t-text-color-headline);
808
- white-space:nowrap;
809
- text-decoration:none;
810
- -webkit-appearance:none;
811
- -moz-appearance:none;
812
- appearance:none;
813
- cursor:pointer;
814
- background-color:var(--tds-sidenav-item-background, transparent);
815
- border:0;
816
- border-radius:var(--t-border-radius);
817
- transition:var(--tds-sidenav-item-transition);
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;
818
787
  }
819
788
 
820
- :is(.tds-sidenav-item :is(a,button)):not(:has(.prefix,.suffix)),:is(.tds-sidenav-item :is(a,button)) :is(:not(.prefix,.suffix)){
821
- display:block;
822
- flex:1;
823
- overflow:hidden;
824
- text-overflow:ellipsis;
825
- text-align:left;
826
- white-space:nowrap;
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);
827
797
  }
828
798
 
829
- :is(.tds-sidenav-item :is(a,button)):hover,:is(.tds-sidenav-item :is(a,button)):focus-visible{
830
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-hover);
831
- color:var(--t-text-color-headline);
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;
832
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;
833
818
  }
834
819
 
835
- :is(.tds-sidenav-item :is(a,button)):active{
836
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-active);
837
- }
838
-
839
- :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]){
840
- overflow:hidden;
841
- color:var(--tds-sidenav-item-icon-color);
842
- }
843
-
844
- :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{
845
- display:block;
846
- width:var(--tds-sidenav-item-icon-size);
847
- height:var(--tds-sidenav-item-icon-size);
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);
848
825
  }
849
826
 
850
- :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section{
851
- --tds-sidenav-indent:19px;
852
- }
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
+ }
853
833
 
854
- [aria-expanded="true"]:is(.tds-sidenav-item :is(a,button)) + .tds-sidenav-section-list{
855
- visibility:visible;
856
- block-size:auto;
857
- opacity:1;
858
- }
859
-
860
- .tds-sidenav-item.selected > :is(a,button),.tds-sidenav-item:has(.tds-sidenav-section):has(.selected) > :is(a,button){
861
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-selected);
862
- --tds-sidenav-item-icon-color:var(--tds-sidenav-item-icon-color-selected);
863
-
864
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-selected);
865
- font-weight:var(--t-font-weight-semibold);
866
- }
867
-
868
- .tds-sidenav-item:has(.tds-sidenav-section){
869
- display:flex;
870
- flex-direction:column;
871
- gap:var(--t-spacing-half);
872
- }
873
-
874
- .tds-sidenav-item .tds-sidenav-section-list{
875
- --tds-sidenav-item-depth:1;
876
- gap:0;
877
- }
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
+ }
878
839
 
879
- .tds-sidenav-action--toggle + :is(.tds-sidenav-item .tds-sidenav-section-list){
880
- visibility:hidden;
881
- block-size:0;
882
- overflow-y:clip;
883
- opacity:0;
884
- transition:content-visibility var(--t-duration-400) allow-discrete, opacity var(--t-duration-400), block-size var(--t-duration-400);
885
- }
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
+ }
886
847
 
887
- :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list{
888
- --tds-sidenav-item-depth:2;
889
- }
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
+ }
890
858
 
891
- :is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
892
- min-height:var(--t-element-size-2xl);
893
- padding-block:9px;
894
- padding-left:calc((var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth)) + var(--tds-sidenav-indent) + var(--t-spacing-fourth));
895
- line-height:1;
896
- background-color:transparent;
859
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
860
+ position:relative;
897
861
  }
898
862
 
899
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::before{
900
- position:absolute;
901
- top:0;
902
- bottom:0;
903
- left:calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
904
- width:2px;
905
- content:"";
906
- background-color:var(--tds-sidenav-item-nested-border-color);
907
- transition:var(--tds-sidenav-item-transition);
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);
908
866
  }
909
867
 
910
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::after{
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{
911
869
  position:absolute;
912
- inset:0 0 0 calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
913
- z-index:-1;
914
- height:100%;
870
+ top:-5px;
871
+ right:-2px;
872
+ width:10px;
873
+ height:10px;
915
874
  content:"";
916
- background-color:var(--tds-sidenav-item-nested-background);
917
- border-radius:0 var(--t-border-radius) var(--t-border-radius) 0;
918
- transition:var(--tds-sidenav-item-transition);
919
- }
920
-
921
- :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)){
922
- display:block;
923
- text-align:left;
924
- white-space:normal;
925
- }
926
-
927
- :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{
928
- --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-hover);
929
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-hover);
875
+ background:var(--tds-page-header-nav-item-indicator-color);
876
+ border-radius:50%;
930
877
  }
931
878
 
932
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):active{
933
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-active);
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
+ }
934
883
  }
935
884
 
936
- .selected:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
937
- --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-selected);
938
- font-weight:var(--t-font-weight-medium);
939
- }
940
-
941
- .tds-sidenav-responsive-header{
885
+ .tds-page-header__title-bar{
942
886
  display:flex;
943
- gap:var(--t-spacing-2);
944
- align-items:center;
945
- width:100%;
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);
946
892
  }
947
893
 
948
- .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle{
949
- order:0;
894
+ .tds-page-header--profile > .tds-page-header__title-bar{
895
+ align-items:center;
950
896
  }
951
897
 
952
- .tds-sidenav-responsive-header .tds-sidenav-responsive-header-label{
953
- flex:1;
954
- order:1;
955
- margin:0;
956
- font-size:var(--t-font-size-lg);
957
- font-weight:var(--t-font-weight-medium);
958
- color:var(--t-text-color-headline);
959
- }
898
+ .tds-page-header__primary{
899
+ width:100%;
900
+ }
960
901
 
961
- @media (max-width: 719px){
962
- .tds-sidenav-collapse{
963
- z-index:10001;
964
- display:none;
965
- max-width:min(448px, calc(100vw - 48px));
966
- padding:0;
967
- margin:12px 0;
968
- position-area:bottom span-right;
969
- overflow:hidden;
970
- outline:0;
971
- background:var(--t-surface-color-card);
972
- border:0;
973
- border-radius:6px;
974
- box-shadow:0 8px 20px 0 rgba(0, 0, 0, .25);
975
- opacity:var(--tds-sidenav-collapse-open-opacity);
976
- transform:var(--tds-sidenav-collapse-open-transform);
977
- transition:var(--tds-sidenav-collapse-transition-enter);
978
- will-change:transform;
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;
979
909
  }
980
910
 
981
- .tds-sidenav-scroll-container{
982
- --webkit-overflow-scrolling:touch;
983
- display:block;
984
- width:100%;
985
- height:-moz-fit-content;
986
- height:fit-content;
987
- padding:var(--t-spacing-2);
988
- overflow-y:auto;
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%;
989
917
  }
990
918
 
991
- .tds-sidenav-item :is(a, button) :is(.prefix){
992
- display:none;
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;
993
924
  }
994
- @supports selector(:popover-open){
995
- .tds-sidenav-collapse:popover-open{
996
- display:flex;
925
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
926
+ width:auto;
997
927
  }
998
928
 
999
- .tds-sidenav-collapse:not(:popover-open){
1000
- opacity:var(--tds-sidenav-collapse-closed-opacity);
1001
- transition:var(--tds-sidenav-collapse-transition-exit);
929
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
930
+ justify-content:flex-end;
1002
931
  }
932
+ }
1003
933
 
1004
- @starting-style{
1005
- .tds-sidenav-collapse:popover-open{
1006
- opacity:var(--tds-sidenav-collapse-closed-opacity);
1007
- transform:var(--tds-sidenav-collapse-closed-transform);
1008
- }
1009
- }
1010
- }
1011
- @supports not selector(:popover-open){
1012
- .tds-sidenav-collapse.\:popover-open{
1013
- display:flex;
1014
- }
934
+ .tds-page-header-phone,
935
+ .tds-page-header-email{
936
+ color:var(--tds-page-header-color);
937
+ white-space:nowrap;
938
+ }
939
+ .tds-page-header-email{
940
+ max-width:100%;
941
+ overflow:hidden;
942
+ text-overflow:ellipsis;
943
+ }
1015
944
 
1016
- .tds-sidenav-collapse:not(.\:popover-open){
1017
- opacity:var(--tds-sidenav-collapse-closed-opacity);
1018
- transition:var(--tds-sidenav-collapse-transition-exit);
1019
- }
945
+ @keyframes indicator-pulse{
946
+ 0%{
947
+ opacity:.3;
948
+ transform:scale(.9);
1020
949
  }
1021
- }
1022
950
 
1023
- @media (min-width: 720px){
1024
- .tds-sidenav-responsive-header{
1025
- display:none;
951
+ 100%{
952
+ opacity:0;
953
+ transform:scale(1.75);
1026
954
  }
1027
955
  }
1028
956
 
1029
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
1030
- display:none;
1031
- }
1032
-
1033
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
1034
- display:block;
1035
- }
1036
957
 
1037
- tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1038
- display:flex;
1039
- flex-direction:column;
1040
- }
958
+ @media (prefers-reduced-motion: no-preference){
1041
959
 
1042
- .tds-button-group{
1043
- display:inline-flex;
960
+ :root{
961
+ interpolate-size:allow-keywords;
1044
962
  }
1045
- .tds-button-group > .tds-btn{
1046
- --tds-button-group-item-z-index:1;
1047
-
1048
- position:relative;
1049
- z-index:var(--tds-button-group-item-z-index);
1050
- border-radius:0;
1051
963
  }
1052
- :is(.tds-button-group > .tds-btn):not(:first-child){
1053
- margin-inline-start:calc(var(--tds-btn-border-width) * -1);
1054
- }
1055
- :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--pill):not(:first-child)::before,:is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--pill):not(:last-child)::after{
1056
- position:absolute;
1057
- inset-block:calc(var(--tds-btn-border-width) * -1);
1058
- width:var(--tds-btn-border-width);
1059
- pointer-events:none;
1060
- content:"";
1061
- background-color:var(--t-border-color-white);
1062
- }
1063
- :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--pill):not(:first-child)::before{
1064
- inset-inline-start:calc(var(--tds-btn-border-width) * -1);
1065
- }
1066
- :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--pill):not(:last-child)::after{
1067
- inset-inline-end:calc(var(--tds-btn-border-width) * -1);
1068
- }
1069
- :is(.tds-button-group > .tds-btn):hover{
1070
- --tds-button-group-item-z-index:2;
1071
- }
1072
- :is(.tds-button-group > .tds-btn):focus-visible{
1073
- --tds-button-group-item-z-index:5;
964
+
965
+ @layer tds-component{
966
+ tds-sidenav,
967
+ .tds-sidenav{
968
+ --tds-sidenav-indent:12px;
969
+ --tds-sidenav-item-depth:0;
970
+
971
+ --tds-sidenav-item-transition:background-color var(--t-duration-200) var(--t-ease-in-out);
972
+
973
+ --tds-sidenav-collapse-transition-enter:opacity var(--t-duration-300) var(--t-ease-out), transform var(--t-duration-300) var(--t-ease-out), display var(--t-duration-300) allow-discrete, overlay var(--t-duration-300) allow-discrete;
974
+ --tds-sidenav-collapse-transition-exit:opacity var(--t-duration-200) var(--t-ease-in), display var(--t-duration-200) allow-discrete, overlay var(--t-duration-200) allow-discrete;
975
+ --tds-sidenav-collapse-closed-opacity:0;
976
+ --tds-sidenav-collapse-open-opacity:1;
977
+ --tds-sidenav-collapse-closed-transform:translateY(-8px);
978
+ --tds-sidenav-collapse-open-transform:translateY(0);
979
+
980
+ --tds-sidenav-item-icon-size:var(--t-element-size-md);
981
+ --tds-sidenav-item-background-hover:var(--t-fill-color-button-interaction-ghost-hover);
982
+ --tds-sidenav-item-background-active:var(--t-fill-color-button-interaction-ghost-active);
983
+ --tds-sidenav-item-background-selected:var(--t-fill-color-button-interaction-ghost-active);
984
+
985
+ --tds-sidenav-item-nested-background-hover:var(--tds-sidenav-item-background-hover);
986
+ --tds-sidenav-item-nested-background-active:var(--tds-sidenav-item-background-hover);
987
+ --tds-sidenav-item-nested-background-selected:transparent;
988
+
989
+ --tds-sidenav-item-nested-border-color:var(--t-fill-color-neutral-050);
990
+ --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
991
+ --tds-sidenav-item-nested-border-color-selected:var(--t-border-color-status-info);
992
+
993
+ --tds-sidenav-item-icon-color:var(--t-icon-color-secondary);
994
+ --tds-sidenav-item-icon-color-selected:var(--t-icon-color);
995
+ }
996
+
997
+ @media (prefers-reduced-motion: reduce){
998
+ tds-sidenav,
999
+ .tds-sidenav{
1000
+ --tds-sidenav-collapse-transition-enter:none;
1001
+ --tds-sidenav-collapse-transition-exit:none;
1002
+ --tds-sidenav-collapse-closed-transform:none;
1003
+ --tds-sidenav-collapse-open-transform:none;
1004
+ }
1074
1005
  }
1075
- .tds-button-group > .tds-btn:first-child{
1076
- border-start-start-radius:var(--tds-btn-border-radius);
1077
- border-end-start-radius:var(--tds-btn-border-radius);
1006
+
1007
+ .tds-sidenav--theme-gray{
1008
+ --tds-sidenav-item-background-hover:var(--t-fill-color-neutral-080);
1009
+ --tds-sidenav-item-background-active:var(--t-fill-color-neutral-070);
1010
+ --tds-sidenav-item-background-selected:var(--t-fill-color-neutral-050);
1011
+ --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
1012
+ --tds-sidenav-item-nested-border-color-selected:var(--t-fill-color-neutral-010);
1078
1013
  }
1079
- .tds-button-group > .tds-btn:last-child{
1080
- border-start-end-radius:var(--tds-btn-border-radius);
1081
- border-end-end-radius:var(--tds-btn-border-radius);
1014
+ }
1015
+
1016
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section){
1017
+ display:flex;
1082
1018
  }
1083
1019
 
1084
- .tds-checkbox-group{
1085
- --tds-checkbox-group-font-size:var(--t-font-size-md);
1086
- --tds-checkbox-group-line-height:1.4;
1087
- --tds-checkbox-group-gap:var(--t-spacing-1);
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
+ }
1088
1025
 
1089
- --tds-checkbox-group-description-font-size:var(--t-font-size-sm);
1090
- --tds-checkbox-group-description-line-height:1.35;
1091
- --tds-checkbox-group-description-color:var(--t-text-color-secondary);
1092
- --tds-checkbox-group-description-invalid-icon-display:none;
1093
- display:flex;
1094
- flex-direction:column;
1095
- gap:0;
1026
+ .tds-sidenav-section-list{
1027
+ width:100%;
1096
1028
  padding:0;
1097
1029
  margin:0;
1030
+ list-style:none;
1031
+ }
1098
1032
 
1099
- font-size:var(--tds-checkbox-group-font-size);
1100
- line-height:var(--tds-checkbox-group-line-height);
1101
- border:0;
1033
+ .tds-sidenav-section-header{
1034
+ display:flex;
1035
+ align-items:baseline;
1036
+ justify-content:space-between;
1037
+ padding-top:var(--t-spacing-2);
1102
1038
  }
1103
1039
 
1104
- .tds-checkbox-group legend{
1105
- float:left;
1106
- padding:0;
1040
+ .tds-sidenav-section-header h2{
1107
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;
1108
1047
  }
1109
1048
 
1110
- .tds-checkbox-group[aria-invalid="true"]{
1111
- --tds-checkbox-group-description-color:var(--t-text-color-status-error);
1112
- --tds-checkbox-group-description-invalid-icon-display:inline-block;
1049
+ .tds-sidenav-section:first-of-type .tds-sidenav-section-header{
1050
+ padding-top:0;
1113
1051
  }
1114
1052
 
1115
- .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) legend::after{
1116
- margin-left:.25ch;
1117
- color:var(--t-text-color-status-error);
1118
- content:"*";
1119
- }
1120
-
1121
- .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
1122
- content:none;
1123
- }
1053
+ .tds-sidenav-section-header [slot="label-actions"]{
1054
+ display:flex;
1055
+ gap:var(--t-spacing-half);
1056
+ align-items:center;
1057
+ }
1124
1058
 
1125
- .tds-checkbox-group-fields{
1059
+ .tds-sidenav-section [slot="section-actions"]{
1126
1060
  display:flex;
1127
- flex-direction:column;
1128
- gap:var(--tds-checkbox-group-gap);
1129
- align-items:flex-start;
1130
- margin-top:var(--t-spacing-1);
1061
+ gap:12px;
1062
+ align-items:center;
1063
+ min-height:42px;
1064
+ padding:var(--t-spacing-1) 0;
1131
1065
  }
1132
1066
 
1133
- .tds-checkbox-group-description{
1134
- display:flex;
1135
- gap:var(--t-spacing-half);
1136
- align-items:flex-start;
1137
- margin:var(--t-spacing-fourth) 0 0;
1138
- font-size:var(--tds-checkbox-group-description-font-size);
1139
- line-height:var(--tds-checkbox-group-description-line-height);
1140
- color:var(--tds-checkbox-group-description-color);
1141
- cursor:text;
1067
+ .tds-sidenav-section-list,
1068
+ .tds-sidenav-item{
1069
+ width:100%;
1070
+ padding:0;
1071
+ margin:0;
1142
1072
  }
1143
1073
 
1144
- .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
1145
- display:var(--tds-checkbox-group-description-invalid-icon-display);
1146
- flex-shrink:0;
1147
- margin-top:calc(.5lh - .5em);
1148
- line-height:var(--tds-checkbox-group-description-line-height);
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);
1149
1095
  }
1150
1096
 
1151
- .tds-checkbox-group--sm{
1152
- --tds-checkbox-group-line-height:1.35;
1153
- --tds-checkbox-group-font-size:var(--t-font-size-sm);
1154
- --tds-checkbox-group-description-font-size:var(--t-font-size-xs);
1155
- --tds-checkbox-group-description-line-height:1.3;
1156
- }
1157
-
1158
- .tds-checkbox{
1159
- --tds-checkbox-font-size:var(--t-font-size-md);
1160
- --tds-checkbox-cursor:pointer;
1161
- --tds-checkbox-line-height:1.4;
1162
- --tds-checkbox-transition-property:background-color, border-color;
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
+ }
1163
1105
 
1164
- --tds-checkbox-input-size:var(--t-element-size-md);
1165
- --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
1166
- --tds-checkbox-input-border-color:var(--t-form-border-color);
1167
- --tds-checkbox-input-background-color:var(--t-form-background-color);
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
+ }
1168
1111
 
1169
- --tds-checkbox-input-icon:none;
1170
- --tds-checkbox-input-icon-visibility:hidden;
1171
- --tds-checkbox-input-icon-opacity:0;
1172
- --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
1112
+ :is(.tds-sidenav-item :is(a,button)):active{
1113
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-active);
1114
+ }
1173
1115
 
1174
- --tds-checkbox-label-color:var(--t-form-color);
1116
+ :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]){
1117
+ overflow:hidden;
1118
+ color:var(--tds-sidenav-item-icon-color);
1119
+ }
1175
1120
 
1176
- --tds-checkbox-description-font-size:var(--t-font-size-sm);
1177
- --tds-checkbox-description-line-height:1.35;
1178
- --tds-checkbox-description-color:var(--t-text-color-secondary);
1179
- --tds-checkbox-description-invalid-icon-display:none;
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
+ }
1180
1126
 
1181
- position:relative;
1182
- display:inline-grid;
1183
- grid-template-columns:auto;
1184
- grid-auto-columns:1fr;
1185
- gap:var(--t-spacing-fourth) 0;
1186
- line-height:var(--tds-checkbox-line-height);
1187
- -webkit-user-select:none;
1188
- -moz-user-select:none;
1189
- user-select:none;
1190
- }
1127
+ :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section{
1128
+ --tds-sidenav-indent:19px;
1129
+ }
1191
1130
 
1192
- .tds-checkbox label{
1193
- grid-area:1 / 2;
1194
- padding-inline-start:var(--t-spacing-1);
1195
- font-size:var(--tds-checkbox-font-size);
1196
- font-weight:var(--t-font-weight-normal);
1197
- color:var(--tds-checkbox-label-color);
1198
- cursor:var(--tds-checkbox-cursor);
1199
- }
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
+ }
1200
1136
 
1201
- .tds-checkbox tds-indeterminate{
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){
1202
1146
  display:flex;
1147
+ flex-direction:column;
1148
+ gap:var(--t-spacing-half);
1203
1149
  }
1204
1150
 
1205
- .tds-checkbox input[type="checkbox"]{
1206
- position:relative;
1207
- width:1em;
1208
- height:1em;
1209
- margin:calc((1lh - 1em) / 2) 0 0;
1210
- font-size:var(--tds-checkbox-font-size);
1211
- line-height:inherit;
1212
- -webkit-appearance:none;
1213
- -moz-appearance:none;
1214
- appearance:none;
1215
- cursor:var(--tds-checkbox-cursor);
1216
- background-color:var(--tds-checkbox-input-background-color);
1217
- border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
1218
- border-radius:var(--tds-checkbox-input-border-radius);
1219
- transition-timing-function:var(--t-ease-in-out);
1220
- transition-duration:var(--t-duration-200);
1221
- transition-property:var(--tds-checkbox-transition-property);
1151
+ .tds-sidenav-item .tds-sidenav-section-list{
1152
+ --tds-sidenav-item-depth:1;
1153
+ gap:0;
1222
1154
  }
1223
1155
 
1224
- :is(.tds-checkbox input[type="checkbox"])::before{
1225
- position:absolute;
1226
- top:50%;
1227
- left:50%;
1228
- visibility:var(--tds-checkbox-input-icon-visibility);
1229
- width:100%;
1230
- height:100%;
1231
- content:"";
1232
- background-color:var(--tds-checkbox-input-icon-fill);
1233
- border-radius:var(--tds-checkbox-input-border-radius);
1234
- opacity:var(--tds-checkbox-input-icon-opacity);
1235
- -webkit-mask-image:var(--tds-checkbox-input-icon);
1236
- mask-image:var(--tds-checkbox-input-icon);
1237
- -webkit-mask-repeat:no-repeat;
1238
- mask-repeat:no-repeat;
1239
- -webkit-mask-size:contain;
1240
- mask-size:contain;
1241
- transform:translate(-50%, -50%);
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);
1242
1162
  }
1243
1163
 
1244
- :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
1245
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
1246
- --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
1164
+ :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list{
1165
+ --tds-sidenav-item-depth:2;
1247
1166
  }
1248
1167
 
1249
- :is(.tds-checkbox input[type="checkbox"]):focus-visible{
1250
- outline:var(--t-focus-ring-outline);
1251
- outline-offset:var(--t-focus-ring-offset);
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;
1252
1174
  }
1253
1175
 
1254
- :is(.tds-checkbox input[type="checkbox"]):disabled{
1255
- pointer-events:none;
1256
- }
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
+ }
1257
1186
 
1258
- @media (prefers-reduced-motion: reduce){
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
+ }
1259
1197
 
1260
- .tds-checkbox input[type="checkbox"]{
1261
- --tds-checkbox-transition-property:none;
1262
- }
1263
- }
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
+ }
1264
1203
 
1265
- .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
1266
- --tds-checkbox-input-background-color:var(--t-fill-color-control);
1267
- --tds-checkbox-input-border-color:var(--t-border-color-control-info);
1268
- --tds-checkbox-input-icon-visibility:visible;
1269
- --tds-checkbox-input-icon-opacity:1;
1270
- }
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
+ }
1271
1208
 
1272
- :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
1273
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
1274
- --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
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);
1275
1216
  }
1276
1217
 
1277
- .tds-checkbox:has(input:checked){
1278
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
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;
1279
1227
  }
1280
1228
 
1281
- .tds-checkbox:has(input:indeterminate){
1282
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
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);
1283
1236
  }
1284
1237
 
1285
- .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
1286
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1287
- --tds-checkbox-description-color:var(--t-text-color-status-error);
1288
- --tds-checkbox-description-invalid-icon-display:inline-block;
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;
1289
1256
  }
1290
1257
 
1291
- :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
1292
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1293
- --tds-checkbox-input-background-color:var(--t-form-background-color-error);
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;
1294
1274
  }
1295
1275
 
1296
- :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:checked,:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:indeterminate{
1297
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1298
- --tds-checkbox-input-background-color:var(--t-form-border-color-error);
1276
+ .tds-sidenav-collapse:not(:popover-open){
1277
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
1278
+ transition:var(--tds-sidenav-collapse-transition-exit);
1299
1279
  }
1300
1280
 
1301
- :is(:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:checked,:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:indeterminate):hover:not(:disabled){
1302
- --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
1303
- --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
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);
1304
1285
  }
1305
-
1306
- .tds-checkbox:has(input:required) label::after{
1307
- margin-left:.25ch;
1308
- color:var(--t-text-color-status-error);
1309
- content:"*";
1310
1286
  }
1311
-
1312
- .tds-checkbox:has(input:disabled){
1313
- --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
1314
- --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
1315
-
1316
- --tds-checkbox-label-color:var(--t-form-color-disabled);
1317
- --tds-checkbox-description-color:var(--t-form-color-disabled);
1318
- --tds-checkbox-cursor:not-allowed;
1319
1287
  }
1320
-
1321
- .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
1322
- --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
1288
+ @supports not selector(:popover-open){
1289
+ .tds-sidenav-collapse.\:popover-open{
1290
+ display:flex;
1323
1291
  }
1324
1292
 
1325
- .tds-checkbox-description{
1326
- display:flex;
1327
- grid-area:2 / 2;
1328
- gap:var(--t-spacing-half);
1329
- align-items:flex-start;
1330
- padding-inline-start:var(--t-spacing-1);
1331
- margin:0;
1332
- font-size:var(--tds-checkbox-description-font-size);
1333
- line-height:var(--tds-checkbox-description-line-height);
1334
- color:var(--tds-checkbox-description-color);
1335
- cursor:text;
1336
- }
1337
-
1338
- .tds-checkbox-description .tds-checkbox-description-invalid-icon{
1339
- display:var(--tds-checkbox-description-invalid-icon-display);
1340
- flex-shrink:0;
1341
- margin-top:calc(.5lh - .5em);
1342
- line-height:var(--tds-checkbox-description-line-height);
1293
+ .tds-sidenav-collapse:not(.\:popover-open){
1294
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
1295
+ transition:var(--tds-sidenav-collapse-transition-exit);
1296
+ }
1343
1297
  }
1344
-
1345
- .tds-checkbox--sm{
1346
- --tds-checkbox-line-height:1.35;
1347
- --tds-checkbox-input-size:var(--t-element-size-sm);
1348
- --tds-checkbox-font-size:var(--t-font-size-sm);
1349
- --tds-checkbox-description-font-size:var(--t-font-size-xs);
1350
- --tds-checkbox-description-line-height:1.3;
1351
1298
  }
1352
1299
 
1353
- .tds-combo-box{
1354
- --tds-combo-box-button-offset:4px;
1300
+ @media (min-width: 720px){
1301
+ .tds-sidenav-responsive-header{
1302
+ display:none;
1303
+ }
1355
1304
  }
1356
1305
 
1357
- .tds-combo-box[data-open] .tds-combo-box-button > svg{
1358
- transform:rotate(.5turn);
1359
- }
1306
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
1307
+ display:none;
1308
+ }
1360
1309
 
1361
- .tds-combo-box--lg{
1362
- --tds-combo-box-button-offset:5px;
1363
- }
1364
- .tds-combo-box-field:has([readonly]) .tds-combo-box-button{
1365
- display:none;
1366
- }
1367
- .tds-combo-box-input{
1368
- display:flex;
1369
- flex:1;
1370
- align-items:center;
1371
- padding-block:var(--tds-field-padding-block);
1372
- padding-inline:var(--tds-field-padding-inline);
1373
- font-family:inherit;
1374
- font-size:inherit;
1375
- color:inherit;
1376
- outline:0;
1377
- background:transparent;
1378
- border:0;
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;
1379
1321
  }
1380
- .tds-combo-box-input:has( + .tds-combo-box-button){
1381
- padding-inline-end:0;
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;
1382
1328
  }
1383
- .tds-combo-box-input::-moz-placeholder{
1384
- color:var(--tds-field-placeholder-color);
1385
- -moz-user-select:none;
1386
- user-select:none;
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);
1387
1355
  }
1388
- .tds-combo-box-input::placeholder{
1389
- color:var(--tds-field-placeholder-color);
1390
- -webkit-user-select:none;
1391
- -moz-user-select:none;
1392
- user-select:none;
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);
1393
1359
  }
1394
- .tds-combo-box-button{
1395
- flex-shrink:0;
1396
- align-self:center;
1397
- inline-size:calc(var(--tds-field-min-height) - (var(--tds-combo-box-button-offset) * 2));
1398
- block-size:calc(var(--tds-field-min-height) - (var(--tds-combo-box-button-offset) * 2));
1360
+
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);
1365
+
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;
1399
1373
  padding:0;
1400
- margin-inline-end:var(--tds-combo-box-button-offset);
1401
- }
1402
- .tds-combo-box-button > svg{
1403
- inline-size:var(--tds-field-font-size);
1404
- block-size:var(--tds-field-font-size);
1405
- transition:transform var(--t-duration-300) var(--t-ease-in-out);
1406
- }
1407
- .tds-combo-box-popover{
1408
- width:var(--trigger-width);
1409
- max-block-size:inherit;
1410
- padding:var(--t-spacing-1);
1411
- overflow:auto;
1412
- scroll-behavior:smooth;
1413
- overscroll-behavior:none;
1414
- -webkit-user-select:none;
1415
- -moz-user-select:none;
1416
- user-select:none;
1417
- outline:0;
1418
- scrollbar-color:#0004 var(--t-surface-color-card);
1419
- scrollbar-width:thin;
1420
- background:var(--t-surface-color-card);
1421
- background-clip:padding-box;
1422
- border:1px solid var(--t-border-color);
1423
- border-radius:var(--t-border-radius);
1424
- box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
1374
+ margin:0;
1375
+
1376
+ font-size:var(--tds-checkbox-group-font-size);
1377
+ line-height:var(--tds-checkbox-group-line-height);
1378
+ border:0;
1425
1379
  }
1426
- .tds-combo-box-popover[data-entering]{
1427
- animation:tds-combo-box-popover var(--t-duration-300) var(--t-ease-out);
1428
- }
1429
- .tds-combo-box-popover[data-exiting]{
1430
- animation:tds-combo-box-popover var(--t-duration-200) var(--t-ease-in) reverse;
1431
- }
1432
- .tds-combo-box-popover[data-entering],.tds-combo-box-popover[data-exiting]{
1433
- will-change:opacity, transform;
1380
+
1381
+ .tds-checkbox-group legend{
1382
+ float:left;
1383
+ padding:0;
1384
+ margin:0;
1434
1385
  }
1435
1386
 
1436
- @keyframes tds-combo-box-popover{
1437
- from{
1438
- opacity:0;
1439
- transform:translateY(-8px);
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;
1440
1390
  }
1441
- }
1442
1391
 
1443
- @media (prefers-reduced-motion: reduce){
1444
- .tds-combo-box-popover[data-entering],.tds-combo-box-popover[data-exiting]{
1445
- animation:none;
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:"*";
1446
1396
  }
1447
1397
 
1448
- .tds-combo-box-button > svg{
1449
- transition:none;
1450
- }
1451
- }
1452
- .tds-combo-box-list{
1453
- padding:0;
1454
- margin:0;
1455
- }
1456
- .tds-combo-box-list-item{
1457
- display:block;
1458
- padding-block:var(--t-spacing-1);
1459
- padding-inline:var(--t-spacing-2) var(--t-spacing-1);
1460
- overflow:hidden;
1461
- text-overflow:ellipsis;
1462
- font-size:1rem;
1463
- color:var(--t-text-color);
1464
- white-space:nowrap;
1465
- cursor:default;
1466
- border-radius:var(--t-border-radius);
1467
- }
1468
- .tds-combo-box-list-item[data-hovered]:not([data-disabled]),.tds-combo-box-list-item[data-focus-visible]{
1469
- background:var(--t-fill-color-neutral-070);
1470
- }
1471
- .tds-combo-box-list-item[data-selected]{
1472
- background:var(--t-fill-color-button-interaction-ghost-active);
1473
- }
1474
- .tds-combo-box-list-item[data-pressed]:not([data-disabled]){
1475
- background:var(--t-fill-color-neutral-060);
1476
- }
1477
- .tds-combo-box-list-item[data-disabled]{
1478
- color:var(--t-form-color-disabled);
1479
- cursor:not-allowed;
1480
- }
1481
- .tds-combo-box-list-item[data-disabled][data-hovered]{
1482
- background:transparent;
1398
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
1399
+ content:none;
1483
1400
  }
1484
- .tds-combo-box-empty-state{
1485
- position:relative;
1486
- min-block-size:var(--t-spacing-3);
1487
- padding-block:var(--t-spacing-1);
1488
- padding-inline:var(--t-spacing-2);
1489
- font-size:var(--t-font-size-md);
1490
- color:var(--t-text-color-secondary);
1491
- }
1492
- .tds-combo-box-load-more{
1493
- position:relative;
1494
- min-block-size:calc(var(--t-spacing-3) + var(--t-spacing-1));
1401
+
1402
+ .tds-checkbox-group-fields{
1403
+ display:flex;
1404
+ flex-direction:column;
1405
+ gap:var(--tds-checkbox-group-gap);
1406
+ align-items:flex-start;
1407
+ margin-top:var(--t-spacing-1);
1495
1408
  }
1496
1409
 
1497
- .tds-combo-box-empty-state,
1498
- .tds-combo-box-load-more{
1499
- --tds-loading-spinner-visibility:visible;
1500
- --tds-loading-spinner-animation-play-state:running;
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;
1501
1419
  }
1502
- .tds-combo-box-list-section:not(:first-child){
1503
- margin-block-start:var(--t-spacing-half);
1420
+
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);
1504
1426
  }
1505
- .tds-combo-box-section-header{
1506
- padding-block:var(--t-spacing-1);
1507
- padding-inline:var(--t-spacing-1);
1508
- font-size:var(--t-font-size-sm);
1509
- font-weight:var(--t-font-weight-semibold);
1510
- color:var(--t-text-color-secondary);
1427
+
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;
1511
1433
  }
1512
1434
 
1513
1435
  .tds-dropdown-popover{
@@ -1565,7 +1487,7 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1565
1487
  column-gap:var(--tds-dropdown-item-column-gap);
1566
1488
  align-items:center;
1567
1489
  padding-block:var(--t-spacing-1);
1568
- padding-inline:var(--t-spacing-2);
1490
+ padding-inline:var(--t-spacing-1-half);
1569
1491
  font-size:1rem;
1570
1492
  color:var(--tds-dropdown-item-color);
1571
1493
  text-decoration:none;
@@ -1585,220 +1507,711 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1585
1507
  cursor:not-allowed;
1586
1508
  }
1587
1509
 
1588
- .tds-dropdown-item--destructive{
1589
- --tds-dropdown-item-color:var(--t-text-color-status-error);
1590
- }
1510
+ .tds-dropdown-item--destructive{
1511
+ --tds-dropdown-item-color:var(--t-text-color-status-error);
1512
+ }
1513
+
1514
+ .tds-dropdown-item--staff-only{
1515
+ --tds-dropdown-item-color:var(--t-fill-color-product-staff);
1516
+ }
1517
+ a.tds-dropdown-item:is(:hover, :active){
1518
+ color:var(--tds-dropdown-item-color);
1519
+ }
1520
+ .tds-dropdown-item [slot="prefix"],
1521
+ .tds-dropdown-item [slot="suffix"]{
1522
+ flex-shrink:0;
1523
+ }
1524
+
1525
+ .tds-dropdown-item [slot="label"]{
1526
+ flex:1;
1527
+ min-width:0;
1528
+ overflow:hidden;
1529
+ text-overflow:ellipsis;
1530
+ white-space:nowrap;
1531
+ }
1532
+
1533
+ .tds-dropdown-item [slot="description"]{
1534
+ font-size:var(--t-font-size-sm);
1535
+ color:var(--t-text-color-secondary);
1536
+ }
1537
+
1538
+ .tds-dropdown-item:has([slot="description"]){
1539
+ --tds-dropdown-item-row-gap:var(--t-spacing-half);
1540
+ --tds-dropdown-item-column-gap:0;
1541
+
1542
+ display:grid;
1543
+ grid-template-areas:"prefix label suffix" ". description .";
1544
+ grid-template-columns:auto 1fr auto;
1545
+ }
1546
+
1547
+ .tds-dropdown-item:has([slot="description"]) [slot="prefix"]{
1548
+ grid-area:prefix;
1549
+ margin-inline-end:var(--t-spacing-1);
1550
+ }
1551
+
1552
+ .tds-dropdown-item:has([slot="description"]) [slot="label"]{
1553
+ grid-area:label;
1554
+ }
1555
+
1556
+ .tds-dropdown-item:has([slot="description"]) [slot="description"]{
1557
+ grid-area:description;
1558
+ }
1559
+
1560
+ .tds-dropdown-item:has([slot="description"]) [slot="suffix"]{
1561
+ grid-area:suffix;
1562
+ margin-inline-start:var(--t-spacing-1);
1563
+ }
1564
+ .tds-dropdown-section:not(:first-child){
1565
+ margin-block-start:var(--t-spacing-half);
1566
+ }
1567
+
1568
+ .tds-dropdown-section-label{
1569
+ padding-block:var(--t-spacing-1);
1570
+ padding-inline:var(--t-spacing-half);
1571
+ font-size:var(--t-font-size-sm);
1572
+ font-weight:var(--t-font-weight-semibold);
1573
+ color:var(--t-text-color-secondary);
1574
+ }
1575
+ .tds-dropdown-separator{
1576
+ margin-block:var(--t-spacing-half);
1577
+ margin-inline:0;
1578
+ border:0;
1579
+ border-top:1px solid var(--t-border-color);
1580
+ }
1581
+
1582
+ .tds-modal-overlay{
1583
+ position:fixed;
1584
+ inset:0;
1585
+ z-index:1000;
1586
+ display:flex;
1587
+ align-items:center;
1588
+ justify-content:center;
1589
+ background:hsl(0 0% 0% / 40%);
1590
+ }
1591
+
1592
+ .tds-modal-overlay[data-entering]{
1593
+ animation:tds-modal-overlay-fade var(--t-duration-300) var(--t-ease-out);
1594
+ }
1595
+
1596
+ .tds-modal-overlay[data-exiting]{
1597
+ animation:tds-modal-overlay-fade var(--t-duration-200) var(--t-ease-in) reverse;
1598
+ }
1599
+
1600
+ @keyframes tds-modal-overlay-fade{
1601
+ from{
1602
+ opacity:0;
1603
+ }
1604
+ }
1605
+
1606
+ .tds-modal-frame{
1607
+ --tds-modal-width:600px;
1608
+
1609
+ display:flex;
1610
+ justify-content:center;
1611
+ width:min(var(--tds-modal-width), calc(100% - 48px));
1612
+ }
1613
+
1614
+ .tds-modal-frame[data-entering]{
1615
+ animation:tds-modal-zoom var(--t-duration-300) var(--t-ease-out);
1616
+ }
1617
+
1618
+ .tds-modal-frame[data-exiting]{
1619
+ animation:tds-modal-zoom var(--t-duration-200) var(--t-ease-in) reverse;
1620
+ }
1621
+
1622
+ .tds-modal-frame--sm{
1623
+ --tds-modal-width:400px;
1624
+ }
1625
+
1626
+ .tds-modal-frame--lg{
1627
+ --tds-modal-width:800px;
1628
+ }
1629
+
1630
+ .tds-modal-frame--xl{
1631
+ --tds-modal-width:1000px;
1632
+ }
1633
+
1634
+ @keyframes tds-modal-zoom{
1635
+ from{
1636
+ opacity:0;
1637
+ scale:.96;
1638
+ }
1639
+ }
1640
+
1641
+ @media (prefers-reduced-motion: reduce){
1642
+ .tds-modal-overlay[data-entering],
1643
+ .tds-modal-overlay[data-exiting],
1644
+ .tds-modal-frame[data-entering],
1645
+ .tds-modal-frame[data-exiting]{
1646
+ animation:none;
1647
+ }
1648
+ }
1649
+
1650
+ .tds-modal{
1651
+ display:flex;
1652
+ flex-direction:column;
1653
+ width:100%;
1654
+ padding-block:var(--t-spacing-3);
1655
+ padding-inline:0;
1656
+ background:var(--t-surface-color-card);
1657
+
1658
+ border:0;
1659
+ border-radius:var(--t-border-radius-lg);
1660
+ box-shadow:0 4px 18px 0 #0003;
1661
+ }
1662
+
1663
+ .tds-modal:focus{
1664
+ outline:none;
1665
+ }
1666
+
1667
+ .tds-modal-header{
1668
+ display:grid;
1669
+ grid-template-columns:1fr auto;
1670
+ -moz-column-gap:var(--t-spacing-2);
1671
+ column-gap:var(--t-spacing-2);
1672
+ padding-block:0;
1673
+ padding-inline:var(--t-spacing-4);
1674
+ }
1675
+
1676
+ .tds-modal-title{
1677
+ grid-row:1;
1678
+ grid-column:1;
1679
+ margin:0;
1680
+ font-size:var(--t-font-size-2xl);
1681
+ font-weight:var(--t-font-weight-medium);
1682
+ line-height:140%;
1683
+ color:var(--t-text-color-headline);
1684
+ }
1685
+
1686
+ .tds-modal-subtitle{
1687
+ grid-row:2;
1688
+ grid-column:1;
1689
+ margin:0;
1690
+ font-size:var(--t-font-size-md);
1691
+ font-weight:var(--t-font-weight-medium);
1692
+ line-height:140%;
1693
+ color:var(--t-text-color-secondary);
1694
+ }
1695
+
1696
+ .tds-modal-close{
1697
+ grid-row:1;
1698
+ grid-column:2;
1699
+ align-self:center;
1700
+ color:var(--t-icon-color-dim);
1701
+ }
1702
+
1703
+ .tds-modal-body{
1704
+ padding-block:var(--t-spacing-3);
1705
+ padding-inline:var(--t-spacing-4);
1706
+ }
1707
+
1708
+ .tds-modal-body--full-width{
1709
+ padding-inline:0;
1710
+ }
1711
+
1712
+ .tds-modal-footer{
1713
+ display:flex;
1714
+ gap:var(--t-spacing-2);
1715
+ align-items:center;
1716
+ justify-content:flex-end;
1717
+ padding-block-start:var(--t-spacing-3);
1718
+ padding-inline:var(--t-spacing-4);
1719
+ border-top:1px solid var(--t-border-color);
1720
+ }
1721
+
1722
+ .tds-modal-footer > [slot="start"]{
1723
+ margin-inline-end:auto;
1724
+ }
1725
+
1726
+ .tds-radio{
1727
+ --tds-radio-font-size:var(--t-font-size-md);
1728
+ --tds-radio-cursor:pointer;
1729
+ --tds-radio-line-height:1.4;
1730
+ --tds-radio-transition-property:border-width;
1731
+
1732
+ --tds-radio-input-size:var(--t-element-size-md);
1733
+ --tds-radio-input-border-radius:var(--t-border-radius-round);
1734
+ --tds-radio-input-border-color:var(--t-form-border-color);
1735
+ --tds-radio-input-border-width:var(--t-form-border-width);
1736
+ --tds-radio-input-background-color:var(--t-form-background-color);
1737
+
1738
+ --tds-radio-label-color:var(--t-form-color);
1739
+
1740
+ --tds-radio-description-font-size:var(--t-font-size-sm);
1741
+ --tds-radio-description-line-height:1.35;
1742
+ --tds-radio-description-color:var(--t-text-color-secondary);
1743
+
1744
+ position:relative;
1745
+ display:inline-grid;
1746
+ grid-template-columns:auto;
1747
+ grid-auto-columns:1fr;
1748
+ gap:var(--t-spacing-fourth) 0;
1749
+ line-height:var(--tds-radio-line-height);
1750
+ -webkit-user-select:none;
1751
+ -moz-user-select:none;
1752
+ user-select:none;
1753
+ }
1754
+
1755
+ .tds-radio label{
1756
+ grid-area:1 / 2;
1757
+ padding-inline-start:var(--t-spacing-1);
1758
+ font-size:var(--tds-radio-font-size);
1759
+ font-weight:var(--t-font-weight-normal);
1760
+ color:var(--tds-radio-label-color);
1761
+ cursor:var(--tds-radio-cursor);
1762
+ }
1763
+
1764
+ .tds-radio input[type="radio"]{
1765
+ position:relative;
1766
+ width:1em;
1767
+ height:1em;
1768
+ margin:calc((1lh - 1em) / 2) 0 0;
1769
+ font-size:var(--tds-radio-font-size);
1770
+ line-height:inherit;
1771
+ -webkit-appearance:none;
1772
+ -moz-appearance:none;
1773
+ appearance:none;
1774
+ cursor:var(--tds-radio-cursor);
1775
+ background-color:var(--tds-radio-input-background-color);
1776
+ border:var(--tds-radio-input-border-width) solid var(--tds-radio-input-border-color);
1777
+ border-radius:var(--tds-radio-input-border-radius);
1778
+ transition-timing-function:var(--t-ease-in-out);
1779
+ transition-duration:var(--t-duration-200);
1780
+ transition-property:var(--tds-radio-transition-property);
1781
+ }
1782
+
1783
+ :is(.tds-radio input[type="radio"]):hover:not(:disabled){
1784
+ --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
1785
+ --tds-radio-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
1786
+ }
1787
+
1788
+ :is(.tds-radio input[type="radio"]):focus-visible{
1789
+ outline:var(--t-focus-ring-outline);
1790
+ outline-offset:var(--t-focus-ring-offset);
1791
+ }
1792
+
1793
+ :is(.tds-radio input[type="radio"]):disabled{
1794
+ pointer-events:none;
1795
+ }
1796
+
1797
+ @media (prefers-reduced-motion: reduce){
1798
+
1799
+ .tds-radio input[type="radio"]{
1800
+ --tds-radio-transition-property:none;
1801
+ }
1802
+ }
1803
+
1804
+ .tds-radio:has(input:checked){
1805
+ --tds-radio-input-background-color:var(--t-icon-color-inverted);
1806
+ --tds-radio-input-border-color:var(--t-border-color-control-info);
1807
+ --tds-radio-input-border-width:4px;
1808
+ }
1809
+
1810
+ .tds-radio:has(input:checked) input:hover:not(:disabled){
1811
+ --tds-radio-input-background-color:var(--t-icon-color-inverted);
1812
+ --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
1813
+ }
1814
+
1815
+ .tds-radio:has(input:user-invalid){
1816
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
1817
+ }
1818
+
1819
+ .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
1820
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1821
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
1822
+ }
1823
+
1824
+ .tds-radio:has(input:disabled){
1825
+ --tds-radio-input-background-color:var(--t-form-background-color-disabled);
1826
+ --tds-radio-input-border-color:var(--t-form-border-color-disabled);
1827
+
1828
+ --tds-radio-label-color:var(--t-form-color-disabled);
1829
+ --tds-radio-description-color:var(--t-form-color-disabled);
1830
+ --tds-radio-cursor:not-allowed;
1831
+ }
1832
+
1833
+ .tds-radio:has(input:disabled) input:checked{
1834
+ --tds-radio-input-background-color:var(--t-form-background-color);
1835
+ --tds-radio-input-border-color:var(--t-form-border-color-disabled);
1836
+ }
1837
+
1838
+ .tds-radio-description{
1839
+ display:flex;
1840
+ grid-area:2 / 2;
1841
+ gap:var(--t-spacing-half);
1842
+ align-items:flex-start;
1843
+ padding-inline-start:var(--t-spacing-1);
1844
+ margin:0;
1845
+ font-size:var(--tds-radio-description-font-size);
1846
+ line-height:var(--tds-radio-description-line-height);
1847
+ color:var(--tds-radio-description-color);
1848
+ cursor:text;
1849
+ }
1850
+
1851
+ .tds-radio--sm{
1852
+ --tds-radio-line-height:1.35;
1853
+ --tds-radio-input-size:var(--t-element-size-sm);
1854
+ --tds-radio-font-size:var(--t-font-size-sm);
1855
+ --tds-radio-description-font-size:var(--t-font-size-xs);
1856
+ --tds-radio-description-line-height:1.3;
1857
+ }
1858
+
1859
+
1860
+ :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{
1861
+ -webkit-appearance:none;
1862
+ appearance:none;
1863
+ }
1864
+
1865
+ [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
1866
+ inline-size:1em;
1867
+ block-size:2em;
1868
+ }
1869
+ @supports (field-sizing: content){
1870
+ .tds-input--auto-width{
1871
+ inline-size:-moz-fit-content;
1872
+ inline-size:fit-content;
1873
+ min-inline-size:min(100%, 122px);
1874
+ }
1875
+
1876
+ .tds-input--auto-width input{
1877
+ field-sizing:content;
1878
+ inline-size:auto;
1879
+ }
1880
+ }
1881
+
1882
+ .tds-checkbox{
1883
+ --tds-checkbox-font-size:var(--t-font-size-md);
1884
+ --tds-checkbox-cursor:pointer;
1885
+ --tds-checkbox-line-height:1.4;
1886
+ --tds-checkbox-transition-property:background-color, border-color;
1887
+
1888
+ --tds-checkbox-input-size:var(--t-element-size-md);
1889
+ --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
1890
+ --tds-checkbox-input-border-color:var(--t-form-border-color);
1891
+ --tds-checkbox-input-background-color:var(--t-form-background-color);
1892
+
1893
+ --tds-checkbox-input-icon:none;
1894
+ --tds-checkbox-input-icon-visibility:hidden;
1895
+ --tds-checkbox-input-icon-opacity:0;
1896
+ --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
1897
+
1898
+ --tds-checkbox-label-color:var(--t-form-color);
1899
+
1900
+ --tds-checkbox-description-font-size:var(--t-font-size-sm);
1901
+ --tds-checkbox-description-line-height:1.35;
1902
+ --tds-checkbox-description-color:var(--t-text-color-secondary);
1903
+ --tds-checkbox-description-invalid-icon-display:none;
1904
+
1905
+ position:relative;
1906
+ display:inline-grid;
1907
+ grid-template-columns:auto;
1908
+ grid-auto-columns:1fr;
1909
+ gap:var(--t-spacing-fourth) 0;
1910
+ line-height:var(--tds-checkbox-line-height);
1911
+ -webkit-user-select:none;
1912
+ -moz-user-select:none;
1913
+ user-select:none;
1914
+ }
1915
+
1916
+ .tds-checkbox label{
1917
+ grid-area:1 / 2;
1918
+ padding-inline-start:var(--t-spacing-1);
1919
+ font-size:var(--tds-checkbox-font-size);
1920
+ font-weight:var(--t-font-weight-normal);
1921
+ color:var(--tds-checkbox-label-color);
1922
+ cursor:var(--tds-checkbox-cursor);
1923
+ }
1924
+
1925
+ .tds-checkbox tds-indeterminate{
1926
+ display:flex;
1927
+ }
1928
+
1929
+ .tds-checkbox input[type="checkbox"]{
1930
+ position:relative;
1931
+ width:1em;
1932
+ height:1em;
1933
+ margin:calc((1lh - 1em) / 2) 0 0;
1934
+ font-size:var(--tds-checkbox-font-size);
1935
+ line-height:inherit;
1936
+ -webkit-appearance:none;
1937
+ -moz-appearance:none;
1938
+ appearance:none;
1939
+ cursor:var(--tds-checkbox-cursor);
1940
+ background-color:var(--tds-checkbox-input-background-color);
1941
+ border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
1942
+ border-radius:var(--tds-checkbox-input-border-radius);
1943
+ transition-timing-function:var(--t-ease-in-out);
1944
+ transition-duration:var(--t-duration-200);
1945
+ transition-property:var(--tds-checkbox-transition-property);
1946
+ }
1947
+
1948
+ :is(.tds-checkbox input[type="checkbox"])::before{
1949
+ position:absolute;
1950
+ top:50%;
1951
+ left:50%;
1952
+ visibility:var(--tds-checkbox-input-icon-visibility);
1953
+ width:100%;
1954
+ height:100%;
1955
+ content:"";
1956
+ background-color:var(--tds-checkbox-input-icon-fill);
1957
+ border-radius:var(--tds-checkbox-input-border-radius);
1958
+ opacity:var(--tds-checkbox-input-icon-opacity);
1959
+ -webkit-mask-image:var(--tds-checkbox-input-icon);
1960
+ mask-image:var(--tds-checkbox-input-icon);
1961
+ -webkit-mask-repeat:no-repeat;
1962
+ mask-repeat:no-repeat;
1963
+ -webkit-mask-size:contain;
1964
+ mask-size:contain;
1965
+ transform:translate(-50%, -50%);
1966
+ }
1967
+
1968
+ :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
1969
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
1970
+ --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
1971
+ }
1972
+
1973
+ :is(.tds-checkbox input[type="checkbox"]):focus-visible{
1974
+ outline:var(--t-focus-ring-outline);
1975
+ outline-offset:var(--t-focus-ring-offset);
1976
+ }
1591
1977
 
1592
- .tds-dropdown-item--staff-only{
1593
- --tds-dropdown-item-color:var(--t-fill-color-product-staff);
1594
- }
1595
- a.tds-dropdown-item:is(:hover, :active){
1596
- color:var(--tds-dropdown-item-color);
1597
- }
1598
- .tds-dropdown-item [slot="prefix"],
1599
- .tds-dropdown-item [slot="suffix"]{
1600
- flex-shrink:0;
1601
- }
1978
+ :is(.tds-checkbox input[type="checkbox"]):disabled{
1979
+ pointer-events:none;
1980
+ }
1602
1981
 
1603
- .tds-dropdown-item [slot="label"]{
1604
- flex:1;
1605
- min-width:0;
1606
- overflow:hidden;
1607
- text-overflow:ellipsis;
1608
- white-space:nowrap;
1609
- }
1982
+ @media (prefers-reduced-motion: reduce){
1610
1983
 
1611
- .tds-dropdown-item [slot="description"]{
1612
- font-size:var(--t-font-size-sm);
1613
- color:var(--t-text-color-secondary);
1614
- }
1984
+ .tds-checkbox input[type="checkbox"]{
1985
+ --tds-checkbox-transition-property:none;
1986
+ }
1987
+ }
1615
1988
 
1616
- .tds-dropdown-item:has([slot="description"]){
1617
- --tds-dropdown-item-row-gap:var(--t-spacing-half);
1618
- --tds-dropdown-item-column-gap:0;
1989
+ .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
1990
+ --tds-checkbox-input-background-color:var(--t-fill-color-control);
1991
+ --tds-checkbox-input-border-color:var(--t-border-color-control-info);
1992
+ --tds-checkbox-input-icon-visibility:visible;
1993
+ --tds-checkbox-input-icon-opacity:1;
1994
+ }
1619
1995
 
1620
- display:grid;
1621
- grid-template-areas:"prefix label suffix" ". description .";
1622
- grid-template-columns:auto 1fr auto;
1623
- }
1996
+ :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
1997
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
1998
+ --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
1999
+ }
1624
2000
 
1625
- .tds-dropdown-item:has([slot="description"]) [slot="prefix"]{
1626
- grid-area:prefix;
1627
- margin-inline-end:var(--t-spacing-1);
1628
- }
2001
+ .tds-checkbox:has(input:checked){
2002
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
2003
+ }
1629
2004
 
1630
- .tds-dropdown-item:has([slot="description"]) [slot="label"]{
1631
- grid-area:label;
1632
- }
2005
+ .tds-checkbox:has(input:indeterminate){
2006
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
2007
+ }
1633
2008
 
1634
- .tds-dropdown-item:has([slot="description"]) [slot="description"]{
1635
- grid-area:description;
1636
- }
2009
+ .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
2010
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
2011
+ --tds-checkbox-description-color:var(--t-text-color-status-error);
2012
+ --tds-checkbox-description-invalid-icon-display:inline-block;
2013
+ }
1637
2014
 
1638
- .tds-dropdown-item:has([slot="description"]) [slot="suffix"]{
1639
- grid-area:suffix;
1640
- margin-inline-start:var(--t-spacing-1);
1641
- }
1642
- .tds-dropdown-section:not(:first-child){
1643
- margin-block-start:var(--t-spacing-half);
1644
- }
2015
+ :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
2016
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
2017
+ --tds-checkbox-input-background-color:var(--t-form-background-color-error);
2018
+ }
1645
2019
 
1646
- .tds-dropdown-section-label{
1647
- padding-block:var(--t-spacing-1);
1648
- padding-inline:var(--t-spacing-1);
1649
- font-size:var(--t-font-size-sm);
1650
- font-weight:var(--t-font-weight-semibold);
1651
- color:var(--t-text-color-secondary);
1652
- }
1653
- .tds-dropdown-separator{
1654
- margin-block:var(--t-spacing-half);
1655
- margin-inline:0;
1656
- border:0;
1657
- border-top:1px solid var(--t-border-color);
1658
- }
2020
+ :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{
2021
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
2022
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error);
2023
+ }
1659
2024
 
1660
- .tds-modal-overlay{
1661
- position:fixed;
1662
- inset:0;
1663
- z-index:1000;
1664
- display:flex;
1665
- align-items:center;
1666
- justify-content:center;
1667
- background:hsl(0 0% 0% / 40%);
1668
- }
2025
+ :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){
2026
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
2027
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
2028
+ }
1669
2029
 
1670
- .tds-modal-overlay[data-entering]{
1671
- animation:tds-modal-overlay-fade var(--t-duration-300) var(--t-ease-out);
1672
- }
2030
+ .tds-checkbox:has(input:required) label::after{
2031
+ margin-left:.25ch;
2032
+ color:var(--t-text-color-status-error);
2033
+ content:"*";
2034
+ }
1673
2035
 
1674
- .tds-modal-overlay[data-exiting]{
1675
- animation:tds-modal-overlay-fade var(--t-duration-200) var(--t-ease-in) reverse;
1676
- }
2036
+ .tds-checkbox:has(input:disabled){
2037
+ --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
2038
+ --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
1677
2039
 
1678
- @keyframes tds-modal-overlay-fade{
1679
- from{
1680
- opacity:0;
2040
+ --tds-checkbox-label-color:var(--t-form-color-disabled);
2041
+ --tds-checkbox-description-color:var(--t-form-color-disabled);
2042
+ --tds-checkbox-cursor:not-allowed;
1681
2043
  }
1682
- }
1683
2044
 
1684
- .tds-modal-frame{
1685
- --tds-modal-width:600px;
2045
+ .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
2046
+ --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
2047
+ }
1686
2048
 
2049
+ .tds-checkbox-description{
1687
2050
  display:flex;
1688
- justify-content:center;
1689
- width:min(var(--tds-modal-width), calc(100% - 48px));
2051
+ grid-area:2 / 2;
2052
+ gap:var(--t-spacing-half);
2053
+ align-items:flex-start;
2054
+ padding-inline-start:var(--t-spacing-1);
2055
+ margin:0;
2056
+ font-size:var(--tds-checkbox-description-font-size);
2057
+ line-height:var(--tds-checkbox-description-line-height);
2058
+ color:var(--tds-checkbox-description-color);
2059
+ cursor:text;
1690
2060
  }
1691
2061
 
1692
- .tds-modal-frame[data-entering]{
1693
- animation:tds-modal-zoom var(--t-duration-300) var(--t-ease-out);
1694
- }
1695
-
1696
- .tds-modal-frame[data-exiting]{
1697
- animation:tds-modal-zoom var(--t-duration-200) var(--t-ease-in) reverse;
2062
+ .tds-checkbox-description .tds-checkbox-description-invalid-icon{
2063
+ display:var(--tds-checkbox-description-invalid-icon-display);
2064
+ flex-shrink:0;
2065
+ margin-top:calc(.5lh - .5em);
2066
+ line-height:var(--tds-checkbox-description-line-height);
1698
2067
  }
1699
2068
 
1700
- .tds-modal-frame--sm{
1701
- --tds-modal-width:400px;
2069
+ .tds-checkbox--sm{
2070
+ --tds-checkbox-line-height:1.35;
2071
+ --tds-checkbox-input-size:var(--t-element-size-sm);
2072
+ --tds-checkbox-font-size:var(--t-font-size-sm);
2073
+ --tds-checkbox-description-font-size:var(--t-font-size-xs);
2074
+ --tds-checkbox-description-line-height:1.3;
1702
2075
  }
1703
2076
 
1704
- .tds-modal-frame--lg{
1705
- --tds-modal-width:800px;
1706
- }
2077
+ .tds-toggle-switch{
2078
+ --tds-toggle-switch-font-size:var(--t-font-size-md);
2079
+ --tds-toggle-switch-cursor:pointer;
2080
+ --tds-toggle-switch-display:inline-grid;
2081
+ --tds-toggle-switch-line-height:1.4;
1707
2082
 
1708
- .tds-modal-frame--xl{
1709
- --tds-modal-width:1000px;
1710
- }
2083
+ --tds-toggle-switch-label-color:var(--t-form-color);
1711
2084
 
1712
- @keyframes tds-modal-zoom{
1713
- from{
1714
- opacity:0;
1715
- scale:.96;
1716
- }
2085
+ --tds-toggle-switch-track-width:var(--t-container-size-md);
2086
+ --tds-toggle-switch-track-outline:none;
2087
+ --tds-toggle-switch-track-height:var(--t-container-size-xs);
2088
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color);
2089
+ --tds-toggle-switch-track-transition:background-color var(--t-duration-100) var(--t-ease-in-out);
2090
+
2091
+ --tds-toggle-switch-thumb-size:var(--t-element-size-md);
2092
+ --tds-toggle-switch-thumb-transform:translateX(0);
2093
+ --tds-toggle-switch-thumb-transition:transform var(--t-duration-200) var(--t-ease-in-out);
2094
+
2095
+ --tds-toggle-switch-description-font-size:var(--t-font-size-sm);
2096
+ --tds-toggle-switch-description-line-height:1.35;
2097
+ --tds-toggle-switch-description-color:var(--t-text-color-secondary);
2098
+ position:relative;
2099
+
2100
+ display:var(--tds-toggle-switch-display);
2101
+ grid-template-columns:auto;
2102
+ grid-auto-columns:1fr;
2103
+ gap:var(--t-spacing-fourth) 0;
2104
+ -webkit-user-select:none;
2105
+ -moz-user-select:none;
2106
+ user-select:none;
1717
2107
  }
1718
2108
 
1719
- @media (prefers-reduced-motion: reduce){
1720
- .tds-modal-overlay[data-entering],
1721
- .tds-modal-overlay[data-exiting],
1722
- .tds-modal-frame[data-entering],
1723
- .tds-modal-frame[data-exiting]{
1724
- animation:none;
2109
+ .tds-toggle-switch input[type="checkbox"]{
2110
+ position:absolute;
2111
+ width:var(--tds-toggle-switch-track-width);
2112
+ height:var(--tds-toggle-switch-track-height);
2113
+ margin:0;
2114
+ -webkit-appearance:none;
2115
+ -moz-appearance:none;
2116
+ appearance:none;
2117
+ cursor:var(--tds-toggle-switch-cursor);
2118
+ outline:var(--tds-toggle-switch-track-outline);
2119
+ outline-offset:var(--t-focus-ring-offset);
2120
+ background-color:transparent;
2121
+ border:0;
2122
+ border-radius:var(--t-border-radius-round);
1725
2123
  }
1726
- }
1727
2124
 
1728
- .tds-modal{
1729
- display:flex;
1730
- flex-direction:column;
1731
- width:100%;
1732
- padding-block:var(--t-spacing-3);
1733
- padding-inline:0;
1734
- background:var(--t-surface-color-card);
2125
+ :is(.tds-toggle-switch input[type="checkbox"]):focus-visible{
2126
+ --tds-toggle-switch-track-outline:var(--t-focus-ring-outline);
2127
+ }
1735
2128
 
1736
- border:0;
1737
- border-radius:var(--t-border-radius-lg);
1738
- box-shadow:0 4px 18px 0 #0003;
1739
- }
2129
+ .tds-toggle-switch label{
2130
+ display:inline-flex;
2131
+ grid-area:1 / 2;
2132
+ padding-inline-start:var(--t-spacing-1);
2133
+ margin-top:-.09375em;
2134
+ font-size:var(--tds-toggle-switch-font-size);
2135
+ font-weight:var(--t-font-weight-normal);
2136
+ line-height:var(--tds-toggle-switch-line-height);
2137
+ color:var(--tds-toggle-switch-label-color);
2138
+ cursor:var(--tds-toggle-switch-cursor);
2139
+ }
1740
2140
 
1741
- .tds-modal:focus{
1742
- outline:none;
2141
+ .tds-toggle-switch:not(:has(input:disabled)):has(input:hover){
2142
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-hover);
1743
2143
  }
1744
2144
 
1745
- .tds-modal-header{
1746
- display:grid;
1747
- grid-template-columns:1fr auto;
1748
- -moz-column-gap:var(--t-spacing-2);
1749
- column-gap:var(--t-spacing-2);
1750
- padding-block:0;
1751
- padding-inline:var(--t-spacing-4);
1752
- }
2145
+ .tds-toggle-switch:has(input:checked){
2146
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on);
2147
+ --tds-toggle-switch-thumb-transform:translateX(calc(var(--tds-toggle-switch-track-width) - var(--tds-toggle-switch-thumb-size) - var(--t-spacing-half)));
2148
+ }
1753
2149
 
1754
- .tds-modal-title{
1755
- grid-row:1;
1756
- grid-column:1;
1757
- margin:0;
1758
- font-size:var(--t-font-size-2xl);
1759
- font-weight:var(--t-font-weight-medium);
1760
- line-height:140%;
1761
- color:var(--t-text-color-headline);
1762
- }
2150
+ .tds-toggle-switch:has(input:checked):not(:has(input:disabled)):has(input:hover){
2151
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on-hover);
2152
+ }
1763
2153
 
1764
- .tds-modal-subtitle{
1765
- grid-row:2;
1766
- grid-column:1;
1767
- margin:0;
1768
- font-size:var(--t-font-size-md);
1769
- font-weight:var(--t-font-weight-medium);
1770
- line-height:140%;
1771
- color:var(--t-text-color-secondary);
1772
- }
2154
+ .tds-toggle-switch:has(input:disabled){
2155
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-disabled);
2156
+ --tds-toggle-switch-label-color:var(--t-form-color-disabled);
2157
+ --tds-toggle-switch-description-color:var(--t-form-color-disabled);
2158
+ --tds-toggle-switch-cursor:not-allowed;
2159
+ }
1773
2160
 
1774
- .tds-modal-close{
1775
- grid-row:1;
1776
- grid-column:2;
1777
- align-self:center;
1778
- color:var(--t-icon-color-dim);
2161
+ .tds-toggle-switch-track{
2162
+ position:relative;
2163
+ flex-shrink:0;
2164
+ width:var(--tds-toggle-switch-track-width);
2165
+ height:var(--tds-toggle-switch-track-height);
2166
+ background-color:var(--tds-toggle-switch-track-background-color);
2167
+ border-radius:var(--t-border-radius-round);
2168
+ transition:var(--tds-toggle-switch-track-transition);
1779
2169
  }
1780
2170
 
1781
- .tds-modal-body{
1782
- padding-block:var(--t-spacing-3);
1783
- padding-inline:var(--t-spacing-4);
1784
- }
2171
+ .tds-toggle-switch-track::before{
2172
+ position:absolute;
2173
+ top:var(--t-spacing-fourth);
2174
+ left:var(--t-spacing-fourth);
2175
+ width:var(--tds-toggle-switch-thumb-size);
2176
+ height:var(--tds-toggle-switch-thumb-size);
2177
+ content:"";
2178
+ background-color:#fff;
2179
+ border-radius:var(--t-border-radius-round);
2180
+ transform:var(--tds-toggle-switch-thumb-transform);
2181
+ transition:var(--tds-toggle-switch-thumb-transition);
2182
+ }
1785
2183
 
1786
- .tds-modal-body--full-width{
1787
- padding-inline:0;
2184
+ @media (prefers-reduced-motion: reduce){
2185
+
2186
+ .tds-toggle-switch-track{
2187
+ --tds-toggle-switch-track-transition:none;
2188
+ --tds-toggle-switch-thumb-transition:none;
1788
2189
  }
2190
+ }
1789
2191
 
1790
- .tds-modal-footer{
2192
+ .tds-toggle-switch-description{
1791
2193
  display:flex;
1792
- gap:var(--t-spacing-2);
1793
- align-items:center;
1794
- justify-content:flex-end;
1795
- padding-block-start:var(--t-spacing-3);
1796
- padding-inline:var(--t-spacing-4);
1797
- border-top:1px solid var(--t-border-color);
2194
+ grid-area:2 / 2;
2195
+ align-items:flex-start;
2196
+ padding-inline-start:var(--t-spacing-1);
2197
+ margin:0;
2198
+ font-size:var(--tds-toggle-switch-description-font-size);
2199
+ line-height:var(--tds-toggle-switch-description-line-height);
2200
+ color:var(--tds-toggle-switch-description-color);
2201
+ cursor:text;
1798
2202
  }
1799
2203
 
1800
- .tds-modal-footer > [slot="start"]{
1801
- margin-inline-end:auto;
2204
+ .tds-toggle-switch--sm{
2205
+ --tds-toggle-switch-font-size:var(--t-font-size-sm);
2206
+ --tds-toggle-switch-line-height:1.35;
2207
+ --tds-toggle-switch-track-height:var(--t-element-size-lg);
2208
+ --tds-toggle-switch-thumb-size:var(--t-element-size-sm);
2209
+ --tds-toggle-switch-description-font-size:var(--t-font-size-xs);
2210
+ --tds-toggle-switch-description-line-height:1.3;
2211
+ }
2212
+
2213
+ .tds-toggle-switch--hide-label{
2214
+ --tds-toggle-switch-display:inline-flex;
1802
2215
  }
1803
2216
 
1804
2217
  .tds-input:has(textarea){
@@ -1870,197 +2283,41 @@ a.tds-dropdown-item:is(:hover, :active){
1870
2283
  }
1871
2284
 
1872
2285
  :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
1873
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
1874
- }
1875
-
1876
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
1877
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
1878
- }
1879
-
1880
- :is(.tds-input textarea)::-webkit-scrollbar-corner{
1881
- background:var(--tds-input-scrollbar-surface-color);
1882
- }
1883
-
1884
- :is(.tds-input textarea)::-webkit-resizer{
1885
- background:var(--tds-input-resizer-icon) no-repeat;
1886
- background-position:right bottom;
1887
- background-size:var(--tds-input-resizer-size) var(--tds-input-resizer-size);
1888
- }
1889
-
1890
- :is(.tds-input textarea)::-webkit-scrollbar-track{
1891
- margin-block:var(--tds-input-scrollbar-track-margin-block);
1892
- cursor:default;
1893
- }
1894
-
1895
- @supports (-moz-appearance: none){
1896
- :is(.tds-input textarea){
1897
- scrollbar-color:var(--tds-input-scrollbar-thumb-color-default) var(--tds-input-scrollbar-surface-color);
1898
- scrollbar-width:thin;
1899
- }
1900
-
1901
- @media (hover){
1902
- :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1903
- scrollbar-color:var(--tds-input-scrollbar-thumb-color-hover) var(--tds-input-scrollbar-surface-color);
1904
- }
1905
- }
1906
- }
1907
- }
1908
-
1909
- .tds-radio{
1910
- --tds-radio-font-size:var(--t-font-size-md);
1911
- --tds-radio-cursor:pointer;
1912
- --tds-radio-line-height:1.4;
1913
- --tds-radio-transition-property:border-width;
1914
-
1915
- --tds-radio-input-size:var(--t-element-size-md);
1916
- --tds-radio-input-border-radius:var(--t-border-radius-round);
1917
- --tds-radio-input-border-color:var(--t-form-border-color);
1918
- --tds-radio-input-border-width:var(--t-form-border-width);
1919
- --tds-radio-input-background-color:var(--t-form-background-color);
1920
-
1921
- --tds-radio-label-color:var(--t-form-color);
1922
-
1923
- --tds-radio-description-font-size:var(--t-font-size-sm);
1924
- --tds-radio-description-line-height:1.35;
1925
- --tds-radio-description-color:var(--t-text-color-secondary);
1926
-
1927
- position:relative;
1928
- display:inline-grid;
1929
- grid-template-columns:auto;
1930
- grid-auto-columns:1fr;
1931
- gap:var(--t-spacing-fourth) 0;
1932
- line-height:var(--tds-radio-line-height);
1933
- -webkit-user-select:none;
1934
- -moz-user-select:none;
1935
- user-select:none;
1936
- }
1937
-
1938
- .tds-radio label{
1939
- grid-area:1 / 2;
1940
- padding-inline-start:var(--t-spacing-1);
1941
- font-size:var(--tds-radio-font-size);
1942
- font-weight:var(--t-font-weight-normal);
1943
- color:var(--tds-radio-label-color);
1944
- cursor:var(--tds-radio-cursor);
1945
- }
1946
-
1947
- .tds-radio input[type="radio"]{
1948
- position:relative;
1949
- width:1em;
1950
- height:1em;
1951
- margin:calc((1lh - 1em) / 2) 0 0;
1952
- font-size:var(--tds-radio-font-size);
1953
- line-height:inherit;
1954
- -webkit-appearance:none;
1955
- -moz-appearance:none;
1956
- appearance:none;
1957
- cursor:var(--tds-radio-cursor);
1958
- background-color:var(--tds-radio-input-background-color);
1959
- border:var(--tds-radio-input-border-width) solid var(--tds-radio-input-border-color);
1960
- border-radius:var(--tds-radio-input-border-radius);
1961
- transition-timing-function:var(--t-ease-in-out);
1962
- transition-duration:var(--t-duration-200);
1963
- transition-property:var(--tds-radio-transition-property);
1964
- }
1965
-
1966
- :is(.tds-radio input[type="radio"]):hover:not(:disabled){
1967
- --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
1968
- --tds-radio-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
1969
- }
1970
-
1971
- :is(.tds-radio input[type="radio"]):focus-visible{
1972
- outline:var(--t-focus-ring-outline);
1973
- outline-offset:var(--t-focus-ring-offset);
1974
- }
1975
-
1976
- :is(.tds-radio input[type="radio"]):disabled{
1977
- pointer-events:none;
1978
- }
1979
-
1980
- @media (prefers-reduced-motion: reduce){
1981
-
1982
- .tds-radio input[type="radio"]{
1983
- --tds-radio-transition-property:none;
1984
- }
1985
- }
1986
-
1987
- .tds-radio:has(input:checked){
1988
- --tds-radio-input-background-color:var(--t-icon-color-inverted);
1989
- --tds-radio-input-border-color:var(--t-border-color-control-info);
1990
- --tds-radio-input-border-width:4px;
1991
- }
1992
-
1993
- .tds-radio:has(input:checked) input:hover:not(:disabled){
1994
- --tds-radio-input-background-color:var(--t-icon-color-inverted);
1995
- --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
1996
- }
1997
-
1998
- .tds-radio:has(input:user-invalid){
1999
- --tds-radio-input-border-color:var(--t-form-border-color-error);
2000
- }
2001
-
2002
- .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
2003
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
2004
- --tds-radio-input-background-color:var(--t-form-background-color-error);
2005
- }
2006
-
2007
- .tds-radio:has(input:disabled){
2008
- --tds-radio-input-background-color:var(--t-form-background-color-disabled);
2009
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
2010
-
2011
- --tds-radio-label-color:var(--t-form-color-disabled);
2012
- --tds-radio-description-color:var(--t-form-color-disabled);
2013
- --tds-radio-cursor:not-allowed;
2014
- }
2015
-
2016
- .tds-radio:has(input:disabled) input:checked{
2017
- --tds-radio-input-background-color:var(--t-form-background-color);
2018
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
2286
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
2019
2287
  }
2020
2288
 
2021
- .tds-radio-description{
2022
- display:flex;
2023
- grid-area:2 / 2;
2024
- gap:var(--t-spacing-half);
2025
- align-items:flex-start;
2026
- padding-inline-start:var(--t-spacing-1);
2027
- margin:0;
2028
- font-size:var(--tds-radio-description-font-size);
2029
- line-height:var(--tds-radio-description-line-height);
2030
- color:var(--tds-radio-description-color);
2031
- cursor:text;
2032
- }
2033
-
2034
- .tds-radio--sm{
2035
- --tds-radio-line-height:1.35;
2036
- --tds-radio-input-size:var(--t-element-size-sm);
2037
- --tds-radio-font-size:var(--t-font-size-sm);
2038
- --tds-radio-description-font-size:var(--t-font-size-xs);
2039
- --tds-radio-description-line-height:1.3;
2040
- }
2289
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
2290
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
2291
+ }
2041
2292
 
2293
+ :is(.tds-input textarea)::-webkit-scrollbar-corner{
2294
+ background:var(--tds-input-scrollbar-surface-color);
2295
+ }
2042
2296
 
2043
- :is(.tds-input input)::-webkit-search-decoration,:is(.tds-input input)::-webkit-search-cancel-button,:is(.tds-input input)::-webkit-search-results-button,:is(.tds-input input)::-webkit-search-results-decoration{
2044
- -webkit-appearance:none;
2045
- appearance:none;
2297
+ :is(.tds-input textarea)::-webkit-resizer{
2298
+ background:var(--tds-input-resizer-icon) no-repeat;
2299
+ background-position:right bottom;
2300
+ background-size:var(--tds-input-resizer-size) var(--tds-input-resizer-size);
2046
2301
  }
2047
2302
 
2048
- [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
2049
- inline-size:1em;
2050
- block-size:2em;
2303
+ :is(.tds-input textarea)::-webkit-scrollbar-track{
2304
+ margin-block:var(--tds-input-scrollbar-track-margin-block);
2305
+ cursor:default;
2051
2306
  }
2052
- @supports (field-sizing: content){
2053
- .tds-input--auto-width{
2054
- inline-size:-moz-fit-content;
2055
- inline-size:fit-content;
2056
- min-inline-size:min(100%, 122px);
2057
- }
2058
2307
 
2059
- .tds-input--auto-width input{
2060
- field-sizing:content;
2061
- inline-size:auto;
2308
+ @supports (-moz-appearance: none){
2309
+ :is(.tds-input textarea){
2310
+ scrollbar-color:var(--tds-input-scrollbar-thumb-color-default) var(--tds-input-scrollbar-surface-color);
2311
+ scrollbar-width:thin;
2312
+ }
2313
+
2314
+ @media (hover){
2315
+ :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
2316
+ scrollbar-color:var(--tds-input-scrollbar-thumb-color-hover) var(--tds-input-scrollbar-surface-color);
2317
+ }
2318
+ }
2319
+ }
2062
2320
  }
2063
- }
2064
2321
 
2065
2322
  .tds-radio-group{
2066
2323
  --tds-radio-group-font-size:var(--t-font-size-md);
@@ -2145,144 +2402,133 @@ a.tds-dropdown-item:is(:hover, :active){
2145
2402
  --tds-radio-group-description-line-height:1.3;
2146
2403
  }
2147
2404
 
2148
- .tds-toggle-switch{
2149
- --tds-toggle-switch-font-size:var(--t-font-size-md);
2150
- --tds-toggle-switch-cursor:pointer;
2151
- --tds-toggle-switch-display:inline-grid;
2152
- --tds-toggle-switch-line-height:1.4;
2153
-
2154
- --tds-toggle-switch-label-color:var(--t-form-color);
2405
+ .tds-search-input-control{
2406
+ --tds-search-input-outline-color:rgb(from var(--t-focus-ring-color) r g b / 0);
2407
+ --tds-search-input-outline-offset:0;
2408
+ --tds-search-input-cursor:text;
2155
2409
 
2156
- --tds-toggle-switch-track-width:var(--t-container-size-md);
2157
- --tds-toggle-switch-track-outline:none;
2158
- --tds-toggle-switch-track-height:var(--t-container-size-xs);
2159
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color);
2160
- --tds-toggle-switch-track-transition:background-color var(--t-duration-100) var(--t-ease-in-out);
2410
+ display:flex;
2411
+ gap:var(--tds-field-padding-inline);
2412
+ align-items:center;
2413
+ inline-size:100%;
2414
+ min-block-size:var(--tds-field-min-height);
2415
+ padding-inline:var(--tds-field-padding-inline);
2416
+ font-size:var(--tds-field-font-size);
2417
+ color:var(--tds-field-color);
2418
+ cursor:var(--tds-search-input-cursor);
2419
+ outline:var(--t-focus-ring-width) solid transparent;
2420
+ outline-color:var(--tds-search-input-outline-color);
2421
+ outline-offset:var(--tds-search-input-outline-offset);
2422
+ background-color:var(--tds-field-background-color);
2423
+ border:var(--t-form-border-width) solid var(--tds-field-border-color);
2424
+ border-radius:var(--t-form-border-radius);
2425
+ transition-timing-function:var(--t-ease-in-out);
2426
+ transition-duration:var(--t-duration-200);
2427
+ transition-property:background-color, border-color, outline-color, outline-offset;
2428
+ }
2161
2429
 
2162
- --tds-toggle-switch-thumb-size:var(--t-element-size-md);
2163
- --tds-toggle-switch-thumb-transform:translateX(0);
2164
- --tds-toggle-switch-thumb-transition:transform var(--t-duration-200) var(--t-ease-in-out);
2430
+ .tds-search-input-control:hover:not(:has(input:focus),:has(:disabled,[readonly])){
2431
+ border-color:var(--tds-field-border-color-hover);
2432
+ }
2165
2433
 
2166
- --tds-toggle-switch-description-font-size:var(--t-font-size-sm);
2167
- --tds-toggle-switch-description-line-height:1.35;
2168
- --tds-toggle-switch-description-color:var(--t-text-color-secondary);
2169
- position:relative;
2434
+ .tds-search-input-control:has(input:focus){
2435
+ --tds-search-input-outline-color:var(--t-focus-ring-color);
2436
+ --tds-search-input-outline-offset:var(--t-focus-ring-offset);
2170
2437
 
2171
- display:var(--tds-toggle-switch-display);
2172
- grid-template-columns:auto;
2173
- grid-auto-columns:1fr;
2174
- gap:var(--t-spacing-fourth) 0;
2175
- -webkit-user-select:none;
2176
- -moz-user-select:none;
2177
- user-select:none;
2178
- }
2438
+ border-color:var(--t-form-border-color-focus);
2439
+ }
2179
2440
 
2180
- .tds-toggle-switch input[type="checkbox"]{
2181
- position:absolute;
2182
- width:var(--tds-toggle-switch-track-width);
2183
- height:var(--tds-toggle-switch-track-height);
2184
- margin:0;
2441
+ .tds-search-input-control input{
2442
+ flex:1;
2443
+ min-inline-size:0;
2444
+ padding:0;
2445
+ overflow:hidden;
2446
+ text-overflow:ellipsis;
2447
+ font-family:inherit;
2448
+ font-size:inherit;
2449
+ color:inherit;
2450
+ white-space:nowrap;
2185
2451
  -webkit-appearance:none;
2186
2452
  -moz-appearance:none;
2187
2453
  appearance:none;
2188
- cursor:var(--tds-toggle-switch-cursor);
2189
- outline:var(--tds-toggle-switch-track-outline);
2190
- outline-offset:var(--t-focus-ring-offset);
2454
+ outline:0;
2191
2455
  background-color:transparent;
2192
2456
  border:0;
2193
- border-radius:var(--t-border-radius-round);
2194
2457
  }
2195
2458
 
2196
- :is(.tds-toggle-switch input[type="checkbox"]):focus-visible{
2197
- --tds-toggle-switch-track-outline:var(--t-focus-ring-outline);
2459
+ :is(.tds-search-input-control input)::-moz-placeholder{
2460
+ color:var(--tds-field-placeholder-color);
2461
+ -moz-user-select:none;
2462
+ user-select:none;
2198
2463
  }
2199
2464
 
2200
- .tds-toggle-switch label{
2201
- display:inline-flex;
2202
- grid-area:1 / 2;
2203
- padding-inline-start:var(--t-spacing-1);
2204
- margin-top:-.09375em;
2205
- font-size:var(--tds-toggle-switch-font-size);
2206
- font-weight:var(--t-font-weight-normal);
2207
- line-height:var(--tds-toggle-switch-line-height);
2208
- color:var(--tds-toggle-switch-label-color);
2209
- cursor:var(--tds-toggle-switch-cursor);
2210
- }
2465
+ :is(.tds-search-input-control input)::placeholder{
2466
+ color:var(--tds-field-placeholder-color);
2467
+ -webkit-user-select:none;
2468
+ -moz-user-select:none;
2469
+ user-select:none;
2470
+ }
2211
2471
 
2212
- .tds-toggle-switch:not(:has(input:disabled)):has(input:hover){
2213
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-hover);
2472
+ :is(.tds-search-input-control input)::-webkit-search-decoration,:is(.tds-search-input-control input)::-webkit-search-cancel-button,:is(.tds-search-input-control input)::-webkit-search-results-button,:is(.tds-search-input-control input)::-webkit-search-results-decoration{
2473
+ -webkit-appearance:none;
2474
+ appearance:none;
2475
+ }
2476
+
2477
+ .tds-search-input-control .tds-search-input-icon{
2478
+ flex-shrink:0;
2479
+ inline-size:1em;
2480
+ color:var(--t-icon-color-dim);
2214
2481
  }
2215
2482
 
2216
- .tds-toggle-switch:has(input:checked){
2217
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on);
2218
- --tds-toggle-switch-thumb-transform:translateX(calc(var(--tds-toggle-switch-track-width) - var(--tds-toggle-switch-thumb-size) - var(--t-spacing-half)));
2483
+ .tds-search-input-control .tds-search-input-clear-icon{
2484
+ inline-size:calc(var(--tds-field-font-size) * .8);
2485
+ block-size:calc(var(--tds-field-font-size) * .8);
2219
2486
  }
2220
2487
 
2221
- .tds-toggle-switch:has(input:checked):not(:has(input:disabled)):has(input:hover){
2222
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on-hover);
2223
- }
2488
+ .tds-search-input-control .tds-btn{
2489
+ --tds-btn-color:var(--t-icon-color-dim);
2490
+ --tds-btn-padding-truncated-x:0;
2491
+ --tds-search-input-clear-button-visibility:hidden;
2224
2492
 
2225
- .tds-toggle-switch:has(input:disabled){
2226
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-disabled);
2227
- --tds-toggle-switch-label-color:var(--t-form-color-disabled);
2228
- --tds-toggle-switch-description-color:var(--t-form-color-disabled);
2229
- --tds-toggle-switch-cursor:not-allowed;
2493
+ visibility:var(--tds-search-input-clear-button-visibility);
2494
+ flex-shrink:0;
2230
2495
  }
2231
2496
 
2232
- .tds-toggle-switch-track{
2233
- position:relative;
2234
- flex-shrink:0;
2235
- width:var(--tds-toggle-switch-track-width);
2236
- height:var(--tds-toggle-switch-track-height);
2237
- background-color:var(--tds-toggle-switch-track-background-color);
2238
- border-radius:var(--t-border-radius-round);
2239
- transition:var(--tds-toggle-switch-track-transition);
2240
- }
2241
-
2242
- .tds-toggle-switch-track::before{
2243
- position:absolute;
2244
- top:var(--t-spacing-fourth);
2245
- left:var(--t-spacing-fourth);
2246
- width:var(--tds-toggle-switch-thumb-size);
2247
- height:var(--tds-toggle-switch-thumb-size);
2248
- content:"";
2249
- background-color:#fff;
2250
- border-radius:var(--t-border-radius-round);
2251
- transform:var(--tds-toggle-switch-thumb-transform);
2252
- transition:var(--tds-toggle-switch-thumb-transition);
2497
+ .tds-search-input-control:has(input:is(:user-invalid,[aria-invalid="true"])){
2498
+ --tds-field-background-color:var(--t-form-background-color-error);
2499
+ --tds-field-border-color:var(--t-form-border-color-error);
2500
+ --tds-field-border-color-hover:var(--t-form-border-color-error-hover);
2253
2501
  }
2254
2502
 
2255
- @media (prefers-reduced-motion: reduce){
2503
+ .tds-search-input-control:has(:disabled){
2504
+ --tds-field-border-color:var(--t-form-border-color-disabled);
2505
+ --tds-field-background-color:var(--t-form-background-color-disabled);
2506
+ --tds-field-color:var(--t-form-color-disabled);
2507
+ --tds-search-input-cursor:not-allowed;
2508
+ }
2256
2509
 
2257
- .tds-toggle-switch-track{
2258
- --tds-toggle-switch-track-transition:none;
2259
- --tds-toggle-switch-thumb-transition:none;
2260
- }
2510
+ .tds-search-input-control:has([readonly]){
2511
+ --tds-field-border-color:var(--t-form-border-color-readonly);
2512
+ --tds-field-border-color-hover:var(--t-form-border-color-readonly);
2513
+ --tds-field-background-color:var(--t-form-background-color-readonly);
2514
+ --tds-field-color:var(--t-form-color-readonly);
2261
2515
  }
2262
2516
 
2263
- .tds-toggle-switch-description{
2264
- display:flex;
2265
- grid-area:2 / 2;
2266
- align-items:flex-start;
2267
- padding-inline-start:var(--t-spacing-1);
2268
- margin:0;
2269
- font-size:var(--tds-toggle-switch-description-font-size);
2270
- line-height:var(--tds-toggle-switch-description-line-height);
2271
- color:var(--tds-toggle-switch-description-color);
2272
- cursor:text;
2273
- }
2517
+ .tds-search-input-control:has([readonly]):has(input:focus){
2518
+ border-color:var(--t-form-border-color-hover);
2519
+ }
2274
2520
 
2275
- .tds-toggle-switch--sm{
2276
- --tds-toggle-switch-font-size:var(--t-font-size-sm);
2277
- --tds-toggle-switch-line-height:1.35;
2278
- --tds-toggle-switch-track-height:var(--t-element-size-lg);
2279
- --tds-toggle-switch-thumb-size:var(--t-element-size-sm);
2280
- --tds-toggle-switch-description-font-size:var(--t-font-size-xs);
2281
- --tds-toggle-switch-description-line-height:1.3;
2521
+ @media (prefers-reduced-motion: reduce){
2522
+
2523
+ .tds-search-input-control{
2524
+ transition-property:none;
2282
2525
  }
2526
+ }
2283
2527
 
2284
- .tds-toggle-switch--hide-label{
2285
- --tds-toggle-switch-display:inline-flex;
2528
+ .tds-search-input-control--has-value:is(:hover, :has(input:focus)):not(
2529
+ :has(:disabled, [readonly])
2530
+ ) .tds-btn{
2531
+ --tds-search-input-clear-button-visibility:visible;
2286
2532
  }
2287
2533
 
2288
2534
  .tds-input{
@@ -2380,350 +2626,120 @@ a.tds-dropdown-item:is(:hover, :active){
2380
2626
  content:"*";
2381
2627
  }
2382
2628
 
2383
- .tds-input:where(:has(:is(input,textarea):disabled)){
2384
- --tds-input-border-color:var(--t-form-border-color-disabled);
2385
- --tds-input-background-color:var(--t-form-background-color-disabled);
2386
- --tds-input-color:var(--t-form-color-disabled);
2387
- }
2388
-
2389
- .tds-input:where(:has(:is(input,textarea):disabled)) :is(input,textarea){
2390
- cursor:not-allowed;
2391
- }
2392
-
2393
- .tds-input:where(:has(:is(input,textarea)[readonly])){
2394
- --tds-input-border-color:var(--t-form-border-color-readonly);
2395
- --tds-input-background-color:var(--t-form-background-color-readonly);
2396
- }
2397
-
2398
- .tds-input:where(:has(:is(input,textarea)[readonly])) :is(input,textarea):focus{
2399
- border-color:var(--tds-input-border-color-hover);
2400
- }
2401
-
2402
- .tds-input.tds-input--lg{
2403
- --tds-input-min-height:var(--t-container-size-lg);
2404
- --tds-input-font-size:var(--t-font-size-lg);
2405
- }
2406
-
2407
- .tds-input-description{
2408
- display:flex;
2409
- gap:var(--t-spacing-half);
2410
- align-items:flex-start;
2411
- margin:0;
2412
- font-size:var(--t-font-size-sm);
2413
- line-height:1.35;
2414
- color:var(--tds-input-description-color, var(--t-text-color-secondary));
2415
- cursor:text;
2416
- }
2417
-
2418
- .tds-input-description .tds-input-description-invalid-icon{
2419
- display:var(--tds-input-description-invalid-icon-display, none);
2420
- flex-shrink:0;
2421
- margin-block-start:calc(.5lh - .5em);
2422
- line-height:1.35;
2423
- }
2424
-
2425
- .tds-loading-spinner{
2426
- position:absolute;
2427
- right:0;
2428
- left:0;
2429
- visibility:var(--tds-loading-spinner-visibility, hidden);
2430
- width:var(--tds-loading-spinner-size, 1.25em);
2431
- height:var(--tds-loading-spinner-size, 1.25em);
2432
- margin:auto;
2433
- border:var(--tds-loading-spinner-track-width, 4px) solid var(--tds-loading-spinner-track-color, var(--t-fill-color-transparency-dark-020));
2434
- border-top-color:var(--tds-loading-spinner-color, currentcolor);
2435
- border-radius:50%;
2436
- animation:spinner-rotate 500ms infinite linear;
2437
- animation-play-state:var(--tds-loading-spinner-animation-play-state, paused);
2438
- }
2439
-
2440
- @keyframes spinner-rotate{
2441
- to{
2442
- transform:rotate(360deg);
2443
- }
2444
- }
2445
-
2446
- @media (prefers-reduced-motion: reduce){
2447
- [class*="--loading"] .tds-loading-spinner{
2448
- --tds-loading-spinner-animation-play-state:paused;
2449
- }
2450
- }
2451
-
2452
- @layer t-critical{
2453
- tds-page-header:not(.hydrated){
2454
- display:none;
2455
- }
2456
- }
2457
-
2458
- @layer t-component{
2459
- .tds-page-header{
2460
- --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
2461
- --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
2462
- --tds-page-header-color:var(--t-text-color);
2463
- --tds-page-header-bottom-border-color:transparent;
2464
- --tds-page-header-headline-color:var(--t-text-color-headline);
2465
- --tds-page-header-headline-font-size:var(--t-font-size-2xl);
2466
- --tds-page-header-padding-x:var(--t-spacing-2);
2467
- --tds-page-header-padding-y:var(--t-spacing-2);
2468
- --tds-page-header-nav-padding-x:var(--tds-page-header-padding-x, var(--t-spacing-3));
2469
- --tds-page-header-nav-gap:var(--t-spacing-1);
2470
- --tds-page-header-nav-background:linear-gradient(180deg, var(--tds-page-header-nav-background-start, rgba(0, 0, 0, 0)) 0%, var(--tds-page-header-nav-background-end, rgba(0, 0, 0, .1)) 100%);
2471
- --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
2472
- --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
2473
- --tds-page-header-nav-item-color:var(--t-text-color-secondary);
2474
- --tds-page-header-nav-item-background-color:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 35%);
2475
- --tds-page-header-nav-item-border-width:1px;
2476
-
2477
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
2478
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color);
2479
-
2480
- --tds-page-header-nav-item-color-hover:var(--t-text-color);
2481
- --tds-page-header-nav-item-background-color-hover:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 20%);
2482
- --tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
2483
-
2484
- --tds-page-header-nav-item-background-color-active:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 10%);
2485
- --tds-page-header-nav-item-border-color-active:var(--tds-page-header-nav-item-background-color-active);
2486
-
2487
- --tds-page-header-nav-item-color-disabled:var(--t-text-color-disabled);
2488
- --tds-page-header-nav-item-background-color-disabled:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 50%);
2489
- --tds-page-header-nav-item-border-color-disabled:var(--tds-page-header-nav-item-background-color-disabled);
2490
-
2491
- --tds-page-header-nav-item-color-selected:var(--t-text-color);
2492
- --tds-page-header-nav-item-background-color-selected:var(--t-surface-color-canvas);
2493
- --tds-page-header-nav-item-border-color-selected:var(--tds-page-header-nav-item-background-color-selected);
2494
- --tds-page-header-nav-item-border-bottom-color-selected:var(--tds-page-header-nav-item-background-color-selected);
2495
- --tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning);
2496
- }
2497
-
2498
- .tds-page-header--profile{
2499
- --tds-page-header-padding-y:20px;
2500
- }
2501
-
2502
- @supports (color: light-dark(#fff, #000)){
2503
- .tds-page-header{
2504
- --tds-page-header-nav-background-start:light-dark(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0));
2505
- --tds-page-header-nav-background-end:light-dark(rgba(0, 0, 0, .05), rgba(255, 255, 255, .1));
2506
- }
2507
- }
2508
-
2509
- @media (min-width: 600px){
2510
- .tds-page-header{
2511
- --tds-page-header-background-color:var(--t-surface-color-canvas);
2512
- --tds-page-header-color:var(--t-text-color-secondary);
2513
- --tds-page-header-bottom-border-color:var(--t-border-color);
2514
- --tds-page-header-padding-x:var(--t-spacing-3);
2515
- --tds-page-header-headline-font-size:var(--t-font-size-3xl);
2516
- --tds-page-header-nav-gap:var(--t-spacing-half);
2517
- --tds-page-header-nav-background:transparent;
2518
- --tds-page-header-nav-item-padding-x:var(--t-spacing-2);
2519
- --tds-page-header-nav-item-border-width:1px;
2520
- --tds-page-header-nav-item-color:var(--t-text-color);
2521
- --tds-page-header-nav-item-background-color:var(--t-fill-color-neutral-070);
2522
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-bottom-border-color);
2523
- --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-060);
2524
- --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-050);
2525
- --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
2526
- --tds-page-header-nav-item-border-color-selected:var(--t-border-color);
2527
- }
2528
- }
2529
- }
2530
-
2531
- .tds-page-header{
2532
- display:flex;
2533
- flex-direction:column;
2534
- padding-top:var(--tds-page-header-padding-y);
2535
- color:var(--tds-page-header-color);
2536
- background:var(--tds-page-header-background-color);
2537
- border-bottom:1px solid var(--tds-page-header-bottom-border-color);
2538
- }
2539
-
2540
- .tds-page-header:not(.has-nav){
2541
- padding-bottom:var(--tds-page-header-padding-y);
2542
- }
2543
-
2544
- .tds-page-header.inactive{
2545
- background:var(--tds-page-header-background-color-inactive);
2546
- }
2547
-
2548
- .tds-page-header :is([slot="actions"],.tds-page-header__actions){
2549
- width:100%;
2550
- }
2551
-
2552
- .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
2553
- display:flex;
2554
- flex-flow:row wrap;
2555
- gap:var(--t-spacing-half) var(--t-spacing-1);
2556
- align-items:flex-start;
2557
- justify-content:flex-start;
2558
- min-width:0;
2559
- }
2560
-
2561
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)):not(:has(ul)),:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) ul{
2562
- display:flex;
2563
- gap:var(--tds-page-header-nav-gap);
2564
- padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
2565
- margin:0 0 -1px;
2566
- overflow:auto;
2567
- list-style:none;
2568
- background:var(--tds-page-header-nav-background);
2569
- }
2570
-
2571
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button){
2572
- position:relative;
2573
- display:inline-flex;
2574
- padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
2575
- font-size:var(--t-font-size-sm);
2576
- line-height:22px;
2577
- color:var(--tds-page-header-nav-item-color);
2578
- white-space:nowrap;
2579
- text-decoration:none;
2580
- -webkit-appearance:none;
2581
- -moz-appearance:none;
2582
- appearance:none;
2583
- cursor:pointer;
2584
- outline-offset:-2px;
2585
- background-color:var(--tds-page-header-nav-item-background-color);
2586
- background-clip:padding-box;
2587
- border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
2588
- border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
2589
- border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
2590
- }
2591
-
2592
- .selected:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)){
2593
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-selected);
2594
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-selected);
2595
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-selected);
2596
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-selected);
2597
- }
2598
-
2599
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):hover{
2600
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
2601
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
2602
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
2603
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-hover);
2604
- }
2605
-
2606
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):active{
2607
- background-color:var(--tds-page-header-nav-item-background-color-active);
2608
- border-color:var(--tds-page-header-nav-item-border-color-active);
2609
- border-bottom-color:var(--tds-page-header-nav-item-background-color-active);
2610
- }
2611
-
2612
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):disabled{
2613
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-disabled);
2614
- color:var(--tds-page-header-nav-item-color-disabled);
2615
- cursor:not-allowed;
2616
- background-color:var(--tds-page-header-nav-item-background-color-disabled);
2617
- opacity:1;
2618
- }
2619
-
2620
- @media (min-width: 600px){
2621
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected)::after{
2622
- position:absolute;
2623
- inset:auto -1px -1px;
2624
- height:1px;
2625
- pointer-events:none;
2626
- content:"";
2627
- background-color:var(--tds-page-header-bottom-border-color);
2628
- }
2629
- }
2630
-
2631
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
2632
- position:relative;
2629
+ .tds-input:where(:has(:is(input,textarea):disabled)){
2630
+ --tds-input-border-color:var(--t-form-border-color-disabled);
2631
+ --tds-input-background-color:var(--t-form-background-color-disabled);
2632
+ --tds-input-color:var(--t-form-color-disabled);
2633
+ }
2634
+
2635
+ .tds-input:where(:has(:is(input,textarea):disabled)) :is(input,textarea){
2636
+ cursor:not-allowed;
2633
2637
  }
2634
2638
 
2635
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator)) :is(a,button){
2636
- -webkit-mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
2637
- mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
2638
- }
2639
+ .tds-input:where(:has(:is(input,textarea)[readonly])){
2640
+ --tds-input-border-color:var(--t-form-border-color-readonly);
2641
+ --tds-input-background-color:var(--t-form-background-color-readonly);
2642
+ }
2639
2643
 
2640
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::before,:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
2641
- position:absolute;
2642
- top:-5px;
2643
- right:-2px;
2644
- width:10px;
2645
- height:10px;
2646
- content:"";
2647
- background:var(--tds-page-header-nav-item-indicator-color);
2648
- border-radius:50%;
2649
- }
2644
+ .tds-input:where(:has(:is(input,textarea)[readonly])) :is(input,textarea):focus{
2645
+ border-color:var(--tds-input-border-color-hover);
2646
+ }
2650
2647
 
2651
- @media (prefers-reduced-motion: no-preference){
2652
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
2653
- animation:indicator-pulse 1.25s ease infinite;
2654
- }
2655
- }
2648
+ .tds-input.tds-input--lg{
2649
+ --tds-input-min-height:var(--t-container-size-lg);
2650
+ --tds-input-font-size:var(--t-font-size-lg);
2651
+ }
2656
2652
 
2657
- .tds-page-header__title-bar{
2653
+ .tds-input-description{
2658
2654
  display:flex;
2659
- flex-direction:column;
2660
- gap:var(--t-spacing-2) var(--t-spacing-1);
2655
+ gap:var(--t-spacing-half);
2661
2656
  align-items:flex-start;
2662
- justify-content:space-between;
2663
- padding:0 var(--tds-page-header-padding-x);
2657
+ margin:0;
2658
+ font-size:var(--t-font-size-sm);
2659
+ line-height:1.35;
2660
+ color:var(--tds-input-description-color, var(--t-text-color-secondary));
2661
+ cursor:text;
2664
2662
  }
2665
2663
 
2666
- .tds-page-header--profile > .tds-page-header__title-bar{
2667
- align-items:center;
2664
+ .tds-input-description .tds-input-description-invalid-icon{
2665
+ display:var(--tds-input-description-invalid-icon-display, none);
2666
+ flex-shrink:0;
2667
+ margin-block-start:calc(.5lh - .5em);
2668
+ line-height:1.35;
2668
2669
  }
2669
2670
 
2670
- .tds-page-header__primary{
2671
- width:100%;
2671
+ .tds-tooltip{
2672
+ --tds-tooltip-arrow-depth:var(--tds-tooltip-arrow-depth-raw);
2673
+ --tds-tooltip-arrow-size:var(--tds-tooltip-arrow-size-raw);
2674
+ --tds-tooltip-visibility:hidden;
2675
+
2676
+ display:flex;
2677
+ visibility:var(--tds-tooltip-visibility);
2678
+ flex-direction:column;
2679
+ align-items:flex-start;
2680
+ max-inline-size:15rem;
2681
+ padding:var(--t-spacing-half) var(--t-spacing-1);
2682
+ font-size:var(--t-font-size-sm);
2683
+ color:var(--t-text-color-inverted);
2684
+ background:var(--t-fill-color-tooltip);
2685
+ border-radius:var(--t-border-radius-md);
2686
+ box-shadow:0 2px 4px 0 rgba(0, 0, 0, .15);
2672
2687
  }
2673
2688
 
2674
- .tds-page-header__primary h1{
2675
- margin:0;
2676
- font-size:var(--tds-page-header-headline-font-size);
2677
- font-weight:var(--t-font-weight-normal);
2678
- line-height:32px;
2679
- color:var(--tds-page-header-headline-color);
2680
- overflow-wrap:break-word;
2689
+ .tds-tooltip[data-placement="top"]{
2690
+ --tds-tooltip-arrow-top:100%;
2691
+ --tds-tooltip-arrow-width:var(--tds-tooltip-arrow-size);
2692
+ --tds-tooltip-arrow-height:var(--tds-tooltip-arrow-depth);
2693
+ --tds-tooltip-arrow-translate:translateX(-50%);
2694
+ --tds-tooltip-arrow-rotate:rotate(180deg);
2681
2695
  }
2682
2696
 
2683
- @media (min-width: 960px){
2684
- .tds-page-header__primary{
2685
- flex:1 1 max-content;
2686
- width:auto;
2687
- min-width:0;
2688
- max-width:100%;
2697
+ .tds-tooltip[data-placement="bottom"]{
2698
+ --tds-tooltip-arrow-bottom:100%;
2699
+ --tds-tooltip-arrow-width:var(--tds-tooltip-arrow-size);
2700
+ --tds-tooltip-arrow-height:var(--tds-tooltip-arrow-depth);
2701
+ --tds-tooltip-arrow-translate:translateX(-50%);
2702
+ --tds-tooltip-arrow-rotate:rotate(0deg);
2689
2703
  }
2690
2704
 
2691
- .tds-page-header__title-bar,
2692
- .tds-page-header--profile .tds-page-header__title-bar{
2693
- flex-flow:row nowrap;
2694
- row-gap:12px;
2695
- align-items:flex-start;
2705
+ .tds-tooltip[data-placement="left"]{
2706
+ --tds-tooltip-arrow-left:100%;
2707
+ --tds-tooltip-arrow-width:var(--tds-tooltip-arrow-depth);
2708
+ --tds-tooltip-arrow-height:var(--tds-tooltip-arrow-size);
2709
+ --tds-tooltip-arrow-translate:translateY(-50%);
2710
+ --tds-tooltip-arrow-rotate:rotate(90deg);
2696
2711
  }
2697
- .tds-page-header :is([slot="actions"],.tds-page-header__actions){
2698
- width:auto;
2699
- }
2700
2712
 
2701
- .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
2702
- justify-content:flex-end;
2703
- }
2704
- }
2713
+ .tds-tooltip[data-placement="right"]{
2714
+ --tds-tooltip-arrow-right:100%;
2715
+ --tds-tooltip-arrow-width:var(--tds-tooltip-arrow-depth);
2716
+ --tds-tooltip-arrow-height:var(--tds-tooltip-arrow-size);
2717
+ --tds-tooltip-arrow-translate:translateY(-50%);
2718
+ --tds-tooltip-arrow-rotate:rotate(-90deg);
2719
+ }
2705
2720
 
2706
- .tds-page-header-phone,
2707
- .tds-page-header-email{
2708
- color:var(--tds-page-header-color);
2709
- white-space:nowrap;
2710
- }
2711
- .tds-page-header-email{
2712
- max-width:100%;
2713
- overflow:hidden;
2714
- text-overflow:ellipsis;
2721
+ .tds-tooltip--open{
2722
+ --tds-tooltip-visibility:visible;
2715
2723
  }
2716
2724
 
2717
- @keyframes indicator-pulse{
2718
- 0%{
2719
- opacity:.3;
2720
- transform:scale(.9);
2721
- }
2725
+ .tds-tooltip-arrow{
2726
+ position:absolute;
2727
+ inset:var(--tds-tooltip-arrow-top, auto) var(--tds-tooltip-arrow-right, auto) var(--tds-tooltip-arrow-bottom, auto) var(--tds-tooltip-arrow-left, auto);
2728
+ display:flex;
2729
+ align-items:center;
2730
+ justify-content:center;
2731
+ width:var(--tds-tooltip-arrow-width);
2732
+ height:var(--tds-tooltip-arrow-height);
2733
+ pointer-events:none;
2734
+ transform:var(--tds-tooltip-arrow-translate);
2735
+ }
2722
2736
 
2723
- 100%{
2724
- opacity:0;
2725
- transform:scale(1.75);
2726
- }
2737
+ .tds-tooltip-arrow-icon{
2738
+ flex-shrink:0;
2739
+ width:var(--tds-tooltip-arrow-size);
2740
+ height:var(--tds-tooltip-arrow-depth);
2741
+ fill:var(--t-fill-color-tooltip);
2742
+ transform:var(--tds-tooltip-arrow-rotate);
2727
2743
  }
2728
2744
 
2729
2745
  @layer t-critical, t-component;
@@ -4296,171 +4312,68 @@ a.tds-dropdown-item:is(:hover, :active){
4296
4312
  [data-padding-block-xl="6"]{ padding-block:var(--t-spacing-6); }
4297
4313
  [data-padding-block-xl="7"]{ padding-block:var(--t-spacing-7); }
4298
4314
 
4299
- [data-padding-inline-xl="0"]{ padding-inline:0; }
4300
- [data-padding-inline-xl="0.25"]{ padding-inline:var(--t-spacing-fourth); }
4301
- [data-padding-inline-xl="0.5"]{ padding-inline:var(--t-spacing-half); }
4302
- [data-padding-inline-xl="1"]{ padding-inline:var(--t-spacing-1); }
4303
- [data-padding-inline-xl="1.5"]{ padding-inline:var(--t-spacing-1-half); }
4304
- [data-padding-inline-xl="2"]{ padding-inline:var(--t-spacing-2); }
4305
- [data-padding-inline-xl="3"]{ padding-inline:var(--t-spacing-3); }
4306
- [data-padding-inline-xl="4"]{ padding-inline:var(--t-spacing-4); }
4307
- [data-padding-inline-xl="5"]{ padding-inline:var(--t-spacing-5); }
4308
- [data-padding-inline-xl="6"]{ padding-inline:var(--t-spacing-6); }
4309
- [data-padding-inline-xl="7"]{ padding-inline:var(--t-spacing-7); }
4310
- }
4311
-
4312
- .tds-search-input-control{
4313
- --tds-search-input-outline-color:rgb(from var(--t-focus-ring-color) r g b / 0);
4314
- --tds-search-input-outline-offset:0;
4315
- --tds-search-input-cursor:text;
4316
-
4317
- display:flex;
4318
- gap:var(--tds-field-padding-inline);
4319
- align-items:center;
4320
- inline-size:100%;
4321
- min-block-size:var(--tds-field-min-height);
4322
- padding-inline:var(--tds-field-padding-inline);
4323
- font-size:var(--tds-field-font-size);
4324
- color:var(--tds-field-color);
4325
- cursor:var(--tds-search-input-cursor);
4326
- outline:var(--t-focus-ring-width) solid transparent;
4327
- outline-color:var(--tds-search-input-outline-color);
4328
- outline-offset:var(--tds-search-input-outline-offset);
4329
- background-color:var(--tds-field-background-color);
4330
- border:var(--t-form-border-width) solid var(--tds-field-border-color);
4331
- border-radius:var(--t-form-border-radius);
4332
- transition-timing-function:var(--t-ease-in-out);
4333
- transition-duration:var(--t-duration-200);
4334
- transition-property:background-color, border-color, outline-color, outline-offset;
4335
- }
4336
-
4337
- .tds-search-input-control:hover:not(:has(input:focus),:has(:disabled,[readonly])){
4338
- border-color:var(--tds-field-border-color-hover);
4339
- }
4340
-
4341
- .tds-search-input-control:has(input:focus){
4342
- --tds-search-input-outline-color:var(--t-focus-ring-color);
4343
- --tds-search-input-outline-offset:var(--t-focus-ring-offset);
4344
-
4345
- border-color:var(--t-form-border-color-focus);
4346
- }
4347
-
4348
- .tds-search-input-control input{
4349
- flex:1;
4350
- min-inline-size:0;
4351
- padding:0;
4352
- overflow:hidden;
4353
- text-overflow:ellipsis;
4354
- font-family:inherit;
4355
- font-size:inherit;
4356
- color:inherit;
4357
- white-space:nowrap;
4358
- -webkit-appearance:none;
4359
- -moz-appearance:none;
4360
- appearance:none;
4361
- outline:0;
4362
- background-color:transparent;
4363
- border:0;
4364
- }
4365
-
4366
- :is(.tds-search-input-control input)::-moz-placeholder{
4367
- color:var(--tds-field-placeholder-color);
4368
- -moz-user-select:none;
4369
- user-select:none;
4370
- }
4371
-
4372
- :is(.tds-search-input-control input)::placeholder{
4373
- color:var(--tds-field-placeholder-color);
4374
- -webkit-user-select:none;
4375
- -moz-user-select:none;
4376
- user-select:none;
4377
- }
4378
-
4379
- :is(.tds-search-input-control input)::-webkit-search-decoration,:is(.tds-search-input-control input)::-webkit-search-cancel-button,:is(.tds-search-input-control input)::-webkit-search-results-button,:is(.tds-search-input-control input)::-webkit-search-results-decoration{
4380
- -webkit-appearance:none;
4381
- appearance:none;
4382
- }
4383
-
4384
- .tds-search-input-control .tds-search-input-icon{
4385
- flex-shrink:0;
4386
- inline-size:1em;
4387
- color:var(--t-icon-color-dim);
4388
- }
4389
-
4390
- .tds-search-input-control .tds-search-input-clear-icon{
4391
- inline-size:calc(var(--tds-field-font-size) * .8);
4392
- block-size:calc(var(--tds-field-font-size) * .8);
4393
- }
4394
-
4395
- .tds-search-input-control .tds-btn{
4396
- --tds-btn-color:var(--t-icon-color-dim);
4397
- --tds-btn-padding-truncated-x:0;
4398
- --tds-search-input-clear-button-display:none;
4399
-
4400
- display:var(--tds-search-input-clear-button-display);
4401
- flex-shrink:0;
4402
- }
4403
-
4404
- .tds-search-input-control:has(input:is(:user-invalid,[aria-invalid="true"])){
4405
- --tds-field-background-color:var(--t-form-background-color-error);
4406
- --tds-field-border-color:var(--t-form-border-color-error);
4407
- --tds-field-border-color-hover:var(--t-form-border-color-error-hover);
4408
- }
4409
-
4410
- .tds-search-input-control:has(:disabled){
4411
- --tds-field-border-color:var(--t-form-border-color-disabled);
4412
- --tds-field-background-color:var(--t-form-background-color-disabled);
4413
- --tds-field-color:var(--t-form-color-disabled);
4414
- --tds-search-input-cursor:not-allowed;
4415
- }
4416
-
4417
- .tds-search-input-control:has([readonly]){
4418
- --tds-field-border-color:var(--t-form-border-color-readonly);
4419
- --tds-field-border-color-hover:var(--t-form-border-color-readonly);
4420
- --tds-field-background-color:var(--t-form-background-color-readonly);
4421
- --tds-field-color:var(--t-form-color-readonly);
4422
- }
4423
-
4424
- .tds-search-input-control:has([readonly]):has(input:focus){
4425
- border-color:var(--t-form-border-color-hover);
4426
- }
4427
-
4428
- @media (prefers-reduced-motion: reduce){
4429
-
4430
- .tds-search-input-control{
4431
- transition-property:none;
4432
- }
4433
- }
4434
-
4435
- .tds-search-input-control--has-value:is(:hover, :has(input:focus)):not(
4436
- :has(:disabled, [readonly])
4437
- ) .tds-btn{
4438
- --tds-search-input-clear-button-display:flex;
4315
+ [data-padding-inline-xl="0"]{ padding-inline:0; }
4316
+ [data-padding-inline-xl="0.25"]{ padding-inline:var(--t-spacing-fourth); }
4317
+ [data-padding-inline-xl="0.5"]{ padding-inline:var(--t-spacing-half); }
4318
+ [data-padding-inline-xl="1"]{ padding-inline:var(--t-spacing-1); }
4319
+ [data-padding-inline-xl="1.5"]{ padding-inline:var(--t-spacing-1-half); }
4320
+ [data-padding-inline-xl="2"]{ padding-inline:var(--t-spacing-2); }
4321
+ [data-padding-inline-xl="3"]{ padding-inline:var(--t-spacing-3); }
4322
+ [data-padding-inline-xl="4"]{ padding-inline:var(--t-spacing-4); }
4323
+ [data-padding-inline-xl="5"]{ padding-inline:var(--t-spacing-5); }
4324
+ [data-padding-inline-xl="6"]{ padding-inline:var(--t-spacing-6); }
4325
+ [data-padding-inline-xl="7"]{ padding-inline:var(--t-spacing-7); }
4439
4326
  }
4440
4327
 
4441
- .tds-data-table-wrapper{
4328
+ .tds-data-table{
4442
4329
  --tds-data-table-background-color:var(--t-surface-color-canvas);
4443
4330
  --tds-data-table-border-color:var(--t-border-color);
4444
4331
  --tds-data-table-column-background-color:var(--t-fill-color-neutral-090);
4445
4332
  --tds-data-table-cell-padding-inline:var(--t-spacing-2);
4446
4333
  --tds-data-table-cell-padding-block:var(--t-spacing-1-half);
4447
- position:relative;
4334
+ }
4335
+ .tds-data-table-frame{
4448
4336
  overflow:hidden;
4449
4337
 
4450
- background-color:var(--tds-data-table-column-background-color);
4451
4338
  border:1px solid var(--tds-data-table-border-color);
4452
4339
  border-radius:var(--t-border-radius);
4453
4340
  }
4454
- @supports (animation-timeline: scroll()){
4455
- .tds-data-table-wrapper--sticky-header{
4456
- overflow:clip;
4341
+ .tds-data-table-frame-header{
4342
+ display:flex;
4343
+ gap:var(--t-spacing-1-half);
4344
+ align-items:center;
4345
+ padding-block:var(--tds-data-table-cell-padding-block);
4346
+ padding-inline:var(--tds-data-table-cell-padding-inline);
4347
+ }
4348
+
4349
+ .tds-data-table-results-count{
4350
+ margin:0;
4351
+ font-size:var(--t-font-size-md);
4352
+ line-height:1;
4353
+ color:var(--t-text-color-secondary);
4354
+ }
4355
+ .tds-data-table-scroll-wrapper{
4356
+ position:relative;
4357
+ overflow:hidden;
4358
+ background-color:var(--tds-data-table-column-background-color);
4359
+ }
4360
+ .tds-data-table-scroll-wrapper:not(:first-child){
4361
+ border-top:1px solid var(--tds-data-table-border-color);
4457
4362
  }
4363
+ .tds-data-table-scroll{
4364
+ overflow-x:auto;
4365
+ scrollbar-color:var(--t-fill-color-transparency-dark-030) transparent;
4366
+ }
4367
+ @supports (animation-timeline: scroll()){
4368
+ .tds-data-table--sticky-header .tds-data-table-scroll-wrapper{
4369
+ overflow:clip;
4370
+ }
4458
4371
 
4459
- .tds-data-table-wrapper--sticky-header .tds-data-table-scroll{
4372
+ .tds-data-table--sticky-header .tds-data-table-scroll{
4460
4373
  overflow-y:clip;
4461
4374
  }
4462
4375
 
4463
- .tds-data-table-wrapper--sticky-header .tds-data-table-header{
4376
+ .tds-data-table--sticky-header .tds-data-table-header{
4464
4377
  z-index:1;
4465
4378
  animation-name:tds-data-table-sticky-header;
4466
4379
  animation-duration:auto;
@@ -4475,19 +4388,15 @@ a.tds-dropdown-item:is(:hover, :active){
4475
4388
  to{ transform:translateY(var(--_sticky-header-scroll-max, 0)); }
4476
4389
  }
4477
4390
  }
4478
- .tds-data-table-scroll{
4479
- overflow-x:auto;
4480
- scrollbar-color:var(--t-fill-color-transparency-dark-030) transparent;
4481
- }
4482
4391
 
4483
4392
  @supports (timeline-scope: --tds){
4484
- .tds-data-table-wrapper{
4393
+ .tds-data-table-scroll-wrapper{
4485
4394
  --tds-data-table-scroll-shadow-size:var(--t-spacing-1);
4486
4395
 
4487
4396
  timeline-scope:--tds-data-table-scroll-timeline;
4488
4397
  }
4489
4398
 
4490
- .tds-data-table-wrapper::before,.tds-data-table-wrapper::after{
4399
+ .tds-data-table-scroll-wrapper::before,.tds-data-table-scroll-wrapper::after{
4491
4400
  position:absolute;
4492
4401
  inset-block:0;
4493
4402
  z-index:1;
@@ -4501,14 +4410,14 @@ a.tds-dropdown-item:is(:hover, :active){
4501
4410
  animation-fill-mode:both;
4502
4411
  }
4503
4412
 
4504
- .tds-data-table-wrapper::before{
4413
+ .tds-data-table-scroll-wrapper::before{
4505
4414
  inset-inline-start:0;
4506
4415
  background:linear-gradient(to right, var(--t-shadow-overflow-color), transparent);
4507
4416
  animation-name:tds-data-table-scroll-shadow;
4508
4417
  animation-range:0 var(--tds-data-table-scroll-shadow-size);
4509
4418
  }
4510
4419
 
4511
- .tds-data-table-wrapper::after{
4420
+ .tds-data-table-scroll-wrapper::after{
4512
4421
  inset-inline-end:0;
4513
4422
  background:linear-gradient(to left, var(--t-shadow-overflow-color), transparent);
4514
4423
  animation-name:tds-data-table-scroll-shadow;
@@ -4525,7 +4434,7 @@ a.tds-dropdown-item:is(:hover, :active){
4525
4434
  to{ opacity:1; }
4526
4435
  }
4527
4436
  }
4528
- .tds-data-table{
4437
+ .tds-data-table-grid{
4529
4438
  width:100%;
4530
4439
  font-size:var(--t-font-size-md);
4531
4440
  color:var(--t-text-color);
@@ -4533,7 +4442,7 @@ a.tds-dropdown-item:is(:hover, :active){
4533
4442
  border-collapse:separate;
4534
4443
  background-color:var(--tds-data-table-background-color);
4535
4444
  }
4536
- .tds-data-table th,.tds-data-table td{
4445
+ .tds-data-table-grid th,.tds-data-table-grid td{
4537
4446
  white-space:nowrap;
4538
4447
  }
4539
4448
  .tds-data-table-column{
@@ -4672,39 +4581,95 @@ a.tds-dropdown-item:is(:hover, :active){
4672
4581
  .tds-data-table-cell--numeric{
4673
4582
  font-variant-numeric:tabular-nums;
4674
4583
  }
4584
+
4585
+ .tds-data-table-column--selectable,
4586
+ .tds-data-table-cell--selectable{
4587
+ width:3rem;
4588
+ text-align:center;
4589
+ }
4675
4590
  .tds-data-table-selectable-checkbox{
4591
+ --tds-data-table-selectable-checkbox-background-color:var(--t-form-background-color);
4592
+ --tds-data-table-selectable-checkbox-border-color:var(--t-form-border-color);
4593
+ --tds-data-table-selectable-checkbox-border-radius:var(--t-border-radius-sm);
4594
+ --tds-data-table-selectable-checkbox-cursor:pointer;
4595
+ --tds-data-table-selectable-checkbox-size:var(--t-element-size-md);
4596
+ --tds-data-table-selectable-checkbox-transition-property:background-color, border-color;
4597
+
4598
+ --tds-data-table-selectable-checkbox-icon:none;
4599
+ --tds-data-table-selectable-checkbox-icon-visibility:hidden;
4600
+ --tds-data-table-selectable-checkbox-icon-opacity:0;
4601
+ --tds-data-table-selectable-checkbox-icon-fill:var(--t-icon-color-inverted);
4602
+
4676
4603
  position:relative;
4677
- display:inline-block;
4678
- width:1em;
4679
- height:1em;
4680
- vertical-align:middle;
4681
- cursor:pointer;
4682
- border:var(--t-form-border-width) solid var(--t-form-border-color);
4683
- border-radius:var(--t-border-radius-sm);
4604
+ display:block;
4605
+ width:var(--tds-data-table-selectable-checkbox-size);
4606
+ height:var(--tds-data-table-selectable-checkbox-size);
4607
+ margin-inline:auto;
4608
+ cursor:var(--tds-data-table-selectable-checkbox-cursor);
4609
+ background-color:var(--tds-data-table-selectable-checkbox-background-color);
4610
+ border:var(--t-form-border-width) solid var(--tds-data-table-selectable-checkbox-border-color);
4611
+ border-radius:var(--tds-data-table-selectable-checkbox-border-radius);
4612
+ transition-timing-function:var(--t-ease-in-out);
4613
+ transition-duration:var(--t-duration-200);
4614
+ transition-property:var(--tds-data-table-selectable-checkbox-transition-property);
4684
4615
  }
4616
+ .tds-data-table-selectable-checkbox::after{
4617
+ position:absolute;
4618
+ inset:0;
4619
+ content:"";
4620
+ transform:scale(2);
4621
+ }
4685
4622
  .tds-data-table-selectable-checkbox::before{
4686
4623
  position:absolute;
4687
4624
  inset:0;
4688
- display:flex;
4689
- visibility:hidden;
4690
- align-items:center;
4691
- justify-content:center;
4625
+ visibility:var(--tds-data-table-selectable-checkbox-icon-visibility);
4692
4626
  content:"";
4693
- opacity:0;
4627
+ background-color:var(--tds-data-table-selectable-checkbox-icon-fill);
4628
+ border-radius:var(--tds-data-table-selectable-checkbox-border-radius);
4629
+ opacity:var(--tds-data-table-selectable-checkbox-icon-opacity);
4630
+ -webkit-mask-image:var(--tds-data-table-selectable-checkbox-icon);
4631
+ mask-image:var(--tds-data-table-selectable-checkbox-icon);
4632
+ -webkit-mask-repeat:no-repeat;
4633
+ mask-repeat:no-repeat;
4634
+ -webkit-mask-size:contain;
4635
+ mask-size:contain;
4636
+ }
4637
+ .tds-data-table-selectable-checkbox[data-hovered]{
4638
+ --tds-data-table-selectable-checkbox-border-color:var(--t-fill-color-interaction-hover);
4639
+ --tds-data-table-selectable-checkbox-background-color:var(--t-fill-color-button-interaction-outline-hover);
4694
4640
  }
4695
4641
  .tds-data-table-selectable-checkbox[data-focus-visible]{
4696
4642
  outline:var(--t-focus-ring-outline);
4697
4643
  outline-offset:var(--t-focus-ring-offset);
4698
4644
  }
4699
- :is(.tds-data-table-selectable-checkbox[data-selected],.tds-data-table-selectable-checkbox[data-indeterminate])::before{
4700
- visibility:visible;
4701
- opacity:1;
4645
+ .tds-data-table-selectable-checkbox[data-selected],.tds-data-table-selectable-checkbox[data-indeterminate]{
4646
+ --tds-data-table-selectable-checkbox-background-color:var(--t-fill-color-control);
4647
+ --tds-data-table-selectable-checkbox-border-color:var(--t-border-color-control-info);
4648
+ --tds-data-table-selectable-checkbox-icon-visibility:visible;
4649
+ --tds-data-table-selectable-checkbox-icon-opacity:1;
4650
+ }
4651
+ [data-hovered]:is(.tds-data-table-selectable-checkbox[data-selected],.tds-data-table-selectable-checkbox[data-indeterminate]){
4652
+ --tds-data-table-selectable-checkbox-border-color:var(--t-fill-color-interaction-hover);
4653
+ --tds-data-table-selectable-checkbox-background-color:var(--t-fill-color-interaction-hover);
4702
4654
  }
4703
- .tds-data-table-selectable-checkbox[data-selected]::before{
4704
- content:"";
4655
+ .tds-data-table-selectable-checkbox[data-selected]{
4656
+ --tds-data-table-selectable-checkbox-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
4657
+ }
4658
+ .tds-data-table-selectable-checkbox[data-indeterminate]{
4659
+ --tds-data-table-selectable-checkbox-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
4705
4660
  }
4706
- .tds-data-table-selectable-checkbox[data-indeterminate]::before{
4707
- content:"➖";
4661
+ .tds-data-table-selectable-checkbox[data-disabled]{
4662
+ --tds-data-table-selectable-checkbox-background-color:var(--t-form-background-color-disabled);
4663
+ --tds-data-table-selectable-checkbox-border-color:var(--t-form-border-color-disabled);
4664
+ --tds-data-table-selectable-checkbox-cursor:not-allowed;
4665
+ }
4666
+ .tds-data-table-selectable-checkbox[data-disabled][data-selected],.tds-data-table-selectable-checkbox[data-disabled][data-indeterminate]{
4667
+ --tds-data-table-selectable-checkbox-background-color:var(--t-border-color-control-disabled);
4668
+ }
4669
+ @media (prefers-reduced-motion: reduce){
4670
+ .tds-data-table-selectable-checkbox{
4671
+ --tds-data-table-selectable-checkbox-transition-property:none;
4672
+ }
4708
4673
  }
4709
4674
 
4710
4675
  .t-banner{
@@ -5525,6 +5490,193 @@ a.tds-dropdown-item:is(:hover, :active){
5525
5490
  color:var(--tds-field-color);
5526
5491
  }
5527
5492
 
5493
+ .tds-combo-box{
5494
+ --tds-combo-box-button-offset:4px;
5495
+ }
5496
+
5497
+ .tds-combo-box[data-open] .tds-combo-box-button > svg{
5498
+ transform:rotate(.5turn);
5499
+ }
5500
+
5501
+ .tds-combo-box--lg{
5502
+ --tds-combo-box-button-offset:5px;
5503
+ }
5504
+ .tds-combo-box-field:has([readonly]) .tds-combo-box-button{
5505
+ display:none;
5506
+ }
5507
+ .tds-combo-box-input{
5508
+ display:flex;
5509
+ flex:1;
5510
+ align-items:center;
5511
+ padding-block:var(--tds-field-padding-block);
5512
+ padding-inline:var(--tds-field-padding-inline);
5513
+ font-family:inherit;
5514
+ font-size:inherit;
5515
+ color:inherit;
5516
+ outline:0;
5517
+ background:transparent;
5518
+ border:0;
5519
+ }
5520
+ .tds-combo-box-input:has( + .tds-combo-box-button){
5521
+ padding-inline-end:0;
5522
+ }
5523
+ .tds-combo-box-input::-moz-placeholder{
5524
+ color:var(--tds-field-placeholder-color);
5525
+ -moz-user-select:none;
5526
+ user-select:none;
5527
+ }
5528
+ .tds-combo-box-input::placeholder{
5529
+ color:var(--tds-field-placeholder-color);
5530
+ -webkit-user-select:none;
5531
+ -moz-user-select:none;
5532
+ user-select:none;
5533
+ }
5534
+ .tds-combo-box-button{
5535
+ flex-shrink:0;
5536
+ align-self:center;
5537
+ inline-size:calc(var(--tds-field-min-height) - (var(--tds-combo-box-button-offset) * 2));
5538
+ block-size:calc(var(--tds-field-min-height) - (var(--tds-combo-box-button-offset) * 2));
5539
+ padding:0;
5540
+ margin-inline-end:var(--tds-combo-box-button-offset);
5541
+ }
5542
+ .tds-combo-box-button > svg{
5543
+ inline-size:var(--tds-field-font-size);
5544
+ block-size:var(--tds-field-font-size);
5545
+ transition:transform var(--t-duration-300) var(--t-ease-in-out);
5546
+ }
5547
+ .tds-combo-box-popover{
5548
+ width:var(--trigger-width);
5549
+ max-block-size:inherit;
5550
+ padding:var(--t-spacing-1);
5551
+ overflow:auto;
5552
+ scroll-behavior:smooth;
5553
+ overscroll-behavior:none;
5554
+ -webkit-user-select:none;
5555
+ -moz-user-select:none;
5556
+ user-select:none;
5557
+ outline:0;
5558
+ scrollbar-color:#0004 var(--t-surface-color-card);
5559
+ scrollbar-width:thin;
5560
+ background:var(--t-surface-color-card);
5561
+ background-clip:padding-box;
5562
+ border:1px solid var(--t-border-color);
5563
+ border-radius:var(--t-border-radius);
5564
+ box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
5565
+ }
5566
+ .tds-combo-box-popover[data-entering]{
5567
+ animation:tds-combo-box-popover var(--t-duration-300) var(--t-ease-out);
5568
+ }
5569
+ .tds-combo-box-popover[data-exiting]{
5570
+ animation:tds-combo-box-popover var(--t-duration-200) var(--t-ease-in) reverse;
5571
+ }
5572
+ .tds-combo-box-popover[data-entering],.tds-combo-box-popover[data-exiting]{
5573
+ will-change:opacity, transform;
5574
+ }
5575
+
5576
+ @keyframes tds-combo-box-popover{
5577
+ from{
5578
+ opacity:0;
5579
+ transform:translateY(-8px);
5580
+ }
5581
+ }
5582
+
5583
+ @media (prefers-reduced-motion: reduce){
5584
+ .tds-combo-box-popover[data-entering],.tds-combo-box-popover[data-exiting]{
5585
+ animation:none;
5586
+ }
5587
+
5588
+ .tds-combo-box-button > svg{
5589
+ transition:none;
5590
+ }
5591
+ }
5592
+ .tds-combo-box-list{
5593
+ padding:0;
5594
+ margin:0;
5595
+ }
5596
+ .tds-combo-box-list-item{
5597
+ display:block;
5598
+ padding-block:var(--t-spacing-1);
5599
+ padding-inline:var(--t-spacing-1-half);
5600
+ overflow:hidden;
5601
+ text-overflow:ellipsis;
5602
+ font-size:1rem;
5603
+ color:var(--t-text-color);
5604
+ white-space:nowrap;
5605
+ cursor:default;
5606
+ border-radius:var(--t-border-radius);
5607
+ }
5608
+ .tds-combo-box-list-item[data-hovered]:not([data-disabled]),.tds-combo-box-list-item[data-focus-visible]{
5609
+ background:var(--t-fill-color-neutral-070);
5610
+ }
5611
+ .tds-combo-box-list-item[data-selected]{
5612
+ background:var(--t-fill-color-button-interaction-ghost-active);
5613
+ }
5614
+ .tds-combo-box-list-item[data-pressed]:not([data-disabled]){
5615
+ background:var(--t-fill-color-neutral-060);
5616
+ }
5617
+ .tds-combo-box-list-item[data-disabled]{
5618
+ color:var(--t-form-color-disabled);
5619
+ cursor:not-allowed;
5620
+ }
5621
+ .tds-combo-box-list-item[data-disabled][data-hovered]{
5622
+ background:transparent;
5623
+ }
5624
+ .tds-combo-box-empty-state{
5625
+ position:relative;
5626
+ min-block-size:var(--t-spacing-3);
5627
+ padding-block:var(--t-spacing-1);
5628
+ padding-inline:var(--t-spacing-2);
5629
+ font-size:var(--t-font-size-md);
5630
+ color:var(--t-text-color-secondary);
5631
+ }
5632
+ .tds-combo-box-load-more{
5633
+ position:relative;
5634
+ min-block-size:calc(var(--t-spacing-3) + var(--t-spacing-1));
5635
+ }
5636
+
5637
+ .tds-combo-box-empty-state,
5638
+ .tds-combo-box-load-more{
5639
+ --tds-loading-spinner-visibility:visible;
5640
+ --tds-loading-spinner-animation-play-state:running;
5641
+ }
5642
+ .tds-combo-box-list-section:not(:first-child){
5643
+ margin-block-start:var(--t-spacing-half);
5644
+ }
5645
+ .tds-combo-box-section-header{
5646
+ padding-block:var(--t-spacing-1);
5647
+ padding-inline:var(--t-spacing-half);
5648
+ font-size:var(--t-font-size-sm);
5649
+ font-weight:var(--t-font-weight-semibold);
5650
+ color:var(--t-text-color-secondary);
5651
+ }
5652
+
5653
+ .tds-loading-spinner{
5654
+ position:absolute;
5655
+ right:0;
5656
+ left:0;
5657
+ visibility:var(--tds-loading-spinner-visibility, hidden);
5658
+ width:var(--tds-loading-spinner-size, 1.25em);
5659
+ height:var(--tds-loading-spinner-size, 1.25em);
5660
+ margin:auto;
5661
+ border:var(--tds-loading-spinner-track-width, 4px) solid var(--tds-loading-spinner-track-color, var(--t-fill-color-transparency-dark-020));
5662
+ border-top-color:var(--tds-loading-spinner-color, currentcolor);
5663
+ border-radius:50%;
5664
+ animation:spinner-rotate 500ms infinite linear;
5665
+ animation-play-state:var(--tds-loading-spinner-animation-play-state, paused);
5666
+ }
5667
+
5668
+ @keyframes spinner-rotate{
5669
+ to{
5670
+ transform:rotate(360deg);
5671
+ }
5672
+ }
5673
+
5674
+ @media (prefers-reduced-motion: reduce){
5675
+ [class*="--loading"] .tds-loading-spinner{
5676
+ --tds-loading-spinner-animation-play-state:paused;
5677
+ }
5678
+ }
5679
+
5528
5680
  .tds-date-picker{
5529
5681
  --tds-date-picker-button-offset:4px;
5530
5682
  }
@@ -5916,7 +6068,7 @@ a.tds-dropdown-item:is(:hover, :active){
5916
6068
 
5917
6069
  --tds-select-option-gap:var(--t-spacing-1);
5918
6070
  --tds-select-option-padding-block:var(--t-spacing-fourth);
5919
- --tds-select-option-padding-inline:var(--t-spacing-2) var(--t-spacing-1);
6071
+ --tds-select-option-padding-inline:var(--t-spacing-1-half);
5920
6072
  --tds-select-option-font-size:1rem;
5921
6073
  --tds-select-option-color:var(--t-text-color);
5922
6074
  --tds-select-option-background-hover:var(--t-fill-color-neutral-070);
@@ -5925,7 +6077,7 @@ a.tds-dropdown-item:is(:hover, :active){
5925
6077
 
5926
6078
  --tds-select-group-label-padding-block-start:var(--t-spacing-2);
5927
6079
  --tds-select-group-label-padding-block:var(--tds-select-group-label-padding-block-start) var(--t-spacing-1);
5928
- --tds-select-group-label-padding-inline:var(--t-spacing-1);
6080
+ --tds-select-group-label-padding-inline:var(--t-spacing-half);
5929
6081
  --tds-select-group-label-font-size:var(--t-font-size-sm);
5930
6082
  --tds-select-group-label-font-weight:var(--t-font-weight-semibold);
5931
6083
  --tds-select-group-label-letter-spacing:0;
@@ -6033,7 +6185,7 @@ a.tds-dropdown-item:is(:hover, :active){
6033
6185
  .tds-select :is(li[role="option"],option:not([hidden])){
6034
6186
  display:block;
6035
6187
  align-content:center;
6036
- min-height:var(--t-container-size-md);
6188
+ min-height:38px;
6037
6189
  padding-block:var(--tds-select-option-padding-block);
6038
6190
  padding-inline:var(--tds-select-option-padding-inline);
6039
6191
  overflow:hidden;