bootstrap 5.2.3 → 5.3.0.alpha3

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 (83) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +1 -1
  3. data/assets/javascripts/bootstrap/alert.js +21 -32
  4. data/assets/javascripts/bootstrap/base-component.js +21 -38
  5. data/assets/javascripts/bootstrap/button.js +18 -22
  6. data/assets/javascripts/bootstrap/carousel.js +51 -135
  7. data/assets/javascripts/bootstrap/collapse.js +39 -102
  8. data/assets/javascripts/bootstrap/dom/data.js +8 -12
  9. data/assets/javascripts/bootstrap/dom/event-handler.js +18 -66
  10. data/assets/javascripts/bootstrap/dom/manipulator.js +4 -17
  11. data/assets/javascripts/bootstrap/dom/selector-engine.js +41 -24
  12. data/assets/javascripts/bootstrap/dropdown.js +73 -145
  13. data/assets/javascripts/bootstrap/modal.js +52 -133
  14. data/assets/javascripts/bootstrap/offcanvas.js +49 -102
  15. data/assets/javascripts/bootstrap/popover.js +22 -29
  16. data/assets/javascripts/bootstrap/scrollspy.js +51 -89
  17. data/assets/javascripts/bootstrap/tab.js +51 -109
  18. data/assets/javascripts/bootstrap/toast.js +30 -73
  19. data/assets/javascripts/bootstrap/tooltip.js +74 -177
  20. data/assets/javascripts/bootstrap/util/backdrop.js +27 -54
  21. data/assets/javascripts/bootstrap/util/component-functions.js +13 -19
  22. data/assets/javascripts/bootstrap/util/config.js +14 -27
  23. data/assets/javascripts/bootstrap/util/focustrap.js +19 -36
  24. data/assets/javascripts/bootstrap/util/index.js +42 -111
  25. data/assets/javascripts/bootstrap/util/sanitizer.js +13 -19
  26. data/assets/javascripts/bootstrap/util/scrollbar.js +23 -50
  27. data/assets/javascripts/bootstrap/util/swipe.js +26 -48
  28. data/assets/javascripts/bootstrap/util/template-factory.js +24 -52
  29. data/assets/javascripts/bootstrap-sprockets.js +1 -1
  30. data/assets/javascripts/bootstrap.js +626 -1406
  31. data/assets/javascripts/bootstrap.min.js +3 -3
  32. data/assets/stylesheets/_bootstrap-grid.scss +1 -3
  33. data/assets/stylesheets/_bootstrap-reboot.scss +1 -0
  34. data/assets/stylesheets/_bootstrap.scss +1 -0
  35. data/assets/stylesheets/bootstrap/_accordion.scss +9 -0
  36. data/assets/stylesheets/bootstrap/_alert.scss +8 -11
  37. data/assets/stylesheets/bootstrap/_button-group.scss +2 -2
  38. data/assets/stylesheets/bootstrap/_buttons.scss +3 -3
  39. data/assets/stylesheets/bootstrap/_card.scss +5 -0
  40. data/assets/stylesheets/bootstrap/_carousel.scss +20 -2
  41. data/assets/stylesheets/bootstrap/_close.scss +32 -9
  42. data/assets/stylesheets/bootstrap/_dropdown.scss +1 -0
  43. data/assets/stylesheets/bootstrap/_functions.scss +1 -1
  44. data/assets/stylesheets/bootstrap/_grid.scss +6 -0
  45. data/assets/stylesheets/bootstrap/_helpers.scss +2 -0
  46. data/assets/stylesheets/bootstrap/_list-group.scss +12 -7
  47. data/assets/stylesheets/bootstrap/_maps.scss +120 -0
  48. data/assets/stylesheets/bootstrap/_mixins.scss +1 -2
  49. data/assets/stylesheets/bootstrap/_nav.scss +40 -3
  50. data/assets/stylesheets/bootstrap/_navbar.scss +13 -3
  51. data/assets/stylesheets/bootstrap/_offcanvas.scss +4 -2
  52. data/assets/stylesheets/bootstrap/_pagination.scss +1 -1
  53. data/assets/stylesheets/bootstrap/_progress.scss +10 -1
  54. data/assets/stylesheets/bootstrap/_reboot.scss +3 -3
  55. data/assets/stylesheets/bootstrap/_root.scss +125 -10
  56. data/assets/stylesheets/bootstrap/_tables.scss +1 -1
  57. data/assets/stylesheets/bootstrap/_tooltip.scss +4 -5
  58. data/assets/stylesheets/bootstrap/_utilities.scss +172 -13
  59. data/assets/stylesheets/bootstrap/_variables-dark.scss +85 -0
  60. data/assets/stylesheets/bootstrap/_variables.scss +260 -151
  61. data/assets/stylesheets/bootstrap/bootstrap-utilities.scss +1 -0
  62. data/assets/stylesheets/bootstrap/forms/_floating-labels.scss +21 -3
  63. data/assets/stylesheets/bootstrap/forms/_form-check.scss +24 -11
  64. data/assets/stylesheets/bootstrap/forms/_form-control.scss +23 -3
  65. data/assets/stylesheets/bootstrap/forms/_form-select.scss +11 -2
  66. data/assets/stylesheets/bootstrap/forms/_input-group.scss +1 -1
  67. data/assets/stylesheets/bootstrap/helpers/_colored-links.scss +22 -2
  68. data/assets/stylesheets/bootstrap/helpers/_focus-ring.scss +5 -0
  69. data/assets/stylesheets/bootstrap/helpers/_icon-link.scss +25 -0
  70. data/assets/stylesheets/bootstrap/mixins/_alert.scss +4 -1
  71. data/assets/stylesheets/bootstrap/mixins/_banner.scss +2 -4
  72. data/assets/stylesheets/bootstrap/mixins/_caret.scss +30 -25
  73. data/assets/stylesheets/bootstrap/mixins/_color-mode.scss +21 -0
  74. data/assets/stylesheets/bootstrap/mixins/_forms.scss +8 -7
  75. data/assets/stylesheets/bootstrap/mixins/_list-group.scss +2 -0
  76. data/assets/stylesheets/bootstrap/mixins/_utilities.scss +1 -1
  77. data/assets/stylesheets/bootstrap/mixins/_visually-hidden.scss +5 -1
  78. data/assets/stylesheets/bootstrap/vendor/_rfs.scss +23 -29
  79. data/bootstrap.gemspec +1 -1
  80. data/lib/bootstrap/version.rb +2 -2
  81. data/tasks/updater/js.rb +1 -1
  82. data/tasks/updater/scss.rb +1 -1
  83. metadata +10 -6
