Merge branch 'twbs:main' into mainHEADmain

8 files changed, 8 insertions, 0 deletions

diff --git a/site/layouts/partials/callouts/danger-async-methods.md b/site/layouts/partials/callouts/danger-async-methods.md
new file mode 100644
index 000000000..f067502d3
--- /dev/null
+++ b/site/layouts/partials/callouts/danger-async-methods.md
@@ -0,0 +1 @@
+**All API methods are asynchronous and start a transition.** They return to the caller as soon as the transition is started, but before it ends. In addition, a method call on a transitioning component will be ignored. [Learn more in our JavaScript docs.](/docs/{{ .Site.Params.docs_version }}/getting-started/javascript/#asynchronous-functions-and-transitions)
diff --git a/site/layouts/partials/callouts/info-mediaqueries-breakpoints.md b/site/layouts/partials/callouts/info-mediaqueries-breakpoints.md
new file mode 100644
index 000000000..2eea77138
--- /dev/null
+++ b/site/layouts/partials/callouts/info-mediaqueries-breakpoints.md
@@ -0,0 +1 @@
+**Why subtract .02px?** Browsers don't currently support [range context queries](https://www.w3.org/TR/mediaqueries-4/#range-context), so we work around the limitations of [`min-` and `max-` prefixes](https://www.w3.org/TR/mediaqueries-4/#mq-min-max) and viewports with fractional widths (which can occur under certain conditions on high-dpi devices, for instance) by using values with higher precision.
diff --git a/site/layouts/partials/callouts/info-npm-starter.md b/site/layouts/partials/callouts/info-npm-starter.md
new file mode 100644
index 000000000..cc4a50e68
--- /dev/null
+++ b/site/layouts/partials/callouts/info-npm-starter.md
@@ -0,0 +1 @@
+**Get started with Bootstrap via npm with our starter project!** Head to the [Sass & JS example](https://github.com/twbs/examples/tree/main/sass-js) template repository to see how to build and customize Bootstrap in your own npm project. Includes Sass compiler, Autoprefixer, Stylelint, PurgeCSS, and Bootstrap Icons.
diff --git a/site/layouts/partials/callouts/info-prefersreducedmotion.md b/site/layouts/partials/callouts/info-prefersreducedmotion.md
new file mode 100644
index 000000000..d258fbe48
--- /dev/null
+++ b/site/layouts/partials/callouts/info-prefersreducedmotion.md
@@ -0,0 +1 @@
+The animation effect of this component is dependent on the `prefers-reduced-motion` media query. See the [reduced motion section of our accessibility documentation](/docs/{{ .Site.Params.docs_version }}/getting-started/accessibility/#reduced-motion).
diff --git a/site/layouts/partials/callouts/info-sanitizer.md b/site/layouts/partials/callouts/info-sanitizer.md
new file mode 100644
index 000000000..ee0eda48e
--- /dev/null
+++ b/site/layouts/partials/callouts/info-sanitizer.md
@@ -0,0 +1 @@
+By default, this component uses the built-in content sanitizer, which strips out any HTML elements that are not explicitly allowed. See the [sanitizer section in our JavaScript documentation](/docs/{{ .Site.Params.docs_version }}/getting-started/javascript/#sanitizer) for more details.
diff --git a/site/layouts/partials/callouts/warning-color-assistive-technologies.md b/site/layouts/partials/callouts/warning-color-assistive-technologies.md
new file mode 100644
index 000000000..075bf3609
--- /dev/null
+++ b/site/layouts/partials/callouts/warning-color-assistive-technologies.md
@@ -0,0 +1 @@
+**Accessibility tip:** Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies like screen readers. Please ensure the meaning is obvious from the content itself (e.g., the visible text with a [*sufficient* color contrast](/docs/{{ .Site.Params.docs_version }}/getting-started/accessibility/#color-contrast)) or is included through alternative means, such as additional text hidden with the `.visually-hidden` class.
diff --git a/site/layouts/partials/callouts/warning-data-bs-title-vs-title.md b/site/layouts/partials/callouts/warning-data-bs-title-vs-title.md
new file mode 100644
index 000000000..e932f22ad
--- /dev/null
+++ b/site/layouts/partials/callouts/warning-data-bs-title-vs-title.md
@@ -0,0 +1 @@
+Feel free to use either `title` or `data-bs-title` in your HTML. When `title` is used, Popper will replace it automatically with `data-bs-title` when the element is rendered.
diff --git a/site/layouts/partials/callouts/warning-input-support.md b/site/layouts/partials/callouts/warning-input-support.md
new file mode 100644
index 000000000..f9d9c0abd
--- /dev/null
+++ b/site/layouts/partials/callouts/warning-input-support.md
@@ -0,0 +1 @@
+Some date inputs types are [not fully supported](https://caniuse.com/input-datetime) by the latest versions of Safari and Firefox.