bootstrap 5.3.2 → 5.3.4

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 (75) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +9 -0
  3. data/README.md +7 -10
  4. data/Rakefile +12 -10
  5. data/assets/javascripts/bootstrap/alert.js +2 -2
  6. data/assets/javascripts/bootstrap/base-component.js +3 -3
  7. data/assets/javascripts/bootstrap/button.js +2 -2
  8. data/assets/javascripts/bootstrap/carousel.js +2 -2
  9. data/assets/javascripts/bootstrap/collapse.js +2 -2
  10. data/assets/javascripts/bootstrap/dom/data.js +2 -2
  11. data/assets/javascripts/bootstrap/dom/event-handler.js +2 -2
  12. data/assets/javascripts/bootstrap/dom/manipulator.js +3 -3
  13. data/assets/javascripts/bootstrap/dom/selector-engine.js +4 -4
  14. data/assets/javascripts/bootstrap/dropdown.js +4 -4
  15. data/assets/javascripts/bootstrap/modal.js +2 -2
  16. data/assets/javascripts/bootstrap/offcanvas.js +2 -2
  17. data/assets/javascripts/bootstrap/popover.js +2 -2
  18. data/assets/javascripts/bootstrap/scrollspy.js +2 -2
  19. data/assets/javascripts/bootstrap/tab.js +2 -2
  20. data/assets/javascripts/bootstrap/toast.js +2 -2
  21. data/assets/javascripts/bootstrap/tooltip.js +5 -6
  22. data/assets/javascripts/bootstrap/util/backdrop.js +2 -3
  23. data/assets/javascripts/bootstrap/util/component-functions.js +2 -2
  24. data/assets/javascripts/bootstrap/util/config.js +2 -2
  25. data/assets/javascripts/bootstrap/util/focustrap.js +2 -3
  26. data/assets/javascripts/bootstrap/util/index.js +4 -5
  27. data/assets/javascripts/bootstrap/util/sanitizer.js +5 -2
  28. data/assets/javascripts/bootstrap/util/scrollbar.js +2 -2
  29. data/assets/javascripts/bootstrap/util/swipe.js +2 -2
  30. data/assets/javascripts/bootstrap/util/template-factory.js +3 -3
  31. data/assets/javascripts/bootstrap-sprockets.js +9 -9
  32. data/assets/javascripts/bootstrap.js +17 -18
  33. data/assets/javascripts/bootstrap.min.js +3 -3
  34. data/assets/stylesheets/bootstrap/_accordion.scss +10 -15
  35. data/assets/stylesheets/bootstrap/_button-group.scss +8 -3
  36. data/assets/stylesheets/bootstrap/_buttons.scss +9 -0
  37. data/assets/stylesheets/bootstrap/_card.scss +1 -2
  38. data/assets/stylesheets/bootstrap/_carousel.scss +17 -35
  39. data/assets/stylesheets/bootstrap/_close.scss +9 -6
  40. data/assets/stylesheets/bootstrap/_functions.scss +1 -1
  41. data/assets/stylesheets/bootstrap/_list-group.scss +27 -25
  42. data/assets/stylesheets/bootstrap/_modal.scss +6 -3
  43. data/assets/stylesheets/bootstrap/_nav.scss +1 -1
  44. data/assets/stylesheets/bootstrap/_navbar.scss +1 -1
  45. data/assets/stylesheets/bootstrap/_offcanvas.scss +2 -1
  46. data/assets/stylesheets/bootstrap/_pagination.scss +1 -1
  47. data/assets/stylesheets/bootstrap/_progress.scss +1 -1
  48. data/assets/stylesheets/bootstrap/_reboot.scss +1 -1
  49. data/assets/stylesheets/bootstrap/_tables.scss +1 -1
  50. data/assets/stylesheets/bootstrap/_type.scss +1 -1
  51. data/assets/stylesheets/bootstrap/_variables-dark.scss +17 -2
  52. data/assets/stylesheets/bootstrap/_variables.scss +21 -15
  53. data/assets/stylesheets/bootstrap/forms/_floating-labels.scss +18 -16
  54. data/assets/stylesheets/bootstrap/forms/_form-check.scss +1 -1
  55. data/assets/stylesheets/bootstrap/forms/_input-group.scss +1 -1
  56. data/assets/stylesheets/bootstrap/mixins/_banner.scss +2 -2
  57. data/assets/stylesheets/bootstrap/mixins/_forms.scss +12 -2
  58. data/assets/stylesheets/bootstrap/mixins/_grid.scss +2 -2
  59. data/assets/stylesheets/bootstrap/mixins/_visually-hidden.scss +1 -1
  60. data/bootstrap.gemspec +0 -1
  61. data/lib/bootstrap/engine.rb +13 -4
  62. data/lib/bootstrap/version.rb +2 -2
  63. data/test/dummy_rails/config/application.rb +0 -2
  64. data/test/dummy_rails/public/favicon.ico +0 -0
  65. data/test/gemfiles/rails_4_2.gemfile +1 -0
  66. data/test/gemfiles/rails_5_0.gemfile +0 -1
  67. data/test/gemfiles/rails_5_1.gemfile +0 -1
  68. data/test/gemfiles/rails_5_2.gemfile +0 -1
  69. data/test/gemfiles/rails_6_0.gemfile +0 -1
  70. data/test/gemfiles/rails_6_1.gemfile +0 -1
  71. data/test/gemfiles/rails_7_0_dartsass.gemfile +0 -1
  72. data/test/gemfiles/rails_7_0_sassc.gemfile +0 -1
  73. data/test/rails_test.rb +0 -5
  74. data/test/test_helper.rb +2 -2
  75. metadata +5 -21