@@ -4,6 +4,7 @@
4
4
  // Configuration
5
5
  @import "functions";
6
6
  @import "variables";
7
+ @import "variables-dark";
7
8
  @import "maps";
8
9
  @import "mixins";
9
10
  @import "utilities";
@@ -12,7 +12,7 @@
12
12
  position: absolute;
13
13
  top: 0;
14
14
  left: 0;
15
- width: 100%;
15
+ z-index: 2;
16
16
  height: 100%; // allow textareas
17
17
  padding: $form-floating-padding-y $form-floating-padding-x;
18
18
  overflow: hidden;
@@ -55,14 +55,24 @@
55
55
  > .form-control-plaintext,
56
56
  > .form-select {
57
57
  ~ label {
58
- opacity: $form-floating-label-opacity;
58
+ color: rgba(var(--#{$prefix}body-color-rgb), #{$form-floating-label-opacity});
59
59
  transform: $form-floating-label-transform;
60
+
61
+ &::after {
62
+ position: absolute;
63
+ inset: $form-floating-padding-y ($form-floating-padding-x * .5);
64
+ z-index: -1;
65
+ height: $form-floating-label-height;
66
+ content: "";
67
+ background-color: $input-bg;
68
+ @include border-radius($input-border-radius);
69
+ }
60
70
  }
61
71
  }
62
72
  // Duplicated because `:-webkit-autofill` invalidates other selectors when grouped
63
73
  > .form-control:-webkit-autofill {
64
74
  ~ label {
65
- opacity: $form-floating-label-opacity;
75
+ color: rgba(var(--#{$prefix}body-color-rgb), #{$form-floating-label-opacity});
66
76
  transform: $form-floating-label-transform;
67
77
  }
68
78
  }
@@ -72,4 +82,12 @@
72
82
  border-width: $input-border-width 0; // Required to properly position label text - as explained above
73
83
  }
74
84
  }
85
+
86
+ > :disabled ~ label {
87
+ color: $form-floating-label-disabled-color;
88
+
89
+ &::after {
90
+ background-color: $input-disabled-bg;
91
+ }
92
+ }
75
93
  }
@@ -27,11 +27,14 @@
27
27
  }
