@wwtdev/bsds-css 3.0.0-rc.22 → 3.0.0-rc.23

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 (3) hide show
  1. package/dist/wwt-bsds.css +1731 -1589
  2. package/dist/wwt-bsds.min.css +1 -1
  3. package/package.json +1 -1
package/dist/wwt-bsds.css CHANGED
@@ -692,1914 +692,1914 @@ h6 {
692
692
  }
693
693
  }
694
694
  /* Component Styles */
695
- /*
696
- ---------------------------
697
- DEPRECATED BS FLYOUT
698
- ---------------------------
699
- */
700
- .bs-flyout-deprecated {
701
- background-color: var(--bs-bg-base-to-light);
702
- box-shadow: var(--bs-shadow-drawerRight);
703
- height: 100%;
695
+ /* Parent */
696
+ .bs-dropdown-deprecated-parent {
697
+ display: inline-block;
698
+ position: relative;
699
+ }
700
+ /* Backdrop for mobile bottom sheet */
701
+ .bs-dropdown-deprecated-backdrop {
702
+ -webkit-backdrop-filter: blur(4px);
703
+ backdrop-filter: blur(4px);
704
+ background: rgba(29, 30, 72, 0.05);
705
+ bottom: 0;
706
+ content: "";
704
707
  left: 0;
708
+ position: fixed;
709
+ right: 0;
710
+ top: 0;
711
+ z-index: 998;
712
+ }
713
+ /* Content */
714
+ .bs-dropdown-deprecated {
715
+ --dropdown-bottom: 0;
716
+ --dropdown-left: 0;
717
+ --dropdown-right: auto;
718
+ --dropdown-top: auto;
719
+ --dropdown-width: 100%;
720
+ --dropdown-transform: translate(0, 100%);
721
+
722
+ background-color: var(--bs-bg-base-to-medium);
723
+ border-radius: 4px;
724
+ bottom: var(--dropdown-bottom);
725
+ box-shadow: var(--bs-shadow-contentMedium);
726
+ left: var(--dropdown-left);
727
+ line-height: 1.5rem;
705
728
  margin: 0;
706
- max-width: 100vw;
707
729
  opacity: 0;
708
- padding: 1.5rem;
730
+ overflow-y: auto;
709
731
  position: fixed;
710
- top: 0;
711
- transform: translateX(-100%);
712
- transition-duration: var(--bs-transition-leisurely);
732
+ right: var(--dropdown-right);
733
+ top: var(--dropdown-top);
734
+ transform-origin: center bottom;
735
+ transform: var(--dropdown-transform);
736
+ transition-duration: var(--bs-transition-quick);
713
737
  transition-property: opacity, transform;
714
738
  transition-timing-function: var(--bs-transition-ease);
715
- width: 360px;
716
- z-index: 1000;
739
+ width: var(--dropdown-width);
740
+ z-index: 999;
717
741
  }
718
- .bs-flyout-deprecated:where([data-absolute="true"]) {
719
- position: absolute;
742
+ /* Mobile Header */
743
+ .bs-dropdown-deprecated > :where(header) {
744
+ border-bottom: 1px solid var(--bs-border-base);
745
+ display: flex;
746
+ justify-content: space-between;
747
+ padding: 1.5rem;
720
748
  }
721
- .bs-flyout-deprecated:where([data-position="right"]) {
722
- box-shadow: var(--bs-shadow-drawerLeft);
723
- left: auto;
724
- right: 0;
725
- transform: translateX(100%);
749
+ .bs-dropdown-deprecated > :where(header) :where(h3) {
750
+ font-size: 1.25rem;
726
751
  }
727
- .bs-flyout-deprecated:where([data-size="lg"]) {
728
- width: 535px;
752
+ .bs-dropdown-deprecated > :where(header) :where(p) {
753
+ font-size: 1rem;
729
754
  }
730
- .bs-flyout-deprecated:where([data-shown="true"]) {
755
+ .bs-dropdown-deprecated > :where(header) :where(button) {
756
+ cursor: pointer;
757
+ height: 1rem;
758
+ width: 1rem;
759
+ }
760
+ /* data-shown */
761
+ .bs-dropdown-deprecated:where([data-shown]:not([data-shown="false"])) {
762
+ --dropdown-transform: translate(0, 0);
731
763
  opacity: 1;
732
- /*
733
- Needs to be "none" instead of "0" so as not to interfere with calculating
734
- "containing block" for absolute and fixed positioned elements (see https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block)
735
- */
736
- transform: none;
737
764
  }
738
- .bs-flyout-deprecated :where(.bs-flyout-deprecated-close-container) {
739
- display: flex;
740
- justify-content: flex-end;
765
+ /* Sizing */
766
+ .bs-dropdown-deprecated:where([data-width="sm"]) {
767
+ --dropdown-wscreen-width: 10rem;
741
768
  }
742
- .bs-flyout-deprecated :where(.bs-flyout-deprecated-close-container button) {
743
- cursor: pointer;
744
- outline-offset: 2px;
745
- padding: 2px;
769
+ .bs-dropdown-deprecated:where([data-width="md"]),
770
+ .bs-dropdown-deprecated:where(:not([data-width])) {
771
+ --dropdown-wscreen-width: 20rem;
746
772
  }
747
- /* Vue Transition Styles - Only used in Vue component */
748
- .bs-flyout-deprecated:where(.bs-flyout-deprecated-enter-from),
749
- .bs-flyout-deprecated:where(.bs-flyout-deprecated-leave-to) {
750
- opacity: 0;
751
- transform: translateX(-100%);
773
+ .bs-dropdown-deprecated:where([data-width="lg"]) {
774
+ --dropdown-wscreen-width: 40rem;
752
775
  }
753
- .bs-flyout-deprecated:where([data-position="right"].bs-flyout-deprecated-enter-from),
754
- .bs-flyout-deprecated:where([data-position="right"].bs-flyout-deprecated-leave-to) {
755
- transform: translateX(100%);
776
+ .bs-dropdown-deprecated:where([data-width="content"]) {
777
+ --dropdown-wscreen-width: max-content;
756
778
  }
757
- .bs-flyout-deprecated:where(.bs-flyout-deprecated-enter-to),
758
- .bs-flyout-deprecated:where(.bs-flyout-deprecated-leave-from) {
759
- opacity: 1;
760
- transform: translateX(0);
779
+ .bs-dropdown-deprecated-parent:where([data-width="anchor"]) :where(.bs-dropdown-deprecated) {
780
+ --dropdown-wscreen-width: 100%;
761
781
  }
762
- /*
763
- ---------------------------
764
- DEPRECATED BS MODAL
765
- ---------------------------
766
- */
767
- .bs-modal-deprecated {
768
- --base-modal-width: 35rem; /* 560px */
769
- --lg-modal-padding: 2rem; /* 32px */
770
- --lg-modal-width: 45.3125rem; /* 725px */
771
- --modal-padding: 1.5rem; /* 24px */
772
- --sm-modal-width: 21.25rem; /* 340px */
773
- background-color: var(--bs-bg-base-to-medium);
774
- border-radius: 4px;
775
- bottom: 0;
776
- box-shadow: var(--bs-shadow-contentHigh);
777
- display: flex;
778
- flex-direction: column;
779
- height: -moz-fit-content;
780
- height: fit-content;
781
- left: 0;
782
- margin: auto;
783
- max-height: calc(100% - 3rem);
784
- opacity: 0;
785
- overflow: auto;
786
- position: fixed;
787
- right: 0;
788
- top: 0;
789
- transition-duration: var(--bs-transition-quick);
790
- transition-property: opacity;
791
- transition-timing-function: var(--bs-transition-ease);
792
- width: calc(100% - 3rem);
793
- z-index: 9999;
782
+ /* data-top */
783
+ .bs-dropdown-deprecated:where([data-top]:not([data-top="false"])) {
784
+ --dropdown-wscreen-bottom: calc(100% + 0.5rem);
785
+ --dropdown-wscreen-top: auto;
794
786
  }
795
- @media (min-width: 752px) {
796
- .bs-modal-deprecated {
797
- max-height: min(calc(100dvh - 3rem), 40.625rem);
798
- width: var(--base-modal-width);
787
+ /* data-center */
788
+ .bs-dropdown-deprecated-parent:where([data-center]:not([data-center="false"])) :where(.bs-dropdown-deprecated) {
789
+ --dropdown-transform: translate(-50%, 0);
790
+ --dropdown-wscreen-left: 50%;
791
+ }
792
+ /* data-right */
793
+ .bs-dropdown-deprecated-parent:where([data-right]:not([data-right="false"])) :where(.bs-dropdown-deprecated) {
794
+ --dropdown-transform: translate(0, 0);
795
+ --dropdown-wscreen-left: auto;
796
+ --dropdown-wscreen-right: 0;
797
+ }
798
+ /* Overrides mobile style when not min-width 1166 */
799
+ .bs-dropdown-deprecated:where([data-no-mobile="true"]) {
800
+ --dropdown-bottom: var(--dropdown-wscreen-bottom, auto);
801
+ --dropdown-left: var(--dropdown-wscreen-left, initial);
802
+ --dropdown-right: var(--dropdown-wscreen-right, initial);
803
+ --dropdown-top: var(--dropdown-wscreen-top, calc(100% + 0.5rem));
804
+ --dropdown-width: var(--dropdown-wscreen-width, initial);
805
+ --dropdown-transform: initial;
806
+
807
+ position: absolute;
808
+ }
809
+ .bs-dropdown-deprecated:where([data-no-mobile="true"]) > :where(header) {
810
+ display: none;
811
+ }
812
+ @media (min-width: 1166px) {
813
+ .bs-dropdown-deprecated-backdrop {
814
+ display: none;
799
815
  }
800
816
 
801
- .bs-modal-deprecated:where([data-size="sm"]) {
802
- width: var(--sm-modal-width);
817
+ .bs-dropdown-deprecated {
818
+ --dropdown-bottom: var(--dropdown-wscreen-bottom, auto);
819
+ --dropdown-left: var(--dropdown-wscreen-left, initial);
820
+ --dropdown-right: var(--dropdown-wscreen-right, initial);
821
+ --dropdown-top: var(--dropdown-wscreen-top, calc(100% + 0.5rem));
822
+ --dropdown-width: var(--dropdown-wscreen-width, initial);
823
+ --dropdown-transform: initial;
824
+
825
+ position: absolute;
803
826
  }
804
827
 
805
- .bs-modal-deprecated:where([data-size="lg"]) {
806
- width: var(--lg-modal-width);
828
+ /* Hide the header */
829
+ .bs-dropdown-deprecated > :where(header) {
830
+ display: none;
807
831
  }
808
832
  }
809
- .bs-modal-deprecated:where([data-shown="true"]) {
833
+ /* Vue Transition Styles - Only used in Vue component */
834
+ .bs-dropdown-deprecated:where(.bs-dropdown-deprecated-enter-from),
835
+ .bs-dropdown-deprecated:where(.bs-dropdown-deprecated-leave-to) {
836
+ opacity: 0;
837
+ transform: var(--dropdown-transform);
838
+ }
839
+ .bs-dropdown-deprecated:where(.bs-dropdown-deprecated-enter-to),
840
+ .bs-dropdown-deprecated:where(.bs-dropdown-deprecated-leave-from) {
810
841
  opacity: 1;
842
+ transform: translate(0, 0);
811
843
  }
812
- /* Header Container */
813
- .bs-modal-deprecated :where(.bs-modal-deprecated-header-container) {
814
- padding: var(--modal-padding);
844
+ .bs-dropdown-deprecated :where(.mobile-select-button-container) {
845
+ display: none;
846
+ overflow: hidden;
815
847
  }
816
- .bs-modal-deprecated:where([data-size="lg"]) :where(.bs-modal-deprecated-header-container) {
817
- padding: var(--lg-modal-padding);
848
+ @media (max-width: 1166px) {
849
+ .bs-dropdown-deprecated :where(.mobile-select-button-container) {
850
+ display: flex;
851
+ }
818
852
  }
819
- .bs-modal-deprecated:where([data-header-border="true"]) :where(.bs-modal-deprecated-header-container) {
820
- border-bottom: 1px solid var(--bs-border-base);
853
+ .bs-dropdown-deprecated :where(.mobile-select-button) {
854
+ margin: .875rem;
855
+ width: 100%;
821
856
  }
822
- .bs-modal-deprecated:where([data-full-width="true"]) :where(.bs-modal-deprecated-header-container) {
857
+ /* Option list */
858
+ .bs-dropdown-options-deprecated {
859
+ display: flex;
860
+ flex-direction: column;
861
+ gap: 0.5rem;
862
+ list-style: none;
863
+ margin-bottom: 0.25rem;
864
+ margin-top: 0.25rem;
865
+ max-height: var(--options-height-max, 20rem);/* constrain scrollable to options section */
866
+ overflow-y: auto;
867
+ padding-block: 0.5rem;
823
868
  padding-left: 0;
824
- padding-right: 0;
869
+ position: relative;
825
870
  }
826
- /* Header Row */
827
- .bs-modal-deprecated :where(.bs-modal-deprecated-header) {
828
- align-items: center;
829
- display: flex;
830
- justify-content: space-between;
871
+ .bs-dropdown-options-deprecated:focus-visible {
872
+ outline: none;
831
873
  }
832
- /* Title */
833
- .bs-modal-deprecated :where(.bs-modal-deprecated-title) {
834
- flex-grow: 1;
835
- font-size: var(--bs-text-lg);
836
- font-weight: 400;
837
- margin-right: 2rem;
838
- }
839
- /* Subtitle */
840
- .bs-modal-deprecated :where(.bs-modal-deprecated-subtitle) {
841
- font-size: var(--bs-text-sm);
842
- font-weight: 400;
843
- margin-top: 0.5rem;
844
- width: 100%;
874
+ /* Stabilize scrollbar gutter for Firefox (https://bugzilla.mozilla.org/show_bug.cgi?id=764076) */
875
+ @media (min-width: 1166px) {
876
+ /* 5th or 8th child triggers overflow-y (depending on variant) */
877
+ :where([data-width="content"]) > .bs-dropdown-options-deprecated:where(:has([data-variant*="description"]:nth-child(5))),
878
+ :where([data-width="content"]) > .bs-dropdown-options-deprecated:where(:has(li:not([data-variant*="description"]):nth-child(8))) {
879
+ scrollbar-gutter: stable;
880
+ }
881
+
882
+ /* Fallback for older Firefox+ only if we're not setting data-overflow values */
883
+ @supports not selector(:has(*)) {
884
+ :where([data-width="content"]) > .bs-dropdown-options-deprecated {
885
+ scrollbar-gutter: stable;
886
+ }
887
+ }
888
+
889
+ /* Also allow this for js solutions if :has not available via data-overflow */
890
+ /* Reset scrollbar gutter when data-overflow is used */
891
+ :where([data-width="content"]) > .bs-dropdown-options-deprecated:where([data-overflow]) {
892
+ scrollbar-gutter: auto;
893
+ }
894
+
895
+ :where([data-width="content"]) > .bs-dropdown-options-deprecated:where([data-overflow="true"]) {
896
+ scrollbar-gutter: stable;
897
+ }
845
898
  }
846
- /* Close Button */
847
- .bs-modal-deprecated :where(.bs-modal-deprecated-close-button) {
848
- background-color: transparent;
899
+ /* Option list item */
900
+ .bs-dropdown-options-deprecated :where(li) {
901
+ align-items: center;
902
+ border-bottom: 2px solid transparent;
903
+ border-left: 4px solid transparent;
904
+ border-radius: 3px;
905
+ border-right: 2px solid transparent;
906
+ border-top: 2px solid transparent;
907
+ color: var(--bs-ink-base);
908
+ -moz-column-gap: 0.5rem;
909
+ column-gap: 0.5rem;
849
910
  cursor: pointer;
850
- z-index: 10000;
911
+ display: grid;
912
+ padding-block: 0.25rem;
913
+ padding-inline: 1.25rem;
914
+ row-gap: 0.125rem;
915
+ word-break: break-word;
916
+ word-wrap: break-word;
851
917
  }
852
- .bs-modal-deprecated:where(:not(:has(.bs-modal-deprecated-header-container))) :where(.bs-modal-deprecated-close-button) {
853
- position: absolute;
854
- right: 1rem;
855
- top: 1rem;
918
+ /* Variant: 2-col */
919
+ .bs-dropdown-options-deprecated :where(li[data-variant~="2-col"]) {
920
+ grid-template-columns: min-content 1fr;
856
921
  }
857
- .bs-modal-deprecated:where([data-full-width="true"]:has(> .bs-modal-deprecated-header-container)) :where(.bs-modal-deprecated-close-button) {
858
- margin-right: var(--modal-padding);
922
+ /* Variant: 3-col */
923
+ .bs-dropdown-options-deprecated :where(li[data-variant~="3-col"]) {
924
+ grid-template-columns: min-content min-content 1fr;
859
925
  }
860
- .bs-modal-deprecated:where([data-full-width="true"][data-size="lg"]:has(> .bs-modal-deprecated-header-container)) :where(.bs-modal-deprecated-close-button) {
861
- margin-right: var(--lg-modal-padding);
926
+ /* Variant: description */
927
+ .bs-dropdown-options-deprecated :where(li:not([data-variant*="-col"])[data-variant~="description"] > :nth-child(2)),
928
+ .bs-dropdown-options-deprecated :where(li[data-variant~="2-col"][data-variant~="description"] > :nth-child(3)),
929
+ .bs-dropdown-options-deprecated :where(li[data-variant~="3-col"][data-variant~="description"] > :nth-child(4)) {
930
+ color: var(--bs-ink-light);
931
+ font-size: var(--bs-text-xs);
932
+ min-height: 1.125rem;
933
+ line-height: 1.125rem;
862
934
  }
863
- /* Progress */
864
- .bs-modal-deprecated :where(.bs-modal-deprecated-progress) {
865
- margin-top: 1.5rem;
866
- width: 100%;
935
+ /* Variant: 2-col description */
936
+ .bs-dropdown-options-deprecated :where(li[data-variant~="2-col"][data-variant~="description"] > :nth-child(3)) {
937
+ grid-column-start: 2;
867
938
  }
868
- /* Body */
869
- .bs-modal-deprecated :where(.bs-modal-deprecated-body) {
870
- overflow-y: auto;
871
- padding: var(--modal-padding);
939
+ /* Variant: 3-col description */
940
+ .bs-dropdown-options-deprecated :where(li[data-variant~="3-col"][data-variant~="description"] > :nth-child(4)) {
941
+ grid-column-start: 3;
872
942
  }
873
- .bs-modal-deprecated:where([data-full-height="true"]) :where(.bs-modal-deprecated-body) {
874
- padding-bottom: 0;
875
- padding-top: 0;
943
+ /* Hover or data-selected */
944
+ .bs-dropdown-options-deprecated :where(li:not([role="separator"]):hover),
945
+ .bs-dropdown-options-deprecated :where(li[data-selected]) {
946
+ background-color: var(--bs-bg-medium-to-light);
947
+ border-left: 4px solid var(--bs-ink-blue);
948
+ color: var(--bs-ink-blue);
949
+ outline: none;
876
950
  }
877
- .bs-modal-deprecated:where([data-full-width="true"]) :where(.bs-modal-deprecated-body) {
878
- padding-left: 0;
879
- padding-right: 0;
951
+ /* Variant: negative */
952
+ .bs-dropdown-options-deprecated :where(li[data-variant~="negative"]:hover),
953
+ .bs-dropdown-options-deprecated :where(li[data-variant~="negative"][data-selected]),
954
+ .bs-dropdown-options-deprecated :where(li[data-variant~="negative"][data-selected]:hover) {
955
+ /* 25% alpha version of --bs-red-400 */
956
+ background-color: rgba(248, 169, 170, 0.25);
957
+ border-left: 4px solid var(--bs-ink-red);
958
+ color: var(--bs-ink-red);
880
959
  }
881
- /* Has header, but no header border */
882
- .bs-modal-deprecated:where(:not([data-header-border]):has(> .bs-modal-deprecated-header-container)) :where(.bs-modal-deprecated-body),
883
- .bs-modal-deprecated:where([data-header-border="false"]:has(> .bs-modal-deprecated-header-container)) :where(.bs-modal-deprecated-body) {
884
- padding-top: 0;
960
+ /* Hover or data-selected for 2-col/3-col/description variants */
961
+ .bs-dropdown-options-deprecated :where(li:not([data-variant*="-col"])[data-variant~="description"]:hover > :nth-child(2)),
962
+ .bs-dropdown-options-deprecated :where(li[data-variant~="2-col"][data-variant~="description"]:hover > :nth-child(3)),
963
+ .bs-dropdown-options-deprecated :where(li[data-variant~="3-col"][data-variant~="description"]:hover > :nth-child(4)),
964
+ .bs-dropdown-options-deprecated :where(li:not([data-variant*="-col"])[data-variant~="description"][data-selected] > :nth-child(2)),
965
+ .bs-dropdown-options-deprecated :where(li[data-variant~="2-col"][data-variant~="description"][data-selected] > :nth-child(3)),
966
+ .bs-dropdown-options-deprecated :where(li[data-variant~="3-col"][data-variant~="description"][data-selected] > :nth-child(4)) {
967
+ color: var(--bs-ink-blue);
885
968
  }
886
- /* Has footer, but no footer border */
887
- .bs-modal-deprecated:where(:not([data-footer-border])) :where(.bs-modal-deprecated-body:has(~ .bs-modal-deprecated-footer)),
888
- .bs-modal-deprecated:where([data-footer-border="false"]) :where(.bs-modal-deprecated-body:has(~ .bs-modal-deprecated-footer)) {
889
- padding-bottom: 0;
969
+ /* Hover or data-selected for negative + 2-col/3-col/description variants */
970
+ .bs-dropdown-options-deprecated :where(li[data-variant~="negative"]:not([data-variant*="-col"])[data-variant~="description"]:hover > :nth-child(2)),
971
+ .bs-dropdown-options-deprecated :where(li[data-variant~="negative"][data-variant~="2-col"][data-variant~="description"]:hover > :nth-child(3)),
972
+ .bs-dropdown-options-deprecated :where(li[data-variant~="negative"][data-variant~="3-col"][data-variant~="description"]:hover > :nth-child(4)),
973
+ .bs-dropdown-options-deprecated :where(li[data-variant~="negative"]:not([data-variant*="-col"])[data-variant~="description"][data-selected] > :nth-child(2)),
974
+ .bs-dropdown-options-deprecated :where(li[data-variant~="negative"][data-variant~="2-col"][data-variant~="description"][data-selected] > :nth-child(3)),
975
+ .bs-dropdown-options-deprecated :where(li[data-variant~="negative"][data-variant~="3-col"][data-variant~="description"][data-selected] > :nth-child(4)) {
976
+ color: var(--bs-ink-red);
890
977
  }
891
- .bs-modal-deprecated:where([data-body-background-contrast="true"]) :where(.bs-modal-deprecated-body) {
892
- background-color: var(--bs-bg-light);
978
+ /* List option keyboard navigation focus */
979
+ .bs-dropdown-options-deprecated:where(:focus-visible) :where(li[data-active]) {
980
+ --focus-border-color: var(--bs-blue-base);
981
+ border: 2px solid var(--focus-border-color);
982
+ outline: none;
983
+ padding-left: 1.375rem;
893
984
  }
894
- /* Footer */
895
- .bs-modal-deprecated :where(.bs-modal-deprecated-footer) {
896
- padding-bottom: 1rem;
897
- padding-left: var(--modal-padding);
898
- padding-right: var(--modal-padding);
899
- padding-top: 1rem;
985
+ /* Navigation focus on a selected element should preserve 4px left border */
986
+ .bs-dropdown-options-deprecated:where(:focus-visible) :where(li[data-selected][data-active]) {
987
+ border-left: 4px solid var(--focus-border-color);
988
+ padding-left: 1.25rem;
900
989
  }
901
- .bs-modal-deprecated:where([data-size="lg"]) :where(.bs-modal-deprecated-footer) {
902
- padding-bottom: 1.5rem;
903
- padding-left: var(--lg-modal-padding);
904
- padding-right: var(--lg-modal-padding);
905
- padding-top: 1.5rem;
990
+ /* data-variant="negative" list option keyboard navigation focus */
991
+ .bs-dropdown-options-deprecated:where(:focus-visible) :where(li[data-variant~="negative"][data-active]) {
992
+ --focus-border-color: var(--bs-red-200);
906
993
  }
907
- .bs-modal-deprecated:where([data-footer-border="true"]) :where(.bs-modal-deprecated-footer) {
908
- border-top: 1px solid var(--bs-border-base);
994
+ /* Multi-select divider */
995
+ .bs-dropdown-options-deprecated :where(li[role="separator"]) {
996
+ cursor: default;
997
+ padding-block: 0.125rem;
998
+ padding-right: 1.375rem;
909
999
  }
910
- .bs-modal-deprecated:where([data-full-width="true"]) :where(.bs-modal-deprecated-footer) {
911
- padding-left: 0;
912
- padding-right: 0;
1000
+ /* Multi-select divider line */
1001
+ .bs-dropdown-options-deprecated :where(hr) {
1002
+ background-color: var(--bs-navy-light);
1003
+ height: .0625rem;
1004
+ margin-block: 0;
1005
+ margin-inline: 0;
913
1006
  }
914
- /* Vue Transition Styles - Only used in Vue component */
915
- .bs-modal-deprecated:where(.bs-modal-deprecated-enter-from),
916
- .bs-modal-deprecated:where(.bs-modal-deprecated-leave-to) {
917
- opacity: 0;
1007
+ /* Disable hover styles */
1008
+ .bs-dropdown-options-deprecated :where(li[data-no-hover]:hover) {
1009
+ background-color: transparent;
1010
+ border-left-color: transparent;
1011
+ color: var(--bs-ink-base);
1012
+ cursor: default;
918
1013
  }
919
- .bs-modal-deprecated:where(.bs-modal-deprecated-enter-to),
920
- .bs-modal-deprecated:where(.bs-modal-deprecated-leave-from) {
921
- opacity: 1;
1014
+ /* Style label to look like other options */
1015
+ .bs-dropdown-options-deprecated :where(li label) {
1016
+ cursor: pointer;
1017
+ font-size: 1rem;
1018
+ font-weight: 400;
922
1019
  }
923
- /* Base Toast Styles */
924
- .bs-toast-deprecated {
925
- --toast-transform: translate(0, calc(100% + 1.5rem));
926
-
927
- background-color: var(--bs-bg-base-to-light);
928
- border-top: 4px solid var(--bs-blue-base);
929
- bottom: 1.5rem;
930
- box-shadow: var(--bs-shadow-contentMedium);
931
- left: 0;
932
- margin-left: 1.5rem;
933
- margin-right: 1.5rem;
934
- opacity: 0;
935
- position: fixed;
936
- right: 0;
937
- transform: var(--toast-transform);
938
- transition-duration: var(--bs-transition-medium);
939
- transition-property: transform, opacity;
940
- transition-timing-function: var(--bs-transition-ease);
941
- /* Clamp width for mobile -> full screen */
942
- width: clamp(17rem, calc(100vw - 3rem), 25rem);
943
- z-index: 999;
1020
+ /* Don't change option color when checkbox is present */
1021
+ .bs-dropdown-options-deprecated :where(li[data-variant~="checkbox"]):hover,
1022
+ .bs-dropdown-options-deprecated :where(li[data-variant~="checkbox"][data-selected]) {
1023
+ color: var(--bs-ink-base);
944
1024
  }
945
- .bs-toast-deprecated:where([data-stacked]:not([data-stacked="false"])) {
946
- bottom: auto;
947
- left: auto;
948
- position: static;
949
- right: auto;
950
- z-index: auto;
1025
+ /* Don't change description color when checkbox is present */
1026
+ .bs-dropdown-options-deprecated :where(li[data-variant~="checkbox"][data-variant~="2-col"][data-variant~="description"]):hover > :nth-child(3),
1027
+ .bs-dropdown-options-deprecated :where(li[data-variant~="checkbox"][data-variant~="2-col"][data-variant~="description"][data-selected]) > :nth-child(3),
1028
+ .bs-dropdown-options-deprecated :where(li[data-variant~="checkbox"][data-variant~="3-col"][data-variant~="description"]):hover > :nth-child(4),
1029
+ .bs-dropdown-options-deprecated :where(li[data-variant~="checkbox"][data-variant~="3-col"][data-variant~="description"][data-selected]) > :nth-child(4) {
1030
+ color: var(--bs-ink-light);
951
1031
  }
952
- /* Mobile - Toast comes up from bottom */
953
- .bs-toast-deprecated:where([data-shown]:not([data-shown="false"])) {
954
- opacity: 1;
955
- transform: translate(0, 0);
1032
+ /* Overrides mobile style when not min-width 1166 */
1033
+ .bs-dropdown-deprecated:where([data-no-mobile="true"]) :where(.bs-dropdown-options-deprecated) :where(li) {
1034
+ padding-left: 0.5rem;
1035
+ padding-right: 0.75rem;
956
1036
  }
957
- .bs-toast-header-deprecated {
958
- align-items: center;
959
- color: var(--bs-ink-base);
960
- display: flex;
961
- gap: 0.5rem;
962
- padding: 1rem;
1037
+ .bs-dropdown-deprecated:where([data-no-mobile="true"]) :where(.bs-dropdown-options-deprecated) :where(li[role="separator"]) {
1038
+ padding-right: 0.625rem;
963
1039
  }
964
- .bs-toast-header-deprecated :where(.bs-toast-header-icon-deprecated) {
965
- color: var(--bs-blue-base);
1040
+ .bs-dropdown-deprecated:where([data-no-mobile="true"]) :where(.bs-dropdown-options-deprecated:focus-visible) :where(li[data-active]) {
1041
+ padding-left: 0.625rem;
966
1042
  }
967
- .bs-toast-header-deprecated :where(h5) {
968
- font-weight: 400;
1043
+ .bs-dropdown-deprecated:where([data-no-mobile="true"]) :where(.bs-dropdown-options-deprecated:focus-visible) :where(li[data-selected][data-active]) {
1044
+ padding-left: 0.5rem;
969
1045
  }
970
- .bs-toast-body-deprecated {
971
- border-bottom: 1px solid var(--bs-border-base);
972
- color: var(--bs-ink-light);
973
- padding-bottom: 1rem;
974
- padding-left: 1rem;
975
- padding-right: 1rem;
976
- }
977
- .bs-toast-actions-deprecated {
978
- /* Mobile - Buttons will be stacked */
979
- display: flex;
980
- flex-direction: row;
981
- gap: 1rem;
982
- justify-content: flex-end;
983
- padding-bottom: 0.5rem;
984
- padding-left: 1rem;
985
- padding-right: 1rem;
986
- padding-top: 0.5rem;
987
- }
988
- .bs-toast-actions-deprecated:where([data-stacked]:not([data-stacked="false"])) {
989
- flex-direction: column-reverse;
990
- }
991
- /* Warning Toast Styles */
992
- .bs-toast-deprecated:where([data-variant^='warning']) {
993
- border-top: 4px solid var(--bs-warning);
994
- }
995
- .bs-toast-deprecated:where([data-variant^='warning']) :where(.bs-toast-header-deprecated .bs-toast-header-icon-deprecated) {
996
- color: var(--bs-warning);
997
- }
998
- /* Positive Toast Styles */
999
- .bs-toast-deprecated:where([data-variant^='positive']) {
1000
- border-top: 4px solid var(--bs-purple-400);
1001
- }
1002
- .bs-toast-deprecated:where([data-variant^='positive']) :where(.bs-toast-header-deprecated .bs-toast-header-icon-deprecated) {
1003
- color: var(--bs-purple-400);
1004
- }
1005
- :where(.dark) .bs-toast-deprecated:where([data-variant^='positive']) {
1006
- border-top: 4px solid var(--bs-purple-200);
1007
- }
1008
- :where(.dark) .bs-toast-deprecated:where([data-variant^='positive']) :where(.bs-toast-header-deprecated .bs-toast-header-icon-deprecated) {
1009
- color: var(--bs-purple-200);
1010
- }
1011
- /* Negative Toast Styles */
1012
- .bs-toast-deprecated:where([data-variant^='negative']) {
1013
- border-top: 4px solid var(--bs-red-400);
1014
- }
1015
- .bs-toast-deprecated:where([data-variant^='negative']) :where(.bs-toast-header-deprecated .bs-toast-header-icon-deprecated) {
1016
- color: var(--bs-red-400);
1017
- }
1018
- @media (min-width: 440px) {
1019
- .bs-toast-deprecated {
1020
- --toast-transform: translate(calc(100% + 1.5rem), 0);
1046
+ @media (min-width: 1166px) {
1047
+ .bs-dropdown-options-deprecated :where(li) {
1048
+ padding-left: 0.5rem;
1049
+ padding-right: 0.75rem;
1050
+ }
1021
1051
 
1022
- left: auto;
1023
- margin-left: 0;
1024
- margin-right: 0;
1025
- opacity: 0;
1026
- right: 1.5rem;
1052
+ .bs-dropdown-options-deprecated :where(li[role="separator"]) {
1053
+ padding-right: 0.625rem;
1027
1054
  }
1028
1055
 
1029
- .bs-toast-deprecated:where([data-shown]:not([data-shown="false"])) {
1030
- opacity: 1;
1031
- transform: translate(0, 0);
1056
+ .bs-dropdown-options-deprecated:where(:focus-visible) :where(li[data-active]) {
1057
+ padding-left: 0.625rem;
1032
1058
  }
1033
1059
 
1034
- .bs-toast-actions-deprecated:where([data-stacked]:not([data-stacked="false"])) {
1035
- flex-direction: row;
1060
+ .bs-dropdown-options-deprecated:where(:focus-visible) :where(li[data-selected][data-active]) {
1061
+ padding-left: 0.5rem;
1036
1062
  }
1037
1063
  }
1038
- /* Vue Transition Styles - Only used in Vue component */
1039
- .bs-toast-deprecated:where(.bs-toast-enter-from),
1040
- .bs-toast-deprecated:where(.bs-toast-leave-to) {
1064
+ /*
1065
+ ---------------------------
1066
+ DEPRECATED BS FLYOUT
1067
+ ---------------------------
1068
+ */
1069
+ .bs-flyout-deprecated {
1070
+ background-color: var(--bs-bg-base-to-light);
1071
+ box-shadow: var(--bs-shadow-drawerRight);
1072
+ height: 100%;
1073
+ left: 0;
1074
+ margin: 0;
1075
+ max-width: 100vw;
1041
1076
  opacity: 0;
1042
- transform: var(--toast-transform);
1077
+ padding: 1.5rem;
1078
+ position: fixed;
1079
+ top: 0;
1080
+ transform: translateX(-100%);
1081
+ transition-duration: var(--bs-transition-leisurely);
1082
+ transition-property: opacity, transform;
1083
+ transition-timing-function: var(--bs-transition-ease);
1084
+ width: 360px;
1085
+ z-index: 1000;
1043
1086
  }
1044
- .bs-toast-deprecated:where(.bs-toast-enter-to),
1045
- .bs-toast-deprecated:where(.bs-toast-leave-from) {
1087
+ .bs-flyout-deprecated:where([data-absolute="true"]) {
1088
+ position: absolute;
1089
+ }
1090
+ .bs-flyout-deprecated:where([data-position="right"]) {
1091
+ box-shadow: var(--bs-shadow-drawerLeft);
1092
+ left: auto;
1093
+ right: 0;
1094
+ transform: translateX(100%);
1095
+ }
1096
+ .bs-flyout-deprecated:where([data-size="lg"]) {
1097
+ width: 535px;
1098
+ }
1099
+ .bs-flyout-deprecated:where([data-shown="true"]) {
1046
1100
  opacity: 1;
1047
- transform: translate(0, 0);
1101
+ /*
1102
+ Needs to be "none" instead of "0" so as not to interfere with calculating
1103
+ "containing block" for absolute and fixed positioned elements (see https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block)
1104
+ */
1105
+ transform: none;
1048
1106
  }
1049
- /* Container for holding all toasts that will be visible */
1050
- .bs-toaster-deprecated {
1051
- /* Mobile - Center the toasts on the screen */
1052
- align-items: center;
1053
- bottom: 1.5rem;
1054
- display: flex;
1055
- flex-direction: column-reverse;
1056
- gap: 0.5rem;
1057
- left: 0;
1058
- position: fixed;
1059
- right: 0;
1060
- z-index: 999;
1107
+ .bs-flyout-deprecated :where(.bs-flyout-deprecated-close-container) {
1108
+ display: flex;
1109
+ justify-content: flex-end;
1061
1110
  }
1062
- @media (min-width: 440px) {
1063
-
1064
- .bs-toaster-deprecated {
1065
- /* Non-mobile - Toasts will live on right side of the screen */
1066
- left: auto;
1067
- right: 1.5rem;
1068
- }
1069
-
1111
+ .bs-flyout-deprecated :where(.bs-flyout-deprecated-close-container button) {
1112
+ cursor: pointer;
1113
+ outline-offset: 2px;
1114
+ padding: 2px;
1115
+ }
1116
+ /* Vue Transition Styles - Only used in Vue component */
1117
+ .bs-flyout-deprecated:where(.bs-flyout-deprecated-enter-from),
1118
+ .bs-flyout-deprecated:where(.bs-flyout-deprecated-leave-to) {
1119
+ opacity: 0;
1120
+ transform: translateX(-100%);
1121
+ }
1122
+ .bs-flyout-deprecated:where([data-position="right"].bs-flyout-deprecated-enter-from),
1123
+ .bs-flyout-deprecated:where([data-position="right"].bs-flyout-deprecated-leave-to) {
1124
+ transform: translateX(100%);
1125
+ }
1126
+ .bs-flyout-deprecated:where(.bs-flyout-deprecated-enter-to),
1127
+ .bs-flyout-deprecated:where(.bs-flyout-deprecated-leave-from) {
1128
+ opacity: 1;
1129
+ transform: translateX(0);
1070
1130
  }
1071
1131
  /*
1072
1132
  ---------------------------
1073
- DEPRECATED BS TOOLTIP
1133
+ DEPRECATED BS MODAL
1074
1134
  ---------------------------
1075
1135
  */
1076
- /* -------------------- BASE STYLES -------------------- */
1077
- .bs-tooltip-deprecated {
1078
- display: inline-block;
1079
- position: relative;
1080
- }
1081
- .bs-tooltip-deprecated :where(.bs-tooltip-deprecated-text) {
1082
- align-items: center;
1083
- background-color: var(--bs-bg-base-to-light);
1136
+ .bs-modal-deprecated {
1137
+ --base-modal-width: 35rem; /* 560px */
1138
+ --lg-modal-padding: 2rem; /* 32px */
1139
+ --lg-modal-width: 45.3125rem; /* 725px */
1140
+ --modal-padding: 1.5rem; /* 24px */
1141
+ --sm-modal-width: 21.25rem; /* 340px */
1142
+ background-color: var(--bs-bg-base-to-medium);
1084
1143
  border-radius: 4px;
1085
- box-shadow: var(--bs-shadow-contentLowCenter);
1086
- color: var(--bs-ink-violet);
1144
+ bottom: 0;
1145
+ box-shadow: var(--bs-shadow-contentHigh);
1087
1146
  display: flex;
1088
- font-size: var(--bs-text-sm);
1089
- justify-content: center;
1090
- max-width: 16rem;
1091
- min-width: 4rem;
1147
+ flex-direction: column;
1148
+ height: -moz-fit-content;
1149
+ height: fit-content;
1150
+ left: 0;
1151
+ margin: auto;
1152
+ max-height: calc(100% - 3rem);
1092
1153
  opacity: 0;
1093
- padding-bottom: 0.25rem;
1094
- padding-left: 0.5rem;
1095
- padding-right: 0.5rem;
1096
- padding-top: 0.25rem;
1097
- position: absolute;
1098
- transform: scale(0);
1154
+ overflow: auto;
1155
+ position: fixed;
1156
+ right: 0;
1157
+ top: 0;
1099
1158
  transition-duration: var(--bs-transition-quick);
1100
- transition-property: opacity, transform;
1159
+ transition-property: opacity;
1101
1160
  transition-timing-function: var(--bs-transition-ease);
1102
- width: -moz-max-content;
1103
- width: max-content;
1104
- z-index: 999;
1105
- }
1106
- :where(.dark) .bs-tooltip :where(.bs-tooltip-text) {
1107
- color: var(--bs-ink-base);
1161
+ width: calc(100% - 3rem);
1162
+ z-index: 9999;
1108
1163
  }
1109
- /* -------------------- POSITION: UNDEFINED / TOP -------------------- */
1110
- .bs-tooltip-deprecated:where(:not([data-position])) :where(.bs-tooltip-deprecated-text),
1111
- .bs-tooltip-deprecated:where([data-position="top"]) :where(.bs-tooltip-deprecated-text) {
1112
- bottom: calc(100% + 0.5rem);
1113
- left: 50%;
1114
- transform-origin: bottom center;
1115
- transform: translateX(-50%) scale(0);
1164
+ @media (min-width: 752px) {
1165
+ .bs-modal-deprecated {
1166
+ max-height: min(calc(100dvh - 3rem), 40.625rem);
1167
+ width: var(--base-modal-width);
1168
+ }
1169
+
1170
+ .bs-modal-deprecated:where([data-size="sm"]) {
1171
+ width: var(--sm-modal-width);
1172
+ }
1173
+
1174
+ .bs-modal-deprecated:where([data-size="lg"]) {
1175
+ width: var(--lg-modal-width);
1176
+ }
1116
1177
  }
1117
- /* Active States */
1118
- :where(.bs-tooltip-deprecated:not([data-position])):hover :where(.bs-tooltip-deprecated-text),
1119
- :where(.bs-tooltip-deprecated[data-position="top"]):hover :where(.bs-tooltip-deprecated-text),
1120
- :where(.bs-tooltip-deprecated:not([data-position])):has(:focus-visible) :where(.bs-tooltip-deprecated-text),
1121
- :where(.bs-tooltip-deprecated[data-position="top"]):has(:focus-visible) :where(.bs-tooltip-deprecated-text),
1122
- :where(.bs-tooltip-deprecated:not([data-position]))[data-shown] :where(.bs-tooltip-deprecated-text),
1123
- :where(.bs-tooltip-deprecated[data-position="top"])[data-shown] :where(.bs-tooltip-deprecated-text) {
1178
+ .bs-modal-deprecated:where([data-shown="true"]) {
1124
1179
  opacity: 1;
1125
- transform: translateX(-50%) scale(1);
1126
1180
  }
1127
- /* -------------------- POSITION: BOTTOM -------------------- */
1128
- .bs-tooltip-deprecated:where([data-position="bottom"]) :where(.bs-tooltip-deprecated-text) {
1129
- left: 50%;
1130
- top: calc(100% + 0.5rem);
1131
- transform-origin: top center;
1132
- transform: translateX(-50%) scale(0);
1133
- }
1134
- /* Active States */
1135
- :where(.bs-tooltip-deprecated[data-position="bottom"]):hover :where(.bs-tooltip-deprecated-text),
1136
- :where(.bs-tooltip-deprecated[data-position="bottom"]):has(:focus-visible) :where(.bs-tooltip-deprecated-text),
1137
- :where(.bs-tooltip-deprecated[data-position="bottom"])[data-shown] :where(.bs-tooltip-deprecated-text) {
1138
- opacity: 1;
1139
- transform: translateX(-50%) scale(1);
1181
+ /* Header Container */
1182
+ .bs-modal-deprecated :where(.bs-modal-deprecated-header-container) {
1183
+ padding: var(--modal-padding);
1140
1184
  }
1141
- /* -------------------- POSITION: LEFT -------------------- */
1142
- .bs-tooltip-deprecated:where([data-position="left"]) :where(.bs-tooltip-deprecated-text) {
1143
- right: calc(100% + 0.5rem);
1144
- top: 50%;
1145
- transform-origin: center right;
1146
- transform: translateY(-50%) scale(0);
1147
- }
1148
- /* Active States */
1149
- :where(.bs-tooltip-deprecated[data-position="left"]):hover :where(.bs-tooltip-deprecated-text),
1150
- :where(.bs-tooltip-deprecated[data-position="left"]):has(:focus-visible) :where(.bs-tooltip-deprecated-text),
1151
- :where(.bs-tooltip-deprecated[data-position="left"])[data-shown] :where(.bs-tooltip-deprecated-text) {
1152
- opacity: 1;
1153
- transform: translateY(-50%) scale(1);
1154
- }
1155
- /* -------------------- POSITION: RIGHT -------------------- */
1156
- .bs-tooltip-deprecated:where([data-position="right"]) :where(.bs-tooltip-deprecated-text) {
1157
- left: calc(100% + 0.5rem);
1158
- top: 50%;
1159
- transform-origin: center left;
1160
- transform: translateY(-50%) scale(0);
1161
- }
1162
- :where(.bs-tooltip-deprecated[data-position="right"]):hover :where(.bs-tooltip-deprecated-text),
1163
- :where(.bs-tooltip-deprecated[data-position="right"]):has(:focus-visible) :where(.bs-tooltip-deprecated-text),
1164
- :where(.bs-tooltip-deprecated[data-position="right"])[data-shown] :where(.bs-tooltip-deprecated-text) {
1165
- opacity: 1;
1166
- transform: translateY(-50%) scale(1);
1167
- }
1168
- /* -------------------- POSITION: CORNERS -------------------- */
1169
- /* top-left */
1170
- .bs-tooltip-deprecated:where([data-position="top-left"]) :where(.bs-tooltip-deprecated-text) {
1171
- bottom: calc(100% + 0.5rem);
1172
- right: calc(100% + 0.5rem);
1173
- transform-origin: bottom right;
1174
- }
1175
- /* top-right */
1176
- .bs-tooltip-deprecated:where([data-position="top-right"]) :where(.bs-tooltip-deprecated-text) {
1177
- bottom: calc(100% + 0.5rem);
1178
- left: calc(100% + 0.5rem);
1179
- transform-origin: bottom left;
1180
- }
1181
- /* bottom-left */
1182
- .bs-tooltip-deprecated:where([data-position="bottom-left"]) :where(.bs-tooltip-deprecated-text) {
1183
- right: calc(100% + 0.5rem);
1184
- top: calc(100% + 0.5rem);
1185
- transform-origin: top right;
1185
+ .bs-modal-deprecated:where([data-size="lg"]) :where(.bs-modal-deprecated-header-container) {
1186
+ padding: var(--lg-modal-padding);
1186
1187
  }
1187
- /* bottom-right */
1188
- .bs-tooltip-deprecated:where([data-position="bottom-right"]) :where(.bs-tooltip-deprecated-text) {
1189
- left: calc(100% + 0.5rem);
1190
- top: calc(100% + 0.5rem);
1191
- transform-origin: top left;
1188
+ .bs-modal-deprecated:where([data-header-border="true"]) :where(.bs-modal-deprecated-header-container) {
1189
+ border-bottom: 1px solid var(--bs-border-base);
1192
1190
  }
1193
- /* Active States */
1194
- :where(.bs-tooltip-deprecated[data-position="top-left"]):hover :where(.bs-tooltip-deprecated-text),
1195
- :where(.bs-tooltip-deprecated[data-position="top-right"]):hover :where(.bs-tooltip-deprecated-text),
1196
- :where(.bs-tooltip-deprecated[data-position="bottom-left"]):hover :where(.bs-tooltip-deprecated-text),
1197
- :where(.bs-tooltip-deprecated[data-position="bottom-right"]):hover :where(.bs-tooltip-deprecated-text),
1198
- :where(.bs-tooltip-deprecated[data-position="top-left"]):has(:focus-visible) :where(.bs-tooltip-deprecated-text),
1199
- :where(.bs-tooltip-deprecated[data-position="top-right"]):has(:focus-visible) :where(.bs-tooltip-deprecated-text),
1200
- :where(.bs-tooltip-deprecated[data-position="bottom-left"]):has(:focus-visible) :where(.bs-tooltip-deprecated-text),
1201
- :where(.bs-tooltip-deprecated[data-position="bottom-right"]):has(:focus-visible) :where(.bs-tooltip-deprecated-text),
1202
- :where(.bs-tooltip-deprecated[data-position="top-left"]:not([data-shown="false"]))[data-shown] :where(.bs-tooltip-deprecated-text),
1203
- :where(.bs-tooltip-deprecated[data-position="top-right"]:not([data-shown="false"]))[data-shown] :where(.bs-tooltip-deprecated-text),
1204
- :where(.bs-tooltip-deprecated[data-position="bottom-left"]:not([data-shown="false"]))[data-shown] :where(.bs-tooltip-deprecated-text),
1205
- :where(.bs-tooltip-deprecated[data-position="bottom-right"]:not([data-shown="false"]))[data-shown] :where(.bs-tooltip-deprecated-text) {
1206
- opacity: 1;
1207
- transform: scale(1);
1191
+ .bs-modal-deprecated:where([data-full-width="true"]) :where(.bs-modal-deprecated-header-container) {
1192
+ padding-left: 0;
1193
+ padding-right: 0;
1208
1194
  }
1209
- /* -------------------- DISABLED -------------------- */
1210
- /*
1211
- Don't display unless data-shown is present
1212
- This must go last to properly override the other classes
1213
- */
1214
- :where(.bs-tooltip-deprecated[data-disabled]:not([data-disabled="false"]):not([data-shown])):hover :where(.bs-tooltip-deprecated-text),
1215
- :where(.bs-tooltip-deprecated[data-disabled]:not([data-disabled="false"]):not([data-shown])):has(:focus-visible) :where(.bs-tooltip-deprecated-text) {
1216
- opacity: 0;
1217
- transform: scale(0);
1195
+ /* Header Row */
1196
+ .bs-modal-deprecated :where(.bs-modal-deprecated-header) {
1197
+ align-items: center;
1198
+ display: flex;
1199
+ justify-content: space-between;
1218
1200
  }
1219
- :where(.bs-tooltip-deprecated[data-shown="false"][data-disabled]:not([data-disabled="false"])):hover :where(.bs-tooltip-deprecated-text),
1220
- :where(.bs-tooltip-deprecated[data-shown="false"][data-disabled]:not([data-disabled="false"])):has(:focus-visible) :where(.bs-tooltip-deprecated-text) {
1221
- opacity: 0;
1222
- transform: scale(0);
1201
+ /* Title */
1202
+ .bs-modal-deprecated :where(.bs-modal-deprecated-title) {
1203
+ flex-grow: 1;
1204
+ font-size: var(--bs-text-lg);
1205
+ font-weight: 400;
1206
+ margin-right: 2rem;
1223
1207
  }
1224
- /* -------------------- COMPONENT-SPECIFIC STYLES -------------------- */
1225
- .bs-tooltip-deprecated :where(.bs-tooltip-deprecated-text.escaped) {
1226
- opacity: 0;
1227
- transform: scale(0.5);
1208
+ /* Subtitle */
1209
+ .bs-modal-deprecated :where(.bs-modal-deprecated-subtitle) {
1210
+ font-size: var(--bs-text-sm);
1211
+ font-weight: 400;
1212
+ margin-top: 0.5rem;
1213
+ width: 100%;
1228
1214
  }
1229
- .bs-tooltip-deprecated :where(.bs-tooltip-deprecated-text.escaped-x) {
1230
- opacity: 0;
1231
- transform: translateX(-50%) scale(0.5);
1215
+ /* Close Button */
1216
+ .bs-modal-deprecated :where(.bs-modal-deprecated-close-button) {
1217
+ background-color: transparent;
1218
+ cursor: pointer;
1219
+ z-index: 10000;
1232
1220
  }
1233
- .bs-tooltip-deprecated :where(.bs-tooltip-deprecated-text.escaped-y) {
1234
- opacity: 0;
1235
- transform: translateY(-50%) scale(0.5);
1221
+ .bs-modal-deprecated:where(:not(:has(.bs-modal-deprecated-header-container))) :where(.bs-modal-deprecated-close-button) {
1222
+ position: absolute;
1223
+ right: 1rem;
1224
+ top: 1rem;
1236
1225
  }
1237
- .bs-accordion {
1238
- --accordion-link-color: var(--bs-purple-400);
1239
- --accordion-link-outline-color: var(--bs-blue-base);
1240
- --accordion-outline-color: transparent;
1241
- --accordion-padding-inline: 0;
1242
- --accordion-text-size: var(--bs-text-sm);
1243
- border-block: 1px solid var(--bs-border-base);
1244
- display: block;
1226
+ .bs-modal-deprecated:where([data-full-width="true"]:has(> .bs-modal-deprecated-header-container)) :where(.bs-modal-deprecated-close-button) {
1227
+ margin-right: var(--modal-padding);
1245
1228
  }
1246
- @media (min-width: 957px) {
1247
- .bs-accordion {
1248
- --accordion-padding-inline: var(--bs-space-2);
1249
- --accordion-text-size: var(--bs-text-base);
1250
- }
1229
+ .bs-modal-deprecated:where([data-full-width="true"][data-size="lg"]:has(> .bs-modal-deprecated-header-container)) :where(.bs-modal-deprecated-close-button) {
1230
+ margin-right: var(--lg-modal-padding);
1251
1231
  }
1252
- /* Accordion Panel (Icon, Title, Caret) */
1253
- .bs-accordion :where(.bs-accordion-toggle),
1254
- .bs-accordion > :where(header) > :where(button) {
1255
- align-items: center;
1256
- background-color: var(--bs-bg-base);
1257
- border: 0px solid transparent;
1258
- border-radius: .25rem;
1259
- color: var(--bs-ink-base);
1260
- cursor: pointer;
1261
- display: grid;
1262
- font-size: var(--accordion-text-size);
1263
- font-weight: var(--bs-font-normal);
1264
- grid-template-columns: minmax(0px, auto) minmax(0px, 1fr) minmax(0px, auto);
1265
- grid-template-areas: "start main end";
1266
- line-height: 1.5;
1267
- outline: 2px solid var(--accordion-outline-color);
1268
- padding: var(--bs-space-0);
1269
- padding-block: clamp(0.5rem, calc(0.38rem + 0.5vw), 0.75rem);
1270
- padding-inline: var(--accordion-padding-inline);
1271
- text-decoration: none;
1232
+ /* Progress */
1233
+ .bs-modal-deprecated :where(.bs-modal-deprecated-progress) {
1234
+ margin-top: 1.5rem;
1272
1235
  width: 100%;
1273
1236
  }
1274
- .bs-accordion :where(.bs-accordion-toggle:focus-visible),
1275
- .bs-accordion > :where(header) > :where(button:focus-visible) {
1276
- --accordion-outline-color: var(--bs-blue-base);
1277
- }
1278
- .bs-accordion :where(.bs-accordion-toggle) > *,
1279
- .bs-accordion > :where(header) > :where(button) > * {
1280
- font-size: inherit;
1281
- font-weight: inherit;
1282
- line-height: inherit;
1237
+ /* Body */
1238
+ .bs-modal-deprecated :where(.bs-modal-deprecated-body) {
1239
+ overflow-y: auto;
1240
+ padding: var(--modal-padding);
1283
1241
  }
1284
- .bs-accordion :where(.bs-accordion-toggle) > *,
1285
- .bs-accordion > :where(header) > :where(button) > * {
1286
- grid-area: main;
1287
- margin-right: var(--bs-space-2);
1288
- text-align: left;
1242
+ .bs-modal-deprecated:where([data-full-height="true"]) :where(.bs-modal-deprecated-body) {
1243
+ padding-bottom: 0;
1244
+ padding-top: 0;
1289
1245
  }
1290
- .bs-accordion :where(.bs-accordion-toggle) > *,
1291
- .bs-accordion > :where(header) > :where(button) > * {
1292
- vertical-align: middle;
1246
+ .bs-modal-deprecated:where([data-full-width="true"]) :where(.bs-modal-deprecated-body) {
1247
+ padding-left: 0;
1248
+ padding-right: 0;
1293
1249
  }
1294
- @media (min-width: 957px) {
1295
- .bs-accordion :where(.bs-accordion-toggle) > * ,
1296
- .bs-accordion > :where(header) > :where(button) > * {
1297
- margin-right: var(--bs-space-3);
1298
- }
1250
+ /* Has header, but no header border */
1251
+ .bs-modal-deprecated:where(:not([data-header-border]):has(> .bs-modal-deprecated-header-container)) :where(.bs-modal-deprecated-body),
1252
+ .bs-modal-deprecated:where([data-header-border="false"]:has(> .bs-modal-deprecated-header-container)) :where(.bs-modal-deprecated-body) {
1253
+ padding-top: 0;
1299
1254
  }
1300
- .bs-accordion :where(.bs-accordion-toggle) :where([data-position]),
1301
- .bs-accordion > :where(header) > :where(button) :where([data-position]) {
1302
- width: var(--accordion-text-size);
1255
+ /* Has footer, but no footer border */
1256
+ .bs-modal-deprecated:where(:not([data-footer-border])) :where(.bs-modal-deprecated-body:has(~ .bs-modal-deprecated-footer)),
1257
+ .bs-modal-deprecated:where([data-footer-border="false"]) :where(.bs-modal-deprecated-body:has(~ .bs-modal-deprecated-footer)) {
1258
+ padding-bottom: 0;
1303
1259
  }
1304
- .bs-accordion :where(.bs-accordion-toggle) > :where([data-position="start"]),
1305
- .bs-accordion > :where(header) > :where(button) > :where([data-position="start"]) {
1306
- grid-area: start;
1307
- margin-right: var(--bs-space-2);
1260
+ .bs-modal-deprecated:where([data-body-background-contrast="true"]) :where(.bs-modal-deprecated-body) {
1261
+ background-color: var(--bs-bg-light);
1308
1262
  }
1309
- .bs-accordion :where(.bs-accordion-toggle) > :where([data-position="end"]),
1310
- .bs-accordion > :where(header) > :where(button) > :where([data-position="end"]) {
1311
- grid-area: end;
1312
- transform: rotate(0);
1313
- transition: transform var(--bs-transition-medium) var(--bs-transition-ease);
1263
+ /* Footer */
1264
+ .bs-modal-deprecated :where(.bs-modal-deprecated-footer) {
1265
+ padding-bottom: 1rem;
1266
+ padding-left: var(--modal-padding);
1267
+ padding-right: var(--modal-padding);
1268
+ padding-top: 1rem;
1314
1269
  }
1315
- .bs-accordion > :where(header[data-open]:not([data-open="false"])) :where([data-position="end"]) {
1316
- transform: rotate(180deg);
1270
+ .bs-modal-deprecated:where([data-size="lg"]) :where(.bs-modal-deprecated-footer) {
1271
+ padding-bottom: 1.5rem;
1272
+ padding-left: var(--lg-modal-padding);
1273
+ padding-right: var(--lg-modal-padding);
1274
+ padding-top: 1.5rem;
1317
1275
  }
1318
- /* Accordion Content (the collapsible / expandible part) */
1319
- .bs-accordion :where(.bs-accordion-content) {
1320
- display: grid;
1321
- font-size: var(--accordion-text-size);
1322
- grid-template-rows: 0fr;
1323
- overflow: hidden;
1324
- padding-inline: var(--accordion-padding-inline);
1325
- transition: grid-template-rows var(--bs-transition-slow) var(--bs-transition-ease);
1276
+ .bs-modal-deprecated:where([data-footer-border="true"]) :where(.bs-modal-deprecated-footer) {
1277
+ border-top: 1px solid var(--bs-border-base);
1326
1278
  }
1327
- .bs-accordion :where(.bs-accordion-content) > :where(:first-child) {
1328
- overflow: hidden;
1279
+ .bs-modal-deprecated:where([data-full-width="true"]) :where(.bs-modal-deprecated-footer) {
1280
+ padding-left: 0;
1281
+ padding-right: 0;
1329
1282
  }
1330
- .bs-accordion :where(.bs-accordion-content[data-open]:not([data-open="false"])) {
1331
- grid-template-rows: 1fr;
1332
- padding-block-end: var(--bs-space-f-2);
1283
+ /* Vue Transition Styles - Only used in Vue component */
1284
+ .bs-modal-deprecated:where(.bs-modal-deprecated-enter-from),
1285
+ .bs-modal-deprecated:where(.bs-modal-deprecated-leave-to) {
1286
+ opacity: 0;
1333
1287
  }
1334
- /* Accordion Group */
1335
- :where(.bs-accordion[data-stacked]:not([data-stacked="false"])) + .bs-accordion:where([data-stacked]:not([data-stacked="false"])) {
1336
- border-block-start-color: transparent;
1288
+ .bs-modal-deprecated:where(.bs-modal-deprecated-enter-to),
1289
+ .bs-modal-deprecated:where(.bs-modal-deprecated-leave-from) {
1290
+ opacity: 1;
1337
1291
  }
1338
- .bs-alert {
1339
- /* bs-blue-100 @ 10% */
1340
- background-color: #99cff71a;
1341
- border-radius: 8px;
1342
- border: 2px solid var(--bs-ink-blue);
1343
- -moz-column-gap: 0.75rem;
1344
- column-gap: 0.75rem;
1345
- display: grid;
1346
- grid-template-columns: 1.125rem 1fr 1rem;
1347
- grid-template-areas: "icon title close"
1348
- ". description ."
1349
- ". action .";
1350
- padding: 1rem;
1351
- }
1352
- @media (min-width: 752px) {
1353
- .bs-alert {
1354
- padding: 1.5rem;
1355
- grid-template-columns: 1.25rem 1fr 1rem;
1356
- grid-template-areas: "icon title close"
1357
- ". description ."
1358
- ". action .";
1359
- }
1292
+ /* Base Toast Styles */
1293
+ .bs-toast-deprecated {
1294
+ --toast-transform: translate(0, calc(100% + 1.5rem));
1295
+
1296
+ background-color: var(--bs-bg-base-to-light);
1297
+ border-top: 4px solid var(--bs-blue-base);
1298
+ bottom: 1.5rem;
1299
+ box-shadow: var(--bs-shadow-contentMedium);
1300
+ left: 0;
1301
+ margin-left: 1.5rem;
1302
+ margin-right: 1.5rem;
1303
+ opacity: 0;
1304
+ position: fixed;
1305
+ right: 0;
1306
+ transform: var(--toast-transform);
1307
+ transition-duration: var(--bs-transition-medium);
1308
+ transition-property: transform, opacity;
1309
+ transition-timing-function: var(--bs-transition-ease);
1310
+ /* Clamp width for mobile -> full screen */
1311
+ width: clamp(17rem, calc(100vw - 3rem), 25rem);
1312
+ z-index: 999;
1360
1313
  }
1361
- @media (min-width: 752px) {
1362
- .bs-alert:where([data-horizontal="true"]) {
1363
- padding: 1rem 1.5rem;
1364
- grid-template-areas: "icon title action close";
1365
- grid-template-columns: 1.125rem max-content 1fr 1rem;
1366
- }
1314
+ .bs-toast-deprecated:where([data-stacked]:not([data-stacked="false"])) {
1315
+ bottom: auto;
1316
+ left: auto;
1317
+ position: static;
1318
+ right: auto;
1319
+ z-index: auto;
1367
1320
  }
1368
- .bs-alert :where(.bs-alert-icon) {
1369
- margin-top: 0.25rem;
1370
- align-self: start;
1371
- color: var(--bs-ink-blue);
1372
- grid-area: icon;
1373
- height: 1.125rem;
1374
- width: 1.125rem;
1321
+ /* Mobile - Toast comes up from bottom */
1322
+ .bs-toast-deprecated:where([data-shown]:not([data-shown="false"])) {
1323
+ opacity: 1;
1324
+ transform: translate(0, 0);
1375
1325
  }
1376
- .bs-alert :where(.bs-alert-title) {
1377
- font-size: 1.125rem;
1378
- line-height: 1.3;
1326
+ .bs-toast-header-deprecated {
1327
+ align-items: center;
1379
1328
  color: var(--bs-ink-base);
1380
- grid-area: title;
1329
+ display: flex;
1330
+ gap: 0.5rem;
1331
+ padding: 1rem;
1381
1332
  }
1382
- @media (min-width: 752px) {
1383
- .bs-alert :where(.bs-alert-title) {
1384
- font-size: 1.25rem;
1385
- line-height: 1.3;
1386
- }
1387
-
1388
- .bs-alert:where([data-horizontal="true"]) :where(.bs-alert-title) {
1389
- font-size: 1.125rem;
1390
- line-height: 1.5;
1391
- }
1392
-
1393
- .bs-alert:where(:not([data-horizontal="true"])) :where(.bs-alert-icon) {
1394
- height: 1.25rem;
1395
- width: 1.25rem;
1396
- }
1333
+ .bs-toast-header-deprecated :where(.bs-toast-header-icon-deprecated) {
1334
+ color: var(--bs-blue-base);
1397
1335
  }
1398
- .bs-alert :where(.bs-alert-description) {
1399
- font-size: 0.875rem;
1400
- color: var(--bs-ink-medium);
1401
- grid-area: description;
1402
- margin-top: 0.5rem;
1336
+ .bs-toast-header-deprecated :where(h5) {
1337
+ font-weight: 400;
1403
1338
  }
1404
- @media (min-width: 752px) {
1405
- .bs-alert :where(.bs-alert-description) {
1406
- font-size: 1rem;
1407
- }
1339
+ .bs-toast-body-deprecated {
1340
+ border-bottom: 1px solid var(--bs-border-base);
1341
+ color: var(--bs-ink-light);
1342
+ padding-bottom: 1rem;
1343
+ padding-left: 1rem;
1344
+ padding-right: 1rem;
1408
1345
  }
1409
- .bs-alert:where([data-horizontal="true"]) :where(.bs-alert-description) {
1410
- display: none;
1346
+ .bs-toast-actions-deprecated {
1347
+ /* Mobile - Buttons will be stacked */
1348
+ display: flex;
1349
+ flex-direction: row;
1350
+ gap: 1rem;
1351
+ justify-content: flex-end;
1352
+ padding-bottom: 0.5rem;
1353
+ padding-left: 1rem;
1354
+ padding-right: 1rem;
1355
+ padding-top: 0.5rem;
1411
1356
  }
1412
- .bs-alert :where(.bs-alert-close) {
1413
- margin-top: 0.25rem;
1414
- align-self: start;
1415
- background-color: transparent;
1416
- cursor: pointer;
1417
- grid-area: close;
1418
- height: 1rem;
1419
- width: 1rem;
1357
+ .bs-toast-actions-deprecated:where([data-stacked]:not([data-stacked="false"])) {
1358
+ flex-direction: column-reverse;
1420
1359
  }
1421
- .bs-alert :where(.bs-alert-action) {
1422
- grid-area: action;
1423
- margin-top: 1rem;
1360
+ /* Warning Toast Styles */
1361
+ .bs-toast-deprecated:where([data-variant^='warning']) {
1362
+ border-top: 4px solid var(--bs-warning);
1424
1363
  }
1425
- @media (min-width: 752px) {
1426
- .bs-alert:where([data-horizontal="true"]) :where(.bs-alert-action) {
1427
- margin-top: 0;
1428
- }
1364
+ .bs-toast-deprecated:where([data-variant^='warning']) :where(.bs-toast-header-deprecated .bs-toast-header-icon-deprecated) {
1365
+ color: var(--bs-warning);
1429
1366
  }
1430
- /* COLOR VARIANTS */
1431
- .bs-alert:where([data-variant="success"]) {
1432
- /* bs-purple-100 @ 10% */
1433
- background-color: #e0c5ef1a;
1434
- border-color: var(--bs-ink-purple);
1367
+ /* Positive Toast Styles */
1368
+ .bs-toast-deprecated:where([data-variant^='positive']) {
1369
+ border-top: 4px solid var(--bs-purple-400);
1435
1370
  }
1436
- .bs-alert:where([data-variant="success"]) :where(.bs-alert-icon) {
1437
- color: var(--bs-ink-purple);
1371
+ .bs-toast-deprecated:where([data-variant^='positive']) :where(.bs-toast-header-deprecated .bs-toast-header-icon-deprecated) {
1372
+ color: var(--bs-purple-400);
1438
1373
  }
1439
- .bs-alert:where([data-variant="warning"]) {
1440
- /* bs-orange-100 @ 10% */
1441
- background-color: #f3c4a81a;
1442
- border-color: var(--bs-ink-orange);
1374
+ :where(.dark) .bs-toast-deprecated:where([data-variant^='positive']) {
1375
+ border-top: 4px solid var(--bs-purple-200);
1443
1376
  }
1444
- .bs-alert:where([data-variant="warning"]) :where(.bs-alert-icon) {
1445
- color: var(--bs-ink-orange);
1377
+ :where(.dark) .bs-toast-deprecated:where([data-variant^='positive']) :where(.bs-toast-header-deprecated .bs-toast-header-icon-deprecated) {
1378
+ color: var(--bs-purple-200);
1446
1379
  }
1447
- .bs-alert:where([data-variant="negative"]) {
1448
- /* bs-red-100 @ 10% */
1449
- background-color: #f8a9aa1a;
1450
- border-color: var(--bs-ink-red);
1380
+ /* Negative Toast Styles */
1381
+ .bs-toast-deprecated:where([data-variant^='negative']) {
1382
+ border-top: 4px solid var(--bs-red-400);
1451
1383
  }
1452
- .bs-alert:where([data-variant="negative"]) :where(.bs-alert-icon) {
1453
- color: var(--bs-ink-red);
1384
+ .bs-toast-deprecated:where([data-variant^='negative']) :where(.bs-toast-header-deprecated .bs-toast-header-icon-deprecated) {
1385
+ color: var(--bs-red-400);
1454
1386
  }
1455
- /* DARK MODE SPECIAL CASE */
1456
- .dark .bs-alert :where(.bs-alert-action) {
1457
- --btn-border-color-focused: var(--bs-text-base);
1458
- --btn-text-color: var(--bs-text-base);
1459
- --btn-text-color-hovered: var(--bs-text-base);
1387
+ @media (min-width: 440px) {
1388
+ .bs-toast-deprecated {
1389
+ --toast-transform: translate(calc(100% + 1.5rem), 0);
1390
+
1391
+ left: auto;
1392
+ margin-left: 0;
1393
+ margin-right: 0;
1394
+ opacity: 0;
1395
+ right: 1.5rem;
1396
+ }
1397
+
1398
+ .bs-toast-deprecated:where([data-shown]:not([data-shown="false"])) {
1399
+ opacity: 1;
1400
+ transform: translate(0, 0);
1401
+ }
1402
+
1403
+ .bs-toast-actions-deprecated:where([data-stacked]:not([data-stacked="false"])) {
1404
+ flex-direction: row;
1405
+ }
1460
1406
  }
1461
- .bs-backdrop {
1462
- position: fixed;
1463
- inset: 0;
1464
- -webkit-backdrop-filter: blur(4px);
1465
- backdrop-filter: blur(4px);
1466
- background: rgba(29, 30, 72, 0.05);
1467
- /*
1468
- Should be very rare, but below is an optional way for consumer to override z-index.
1469
- See note in popover.css for more info...most often (but still rare) the consumer
1470
- would override the --bs-popover-z-index instead, which would take care of this bs-backdrop too.
1471
- Should be a very very rare use case to need to override both independently to different values.
1472
- */
1473
- z-index: var(--bs-backdrop-z-index, var(--bs-popover-z-index));
1407
+ /* Vue Transition Styles - Only used in Vue component */
1408
+ .bs-toast-deprecated:where(.bs-toast-enter-from),
1409
+ .bs-toast-deprecated:where(.bs-toast-leave-to) {
1410
+ opacity: 0;
1411
+ transform: var(--toast-transform);
1474
1412
  }
1475
- .bs-badge {
1476
- --badge-bg: var(--bs-red-400);
1477
- --badge-text: var(--bs-white);
1478
- display: inline-block;
1413
+ .bs-toast-deprecated:where(.bs-toast-enter-to),
1414
+ .bs-toast-deprecated:where(.bs-toast-leave-from) {
1415
+ opacity: 1;
1416
+ transform: translate(0, 0);
1479
1417
  }
1480
- /* ------ Badge wrapped around text ------ */
1481
- /* Badge DOT */
1482
- .bs-badge:where([data-position^='left'])::before,
1483
- .bs-badge:where(:not([data-position^='left']))::after {
1484
- align-items: center;
1485
- background: var(--badge-bg);
1486
- border-radius: 0.5rem;
1487
- content: '';
1488
- display: inline-flex;
1489
- font-size: 0.8125rem;
1490
- font-weight: 600;
1491
- height: 6px;
1492
- justify-content: center;
1493
- line-height: 1.25;
1494
- position: relative;
1495
- vertical-align: top;
1496
- width: 6px;
1418
+ /* Container for holding all toasts that will be visible */
1419
+ .bs-toaster-deprecated {
1420
+ /* Mobile - Center the toasts on the screen */
1421
+ align-items: center;
1422
+ bottom: 1.5rem;
1423
+ display: flex;
1424
+ flex-direction: column-reverse;
1425
+ gap: 0.5rem;
1426
+ left: 0;
1427
+ position: fixed;
1428
+ right: 0;
1429
+ z-index: 999;
1497
1430
  }
1498
- .bs-pill .bs-badge::before,
1499
- .bs-pill .bs-badge::after {
1500
- font-size: 0.8125em;
1431
+ @media (min-width: 440px) {
1432
+
1433
+ .bs-toaster-deprecated {
1434
+ /* Non-mobile - Toasts will live on right side of the screen */
1435
+ left: auto;
1436
+ right: 1.5rem;
1437
+ }
1438
+
1501
1439
  }
1502
- /* Badge COUNT */
1503
- .bs-badge:where([data-count][data-position^='left'])::before,
1504
- .bs-badge:where([data-count]:not([data-position^='left']))::after {
1505
- color: var(--badge-text);
1506
- content: attr(data-count);
1507
- height: 1rem;
1508
- min-width: 1rem;
1509
- padding: 0 4px;
1510
- top: -0.0625rem;
1511
- vertical-align: unset;
1512
- width: auto;
1440
+ /*
1441
+ ---------------------------
1442
+ DEPRECATED BS TOOLTIP
1443
+ ---------------------------
1444
+ */
1445
+ /* -------------------- BASE STYLES -------------------- */
1446
+ .bs-tooltip-deprecated {
1447
+ display: inline-block;
1448
+ position: relative;
1513
1449
  }
1514
- .bs-badge:where([data-count='0'])::before,
1515
- .bs-badge:where([data-count='0'])::after {
1516
- display: none;
1450
+ .bs-tooltip-deprecated :where(.bs-tooltip-deprecated-text) {
1451
+ align-items: center;
1452
+ background-color: var(--bs-bg-base-to-light);
1453
+ border-radius: 4px;
1454
+ box-shadow: var(--bs-shadow-contentLowCenter);
1455
+ color: var(--bs-ink-violet);
1456
+ display: flex;
1457
+ font-size: var(--bs-text-sm);
1458
+ justify-content: center;
1459
+ max-width: 16rem;
1460
+ min-width: 4rem;
1461
+ opacity: 0;
1462
+ padding-bottom: 0.25rem;
1463
+ padding-left: 0.5rem;
1464
+ padding-right: 0.5rem;
1465
+ padding-top: 0.25rem;
1466
+ position: absolute;
1467
+ transform: scale(0);
1468
+ transition-duration: var(--bs-transition-quick);
1469
+ transition-property: opacity, transform;
1470
+ transition-timing-function: var(--bs-transition-ease);
1471
+ width: -moz-max-content;
1472
+ width: max-content;
1473
+ z-index: 999;
1517
1474
  }
1518
- .bs-badge:where([data-show-zero]):where(:not([data-show-zero="false"]))::before,
1519
- .bs-badge:where([data-show-zero]):where(:not([data-show-zero="false"]))::after {
1520
- display: inline-flex;
1475
+ :where(.dark) .bs-tooltip :where(.bs-tooltip-text) {
1476
+ color: var(--bs-ink-base);
1521
1477
  }
1522
- /* Badge SPACING against wrapped text */
1523
- .bs-badge::before {
1524
- margin-right: 0.25rem;
1478
+ /* -------------------- POSITION: UNDEFINED / TOP -------------------- */
1479
+ .bs-tooltip-deprecated:where(:not([data-position])) :where(.bs-tooltip-deprecated-text),
1480
+ .bs-tooltip-deprecated:where([data-position="top"]) :where(.bs-tooltip-deprecated-text) {
1481
+ bottom: calc(100% + 0.5rem);
1482
+ left: 50%;
1483
+ transform-origin: bottom center;
1484
+ transform: translateX(-50%) scale(0);
1525
1485
  }
1526
- .bs-badge::after {
1527
- margin-left: 0.25rem;
1486
+ /* Active States */
1487
+ :where(.bs-tooltip-deprecated:not([data-position])):hover :where(.bs-tooltip-deprecated-text),
1488
+ :where(.bs-tooltip-deprecated[data-position="top"]):hover :where(.bs-tooltip-deprecated-text),
1489
+ :where(.bs-tooltip-deprecated:not([data-position])):has(:focus-visible) :where(.bs-tooltip-deprecated-text),
1490
+ :where(.bs-tooltip-deprecated[data-position="top"]):has(:focus-visible) :where(.bs-tooltip-deprecated-text),
1491
+ :where(.bs-tooltip-deprecated:not([data-position]))[data-shown] :where(.bs-tooltip-deprecated-text),
1492
+ :where(.bs-tooltip-deprecated[data-position="top"])[data-shown] :where(.bs-tooltip-deprecated-text) {
1493
+ opacity: 1;
1494
+ transform: translateX(-50%) scale(1);
1528
1495
  }
1529
- /* Badge COLORS */
1530
- .bs-badge:where([data-badge-color^='blue']) {
1531
- --badge-bg: var(--bs-blue-base);
1496
+ /* -------------------- POSITION: BOTTOM -------------------- */
1497
+ .bs-tooltip-deprecated:where([data-position="bottom"]) :where(.bs-tooltip-deprecated-text) {
1498
+ left: 50%;
1499
+ top: calc(100% + 0.5rem);
1500
+ transform-origin: top center;
1501
+ transform: translateX(-50%) scale(0);
1532
1502
  }
1533
- .bs-badge:where([data-badge-color^='white']) {
1534
- --badge-bg: var(--bs-white);
1535
- --badge-text: var(--bs-black);
1503
+ /* Active States */
1504
+ :where(.bs-tooltip-deprecated[data-position="bottom"]):hover :where(.bs-tooltip-deprecated-text),
1505
+ :where(.bs-tooltip-deprecated[data-position="bottom"]):has(:focus-visible) :where(.bs-tooltip-deprecated-text),
1506
+ :where(.bs-tooltip-deprecated[data-position="bottom"])[data-shown] :where(.bs-tooltip-deprecated-text) {
1507
+ opacity: 1;
1508
+ transform: translateX(-50%) scale(1);
1536
1509
  }
1537
- /* ------ Standalone Badge (not wrapped around text) ------ */
1538
- .bs-badge:where([data-variant="notext"]) {
1539
- align-items: center;
1540
- display: inline-flex;
1541
- justify-content: center;
1510
+ /* -------------------- POSITION: LEFT -------------------- */
1511
+ .bs-tooltip-deprecated:where([data-position="left"]) :where(.bs-tooltip-deprecated-text) {
1512
+ right: calc(100% + 0.5rem);
1513
+ top: 50%;
1514
+ transform-origin: center right;
1515
+ transform: translateY(-50%) scale(0);
1542
1516
  }
1543
- .bs-badge:where([data-variant="notext"]) {
1544
- line-height: 1;
1517
+ /* Active States */
1518
+ :where(.bs-tooltip-deprecated[data-position="left"]):hover :where(.bs-tooltip-deprecated-text),
1519
+ :where(.bs-tooltip-deprecated[data-position="left"]):has(:focus-visible) :where(.bs-tooltip-deprecated-text),
1520
+ :where(.bs-tooltip-deprecated[data-position="left"])[data-shown] :where(.bs-tooltip-deprecated-text) {
1521
+ opacity: 1;
1522
+ transform: translateY(-50%) scale(1);
1545
1523
  }
1546
- .bs-badge:where([data-variant="notext"])::after,
1547
- .bs-badge:where([data-variant="notext"])::before {
1548
- margin: 0;
1549
- top: unset;
1524
+ /* -------------------- POSITION: RIGHT -------------------- */
1525
+ .bs-tooltip-deprecated:where([data-position="right"]) :where(.bs-tooltip-deprecated-text) {
1526
+ left: calc(100% + 0.5rem);
1527
+ top: 50%;
1528
+ transform-origin: center left;
1529
+ transform: translateY(-50%) scale(0);
1550
1530
  }
1551
- :where(.bs-banner) {
1552
- --banner-bg: var(--bs-royal-400);
1553
- --banner-icon-display: none;
1554
- --banner-padding: var(--banner-padding-m);
1555
- --banner-padding-m: 1rem 1.5rem;
1556
- --banner-padding-dt: .5rem 2.25rem;
1531
+ :where(.bs-tooltip-deprecated[data-position="right"]):hover :where(.bs-tooltip-deprecated-text),
1532
+ :where(.bs-tooltip-deprecated[data-position="right"]):has(:focus-visible) :where(.bs-tooltip-deprecated-text),
1533
+ :where(.bs-tooltip-deprecated[data-position="right"])[data-shown] :where(.bs-tooltip-deprecated-text) {
1534
+ opacity: 1;
1535
+ transform: translateY(-50%) scale(1);
1557
1536
  }
1558
- .bs-banner {
1559
- background-color: var(--banner-bg);
1560
- color: var(--bs-ink-white);
1561
- display: flex;
1562
- justify-content: center;
1563
- min-height: 3rem;
1564
- padding: var(--banner-padding);
1537
+ /* -------------------- POSITION: CORNERS -------------------- */
1538
+ /* top-left */
1539
+ .bs-tooltip-deprecated:where([data-position="top-left"]) :where(.bs-tooltip-deprecated-text) {
1540
+ bottom: calc(100% + 0.5rem);
1541
+ right: calc(100% + 0.5rem);
1542
+ transform-origin: bottom right;
1565
1543
  }
1566
- .bs-banner:where([data-dismissed]:not([data-dismissed="false"])) {
1567
- display: none;
1544
+ /* top-right */
1545
+ .bs-tooltip-deprecated:where([data-position="top-right"]) :where(.bs-tooltip-deprecated-text) {
1546
+ bottom: calc(100% + 0.5rem);
1547
+ left: calc(100% + 0.5rem);
1548
+ transform-origin: bottom left;
1568
1549
  }
1569
- .bs-banner :where(.bs-banner-content) {
1570
- align-items: center;
1571
- display: flex;
1572
- /* Content locks at globally configured width */
1573
- max-width: var(--bs-content-max-width);
1574
- width: 100%;
1550
+ /* bottom-left */
1551
+ .bs-tooltip-deprecated:where([data-position="bottom-left"]) :where(.bs-tooltip-deprecated-text) {
1552
+ right: calc(100% + 0.5rem);
1553
+ top: calc(100% + 0.5rem);
1554
+ transform-origin: top right;
1575
1555
  }
1576
- .bs-banner :where(.bs-banner-content .bs-banner-warning-icon) {
1577
- /* Do not display icon on smaller screens */
1578
- display: var(--banner-icon-display);
1579
- margin-right: 0.625rem;
1556
+ /* bottom-right */
1557
+ .bs-tooltip-deprecated:where([data-position="bottom-right"]) :where(.bs-tooltip-deprecated-text) {
1558
+ left: calc(100% + 0.5rem);
1559
+ top: calc(100% + 0.5rem);
1560
+ transform-origin: top left;
1580
1561
  }
1581
- .bs-banner :where(.bs-banner-content p) {
1582
- flex-grow: 1;
1583
- padding-right: 1.25rem;
1562
+ /* Active States */
1563
+ :where(.bs-tooltip-deprecated[data-position="top-left"]):hover :where(.bs-tooltip-deprecated-text),
1564
+ :where(.bs-tooltip-deprecated[data-position="top-right"]):hover :where(.bs-tooltip-deprecated-text),
1565
+ :where(.bs-tooltip-deprecated[data-position="bottom-left"]):hover :where(.bs-tooltip-deprecated-text),
1566
+ :where(.bs-tooltip-deprecated[data-position="bottom-right"]):hover :where(.bs-tooltip-deprecated-text),
1567
+ :where(.bs-tooltip-deprecated[data-position="top-left"]):has(:focus-visible) :where(.bs-tooltip-deprecated-text),
1568
+ :where(.bs-tooltip-deprecated[data-position="top-right"]):has(:focus-visible) :where(.bs-tooltip-deprecated-text),
1569
+ :where(.bs-tooltip-deprecated[data-position="bottom-left"]):has(:focus-visible) :where(.bs-tooltip-deprecated-text),
1570
+ :where(.bs-tooltip-deprecated[data-position="bottom-right"]):has(:focus-visible) :where(.bs-tooltip-deprecated-text),
1571
+ :where(.bs-tooltip-deprecated[data-position="top-left"]:not([data-shown="false"]))[data-shown] :where(.bs-tooltip-deprecated-text),
1572
+ :where(.bs-tooltip-deprecated[data-position="top-right"]:not([data-shown="false"]))[data-shown] :where(.bs-tooltip-deprecated-text),
1573
+ :where(.bs-tooltip-deprecated[data-position="bottom-left"]:not([data-shown="false"]))[data-shown] :where(.bs-tooltip-deprecated-text),
1574
+ :where(.bs-tooltip-deprecated[data-position="bottom-right"]:not([data-shown="false"]))[data-shown] :where(.bs-tooltip-deprecated-text) {
1575
+ opacity: 1;
1576
+ transform: scale(1);
1584
1577
  }
1585
- .bs-banner :where(.bs-banner-content p a) {
1586
- color: var(--bs-ink-white);
1587
- text-decoration: underline;
1578
+ /* -------------------- DISABLED -------------------- */
1579
+ /*
1580
+ Don't display unless data-shown is present
1581
+ This must go last to properly override the other classes
1582
+ */
1583
+ :where(.bs-tooltip-deprecated[data-disabled]:not([data-disabled="false"]):not([data-shown])):hover :where(.bs-tooltip-deprecated-text),
1584
+ :where(.bs-tooltip-deprecated[data-disabled]:not([data-disabled="false"]):not([data-shown])):has(:focus-visible) :where(.bs-tooltip-deprecated-text) {
1585
+ opacity: 0;
1586
+ transform: scale(0);
1588
1587
  }
1589
- .bs-banner :where(a:hover) {
1590
- color: rgba(255, 255, 255, 0.8);
1588
+ :where(.bs-tooltip-deprecated[data-shown="false"][data-disabled]:not([data-disabled="false"])):hover :where(.bs-tooltip-deprecated-text),
1589
+ :where(.bs-tooltip-deprecated[data-shown="false"][data-disabled]:not([data-disabled="false"])):has(:focus-visible) :where(.bs-tooltip-deprecated-text) {
1590
+ opacity: 0;
1591
+ transform: scale(0);
1591
1592
  }
1592
- .bs-banner :where(.bs-banner-content button) {
1593
- background-color: inherit;
1594
- color: inherit;
1595
- cursor: pointer;
1593
+ /* -------------------- COMPONENT-SPECIFIC STYLES -------------------- */
1594
+ .bs-tooltip-deprecated :where(.bs-tooltip-deprecated-text.escaped) {
1595
+ opacity: 0;
1596
+ transform: scale(0.5);
1596
1597
  }
1597
- .bs-banner:where([data-variant="negative"]) {
1598
- --banner-bg: var(--bs-red-300);
1598
+ .bs-tooltip-deprecated :where(.bs-tooltip-deprecated-text.escaped-x) {
1599
+ opacity: 0;
1600
+ transform: translateX(-50%) scale(0.5);
1601
+ }
1602
+ .bs-tooltip-deprecated :where(.bs-tooltip-deprecated-text.escaped-y) {
1603
+ opacity: 0;
1604
+ transform: translateY(-50%) scale(0.5);
1605
+ }
1606
+ .bs-accordion {
1607
+ --accordion-link-color: var(--bs-purple-400);
1608
+ --accordion-link-outline-color: var(--bs-blue-base);
1609
+ --accordion-outline-color: transparent;
1610
+ --accordion-padding-inline: 0;
1611
+ --accordion-text-size: var(--bs-text-sm);
1612
+ border-block: 1px solid var(--bs-border-base);
1613
+ display: block;
1599
1614
  }
1600
1615
  @media (min-width: 957px) {
1601
- .bs-banner {
1602
- --banner-icon-display: inline-flex;
1603
- --banner-padding: var(--banner-padding-dt);
1616
+ .bs-accordion {
1617
+ --accordion-padding-inline: var(--bs-space-2);
1618
+ --accordion-text-size: var(--bs-text-base);
1604
1619
  }
1605
1620
  }
1606
- /*
1607
- --btn-main: (this is doing too much.. look into backwards-compatible way to break this up)
1608
- background color (base)
1609
- focus ring color
1610
-
1611
- background colors:
1612
- --btn-secondary: background color (active, hover)
1613
- --btn-light: background color (ghost hover, ghost focus)
1614
-
1615
- border / box-shadow:
1616
- --btn-ghost-ink: the box shadow color for ghost buttons is synced to ink
1617
- --btn-highlight: box shadow color (w/ --btn-main) (active)
1618
-
1619
- padding:
1620
- --btn-padding: padding (changes by size, and on text btns)
1621
-
1622
- text color:
1623
- --btn-ink: text color
1624
- --btn-ghost-ink: text color (ghost)
1625
-
1626
- */
1627
- .bs-button {
1628
- --btn-focus-inset: -0.25rem;
1629
- --btn-focus-pseudo-width: calc(100% + 0.5rem);
1630
- --btn-ghost-ink: var(--bs-ink-blue);
1631
- --btn-highlight: var(--bs-blue-100);
1632
- --btn-ink: var(--bs-white);
1633
- --btn-main: var(--bs-blue-400);
1634
- --btn-padding: .25rem .75rem;
1635
- --btn-secondary: var(--bs-blue-medium);
1636
- --btn-text-size: var(--bs-text-md);
1637
- --btn-weight: 600;
1638
- --btn-height: 2.5rem;
1621
+ /* Accordion Panel (Icon, Title, Caret) */
1622
+ .bs-accordion :where(.bs-accordion-toggle),
1623
+ .bs-accordion > :where(header) > :where(button) {
1639
1624
  align-items: center;
1640
- background-color: var(--btn-main);
1641
- border: none;
1642
- border-radius: 0.25rem;
1643
- color: var(--btn-ink);
1644
- -moz-column-gap: var(--bs-space-2);
1645
- column-gap: var(--bs-space-2);
1625
+ background-color: var(--bs-bg-base);
1626
+ border: 0px solid transparent;
1627
+ border-radius: .25rem;
1628
+ color: var(--bs-ink-base);
1646
1629
  cursor: pointer;
1647
- display: inline-flex;
1648
- font-size: var(--btn-text-size);
1649
- font-weight: var(--btn-weight);
1650
- height: max(-moz-fit-content, var(--btn-height));
1651
- height: max(fit-content, var(--btn-height));
1652
- justify-content: center;
1630
+ display: grid;
1631
+ font-size: var(--accordion-text-size);
1632
+ font-weight: var(--bs-font-normal);
1633
+ grid-template-columns: minmax(0px, auto) minmax(0px, 1fr) minmax(0px, auto);
1634
+ grid-template-areas: "start main end";
1653
1635
  line-height: 1.5;
1654
- outline: 2px solid transparent;
1655
- padding: var(--btn-padding);
1656
- position: relative;
1636
+ outline: 2px solid var(--accordion-outline-color);
1637
+ padding: var(--bs-space-0);
1638
+ padding-block: clamp(0.5rem, calc(0.38rem + 0.5vw), 0.75rem);
1639
+ padding-inline: var(--accordion-padding-inline);
1657
1640
  text-decoration: none;
1658
- transition: all var(--bs-transition-fast) var(--bs-transition-ease);
1659
- vertical-align: middle;
1660
- }
1661
- .bs-button:where(:not(:disabled):not([aria-disabled="true"]):hover) {
1662
- background-color: var(--btn-secondary);
1641
+ width: 100%;
1663
1642
  }
1664
- .bs-button:where(:not(:disabled):not([aria-disabled="true"]):active) {
1665
- background-color: var(--btn-secondary);
1666
- box-shadow: inset 0px 0px 4px 1px var(--btn-main);
1667
- transform-origin: center;
1668
- transform: scale(0.97);
1643
+ .bs-accordion :where(.bs-accordion-toggle:focus-visible),
1644
+ .bs-accordion > :where(header) > :where(button:focus-visible) {
1645
+ --accordion-outline-color: var(--bs-blue-base);
1669
1646
  }
1670
- /* ------------ Focus Styles ------------ */
1671
- .bs-button::before {
1672
- border-color: transparent;
1673
- border-radius: 0.5rem;
1674
- border-style: solid;
1675
- border-width: 0.125rem;
1676
- content: '';
1677
- height: calc(100% + 0.5rem);
1678
- inset: var(--btn-focus-inset);
1679
- position: absolute;
1680
- transition: border-color var(--bs-transition-fast) var(--bs-transition-ease);
1681
- width: var(--btn-focus-pseudo-width);
1647
+ .bs-accordion :where(.bs-accordion-toggle) > *,
1648
+ .bs-accordion > :where(header) > :where(button) > * {
1649
+ font-size: inherit;
1650
+ font-weight: inherit;
1651
+ line-height: inherit;
1682
1652
  }
1683
- .bs-button:where(:focus:not(:disabled):not([aria-disabled="true"]))::before {
1684
- border-color: var(--btn-main);
1653
+ .bs-accordion :where(.bs-accordion-toggle) > *,
1654
+ .bs-accordion > :where(header) > :where(button) > * {
1655
+ grid-area: main;
1656
+ margin-right: var(--bs-space-2);
1657
+ text-align: left;
1685
1658
  }
1686
- .bs-button:where(:focus-visible:not(:disabled):not([aria-disabled="true"]))::before {
1687
- border-color: var(--btn-main);
1688
- box-shadow: none;
1659
+ .bs-accordion :where(.bs-accordion-toggle) > *,
1660
+ .bs-accordion > :where(header) > :where(button) > * {
1661
+ vertical-align: middle;
1689
1662
  }
1690
- .bs-button:where(:focus:not(:focus-visible):not(:disabled):not([aria-disabled="true"]))::before {
1691
- border-color: transparent;
1692
- box-shadow: none;
1663
+ @media (min-width: 957px) {
1664
+ .bs-accordion :where(.bs-accordion-toggle) > * ,
1665
+ .bs-accordion > :where(header) > :where(button) > * {
1666
+ margin-right: var(--bs-space-3);
1667
+ }
1693
1668
  }
1694
- /* ------------ Ghost Buttons ------------ */
1695
- .bs-button:where([data-ghost]:not([data-ghost="false"])) {
1696
- --btn-ink: var(--btn-ghost-ink);
1697
- --btn-light: var(--bs-blue-10);
1698
- --btn-secondary: var(--bs-blue-10);
1699
- background-color: transparent;
1700
- box-shadow: inset 0 0 0 1px var(--btn-ghost-ink);
1669
+ .bs-accordion :where(.bs-accordion-toggle) :where([data-position]),
1670
+ .bs-accordion > :where(header) > :where(button) :where([data-position]) {
1671
+ width: var(--accordion-text-size);
1701
1672
  }
1702
- .bs-button:where([data-ghost]:not([data-ghost="false"]))::before {
1703
- border-radius: 0.4375rem;
1673
+ .bs-accordion :where(.bs-accordion-toggle) > :where([data-position="start"]),
1674
+ .bs-accordion > :where(header) > :where(button) > :where([data-position="start"]) {
1675
+ grid-area: start;
1676
+ margin-right: var(--bs-space-2);
1704
1677
  }
1705
- .bs-button:where([data-ghost]:not([data-ghost="false"]):not(:disabled):not([aria-disabled="true"]):hover),
1706
- .bs-button:where([data-ghost]:not([data-ghost="false"]):not(:disabled):not([aria-disabled="true"]):focus) {
1707
- background-color: var(--btn-light);
1678
+ .bs-accordion :where(.bs-accordion-toggle) > :where([data-position="end"]),
1679
+ .bs-accordion > :where(header) > :where(button) > :where([data-position="end"]) {
1680
+ grid-area: end;
1681
+ transform: rotate(0);
1682
+ transition: transform var(--bs-transition-medium) var(--bs-transition-ease);
1708
1683
  }
1709
- .bs-button:where([data-ghost]:not([data-ghost="false"]):not(:disabled):not([aria-disabled="true"]):active) {
1710
- box-shadow:
1711
- inset 0 0 0 1px var(--btn-main),
1712
- inset 0px 0px 4px 1px var(--btn-highlight);
1684
+ .bs-accordion > :where(header[data-open]:not([data-open="false"])) :where([data-position="end"]) {
1685
+ transform: rotate(180deg);
1713
1686
  }
1714
- /* ------------ VARIANTS ------------ */
1715
- .bs-button:where([data-variant^='secondary']) {
1716
- --btn-ghost-ink: var(--bs-ink-plum);
1717
- --btn-highlight: var(--bs-plum-100);
1718
- --btn-light: var(--bs-plum-10);
1719
- --btn-main: var(--bs-plum-base);
1720
- --btn-secondary: var(--bs-plum-medium);
1687
+ /* Accordion Content (the collapsible / expandible part) */
1688
+ .bs-accordion :where(.bs-accordion-content) {
1689
+ display: grid;
1690
+ font-size: var(--accordion-text-size);
1691
+ grid-template-rows: 0fr;
1692
+ overflow: hidden;
1693
+ padding-inline: var(--accordion-padding-inline);
1694
+ transition: grid-template-rows var(--bs-transition-slow) var(--bs-transition-ease);
1721
1695
  }
1722
- .dark .bs-button:where([data-variant^='secondary']) {
1723
- --btn-highlight: var(--bs-plum-400);
1724
- --btn-light: var(--bs-navy-400);
1696
+ .bs-accordion :where(.bs-accordion-content) > :where(:first-child) {
1697
+ overflow: hidden;
1725
1698
  }
1726
- .bs-button:where([data-variant^='positive']) {
1727
- --btn-ghost-ink: var(--bs-ink-purple);
1728
- --btn-highlight: var(--bs-purple-100);
1729
- --btn-light: var(--bs-purple-10);
1730
- --btn-main: var(--bs-purple-400);
1731
- --btn-secondary: var(--bs-purple-medium);
1699
+ .bs-accordion :where(.bs-accordion-content[data-open]:not([data-open="false"])) {
1700
+ grid-template-rows: 1fr;
1701
+ padding-block-end: var(--bs-space-f-2);
1732
1702
  }
1733
- .bs-button:where([data-variant^='warning']) {
1734
- --btn-ghost-ink: var(--bs-ink-orange);
1735
- --btn-highlight: var(--bs-orange-100);
1736
- --btn-light: var(--bs-orange-10);
1737
- --btn-main: var(--bs-warning);
1738
- --btn-secondary: var(--bs-orange-base);
1703
+ /* Accordion Group */
1704
+ :where(.bs-accordion[data-stacked]:not([data-stacked="false"])) + .bs-accordion:where([data-stacked]:not([data-stacked="false"])) {
1705
+ border-block-start-color: transparent;
1739
1706
  }
1740
- .bs-button:where([data-variant^='negative']) {
1741
- --btn-ghost-ink: var(--bs-ink-red);
1742
- --btn-highlight: var(--bs-red-100);
1743
- --btn-light: var(--bs-red-10);
1744
- --btn-main: var(--bs-red-400);
1745
- --btn-secondary: var(--bs-red-medium);
1707
+ .bs-alert {
1708
+ /* bs-blue-100 @ 10% */
1709
+ background-color: #99cff71a;
1710
+ border-radius: 8px;
1711
+ border: 2px solid var(--bs-ink-blue);
1712
+ -moz-column-gap: 0.75rem;
1713
+ column-gap: 0.75rem;
1714
+ display: grid;
1715
+ grid-template-columns: 1.125rem 1fr 1rem;
1716
+ grid-template-areas: "icon title close"
1717
+ ". description ."
1718
+ ". action .";
1719
+ padding: 1rem;
1746
1720
  }
1747
- /* pink variant */
1748
- .bs-button:where([data-variant^='pink']) {
1749
- --btn-ghost-ink: var(--bs-ink-pink);
1750
- --btn-highlight: var(--bs-pink-400);
1751
- --btn-light: var(--bs-pink-10);
1752
- --btn-main: var(--bs-pink-400);
1753
- --btn-secondary: var(--bs-pink-300);
1721
+ @media (min-width: 752px) {
1722
+ .bs-alert {
1723
+ padding: 1.5rem;
1724
+ grid-template-columns: 1.25rem 1fr 1rem;
1725
+ grid-template-areas: "icon title close"
1726
+ ". description ."
1727
+ ". action .";
1728
+ }
1754
1729
  }
1755
- /* royal blue variant */
1756
- .bs-button:where([data-variant^='royal']) {
1757
- --btn-ghost-ink: var(--bs-ink-royal);
1758
- --btn-highlight: var(--bs-royal-400);
1759
- --btn-light: var(--bs-royal-10);
1760
- --btn-main: var(--bs-royal-400);
1761
- --btn-secondary: var(--bs-royal-300);
1730
+ @media (min-width: 752px) {
1731
+ .bs-alert:where([data-horizontal="true"]) {
1732
+ padding: 1rem 1.5rem;
1733
+ grid-template-areas: "icon title action close";
1734
+ grid-template-columns: 1.125rem max-content 1fr 1rem;
1735
+ }
1762
1736
  }
1763
- /* white variant - for dark backgrounds + ghost btn or text btn only */
1764
- .bs-button:where([data-variant^='white'][data-ghost]:not([data-ghost="false"])) {
1765
- --btn-ghost-ink: var(--bs-ink-white);
1766
- --btn-highlight: var(--bs-ink-white);
1767
- --btn-light: var(--bs-white-10);
1768
- --btn-main: var(--bs-ink-white);
1737
+ .bs-alert :where(.bs-alert-icon) {
1738
+ margin-top: 0.25rem;
1739
+ align-self: start;
1740
+ color: var(--bs-ink-blue);
1741
+ grid-area: icon;
1742
+ height: 1.125rem;
1743
+ width: 1.125rem;
1769
1744
  }
1770
- /* DEPRECATED */
1771
- /* ------------ Text Button ------------ */
1772
- .bs-button:where([data-text]:not([data-text="false"])) {
1773
- --btn-focus-inset: -0.25rem -0.5rem;
1774
- --btn-focus-pseudo-width: calc(100% + 1rem); /* text btns don't have side padding, but we do want focus outline to look padded */
1775
- --btn-height: auto;
1776
- --btn-ink: var(--bs-ink-blue);
1777
- --btn-padding: 0;
1778
- --btn-secondary: transparent;
1779
- --btn-text-size: var(--bs-text-md);
1780
- --btn-weight: 400;
1781
- background-color: transparent;
1782
- cursor: pointer;
1783
- line-height: 150%;
1745
+ .bs-alert :where(.bs-alert-title) {
1746
+ font-size: 1.125rem;
1747
+ line-height: 1.3;
1748
+ color: var(--bs-ink-base);
1749
+ grid-area: title;
1784
1750
  }
1785
- /* DEPRECATED */
1786
- .bs-button:where([data-text]:not([data-text="false"]):not(:disabled):not([aria-disabled="true"]):hover) {
1787
- --btn-ink: var(--bs-blue-base);
1788
- background-color: transparent;
1789
- text-decoration: underline;
1751
+ @media (min-width: 752px) {
1752
+ .bs-alert :where(.bs-alert-title) {
1753
+ font-size: 1.25rem;
1754
+ line-height: 1.3;
1755
+ }
1756
+
1757
+ .bs-alert:where([data-horizontal="true"]) :where(.bs-alert-title) {
1758
+ font-size: 1.125rem;
1759
+ line-height: 1.5;
1760
+ }
1761
+
1762
+ .bs-alert:where(:not([data-horizontal="true"])) :where(.bs-alert-icon) {
1763
+ height: 1.25rem;
1764
+ width: 1.25rem;
1765
+ }
1790
1766
  }
1791
- /* DEPRECATED */
1792
- .bs-button:where([data-text]:not([data-text="false"]):not(:disabled):not([aria-disabled="true"]):hover):has(svg) {
1793
- text-decoration: none;
1767
+ .bs-alert :where(.bs-alert-description) {
1768
+ font-size: 0.875rem;
1769
+ color: var(--bs-ink-medium);
1770
+ grid-area: description;
1771
+ margin-top: 0.5rem;
1794
1772
  }
1795
- /* DEPRECATED */
1796
- .bs-button:where([data-text]:not([data-text="false"]):not(:disabled):not([aria-disabled="true"]):active) {
1797
- box-shadow: none;
1798
- transform: none;
1773
+ @media (min-width: 752px) {
1774
+ .bs-alert :where(.bs-alert-description) {
1775
+ font-size: 1rem;
1776
+ }
1799
1777
  }
1800
- /* DEPRECATED */
1801
- .bs-button:where([data-variant^='negative'][data-text]:not([data-text="false"])),
1802
- .bs-button:where([data-variant^='negative'][data-text]:not([data-text="false"]):not(:disabled):not([aria-disabled="true"]):hover) {
1803
- --btn-ink: var(--bs-ink-red);
1778
+ .bs-alert:where([data-horizontal="true"]) :where(.bs-alert-description) {
1779
+ display: none;
1804
1780
  }
1805
- /* DEPRECATED */
1806
- .bs-button:where([data-variant^='white'][data-text]:not([data-text="false"])),
1807
- .bs-button:where([data-variant^='white'][data-text]:not([data-text="false"]):not(:disabled):not([aria-disabled="true"]):hover) {
1808
- --btn-ink: var(--bs-ink-white);
1809
- --btn-main: var(--bs-ink-white);
1781
+ .bs-alert :where(.bs-alert-close) {
1782
+ margin-top: 0.25rem;
1783
+ align-self: start;
1784
+ background-color: transparent;
1785
+ cursor: pointer;
1786
+ grid-area: close;
1787
+ height: 1rem;
1788
+ width: 1rem;
1810
1789
  }
1811
- /* ------------ Button Sizes, Media-based Text Sizing -------------- */
1812
- /* Std button: Mobile text size, DT text size */
1813
- .bs-button {
1814
- --btn-text-size: 1rem;
1790
+ .bs-alert :where(.bs-alert-action) {
1791
+ grid-area: action;
1792
+ margin-top: 1rem;
1815
1793
  }
1816
- @media (min-width: 1166px) {
1817
- .bs-button {
1818
- --btn-text-size: 1.125rem;
1794
+ @media (min-width: 752px) {
1795
+ .bs-alert:where([data-horizontal="true"]) :where(.bs-alert-action) {
1796
+ margin-top: 0;
1819
1797
  }
1820
1798
  }
1821
- .bs-button:where([data-size^='sm']) {
1822
- --btn-height: 1.75rem;
1823
- --btn-padding: .25rem .75rem .375rem;
1824
- /* Std button size="sm" text size is same across all media sizes */
1825
- --btn-text-size: var(--bs-text-sm);
1826
- }
1827
- /* DEPRECATED */
1828
- /* Text buttons: For now, text size not dependent on media size */
1829
- .bs-button:where([data-text]:not([data-text="false"])) {
1830
- --btn-height: auto;
1831
- --btn-padding: 0;
1832
- --btn-text-size: var(--bs-text-md);
1799
+ /* COLOR VARIANTS */
1800
+ .bs-alert:where([data-variant="success"]) {
1801
+ /* bs-purple-100 @ 10% */
1802
+ background-color: #e0c5ef1a;
1803
+ border-color: var(--bs-ink-purple);
1833
1804
  }
1834
- /* DEPRECATED */
1835
- .bs-button:where([data-size^='sm'][data-text]:not([data-text="false"])) {
1836
- --btn-text-size: var(--bs-text-base);
1805
+ .bs-alert:where([data-variant="success"]) :where(.bs-alert-icon) {
1806
+ color: var(--bs-ink-purple);
1837
1807
  }
1838
- /* DEPRECATED */
1839
- /* Size XS & XXS only applies to text buttons */
1840
- .bs-button:where([data-size^='xs'][data-text]:not([data-text="false"])) {
1841
- --btn-text-size: var(--bs-text-sm);
1808
+ .bs-alert:where([data-variant="warning"]) {
1809
+ /* bs-orange-100 @ 10% */
1810
+ background-color: #f3c4a81a;
1811
+ border-color: var(--bs-ink-orange);
1842
1812
  }
1843
- /* DEPRECATED */
1844
- .bs-button:where([data-size^='xxs'][data-text]:not([data-text="false"])) {
1845
- --btn-text-size: var(--bs-text-xs);
1846
- --btn-weight: 600;
1813
+ .bs-alert:where([data-variant="warning"]) :where(.bs-alert-icon) {
1814
+ color: var(--bs-ink-orange);
1847
1815
  }
1848
- /* DEPRECATED */
1849
- /* Size SM buttons will shrink icons to 14px */
1850
- .bs-button:where([data-size^='sm']) :where(.bs-icon) {
1851
- height: 0.875rem;
1852
- width: 0.875rem;
1816
+ .bs-alert:where([data-variant="negative"]) {
1817
+ /* bs-red-100 @ 10% */
1818
+ background-color: #f8a9aa1a;
1819
+ border-color: var(--bs-ink-red);
1853
1820
  }
1854
- /* ------------ Disabled Styling ------------ */
1855
- :where(button:disabled),
1856
- .bs-button:where(:disabled),
1857
- .bs-button:where([aria-disabled="true"]) /* for links as buttons */ {
1858
- pointer-events: none;
1821
+ .bs-alert:where([data-variant="negative"]) :where(.bs-alert-icon) {
1822
+ color: var(--bs-ink-red);
1859
1823
  }
1860
- .bs-button:where(:disabled),
1861
- .bs-button:where([aria-disabled="true"]) {
1862
- --btn-ink: var(--bs-ink-disabled);
1863
- --btn-main: var(--bs-bg-disabled);
1864
- box-shadow: none;
1865
- transform: none;
1824
+ /* DARK MODE SPECIAL CASE */
1825
+ .dark .bs-alert :where(.bs-alert-action) {
1826
+ --btn-border-color-focused: var(--bs-text-base);
1827
+ --btn-text-color: var(--bs-text-base);
1828
+ --btn-text-color-hovered: var(--bs-text-base);
1866
1829
  }
1867
- .bs-button:where([data-ghost]:not([data-ghost="false"])):disabled,
1868
- .bs-button:where([data-ghost]:not([data-ghost="false"]))[aria-disabled="true"] {
1869
- --btn-ghost-ink: var(--bs-ink-disabled);
1830
+ .bs-backdrop {
1831
+ position: fixed;
1832
+ inset: 0;
1833
+ -webkit-backdrop-filter: blur(4px);
1834
+ backdrop-filter: blur(4px);
1835
+ background: rgba(29, 30, 72, 0.05);
1836
+ /*
1837
+ Should be very rare, but below is an optional way for consumer to override z-index.
1838
+ See note in popover.css for more info...most often (but still rare) the consumer
1839
+ would override the --bs-popover-z-index instead, which would take care of this bs-backdrop too.
1840
+ Should be a very very rare use case to need to override both independently to different values.
1841
+ */
1842
+ z-index: var(--bs-backdrop-z-index, var(--bs-popover-z-index));
1870
1843
  }
1871
- /* DEPRECATED */
1872
- .bs-button:where([data-text]:not([data-text="false"])):disabled,
1873
- .bs-button:where([data-text]:not([data-text="false"]))[aria-disabled="true"] {
1874
- --btn-main: transparent;
1844
+ .bs-badge {
1845
+ --badge-bg: var(--bs-red-400);
1846
+ --badge-text: var(--bs-white);
1847
+ display: inline-block;
1875
1848
  }
1876
- /* ------------ links as buttons ------------ */
1877
- a.bs-button {
1849
+ /* ------ Badge wrapped around text ------ */
1850
+ /* Badge DOT */
1851
+ .bs-badge:where([data-position^='left'])::before,
1852
+ .bs-badge:where(:not([data-position^='left']))::after {
1878
1853
  align-items: center;
1854
+ background: var(--badge-bg);
1855
+ border-radius: 0.5rem;
1856
+ content: '';
1879
1857
  display: inline-flex;
1880
- outline: none;
1881
- vertical-align: middle;
1858
+ font-size: 0.8125rem;
1859
+ font-weight: 600;
1860
+ height: 6px;
1861
+ justify-content: center;
1862
+ line-height: 1.25;
1863
+ position: relative;
1864
+ vertical-align: top;
1865
+ width: 6px;
1882
1866
  }
1883
- .bs-chart {
1884
- display: block;
1885
- height: 100%;
1886
- width: 100%;
1867
+ .bs-pill .bs-badge::before,
1868
+ .bs-pill .bs-badge::after {
1869
+ font-size: 0.8125em;
1887
1870
  }
1888
- .bs-chart :where(figure) {
1889
- -moz-column-gap: 2.5rem;
1890
- column-gap: 2.5rem;
1891
- display: grid;
1892
- font-size: .875rem;
1893
- grid-template-areas: var(--chart-gridareas, "chart" "legend");
1894
- grid-template-columns: var(--chart-gridcols, 100%);
1895
- grid-template-rows: var(--chart-gridrows, minmax(0px, auto) minmax(0px, min-content));
1896
- height: 100%;
1897
- margin-block: unset;
1898
- margin-inline: unset;
1899
- position: relative;
1900
- width: 100%;
1871
+ /* Badge COUNT */
1872
+ .bs-badge:where([data-count][data-position^='left'])::before,
1873
+ .bs-badge:where([data-count]:not([data-position^='left']))::after {
1874
+ color: var(--badge-text);
1875
+ content: attr(data-count);
1876
+ height: 1rem;
1877
+ min-width: 1rem;
1878
+ padding: 0 4px;
1879
+ top: -0.0625rem;
1880
+ vertical-align: unset;
1881
+ width: auto;
1901
1882
  }
1902
- .bs-chart :where(figure > :first-child) {
1903
- grid-area: chart;
1883
+ .bs-badge:where([data-count='0'])::before,
1884
+ .bs-badge:where([data-count='0'])::after {
1885
+ display: none;
1904
1886
  }
1905
- .bs-chart :where(figure > :last-child) {
1906
- grid-area: legend;
1887
+ .bs-badge:where([data-show-zero]):where(:not([data-show-zero="false"]))::before,
1888
+ .bs-badge:where([data-show-zero]):where(:not([data-show-zero="false"]))::after {
1889
+ display: inline-flex;
1907
1890
  }
1908
- .bs-chart :where(figure > div) {
1909
- min-width: 100%;
1910
- width: 100%;
1891
+ /* Badge SPACING against wrapped text */
1892
+ .bs-badge::before {
1893
+ margin-right: 0.25rem;
1911
1894
  }
1912
- .bs-chart :where(canvas) {
1913
- width: 100%;
1895
+ .bs-badge::after {
1896
+ margin-left: 0.25rem;
1914
1897
  }
1915
- /* --------- Legend Styles --------- */
1916
- .bs-chart :where(figcaption) {
1917
- background-color: var(--legend-bg-color, transparent);
1918
- border-radius: .5rem;
1919
- border: 1px solid var(--legend-border-color, transparent);
1920
- clip-path: var(--legend-clip-path, none);
1921
- max-height: var(--legend-max-height, 100%);
1922
- overflow-y: var(--legend-overflow-y, hidden);
1898
+ /* Badge COLORS */
1899
+ .bs-badge:where([data-badge-color^='blue']) {
1900
+ --badge-bg: var(--bs-blue-base);
1923
1901
  }
1924
- .bs-chart :where(figcaption[data-hidden="true"]) {
1925
- border: 0;
1926
- clip: rect(0 0 0 0);
1927
- height: 1px;
1928
- margin: 0;
1929
- overflow: hidden;
1930
- padding: 0;
1931
- position: absolute;
1932
- white-space: nowrap;
1933
- width: 1px;
1902
+ .bs-badge:where([data-badge-color^='white']) {
1903
+ --badge-bg: var(--bs-white);
1904
+ --badge-text: var(--bs-black);
1934
1905
  }
1935
- .bs-chart :where(ul) {
1936
- align-items: var(--legend-flexalign, center);
1937
- display: flex;
1938
- -moz-column-gap: 2.5rem;
1939
- column-gap: 2.5rem;
1940
- flex-direction: var(--legend-flexdir, row);
1941
- flex-wrap: var(--legend-flexwrap, wrap);
1942
- padding-block: var(--legend-padding-block, .25rem);
1943
- /* cjs-legend-padding is set dynamically by chart.js for bar charts */
1944
- padding-inline: var(--legend-padding-inline, var(--cjs-legend-padding-inline, 2.5rem));
1945
- row-gap: .75rem;
1946
- }
1947
- .bs-chart :where(li, li:focus, li:active, li:focus-visible) {
1906
+ /* ------ Standalone Badge (not wrapped around text) ------ */
1907
+ .bs-badge:where([data-variant="notext"]) {
1948
1908
  align-items: center;
1949
- cursor: pointer;
1909
+ display: inline-flex;
1910
+ justify-content: center;
1911
+ }
1912
+ .bs-badge:where([data-variant="notext"]) {
1913
+ line-height: 1;
1914
+ }
1915
+ .bs-badge:where([data-variant="notext"])::after,
1916
+ .bs-badge:where([data-variant="notext"])::before {
1917
+ margin: 0;
1918
+ top: unset;
1919
+ }
1920
+ :where(.bs-banner) {
1921
+ --banner-bg: var(--bs-royal-400);
1922
+ --banner-icon-display: none;
1923
+ --banner-padding: var(--banner-padding-m);
1924
+ --banner-padding-m: 1rem 1.5rem;
1925
+ --banner-padding-dt: .5rem 2.25rem;
1926
+ }
1927
+ .bs-banner {
1928
+ background-color: var(--banner-bg);
1929
+ color: var(--bs-ink-white);
1950
1930
  display: flex;
1951
- flex-direction: row;
1952
- outline: 0;
1953
- position: relative;
1954
- width: var(--legend-item-width, auto);
1931
+ justify-content: center;
1932
+ min-height: 3rem;
1933
+ padding: var(--banner-padding);
1955
1934
  }
1956
- .bs-chart :where(li)::after {
1957
- border: solid var(--focus-color, transparent) 2px;
1958
- border-radius: 0.25rem;
1959
- content: '';
1960
- display: block;
1961
- inset: -.25rem;
1962
- position: absolute;
1935
+ .bs-banner:where([data-dismissed]:not([data-dismissed="false"])) {
1936
+ display: none;
1963
1937
  }
1964
- .bs-chart :where(li:focus-visible) {
1965
- --focus-color: var(--bs-blue-base);
1938
+ .bs-banner :where(.bs-banner-content) {
1939
+ align-items: center;
1940
+ display: flex;
1941
+ /* Content locks at globally configured width */
1942
+ max-width: var(--bs-content-max-width);
1943
+ width: 100%;
1966
1944
  }
1967
- .bs-chart :where(li span) {
1968
- background: var(--legend-item-box-fill);
1969
- border-color: var(--legend-item-box-stroke);
1970
- border-radius: var(--legend-item-swatch-radius, 3px);
1971
- display: inline-block;
1972
- height: var(--bs-text-md);
1973
- margin-right: 10px;
1974
- width: var(--bs-text-md);
1945
+ .bs-banner :where(.bs-banner-content .bs-banner-warning-icon) {
1946
+ /* Do not display icon on smaller screens */
1947
+ display: var(--banner-icon-display);
1948
+ margin-right: 0.625rem;
1975
1949
  }
1976
- .bs-chart :where(li p) {
1977
- color: var(--legend-item-text-color);
1978
- font-size: var(--bs-text-md);
1979
- margin: 0;
1980
- padding: 0;
1981
- -webkit-text-decoration: var(--legend-item-text-decoration);
1982
- text-decoration: var(--legend-item-text-decoration);
1950
+ .bs-banner :where(.bs-banner-content p) {
1951
+ flex-grow: 1;
1952
+ padding-right: 1.25rem;
1983
1953
  }
1984
- /* --------- Chart Layout Variants --------- */
1985
- /*
1986
- For now, per design team instructions, these are NOT responsive as we're only to expose these
1987
- variants for a very specific, single use-case that involves horizontal scroll...
1988
- If we want to make these responsive in the future, can wrap in media query.
1989
- */
1990
- .bs-chart:where([data-layout="chart-right"], [data-layout="chart-left"]) {
1991
- --chart-gridrows: minmax(0px, auto);
1992
- --legend-bg-color: var(--bs-bg-base);
1993
- --legend-border-color: var(--bs-gray-light);
1994
- --legend-clip-path: border-box;
1995
- --legend-flexalign: start;
1996
- --legend-flexdir: column;
1997
- --legend-flexwrap: nowrap;
1998
- --legend-item-width: 100%;
1999
- --legend-max-height: 17.1875rem;
2000
- --legend-overflow-y: auto;
2001
- --legend-padding-block: .75rem;
2002
- --legend-padding-inline: .75rem;
1954
+ .bs-banner :where(.bs-banner-content p a) {
1955
+ color: var(--bs-ink-white);
1956
+ text-decoration: underline;
2003
1957
  }
2004
- .bs-chart:where([data-layout="chart-left"]) {
2005
- --chart-gridareas: "chart legend";
2006
- --chart-gridcols: auto minmax(150px, auto);
1958
+ .bs-banner :where(a:hover) {
1959
+ color: rgba(255, 255, 255, 0.8);
2007
1960
  }
2008
- .bs-chart:where([data-layout="chart-right"]) {
2009
- --chart-gridareas: "legend chart";
2010
- --chart-gridcols: minmax(150px, auto) auto;
1961
+ .bs-banner :where(.bs-banner-content button) {
1962
+ background-color: inherit;
1963
+ color: inherit;
1964
+ cursor: pointer;
2011
1965
  }
2012
- .bs-chart-table {
2013
- border: 0;
2014
- clip: rect(0 0 0 0);
2015
- height: 1px;
2016
- margin: 0;
2017
- overflow: hidden;
2018
- padding: 0;
2019
- position: absolute;
2020
- white-space: nowrap;
2021
- width: 1px;
1966
+ .bs-banner:where([data-variant="negative"]) {
1967
+ --banner-bg: var(--bs-red-300);
2022
1968
  }
2023
- /*
2024
- uncomment to make visible when testing
2025
- .bs-chart-table {
2026
- clip: none;
2027
- overflow: auto;
2028
- height: auto;
2029
- position: relative;
2030
- width: auto;
1969
+ @media (min-width: 957px) {
1970
+ .bs-banner {
1971
+ --banner-icon-display: inline-flex;
1972
+ --banner-padding: var(--banner-padding-dt);
1973
+ }
2031
1974
  }
2032
-
2033
- */
2034
1975
  /*
2035
- Properties : Defaults // Description
2036
- ====================================
2037
- --btn-icon-bg-color: var(--btn-main); // icon bg color (base state)
2038
- --btn-icon-padding: .75rem; // padding around icon svg
2039
- --btn-icon-size: 1.5rem; // svg width and height
2040
- --btn-icon-stroke-color: var(--bs-white);
2041
- --btn-main: var(--bs-blue-base); // many things... should probably break this up
2042
- --btn-text-color: var(--bs-ink-base);
2043
- --btn-text-size: var(--bs-text-md);
1976
+ --btn-main: (this is doing too much.. look into backwards-compatible way to break this up)
1977
+ background color (base)
1978
+ focus ring color
1979
+
1980
+ background colors:
1981
+ --btn-secondary: background color (active, hover)
1982
+ --btn-light: background color (ghost hover, ghost focus)
1983
+
1984
+ border / box-shadow:
1985
+ --btn-ghost-ink: the box shadow color for ghost buttons is synced to ink
1986
+ --btn-highlight: box shadow color (w/ --btn-main) (active)
1987
+
1988
+ padding:
1989
+ --btn-padding: padding (changes by size, and on text btns)
1990
+
1991
+ text color:
1992
+ --btn-ink: text color
1993
+ --btn-ghost-ink: text color (ghost)
2044
1994
 
2045
- --btn-border-color: transparent; // focus state outline color - transparent base state, --btn-main base focus state
2046
- --btn-border-color-focused: var(--btn-main); // focus state ring color set on variants
2047
- --btn-secondary: var(--bs-blue-medium); // hover state icon bg
2048
- --btn-shadow-color-active: var(--btn-main); // active state shadow color (icon bg)
2049
- --btn-text-color-hovered: var(--bs-ink-base); // hover state text color
2050
1995
  */
2051
- :where(.bs-circle-button) {
2052
- --btn-border-color-focused: var(--btn-main);
2053
- --btn-border-color: transparent;
1996
+ .bs-button {
2054
1997
  --btn-focus-inset: -0.25rem;
2055
- --btn-gap: .5rem;
2056
- --btn-icon-bg-color: var(--btn-main);
2057
- --btn-icon-padding: .75rem;
2058
- --btn-icon-size: 1.5rem;
2059
- --btn-icon-stroke-color: var(--bs-white);
2060
- --btn-main: var(--bs-blue-base);
1998
+ --btn-focus-pseudo-width: calc(100% + 0.5rem);
1999
+ --btn-ghost-ink: var(--bs-ink-blue);
2000
+ --btn-highlight: var(--bs-blue-100);
2001
+ --btn-ink: var(--bs-white);
2002
+ --btn-main: var(--bs-blue-400);
2003
+ --btn-padding: .25rem .75rem;
2061
2004
  --btn-secondary: var(--bs-blue-medium);
2062
- --btn-shadow-color-active: var(--btn-main);
2063
- --btn-text-color-hovered: var(--bs-ink-base);
2064
- --btn-text-color: var(--bs-ink-base);
2065
- --btn-text-size: 1.125rem;
2066
- --btn-text-weight: 400;
2067
- }
2068
- .bs-circle-button {
2005
+ --btn-text-size: var(--bs-text-md);
2006
+ --btn-weight: 600;
2007
+ --btn-height: 2.5rem;
2069
2008
  align-items: center;
2070
- background-color: transparent;
2071
- color: var(--btn-text-color);
2009
+ background-color: var(--btn-main);
2010
+ border: none;
2011
+ border-radius: 0.25rem;
2012
+ color: var(--btn-ink);
2013
+ -moz-column-gap: var(--bs-space-2);
2014
+ column-gap: var(--bs-space-2);
2072
2015
  cursor: pointer;
2073
2016
  display: inline-flex;
2074
2017
  font-size: var(--btn-text-size);
2075
- font-weight: var(--btn-text-weight);
2076
- gap: var(--btn-gap);
2077
- outline: none;
2078
- position: relative;
2079
- vertical-align: middle;
2080
- }
2081
- a.bs-circle-button {
2082
- align-items: center;
2083
- display: inline-flex;
2084
- outline: none;
2085
- text-decoration: none;
2086
- }
2087
- .bs-circle-button :where(.bs-circle-button-icon) {
2088
- align-items: center;
2089
- background-color: var(--btn-icon-bg-color);
2090
- border: none;
2091
- border-radius: 50%;
2092
- color: var(--btn-icon-stroke-color);
2093
- display: inline-flex;
2018
+ font-weight: var(--btn-weight);
2019
+ height: max(-moz-fit-content, var(--btn-height));
2020
+ height: max(fit-content, var(--btn-height));
2094
2021
  justify-content: center;
2022
+ line-height: 1.5;
2095
2023
  outline: 2px solid transparent;
2096
- padding: var(--btn-icon-padding);
2024
+ padding: var(--btn-padding);
2097
2025
  position: relative;
2026
+ text-decoration: none;
2098
2027
  transition: all var(--bs-transition-fast) var(--bs-transition-ease);
2028
+ vertical-align: middle;
2099
2029
  }
2100
- .bs-circle-button :where(.bs-circle-button-icon)::before {
2101
- border-color: var(--btn-border-color);
2102
- border-radius: 50%;
2030
+ .bs-button:where(:not(:disabled):not([aria-disabled="true"]):hover) {
2031
+ background-color: var(--btn-secondary);
2032
+ }
2033
+ .bs-button:where(:not(:disabled):not([aria-disabled="true"]):active) {
2034
+ background-color: var(--btn-secondary);
2035
+ box-shadow: inset 0px 0px 4px 1px var(--btn-main);
2036
+ transform-origin: center;
2037
+ transform: scale(0.97);
2038
+ }
2039
+ /* ------------ Focus Styles ------------ */
2040
+ .bs-button::before {
2041
+ border-color: transparent;
2042
+ border-radius: 0.5rem;
2103
2043
  border-style: solid;
2104
2044
  border-width: 0.125rem;
2105
2045
  content: '';
2046
+ height: calc(100% + 0.5rem);
2106
2047
  inset: var(--btn-focus-inset);
2107
2048
  position: absolute;
2108
- transition: border-color var(--bs-transition-fast) var(--bs-transition-ease), transform var(--bs-transition-fast) var(--bs-transition-ease);
2049
+ transition: border-color var(--bs-transition-fast) var(--bs-transition-ease);
2050
+ width: var(--btn-focus-pseudo-width);
2109
2051
  }
2110
- .bs-circle-button :where(.bs-circle-button-icon) :where(.bs-icon) {
2111
- --icon-size: var(--btn-icon-size);
2052
+ .bs-button:where(:focus:not(:disabled):not([aria-disabled="true"]))::before {
2053
+ border-color: var(--btn-main);
2112
2054
  }
2113
- /* non-bs-icon svgs */
2114
- .bs-circle-button :where(.bs-circle-button-icon) > :where(svg) {
2115
- height: var(--btn-icon-size);
2116
- width: var(--btn-icon-size);
2055
+ .bs-button:where(:focus-visible:not(:disabled):not([aria-disabled="true"]))::before {
2056
+ border-color: var(--btn-main);
2057
+ box-shadow: none;
2117
2058
  }
2118
- /* Icon Buttons with Text */
2119
- .bs-circle-button:where([data-text]:not([data-text="false"])) {
2120
- --btn-text-size: var(--bs-text-md);
2121
- --btn-icon-size: 0.75rem;
2122
- --btn-icon-padding: 0.375rem;
2059
+ .bs-button:where(:focus:not(:focus-visible):not(:disabled):not([aria-disabled="true"]))::before {
2060
+ border-color: transparent;
2061
+ box-shadow: none;
2123
2062
  }
2124
- /* Ghost Buttons */
2125
- .bs-circle-button:where([data-ghost]:not([data-ghost="false"])) {
2126
- --btn-icon-bg-color: transparent;
2127
- --btn-icon-stroke-color: var(--btn-main);
2063
+ /* ------------ Ghost Buttons ------------ */
2064
+ .bs-button:where([data-ghost]:not([data-ghost="false"])) {
2065
+ --btn-ink: var(--btn-ghost-ink);
2128
2066
  --btn-light: var(--bs-blue-10);
2129
2067
  --btn-secondary: var(--bs-blue-10);
2068
+ background-color: transparent;
2069
+ box-shadow: inset 0 0 0 1px var(--btn-ghost-ink);
2130
2070
  }
2131
- /* Active, Hover, Focus states */
2132
- .bs-circle-button:active, .bs-circle-button:hover {
2133
- --btn-icon-bg-color: var(--btn-secondary);
2134
- --btn-text-color: var(--btn-text-color-hovered);
2071
+ .bs-button:where([data-ghost]:not([data-ghost="false"]))::before {
2072
+ border-radius: 0.4375rem;
2135
2073
  }
2136
- .bs-circle-button:active :where(.bs-circle-button-icon) {
2137
- box-shadow: inset 0px 0px 4px 1px var(--btn-shadow-color-active);
2138
- transform-origin: center;
2139
- transform: scale(0.97);
2074
+ .bs-button:where([data-ghost]:not([data-ghost="false"]):not(:disabled):not([aria-disabled="true"]):hover),
2075
+ .bs-button:where([data-ghost]:not([data-ghost="false"]):not(:disabled):not([aria-disabled="true"]):focus) {
2076
+ background-color: var(--btn-light);
2140
2077
  }
2141
- .bs-circle-button:where([data-direction="right"]):hover :where(.bs-circle-button-icon),
2142
- .bs-circle-button:where([data-direction="right"]):hover::before {
2143
- transform: translateX(.25rem);
2078
+ .bs-button:where([data-ghost]:not([data-ghost="false"]):not(:disabled):not([aria-disabled="true"]):active) {
2079
+ box-shadow:
2080
+ inset 0 0 0 1px var(--btn-main),
2081
+ inset 0px 0px 4px 1px var(--btn-highlight);
2144
2082
  }
2145
- .bs-circle-button:where([data-direction="left"]):hover :where(.bs-circle-button-icon),
2146
- .bs-circle-button:where([data-direction="left"]):hover::before {
2147
- transform: translateX(-.25rem);
2083
+ /* ------------ VARIANTS ------------ */
2084
+ .bs-button:where([data-variant^='secondary']) {
2085
+ --btn-ghost-ink: var(--bs-ink-plum);
2086
+ --btn-highlight: var(--bs-plum-100);
2087
+ --btn-light: var(--bs-plum-10);
2088
+ --btn-main: var(--bs-plum-base);
2089
+ --btn-secondary: var(--bs-plum-medium);
2148
2090
  }
2149
- .bs-circle-button:where([data-ghost]:not([data-ghost="false"])):hover {
2150
- --btn-icon-bg-color: var(--btn-light);
2091
+ .dark .bs-button:where([data-variant^='secondary']) {
2092
+ --btn-highlight: var(--bs-plum-400);
2093
+ --btn-light: var(--bs-navy-400);
2151
2094
  }
2152
- .bs-circle-button:where(:focus-visible) {
2153
- --btn-border-color: var(--btn-border-color-focused);
2095
+ .bs-button:where([data-variant^='positive']) {
2096
+ --btn-ghost-ink: var(--bs-ink-purple);
2097
+ --btn-highlight: var(--bs-purple-100);
2098
+ --btn-light: var(--bs-purple-10);
2099
+ --btn-main: var(--bs-purple-400);
2100
+ --btn-secondary: var(--bs-purple-medium);
2154
2101
  }
2155
- /* Disabled State */
2156
- .bs-circle-button:where(:disabled, [aria-disabled]:not([aria-disabled="false"])) /* for links as buttons */ {
2157
- --btn-icon-stroke-color: var(--bs-ink-disabled);
2158
- --btn-text-color: var(--bs-ink-disabled);
2159
- pointer-events: none;
2102
+ .bs-button:where([data-variant^='warning']) {
2103
+ --btn-ghost-ink: var(--bs-ink-orange);
2104
+ --btn-highlight: var(--bs-orange-100);
2105
+ --btn-light: var(--bs-orange-10);
2106
+ --btn-main: var(--bs-warning);
2107
+ --btn-secondary: var(--bs-orange-base);
2160
2108
  }
2161
- .bs-circle-button:where(:disabled, [aria-disabled]:not([aria-disabled="false"])) {
2162
- --btn-icon-bg-color: var(--bs-bg-disabled);
2109
+ .bs-button:where([data-variant^='negative']) {
2110
+ --btn-ghost-ink: var(--bs-ink-red);
2111
+ --btn-highlight: var(--bs-red-100);
2112
+ --btn-light: var(--bs-red-10);
2113
+ --btn-main: var(--bs-red-400);
2114
+ --btn-secondary: var(--bs-red-medium);
2163
2115
  }
2164
- /* Button Size */
2165
- .bs-circle-button:where([data-size^='sm']) {
2166
- --btn-icon-padding: .375rem;
2167
- --btn-icon-size: .75rem;
2168
- --btn-text-size: .875rem;
2116
+ /* pink variant */
2117
+ .bs-button:where([data-variant^='pink']) {
2118
+ --btn-ghost-ink: var(--bs-ink-pink);
2119
+ --btn-highlight: var(--bs-pink-400);
2120
+ --btn-light: var(--bs-pink-10);
2121
+ --btn-main: var(--bs-pink-400);
2122
+ --btn-secondary: var(--bs-pink-300);
2169
2123
  }
2170
- .bs-circle-button:where([data-size^='sm'][data-text]:not([data-text="false"])) {
2171
- --btn-icon-padding: .3125rem;
2172
- --btn-icon-size: .625rem;
2173
- --btn-text-size: 1rem;
2124
+ /* royal blue variant */
2125
+ .bs-button:where([data-variant^='royal']) {
2126
+ --btn-ghost-ink: var(--bs-ink-royal);
2127
+ --btn-highlight: var(--bs-royal-400);
2128
+ --btn-light: var(--bs-royal-10);
2129
+ --btn-main: var(--bs-royal-400);
2130
+ --btn-secondary: var(--bs-royal-300);
2174
2131
  }
2175
- .bs-circle-button:where([data-size='xs'][data-text]:not([data-text="false"])) {
2176
- --btn-icon-padding: .25rem;
2177
- --btn-icon-size: .5rem;
2178
- --btn-text-size: .875rem;
2132
+ /* white variant - for dark backgrounds + ghost btn or text btn only */
2133
+ .bs-button:where([data-variant^='white'][data-ghost]:not([data-ghost="false"])) {
2134
+ --btn-ghost-ink: var(--bs-ink-white);
2135
+ --btn-highlight: var(--bs-ink-white);
2136
+ --btn-light: var(--bs-white-10);
2137
+ --btn-main: var(--bs-ink-white);
2179
2138
  }
2180
- /* Color Variants */
2181
- .bs-circle-button:where([data-variant^="color"]) {
2182
- --btn-gap: .5rem;
2183
- --btn-icon-bg-color: transparent;
2184
- --btn-icon-padding: 0;
2185
- --btn-icon-size: .75rem; /* stays the same for all sizes */
2186
- --btn-icon-stroke-color: var(--btn-text-color);
2139
+ /* DEPRECATED */
2140
+ /* ------------ Text Button ------------ */
2141
+ .bs-button:where([data-text]:not([data-text="false"])) {
2142
+ --btn-focus-inset: -0.25rem -0.5rem;
2143
+ --btn-focus-pseudo-width: calc(100% + 1rem); /* text btns don't have side padding, but we do want focus outline to look padded */
2144
+ --btn-height: auto;
2145
+ --btn-ink: var(--bs-ink-blue);
2146
+ --btn-padding: 0;
2187
2147
  --btn-secondary: transparent;
2188
- --btn-shadow-color-active: transparent;
2148
+ --btn-text-size: var(--bs-text-md);
2149
+ --btn-weight: 400;
2150
+ background-color: transparent;
2151
+ cursor: pointer;
2152
+ line-height: 150%;
2189
2153
  }
2190
- .bs-circle-button:where([data-variant="color-blue"]) {
2191
- --btn-border-color-focused: var(--bs-ink-blue);
2192
- --btn-text-color: var(--bs-ink-blue);
2193
- --btn-text-color-hovered: var(--bs-blue-base);
2154
+ /* DEPRECATED */
2155
+ .bs-button:where([data-text]:not([data-text="false"]):not(:disabled):not([aria-disabled="true"]):hover) {
2156
+ --btn-ink: var(--bs-blue-base);
2157
+ background-color: transparent;
2158
+ text-decoration: underline;
2194
2159
  }
2195
- .bs-circle-button:where([data-variant="color-royal"]) {
2196
- --btn-border-color-focused: var(--bs-ink-royal);
2197
- --btn-text-color: var(--bs-ink-royal);
2198
- --btn-text-color-hovered: var(--bs-royal-medium);
2160
+ /* DEPRECATED */
2161
+ .bs-button:where([data-text]:not([data-text="false"]):not(:disabled):not([aria-disabled="true"]):hover):has(svg) {
2162
+ text-decoration: none;
2199
2163
  }
2200
- .bs-circle-button:where([data-variant="color-purple"]) {
2201
- --btn-border-color-focused: var(--bs-purple-400);
2202
- --btn-text-color: var(--bs-ink-purple);
2203
- --btn-text-color-hovered: var(--bs-purple-medium);
2164
+ /* DEPRECATED */
2165
+ .bs-button:where([data-text]:not([data-text="false"]):not(:disabled):not([aria-disabled="true"]):active) {
2166
+ box-shadow: none;
2167
+ transform: none;
2204
2168
  }
2205
- .bs-circle-button:where([data-variant="color-pink"]) {
2206
- --btn-border-color-focused: var(--bs-pink-400);
2207
- --btn-text-color: var(--bs-ink-pink);
2208
- --btn-text-color-hovered: var(--bs-pink-base);
2169
+ /* DEPRECATED */
2170
+ .bs-button:where([data-variant^='negative'][data-text]:not([data-text="false"])),
2171
+ .bs-button:where([data-variant^='negative'][data-text]:not([data-text="false"]):not(:disabled):not([aria-disabled="true"]):hover) {
2172
+ --btn-ink: var(--bs-ink-red);
2209
2173
  }
2210
- .bs-circle-button:where([data-variant="color-orange"]) {
2211
- --btn-border-color-focused: var(--bs-ink-orange);
2212
- --btn-text-color: var(--bs-ink-orange);
2213
- --btn-text-color-hovered: var(--bs-orange-base);
2174
+ /* DEPRECATED */
2175
+ .bs-button:where([data-variant^='white'][data-text]:not([data-text="false"])),
2176
+ .bs-button:where([data-variant^='white'][data-text]:not([data-text="false"]):not(:disabled):not([aria-disabled="true"]):hover) {
2177
+ --btn-ink: var(--bs-ink-white);
2178
+ --btn-main: var(--bs-ink-white);
2214
2179
  }
2215
- .bs-circle-button:where([data-variant="color-red"]) {
2216
- --btn-border-color-focused: var(--bs-ink-red);
2217
- --btn-text-color: var(--bs-ink-red);
2218
- --btn-text-color-hovered: var(--bs-red-base);
2180
+ /* ------------ Button Sizes, Media-based Text Sizing -------------- */
2181
+ /* Std button: Mobile text size, DT text size */
2182
+ .bs-button {
2183
+ --btn-text-size: 1rem;
2219
2184
  }
2220
- .bs-circle-button:where([data-variant="color-white"]) {
2221
- --btn-border-color-focused: var(--bs-ink-white);
2222
- --btn-text-color: var(--bs-ink-white);
2223
- /* 80% of --bs-white */
2224
- --btn-text-color-hovered: rgba(255, 255, 255, 0.8);
2185
+ @media (min-width: 1166px) {
2186
+ .bs-button {
2187
+ --btn-text-size: 1.125rem;
2188
+ }
2225
2189
  }
2226
- .bs-circle-button:where([data-variant^="color"]):where(:disabled, [aria-disabled]:not([aria-disabled="false"])) {
2227
- --btn-icon-bg-color: transparent;
2228
- --btn-text-color: var(--bs-ink-disabled);
2190
+ .bs-button:where([data-size^='sm']) {
2191
+ --btn-height: 1.75rem;
2192
+ --btn-padding: .25rem .75rem .375rem;
2193
+ /* Std button size="sm" text size is same across all media sizes */
2194
+ --btn-text-size: var(--bs-text-sm);
2229
2195
  }
2230
- /* size XXS only supported for color variants */
2231
- .bs-circle-button:where([data-variant^="color"]):where([data-size='xxs'][data-text]:not([data-text="false"])) {
2232
- --btn-text-size: .75rem;
2233
- --btn-text-weight: 600;
2196
+ /* DEPRECATED */
2197
+ /* Text buttons: For now, text size not dependent on media size */
2198
+ .bs-button:where([data-text]:not([data-text="false"])) {
2199
+ --btn-height: auto;
2200
+ --btn-padding: 0;
2201
+ --btn-text-size: var(--bs-text-md);
2234
2202
  }
2235
- /* Option list */
2236
- .bs-dropdown-options-deprecated {
2237
- display: flex;
2238
- flex-direction: column;
2239
- gap: 0.5rem;
2240
- list-style: none;
2241
- margin-bottom: 0.25rem;
2242
- margin-top: 0.25rem;
2243
- max-height: var(--options-height-max, 20rem);/* constrain scrollable to options section */
2244
- overflow-y: auto;
2245
- padding-block: 0.5rem;
2246
- padding-left: 0;
2247
- position: relative;
2203
+ /* DEPRECATED */
2204
+ .bs-button:where([data-size^='sm'][data-text]:not([data-text="false"])) {
2205
+ --btn-text-size: var(--bs-text-base);
2248
2206
  }
2249
- .bs-dropdown-options-deprecated:focus-visible {
2250
- outline: none;
2207
+ /* DEPRECATED */
2208
+ /* Size XS & XXS only applies to text buttons */
2209
+ .bs-button:where([data-size^='xs'][data-text]:not([data-text="false"])) {
2210
+ --btn-text-size: var(--bs-text-sm);
2251
2211
  }
2252
- /* Stabilize scrollbar gutter for Firefox (https://bugzilla.mozilla.org/show_bug.cgi?id=764076) */
2253
- @media (min-width: 1166px) {
2254
- /* 5th or 8th child triggers overflow-y (depending on variant) */
2255
- :where([data-width="content"]) > .bs-dropdown-options-deprecated:where(:has([data-variant*="description"]:nth-child(5))),
2256
- :where([data-width="content"]) > .bs-dropdown-options-deprecated:where(:has(li:not([data-variant*="description"]):nth-child(8))) {
2257
- scrollbar-gutter: stable;
2258
- }
2259
-
2260
- /* Fallback for older Firefox+ only if we're not setting data-overflow values */
2261
- @supports not selector(:has(*)) {
2262
- :where([data-width="content"]) > .bs-dropdown-options-deprecated {
2263
- scrollbar-gutter: stable;
2264
- }
2265
- }
2266
-
2267
- /* Also allow this for js solutions if :has not available via data-overflow */
2268
- /* Reset scrollbar gutter when data-overflow is used */
2269
- :where([data-width="content"]) > .bs-dropdown-options-deprecated:where([data-overflow]) {
2270
- scrollbar-gutter: auto;
2271
- }
2272
-
2273
- :where([data-width="content"]) > .bs-dropdown-options-deprecated:where([data-overflow="true"]) {
2274
- scrollbar-gutter: stable;
2275
- }
2276
- }
2277
- /* Option list item */
2278
- .bs-dropdown-options-deprecated :where(li) {
2279
- align-items: center;
2280
- border-bottom: 2px solid transparent;
2281
- border-left: 4px solid transparent;
2282
- border-radius: 3px;
2283
- border-right: 2px solid transparent;
2284
- border-top: 2px solid transparent;
2285
- color: var(--bs-ink-base);
2286
- -moz-column-gap: 0.5rem;
2287
- column-gap: 0.5rem;
2288
- cursor: pointer;
2289
- display: grid;
2290
- padding-block: 0.25rem;
2291
- padding-inline: 1.25rem;
2292
- row-gap: 0.125rem;
2293
- word-break: break-word;
2294
- word-wrap: break-word;
2212
+ /* DEPRECATED */
2213
+ .bs-button:where([data-size^='xxs'][data-text]:not([data-text="false"])) {
2214
+ --btn-text-size: var(--bs-text-xs);
2215
+ --btn-weight: 600;
2295
2216
  }
2296
- /* Variant: 2-col */
2297
- .bs-dropdown-options-deprecated :where(li[data-variant~="2-col"]) {
2298
- grid-template-columns: min-content 1fr;
2217
+ /* DEPRECATED */
2218
+ /* Size SM buttons will shrink icons to 14px */
2219
+ .bs-button:where([data-size^='sm']) :where(.bs-icon) {
2220
+ height: 0.875rem;
2221
+ width: 0.875rem;
2299
2222
  }
2300
- /* Variant: 3-col */
2301
- .bs-dropdown-options-deprecated :where(li[data-variant~="3-col"]) {
2302
- grid-template-columns: min-content min-content 1fr;
2223
+ /* ------------ Disabled Styling ------------ */
2224
+ :where(button:disabled),
2225
+ .bs-button:where(:disabled),
2226
+ .bs-button:where([aria-disabled="true"]) /* for links as buttons */ {
2227
+ pointer-events: none;
2303
2228
  }
2304
- /* Variant: description */
2305
- .bs-dropdown-options-deprecated :where(li:not([data-variant*="-col"])[data-variant~="description"] > :nth-child(2)),
2306
- .bs-dropdown-options-deprecated :where(li[data-variant~="2-col"][data-variant~="description"] > :nth-child(3)),
2307
- .bs-dropdown-options-deprecated :where(li[data-variant~="3-col"][data-variant~="description"] > :nth-child(4)) {
2308
- color: var(--bs-ink-light);
2309
- font-size: var(--bs-text-xs);
2310
- min-height: 1.125rem;
2311
- line-height: 1.125rem;
2229
+ .bs-button:where(:disabled),
2230
+ .bs-button:where([aria-disabled="true"]) {
2231
+ --btn-ink: var(--bs-ink-disabled);
2232
+ --btn-main: var(--bs-bg-disabled);
2233
+ box-shadow: none;
2234
+ transform: none;
2312
2235
  }
2313
- /* Variant: 2-col description */
2314
- .bs-dropdown-options-deprecated :where(li[data-variant~="2-col"][data-variant~="description"] > :nth-child(3)) {
2315
- grid-column-start: 2;
2236
+ .bs-button:where([data-ghost]:not([data-ghost="false"])):disabled,
2237
+ .bs-button:where([data-ghost]:not([data-ghost="false"]))[aria-disabled="true"] {
2238
+ --btn-ghost-ink: var(--bs-ink-disabled);
2316
2239
  }
2317
- /* Variant: 3-col description */
2318
- .bs-dropdown-options-deprecated :where(li[data-variant~="3-col"][data-variant~="description"] > :nth-child(4)) {
2319
- grid-column-start: 3;
2240
+ /* DEPRECATED */
2241
+ .bs-button:where([data-text]:not([data-text="false"])):disabled,
2242
+ .bs-button:where([data-text]:not([data-text="false"]))[aria-disabled="true"] {
2243
+ --btn-main: transparent;
2320
2244
  }
2321
- /* Hover or data-selected */
2322
- .bs-dropdown-options-deprecated :where(li:not([role="separator"]):hover),
2323
- .bs-dropdown-options-deprecated :where(li[data-selected]) {
2324
- background-color: var(--bs-bg-medium-to-light);
2325
- border-left: 4px solid var(--bs-ink-blue);
2326
- color: var(--bs-ink-blue);
2245
+ /* ------------ links as buttons ------------ */
2246
+ a.bs-button {
2247
+ align-items: center;
2248
+ display: inline-flex;
2327
2249
  outline: none;
2250
+ vertical-align: middle;
2328
2251
  }
2329
- /* Variant: negative */
2330
- .bs-dropdown-options-deprecated :where(li[data-variant~="negative"]:hover),
2331
- .bs-dropdown-options-deprecated :where(li[data-variant~="negative"][data-selected]),
2332
- .bs-dropdown-options-deprecated :where(li[data-variant~="negative"][data-selected]:hover) {
2333
- /* 25% alpha version of --bs-red-400 */
2334
- background-color: rgba(248, 169, 170, 0.25);
2335
- border-left: 4px solid var(--bs-ink-red);
2336
- color: var(--bs-ink-red);
2252
+ .bs-chart {
2253
+ display: block;
2254
+ height: 100%;
2255
+ width: 100%;
2337
2256
  }
2338
- /* Hover or data-selected for 2-col/3-col/description variants */
2339
- .bs-dropdown-options-deprecated :where(li:not([data-variant*="-col"])[data-variant~="description"]:hover > :nth-child(2)),
2340
- .bs-dropdown-options-deprecated :where(li[data-variant~="2-col"][data-variant~="description"]:hover > :nth-child(3)),
2341
- .bs-dropdown-options-deprecated :where(li[data-variant~="3-col"][data-variant~="description"]:hover > :nth-child(4)),
2342
- .bs-dropdown-options-deprecated :where(li:not([data-variant*="-col"])[data-variant~="description"][data-selected] > :nth-child(2)),
2343
- .bs-dropdown-options-deprecated :where(li[data-variant~="2-col"][data-variant~="description"][data-selected] > :nth-child(3)),
2344
- .bs-dropdown-options-deprecated :where(li[data-variant~="3-col"][data-variant~="description"][data-selected] > :nth-child(4)) {
2345
- color: var(--bs-ink-blue);
2257
+ .bs-chart :where(figure) {
2258
+ -moz-column-gap: 2.5rem;
2259
+ column-gap: 2.5rem;
2260
+ display: grid;
2261
+ font-size: .875rem;
2262
+ grid-template-areas: var(--chart-gridareas, "chart" "legend");
2263
+ grid-template-columns: var(--chart-gridcols, 100%);
2264
+ grid-template-rows: var(--chart-gridrows, minmax(0px, auto) minmax(0px, min-content));
2265
+ height: 100%;
2266
+ margin-block: unset;
2267
+ margin-inline: unset;
2268
+ position: relative;
2269
+ width: 100%;
2346
2270
  }
2347
- /* Hover or data-selected for negative + 2-col/3-col/description variants */
2348
- .bs-dropdown-options-deprecated :where(li[data-variant~="negative"]:not([data-variant*="-col"])[data-variant~="description"]:hover > :nth-child(2)),
2349
- .bs-dropdown-options-deprecated :where(li[data-variant~="negative"][data-variant~="2-col"][data-variant~="description"]:hover > :nth-child(3)),
2350
- .bs-dropdown-options-deprecated :where(li[data-variant~="negative"][data-variant~="3-col"][data-variant~="description"]:hover > :nth-child(4)),
2351
- .bs-dropdown-options-deprecated :where(li[data-variant~="negative"]:not([data-variant*="-col"])[data-variant~="description"][data-selected] > :nth-child(2)),
2352
- .bs-dropdown-options-deprecated :where(li[data-variant~="negative"][data-variant~="2-col"][data-variant~="description"][data-selected] > :nth-child(3)),
2353
- .bs-dropdown-options-deprecated :where(li[data-variant~="negative"][data-variant~="3-col"][data-variant~="description"][data-selected] > :nth-child(4)) {
2354
- color: var(--bs-ink-red);
2271
+ .bs-chart :where(figure > :first-child) {
2272
+ grid-area: chart;
2355
2273
  }
2356
- /* List option keyboard navigation focus */
2357
- .bs-dropdown-options-deprecated:where(:focus-visible) :where(li[data-active]) {
2358
- --focus-border-color: var(--bs-blue-base);
2359
- border: 2px solid var(--focus-border-color);
2360
- outline: none;
2361
- padding-left: 1.375rem;
2274
+ .bs-chart :where(figure > :last-child) {
2275
+ grid-area: legend;
2362
2276
  }
2363
- /* Navigation focus on a selected element should preserve 4px left border */
2364
- .bs-dropdown-options-deprecated:where(:focus-visible) :where(li[data-selected][data-active]) {
2365
- border-left: 4px solid var(--focus-border-color);
2366
- padding-left: 1.25rem;
2277
+ .bs-chart :where(figure > div) {
2278
+ min-width: 100%;
2279
+ width: 100%;
2367
2280
  }
2368
- /* data-variant="negative" list option keyboard navigation focus */
2369
- .bs-dropdown-options-deprecated:where(:focus-visible) :where(li[data-variant~="negative"][data-active]) {
2370
- --focus-border-color: var(--bs-red-200);
2281
+ .bs-chart :where(canvas) {
2282
+ width: 100%;
2371
2283
  }
2372
- /* Multi-select divider */
2373
- .bs-dropdown-options-deprecated :where(li[role="separator"]) {
2374
- cursor: default;
2375
- padding-block: 0.125rem;
2376
- padding-right: 1.375rem;
2284
+ /* --------- Legend Styles --------- */
2285
+ .bs-chart :where(figcaption) {
2286
+ background-color: var(--legend-bg-color, transparent);
2287
+ border-radius: .5rem;
2288
+ border: 1px solid var(--legend-border-color, transparent);
2289
+ clip-path: var(--legend-clip-path, none);
2290
+ max-height: var(--legend-max-height, 100%);
2291
+ overflow-y: var(--legend-overflow-y, hidden);
2377
2292
  }
2378
- /* Multi-select divider line */
2379
- .bs-dropdown-options-deprecated :where(hr) {
2380
- background-color: var(--bs-navy-light);
2381
- height: .0625rem;
2382
- margin-block: 0;
2383
- margin-inline: 0;
2293
+ .bs-chart :where(figcaption[data-hidden="true"]) {
2294
+ border: 0;
2295
+ clip: rect(0 0 0 0);
2296
+ height: 1px;
2297
+ margin: 0;
2298
+ overflow: hidden;
2299
+ padding: 0;
2300
+ position: absolute;
2301
+ white-space: nowrap;
2302
+ width: 1px;
2384
2303
  }
2385
- /* Disable hover styles */
2386
- .bs-dropdown-options-deprecated :where(li[data-no-hover]:hover) {
2387
- background-color: transparent;
2388
- border-left-color: transparent;
2389
- color: var(--bs-ink-base);
2390
- cursor: default;
2304
+ .bs-chart :where(ul) {
2305
+ align-items: var(--legend-flexalign, center);
2306
+ display: flex;
2307
+ -moz-column-gap: 2.5rem;
2308
+ column-gap: 2.5rem;
2309
+ flex-direction: var(--legend-flexdir, row);
2310
+ flex-wrap: var(--legend-flexwrap, wrap);
2311
+ padding-block: var(--legend-padding-block, .25rem);
2312
+ /* cjs-legend-padding is set dynamically by chart.js for bar charts */
2313
+ padding-inline: var(--legend-padding-inline, var(--cjs-legend-padding-inline, 2.5rem));
2314
+ row-gap: .75rem;
2391
2315
  }
2392
- /* Style label to look like other options */
2393
- .bs-dropdown-options-deprecated :where(li label) {
2316
+ .bs-chart :where(li, li:focus, li:active, li:focus-visible) {
2317
+ align-items: center;
2394
2318
  cursor: pointer;
2395
- font-size: 1rem;
2396
- font-weight: 400;
2319
+ display: flex;
2320
+ flex-direction: row;
2321
+ outline: 0;
2322
+ position: relative;
2323
+ width: var(--legend-item-width, auto);
2397
2324
  }
2398
- /* Don't change option color when checkbox is present */
2399
- .bs-dropdown-options-deprecated :where(li[data-variant~="checkbox"]):hover,
2400
- .bs-dropdown-options-deprecated :where(li[data-variant~="checkbox"][data-selected]) {
2401
- color: var(--bs-ink-base);
2325
+ .bs-chart :where(li)::after {
2326
+ border: solid var(--focus-color, transparent) 2px;
2327
+ border-radius: 0.25rem;
2328
+ content: '';
2329
+ display: block;
2330
+ inset: -.25rem;
2331
+ position: absolute;
2402
2332
  }
2403
- /* Don't change description color when checkbox is present */
2404
- .bs-dropdown-options-deprecated :where(li[data-variant~="checkbox"][data-variant~="2-col"][data-variant~="description"]):hover > :nth-child(3),
2405
- .bs-dropdown-options-deprecated :where(li[data-variant~="checkbox"][data-variant~="2-col"][data-variant~="description"][data-selected]) > :nth-child(3),
2406
- .bs-dropdown-options-deprecated :where(li[data-variant~="checkbox"][data-variant~="3-col"][data-variant~="description"]):hover > :nth-child(4),
2407
- .bs-dropdown-options-deprecated :where(li[data-variant~="checkbox"][data-variant~="3-col"][data-variant~="description"][data-selected]) > :nth-child(4) {
2408
- color: var(--bs-ink-light);
2333
+ .bs-chart :where(li:focus-visible) {
2334
+ --focus-color: var(--bs-blue-base);
2409
2335
  }
2410
- /* Overrides mobile style when not min-width 1166 */
2411
- .bs-dropdown-deprecated:where([data-no-mobile="true"]) :where(.bs-dropdown-options-deprecated) :where(li) {
2412
- padding-left: 0.5rem;
2413
- padding-right: 0.75rem;
2336
+ .bs-chart :where(li span) {
2337
+ background: var(--legend-item-box-fill);
2338
+ border-color: var(--legend-item-box-stroke);
2339
+ border-radius: var(--legend-item-swatch-radius, 3px);
2340
+ display: inline-block;
2341
+ height: var(--bs-text-md);
2342
+ margin-right: 10px;
2343
+ width: var(--bs-text-md);
2414
2344
  }
2415
- .bs-dropdown-deprecated:where([data-no-mobile="true"]) :where(.bs-dropdown-options-deprecated) :where(li[role="separator"]) {
2416
- padding-right: 0.625rem;
2345
+ .bs-chart :where(li p) {
2346
+ color: var(--legend-item-text-color);
2347
+ font-size: var(--bs-text-md);
2348
+ margin: 0;
2349
+ padding: 0;
2350
+ -webkit-text-decoration: var(--legend-item-text-decoration);
2351
+ text-decoration: var(--legend-item-text-decoration);
2417
2352
  }
2418
- .bs-dropdown-deprecated:where([data-no-mobile="true"]) :where(.bs-dropdown-options-deprecated:focus-visible) :where(li[data-active]) {
2419
- padding-left: 0.625rem;
2353
+ /* --------- Chart Layout Variants --------- */
2354
+ /*
2355
+ For now, per design team instructions, these are NOT responsive as we're only to expose these
2356
+ variants for a very specific, single use-case that involves horizontal scroll...
2357
+ If we want to make these responsive in the future, can wrap in media query.
2358
+ */
2359
+ .bs-chart:where([data-layout="chart-right"], [data-layout="chart-left"]) {
2360
+ --chart-gridrows: minmax(0px, auto);
2361
+ --legend-bg-color: var(--bs-bg-base);
2362
+ --legend-border-color: var(--bs-gray-light);
2363
+ --legend-clip-path: border-box;
2364
+ --legend-flexalign: start;
2365
+ --legend-flexdir: column;
2366
+ --legend-flexwrap: nowrap;
2367
+ --legend-item-width: 100%;
2368
+ --legend-max-height: 17.1875rem;
2369
+ --legend-overflow-y: auto;
2370
+ --legend-padding-block: .75rem;
2371
+ --legend-padding-inline: .75rem;
2420
2372
  }
2421
- .bs-dropdown-deprecated:where([data-no-mobile="true"]) :where(.bs-dropdown-options-deprecated:focus-visible) :where(li[data-selected][data-active]) {
2422
- padding-left: 0.5rem;
2373
+ .bs-chart:where([data-layout="chart-left"]) {
2374
+ --chart-gridareas: "chart legend";
2375
+ --chart-gridcols: auto minmax(150px, auto);
2376
+ }
2377
+ .bs-chart:where([data-layout="chart-right"]) {
2378
+ --chart-gridareas: "legend chart";
2379
+ --chart-gridcols: minmax(150px, auto) auto;
2380
+ }
2381
+ .bs-chart-table {
2382
+ border: 0;
2383
+ clip: rect(0 0 0 0);
2384
+ height: 1px;
2385
+ margin: 0;
2386
+ overflow: hidden;
2387
+ padding: 0;
2388
+ position: absolute;
2389
+ white-space: nowrap;
2390
+ width: 1px;
2391
+ }
2392
+ /*
2393
+ uncomment to make visible when testing
2394
+ .bs-chart-table {
2395
+ clip: none;
2396
+ overflow: auto;
2397
+ height: auto;
2398
+ position: relative;
2399
+ width: auto;
2423
2400
  }
2424
- @media (min-width: 1166px) {
2425
- .bs-dropdown-options-deprecated :where(li) {
2426
- padding-left: 0.5rem;
2427
- padding-right: 0.75rem;
2428
- }
2429
-
2430
- .bs-dropdown-options-deprecated :where(li[role="separator"]) {
2431
- padding-right: 0.625rem;
2432
- }
2433
2401
 
2434
- .bs-dropdown-options-deprecated:where(:focus-visible) :where(li[data-active]) {
2435
- padding-left: 0.625rem;
2436
- }
2402
+ */
2403
+ /*
2404
+ Properties : Defaults // Description
2405
+ ====================================
2406
+ --btn-icon-bg-color: var(--btn-main); // icon bg color (base state)
2407
+ --btn-icon-padding: .75rem; // padding around icon svg
2408
+ --btn-icon-size: 1.5rem; // svg width and height
2409
+ --btn-icon-stroke-color: var(--bs-white);
2410
+ --btn-main: var(--bs-blue-base); // many things... should probably break this up
2411
+ --btn-text-color: var(--bs-ink-base);
2412
+ --btn-text-size: var(--bs-text-md);
2437
2413
 
2438
- .bs-dropdown-options-deprecated:where(:focus-visible) :where(li[data-selected][data-active]) {
2439
- padding-left: 0.5rem;
2440
- }
2414
+ --btn-border-color: transparent; // focus state outline color - transparent base state, --btn-main base focus state
2415
+ --btn-border-color-focused: var(--btn-main); // focus state ring color set on variants
2416
+ --btn-secondary: var(--bs-blue-medium); // hover state icon bg
2417
+ --btn-shadow-color-active: var(--btn-main); // active state shadow color (icon bg)
2418
+ --btn-text-color-hovered: var(--bs-ink-base); // hover state text color
2419
+ */
2420
+ :where(.bs-circle-button) {
2421
+ --btn-border-color-focused: var(--btn-main);
2422
+ --btn-border-color: transparent;
2423
+ --btn-focus-inset: -0.25rem;
2424
+ --btn-gap: .5rem;
2425
+ --btn-icon-bg-color: var(--btn-main);
2426
+ --btn-icon-padding: .75rem;
2427
+ --btn-icon-size: 1.5rem;
2428
+ --btn-icon-stroke-color: var(--bs-white);
2429
+ --btn-main: var(--bs-blue-base);
2430
+ --btn-secondary: var(--bs-blue-medium);
2431
+ --btn-shadow-color-active: var(--btn-main);
2432
+ --btn-text-color-hovered: var(--bs-ink-base);
2433
+ --btn-text-color: var(--bs-ink-base);
2434
+ --btn-text-size: 1.125rem;
2435
+ --btn-text-weight: 400;
2441
2436
  }
2442
- /* Parent */
2443
- .bs-dropdown-deprecated-parent {
2444
- display: inline-block;
2437
+ .bs-circle-button {
2438
+ align-items: center;
2439
+ background-color: transparent;
2440
+ color: var(--btn-text-color);
2441
+ cursor: pointer;
2442
+ display: inline-flex;
2443
+ font-size: var(--btn-text-size);
2444
+ font-weight: var(--btn-text-weight);
2445
+ gap: var(--btn-gap);
2446
+ outline: none;
2445
2447
  position: relative;
2448
+ vertical-align: middle;
2446
2449
  }
2447
- /* Backdrop for mobile bottom sheet */
2448
- .bs-dropdown-deprecated-backdrop {
2449
- -webkit-backdrop-filter: blur(4px);
2450
- backdrop-filter: blur(4px);
2451
- background: rgba(29, 30, 72, 0.05);
2452
- bottom: 0;
2453
- content: "";
2454
- left: 0;
2455
- position: fixed;
2456
- right: 0;
2457
- top: 0;
2458
- z-index: 998;
2450
+ a.bs-circle-button {
2451
+ align-items: center;
2452
+ display: inline-flex;
2453
+ outline: none;
2454
+ text-decoration: none;
2459
2455
  }
2460
- /* Content */
2461
- .bs-dropdown-deprecated {
2462
- --dropdown-bottom: 0;
2463
- --dropdown-left: 0;
2464
- --dropdown-right: auto;
2465
- --dropdown-top: auto;
2466
- --dropdown-width: 100%;
2467
- --dropdown-transform: translate(0, 100%);
2468
-
2469
- background-color: var(--bs-bg-base-to-medium);
2470
- border-radius: 4px;
2471
- bottom: var(--dropdown-bottom);
2472
- box-shadow: var(--bs-shadow-contentMedium);
2473
- left: var(--dropdown-left);
2474
- line-height: 1.5rem;
2475
- margin: 0;
2476
- opacity: 0;
2477
- overflow-y: auto;
2478
- position: fixed;
2479
- right: var(--dropdown-right);
2480
- top: var(--dropdown-top);
2481
- transform-origin: center bottom;
2482
- transform: var(--dropdown-transform);
2483
- transition-duration: var(--bs-transition-quick);
2484
- transition-property: opacity, transform;
2485
- transition-timing-function: var(--bs-transition-ease);
2486
- width: var(--dropdown-width);
2487
- z-index: 999;
2456
+ .bs-circle-button :where(.bs-circle-button-icon) {
2457
+ align-items: center;
2458
+ background-color: var(--btn-icon-bg-color);
2459
+ border: none;
2460
+ border-radius: 50%;
2461
+ color: var(--btn-icon-stroke-color);
2462
+ display: inline-flex;
2463
+ justify-content: center;
2464
+ outline: 2px solid transparent;
2465
+ padding: var(--btn-icon-padding);
2466
+ position: relative;
2467
+ transition: all var(--bs-transition-fast) var(--bs-transition-ease);
2468
+ }
2469
+ .bs-circle-button :where(.bs-circle-button-icon)::before {
2470
+ border-color: var(--btn-border-color);
2471
+ border-radius: 50%;
2472
+ border-style: solid;
2473
+ border-width: 0.125rem;
2474
+ content: '';
2475
+ inset: var(--btn-focus-inset);
2476
+ position: absolute;
2477
+ transition: border-color var(--bs-transition-fast) var(--bs-transition-ease), transform var(--bs-transition-fast) var(--bs-transition-ease);
2478
+ }
2479
+ .bs-circle-button :where(.bs-circle-button-icon) :where(.bs-icon) {
2480
+ --icon-size: var(--btn-icon-size);
2481
+ }
2482
+ /* non-bs-icon svgs */
2483
+ .bs-circle-button :where(.bs-circle-button-icon) > :where(svg) {
2484
+ height: var(--btn-icon-size);
2485
+ width: var(--btn-icon-size);
2486
+ }
2487
+ /* Icon Buttons with Text */
2488
+ .bs-circle-button:where([data-text]:not([data-text="false"])) {
2489
+ --btn-text-size: var(--bs-text-md);
2490
+ --btn-icon-size: 0.75rem;
2491
+ --btn-icon-padding: 0.375rem;
2488
2492
  }
2489
- /* Mobile Header */
2490
- .bs-dropdown-deprecated > :where(header) {
2491
- border-bottom: 1px solid var(--bs-border-base);
2492
- display: flex;
2493
- justify-content: space-between;
2494
- padding: 1.5rem;
2493
+ /* Ghost Buttons */
2494
+ .bs-circle-button:where([data-ghost]:not([data-ghost="false"])) {
2495
+ --btn-icon-bg-color: transparent;
2496
+ --btn-icon-stroke-color: var(--btn-main);
2497
+ --btn-light: var(--bs-blue-10);
2498
+ --btn-secondary: var(--bs-blue-10);
2495
2499
  }
2496
- .bs-dropdown-deprecated > :where(header) :where(h3) {
2497
- font-size: 1.25rem;
2500
+ /* Active, Hover, Focus states */
2501
+ .bs-circle-button:active, .bs-circle-button:hover {
2502
+ --btn-icon-bg-color: var(--btn-secondary);
2503
+ --btn-text-color: var(--btn-text-color-hovered);
2498
2504
  }
2499
- .bs-dropdown-deprecated > :where(header) :where(p) {
2500
- font-size: 1rem;
2505
+ .bs-circle-button:active :where(.bs-circle-button-icon) {
2506
+ box-shadow: inset 0px 0px 4px 1px var(--btn-shadow-color-active);
2507
+ transform-origin: center;
2508
+ transform: scale(0.97);
2501
2509
  }
2502
- .bs-dropdown-deprecated > :where(header) :where(button) {
2503
- cursor: pointer;
2504
- height: 1rem;
2505
- width: 1rem;
2510
+ .bs-circle-button:where([data-direction="right"]):hover :where(.bs-circle-button-icon),
2511
+ .bs-circle-button:where([data-direction="right"]):hover::before {
2512
+ transform: translateX(.25rem);
2506
2513
  }
2507
- /* data-shown */
2508
- .bs-dropdown-deprecated:where([data-shown]:not([data-shown="false"])) {
2509
- --dropdown-transform: translate(0, 0);
2510
- opacity: 1;
2514
+ .bs-circle-button:where([data-direction="left"]):hover :where(.bs-circle-button-icon),
2515
+ .bs-circle-button:where([data-direction="left"]):hover::before {
2516
+ transform: translateX(-.25rem);
2511
2517
  }
2512
- /* Sizing */
2513
- .bs-dropdown-deprecated:where([data-width="sm"]) {
2514
- --dropdown-wscreen-width: 10rem;
2518
+ .bs-circle-button:where([data-ghost]:not([data-ghost="false"])):hover {
2519
+ --btn-icon-bg-color: var(--btn-light);
2515
2520
  }
2516
- .bs-dropdown-deprecated:where([data-width="md"]),
2517
- .bs-dropdown-deprecated:where(:not([data-width])) {
2518
- --dropdown-wscreen-width: 20rem;
2521
+ .bs-circle-button:where(:focus-visible) {
2522
+ --btn-border-color: var(--btn-border-color-focused);
2519
2523
  }
2520
- .bs-dropdown-deprecated:where([data-width="lg"]) {
2521
- --dropdown-wscreen-width: 40rem;
2524
+ /* Disabled State */
2525
+ .bs-circle-button:where(:disabled, [aria-disabled]:not([aria-disabled="false"])) /* for links as buttons */ {
2526
+ --btn-icon-stroke-color: var(--bs-ink-disabled);
2527
+ --btn-text-color: var(--bs-ink-disabled);
2528
+ pointer-events: none;
2522
2529
  }
2523
- .bs-dropdown-deprecated:where([data-width="content"]) {
2524
- --dropdown-wscreen-width: max-content;
2530
+ .bs-circle-button:where(:disabled, [aria-disabled]:not([aria-disabled="false"])) {
2531
+ --btn-icon-bg-color: var(--bs-bg-disabled);
2525
2532
  }
2526
- .bs-dropdown-deprecated-parent:where([data-width="anchor"]) :where(.bs-dropdown-deprecated) {
2527
- --dropdown-wscreen-width: 100%;
2533
+ /* Button Size */
2534
+ .bs-circle-button:where([data-size^='sm']) {
2535
+ --btn-icon-padding: .375rem;
2536
+ --btn-icon-size: .75rem;
2537
+ --btn-text-size: .875rem;
2528
2538
  }
2529
- /* data-top */
2530
- .bs-dropdown-deprecated:where([data-top]:not([data-top="false"])) {
2531
- --dropdown-wscreen-bottom: calc(100% + 0.5rem);
2532
- --dropdown-wscreen-top: auto;
2539
+ .bs-circle-button:where([data-size^='sm'][data-text]:not([data-text="false"])) {
2540
+ --btn-icon-padding: .3125rem;
2541
+ --btn-icon-size: .625rem;
2542
+ --btn-text-size: 1rem;
2533
2543
  }
2534
- /* data-center */
2535
- .bs-dropdown-deprecated-parent:where([data-center]:not([data-center="false"])) :where(.bs-dropdown-deprecated) {
2536
- --dropdown-transform: translate(-50%, 0);
2537
- --dropdown-wscreen-left: 50%;
2544
+ .bs-circle-button:where([data-size='xs'][data-text]:not([data-text="false"])) {
2545
+ --btn-icon-padding: .25rem;
2546
+ --btn-icon-size: .5rem;
2547
+ --btn-text-size: .875rem;
2538
2548
  }
2539
- /* data-right */
2540
- .bs-dropdown-deprecated-parent:where([data-right]:not([data-right="false"])) :where(.bs-dropdown-deprecated) {
2541
- --dropdown-transform: translate(0, 0);
2542
- --dropdown-wscreen-left: auto;
2543
- --dropdown-wscreen-right: 0;
2549
+ /* Color Variants */
2550
+ .bs-circle-button:where([data-variant^="color"]) {
2551
+ --btn-gap: .5rem;
2552
+ --btn-icon-bg-color: transparent;
2553
+ --btn-icon-padding: 0;
2554
+ --btn-icon-size: .75rem; /* stays the same for all sizes */
2555
+ --btn-icon-stroke-color: var(--btn-text-color);
2556
+ --btn-secondary: transparent;
2557
+ --btn-shadow-color-active: transparent;
2544
2558
  }
2545
- /* Overrides mobile style when not min-width 1166 */
2546
- .bs-dropdown-deprecated:where([data-no-mobile="true"]) {
2547
- --dropdown-bottom: var(--dropdown-wscreen-bottom, auto);
2548
- --dropdown-left: var(--dropdown-wscreen-left, initial);
2549
- --dropdown-right: var(--dropdown-wscreen-right, initial);
2550
- --dropdown-top: var(--dropdown-wscreen-top, calc(100% + 0.5rem));
2551
- --dropdown-width: var(--dropdown-wscreen-width, initial);
2552
- --dropdown-transform: initial;
2553
-
2554
- position: absolute;
2559
+ .bs-circle-button:where([data-variant="color-blue"]) {
2560
+ --btn-border-color-focused: var(--bs-ink-blue);
2561
+ --btn-text-color: var(--bs-ink-blue);
2562
+ --btn-text-color-hovered: var(--bs-blue-base);
2555
2563
  }
2556
- .bs-dropdown-deprecated:where([data-no-mobile="true"]) > :where(header) {
2557
- display: none;
2564
+ .bs-circle-button:where([data-variant="color-royal"]) {
2565
+ --btn-border-color-focused: var(--bs-ink-royal);
2566
+ --btn-text-color: var(--bs-ink-royal);
2567
+ --btn-text-color-hovered: var(--bs-royal-medium);
2558
2568
  }
2559
- @media (min-width: 1166px) {
2560
- .bs-dropdown-deprecated-backdrop {
2561
- display: none;
2562
- }
2563
-
2564
- .bs-dropdown-deprecated {
2565
- --dropdown-bottom: var(--dropdown-wscreen-bottom, auto);
2566
- --dropdown-left: var(--dropdown-wscreen-left, initial);
2567
- --dropdown-right: var(--dropdown-wscreen-right, initial);
2568
- --dropdown-top: var(--dropdown-wscreen-top, calc(100% + 0.5rem));
2569
- --dropdown-width: var(--dropdown-wscreen-width, initial);
2570
- --dropdown-transform: initial;
2571
-
2572
- position: absolute;
2573
- }
2574
-
2575
- /* Hide the header */
2576
- .bs-dropdown-deprecated > :where(header) {
2577
- display: none;
2578
- }
2569
+ .bs-circle-button:where([data-variant="color-purple"]) {
2570
+ --btn-border-color-focused: var(--bs-purple-400);
2571
+ --btn-text-color: var(--bs-ink-purple);
2572
+ --btn-text-color-hovered: var(--bs-purple-medium);
2579
2573
  }
2580
- /* Vue Transition Styles - Only used in Vue component */
2581
- .bs-dropdown-deprecated:where(.bs-dropdown-deprecated-enter-from),
2582
- .bs-dropdown-deprecated:where(.bs-dropdown-deprecated-leave-to) {
2583
- opacity: 0;
2584
- transform: var(--dropdown-transform);
2574
+ .bs-circle-button:where([data-variant="color-pink"]) {
2575
+ --btn-border-color-focused: var(--bs-pink-400);
2576
+ --btn-text-color: var(--bs-ink-pink);
2577
+ --btn-text-color-hovered: var(--bs-pink-base);
2585
2578
  }
2586
- .bs-dropdown-deprecated:where(.bs-dropdown-deprecated-enter-to),
2587
- .bs-dropdown-deprecated:where(.bs-dropdown-deprecated-leave-from) {
2588
- opacity: 1;
2589
- transform: translate(0, 0);
2579
+ .bs-circle-button:where([data-variant="color-orange"]) {
2580
+ --btn-border-color-focused: var(--bs-ink-orange);
2581
+ --btn-text-color: var(--bs-ink-orange);
2582
+ --btn-text-color-hovered: var(--bs-orange-base);
2590
2583
  }
2591
- .bs-dropdown-deprecated :where(.mobile-select-button-container) {
2592
- display: none;
2593
- overflow: hidden;
2584
+ .bs-circle-button:where([data-variant="color-red"]) {
2585
+ --btn-border-color-focused: var(--bs-ink-red);
2586
+ --btn-text-color: var(--bs-ink-red);
2587
+ --btn-text-color-hovered: var(--bs-red-base);
2594
2588
  }
2595
- @media (max-width: 1166px) {
2596
- .bs-dropdown-deprecated :where(.mobile-select-button-container) {
2597
- display: flex;
2598
- }
2589
+ .bs-circle-button:where([data-variant="color-white"]) {
2590
+ --btn-border-color-focused: var(--bs-ink-white);
2591
+ --btn-text-color: var(--bs-ink-white);
2592
+ /* 80% of --bs-white */
2593
+ --btn-text-color-hovered: rgba(255, 255, 255, 0.8);
2599
2594
  }
2600
- .bs-dropdown-deprecated :where(.mobile-select-button) {
2601
- margin: .875rem;
2602
- width: 100%;
2595
+ .bs-circle-button:where([data-variant^="color"]):where(:disabled, [aria-disabled]:not([aria-disabled="false"])) {
2596
+ --btn-icon-bg-color: transparent;
2597
+ --btn-text-color: var(--bs-ink-disabled);
2598
+ }
2599
+ /* size XXS only supported for color variants */
2600
+ .bs-circle-button:where([data-variant^="color"]):where([data-size='xxs'][data-text]:not([data-text="false"])) {
2601
+ --btn-text-size: .75rem;
2602
+ --btn-text-weight: 600;
2603
2603
  }
2604
2604
  .bs-empty-state {
2605
2605
  --bs-empty-state-description-color: var(--bs-ink-light);
@@ -4348,6 +4348,84 @@ select[multiple],
4348
4348
  transform: scale(0);
4349
4349
  }
4350
4350
  }
4351
+ .bs-option {
4352
+ /* did not use "flex, flex-col, gap" in order to avoid gap spacing pain for consumers with custom cases */
4353
+ padding: var(--bs-space-1) var(--bs-space-2);
4354
+ color: var(--bs-ink-base);
4355
+ cursor: pointer;
4356
+ border-left: 4px solid transparent;
4357
+ overflow-wrap: break-word;
4358
+ scroll-margin-bottom: var(--bs-space-3);
4359
+ }
4360
+ .bs-option {
4361
+ margin-bottom: var(--bs-space-2); /* ask ux: 12px is too much, can't see many menu options in view */
4362
+ }
4363
+ /* is basically doing a last visible child selector, since filtered options and groups are hidden by v-show */
4364
+ .bs-option:where(:not(:has(~ [data-visible="true"]))) {
4365
+ margin-bottom: 0;
4366
+ }
4367
+ /* -- DISABLED -- */
4368
+ /* Don't disable via pointer-events, so tooltips still work in a disabled menu item. */
4369
+ .bs-option:where([aria-disabled="true"]) {
4370
+ color: var(--bs-ink-disabled);
4371
+ cursor: default;
4372
+ }
4373
+ /* -- SELECTED -- */
4374
+ .bs-option:where(:not([aria-disabled="true"])):hover,
4375
+ .bs-option:where([aria-selected="true"]) {
4376
+ color: var(--bs-ink-blue);
4377
+ background: var(--bs-bg-medium-to-light);
4378
+ border-left-color: var(--bs-ink-blue);
4379
+ }
4380
+ /* selected yet disabled...should be a very rare scenario, but need to handle it */
4381
+ .bs-option:where([aria-disabled="true"]):where([aria-selected="true"]) {
4382
+ color: var(--bs-ink-light);
4383
+ border-left-color: var(--bs-ink-disabled);
4384
+ }
4385
+ /* -- FOCUSED -- */
4386
+ .bs-option:where([data-active="true"]) {
4387
+ border: 2px solid var(--bs-blue-base);
4388
+ border-radius: 3px;
4389
+ outline: none;
4390
+ }
4391
+ /* should preserve 4px left border when selected option is focused */
4392
+ .bs-option:where([data-active="true"][aria-selected="true"]) {
4393
+ border-left-width: 4px;
4394
+ }
4395
+ /* -- HJ TODO: Variants (this is just quick junk for multiple w/checkbox) -- */
4396
+ .bs-option:where([aria-multiselectable="true"]) {
4397
+ display: grid;
4398
+ grid-template-columns: auto 1fr;
4399
+ align-items: start;
4400
+ gap: var(--bs-space-2);
4401
+ }
4402
+ .bs-option:where([aria-multiselectable="true"]) :where(.bs-checkbox) {
4403
+ margin-top: var(--bs-space-1);
4404
+ }
4405
+ .bs-option-group {
4406
+ margin: var(--bs-space-3) 0;
4407
+ padding-top: var(--bs-space-3);
4408
+ border-top: 1px solid var(--bs-border-base);
4409
+ }
4410
+ .bs-option-group:where(:last-child) {
4411
+ margin-bottom: 0;
4412
+ }
4413
+ .bs-option-group:where(:has(.bs-option-group-title)) {
4414
+ margin-top: 0;
4415
+ padding-top: 0;
4416
+ border: none;
4417
+ }
4418
+ .bs-option-group-title {
4419
+ display: flex;
4420
+ align-items: center;
4421
+ margin: 0 0 var(--bs-space-3);
4422
+ padding: var(--bs-space-1) var(--bs-space-3);
4423
+ min-height: var(--bs-space-8);
4424
+ font-size: var(--bs-text-xs);
4425
+ font-weight: var(--bs-font-semibold);
4426
+ color: var(--bs-ink-base);
4427
+ border-bottom: 1px solid var(--bs-border-base);
4428
+ }
4351
4429
  .bs-overlay {
4352
4430
  -webkit-backdrop-filter: blur(4px);
4353
4431
  backdrop-filter: blur(4px);
@@ -5918,6 +5996,70 @@ a.bs-text-button {
5918
5996
  opacity: 0;
5919
5997
  transform: scale(.95);
5920
5998
  }
5999
+ /*
6000
+ HEADS-UP:
6001
+ BsDropdown inherits base styles from its BsPopover root element
6002
+ ...so some of these styles override those defaults.
6003
+ */
6004
+ .bs-dropdown {
6005
+ max-height: 20rem;
6006
+ padding: var(--bs-space-3) 0;
6007
+ background-color: var(--bs-bg-base-to-medium);
6008
+ overflow-y: auto;
6009
+ overscroll-behavior: contain;
6010
+ }
6011
+ .bs-dropdown:where(:has(.bs-dropdown-filter)) {
6012
+ padding-top: 0;
6013
+ }
6014
+ .bs-dropdown :where(hr) {
6015
+ margin: var(--bs-space-3) 0;
6016
+ }
6017
+ .bs-dropdown:where(:focus-visible) {
6018
+ outline: none;
6019
+ }
6020
+ /* -- FILTER -- */
6021
+ .bs-dropdown-filter {
6022
+ position: sticky;
6023
+ top: 0;
6024
+ padding: var(--bs-space-3);
6025
+ /* fade to transparent in bottom padding area, so scrolling menu items under filter looks better */
6026
+ background-image: linear-gradient(
6027
+ var(--bs-bg-base-to-medium) calc(100% - var(--bs-space-3)),
6028
+ transparent 100%
6029
+ );
6030
+ z-index: 1;
6031
+ }
6032
+ .bs-dropdown-filter-icon {
6033
+ margin-left: var(--bs-space-3);
6034
+ }
6035
+ .bs-dropdown-filter-input {
6036
+ padding-inline: var(--bs-space-2);
6037
+ }
6038
+ /* override form-text-fields.css style that hides placeholder when inputs are focused */
6039
+ .bs-dropdown-filter-input::-moz-placeholder {
6040
+ opacity: 1;
6041
+ }
6042
+ .bs-dropdown-filter-input::placeholder {
6043
+ opacity: 1;
6044
+ }
6045
+ .bs-dropdown-filter-button {
6046
+ padding: 0 var(--bs-space-3);
6047
+ cursor: pointer;
6048
+ }
6049
+ .bs-dropdown-filter-button:where(:focus-visible) {
6050
+ border-radius: var(--bs-space-1);
6051
+ box-shadow: 0px 0px 0px 1px inset var(--bs-blue-base);
6052
+ }
6053
+ /* -- SIZING -- */
6054
+ .bs-dropdown:where([data-size="sm"]) {
6055
+ width: 10rem; /* 160px */
6056
+ }
6057
+ .bs-dropdown:where([data-size="md"]) {
6058
+ width: 20rem; /* 320px */
6059
+ }
6060
+ .bs-dropdown:where([data-size="lg"]) {
6061
+ width: 28rem; /* 448px */
6062
+ }
5921
6063
  /*
5922
6064
  HEADS-UP:
5923
6065
  Most BsFlyout base styles come from its BsPopover root element,