@@ -99,6 +99,7 @@
99
99
  color: $carousel-control-color;
100
100
  text-align: center;
101
101
  background: none;
102
+ filter: var(--#{$prefix}carousel-control-icon-filter);
102
103
  border: 0;
103
104
  opacity: $carousel-control-opacity;
104
105
  @include transition($carousel-control-transition);
@@ -132,19 +133,11 @@
132
133
  background-size: 100% 100%;
133
134
  }
134
135
 
135
- /* rtl:options: {
136
- "autoRename": true,
137
- "stringMap":[ {
138
- "name" : "prev-next",
139
- "search" : "prev",
140
- "replace" : "next"
141
- } ]
142
- } */
143
136
  .carousel-control-prev-icon {
144
- background-image: escape-svg($carousel-control-prev-icon-bg);
137
+ background-image: escape-svg($carousel-control-prev-icon-bg) #{"/*rtl:" + escape-svg($carousel-control-next-icon-bg) + "*/"};
145
138
  }
146
139
  .carousel-control-next-icon {
147
- background-image: escape-svg($carousel-control-next-icon-bg);
140
+ background-image: escape-svg($carousel-control-next-icon-bg) #{"/*rtl:" + escape-svg($carousel-control-prev-icon-bg) + "*/"};
148
141
  }
149
142
 
150
143
  // Optional indicator pips/controls
@@ -176,7 +169,7 @@
176
169
  margin-left: $carousel-indicator-spacer;
177
170
  text-indent: -999px;
178
171
  cursor: pointer;