28
28
 
29
29
  .form-check-input {
30
+ --#{$prefix}form-check-bg: #{$form-check-input-bg};
31
+
30
32
  width: $form-check-input-width;
31
33
  height: $form-check-input-width;
32
34
  margin-top: ($line-height-base - $form-check-input-width) * .5; // line-height minus check height
33
35
  vertical-align: top;
34
- background-color: $form-check-input-bg;
36
+ background-color: var(--#{$prefix}form-check-bg);
37
+ background-image: var(--#{$prefix}form-check-bg-image);
35
38
  background-repeat: no-repeat;
36
39
  background-position: center;
37
40
  background-size: contain;
@@ -65,17 +68,17 @@
65
68
 
66
69
  &[type="checkbox"] {
67
70
  @if $enable-gradients {
68
- background-image: escape-svg($form-check-input-checked-bg-image), var(--#{$prefix}gradient);
71
+ --#{$prefix}form-check-bg-image: #{escape-svg($form-check-input-checked-bg-image)}, var(--#{$prefix}gradient);
69
72
  } @else {
70
- background-image: escape-svg($form-check-input-checked-bg-image);
73
+ --#{$prefix}form-check-bg-image: #{escape-svg($form-check-input-checked-bg-image)};
71
74
  }
72
75
  }
73
76
 
74
77
  &[type="radio"] {
75
78
  @if $enable-gradients {
76
- background-image: escape-svg($form-check-radio-checked-bg-image), var(--#{$prefix}gradient);
79
+ --#{$prefix}form-check-bg-image: #{escape-svg($form-check-radio-checked-bg-image)}, var(--#{$prefix}gradient);
77
80
  } @else {
78
- background-image: escape-svg($form-check-radio-checked-bg-image);
81
+ --#{$prefix}form-check-bg-image: #{escape-svg($form-check-radio-checked-bg-image)};
79
82
  }
80
83
  }
81
84
  }
@@ -85,9 +88,9 @@
85
88
  border-color: $form-check-input-indeterminate-border-color;
86
89
 
87
90
  @if $enable-gradients {
88
- background-image: escape-svg($form-check-input-indeterminate-bg-image), var(--#{$prefix}gradient);
91
+ --#{$prefix}form-check-bg-image: #{escape-svg($form-check-input-indeterminate-bg-image)}, var(--#{$prefix}gradient);
89
92
  } @else {
90
- background-image: escape-svg($form-check-input-indeterminate-bg-image);
93
+ --#{$prefix}form-check-bg-image: #{escape-svg($form-check-input-indeterminate-bg-image)};
91
94
  }
92
95
  }
93
96
 
@@ -121,24 +124,26 @@
121
124
  padding-left: $form-switch-padding-start;
122
125
 
123
126
  .form-check-input {
127
+ --#{$prefix}form-switch-bg: #{escape-svg($form-switch-bg-image)};
128
+
124
129
  width: $form-switch-width;
125
130
  margin-left: $form-switch-padding-start * -1;
126
- background-image: escape-svg($form-switch-bg-image);
131
+ background-image: var(--#{$prefix}form-switch-bg);
127
132
  background-position: left center;
128
133
  @include border-radius($form-switch-border-radius);
129
134
  @include transition($form-switch-transition);
130
135
 
131
136
  &:focus {
132
- background-image: escape-svg($form-switch-focus-bg-image);
137
+ --#{$prefix}form-switch-bg: #{escape-svg($form-switch-focus-bg-image)};
133
138
  }
134
139
 
135
140
  &:checked {
136
141
  background-position: $form-switch-checked-bg-position;
137
142
 
138
143
  @if $enable-gradients {
139
- background-image: escape-svg($form-switch-checked-bg-image), var(--#{$prefix}gradient);
144
+ --#{$prefix}form-switch-bg: #{escape-svg($form-switch-checked-bg-image)}, var(--#{$prefix}gradient);
140
145
  } @else {
141
- background-image: escape-svg($form-switch-checked-bg-image);
146
+ --#{$prefix}form-switch-bg: #{escape-svg($form-switch-checked-bg-image)};
142
147
  }
143
148
  }
144
149
  }
@@ -173,3 +178,11 @@
173
178
  }
174
179
  }
175
180
  }
181
+
182
+ @if $enable-dark-mode {
183
+ @include color-mode(dark) {
184
+ .form-switch .form-check-input:not(:checked):not(:focus) {
185
+ --#{$prefix}form-switch-bg: #{escape-svg($form-switch-bg-image-dark)};
186
+ }
187
+ }
188
+ }
@@ -44,12 +44,31 @@
44
44
  }
45
45
  }
46
46
 
47
- // Add some height to date inputs on iOS
48
- // https://github.com/twbs/bootstrap/issues/23307
49
- // TODO: we can remove this workaround once https://bugs.webkit.org/show_bug.cgi?id=198959 is resolved
50
47
  &::-webkit-date-and-time-value {
48
+ // On Android Chrome, form-control's "width: 100%" makes the input width too small
49
+ // Tested under Android 11 / Chrome 89, Android 12 / Chrome 100, Android 13 / Chrome 109
50
+ //
51
+ // On iOS Safari, form-control's "appearance: none" + "width: 100%" makes the input width too small
52
+ // Tested under iOS 16.2 / Safari 16.2
53
+ min-width: 85px; // Seems to be a good minimum safe width
54
+
55
+ // Add some height to date inputs on iOS
56
+ // https://github.com/twbs/bootstrap/issues/23307
57
+ // TODO: we can remove this workaround once https://bugs.webkit.org/show_bug.cgi?id=198959 is resolved
51
58
  // Multiply line-height by 1em if it has no unit
52
59
  height: if(unit($input-line-height) == "", $input-line-height * 1em, $input-line-height);
60
+
61
+ // Android Chrome type="date" is taller than the other inputs
62
+ // because of "margin: 1px 24px 1px 4px" inside the shadow DOM
63
+ // Tested under Android 11 / Chrome 89, Android 12 / Chrome 100, Android 13 / Chrome 109
64
+ margin: 0;
65
+ }
66
+
67
+ // Prevent excessive date input height in Webkit
68
+ // https://github.com/twbs/bootstrap/issues/34433
69
+ &::-webkit-datetime-edit {
70
+ display: block;
71
+ padding: 0;
53
72
  }
54
73
 
55
74
  // Placeholder
@@ -186,6 +205,7 @@ textarea {
186
205
  }
187
206
 
188
207
  &::-webkit-color-swatch {
208
+ border: 0 !important; // stylelint-disable-line declaration-no-important
189
209
  @include border-radius($input-border-radius);
190
210
  }
191
211
 
@@ -4,17 +4,18 @@
4
4
  // https://primer.github.io/.
5
5
 
6
6
  .form-select {
7
+ --#{$prefix}form-select-bg-img: #{escape-svg($form-select-indicator)};
8
+
7
9
  display: block;
8
10
  width: 100%;
9
11
  padding: $form-select-padding-y $form-select-indicator-padding $form-select-padding-y $form-select-padding-x;
10
- -moz-padding-start: subtract($form-select-padding-x, 3px); // See https://github.com/twbs/bootstrap/issues/32636
11
12
  font-family: $form-select-font-family;
12
13
  @include font-size($form-select-font-size);
13
14
  font-weight: $form-select-font-weight;
14
15
  line-height: $form-select-line-height;
15
16
  color: $form-select-color;
16
17
  background-color: $form-select-bg;
17
- background-image: escape-svg($form-select-indicator);
18
+ background-image: var(--#{$prefix}form-select-bg-img), var(--#{$prefix}form-select-bg-icon, none);
18
19
  background-repeat: no-repeat;
19
20
  background-position: $form-select-bg-position;
20
21
  background-size: $form-select-bg-size;
@@ -69,3 +70,11 @@
69
70
  @include font-size($form-select-font-size-lg);
70
71
  @include border-radius($form-select-border-radius-lg);
71
72
  }
73
+
74
+ @if $enable-dark-mode {
75
+ @include color-mode(dark) {
76
+ .form-select {
77
+ --#{$prefix}form-select-bg-img: #{escape-svg($form-select-indicator-dark)};
78
+ }
79
+ }
80
+ }
@@ -121,7 +121,7 @@
121
121
  }
122
122
 
123
123
  > :not(:first-child):not(.dropdown-menu)#{$validation-messages} {
124
- margin-left: -$input-border-width;
124
+ margin-left: calc(#{$input-border-width} * -1); // stylelint-disable-line function-disallowed-list
125
125
  @include border-start-radius(0);
126
126
  }
127
127
 
@@ -1,12 +1,32 @@
1
+ // stylelint-disable function-name-case
2
+
3
+ // All-caps `RGBA()` function used because of this Sass bug: https://github.com/sass/node-sass/issues/2251
1
4
  @each $color, $value in $theme-colors {
2
5
  .link-#{$color} {
3
- color: $value !important; // stylelint-disable-line declaration-no-important
6
+ color: RGBA(var(--#{$prefix}#{$color}-rgb, var(--#{$prefix}link-opacity, 1)));
7
+ text-decoration-color: RGBA(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}link-underline-opacity, 1));
4
8
 
5
9
  @if $link-shade-percentage != 0 {
6
10
  &:hover,
7
11
  &:focus {
8
- color: if(color-contrast($value) == $color-contrast-light, shade-color($value, $link-shade-percentage), tint-color($value, $link-shade-percentage)) !important; // stylelint-disable-line declaration-no-important
12
+ $hover-color: if(color-contrast($value) == $color-contrast-light, shade-color($value, $link-shade-percentage), tint-color($value, $link-shade-percentage));
13
+ color: RGBA(#{to-rgb($hover-color)}, var(--#{$prefix}link-opacity, 1));
14
+ text-decoration-color: RGBA(to-rgb($hover-color), var(--#{$prefix}link-underline-opacity, 1));
9
15
  }
10
16
  }
11
17
  }
12
18
  }
19
+
20
+ // One-off special link helper as a bridge until v6
21
+ .link-body-emphasis {
22
+ color: RGBA(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-opacity, 1));
23
+ text-decoration-color: RGBA(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-underline-opacity, 1));
24
+
25
+ @if $link-shade-percentage != 0 {
26
+ &:hover,
27
+ &:focus {
28
+ color: RGBA(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-opacity, .75));
29
+ text-decoration-color: RGBA(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-underline-opacity, .75));
30
+ }
31
+ }
32
+ }
@@ -0,0 +1,5 @@
1
+ .focus-ring:focus {
2
+ outline: 0;
3
+ // By default, there is no `--bs-focus-ring-x`, `--bs-focus-ring-y`, or `--bs-focus-ring-blur`, but we provide CSS variables with fallbacks to initial `0` values
4
+ box-shadow: var(--#{$prefix}focus-ring-x, 0) var(--#{$prefix}focus-ring-y, 0) var(--#{$prefix}focus-ring-blur, 0) var(--#{$prefix}focus-ring-width) var(--#{$prefix}focus-ring-color);
5
+ }
@@ -0,0 +1,25 @@
1
+ .icon-link {
2
+ display: inline-flex;
3
+ gap: $icon-link-gap;
4
+ align-items: center;
5
+ text-decoration-color: rgba(var(--#{$prefix}link-color-rgb), var(--#{$prefix}link-opacity, .5));
6
+ text-underline-offset: $icon-link-underline-offset;
7
+ backface-visibility: hidden;
8
+
9
+ > .bi {
10
+ flex-shrink: 0;
11
+ width: $icon-link-icon-size;
12
+ height: $icon-link-icon-size;
13
+ fill: currentcolor;
14
+ @include transition($icon-link-icon-transition);
15
+ }
16
+ }
17
+
18
+ .icon-link-hover {
19
+ &:hover,
20
+ &:focus-visible {
21
+ > .bi {
22
+ transform: var(--#{$prefix}icon-link-transform, $icon-link-icon-transform);
23
+ }
24
+ }
25
+ }
@@ -1,15 +1,18 @@
1
+ @include deprecate("`alert-variant()`", "v5.3.0", "v6.0.0");
2
+
1
3
  // scss-docs-start alert-variant-mixin
2
4
  @mixin alert-variant($background, $border, $color) {
3
5
  --#{$prefix}alert-color: #{$color};
4
6
  --#{$prefix}alert-bg: #{$background};
5
7
  --#{$prefix}alert-border-color: #{$border};
8
+ --#{$prefix}alert-link-color: #{shade-color($color, 20%)};
6
9
 
7
10
  @if $enable-gradients {
8
11
  background-image: var(--#{$prefix}gradient);
9
12
  }
10
13
 
11
14
  .alert-link {
12
- color: shade-color($color, 20%);
15
+ color: var(--#{$prefix}alert-link-color);
13
16
  }
14
17
  }
15
18
  // scss-docs-end alert-variant-mixin
@@ -1,9 +1,7 @@
1
1
  @mixin bsBanner($file) {
2
2
  /*!
3
- * Bootstrap #{$file} v5.2.3 (https://getbootstrap.com/)
4
- * Copyright 2011-2022 The Bootstrap Authors
5
- * Copyright 2011-2022 Twitter, Inc.
3
+ * Bootstrap #{$file} v5.3.0-alpha3 (https://getbootstrap.com/)
4
+ * Copyright 2011-2023 The Bootstrap Authors
6
5
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
7
6
  */
8
7
  }
9
-
@@ -1,44 +1,49 @@
1
1
  // scss-docs-start caret-mixins
2
- @mixin caret-down {
3
- border-top: $caret-width solid;
4
- border-right: $caret-width solid transparent;
2
+ @mixin caret-down($width: $caret-width) {
3
+ border-top: $width solid;
4
+ border-right: $width solid transparent;
5
5
  border-bottom: 0;
6
- border-left: $caret-width solid transparent;
6
+ border-left: $width solid transparent;
7
7
  }
8
8
 
9
- @mixin caret-up {
9
+ @mixin caret-up($width: $caret-width) {
10
10
  border-top: 0;
11
- border-right: $caret-width solid transparent;
12
- border-bottom: $caret-width solid;
13
- border-left: $caret-width solid transparent;
11
+ border-right: $width solid transparent;
12
+ border-bottom: $width solid;
13
+ border-left: $width solid transparent;
14
14
  }
15
15
 
16
- @mixin caret-end {
17
- border-top: $caret-width solid transparent;
16
+ @mixin caret-end($width: $caret-width) {
17
+ border-top: $width solid transparent;
18
18
  border-right: 0;
19
- border-bottom: $caret-width solid transparent;
20
- border-left: $caret-width solid;
19
+ border-bottom: $width solid transparent;
20
+ border-left: $width solid;
21
21
  }
22
22
 
23
- @mixin caret-start {
24
- border-top: $caret-width solid transparent;
25
- border-right: $caret-width solid;
26
- border-bottom: $caret-width solid transparent;
23
+ @mixin caret-start($width: $caret-width) {
24
+ border-top: $width solid transparent;
25
+ border-right: $width solid;
26
+ border-bottom: $width solid transparent;
27
27
  }
28
28
 
29
- @mixin caret($direction: down) {
29
+ @mixin caret(
30
+ $direction: down,
31
+ $width: $caret-width,
32
+ $spacing: $caret-spacing,
33
+ $vertical-align: $caret-vertical-align
34
+ ) {
30
35
  @if $enable-caret {
31
36
  &::after {
32
37
  display: inline-block;
33
- margin-left: $caret-spacing;
34
- vertical-align: $caret-vertical-align;
38
+ margin-left: $spacing;
39
+ vertical-align: $vertical-align;
35
40
  content: "";
36
41
  @if $direction == down {
37
- @include caret-down();
42
+ @include caret-down($width);
38
43
  } @else if $direction == up {
39
- @include caret-up();
44
+ @include caret-up($width);
40
45
  } @else if $direction == end {
41
- @include caret-end();
46
+ @include caret-end($width);
42
47
  }
43
48
  }
44
49
 
@@ -49,10 +54,10 @@
49
54
 
50
55
  &::before {
51
56
  display: inline-block;
52
- margin-right: $caret-spacing;
53
- vertical-align: $caret-vertical-align;
57
+ margin-right: $spacing;
58
+ vertical-align: $vertical-align;
54
59
  content: "";
55
- @include caret-start();
60
+ @include caret-start($width);
56
61
  }
57
62
  }
58
63
 
@@ -0,0 +1,21 @@
1
+ // scss-docs-start color-mode-mixin
2
+ @mixin color-mode($mode: light, $root: false) {
3
+ @if $color-mode-type == "media-query" {
4
+ @if $root == true {
5
+ @media (prefers-color-scheme: $mode) {
6
+ :root {
7
+ @content;
8
+ }
9
+ }
10
+ } @else {
11
+ @media (prefers-color-scheme: $mode) {
12
+ @content;
13
+ }
14
+ }
15
+ } @else {
16
+ [data-bs-theme="#{$mode}"] {
17
+ @content;
18
+ }
19
+ }
20
+ }
21
+ // scss-docs-end color-mode-mixin
@@ -21,7 +21,8 @@
21
21
  $icon,
22
22
  $tooltip-color: color-contrast($color),
23
23
  $tooltip-bg-color: rgba($color, $form-feedback-tooltip-opacity),
24
- $focus-box-shadow: 0 0 $input-btn-focus-blur $input-focus-width rgba($color, $input-btn-focus-color-opacity)
24
+ $focus-box-shadow: 0 0 $input-btn-focus-blur $input-focus-width rgba($color, $input-btn-focus-color-opacity),
25
+ $border-color: $color
25
26
  ) {
26
27
  .#{$state}-feedback {
27
28
  display: none;
@@ -56,7 +57,7 @@
56
57
 
57
58
  .form-control {
58
59
  @include form-validation-state-selector($state) {
59
- border-color: $color;
60
+ border-color: $border-color;
60
61
 
61
62
  @if $enable-validation-icons {
62
63
  padding-right: $input-height-inner;
@@ -67,7 +68,7 @@
67
68
  }
68
69
 
69
70
  &:focus {
70
- border-color: $color;
71
+ border-color: $border-color;
71
72
  box-shadow: $focus-box-shadow;
72
73
  }
73
74
  }
@@ -85,20 +86,20 @@
85
86
 
86
87
  .form-select {
87
88
  @include form-validation-state-selector($state) {
88
- border-color: $color;
89
+ border-color: $border-color;
89
90
 
90
91
  @if $enable-validation-icons {
91
92
  &:not([multiple]):not([size]),
92
93
  &:not([multiple])[size="1"] {
94
+ --#{$prefix}form-select-bg-icon: #{escape-svg($icon)};
93
95
  padding-right: $form-select-feedback-icon-padding-end;
94
- background-image: escape-svg($form-select-indicator), escape-svg($icon);
95
96
  background-position: $form-select-bg-position, $form-select-feedback-icon-position;
96
97
  background-size: $form-select-bg-size, $form-select-feedback-icon-size;
97
98
  }
98
99
  }
99
100
 
100
101
  &:focus {
101
- border-color: $color;
102
+ border-color: $border-color;
102
103
  box-shadow: $focus-box-shadow;
103
104
  }
104
105
  }
@@ -114,7 +115,7 @@
114
115
 
115
116
  .form-check-input {
116
117
  @include form-validation-state-selector($state) {
117
- border-color: $color;
118
+ border-color: $border-color;
118
119
 
119
120
  &:checked {
120
121
  background-color: $color;
@@ -1,3 +1,5 @@
1
+ @include deprecate("`list-group-item-variant()`", "v5.3.0", "v6.0.0");
2
+
1
3
  // List Groups
2
4
 
3
5
  // scss-docs-start list-group-mixin
@@ -1,6 +1,6 @@
1
1
  // Utility generator
2
2
  // Used to generate utilities & print utilities
3
- @mixin generate-utility($utility, $infix, $is-rfs-media-query: false) {
3
+ @mixin generate-utility($utility, $infix: "", $is-rfs-media-query: false) {
4
4
  $values: map-get($utility, values);
5
5
 
6
6
  // If the values are a list or string, convert it into a map
@@ -6,7 +6,6 @@
6
6
  // See: https://kittygiraudel.com/2016/10/13/css-hide-and-seek/
7
7
 
8
8
  @mixin visually-hidden() {
9
- position: absolute !important;
10
9
  width: 1px !important;
11
10
  height: 1px !important;
12
11
  padding: 0 !important;
@@ -15,6 +14,11 @@
15
14
  clip: rect(0, 0, 0, 0) !important;
16
15
  white-space: nowrap !important;
17
16
  border: 0 !important;
17
+
18
+ // Fix for positioned table caption that could become anonymous cells
19
+ &:not(caption) {
20
+ position: absolute !important;
21
+ }
18
22
  }
19
23
 
20
24
  // Use to only display content when it's focused, or one of its child elements is focused