v6: Add reference tables to utilities docs, add community links to some pages (MDN, CSS Tricks) (#41749)

* wip

* improve

* Add more utility refs

* Remove important flag from the utilities

* update

* Start on helpers

* fixes

* fix links

.cspell.json

@@ -29,6 +29,7 @@
     "Crossfade",
     "crossfading",
     "cssgrid",
+    "csstricks",
     "Csvg",
     "Datalists",
     "Deque",

scss/_config.scss

@@ -19,7 +19,7 @@ $enable-rfs:                  true !default;
 $enable-validation-icons:     true !default;
 $enable-negative-margins:     false !default;
 $enable-deprecation-messages: true !default;
-$enable-important-utilities:  true !default;
+$enable-important-utilities:  false !default;
 
 $enable-dark-mode:            true !default;
 $color-mode-type:             data !default; // `data` or `media-query`

scss/_root.scss

@@ -158,14 +158,16 @@
   --#{$prefix}border-style: #{$border-style};
   --#{$prefix}border-color: #{$border-color};
   --#{$prefix}border-color-translucent: #{$border-color-translucent};
+  // scss-docs-end root-border-var
 
+  // scss-docs-start root-border-radius-var
   --#{$prefix}border-radius: #{$border-radius};
   --#{$prefix}border-radius-sm: #{$border-radius-sm};
   --#{$prefix}border-radius-lg: #{$border-radius-lg};
   --#{$prefix}border-radius-xl: #{$border-radius-xl};
   --#{$prefix}border-radius-xxl: #{$border-radius-xxl};
   --#{$prefix}border-radius-pill: #{$border-radius-pill};
-  // scss-docs-end root-border-var
+  // scss-docs-end root-border-radius-var
 
   --#{$prefix}box-shadow: #{$box-shadow};
   --#{$prefix}box-shadow-sm: #{$box-shadow-sm};

site/data/sidebar.yml

@@ -119,7 +119,8 @@
     - title: API
     - title: Aspect ratio
     - title: Background
-    - title: Borders
+    - title: Border
+    - title: Border radius
     - title: Colors
     - title: Display
     - title: Flex

site/src/components/ReferenceTable.astro

@@ -0,0 +1,108 @@
+---
+interface ReferenceItem {
+  class: string;
+  styles: string | string[] | Record<string, string>;
+  [key: string]: any; // Allow additional properties
+}
+
+interface Props {
+  className?: string;
+  columns?: Array<{ label: string; key: string }>;
+  data?: Array<any>;
+  reference?: Array<ReferenceItem>; // Direct prop for reference data
+}
+
+const {
+  className = "table reference-table",
+  columns,
+  data,
+  reference
+} = Astro.props;
+
+// Use explicit reference prop or data prop
+const referenceData = reference || data || [];
+
+// If no explicit columns provided, infer from the first data item
+const inferredColumns = columns || (() => {
+  if (referenceData.length === 0) {
+    return [
+      { label: 'Class', key: 'class' },
+      { label: 'Styles', key: 'styles' }
+    ];
+  }
+
+  const firstItem = referenceData[0];
+  return Object.keys(firstItem).map(key => ({
+    label: key.charAt(0).toUpperCase() + key.slice(1), // Capitalize first letter
+    key: key
+  }));
+})();
+
+// Transform frontmatter format to table format
+const tableData = referenceData.map((item: ReferenceItem) => {
+  const transformedItem: Record<string, any> = {};
+
+  inferredColumns.forEach(column => {
+    const key = column.key;
+    let value = item[key];
+
+    if (key === 'class' && typeof value === 'string' && !value.startsWith('.')) {
+      value = `.${value}`;
+    }
+
+    if (key === 'styles') {
+      if (typeof value === 'string') {
+        transformedItem[key] = value;
+      } else if (typeof value === 'object' && !Array.isArray(value)) {
+        // Handle object syntax: { prop: value, prop2: value2 }
+        transformedItem[key] = Object.entries(value)
+          .map(([prop, val]) => `${prop}: ${val};`)
+          .join('<br/>');
+      } else if (Array.isArray(value)) {
+        transformedItem[key] = value.map((style: any) => {
+          if (typeof style === 'string') {
+            return style.includes(':') ? style + (style.endsWith(';') ? '' : ';') : style;
+          }
+          if (typeof style === 'object') {
+            return Object.entries(style).map(([prop, val]) => `${prop}: ${val};`).join(' ');
+          }
+          return style;
+        }).join('<br/>');
+      } else {
+        transformedItem[key] = value || '';
+      }
+    } else {
+      transformedItem[key] = value;
+    }
+  });
+
+  return transformedItem;
+});
+---
+
+<div class="table-responsive bd-reference-table">
+  <table class={className}>
+    <thead>
+      <tr>
+        {inferredColumns.map(column => (
+          <th scope="col">{column.label}</th>
+        ))}
+      </tr>
+    </thead>
+    <tbody>
+      {tableData.map((row: any) => (
+        <tr>
+          {inferredColumns.map(column => (
+            <td>
+              {column.key === 'styles' ? (
+                <Fragment set:html={row[column.key]} />
+              ) : (
+                row[column.key]
+              )}
+            </td>
+          ))}
+        </tr>
+      ))}
+    </tbody>
+  </table>
+</div>

site/src/components/icons/CssTricksIcon.astro

@@ -0,0 +1,19 @@
+---
+import type { SvgIconProps } from '@libs/icon'
+
+type Props = SvgIconProps
+
+const { class: className, height, width } = Astro.props
+---
+
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 362.62 388.52"
+  role="img"
+  class={className}
+  height={height}
+  width={width}
+>
+  <title>CSS-Tricks</title>
+  <path d="M156.58,239l-88.3,64.75c-10.59,7.06-18.84,11.77-29.43,11.77-21.19,0-38.85-18.84-38.85-40C0,257.83,14.13,244.88,27.08,239l103.6-44.74L27.08,148.34C13,142.46,0,129.51,0,111.85,0,90.66,18.84,73,40,73c10.6,0,17.66,3.53,28.25,11.77l88.3,64.75L144.81,44.74C141.28,20,157.76,0,181.31,0s40,18.84,36.5,43.56L206,149.52l88.3-64.75C304.93,76.53,313.17,73,323.77,73a39.2,39.2,0,0,1,38.85,38.85c0,18.84-12.95,30.61-27.08,36.5L231.93,194.26,335.54,239c14.13,5.88,27.08,18.83,27.08,37.67,0,21.19-18.84,38.85-40,38.85-9.42,0-17.66-4.71-28.26-11.77L206,239l11.77,104.78c3.53,24.72-12.95,44.74-36.5,44.74s-40-18.84-36.5-43.56Z"></path>
+</svg>

site/src/components/icons/MdnIcon.astro

@@ -0,0 +1,17 @@
+---
+import type { SvgIconProps } from '@libs/icon'
+type Props = SvgIconProps
+const { class: className, height, width } = Astro.props
+---
+
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 16 16"
+  role="img"
+  class={className}
+  height={height}
+  width={width}
+>
+  <title>MDN</title>
+  <path d="M6.359.734 1.846 15.266H0L4.497.734h1.862ZM8 .734v14.532H6.359V.734H8ZM16 .734v14.532h-1.641V.734H16ZM14.359.734 9.862 15.266H8.016L12.513.734h1.846Z"></path>
+</svg>

site/src/content/config.ts

@@ -8,6 +8,15 @@ const docsSchema = z.object({
     })
     .optional(),
   aliases: z.string().or(z.string().array()).optional(),
+  csstricks: z
+    .union([
+      z.string(),
+      z.object({
+        url: z.string(),
+        label: z.string().optional()
+      })
+    ])
+    .optional(),
   description: z.string(),
   direction: z.literal('rtl').optional(),
   extra_js: z
@@ -17,6 +26,15 @@ const docsSchema = z.object({
     })
     .array()
     .optional(),
+  mdn: z.string().optional(),
+  reference: z
+    .object({
+      class: z.string(),
+      description: z.string().optional(),
+      styles: z.union([z.string(), z.string().array(), z.record(z.string())]).optional()
+    })
+    .array()
+    .optional(),
   sections: z
     .object({
       description: z.string(),

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

@@ -393,7 +393,7 @@ Set a `background-color` with contrasting foreground `color` with [our `.text-bg
 
 ### Border
 
-Use [border utilities]([[docsref:/utilities/borders]]) to change just the `border-color` of a card. Note that you can put `.text-{color}` classes on the parent `.card` or a subset of the card’s contents as shown below.
+Use [border utilities]([[docsref:/utilities/border]]) to change just the `border-color` of a card. Note that you can put `.text-{color}` classes on the parent `.card` or a subset of the card’s contents as shown below.
 
 <Example code={getData('theme-colors').map((themeColor) => `<div class="card border-${themeColor.name} mb-3" style="max-width: 18rem;">
     <div class="card-header">Header</div>

site/src/content/docs/content/images.mdx

@@ -12,7 +12,7 @@ Images in Bootstrap are made responsive with `.img-fluid`. This applies `max-wid
 
 ## Image thumbnails
 
-In addition to our [border-radius utilities]([[docsref:/utilities/borders]]), you can use `.img-thumbnail` to give an image a rounded 1px border appearance.
+In addition to our [border-radius utilities]([[docsref:/utilities/border]]), you can use `.img-thumbnail` to give an image a rounded 1px border appearance.
 
 <Example code={`<Placeholder width="200" height="200" class="img-thumbnail" title="A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera" />`} />
 

site/src/content/docs/content/tables.mdx

@@ -237,7 +237,7 @@ Add `.table-bordered` for borders on all sides of the table and cells.
 
 <Table class="table table-bordered" />
 
-[Border color utilities]([[docsref:/utilities/borders#border-color]]) can be added to change colors:
+[Border color utilities]([[docsref:/utilities/border#border-color]]) can be added to change colors:
 
 <Table class="table table-bordered border-primary" />
 

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

@@ -2,6 +2,15 @@
 title: Position
 description: Use these helpers for quickly configuring the position of an element.
 toc: true
+reference:
+  - class: 'fixed-top'
+    description: 'Fix an element to the top of the viewport.'
+  - class: 'fixed-bottom'
+    description: 'Fix an element to the bottom of the viewport.'
+  - class: '.sticky{-$infix}-top'
+    description: 'Responsively sticky an element to the top of the viewport.'
+  - class: '.sticky{-$infix}-bottom'
+    description: 'Responsively sticky an element to the bottom of the viewport.'
 ---
 
 ## Fixed top

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

@@ -2,6 +2,9 @@
 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
+csstricks:
+  url: https://css-tricks.com/snippets/css/complete-guide-grid/
+  label: CSS Grid Guide
 ---
 
 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/layout/grid.mdx

@@ -2,6 +2,9 @@
 title: Grid system
 description: Use our powerful mobile-first flexbox grid to build layouts of all shapes and sizes thanks to a twelve column system, six default responsive tiers, Sass variables and mixins, and dozens of predefined classes.
 toc: true
+csstricks:
+  url: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
+  label: Flexbox Guide
 ---
 
 ## Example

site/src/content/docs/migration.mdx

@@ -307,7 +307,7 @@ Your custom Bootstrap CSS builds should now look something like this with a sepa
 ### New utilities
 
 - Expanded [`font-weight` utilities]([[docsref:/utilities/text#font-weight-and-italics]]) to include `.fw-semibold` for semibold fonts.
-- Expanded [`border-radius` utilities]([[docsref:/utilities/borders#sizes]]) to include two new sizes, `.rounded-4` and `.rounded-5`, for more options.
+- Expanded [`border-radius` utilities]([[docsref:/utilities/border-radius#sizes]]) to include two new sizes, `.rounded-4` and `.rounded-5`, for more options.
 
 ### Additional changes
 
@@ -685,7 +685,7 @@ Want more information? [Read the v5.1.0 blog post.](https://blog.getbootstrap.co
 
 - Added new `.translate-middle-x` & `.translate-middle-y` utilities to horizontally or vertically center absolute/fixed positioned elements.
 
-- Added new [`border-width` utilities]([[docsref:/utilities/borders#border-width]]).
+- Added new [`border-width` utilities]([[docsref:/utilities/border#border-width]]).
 
 - <span class="badge text-bg-danger">Breaking</span> Renamed `.text-monospace` to `.font-monospace`.
 

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

@@ -70,9 +70,9 @@ $utilities: (
 Output:
 
 ```css
-.text-decoration-none { text-decoration: none !important; }
+.text-decoration-none { text-decoration: none; }
-.text-decoration-underline { text-decoration: underline !important; }
+.text-decoration-underline { text-decoration: underline; }
-.text-decoration-line-through { text-decoration: line-through !important; }
+.text-decoration-line-through { text-decoration: line-through; }
 ```
 
 ### Values
@@ -126,11 +126,11 @@ $utilities: (
 Output:
 
 ```css
-.o-0 { opacity: 0 !important; }
+.o-0 { opacity: 0; }
-.o-25 { opacity: .25 !important; }
+.o-25 { opacity: .25; }
-.o-50 { opacity: .5 !important; }
+.o-50 { opacity: .5; }
-.o-75 { opacity: .75 !important; }
+.o-75 { opacity: .75; }
-.o-100 { opacity: 1 !important; }
+.o-100 { opacity: 1; }
 ```
 
 If `class: null`, generates classes for each of the `values` keys:
@@ -151,8 +151,8 @@ $utilities: (
 Output:
 
 ```css
-.visible { visibility: visible !important; }
+.visible { visibility: visible; }
-.invisible { visibility: hidden !important; }
+.invisible { visibility: hidden; }
 ```
 
 ### CSS variable utilities
@@ -213,7 +213,7 @@ Output:
 ```css
 .bg-primary {
   --bs-bg-opacity: 1;
-  background-color: rgba(var(--bs-primary-rgb), var(--bs-bg-opacity)) !important;
+  background-color: rgba(var(--bs-primary-rgb), var(--bs-bg-opacity));
 }
 ```
 
@@ -243,11 +243,11 @@ $utilities: (
 Output:
 
 ```css
-.opacity-0-hover:hover { opacity: 0 !important; }
+.opacity-0-hover:hover { opacity: 0; }
-.opacity-25-hover:hover { opacity: .25 !important; }
+.opacity-25-hover:hover { opacity: .25; }
-.opacity-50-hover:hover { opacity: .5 !important; }
+.opacity-50-hover:hover { opacity: .5; }
-.opacity-75-hover:hover { opacity: .75 !important; }
+.opacity-75-hover:hover { opacity: .75; }
-.opacity-100-hover:hover { opacity: 1 !important; }
+.opacity-100-hover:hover { opacity: 1; }
 ```
 
 ### Responsive
@@ -273,50 +273,50 @@ $utilities: (
 Output:
 
 ```css
-.opacity-0 { opacity: 0 !important; }
+.opacity-0 { opacity: 0; }
-.opacity-25 { opacity: .25 !important; }
+.opacity-25 { opacity: .25; }
-.opacity-50 { opacity: .5 !important; }
+.opacity-50 { opacity: .5; }
-.opacity-75 { opacity: .75 !important; }
+.opacity-75 { opacity: .75; }
-.opacity-100 { opacity: 1 !important; }
+.opacity-100 { opacity: 1; }
 
 @media (min-width: 576px) {
-  .opacity-sm-0 { opacity: 0 !important; }
+  .opacity-sm-0 { opacity: 0; }
-  .opacity-sm-25 { opacity: .25 !important; }
+  .opacity-sm-25 { opacity: .25; }
-  .opacity-sm-50 { opacity: .5 !important; }
+  .opacity-sm-50 { opacity: .5; }
-  .opacity-sm-75 { opacity: .75 !important; }
+  .opacity-sm-75 { opacity: .75; }
-  .opacity-sm-100 { opacity: 1 !important; }
+  .opacity-sm-100 { opacity: 1; }
 }
 
 @media (min-width: 768px) {
-  .opacity-md-0 { opacity: 0 !important; }
+  .opacity-md-0 { opacity: 0; }
-  .opacity-md-25 { opacity: .25 !important; }
+  .opacity-md-25 { opacity: .25; }
-  .opacity-md-50 { opacity: .5 !important; }
+  .opacity-md-50 { opacity: .5; }
-  .opacity-md-75 { opacity: .75 !important; }
+  .opacity-md-75 { opacity: .75; }
-  .opacity-md-100 { opacity: 1 !important; }
+  .opacity-md-100 { opacity: 1; }
 }
 
 @media (min-width: 992px) {
-  .opacity-lg-0 { opacity: 0 !important; }
+  .opacity-lg-0 { opacity: 0; }
-  .opacity-lg-25 { opacity: .25 !important; }
+  .opacity-lg-25 { opacity: .25; }
-  .opacity-lg-50 { opacity: .5 !important; }
+  .opacity-lg-50 { opacity: .5; }
-  .opacity-lg-75 { opacity: .75 !important; }
+  .opacity-lg-75 { opacity: .75; }
-  .opacity-lg-100 { opacity: 1 !important; }
+  .opacity-lg-100 { opacity: 1; }
 }
 
 @media (min-width: 1200px) {
-  .opacity-xl-0 { opacity: 0 !important; }
+  .opacity-xl-0 { opacity: 0; }
-  .opacity-xl-25 { opacity: .25 !important; }
+  .opacity-xl-25 { opacity: .25; }
-  .opacity-xl-50 { opacity: .5 !important; }
+  .opacity-xl-50 { opacity: .5; }
-  .opacity-xl-75 { opacity: .75 !important; }
+  .opacity-xl-75 { opacity: .75; }
-  .opacity-xl-100 { opacity: 1 !important; }
+  .opacity-xl-100 { opacity: 1; }
 }
 
 @media (min-width: 1400px) {
-  .opacity-xxl-0 { opacity: 0 !important; }
+  .opacity-xxl-0 { opacity: 0; }
-  .opacity-xxl-25 { opacity: .25 !important; }
+  .opacity-xxl-25 { opacity: .25; }
-  .opacity-xxl-50 { opacity: .5 !important; }
+  .opacity-xxl-50 { opacity: .5; }
-  .opacity-xxl-75 { opacity: .75 !important; }
+  .opacity-xxl-75 { opacity: .75; }
-  .opacity-xxl-100 { opacity: 1 !important; }
+  .opacity-xxl-100 { opacity: 1; }
 }
 ```
 
@@ -343,24 +343,28 @@ $utilities: (
 Output:
 
 ```css
-.opacity-0 { opacity: 0 !important; }
+.opacity-0 { opacity: 0; }
-.opacity-25 { opacity: .25 !important; }
+.opacity-25 { opacity: .25; }
-.opacity-50 { opacity: .5 !important; }
+.opacity-50 { opacity: .5; }
-.opacity-75 { opacity: .75 !important; }
+.opacity-75 { opacity: .75; }
-.opacity-100 { opacity: 1 !important; }
+.opacity-100 { opacity: 1; }
 
 @media print {
-  .opacity-print-0 { opacity: 0 !important; }
+  .opacity-print-0 { opacity: 0; }
-  .opacity-print-25 { opacity: .25 !important; }
+  .opacity-print-25 { opacity: .25; }
-  .opacity-print-50 { opacity: .5 !important; }
+  .opacity-print-50 { opacity: .5; }
-  .opacity-print-75 { opacity: .75 !important; }
+  .opacity-print-75 { opacity: .75; }
-  .opacity-print-100 { opacity: 1 !important; }
+  .opacity-print-100 { opacity: 1; }
 }
 ```
 
 ## Importance
 
-All utilities generated by the API include `!important` to ensure they override components and modifier classes as intended. You can toggle this setting globally with the `$enable-important-utilities` variable (defaults to `true`).
+Utilities generated by the API no longer include `!important` by default in v6. This is because we now use CSS layers to ensure utilities override components and modifier classes as intended. You can toggle this setting globally with the `$enable-important-utilities` variable (defaults to `false`).
+
+```scss
+$enable-important-utilities: true;
+```
 
 ## Using the API
 
@@ -612,8 +616,8 @@ Output:
 ```css
 /* rtl:begin:remove */
 .text-break {
-  word-wrap: break-word !important;
+  word-wrap: break-word;
-  word-break: break-word !important;
+  word-break: break-word;
 }
 /* rtl:end:remove */
 ```

site/src/content/docs/utilities/aspect-ratio.mdx

@@ -2,6 +2,23 @@
 title: Aspect ratio
 description: Make elements maintain specific aspect ratios. Perfect for handling videos, slideshow embeds, and more based on the width of the parent.
 toc: true
+mdn: https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio
+reference:
+  - class: ratio-auto
+    styles:
+      --bs-ratio: 'auto'
+  - class: ratio-1x1
+    styles:
+      --bs-ratio: '1 / 1'
+  - class: ratio-4x3
+    styles:
+      --bs-ratio: '4 / 3'
+  - class: ratio-16x9
+    styles:
+      --bs-ratio: '16 / 9'
+  - class: ratio-21x9
+    styles:
+      --bs-ratio: '21 / 9'
 ---
 
 Use the ratio utility to manage the aspect ratios of content like `<iframe>`s, `<embed>`s, `<video>`s, and `<object>`s. These helpers also can be used on any standard HTML child element (e.g., a `<div>` or `<img>`). Customize the available aspect ratios with the Sass variable or the utility API.

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

@@ -2,6 +2,7 @@
 title: Background
 description: Convey meaning through `background-color` and add decoration with gradients.
 toc: true
+mdn: https://developer.mozilla.org/en-US/docs/Web/CSS/background-color
 ---
 
 import { getData } from '@libs/data'
@@ -51,7 +52,7 @@ Consider our default `.bg-success` utility.
 ```css
 .bg-success {
   --bs-bg-opacity: 1;
-  background-color: rgba(var(--bs-success-rgb), var(--bs-bg-opacity)) !important;
+  background-color: rgba(var(--bs-success-rgb), var(--bs-bg-opacity));
 }
 ```
 

site/src/content/docs/utilities/border-radius.mdx

@@ -0,0 +1,88 @@
+---
+title: Border radius
+description: Use border radius…
+toc: true
+mdn: https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius
+reference:
+  - class: rounded
+    styles:
+      border-radius: 'var(--bs-border-radius)'
+  - class: rounded-top
+    styles:
+      border-top-left-radius: 'var(--bs-border-radius)'
+      border-top-right-radius: 'var(--bs-border-radius)'
+  - class: rounded-end
+    styles:
+      border-bottom-right-radius: 'var(--bs-border-radius)'
+      border-top-right-radius: 'var(--bs-border-radius)'
+  - class: rounded-bottom
+    styles:
+      border-bottom-left-radius: 'var(--bs-border-radius)'
+      border-bottom-right-radius: 'var(--bs-border-radius)'
+  - class: rounded-start
+    styles:
+      border-top-left-radius: 'var(--bs-border-radius)'
+      border-bottom-left-radius: 'var(--bs-border-radius)'
+  - class: rounded-0
+    styles:
+      border-radius: '0'
+  - class: rounded-1
+    styles:
+      border-radius: 'var(--bs-border-radius-sm)'
+  - class: rounded-2
+    styles:
+      border-radius: 'var(--bs-border-radius)'
+---
+
+import { getData } from '@libs/data'
+
+## Radius
+
+Add classes to an element to easily round its corners.
+
+<Example class="bd-example-rounded-utils" code={`<Placeholder width="75" height="75" class="rounded" title="Example rounded image" />
+<Placeholder width="75" height="75" class="rounded-top" title="Example top rounded image" />
+<Placeholder width="75" height="75" class="rounded-end" title="Example right rounded image" />
+<Placeholder width="75" height="75" class="rounded-bottom" title="Example bottom rounded image" />
+<Placeholder width="75" height="75" class="rounded-start" title="Example left rounded image" />`} />
+
+### Sizes
+
+Use the scaling classes for larger or smaller rounded corners. Sizes range from `0` to `5` including `circle` and `pill`, and can be configured by modifying the utilities API.
+
+<Example class="bd-example-rounded-utils" code={`<Placeholder width="75" height="75" class="rounded-0" title="Example non-rounded image" />
+<Placeholder width="75" height="75" class="rounded-1" title="Example small rounded image" />
+<Placeholder width="75" height="75" class="rounded-2" title="Example default rounded image" />
+<Placeholder width="75" height="75" class="rounded-3" title="Example large rounded image" />
+<Placeholder width="75" height="75" class="rounded-4" title="Example larger rounded image" />
+<Placeholder width="75" height="75" class="rounded-5" title="Example extra large rounded image" />
+<Placeholder width="75" height="75" class="rounded-circle" title="Completely round image" />
+<Placeholder width="150" height="75" class="rounded-pill" title="Rounded pill image" />`} />
+
+<Example class="bd-example-rounded-utils" code={`<Placeholder width="75" height="75" class="rounded-bottom-1" title="Example small rounded image" />
+<Placeholder width="75" height="75" class="rounded-start-2" title="Example default left rounded image" />
+<Placeholder width="75" height="75" class="rounded-end-circle" title="Example right completely round image" />
+<Placeholder width="75" height="75" class="rounded-start-pill" title="Example left rounded pill image" />
+<Placeholder width="75" height="75" class="rounded-5 rounded-top-0" title="Example extra large bottom rounded image" />`} />
+
+## CSS
+
+### Variables
+
+<ScssDocs name="root-border-radius-var" file="scss/_root.scss" />
+
+### Sass variables
+
+<ScssDocs name="border-radius-variables" file="scss/_variables.scss" />
+
+### Sass maps
+
+### Sass mixins
+
+<ScssDocs name="border-radius-mixins" file="scss/mixins/_border-radius.scss" />
+
+### Sass utilities API
+
+Border utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]([[docsref:/utilities/api#using-the-api]])
+
+<ScssDocs name="utils-border-radius" file="scss/_utilities.scss" />

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

@@ -2,6 +2,110 @@
 title: Borders
 description: Use border utilities to quickly style the border and border-radius of an element. Great for images, buttons, or any other element.
 toc: true
+alias:
+  - /docs/5.3/utilities/border/
+mdn: https://developer.mozilla.org/en-US/docs/Web/CSS/border
+reference:
+  - class: border
+    styles:
+      border: 'var(--bs-border-width) var(--bs-border-style) var(--bs-border-color)'
+  - class: border-0
+    styles:
+      border: '0'
+  - class: border-top
+    styles:
+      border-block-start: 'var(--bs-border-width) var(--bs-border-style) var(--bs-border-color)'
+  - class: border-top-0
+    styles:
+      border-block-start: '0'
+  - class: border-end
+    styles:
+      border-inline-end: 'var(--bs-border-width) var(--bs-border-style) var(--bs-border-color)'
+  - class: border-end-0
+    styles:
+      border-inline-end: '0'
+  - class: border-bottom
+    styles:
+      border-block-end: 'var(--bs-border-width) var(--bs-border-style) var(--bs-border-color)'
+  - class: border-bottom-0
+    styles:
+      border-block-end: '0'
+  - class: border-start
+    styles:
+      border-inline-start: 'var(--bs-border-width) var(--bs-border-style) var(--bs-border-color)'
+  - class: border-start-0
+    styles:
+      border-inline-start: '0'
+  - class: border-primary
+    styles:
+      --bs-border-opacity: '1'
+      border-color: 'rgba(var(--bs-primary-rgb), var(--bs-border-opacity))'
+  - class: border-secondary
+    styles:
+      --bs-border-opacity: '1'
+      border-color: 'rgba(var(--bs-secondary-rgb), var(--bs-border-opacity))'
+  - class: border-success
+    styles:
+      --bs-border-opacity: '1'
+      border-color: 'rgba(var(--bs-success-rgb), var(--bs-border-opacity))'
+  - class: border-info
+    styles:
+      --bs-border-opacity: '1'
+      border-color: 'rgba(var(--bs-info-rgb), var(--bs-border-opacity))'
+  - class: border-warning
+    styles:
+      --bs-border-opacity: '1'
+      border-color: 'rgba(var(--bs-warning-rgb), var(--bs-border-opacity))'
+  - class: border-danger
+    styles:
+      --bs-border-opacity: '1'
+      border-color: 'rgba(var(--bs-danger-rgb), var(--bs-border-opacity))'
+  - class: border-light
+    styles:
+      --bs-border-opacity: '1'
+      border-color: 'rgba(var(--bs-light-rgb), var(--bs-border-opacity))'
+  - class: border-dark
+    styles:
+      --bs-border-opacity: '1'
+      border-color: 'rgba(var(--bs-dark-rgb), var(--bs-border-opacity))'
+  - class: border-black
+    styles:
+      --bs-border-opacity: '1'
+      border-color: 'rgba(var(--bs-black-rgb), var(--bs-border-opacity))'
+  - class: border-white
+    styles:
+      --bs-border-opacity: '1'
+      border-color: 'rgba(var(--bs-white-rgb), var(--bs-border-opacity))'
+  - class: border-opacity-10
+    styles:
+      --bs-border-opacity: '0.1'
+  - class: border-opacity-25
+    styles:
+      --bs-border-opacity: '0.25'
+  - class: border-opacity-50
+    styles:
+      --bs-border-opacity: '0.5'
+  - class: border-opacity-75
+    styles:
+      --bs-border-opacity: '0.75'
+  - class: border-opacity-100
+    styles:
+      --bs-border-opacity: '1'
+  - class: border-1
+    styles:
+      border-width: '1px'
+  - class: border-2
+    styles:
+      border-width: '2px'
+  - class: border-3
+    styles:
+      border-width: '3px'
+  - class: border-4
+    styles:
+      border-width: '4px'
+  - class: border-5
+    styles:
+      border-width: '5px'
 ---
 
 import { getData } from '@libs/data'
@@ -71,7 +175,7 @@ Consider our default `.border-success` utility.
 ```css
 .border-success {
   --bs-border-opacity: 1;
-  border-color: rgba(var(--bs-success-rgb), var(--bs-border-opacity)) !important;
+  border-color: rgba(var(--bs-success-rgb), var(--bs-border-opacity));
 }
 ```
 
@@ -100,35 +204,6 @@ Or, choose from any of the `.border-opacity` utilities:
 <span class="border border-4"></span>
 <span class="border border-5"></span>`} />
 
-## Radius
-
-Add classes to an element to easily round its corners.
-
-<Example class="bd-example-rounded-utils" code={`<Placeholder width="75" height="75" class="rounded" title="Example rounded image" />
-<Placeholder width="75" height="75" class="rounded-top" title="Example top rounded image" />
-<Placeholder width="75" height="75" class="rounded-end" title="Example right rounded image" />
-<Placeholder width="75" height="75" class="rounded-bottom" title="Example bottom rounded image" />
-<Placeholder width="75" height="75" class="rounded-start" title="Example left rounded image" />`} />
-
-### Sizes
-
-Use the scaling classes for larger or smaller rounded corners. Sizes range from `0` to `5` including `circle` and `pill`, and can be configured by modifying the utilities API.
-
-<Example class="bd-example-rounded-utils" code={`<Placeholder width="75" height="75" class="rounded-0" title="Example non-rounded image" />
-<Placeholder width="75" height="75" class="rounded-1" title="Example small rounded image" />
-<Placeholder width="75" height="75" class="rounded-2" title="Example default rounded image" />
-<Placeholder width="75" height="75" class="rounded-3" title="Example large rounded image" />
-<Placeholder width="75" height="75" class="rounded-4" title="Example larger rounded image" />
-<Placeholder width="75" height="75" class="rounded-5" title="Example extra large rounded image" />
-<Placeholder width="75" height="75" class="rounded-circle" title="Completely round image" />
-<Placeholder width="150" height="75" class="rounded-pill" title="Rounded pill image" />`} />
-
-<Example class="bd-example-rounded-utils" code={`<Placeholder width="75" height="75" class="rounded-bottom-1" title="Example small rounded image" />
-<Placeholder width="75" height="75" class="rounded-start-2" title="Example default left rounded image" />
-<Placeholder width="75" height="75" class="rounded-end-circle" title="Example right completely round image" />
-<Placeholder width="75" height="75" class="rounded-start-pill" title="Example left rounded pill image" />
-<Placeholder width="75" height="75" class="rounded-5 rounded-top-0" title="Example extra large bottom rounded image" />`} />
-
 ## CSS
 
 ### Variables
@@ -139,8 +214,6 @@ Use the scaling classes for larger or smaller rounded corners. Sizes range from
 
 <ScssDocs name="border-variables" file="scss/_variables.scss" />
 
-<ScssDocs name="border-radius-variables" file="scss/_variables.scss" />
-
 Variables for setting `border-color` in `.border-*-subtle` utilities in light and dark mode:
 
 {/* <ScssDocs name="theme-border-subtle-variables" file="scss/_variables.scss" /> */}
@@ -164,5 +237,3 @@ Color mode adaptive border colors are also available as a Sass map:
 Border utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]([[docsref:/utilities/api#using-the-api]])
 
 <ScssDocs name="utils-borders" file="scss/_utilities.scss" />
-
-<ScssDocs name="utils-border-radius" file="scss/_utilities.scss" />

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

@@ -40,7 +40,7 @@ Consider our default `.text-primary` utility.
 ```css
 .text-primary {
   --bs-text-opacity: 1;
-  color: rgba(var(--bs-primary-rgb), var(--bs-text-opacity)) !important;
+  color: rgba(var(--bs-primary-rgb), var(--bs-text-opacity));
 }
 ```
 

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

@@ -2,6 +2,43 @@
 title: Display property
 description: Quickly and responsively toggle the display value of components and more with our display utilities. Includes support for some of the more common values, as well as some extras for controlling display when printing.
 toc: true
+reference:
+  - class: d-none
+    styles:
+      display: 'none'
+  - class: d-inline
+    styles:
+      display: 'inline'
+  - class: d-inline-block
+    styles:
+      display: 'inline-block'
+  - class: d-block
+    styles:
+      display: 'block'
+  - class: d-grid
+    styles:
+      display: 'grid'
+  - class: d-inline-grid
+    styles:
+      display: 'inline-grid'
+  - class: d-table
+    styles:
+      display: 'table'
+  - class: d-table-row
+    styles:
+      display: 'table-row'
+  - class: d-table-cell
+    styles:
+      display: 'table-cell'
+  - class: d-flex
+    styles:
+      display: 'flex'
+  - class: d-inline-flex
+    styles:
+      display: 'inline-flex'
+  - class: d-flow-root
+    styles:
+      display: 'flow-root'
 ---
 
 ## How it works

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

@@ -2,6 +2,10 @@
 title: Flex
 description: Quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more with a full suite of responsive flexbox utilities. For more complex implementations, custom CSS may be necessary.
 toc: true
+mdn: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox
+csstricks:
+  url: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
+  label: Flexbox Guide
 ---
 
 import { getData } from '@libs/data'

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

@@ -2,6 +2,16 @@
 title: Float
 description: Toggle floats on any element, across any breakpoint, using our responsive float utilities.
 toc: true
+reference:
+  - class: float-start
+    styles:
+      float: 'left'
+  - class: float-end
+    styles:
+      float: 'right'
+  - class: float-none
+    styles:
+      float: 'none'
 ---
 
 import { getData } from '@libs/data'

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

@@ -2,6 +2,22 @@
 title: Interactions
 description: Utility classes that change how users interact with contents of a website.
 toc: false
+reference:
+  - class: user-select-all
+    styles:
+      user-select: 'all'
+  - class: user-select-auto
+    styles:
+      user-select: 'auto'
+  - class: user-select-none
+    styles:
+      user-select: 'none'
+  - class: pe-none
+    styles:
+      pointer-events: 'none'
+  - class: pe-auto
+    styles:
+      pointer-events: 'auto'
 ---
 
 ## Text selection

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

@@ -2,6 +2,22 @@
 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
+reference:
+  - class: object-fit-contain
+    styles:
+      object-fit: 'contain'
+  - class: object-fit-cover
+    styles:
+      object-fit: 'cover'
+  - class: object-fit-fill
+    styles:
+      object-fit: 'fill'
+  - class: object-fit-scale
+    styles:
+      object-fit: 'scale-down'
+  - class: object-fit-none
+    styles:
+      object-fit: 'none'
 ---
 
 ## How it works

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

@@ -1,6 +1,22 @@
 ---
 title: Opacity
 description: Control the opacity of elements.
+reference:
+  - class: opacity-0
+    styles:
+      opacity: '0'
+  - class: opacity-25
+    styles:
+      opacity: '0.25'
+  - class: opacity-50
+    styles:
+      opacity: '0.5'
+  - class: opacity-75
+    styles:
+      opacity: '0.75'
+  - class: opacity-100
+    styles:
+      opacity: '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/overflow.mdx

@@ -2,6 +2,43 @@
 title: Overflow
 description: Use these shorthand utilities for quickly configuring how content overflows an element.
 toc: true
+reference:
+  - class: overflow-auto
+    styles:
+      overflow: 'auto'
+  - class: overflow-hidden
+    styles:
+      overflow: 'hidden'
+  - class: overflow-visible
+    styles:
+      overflow: 'visible'
+  - class: overflow-scroll
+    styles:
+      overflow: 'scroll'
+  - class: overflow-x-auto
+    styles:
+      overflow-x: 'auto'
+  - class: overflow-x-hidden
+    styles:
+      overflow-x: 'hidden'
+  - class: overflow-x-visible
+    styles:
+      overflow-x: 'visible'
+  - class: overflow-x-scroll
+    styles:
+      overflow-x: 'scroll'
+  - class: overflow-y-auto
+    styles:
+      overflow-y: 'auto'
+  - class: overflow-y-hidden
+    styles:
+      overflow-y: 'hidden'
+  - class: overflow-y-visible
+    styles:
+      overflow-y: 'visible'
+  - class: overflow-y-scroll
+    styles:
+      overflow-y: 'scroll'
 ---
 
 ## Overflow

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

@@ -2,6 +2,67 @@
 title: Position
 description: Use these shorthand utilities for quickly configuring the position of an element.
 toc: true
+reference:
+  - class: position-static
+    styles:
+      position: 'static'
+  - class: position-relative
+    styles:
+      position: 'relative'
+  - class: position-absolute
+    styles:
+      position: 'absolute'
+  - class: position-fixed
+    styles:
+      position: 'fixed'
+  - class: position-sticky
+    styles:
+      position: 'sticky'
+  - class: top-0
+    styles:
+      top: '0'
+  - class: top-50
+    styles:
+      top: '50%'
+  - class: top-100
+    styles:
+      top: '100%'
+  - class: bottom-0
+    styles:
+      bottom: '0'
+  - class: bottom-50
+    styles:
+      bottom: '50%'
+  - class: bottom-100
+    styles:
+      bottom: '100%'
+  - class: start-0
+    styles:
+      left: '0'
+  - class: start-50
+    styles:
+      left: '50%'
+  - class: start-100
+    styles:
+      left: '100%'
+  - class: end-0
+    styles:
+      right: '0'
+  - class: end-50
+    styles:
+      right: '50%'
+  - class: end-100
+    styles:
+      right: '100%'
+  - class: translate-middle
+    styles:
+      transform: 'translate(-50%, -50%)'
+  - class: translate-middle-x
+    styles:
+      transform: 'translateX(-50%)'
+  - class: translate-middle-y
+    styles:
+      transform: 'translateY(-50%)'
 ---
 
 ## Position values

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

@@ -2,6 +2,19 @@
 title: Shadows
 description: Add or remove shadows to elements with box-shadow utilities.
 toc: true
+reference:
+  - class: shadow-none
+    styles:
+      box-shadow: 'none'
+  - class: shadow-sm
+    styles:
+      box-shadow: 'var(--bs-box-shadow-sm)'
+  - class: shadow
+    styles:
+      box-shadow: 'var(--bs-box-shadow)'
+  - class: shadow-lg
+    styles:
+      box-shadow: 'var(--bs-box-shadow-lg)'
 ---
 
 ## Examples

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

@@ -2,6 +2,85 @@
 title: Sizing
 description: Easily make an element as wide or as tall with our width and height utilities.
 toc: true
+reference:
+  - class: w-25
+    styles:
+      width: '25%'
+  - class: w-50
+    styles:
+      width: '50%'
+  - class: w-75
+    styles:
+      width: '75%'
+  - class: w-100
+    styles:
+      width: '100%'
+  - class: w-auto
+    styles:
+      width: 'auto'
+  - class: w-min
+    styles:
+      width: 'min-content'
+  - class: w-max
+    styles:
+      width: 'max-content'
+  - class: w-fit
+    styles:
+      width: 'fit-content'
+  - class: max-w-100
+    styles:
+      max-width: '100%'
+  - class: min-w-0
+    styles:
+      min-width: '0'
+  - class: min-w-100
+    styles:
+      min-width: '100%'
+  - class: vw-100
+    styles:
+      width: '100vw'
+  - class: min-vw-100
+    styles:
+      min-width: '100vw'
+  - class: h-25
+    styles:
+      height: '25%'
+  - class: h-50
+    styles:
+      height: '50%'
+  - class: h-75
+    styles:
+      height: '75%'
+  - class: h-100
+    styles:
+      height: '100%'
+  - class: h-auto
+    styles:
+      height: 'auto'
+  - class: h-min
+    styles:
+      height: 'min-content'
+  - class: h-max
+    styles:
+      height: 'max-content'
+  - class: h-fit
+    styles:
+      height: 'fit-content'
+  - class: max-h-100
+    styles:
+      max-height: '100%'
+  - class: min-h-0
+    styles:
+      min-height: '0'
+  - class: min-h-100
+    styles:
+      min-height: '100%'
+  - class: vh-100
+    styles:
+      height: '100vh'
+  - class: min-vh-100
+    styles:
+      min-height: '100vh'
 ---
 
 ## Relative to the parent

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

@@ -1,7 +1,105 @@
 ---
 title: Spacing
-description: Bootstrap includes a wide range of shorthand responsive margin, padding, and gap utility classes to modify an element’s appearance.
+description: Bootstrap includes a wide range of shorthand responsive margin, padding, and gap utility classes to modify an element's appearance.
 toc: true
+reference:
+  - class: m-0
+    styles:
+      margin: '0'
+  - class: m-1
+    styles:
+      margin: '0.25rem'
+  - class: m-2
+    styles:
+      margin: '0.5rem'
+  - class: m-3
+    styles:
+      margin: '1rem'
+  - class: m-4
+    styles:
+      margin: '1.5rem'
+  - class: m-5
+    styles:
+      margin: '3rem'
+  - class: m-auto
+    styles:
+      margin: 'auto'
+  - class: mt-0
+    styles:
+      margin-top: '0'
+  - class: me-0
+    styles:
+      margin-right: '0'
+  - class: mb-0
+    styles:
+      margin-bottom: '0'
+  - class: ms-0
+    styles:
+      margin-left: '0'
+  - class: mx-0
+    styles:
+      margin-right: '0'
+      margin-left: '0'
+  - class: my-0
+    styles:
+      margin-top: '0'
+      margin-bottom: '0'
+  - class: p-0
+    styles:
+      padding: '0'
+  - class: p-1
+    styles:
+      padding: '0.25rem'
+  - class: p-2
+    styles:
+      padding: '0.5rem'
+  - class: p-3
+    styles:
+      padding: '1rem'
+  - class: p-4
+    styles:
+      padding: '1.5rem'
+  - class: p-5
+    styles:
+      padding: '3rem'
+  - class: pt-0
+    styles:
+      padding-top: '0'
+  - class: pe-0
+    styles:
+      padding-right: '0'
+  - class: pb-0
+    styles:
+      padding-bottom: '0'
+  - class: ps-0
+    styles:
+      padding-left: '0'
+  - class: px-0
+    styles:
+      padding-right: '0'
+      padding-left: '0'
+  - class: py-0
+    styles:
+      padding-top: '0'
+      padding-bottom: '0'
+  - class: gap-0
+    styles:
+      gap: '0'
+  - class: gap-1
+    styles:
+      gap: '0.25rem'
+  - class: gap-2
+    styles:
+      gap: '0.5rem'
+  - class: gap-3
+    styles:
+      gap: '1rem'
+  - class: gap-4
+    styles:
+      gap: '1.5rem'
+  - class: gap-5
+    styles:
+      gap: '3rem'
 ---
 
 ## Margin and padding
@@ -51,20 +149,20 @@ Here are some representative examples of these classes:
 
 ```scss
 .mt-0 {
-  margin-top: 0 !important;
+  margin-top: 0;
 }
 
 .ms-1 {
-  margin-left: ($spacer * .25) !important;
+  margin-left: ($spacer * .25);
 }
 
 .px-2 {
-  padding-left: ($spacer * .5) !important;
+  padding-left: ($spacer * .5);
-  padding-right: ($spacer * .5) !important;
+  padding-right: ($spacer * .5);
 }
 
 .p-3 {
-  padding: $spacer !important;
+  padding: $spacer;
 }
 ```
 
@@ -90,7 +188,7 @@ The syntax is nearly the same as the default, positive margin utilities, but wit
 
 ```scss
 .mt-n1 {
-  margin-top: -0.25rem !important;
+  margin-top: -0.25rem;
 }
 ```
 

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

@@ -2,6 +2,104 @@
 title: Text
 description: Documentation and examples for common text utilities to control alignment, wrapping, weight, and more.
 toc: true
+reference:
+  - class: text-start
+    styles:
+      text-align: 'left'
+  - class: text-center
+    styles:
+      text-align: 'center'
+  - class: text-end
+    styles:
+      text-align: 'right'
+  - class: text-wrap
+    styles:
+      white-space: 'normal'
+  - class: text-nowrap
+    styles:
+      white-space: 'nowrap'
+  - class: text-break
+    styles:
+      word-wrap: 'break-word'
+      word-break: 'break-word'
+  - class: font-monospace
+    styles:
+      font-family: 'var(--bs-font-monospace)'
+  - class: fs-1
+    styles:
+      font-size: 'calc(1.375rem + 1.5vw)'
+  - class: fs-2
+    styles:
+      font-size: 'calc(1.325rem + 0.9vw)'
+  - class: fs-3
+    styles:
+      font-size: 'calc(1.3rem + 0.6vw)'
+  - class: fs-4
+    styles:
+      font-size: 'calc(1.275rem + 0.3vw)'
+  - class: fs-5
+    styles:
+      font-size: '1.25rem'
+  - class: fs-6
+    styles:
+      font-size: '1rem'
+  - class: fst-italic
+    styles:
+      font-style: 'italic'
+  - class: fst-normal
+    styles:
+      font-style: 'normal'
+  - class: fw-lighter
+    styles:
+      font-weight: 'lighter'
+  - class: fw-light
+    styles:
+      font-weight: '300'
+  - class: fw-normal
+    styles:
+      font-weight: '400'
+  - class: fw-medium
+    styles:
+      font-weight: '500'
+  - class: fw-semibold
+    styles:
+      font-weight: '600'
+  - class: fw-bold
+    styles:
+      font-weight: '700'
+  - class: fw-bolder
+    styles:
+      font-weight: 'bolder'
+  - class: lh-1
+    styles:
+      line-height: '1'
+  - class: lh-sm
+    styles:
+      line-height: '1.25'
+  - class: lh-base
+    styles:
+      line-height: '1.5'
+  - class: lh-lg
+    styles:
+      line-height: '1.75'
+  - class: text-decoration-none
+    styles:
+      text-decoration: 'none'
+  - class: text-decoration-underline
+    styles:
+      text-decoration: 'underline'
+  - class: text-decoration-line-through
+    styles:
+      text-decoration: 'line-through'
+  - class: text-lowercase
+    styles:
+      text-transform: 'lowercase'
+  - class: text-uppercase
+    styles:
+      text-transform: 'uppercase'
+  - class: text-capitalize
+    styles:
+      text-transform: 'capitalize'
 ---
 
 ## Text alignment

site/src/content/docs/utilities/vertical-align.mdx

@@ -1,6 +1,25 @@
 ---
 title: Vertical alignment
 description: Easily change the vertical alignment of inline, inline-block, inline-table, and table cell elements.
+reference:
+  - class: align-baseline
+    styles:
+      vertical-align: 'baseline'
+  - class: align-top
+    styles:
+      vertical-align: 'top'
+  - class: align-middle
+    styles:
+      vertical-align: 'middle'
+  - class: align-bottom
+    styles:
+      vertical-align: 'bottom'
+  - class: align-text-bottom
+    styles:
+      vertical-align: 'text-bottom'
+  - class: align-text-top
+    styles:
+      vertical-align: 'text-top'
 ---
 
 Change the alignment of elements with the [`vertical-alignment`](https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align) utilities. Please note that vertical-align only affects inline, inline-block, inline-table, and table cell elements.

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

@@ -1,6 +1,13 @@
 ---
 title: Visibility
 description: Control the visibility of elements, without modifying their display, with visibility utilities.
+reference:
+  - class: visible
+    styles:
+      visibility: 'visible'
+  - class: invisible
+    styles:
+      visibility: 'hidden'
 ---
 
 Set the `visibility` of elements with our visibility utilities. These utility classes do not modify the `display` value at all and do not affect layout – `.invisible` elements still take up space in the page.
@@ -19,10 +26,10 @@ Apply `.visible` or `.invisible` as needed.
 ```scss
 // Class
 .visible {
-  visibility: visible !important;
+  visibility: visible;
 }
 .invisible {
-  visibility: hidden !important;
+  visibility: hidden;
 }
 ```
 

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

@@ -2,6 +2,22 @@
 title: Z-index
 description: Use our low-level `z-index` utilities to quickly change the stack level of an element or component.
 toc: true
+reference:
+  - class: z-n1
+    styles:
+      z-index: '-1'
+  - class: z-0
+    styles:
+      z-index: '0'
+  - class: z-1
+    styles:
+      z-index: '1'
+  - class: z-2
+    styles:
+      z-index: '2'
+  - class: z-3
+    styles:
+      z-index: '3'
 ---
 
 ## Example

site/src/layouts/DocsLayout.astro

@@ -9,6 +9,17 @@ import Ads from '@components/Ads.astro'
 import BaseLayout from '@layouts/BaseLayout.astro'
 import DocsSidebar from '@components/DocsSidebar.astro'
 import TableOfContents from '@components/TableOfContents.astro'
+import ReferenceTable from '@components/ReferenceTable.astro'
+import { getData } from '@libs/data'
+import GitHubIcon from '@components/icons/GitHubIcon.astro'
+import MdnIcon from '@components/icons/MdnIcon.astro'
+import CssTricksIcon from '@components/icons/CssTricksIcon.astro'
+
+interface NavigationPage {
+  title: string
+  url: string
+  groupTitle: string
+}
 
 interface Props {
   frontmatter: CollectionEntry<'docs'>['data']
@@ -16,7 +27,11 @@ interface Props {
   id: CollectionEntry<'docs'>['id']
 }
 
+// Get sidebar data using the data library
+const sidebar = getData('sidebar')
+
 const { frontmatter, headings, id } = Astro.props
+const { slug } = Astro.params
 
 // Extract the directory/section from the ID (format: "directory/filename.mdx")
 const parentDirectory = id.includes('/') ? id.split('/')[0] : ''
@@ -27,6 +42,33 @@ if (frontmatter.toc) {
   bodyProps['data-bs-spy'] = 'scroll'
   bodyProps['data-bs-target'] = '#TableOfContents'
 }
+
+// Find previous and next pages for navigation
+let prevPage: NavigationPage | undefined
+let nextPage: NavigationPage | undefined
+
+// Create a flat array of all pages with their groups
+const allPages = sidebar.flatMap((group) => {
+  if (!group.pages) return []
+  return group.pages.map((page) => ({
+    title: page.title,
+    url: `/docs/${getConfig().docs_version}/${getSlug(group.title)}/${getSlug(page.title)}/`,
+    groupTitle: group.title
+  }))
+})
+
+// Find the current page index
+const currentPageIndex = allPages.findIndex(
+  (page) => page.url === `/docs/${getConfig().docs_version}/${slug}/`
+)
+
+if (currentPageIndex > 0) {
+  prevPage = allPages[currentPageIndex - 1]
+}
+
+if (currentPageIndex < allPages.length - 1) {
+  nextPage = allPages[currentPageIndex + 1]
+}
 ---
 
 <BaseLayout {...Astro.props} layout="docs" overrides={{ body: bodyProps }}>
@@ -51,33 +93,59 @@ if (frontmatter.toc) {
 
     <main class="bd-main order-1">
       <div class="bd-intro pt-2 ps-lg-2">
-        <div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
+        <h1 class="bd-title mb-0" id="content">{frontmatter.title}</h1>
-          <div class="mb-3 mb-md-0 d-flex text-nowrap">
-            {
-              // This is needed because we want to show the badge if show_badge isn't present or is set to false
-              frontmatter.added &&
-                ((frontmatter.added.show_badge !== undefined && frontmatter.added.show_badge === true) ||
-                  frontmatter.added.show_badge === undefined) && (
-                  <small class="d-inline-flex px-2 py-1 fw-semibold text-success-emphasis bg-success-subtle border border-success-subtle rounded-2 me-2">
-                    Added in v{frontmatter.added.version}
-                  </small>
-                )
-            }
-            <a
-              class="btn btn-sm btn-bd-light rounded-2"
-              href={`${getConfig().repo}/blob/v${getConfig().current_version}/site/src/content/docs/${id}`}
-              title="View and edit this file on GitHub"
-              target="_blank"
-              rel="noopener"
-            >
-              View on GitHub
-            </a>
-          </div>
-          <h1 class="bd-title mb-0" id="content">{frontmatter.title}</h1>
-        </div>
         <div class="bd-subtitle">
           {frontmatter.description && <Fragment set:html={processMarkdownToHtml(frontmatter.description)} />}
         </div>
+        <div class="mb-3 mb-md-0 d-flex text-nowrap">
+          {
+            frontmatter.added &&
+              ((frontmatter.added.show_badge !== undefined && frontmatter.added.show_badge === true) ||
+                frontmatter.added.show_badge === undefined) && (
+                <small class="d-inline-flex px-2 py-1 fw-semibold text-success-emphasis bg-success-subtle border border-success-subtle rounded-2 me-2">
+                  Added in v{frontmatter.added.version}
+                </small>
+              )
+          }
+          <a
+            class="btn btn-secondary-text btn-sm"
+            href={`${getConfig().repo}/blob/v${getConfig().current_version}/site/src/content/docs/${id}`}
+            title="View and edit this file on GitHub"
+            target="_blank"
+            rel="noopener"
+          >
+            <GitHubIcon height={16} width={16} class="bi" />
+            View on GitHub
+          </a>
+          {
+            frontmatter.mdn && (
+              <a
+                class="btn btn-secondary-text btn-sm"
+                href={frontmatter.mdn}
+                title="View on MDN"
+                target="_blank"
+                rel="noopener"
+              >
+                <MdnIcon height={16} width={16} class="bi" />
+                MDN
+              </a>
+            )
+          }
+          {
+            frontmatter.csstricks && (
+              <a
+                class="btn btn-secondary-text btn-sm"
+                href={typeof frontmatter.csstricks === 'string' ? frontmatter.csstricks : frontmatter.csstricks.url}
+                title="View on CSS-Tricks"
+                target="_blank"
+                rel="noopener"
+              >
+                <CssTricksIcon height={16} width={16} class="bi" />
+                {typeof frontmatter.csstricks === 'string' ? 'CSS-Tricks' : (frontmatter.csstricks.label || 'CSS-Tricks')}
+              </a>
+            )
+          }
+        </div>
       </div>
 
 
@@ -85,7 +153,7 @@ if (frontmatter.toc) {
         {
           frontmatter.toc && headings && (
             <button
-              class="btn btn-link p-md-0 mb-2 mb-md-0 text-decoration-none bd-toc-toggle d-md-none"
+              class="btn btn-link p-md-0 mb-2 mb-md-0 text-decoration-none bd-toc-toggle d-flex align-items-center d-md-none"
               type="button"
               data-bs-toggle="collapse"
               data-bs-target="#tocContents"
@@ -97,7 +165,7 @@ if (frontmatter.toc) {
                 <use xlink:href="#chevron-expand" />
               </svg>
             </button>
-            <strong class="d-none d-md-block h6 my-2 ms-3" id="docs-tocs">On this page</strong>
+            <div class="d-none d-md-block h6 my-2 ms-3" id="docs-tocs">On this page</div>
             <hr class="d-none d-md-block my-2 ms-3" />
             <div class="collapse bd-toc-collapse" id="tocContents">
               <nav id="TableOfContents" aria-labelledby="docs-tocs">
@@ -112,7 +180,7 @@ if (frontmatter.toc) {
       <div class="bd-content ps-lg-2">
         {
           frontmatter.sections && (
-            <div class="row g-3">
+            <div class="grid mb-5">
               {frontmatter.sections.map((section) => (
                 <div class="col-md-6">
                   <a
@@ -130,7 +198,42 @@ if (frontmatter.toc) {
           )
         }
 
+        {
+          frontmatter.reference && (
+            <div class="mb-5">
+              <ReferenceTable reference={frontmatter.reference} />
+            </div>
+          )
+        }
+
         <slot />
+
+        <nav class="bd-links-nav py-5 mt-5 border-top">
+          <div class="grid">
+            <div class="col-6">
+              {
+                prevPage && (
+                  <a href={prevPage.url} class="d-block p-3 text-decoration-none rounded-3">
+                    <div class="text-secondary small">Previous</div>
+                    <div class="fw-semibold">← {prevPage.title}</div>
+                    <div class="text-secondary small">{prevPage.groupTitle}</div>
+                  </a>
+                )
+              }
+            </div>
+            <div class="col-6">
+              {
+                nextPage && (
+                  <a href={nextPage.url} class="d-block p-3 text-decoration-none text-end rounded-3">
+                    <div class="text-secondary small">Next</div>
+                    <div class="fw-semibold">{nextPage.title} →</div>
+                    <div class="text-secondary small">{nextPage.groupTitle}</div>
+                  </a>
+                )
+              }
+            </div>
+          </div>
+        </nav>
       </div>
     </main>
   </div>

site/src/scss/_content.scss

@@ -36,6 +36,35 @@
     // stylelint-enable selector-max-type, selector-max-compound-selectors
   }
 
+  .bd-reference-table {
+    max-height: 420px;
+    overflow-y: auto;
+    font-size: .75rem;
+
+    thead th {
+      border-bottom-color: currentcolor;
+    }
+
+    th,
+    td {
+      padding-inline: 0;
+    }
+
+    td {
+      font-family: var(--bs-font-monospace);
+
+      &:first-child {
+        padding-inline-end: 1.5rem;
+        white-space: nowrap;
+      }
+
+      &:last-child {
+        color: light-dark(var(--bs-indigo-500), var(--bs-indigo-300));
+      }
+    }
+
+  }
+
   // Override Bootstrap defaults
   > .table,
   > .table-responsive .table {
@@ -51,14 +80,6 @@
       }
     }
 
-    thead {
-      border-bottom: 2px solid currentcolor;
-    }
-
-    tbody:not(:first-child) {
-      border-top: 2px solid currentcolor;
-    }
-
     th,
     td {
       &:first-child {