Remove added badges from docs pages (#41694)

* Remove added badges from docs pages

* Remove AddedIn

site/src/components/shortcodes/AddedIn.astro

@@ -1,16 +0,0 @@
----
-/*
- * Outputs badge to identify the first version something was added
- */
-
-interface Props {
-  version: string
-}
-
-const { version } = Astro.props
----
-
-<small
-  class="d-inline-flex mb-3 px-2 py-1 fw-semibold text-success-emphasis bg-success-subtle border border-success-subtle rounded-2"
-  >Added in v{version}</small
->

site/src/components/shortcodes/CSSVariables.astro

@@ -0,0 +1,13 @@
+---
+interface Props {
+  component: string
+  className?: string
+}
+
+const { component, className } = Astro.props
+---
+
+<p>
+  {component} use local CSS variables on <code>.{className}</code> for real-time customization.
+  Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
+</p>

site/src/content/docs/components/accordion.mdx

@@ -149,9 +149,7 @@ Please read the [collapse accessibility section]([[docsref:/components/collapse#
 
 ### Variables
 
-<AddedIn version="5.2.0" />
+<CSSVariables component="Accordions" className="accordion" />
-
-As part of Bootstrap’s evolving CSS variables approach, accordions now use local CSS variables on `.accordion` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
 
 <ScssDocs name="accordion-css-vars" file="scss/_accordion.scss" />
 

site/src/content/docs/components/alerts.mdx

@@ -122,9 +122,7 @@ When an alert is dismissed, the element is completely removed from the page stru
 
 ### Variables
 
-<AddedIn version="5.2.0" />
+<CSSVariables component="Alerts" className="alert" />
-
-As part of Bootstrap’s evolving CSS variables approach, alerts now use local CSS variables on `.alert` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
 
 <ScssDocs name="alert-css-vars" file="scss/_alert.scss" />
 

site/src/content/docs/components/badge.mdx

@@ -54,8 +54,6 @@ You can also replace the `.badge` class with a few more utilities without a coun
 
 ## Background colors
 
-<AddedIn version="5.2.0" />
-
 Set a `background-color` with contrasting foreground `color` with [our `.text-bg-{color}` helpers]([[docsref:helpers/color-background]]). Previously it was required to manually pair your choice of [`.text-{color}`]([[docsref:/utilities/colors]]) and [`.bg-{color}`]([[docsref:/utilities/background]]) utilities for styling, which you still may use if you prefer.
 
 <Example code={getData('theme-colors').map((themeColor) => `<span class="badge text-bg-${themeColor.name}">${themeColor.title}</span>`)} />
@@ -72,9 +70,7 @@ Use the `.rounded-pill` utility class to make badges more rounded with a larger
 
 ### Variables
 
-<AddedIn version="5.2.0" />
+<CSSVariables component="Badges" className="badge" />
-
-As part of Bootstrap’s evolving CSS variables approach, badges now use local CSS variables on `.badge` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
 
 <ScssDocs name="badge-css-vars" file="scss/_badge.scss" />
 

site/src/content/docs/components/breadcrumb.mdx

@@ -86,9 +86,7 @@ For more information, see the [ARIA Authoring Practices Guide breadcrumb pattern
 
 ### Variables
 
-<AddedIn version="5.2.0" />
+<CSSVariables component="Breadcrumbs" className="breadcrumb" />
-
-As part of Bootstrap’s evolving CSS variables approach, breadcrumbs now use local CSS variables on `.breadcrumb` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
 
 <ScssDocs name="breadcrumb-css-vars" file="scss/_breadcrumb.scss" />
 

site/src/content/docs/components/buttons.mdx

@@ -190,9 +190,7 @@ document.querySelectorAll('.btn').forEach(buttonElement => {
 
 ### Variables
 
-<AddedIn version="5.2.0" />
+<CSSVariables component="Buttons" className="btn" />
-
-As part of Bootstrap’s evolving CSS variables approach, buttons now use local CSS variables on `.btn` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
 
 <ScssDocs name="btn-css-vars" file="scss/_buttons.scss" />
 

site/src/content/docs/components/card.mdx

@@ -379,8 +379,6 @@ Cards include various options for customizing their backgrounds, borders, and co
 
 ### Background and color
 
-<AddedIn version="5.2.0" />
-
 Set a `background-color` with contrasting foreground `color` with [our `.text-bg-{color}` helpers]([[docsref:helpers/color-background]]). Previously it was required to manually pair your choice of [`.text-{color}`]([[docsref:/utilities/colors]]) and [`.bg-{color}`]([[docsref:/utilities/background]]) utilities for styling, which you still may use if you prefer.
 
 <Example code={getData('theme-colors').map((themeColor) => `<div class="card text-bg-${themeColor.name} mb-3" style="max-width: 18rem;">
@@ -662,9 +660,7 @@ In `v4` we used a CSS-only technique to mimic the behavior of [Masonry](https://
 
 ### Variables
 
-<AddedIn version="5.2.0" />
+<CSSVariables component="Cards" className="card" />
-
-As part of Bootstrap’s evolving CSS variables approach, cards now use local CSS variables on `.card` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
 
 <ScssDocs name="card-css-vars" file="scss/_card.scss" />
 

site/src/content/docs/components/close-button.mdx

@@ -29,9 +29,7 @@ Add `data-bs-theme="dark"` to the `.btn-close`, or to its parent element, to inv
 
 ### Variables
 
-<AddedIn version="5.3.0" />
+<CSSVariables component="Close button" className="btn-close" />
-
-As part of Bootstrap’s evolving CSS variables approach, close button now uses local CSS variables on `.btn-close` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
 
 <ScssDocs name="close-css-vars" file="scss/_close.scss" />
 

site/src/content/docs/components/dropdowns.mdx

@@ -927,9 +927,7 @@ By default, the dropdown menu is closed when clicking inside or outside the drop
 
 ### Variables
 
-<AddedIn version="5.2.0" />
+<CSSVariables component="Dropdowns" className="dropdown-menu" />
-
-As part of Bootstrap’s evolving CSS variables approach, dropdowns now use local CSS variables on `.dropdown-menu` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
 
 <ScssDocs name="dropdown-css-vars" file="scss/_dropdown.scss" />
 

site/src/content/docs/components/list-group.mdx

@@ -253,9 +253,7 @@ You can use `.stretched-link` on `<label>`s to make the whole list group item cl
 
 ### Variables
 
-<AddedIn version="5.2.0" />
+<CSSVariables component="List groups" className="list-group" />
-
-As part of Bootstrap’s evolving CSS variables approach, list groups now use local CSS variables on `.list-group` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
 
 <ScssDocs name="list-group-css-vars" file="scss/_list-group.scss" />
 

site/src/content/docs/components/modal.mdx

@@ -725,9 +725,7 @@ Another override is the option to pop up a modal that covers the user viewport,
 
 ### Variables
 
-<AddedIn version="5.2.0" />
+<CSSVariables component="Modals" className="modal" />
-
-As part of Bootstrap’s evolving CSS variables approach, modals now use local CSS variables on `.modal` and `.modal-backdrop` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
 
 <ScssDocs name="modal-css-vars" file="scss/_modal.scss" />
 

site/src/content/docs/components/navbar.mdx

@@ -721,9 +721,7 @@ When using offcanvas in a dark navbar, be aware that you may need to have a dark
 
 ### Variables
 
-<AddedIn version="5.2.0" />
+<CSSVariables component="Navbars" className="navbar" />
-
-As part of Bootstrap’s evolving CSS variables approach, navbars now use local CSS variables on `.navbar` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
 
 <ScssDocs name="navbar-css-vars" file="scss/_navbar.scss" />
 

site/src/content/docs/components/navs-tabs.mdx

@@ -295,9 +295,7 @@ Add dropdown menus with a little extra HTML and the [dropdowns JavaScript plugin
 
 ### Variables
 
-<AddedIn version="5.2.0" />
+<CSSVariables component="Navs" className="nav" />
-
-As part of Bootstrap’s evolving CSS variables approach, navs now use local CSS variables on `.nav`, `.nav-tabs`, and `.nav-pills` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
 
 On the `.nav` base class:
 
@@ -311,8 +309,6 @@ On the `.nav-pills` modifier class:
 
 <ScssDocs name="nav-pills-css-vars" file="scss/_nav.scss" />
 
-<AddedIn version="5.3.0" />
-
 On the `.nav-underline` modifier class:
 
 <ScssDocs name="nav-underline-css-vars" file="scss/_nav.scss" />

site/src/content/docs/components/offcanvas.mdx

@@ -139,8 +139,6 @@ Change the appearance of offcanvases with utilities to better match them to diff
 
 ## Responsive
 
-<AddedIn version="5.2.0" />
-
 Responsive offcanvas classes hide content outside the viewport from a specified breakpoint and down. Above that breakpoint, the contents within will behave as usual. For example, `.offcanvas-lg` hides content in an offcanvas below the `lg` breakpoint, but shows the content above the `lg` breakpoint. Responsive offcanvas classes are available for each breakpoint.
 
 - `.offcanvas`
@@ -221,9 +219,7 @@ Since the offcanvas panel is conceptually a modal dialog, be sure to add `aria-l
 
 ### Variables
 
-<AddedIn version="5.2.0" />
+<CSSVariables component="Offcanvas" className="offcanvas" />
-
-As part of Bootstrap’s evolving CSS variables approach, offcanvas now uses local CSS variables on `.offcanvas` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
 
 <ScssDocs name="offcanvas-css-vars" file="scss/_offcanvas.scss" />
 

site/src/content/docs/components/pagination.mdx

@@ -156,9 +156,7 @@ Or with `.justify-content-end`:
 
 ### Variables
 
-<AddedIn version="5.2.0" />
+<CSSVariables component="Pagination" className="pagination" />
-
-As part of Bootstrap’s evolving CSS variables approach, pagination now uses local CSS variables on `.pagination` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
 
 <ScssDocs name="pagination-css-vars" file="scss/_pagination.scss" />
 

site/src/content/docs/components/placeholders.mdx

@@ -2,8 +2,6 @@
 title: Placeholders
 description: Use loading placeholders (skeleton loaders) for your components or pages to indicate something may still be loading.
 toc: true
-added:
-  version: "5.1"
 ---
 
 import { getData } from '@libs/data'

site/src/content/docs/components/popovers.mdx

@@ -81,8 +81,6 @@ const popover = new bootstrap.Popover('.example-popover', {
 
 ### Custom popovers
 
-<AddedIn version="5.2.0" />
-
 You can customize the appearance of popovers using [CSS variables](#variables). We set a custom class with `data-bs-custom-class="custom-popover"` to scope our custom appearance and use it to override some of the local CSS variables.
 
 <ScssDocs name="custom-popovers" file="site/src/scss/_component-examples.scss" />
@@ -125,9 +123,7 @@ For disabled popover triggers, you may also prefer `data-bs-trigger="hover focus
 
 ### Variables
 
-<AddedIn version="5.2.0" />
+<CSSVariables component="Popovers" className="popover" />
-
-As part of Bootstrap’s evolving CSS variables approach, popovers now use local CSS variables on `.popover` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
 
 <ScssDocs name="popover-css-vars" file="scss/_popover.scss" />
 

site/src/content/docs/components/progress.mdx

@@ -153,9 +153,7 @@ The striped gradient can also be animated. Add `.progress-bar-animated` to `.pro
 
 ### Variables
 
-<AddedIn version="5.2.0" />
+<CSSVariables component="Progress" className="progress" />
-
-As part of Bootstrap’s evolving CSS variables approach, progress bars now use local CSS variables on `.progress` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
 
 <ScssDocs name="progress-css-vars" file="scss/_progress.scss" />
 

site/src/content/docs/components/spinners.mdx

@@ -139,9 +139,7 @@ Use spinners within buttons to indicate an action is currently processing or tak
 
 ### Variables
 
-<AddedIn version="5.2.0" />
+<CSSVariables component="Spinners" className="spinner-{border|grow}" />
-
-As part of Bootstrap’s evolving CSS variables approach, spinners now use local CSS variables on `.spinner-border` and `.spinner-grow` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
 
 Border spinner variables:
 

site/src/content/docs/components/toasts.mdx

@@ -294,9 +294,7 @@ While technically it’s possible to add focusable/actionable controls (such as
 
 ### Variables
 
-<AddedIn version="5.2.0" />
+<CSSVariables component="Toasts" className="toast" />
-
-As part of Bootstrap’s evolving CSS variables approach, toasts now use local CSS variables on `.toast` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
 
 <ScssDocs name="toast-css-vars" file="scss/_toasts.scss" />
 

site/src/content/docs/components/tooltips.mdx

@@ -45,8 +45,6 @@ Hover over the links below to see tooltips:
 
 ### Custom tooltips
 
-<AddedIn version="5.2.0" />
-
 You can customize the appearance of tooltips using [CSS variables](#variables). We set a custom class with `data-bs-custom-class="custom-tooltip"` to scope our custom appearance and use it to override a local CSS variable.
 
 <ScssDocs name="custom-tooltip" file="site/src/scss/_component-examples.scss" />
@@ -108,9 +106,7 @@ With an SVG:
 
 ### Variables
 
-<AddedIn version="5.2.0" />
+<CSSVariables component="Tooltips" className="tooltip" />
-
-As part of Bootstrap’s evolving CSS variables approach, tooltips now use local CSS variables on `.tooltip` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
 
 <ScssDocs name="tooltip-css-vars" file="scss/_tooltip.scss" />
 

site/src/content/docs/content/reboot.mdx

@@ -18,8 +18,6 @@ Here are our guidelines and reasons for choosing what to override in Reboot:
 
 ## CSS variables
 
-<AddedIn version="5.2.0"/>
-
 With v5.1.1, we standardized our required `@import`s across all our CSS bundles (including `bootstrap.css`, `bootstrap-reboot.css`, and `bootstrap-grid.css`) to include `_root.scss`. This adds `:root` level CSS variables to all bundles, regardless of how many of them are used in that bundle. Ultimately Bootstrap 5 will continue to see more [CSS variables]([[docsref:/customize/css-variables]]) added over time, in order to provide more real-time customization without the need to always recompile Sass. Our approach is to take our source Sass variables and transform them into CSS variables. That way, even if you don’t use CSS variables, you still have all the power of Sass. **This is still in-progress and will take time to fully implement.**
 
 For example, consider these `:root` CSS variables for common `<body>` styles:

site/src/content/docs/customize/color-modes.mdx

@@ -2,8 +2,6 @@
 title: Color modes
 description: Bootstrap now supports color modes, or themes, as of v5.3.0. Explore our default light color mode and the new dark mode, or create your own using our styles as your template.
 toc: true
-added:
-  version: "5.3"
 ---
 
 import { getDocsRelativePath } from '@libs/path'

site/src/content/docs/customize/color.mdx

@@ -9,8 +9,6 @@ import { getSequence } from '@libs/utils'
 
 ## Colors
 
-<AddedIn version="5.3.0" />
-
 Bootstrap’s color palette has continued to expand and become more nuanced in v5.3.0. We’ve added new variables for `secondary` and `tertiary` text and background colors, plus `{color}-bg-subtle`, `{color}-border-subtle`, and `{color}-text-emphasis` for our theme colors. These new colors are available through Sass and CSS variables (but not our color maps or utility classes) with the express goal of making it easier to customize across multiple colors modes like light and dark. These new variables are globally set on `:root` and are adapted for our new dark color mode while our original theme colors remain unchanged.
 
 Colors ending in `-rgb` provide the `red, green, blue` values for use in `rgb()` and `rgba()` color modes. For example, `rgba(var(--bs-secondary-bg-rgb), .5)`.
@@ -470,8 +468,6 @@ Here’s how you can use these in your Sass:
 
 ## Generating utilities
 
-<AddedIn version="5.1.0"/>
-
 Bootstrap doesn’t include `color` and `background-color` utilities for every color variable, but you can generate these yourself with our [utility API]([[docsref:/utilities/api]]) and our extended Sass maps added in v5.1.0.
 
 1. To start, make sure you’ve imported our functions, variables, mixins, and utilities.

site/src/content/docs/customize/css-variables.mdx

@@ -53,8 +53,6 @@ a {
 
 ## Focus variables
 
-<AddedIn version="5.3.0"/>
-
 Bootstrap provides custom `:focus` styles using a combination of Sass and CSS variables that can be optionally added to specific components and elements. We do not yet globally override all `:focus` styles.
 
 In our Sass, we set default values that can be customized before compiling.

site/src/content/docs/forms/validation.mdx

@@ -339,8 +339,6 @@ If your form layout allows it, you can swap the `.{valid|invalid}-feedback` clas
 
 ### Variables
 
-<AddedIn version="5.3.0"/>
-
 As part of Bootstrap’s evolving CSS variables approach, forms now use local CSS variables for validation for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
 
 <ScssDocs name="root-form-validation-variables" file="scss/_root.scss" />

site/src/content/docs/getting-started/contribute.mdx

@@ -3,9 +3,6 @@ title: Contribute
 description: Help develop Bootstrap with our documentation build scripts and tests.
 toc: true
 aliases: "/docs/[[config:docs_version]]/getting-started/build-tools/"
-added:
-  show_badge: false
-  version: "5.1"
 ---
 ## Tooling setup
 

site/src/content/docs/getting-started/vite.mdx

@@ -3,9 +3,6 @@ title: Bootstrap and Vite
 description: The official guide for how to include and bundle Bootstrap’s CSS and JavaScript in your project using Vite.
 toc: true
 thumbnail: guides/bootstrap-vite@2x.png
-added:
-  show_badge: false
-  version: "5.2"
 ---
 
 <img class="d-block mx-auto mb-4 img-fluid rounded-3" srcset="/docs/[[config:docs_version]]/assets/img/guides/bootstrap-vite.png, /docs/[[config:docs_version]]/assets/img/guides/bootstrap-vite@2x.png 2x" src="/docs/[[config:docs_version]]/assets/img/guides/bootstrap-vite.png" width="800" height="400" alt="" />

site/src/content/docs/helpers/color-background.mdx

@@ -2,8 +2,6 @@
 title: Color and background
 description: Set a background color with contrasting foreground color.
 toc: true
-added:
-  version: "5.2"
 ---
 
 import { getData } from '@libs/data'

site/src/content/docs/helpers/colored-links.mdx

@@ -23,8 +23,6 @@ You can use the `.link-*` classes to colorize links. Unlike the [`.text-*` class
 
 ## Link utilities
 
-<AddedIn version="5.3.0"/>
-
 Colored links can also be modified by our [link utilities]([[docsref:/utilities/link/]]).
 
 <Example code={[

site/src/content/docs/helpers/focus-ring.mdx

@@ -2,8 +2,6 @@
 title: Focus ring
 description: Utility classes that allows you to add and modify custom focus ring styles to elements and components.
 toc: true
-added:
-  version: "5.3"
 ---
 
 import { getData } from '@libs/data'

site/src/content/docs/helpers/icon-link.mdx

@@ -2,8 +2,6 @@
 title: Icon link
 description: Quickly create stylized hyperlinks with Bootstrap Icons or other icons.
 toc: true
-added:
-  version: "5.3"
 ---
 
 The icon link helper component modifies our default link styles to enhance their appearance and quickly align any pairing of icon and text. Alignment is set via inline flexbox styling and a default `gap` value. We stylize the underline with a custom offset and color. Icons are automatically sized to `1em` to best match their associated text’s `font-size`.

site/src/content/docs/helpers/stacks.mdx

@@ -2,8 +2,6 @@
 title: Stacks
 description: Shorthand helpers that build on top of our flexbox utilities to make component layout faster and easier than ever.
 toc: true
-added:
-  version: "5.1"
 ---
 
 Stacks offer a shortcut for applying a number of flexbox properties to quickly and easily create layouts in Bootstrap. All credit for the concept and implementation goes to the open source [Pylon project](https://almonk.github.io/pylon/).

site/src/content/docs/helpers/vertical-rule.mdx

@@ -2,8 +2,6 @@
 title: Vertical rule
 description: Use the custom vertical rule helper to create vertical dividers like the `<hr>` element.
 toc: true
-added:
-  version: "5.1"
 ---
 
 ## How it works

site/src/content/docs/layout/css-grid.mdx

@@ -2,8 +2,6 @@
 title: CSS Grid
 description: Learn how to enable, use, and customize our alternate layout system built on CSS Grid with examples and code snippets.
 toc: true
-added:
-  version: "5.1"
 ---
 
 Bootstrap’s default grid system represents the culmination of over a decade of CSS layout techniques, tried and tested by millions of people. But, it was also created without many of the modern CSS features and techniques we’re seeing in browsers like the new CSS Grid.

site/src/content/docs/utilities/background.mdx

@@ -42,8 +42,6 @@ Do you need a gradient in your custom CSS? Just add `background-image: var(--bs-
 
 ## Opacity
 
-<AddedIn version="5.1.0" />
-
 As of v5.1.0, `background-color` utilities are generated with Sass using CSS variables. This allows for real-time color changes without compilation and dynamic alpha transparency changes.
 
 ### How it works

site/src/content/docs/utilities/borders.mdx

@@ -62,8 +62,6 @@ Or modify the default `border-color` of a component:
 
 ## Opacity
 
-<AddedIn version="5.2.0" />
-
 Bootstrap `border-{color}` utilities are generated with Sass using CSS variables. This allows for real-time color changes without compilation and dynamic alpha transparency changes.
 
 ### How it works
@@ -135,8 +133,6 @@ Use the scaling classes for larger or smaller rounded corners. Sizes range from
 
 ### Variables
 
-<AddedIn version="5.2.0" />
-
 <ScssDocs name="root-border-var" file="scss/_root.scss" />
 
 ### Sass variables

site/src/content/docs/utilities/colors.mdx

@@ -31,8 +31,6 @@ Color utilities like `.text-*` that generated from our original `$theme-colors`
 
 ## Opacity
 
-<AddedIn version="5.1.0" />
-
 As of v5.1.0, text color utilities are generated with Sass using CSS variables. This allows for real-time color changes without compilation and dynamic alpha transparency changes.
 
 ### How it works

site/src/content/docs/utilities/link.mdx

@@ -2,8 +2,6 @@
 title: Link
 description: Link utilities are used to stylize your anchors to adjust their color, opacity, underline offset, underline color, and more.
 toc: true
-added:
-  version: "5.3"
 ---
 
 import { getData } from '@libs/data'

site/src/content/docs/utilities/object-fit.mdx

@@ -2,8 +2,6 @@
 title: Object fit
 description: Use the object fit utilities to modify how the content of a <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Replaced_element" target="_blank" rel="noopener noreferrer">replaced element</a>, such as an `<img>` or `<video>`, should be resized to fit its container.
 toc: true
-added:
-  version: "5.3"
 ---
 
 ## How it works

site/src/content/docs/utilities/opacity.mdx

@@ -1,8 +1,6 @@
 ---
 title: Opacity
 description: Control the opacity of elements.
-added:
-  version: "5.1"
 ---
 
 The `opacity` property sets the opacity level for an element. The opacity level describes the transparency level, where `1` is not transparent at all, `.5` is 50% visible, and `0` is completely transparent.

site/src/content/docs/utilities/z-index.mdx

@@ -2,8 +2,6 @@
 title: Z-index
 description: Use our low-level `z-index` utilities to quickly change the stack level of an element or component.
 toc: true
-added:
-  version: "5.3"
 ---
 
 ## Example

site/src/types/auto-import.d.ts

@@ -8,6 +8,7 @@
 export declare global {
   export const AddedIn: typeof import('@shortcodes/AddedIn.astro').default
   export const BsTable: typeof import('@shortcodes/BsTable.astro').default
+  export const CSSVariables: typeof import('@shortcodes/CSSVariables.astro').default
   export const Callout: typeof import('@shortcodes/Callout.astro').default
   export const CalloutDeprecatedDarkVariants: typeof import('@shortcodes/CalloutDeprecatedDarkVariants.astro').default
   export const Code: typeof import('@shortcodes/Code.astro').default