chore(merge main): patched commit → a3f8480 (#1882)

js/tests/unit/collapse.spec.js

@@ -277,25 +277,25 @@ describe('Collapse', () => {
  return new Promise(resolve => {
  fixtureEl.innerHTML = [
  '<div id="parentGroup" class="accordion">',
- ' <div id="parentHeader" class="accordion-header">',
+ ' <div class="accordion-header">',
  ' <button data-bs-target="#parentContent" data-bs-toggle="collapse" class="accordion-toggle">Parent</button>',
  ' </div>',
- ' <div id="parentContent" class="accordion-collapse collapse" aria-labelledby="parentHeader" data-bs-parent="#parentGroup">',
+ ' <div id="parentContent" class="accordion-collapse collapse" data-bs-parent="#parentGroup">',
  ' <div class="accordion-body">',
  ' <div id="childGroup" class="accordion">',
  ' <div class="accordion-item">',
- ' <div id="childHeader1" class="accordion-header">',
+ ' <div class="accordion-header">',
  ' <button data-bs-target="#childContent1" data-bs-toggle="collapse" class="accordion-toggle">Child 1</button>',
  ' </div>',
- ' <div id="childContent1" class="accordion-collapse collapse" aria-labelledby="childHeader1" data-bs-parent="#childGroup">',
+ ' <div id="childContent1" class="accordion-collapse collapse" data-bs-parent="#childGroup">',
  ' <div>content</div>',
  ' </div>',
  ' </div>',
  ' <div class="accordion-item">',
- ' <div id="childHeader2" class="accordion-header">',
+ ' <div class="accordion-header">',
  ' <button data-bs-target="#childContent2" data-bs-toggle="collapse" class="accordion-toggle">Child 2</button>',
  ' </div>',
- ' <div id="childContent2" class="accordion-collapse collapse" aria-labelledby="childHeader2" data-bs-parent="#childGroup">',
+ ' <div id="childContent2" class="accordion-collapse collapse" data-bs-parent="#childGroup">',
  ' <div>content</div>',
  ' </div>',
  ' </div>',
@@ -338,12 +338,12 @@ describe('Collapse', () => {
  fixtureEl.innerHTML = [
  '<div class="accordion" id="accordionExample">',
  ' <div class="accordion-item">',
- ' <h2 class="accordion-header" id="headingOne">',
+ ' <h2 class="accordion-header">',
  ' <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">',
  ' Accordion Item #1',
  ' </button>',
  ' </h2>',
- ' <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">',
+ ' <div id="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#accordionExample">',
  ' <div class="accordion-body">',
  ' <nav>',
  ' <div class="nav nav-tabs" id="nav-tab" role="tablist">',
@@ -640,11 +640,11 @@ describe('Collapse', () => {
  '<div id="accordion">',
  ' <div class="item">',
  ' <a id="linkTrigger" data-bs-toggle="collapse" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne"></a>',
- ' <div id="collapseOne" class="collapse" role="tabpanel" aria-labelledby="headingThree" data-bs-parent="#accordion"></div>',
+ ' <div id="collapseOne" class="collapse" role="tabpanel" data-bs-parent="#accordion"></div>',
  ' </div>',
  ' <div class="item">',
  ' <a id="linkTriggerTwo" data-bs-toggle="collapse" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"></a>',
- ' <div id="collapseTwo" class="collapse show" role="tabpanel" aria-labelledby="headingTwo" data-bs-parent="#accordion"></div>',
+ ' <div id="collapseTwo" class="collapse show" role="tabpanel" data-bs-parent="#accordion"></div>',
  ' </div>',
  '</div>'
  ].join('')
@@ -699,13 +699,13 @@ describe('Collapse', () => {
  ' <div class="col-lg-6">',
  ' <div class="item">',
  ' <a id="linkTrigger" data-bs-toggle="collapse" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne"></a>',
- ' <div id="collapseOne" class="collapse" role="tabpanel" aria-labelledby="headingThree" data-bs-parent="#accordion"></div>',
+ ' <div id="collapseOne" class="collapse" role="tabpanel" data-bs-parent="#accordion"></div>',
  ' </div>',
  ' </div>',
  ' <div class="col-lg-6">',
  ' <div class="item">',
  ' <a id="linkTriggerTwo" data-bs-toggle="collapse" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"></a>',
- ' <div id="collapseTwo" class="collapse show" role="tabpanel" aria-labelledby="headingTwo" data-bs-parent="#accordion"></div>',
+ ' <div id="collapseTwo" class="collapse show" role="tabpanel" data-bs-parent="#accordion"></div>',
  ' </div>',
  ' </div>',
  ' </div>',
@@ -829,18 +829,18 @@ describe('Collapse', () => {
  '<div id="accordion">',
  ' <div class="item">',
  ' <a id="linkTrigger" data-bs-toggle="collapse" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne"></a>',
- ' <div id="collapseOne" data-bs-parent="#accordion" class="collapse" role="tabpanel" aria-labelledby="headingThree">',
+ ' <div id="collapseOne" data-bs-parent="#accordion" class="collapse" role="tabpanel">',
  ' <div id="nestedAccordion">',
  ' <div class="item">',
  ' <a id="nestedLinkTrigger" data-bs-toggle="collapse" href="#nestedCollapseOne" aria-expanded="false" aria-controls="nestedCollapseOne"></a>',
- ' <div id="nestedCollapseOne" data-bs-parent="#nestedAccordion" class="collapse" role="tabpanel" aria-labelledby="headingThree"></div>',
+ ' <div id="nestedCollapseOne" data-bs-parent="#nestedAccordion" class="collapse" role="tabpanel"></div>',
  ' </div>',
  ' </div>',
  ' </div>',
  ' </div>',
  ' <div class="item">',
  ' <a id="linkTriggerTwo" data-bs-toggle="collapse" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"></a>',
- ' <div id="collapseTwo" data-bs-parent="#accordion" class="collapse show" role="tabpanel" aria-labelledby="headingTwo"></div>',
+ ' <div id="collapseTwo" data-bs-parent="#accordion" class="collapse show" role="tabpanel"></div>',
  ' </div>',
  '</div>'
  ].join('')

package.json

@@ -162,10 +162,10 @@
  "pa11y-ci-reporter-html": "^5.1.0",
  "postcss": "^8.4.21",
  "postcss-cli": "^10.1.0",
- "rollup": "^3.15.0",
+ "rollup": "^3.17.2",
  "rollup-plugin-istanbul": "^4.0.0",
  "rtlcss": "^4.0.0",
- "sass": "^1.58.1",
+ "sass": "^1.58.3",
  "sass-loader": "^10.1.1",
  "sass-true": "^7.0.0",
  "shelljs": "^0.8.5",

scss/_buttons.scss

@@ -10,7 +10,7 @@
  @include rfs($btn-font-size, --#{$prefix}btn-font-size);
  --#{$prefix}btn-font-weight: #{$btn-font-weight};
  --#{$prefix}btn-line-height: #{$btn-line-height};
- --#{$prefix}btn-color: #{$body-color};
+ --#{$prefix}btn-color: #{$btn-color};
  --#{$prefix}btn-letter-spacing: #{$btn-letter-spacing}; // Boosted mod
  --#{$prefix}btn-bg: transparent;
  --#{$prefix}btn-border-width: #{$btn-border-width};

scss/_navbar.scss

@@ -194,6 +194,11 @@
  @include media-breakpoint-down(lg) {
  outline-offset: -$focus-visible-outer-width;
  }
+
+ &.active,
+ &.show {
+ color: var(--#{$prefix}navbar-active-color);
+ }
  }
 
  .nav-item {
@@ -226,11 +231,6 @@
  }
  // End mod
 
- .show > .nav-link,
- .nav-link.active {
- color: var(--#{$prefix}navbar-active-color);
- }
-
  .dropdown-menu {
  position: static;
  }

scss/_root.scss

@@ -131,9 +131,14 @@
  --#{$prefix}focus-ring-width: #{$focus-ring-width};
  --#{$prefix}focus-ring-opacity: #{$focus-ring-opacity};
  --#{$prefix}focus-ring-color: #{$focus-ring-color};
- // 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
- --#{$prefix}focus-ring-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);
  // scss-docs-end root-focus-variables
+
+ // scss-docs-start root-form-validation-variables
+ --#{$prefix}form-valid-color: #{$form-valid-color};
+ --#{$prefix}form-valid-border-color: #{$form-valid-border-color};
+ --#{$prefix}form-invalid-color: #{$form-invalid-color};
+ --#{$prefix}form-invalid-border-color: #{$form-invalid-border-color};
+ // scss-docs-end root-form-validation-variables
 }
 
 // scss-docs-start root-dark-rule
@@ -225,6 +230,11 @@
 
  --#{$prefix}border-color: #{$border-color-dark};
  --#{$prefix}border-color-translucent: #{$border-color-translucent-dark};
+
+ --#{$prefix}form-valid-color: #{$form-valid-color-dark};
+ --#{$prefix}form-valid-border-color: #{$form-valid-border-color-dark};
+ --#{$prefix}form-invalid-color: #{$form-invalid-color-dark};
+ --#{$prefix}form-invalid-border-color: #{$form-invalid-border-color-dark};
  // scss-docs-end root-dark-mode-vars
  }
 }

scss/_utilities.scss

@@ -178,8 +178,6 @@ $utilities: map-merge(
  ),
  "border-width": (
  property: border-width,
- // css-var: true,
- // css-variable-name: border-width,
  class: border,
  values: $border-widths
  ),
@@ -638,7 +636,6 @@ $utilities: map-merge(
  )
  ),
  "link-underline": (
- // css-var: true,
  property: text-decoration-color,
  class: link-underline,
  local-vars: (
@@ -656,6 +653,7 @@ $utilities: map-merge(
  class: link-underline-opacity,
  state: hover,
  values: (
+ 0: 0,
  10: .1,
  25: .25,
  50: .5,

scss/_variables-dark.scss

@@ -65,6 +65,13 @@ $code-color-dark: tint-color($code-color, 40%) !default;
 // Boosted mod: no $form-switch-color-dark
 // Boosted mod: no $form-switch-bg-image-dark
 
+// scss-docs-start form-validation-colors-dark
+$form-valid-color-dark: $green-300 !default;
+$form-valid-border-color-dark: $green-300 !default;
+$form-invalid-color-dark: $red-300 !default;
+$form-invalid-border-color-dark: $red-300 !default;
+// scss-docs-end form-validation-colors-dark
+
 
 //
 // Accordion

scss/_variables.scss

@@ -529,6 +529,15 @@ $linked-chevron-transform: rotate(.5turn) translateY(1px) !default;
 $linked-chevron-margin-left: $spacer * .25 !default;
 // End mod
 
+// Icon links
+// scss-docs-start icon-link-variables
+$icon-link-gap: .3125rem !default; // Boosted mod: instead of `.375rem`
+$icon-link-underline-offset: .25em !default;
+$icon-link-icon-size: 1em !default;
+$icon-link-icon-transition: .2s ease-in-out transform !default;
+$icon-link-icon-transform: translate3d(.25em, 0, 0) !default;
+// scss-docs-end icon-link-variables
+
 
 // Paragraphs
 //
@@ -943,6 +952,7 @@ $input-btn-border-width: var(--#{$prefix}border-width) !default;
 // For each of Boosted's buttons, define text, background, and border color.
 
 // scss-docs-start btn-variables
+$btn-color: var(--#{$prefix}body-color) !default;
 $btn-padding-y: $input-btn-padding-y !default;
 $btn-padding-x: $input-btn-padding-x !default;
 $btn-font-family: $input-btn-font-family !default;
@@ -1291,23 +1301,30 @@ $form-feedback-icon-size: add($spacer * .25, $spacer * .5) !default; /
 $form-feedback-line-height: $line-height-sm !default; // Boosted mod
 // scss-docs-end form-feedback-variables
 
+// scss-docs-start form-validation-colors
+$form-valid-color: var(--#{$prefix}success-text-emphasis) !default; // Boosted mod: instead of `$form-feedback-valid-color`
+$form-valid-border-color: var(--#{$prefix}success) !default; // Boosted mod: instead of `$form-feedback-valid-color`
+$form-invalid-color: var(--#{$prefix}danger-text-emphasis) !default; // Boosted mod: instead of `$form-feedback-invalid-color`
+$form-invalid-border-color: var(--#{$prefix}danger) !default; // Boosted mod: instead of `$form-feedback-invalid-color`
+// scss-docs-end form-validation-colors
+
 // scss-docs-start form-validation-states
 $form-validation-states: (
  "valid": (
- "color": var(--#{$prefix}success-text-emphasis),
+ "color": var(--#{$prefix}form-valid-color),
  "icon": $form-feedback-icon-valid,
  // Boosted mod: no `tooltip-color`
  // Boosted mod: no `tooltip-bg-color`
  // Boosted mod: no `focus-box-shadow`
- "border-color": var(--#{$prefix}success),
+ "border-color": var(--#{$prefix}form-valid-border-color),
  ),
  "invalid": (
- "color": var(--#{$prefix}danger-text-emphasis),
+ "color": var(--#{$prefix}form-invalid-color),
  "icon": $form-feedback-icon-invalid,
  // Boosted mod: no `tooltip-color`
  // Boosted mod: no `tooltip-bg-color`
  // Boosted mod: no `focus-box-shadow`
- "border-color": var(--#{$prefix}danger),
+ "border-color": var(--#{$prefix}form-invalid-border-color),
  )
 ) !default;
 // scss-docs-end form-validation-states
@@ -1353,7 +1370,6 @@ $nav-link-color: var(--#{$prefix}link-color) !default;
 $nav-link-hover-color: var(--#{$prefix}link-hover-color) !default;
 $nav-link-transition: null !default; // Boosted mod
 $nav-link-disabled-color: $gray-500 !default; // Boosted mod: instead of `var(--#{$prefix}secondary-color)`
-$nav-link-disabled-color: $gray-500 !default; // Boosted mod: instead of `$gray-600`
 // Boosted mod: no `$nav-link-focus-box-shadow`
 
 $nav-tabs-border-color: var(--#{$prefix}border-color) !default;
@@ -2114,12 +2130,12 @@ $btn-close-padding: var(--#{$boosted-prefix}icon-spacing, #{$btn-ico
 $btn-close-border-width: var(--#{$prefix}border-width) !default; // Boosted mod
 $btn-close-border-color: transparent !default; // Boosted mod
 $btn-close-color: $black !default;
+$btn-close-bg: var(--#{$boosted-prefix}close-icon) !default; // Boosted mod
 // Boosted mod
 // fusv-disable
 $btn-close-focus-shadow: $btn-focus-box-shadow !default; // Deprecated in v5.3.0
 // fusv-enable
 // End mod
-$btn-close-bg: var(--#{$boosted-prefix}close-icon) !default; // Boosted mod
 
 // Boosted mod: no opacity/filter
 

scss/forms/_form-select.scss

@@ -9,7 +9,6 @@
  display: block;
  width: 100%;
  padding: subtract($form-select-padding-y, 1px) $form-select-indicator-padding add($form-select-padding-y, 1px) $form-select-padding-x; // Boosted mod
- -moz-padding-start: subtract($form-select-padding-x, 3px); // See https:/twbs/bootstrap/issues/32636
  font-family: $form-select-font-family;
  @include font-size($form-select-font-size);
  font-weight: $form-select-font-weight;

scss/helpers/_icon-link.scss

@@ -2,25 +2,26 @@
 
 .icon-link {
  display: inline-flex;
- gap: .3125rem; // Boosted mod: instead of .375rem
+ gap: $icon-link-gap;
  align-items: center;
  text-decoration-color: rgba(var(--#{$prefix}link-color-rgb), var(--#{$prefix}link-opacity, .5));
- text-underline-offset: .25em;
+ text-underline-offset: $icon-link-underline-offset;
  backface-visibility: hidden;
 
  > .bi {
  flex-shrink: 0;
- width: 1em;
- height: 1em;
- @include transition(.2s ease-in-out transform);
+ width: $icon-link-icon-size;
+ height: $icon-link-icon-size;
+ fill: currentcolor;
+ @include transition($icon-link-icon-transition);
  }
 }
 
 .icon-link-hover {
  &:hover,
  &:focus-visible {
  > .bi {
- transform: var(--#{$prefix}icon-link-transform, translate3d(.25em, 0, 0));
+ transform: var(--#{$prefix}icon-link-transform, $icon-link-icon-transform);
  }
  }
 }