Merge remote-tracking branch 'remotes/origin/main' into rohit/main/modal-with-stickyrohit/main/modal-with-sticky

9 files changed, 39 insertions, 23 deletions

diff --git a/site/content/docs/5.0/components/popovers.md b/site/content/docs/5.0/components/popovers.md
index 0a16f89e1..817cd1ef1 100644
--- a/site/content/docs/5.0/components/popovers.md
+++ b/site/content/docs/5.0/components/popovers.md
@@ -64,35 +64,35 @@ Four options are available: top, right, bottom, and left aligned. Directions are
 
 <div class="bd-example popover-demo">
   <div class="bd-example-popovers">
-    <button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
+    <button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Top popover">
       Popover on top
     </button>
-    <button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
+    <button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="Right popover">
       Popover on right
     </button>
-    <button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
+    <button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Bottom popover">
       Popover on bottom
     </button>
-    <button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
+    <button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="Left popover">
       Popover on left
     </button>
   </div>
 </div>
 
 ```html
-<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
+<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Top popover">
   Popover on top
 </button>
 
-<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
+<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="Right popover">
   Popover on right
 </button>
 
-<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
+<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Bottom popover">
   Popover on bottom
 </button>
 
-<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
+<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="Left popover">
   Popover on left
 </button>
 ```