179
- background-color: $carousel-indicator-active-bg;
172
+ background-color: var(--#{$prefix}carousel-indicator-active-bg);
180
173
  background-clip: padding-box;
181
174
  border: 0;
182
175
  // Use transparent borders to increase the hit area by 10px on top and bottom.
@@ -203,42 +196,31 @@
203
196
  left: (100% - $carousel-caption-width) * .5;
204
197
  padding-top: $carousel-caption-padding-y;
205
198
  padding-bottom: $carousel-caption-padding-y;
206
- color: $carousel-caption-color;
199
+ color: var(--#{$prefix}carousel-caption-color);
207
200
  text-align: center;
208
201
  }
209
202
 
210
203
  // Dark mode carousel
211
204
 
212
205
  @mixin carousel-dark() {
213
- .carousel-control-prev-icon,
214
- .carousel-control-next-icon {
215
- filter: $carousel-dark-control-icon-filter;
216
- }
217
-
218
- .carousel-indicators [data-bs-target] {
219
- background-color: $carousel-dark-indicator-active-bg;
220
- }
221
-
222
- .carousel-caption {
223
- color: $carousel-dark-caption-color;
224
- }
206
+ --#{$prefix}carousel-indicator-active-bg: #{$carousel-indicator-active-bg-dark};
207
+ --#{$prefix}carousel-caption-color: #{$carousel-caption-color-dark};
208
+ --#{$prefix}carousel-control-icon-filter: #{$carousel-control-icon-filter-dark};
225
209
  }
226
210
 
227
211
  .carousel-dark {
228
212
  @include carousel-dark();
229
213
  }
230
214
 
215
+ :root,
216
+ [data-bs-theme="light"] {
217
+ --#{$prefix}carousel-indicator-active-bg: #{$carousel-indicator-active-bg};
218
+ --#{$prefix}carousel-caption-color: #{$carousel-caption-color};
219
+ --#{$prefix}carousel-control-icon-filter: #{$carousel-control-icon-filter};
220
+ }
221
+
231
222
  @if $enable-dark-mode {
232
- @include color-mode(dark) {
233
- @if $color-mode-type == "media-query" {
234
- .carousel {
235
- @include carousel-dark();
236
- }
237
- } @else {
238
- .carousel,
239
- &.carousel {
240
- @include carousel-dark();
241
- }
242
- }
223
+ @include color-mode(dark, true) {
224
+ @include carousel-dark();
243
225
  }
244
226
  }
@@ -12,7 +12,6 @@
12
12
  --#{$prefix}btn-close-focus-shadow: #{$btn-close-focus-shadow};
13
13
  --#{$prefix}btn-close-focus-opacity: #{$btn-close-focus-opacity};
14
14
  --#{$prefix}btn-close-disabled-opacity: #{$btn-close-disabled-opacity};
15
- --#{$prefix}btn-close-white-filter: #{$btn-close-white-filter};
16
15
  // scss-docs-end close-css-vars
17
16
 
18
17
  box-sizing: content-box;
@@ -21,6 +20,7 @@
21
20
  padding: $btn-close-padding-y $btn-close-padding-x;
22
21
  color: var(--#{$prefix}btn-close-color);
23
22
  background: transparent var(--#{$prefix}btn-close-bg) center / $btn-close-width auto no-repeat; // include transparent for button elements
23
+ filter: var(--#{$prefix}btn-close-filter);
24
24
  border: 0; // for button elements
25
25
  @include border-radius();
26
26
  opacity: var(--#{$prefix}btn-close-opacity);
@@ -47,17 +47,20 @@
47
47
  }
48
48
 
49
49
  @mixin btn-close-white() {
50
- filter: var(--#{$prefix}btn-close-white-filter);
50
+ --#{$prefix}btn-close-filter: #{$btn-close-filter-dark};
51
51
  }
52
52
 
53
53
  .btn-close-white {
54
54
  @include btn-close-white();
55
55
  }
56
56
 
57
+ :root,
58
+ [data-bs-theme="light"] {
59
+ --#{$prefix}btn-close-filter: #{$btn-close-filter};
60
+ }
61
+
57
62
  @if $enable-dark-mode {
58
- @include color-mode(dark) {
59
- .btn-close {
60
- @include btn-close-white();
61
- }
63
+ @include color-mode(dark, true) {
64
+ @include btn-close-white();
62
65
  }
63
66
  }
@@ -177,7 +177,7 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003
177
177
  @return if($l1 > $l2, divide($l1 + .05, $l2 + .05), divide($l2 + .05, $l1 + .05));
178
178
  }
179
179
 
180
- // Return WCAG2.1 relative luminance
180
+ // Return WCAG2.2 relative luminance
181
181
  // See https://www.w3.org/TR/WCAG/#dfn-relative-luminance
182
182
  // See https://www.w3.org/TR/WCAG/#dfn-contrast-ratio
183
183
  @function luminance($color) {
@@ -43,31 +43,6 @@
43
43
  }
44
44
  }
45
45
 
46
- // Interactive list items
47
- //
48
- // Use anchor or button elements instead of `li`s or `div`s to create interactive
49
- // list items. Includes an extra `.active` modifier class for selected items.
50
-
51
- .list-group-item-action {
52
- width: 100%; // For `<button>`s (anchors become 100% by default though)
53
- color: var(--#{$prefix}list-group-action-color);
54
- text-align: inherit; // For `<button>`s (anchors inherit)
55
-
56
- // Hover state
57
- &:hover,
58
- &:focus {
59
- z-index: 1; // Place hover/focus items above their siblings for proper border styling
60
- color: var(--#{$prefix}list-group-action-hover-color);
61
- text-decoration: none;
62
- background-color: var(--#{$prefix}list-group-action-hover-bg);
63
- }
64
-
65
- &:active {
66
- color: var(--#{$prefix}list-group-action-active-color);
67
- background-color: var(--#{$prefix}list-group-action-active-bg);
68
- }
69
- }
70
-
71
46
  // Individual list items
72
47
  //
73
48
  // Use on `li`s or `div`s within the `.list-group` parent.
@@ -115,6 +90,33 @@
115
90
  }
116
91
  }
117
92
 
93
+ // Interactive list items
94
+ //
95
+ // Use anchor or button elements instead of `li`s or `div`s to create interactive
96
+ // list items. Includes an extra `.active` modifier class for selected items.
97
+
98
+ .list-group-item-action {
99
+ width: 100%; // For `<button>`s (anchors become 100% by default though)
100
+ color: var(--#{$prefix}list-group-action-color);
101
+ text-align: inherit; // For `<button>`s (anchors inherit)
102
+
103
+ &:not(.active) {
104
+ // Hover state
105
+ &:hover,
106
+ &:focus {
107
+ z-index: 1; // Place hover/focus items above their siblings for proper border styling
108
+ color: var(--#{$prefix}list-group-action-hover-color);
109
+ text-decoration: none;
110
+ background-color: var(--#{$prefix}list-group-action-hover-bg);
111
+ }
112
+
113
+ &:active {
114
+ color: var(--#{$prefix}list-group-action-active-color);
115
+ background-color: var(--#{$prefix}list-group-action-active-bg);
116
+ }
117
+ }
118
+ }
119
+
118
120
  // Horizontal
119
121
  //
120
122
  // Change the layout of list group items from vertical (default) to horizontal.
@@ -59,8 +59,8 @@
59
59
 
60
60
  // When fading in the modal, animate it to slide down
61
61
  .modal.fade & {
62
- @include transition($modal-transition);
63
62
  transform: $modal-fade-transform;
63
+ @include transition($modal-transition);
64
64
  }
65
65
  .modal.show & {
66
66
  transform: $modal-show-transform;
@@ -126,14 +126,17 @@
126
126
  display: flex;
127
127
  flex-shrink: 0;
128
128
  align-items: center;
129
- justify-content: space-between; // Put modal header elements (title and dismiss) on opposite ends
130
129
  padding: var(--#{$prefix}modal-header-padding);
131
130
  border-bottom: var(--#{$prefix}modal-header-border-width) solid var(--#{$prefix}modal-header-border-color);
132
131
  @include border-top-radius(var(--#{$prefix}modal-inner-border-radius));
133
132
 
134
133
  .btn-close {
135
134
  padding: calc(var(--#{$prefix}modal-header-padding-y) * .5) calc(var(--#{$prefix}modal-header-padding-x) * .5);
136
- margin: calc(-.5 * var(--#{$prefix}modal-header-padding-y)) calc(-.5 * var(--#{$prefix}modal-header-padding-x)) calc(-.5 * var(--#{$prefix}modal-header-padding-y)) auto;
135
+ // Split properties to avoid invalid calc() function if value is 0
136
+ margin-top: calc(-.5 * var(--#{$prefix}modal-header-padding-y));
137
+ margin-right: calc(-.5 * var(--#{$prefix}modal-header-padding-x));
138
+ margin-bottom: calc(-.5 * var(--#{$prefix}modal-header-padding-y));
139
+ margin-left: auto;
137
140
  }
138
141
  }
139
142
 
@@ -169,8 +169,8 @@
169
169
  .nav-justified {
170
170
  > .nav-link,
171
171
  .nav-item {
172
- flex-basis: 0;
173
172
  flex-grow: 1;
173
+ flex-basis: 0;
174
174
  text-align: center;
175
175
  }
176
176
  }
@@ -139,8 +139,8 @@
139
139
  // the default flexbox row orientation. Requires the use of `flex-wrap: wrap`
140
140
  // on the `.navbar` parent.
141
141
  .navbar-collapse {
142
- flex-basis: 100%;
143
142
  flex-grow: 1;
143
+ flex-basis: 100%;
144
144
  // For always expanded or extra full navbars, ensure content aligns itself
145
145
  // properly vertically. Can be easily overridden with flex utilities.
146
146
  align-items: center;
@@ -123,14 +123,15 @@
123
123
  .offcanvas-header {
124
124
  display: flex;
125
125
  align-items: center;
126
- justify-content: space-between;
127
126
  padding: var(--#{$prefix}offcanvas-padding-y) var(--#{$prefix}offcanvas-padding-x);
128
127
 
129
128
  .btn-close {
130
129
  padding: calc(var(--#{$prefix}offcanvas-padding-y) * .5) calc(var(--#{$prefix}offcanvas-padding-x) * .5);
130
+ // Split properties to avoid invalid calc() function if value is 0
131
131
  margin-top: calc(-.5 * var(--#{$prefix}offcanvas-padding-y));
132
132
  margin-right: calc(-.5 * var(--#{$prefix}offcanvas-padding-x));
133
133
  margin-bottom: calc(-.5 * var(--#{$prefix}offcanvas-padding-y));
134
+ margin-left: auto;
134
135
  }
135
136
  }
136
137
 
@@ -75,7 +75,7 @@
75
75
  margin-left: $pagination-margin-start;
76
76
  }
77
77
 
78
- @if $pagination-margin-start == calc(#{$pagination-border-width} * -1) {
78
+ @if $pagination-margin-start == calc(-1 * #{$pagination-border-width}) {
79
79
  &:first-child {
80
80
  .page-link {
81
81
  @include border-start-radius(var(--#{$prefix}pagination-border-radius));
@@ -3,7 +3,7 @@
3
3
  // scss-docs-start progress-keyframes
4
4
  @if $enable-transitions {
5
5
  @keyframes progress-bar-stripes {
6
- 0% { background-position-x: $progress-height; }
6
+ 0% { background-position-x: var(--#{$prefix}progress-height); }
7
7
  }
8
8
  }
9
9
  // scss-docs-end progress-keyframes
@@ -499,9 +499,9 @@ legend {
499
499
  width: 100%;
500
500
  padding: 0;
501
501
  margin-bottom: $legend-margin-bottom;
502
- @include font-size($legend-font-size);
503
502
  font-weight: $legend-font-weight;
504
503
  line-height: inherit;
504
+ @include font-size($legend-font-size);
505
505
 
506
506
  + * {
507
507
  clear: left; // 2
@@ -79,7 +79,7 @@
79
79
  //
80
80
  // When borders are added on all sides of the cells, the corners can render odd when
81
81
  // these borders do not have the same color or if they are semi-transparent.
82
- // Therefor we add top and border bottoms to the `tr`s and left and right borders
82
+ // Therefore we add top and border bottoms to the `tr`s and left and right borders
83
83
  // to the `td`s or `th`s
84
84
 
85
85
  .table-bordered {
@@ -34,11 +34,11 @@
34
34
  // Type display classes
35
35
  @each $display, $font-size in $display-font-sizes {
36
36
  .display-#{$display} {
37
- @include font-size($font-size);
38
37
  font-family: $display-font-family;
39
38
  font-style: $display-font-style;
40
39
  font-weight: $display-font-weight;
41
40
  line-height: $display-line-height;
41
+ @include font-size($font-size);
42
42
  }
43
43
  }
44
44
 
@@ -82,6 +82,21 @@ $form-invalid-border-color-dark: $red-300 !default;
82
82
  $accordion-icon-color-dark: $primary-text-emphasis-dark !default;
83
83
  $accordion-icon-active-color-dark: $primary-text-emphasis-dark !default;
84
84
 
85
- $accordion-button-icon-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-color-dark}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !default;
86
- $accordion-button-active-icon-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-active-color-dark}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !default;
85
+ $accordion-button-icon-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-color-dark}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/></svg>") !default;
86
+ $accordion-button-active-icon-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-active-color-dark}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/></svg>") !default;
87
87
  // scss-docs-end sass-dark-mode-vars
88
+
89
+
90
+ //
91
+ // Carousel
92
+ //
93
+
94
+ $carousel-indicator-active-bg-dark: $carousel-dark-indicator-active-bg !default;
95
+ $carousel-caption-color-dark: $carousel-dark-caption-color !default;
96
+ $carousel-control-icon-filter-dark: $carousel-dark-control-icon-filter !default;
97
+
98
+ //
99
+ // Close button
100
+ //
101
+
102
+ $btn-close-filter-dark: $btn-close-white-filter !default;
@@ -67,8 +67,8 @@ $colors: (
67
67
  ) !default;
68
68
  // scss-docs-end colors-map
69
69
 
70
- // The contrast ratio to reach against white, to determine if color changes from "light" to "dark". Acceptable values for WCAG 2.0 are 3, 4.5 and 7.
71
- // See https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast
70
+ // The contrast ratio to reach against white, to determine if color changes from "light" to "dark". Acceptable values for WCAG 2.2 are 3, 4.5 and 7.
71
+ // See https://www.w3.org/TR/WCAG/#contrast-minimum
72
72
  $min-contrast-ratio: 4.5 !default;
73
73
 
74
74
  // Customize the light and dark text colors for use in our color contrast function.
@@ -1091,7 +1091,7 @@ $form-feedback-valid-color: $success !default;
1091
1091
  $form-feedback-invalid-color: $danger !default;
1092
1092
 
1093
1093
  $form-feedback-icon-valid-color: $form-feedback-valid-color !default;
1094
- $form-feedback-icon-valid: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'><path fill='#{$form-feedback-icon-valid-color}' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/></svg>") !default;
1094
+ $form-feedback-icon-valid: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'><path fill='#{$form-feedback-icon-valid-color}' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1'/></svg>") !default;
1095
1095
  $form-feedback-icon-invalid-color: $form-feedback-invalid-color !default;
1096
1096
  $form-feedback-icon-invalid: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='#{$form-feedback-icon-invalid-color}'><circle cx='6' cy='6' r='4.5'/><path stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/><circle cx='6' cy='8.2' r='.6' fill='#{$form-feedback-icon-invalid-color}' stroke='none'/></svg>") !default;
1097
1097
  // scss-docs-end form-feedback-variables
@@ -1302,7 +1302,7 @@ $pagination-color: var(--#{$prefix}link-color) !default;
1302
1302
  $pagination-bg: var(--#{$prefix}body-bg) !default;
1303
1303
  $pagination-border-radius: var(--#{$prefix}border-radius) !default;
1304
1304
  $pagination-border-width: var(--#{$prefix}border-width) !default;
1305
- $pagination-margin-start: calc(#{$pagination-border-width} * -1) !default; // stylelint-disable-line function-disallowed-list
1305
+ $pagination-margin-start: calc(-1 * #{$pagination-border-width}) !default; // stylelint-disable-line function-disallowed-list
1306
1306
  $pagination-border-color: var(--#{$prefix}border-color) !default;
1307
1307
 
1308
1308
  $pagination-focus-color: var(--#{$prefix}link-hover-color) !default;
@@ -1383,7 +1383,9 @@ $accordion-transition: $btn-transition, border-radius .15s ea
1383
1383
  $accordion-button-active-bg: var(--#{$prefix}primary-bg-subtle) !default;
1384
1384
  $accordion-button-active-color: var(--#{$prefix}primary-text-emphasis) !default;
1385
1385
 
1386
- $accordion-button-focus-border-color: $input-focus-border-color !default;
1386
+ // fusv-disable
1387
+ $accordion-button-focus-border-color: $input-focus-border-color !default; // Deprecated in v5.3.3
1388
+ // fusv-enable
1387
1389
  $accordion-button-focus-box-shadow: $btn-focus-box-shadow !default;
1388
1390
 
1389
1391
  $accordion-icon-width: 1.25rem !default;
@@ -1392,8 +1394,8 @@ $accordion-icon-active-color: $primary-text-emphasis !default;
1392
1394
  $accordion-icon-transition: transform .2s ease-in-out !default;
1393
1395
  $accordion-icon-transform: rotate(-180deg) !default;
1394
1396
 
1395
- $accordion-button-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-color}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !default;
1396
- $accordion-button-active-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-active-color}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !default;
1397
+ $accordion-button-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='#{$accordion-icon-color}' stroke-linecap='round' stroke-linejoin='round'><path d='m2 5 6 6 6-6'/></svg>") !default;
1398
+ $accordion-button-active-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='#{$accordion-icon-active-color}' stroke-linecap='round' stroke-linejoin='round'><path d='m2 5 6 6 6-6'/></svg>") !default;
1397
1399
  // scss-docs-end accordion-variables
1398
1400
 
1399
1401
  // Tooltips
@@ -1505,7 +1507,7 @@ $modal-dialog-margin-y-sm-up: 1.75rem !default;
1505
1507
 
1506
1508
  $modal-title-line-height: $line-height-base !default;
1507
1509
 
1508
- $modal-content-color: null !default;
1510
+ $modal-content-color: var(--#{$prefix}body-color) !default;
1509
1511
  $modal-content-bg: var(--#{$prefix}body-bg) !default;
1510
1512
  $modal-content-border-color: var(--#{$prefix}border-color-translucent) !default;
1511
1513
  $modal-content-border-width: var(--#{$prefix}border-width) !default;
@@ -1650,6 +1652,7 @@ $carousel-control-width: 15% !default;
1650
1652
  $carousel-control-opacity: .5 !default;
1651
1653
  $carousel-control-hover-opacity: .9 !default;
1652
1654
  $carousel-control-transition: opacity .15s ease !default;
1655
+ $carousel-control-icon-filter: null !default;
1653
1656
 
1654
1657
  $carousel-indicator-width: 30px !default;
1655
1658
  $carousel-indicator-height: 3px !default;
@@ -1667,17 +1670,17 @@ $carousel-caption-spacer: 1.25rem !default;
1667
1670
 
1668
1671
  $carousel-control-icon-width: 2rem !default;
1669
1672
 
1670
- $carousel-control-prev-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/></svg>") !default;
1671
- $carousel-control-next-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/></svg>") !default;
1673
+ $carousel-control-prev-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0'/></svg>") !default;
1674
+ $carousel-control-next-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708'/></svg>") !default;
1672
1675
 
1673
1676
  $carousel-transition-duration: .6s !default;
1674
1677
  $carousel-transition: transform $carousel-transition-duration ease-in-out !default; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`)
1675
1678
  // scss-docs-end carousel-variables
1676
1679
 
1677
1680
  // scss-docs-start carousel-dark-variables
1678
- $carousel-dark-indicator-active-bg: $black !default;
1679
- $carousel-dark-caption-color: $black !default;
1680
- $carousel-dark-control-icon-filter: invert(1) grayscale(100) !default;
1681
+ $carousel-dark-indicator-active-bg: $black !default; // Deprecated in v5.3.4
1682
+ $carousel-dark-caption-color: $black !default; // Deprecated in v5.3.4
1683
+ $carousel-dark-control-icon-filter: invert(1) grayscale(100) !default; // Deprecated in v5.3.4
1681
1684
  // scss-docs-end carousel-dark-variables
1682
1685
 
1683
1686
 
@@ -1704,13 +1707,14 @@ $btn-close-height: $btn-close-width !default;
1704
1707
  $btn-close-padding-x: .25em !default;
1705
1708
  $btn-close-padding-y: $btn-close-padding-x !default;
1706
1709
  $btn-close-color: $black !default;
1707
- $btn-close-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$btn-close-color}'><path d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/></svg>") !default;
1710
+ $btn-close-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$btn-close-color}'><path d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414'/></svg>") !default;
1708
1711
  $btn-close-focus-shadow: $focus-ring-box-shadow !default;
1709
1712
  $btn-close-opacity: .5 !default;
1710
1713
  $btn-close-hover-opacity: .75 !default;
1711
1714
  $btn-close-focus-opacity: 1 !default;
1712
1715
  $btn-close-disabled-opacity: .25 !default;
1713
- $btn-close-white-filter: invert(1) grayscale(100%) brightness(200%) !default;
1716
+ $btn-close-filter: null !default;
1717
+ $btn-close-white-filter: invert(1) grayscale(100%) brightness(200%) !default; // Deprecated in v5.3.4
1714
1718
  // scss-docs-end close-variables
1715
1719
 
1716
1720
 
@@ -1745,3 +1749,5 @@ $kbd-bg: var(--#{$prefix}body-color) !default;
1745
1749
  $nested-kbd-font-weight: null !default; // Deprecated in v5.2.0, removing in v6
1746
1750
 
1747
1751
  $pre-color: null !default;
1752
+
1753
+ @import "variables-dark"; // TODO: can be removed safely in v6, only here to avoid breaking changes in v5.3
@@ -14,9 +14,11 @@
14
14
  top: 0;
15
15
  left: 0;
16
16
  z-index: 2;
17
+ max-width: 100%;
17
18
  height: 100%; // allow textareas
18
19
  padding: $form-floating-padding-y $form-floating-padding-x;
19
20
  overflow: hidden;
21
+ color: rgba(var(--#{$prefix}body-color-rgb), #{$form-floating-label-opacity});
20
22
  text-align: start;
21
23
  text-overflow: ellipsis;
22
24
  white-space: nowrap;
@@ -49,6 +51,7 @@
49
51
  > .form-select {
50
52
  padding-top: $form-floating-input-padding-t;
51
53
  padding-bottom: $form-floating-input-padding-b;
54
+ padding-left: $form-floating-padding-x;
52
55
  }
53
56
 
54
57
  > .form-control:focus,
@@ -56,27 +59,30 @@
56
59
  > .form-control-plaintext,
57
60
  > .form-select {
58
61
  ~ label {
59
- color: rgba(var(--#{$prefix}body-color-rgb), #{$form-floating-label-opacity});
60
62
  transform: $form-floating-label-transform;
61
-
62
- &::after {
63
- position: absolute;
64
- inset: $form-floating-padding-y ($form-floating-padding-x * .5);
65
- z-index: -1;
66
- height: $form-floating-label-height;
67
- content: "";
68
- background-color: $input-bg;
69
- @include border-radius($input-border-radius);
70
- }
71
63
  }
72
64
  }
73
65
  // Duplicated because `:-webkit-autofill` invalidates other selectors when grouped
74
66
  > .form-control:-webkit-autofill {
75
67
  ~ label {
76
- color: rgba(var(--#{$prefix}body-color-rgb), #{$form-floating-label-opacity});
77
68
  transform: $form-floating-label-transform;
78
69
  }
79
70
  }
71
+ > textarea:focus,
72
+ > textarea:not(:placeholder-shown) {
73
+ ~ label::after {
74
+ position: absolute;
75
+ inset: $form-floating-padding-y ($form-floating-padding-x * .5);
76
+ z-index: -1;
77
+ height: $form-floating-label-height;
78
+ content: "";
79
+ background-color: $input-bg;
80
+ @include border-radius($input-border-radius);
81
+ }
82
+ }
83
+ > textarea:disabled ~ label::after {
84
+ background-color: $input-disabled-bg;
85
+ }
80
86
 
81
87
  > .form-control-plaintext {
82
88
  ~ label {
@@ -87,9 +93,5 @@
87
93
  > :disabled ~ label,
88
94
  > .form-control:disabled ~ label { // Required for `.form-control`s because of specificity
89
95
  color: $form-floating-label-disabled-color;
90
-
91
- &::after {
92
- background-color: $input-disabled-bg;
93
- }
94
96
  }
95
97
  }
@@ -131,7 +131,7 @@
131
131
  margin-left: $form-switch-padding-start * -1;
132
132
  background-image: var(--#{$prefix}form-switch-bg);
133
133
  background-position: left center;
134
- @include border-radius($form-switch-border-radius);
134
+ @include border-radius($form-switch-border-radius, 0);
135
135
  @include transition($form-switch-transition);
136
136
 
137
137
  &:focus {
@@ -121,7 +121,7 @@
121
121
  }
122
122
 
123
123
  > :not(:first-child):not(.dropdown-menu)#{$validation-messages} {
124
- margin-left: calc(#{$input-border-width} * -1); // stylelint-disable-line function-disallowed-list
124
+ margin-left: calc(-1 * #{$input-border-width}); // stylelint-disable-line function-disallowed-list
125
125
  @include border-start-radius(0);
126
126
  }
127
127
 
@@ -1,7 +1,7 @@
1
1
  @mixin bsBanner($file) {
2
2
  /*!
3
- * Bootstrap #{$file} v5.3.2 (https://getbootstrap.com/)
4
- * Copyright 2011-2023 The Bootstrap Authors
3
+ * Bootstrap #{$file} v5.3.4 (https://getbootstrap.com/)
4
+ * Copyright 2011-2025 The Bootstrap Authors
5
5
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
6
6
  */
7
7
  }
@@ -69,7 +69,12 @@
69
69
 
70
70
  &:focus {
71
71
  border-color: $border-color;
72
- box-shadow: $focus-box-shadow;
72
+ @if $enable-shadows {
73
+ @include box-shadow($input-box-shadow, $focus-box-shadow);
74
+ } @else {
75
+ // Avoid using mixin so we can pass custom focus shadow properly
76
+ box-shadow: $focus-box-shadow;
77
+ }
73
78
  }
74
79
  }
75
80
  }
@@ -100,7 +105,12 @@
100
105
 
101
106
  &:focus {
102
107
  border-color: $border-color;
103
- box-shadow: $focus-box-shadow;
108
+ @if $enable-shadows {
109
+ @include box-shadow($form-select-box-shadow, $focus-box-shadow);
110
+ } @else {
111
+ // Avoid using mixin so we can pass custom focus shadow properly
112
+ box-shadow: $focus-box-shadow;
113
+ }
104
114
  }
105
115
  }
106
116
  }
@@ -72,7 +72,7 @@
72
72
  @include media-breakpoint-up($breakpoint, $breakpoints) {
73
73
  // Provide basic `.col-{bp}` classes for equal-width flexbox columns
74
74
  .col#{$infix} {
75
- flex: 1 0 0%; // Flexbugs #4: https://github.com/philipwalton/flexbugs#flexbug-4
75
+ flex: 1 0 0;
76
76
  }
77
77
 
78
78
  .row-cols#{$infix}-auto > * {
@@ -138,7 +138,7 @@
138
138
  }
139
139
  }
140
140
 
141
- // Start with `1` because `0` is and invalid value.
141
+ // Start with `1` because `0` is an invalid value.
142
142
  // Ends with `$columns - 1` because offsetting by the width of an entire row isn't possible.
143
143
  @for $i from 1 through ($columns - 1) {
144
144
  .g-start#{$infix}-#{$i} {
@@ -24,7 +24,7 @@
24
24
  // Use to only display content when it's focused, or one of its child elements is focused
25
25
  // (i.e. when focus is within the element/container that the class was applied to)
26
26
  //
27
- // Useful for "Skip to main content" links; see https://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1
27
+ // Useful for "Skip to main content" links; see https://www.w3.org/WAI/WCAG22/Techniques/general/G1.html
28
28
 
29
29
  @mixin visually-hidden-focusable() {
30
30
  &:not(:focus):not(:focus-within) {
data/bootstrap.gemspec CHANGED
@@ -15,7 +15,6 @@ Gem::Specification.new do |s|
15
15
  s.required_ruby_version = '>= 2.3.3'
16
16
 
17
17
  s.add_runtime_dependency 'popper_js', '>= 2.11.8', '< 3'
18
- s.add_runtime_dependency 'autoprefixer-rails', '>= 9.1.0'
19
18
 
20
19
  s.add_development_dependency 'rake'
21
20