@@ -119,13 +119,13 @@ var popover = new bootstrap.Popover(document.querySelector('.popover-dismiss'),
 
 ### Disabled elements
 
-Elements with the `disabled` attribute aren't interactive, meaning users cannot hover or click them to trigger a popover (or tooltip). As a workaround, you'll want to trigger the popover from a wrapper `<div>` or `<span>` and override the `pointer-events` on the disabled element.
+Elements with the `disabled` attribute aren't interactive, meaning users cannot hover or click them to trigger a popover (or tooltip). As a workaround, you'll want to trigger the popover from a wrapper `<div>` or `<span>`.
 
 For disabled popover triggers, you may also prefer `data-bs-trigger="hover"` so that the popover appears as immediate visual feedback to your users as they may not expect to _click_ on a disabled element.
 
 {{< example >}}
 <span class="d-inline-block" data-bs-toggle="popover" data-bs-content="Disabled popover">
-  <button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>Disabled button</button>
+  <button class="btn btn-primary" type="button" disabled>Disabled button</button>
 </span>
 {{< /example >}}
 
@@ -249,9 +249,9 @@ Note that for security reasons the `sanitize`, `sanitizeFn`, and `allowList` opt
     </tr>
     <tr>
       <td><code>fallbackPlacements</code></td>
-      <td>string | array</td>
-      <td><code>'flip'</code></td>
-      <td>Allow to specify which position Popper will use on fallback. For more information refer to
+      <td>array</td>
+      <td><code>['top', 'right', 'bottom', 'left']</code></td>
+      <td>Define fallback placements by providing a list of placements in array (in order of preference). For more information refer to
       Popper's <a href="https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements">behavior docs</a></td>
     </tr>
     <tr>
diff --git a/site/content/docs/5.0/components/toasts.md b/site/content/docs/5.0/components/toasts.md
index 740a926f9..b6f7e3893 100644
--- a/site/content/docs/5.0/components/toasts.md
+++ b/site/content/docs/5.0/components/toasts.md
@@ -137,7 +137,7 @@ Place toasts with custom CSS as you need them. The top right is often used for n
 
 {{< example >}}
 <form>
-  <div class="form-group mb-3">
+  <div class="mb-3">
     <label for="selectToastPlacement">Toast placement</label>
     <select class="form-select mt-2" id="selectToastPlacement">
       <option value="" selected>Select a position...</option>
diff --git a/site/content/docs/5.0/components/tooltips.md b/site/content/docs/5.0/components/tooltips.md
index 6f0bde9dc..70ba7f6d5 100644
--- a/site/content/docs/5.0/components/tooltips.md
+++ b/site/content/docs/5.0/components/tooltips.md
@@ -145,12 +145,12 @@ You should only add tooltips to HTML elements that are traditionally keyboard-fo
 
 ### Disabled elements
 
-Elements with the `disabled` attribute aren't interactive, meaning users cannot focus, hover, or click them to trigger a tooltip (or popover). As a workaround, you'll want to trigger the tooltip from a wrapper `<div>` or `<span>`, ideally made keyboard-focusable using `tabindex="0"`, and override the `pointer-events` on the disabled element.
+Elements with the `disabled` attribute aren't interactive, meaning users cannot focus, hover, or click them to trigger a tooltip (or popover). As a workaround, you'll want to trigger the tooltip from a wrapper `<div>` or `<span>`, ideally made keyboard-focusable using `tabindex="0"`.
 
 <div class="tooltip-demo">
 {{< example >}}
 <span class="d-inline-block" tabindex="0" data-bs-toggle="tooltip" title="Disabled tooltip">
-  <button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>Disabled button</button>
+  <button class="btn btn-primary" type="button" disabled>Disabled button</button>
 </span>
 {{< /example >}}
 </div>
@@ -254,9 +254,9 @@ Note that for security reasons the `sanitize`, `sanitizeFn`, and `allowList` opt
     </tr>
     <tr>
       <td><code>fallbackPlacements</code></td>
-      <td>null | array</td>
-      <td><code>null</code></td>
-      <td>Allow to specify which position Popper will use on fallback. For more information refer to
+      <td>array</td>
+      <td><code>['top', 'right', 'bottom', 'left']</code></td>
+      <td>Define fallback placements by providing a list of placements in array (in order of preference). For more information refer to
       Popper's <a href="https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements">behavior docs</a></td>
     </tr>
     <tr>
diff --git a/site/content/docs/5.0/content/reboot.md b/site/content/docs/5.0/content/reboot.md
index 4613a7a11..6529e5ef2 100644
--- a/site/content/docs/5.0/content/reboot.md
+++ b/site/content/docs/5.0/content/reboot.md
@@ -33,6 +33,8 @@ Bootstrap utilizes a "native font stack" or "system font stack" for optimum text
 
 ```scss
 $font-family-sans-serif:
+  // Cross-platform generic font family (default user interface font)
+  system-ui,
   // Safari for macOS and iOS (San Francisco)
   -apple-system,
   // Chrome < 56 for macOS (San Francisco)
diff --git a/site/content/docs/5.0/examples/checkout-rtl/index.html b/site/content/docs/5.0/examples/checkout-rtl/index.html
index c4a60443d..5839cb112 100644
--- a/site/content/docs/5.0/examples/checkout-rtl/index.html
+++ b/site/content/docs/5.0/examples/checkout-rtl/index.html
@@ -87,7 +87,7 @@ body_class: "bg-light"
 
             <div class="col-12">
               <label for="username" class="form-label">اسم المستخدم</label>
-              <div class="input-group">
+              <div class="input-group has-validation">
                 <span class="input-group-text">@</span>
                 <input type="text" class="form-control" id="username" placeholder="اسم المستخدم" required>
               <div class="invalid-feedback">
diff --git a/site/content/docs/5.0/examples/checkout/index.html b/site/content/docs/5.0/examples/checkout/index.html
index a8bf348b2..fc9cfb6f8 100644
--- a/site/content/docs/5.0/examples/checkout/index.html
+++ b/site/content/docs/5.0/examples/checkout/index.html
@@ -86,7 +86,7 @@ body_class: "bg-light"
 
             <div class="col-12">
               <label for="username" class="form-label">Username</label>
-              <div class="input-group">
+              <div class="input-group has-validation">
                 <span class="input-group-text">@</span>
                 <input type="text" class="form-control" id="username" placeholder="Username" required>
               <div class="invalid-feedback">
diff --git a/site/content/docs/5.0/getting-started/rtl.md b/site/content/docs/5.0/getting-started/rtl.md
index aeaf8c8c3..cd209298b 100644
--- a/site/content/docs/5.0/getting-started/rtl.md
+++ b/site/content/docs/5.0/getting-started/rtl.md
@@ -116,6 +116,8 @@ For example, to switch from `Helvetica Neue Webfont` for LTR to `Helvetica Neue
 ```scss
 $font-family-sans-serif:
   Helvetica Neue #{"/* rtl:insert:Arabic */"},
+  // Cross-platform generic font family (default user interface font)
+  system-ui,
   // Safari for macOS and iOS (San Francisco)
   -apple-system,
   // Chrome < 56 for macOS (San Francisco)
diff --git a/site/content/docs/5.0/helpers/visually-hidden.md b/site/content/docs/5.0/helpers/visually-hidden.md
index f80160edd..d8148b3f3 100644
--- a/site/content/docs/5.0/helpers/visually-hidden.md
+++ b/site/content/docs/5.0/helpers/visually-hidden.md
@@ -6,13 +6,16 @@ group: helpers
 aliases: "/docs/5.0/helpers/screen-readers/"
 ---
 
-Visually hide an element while still allowing it to be exposed to assistive technologies (such as screen readers) with `.visually-hidden`. Use `.visually-hidden-focusable` to visually hide an element by default, but to display it when it's focused (e.g. by a keyboard-only user). Can also be used as mixins.
+Visually hide an element while still allowing it to be exposed to assistive technologies (such as screen readers) with `.visually-hidden`. Use `.visually-hidden-focusable` to visually hide an element by default, but to display it when it's focused (e.g. by a keyboard-only user). `.visually-hidden-focusable` can also be applied to a container–thanks to `:focus-within`, the container will be displayed when any child element of the container receives focus.
 
 {{< example >}}
 <h2 class="visually-hidden">Title for screen readers</h2>
 <a class="visually-hidden-focusable" href="#content">Skip to main content</a>
+<div class="visually-hidden-focusable">A container with a <a href="#">focusable element</a>.</div>
 {{< /example >}}
 
+Both `visually-hidden` and `visually-hidden-focusable` can also be used as mixins.
+
 ```scss
 // Usage as a mixin
 
diff --git a/site/content/docs/5.0/migration.md b/site/content/docs/5.0/migration.md
index c32dcfab9..952cc937e 100644
--- a/site/content/docs/5.0/migration.md
+++ b/site/content/docs/5.0/migration.md
@@ -7,6 +7,16 @@ aliases: "/migration/"
 toc: true
 ---
 
+## v5.0.0-beta2
+
+### Sass
+
+- Extended the `.visually-hidden-focusable` helper to also work on containers, using `:focus-within`.
+
+### JavaScript
+
+- The default value for the `fallbackPlacements` is changed to `['top', 'right', 'bottom', 'left']` for better placement of popper elements.
+
 ## v5.0.0-beta1
 
 ### RTL
@@ -52,7 +62,6 @@ Breakpoints specific variants are consequently renamed too (eg. `.text-md-start`
 - Renamed `$form-check-inline-margin-right` to `$form-check-inline-margin-end`.
 - Renamed `$form-select-feedback-icon-padding-right` to `$form-select-feedback-icon-padding-end`.
 
-
 ### JavaScript
 
 - Data attributes for all JavaScript plugins are now namespaced to help distinguish Bootstrap functionality from third parties and your own code. For example, we use `data-bs-toggle` instead of `data-toggle`.