Docs: modify remaining `.link-offset-*` to `.underline-offset-*` usage (#42572)

diff --git a/site/src/content/docs/guides/migration.mdx b/site/src/content/docs/guides/migration.mdx
index 1d5d4cfab95a6b4de3d21ee69aaa7559db5594f4..8c7bad26cb7bfd2f949940f7c71984751379207f 100644 (file)
--- a/site/src/content/docs/guides/migration.mdx
+++ b/site/src/content/docs/guides/migration.mdx
@@ -391,6 +391,21 @@ Bootstrap 6 is a major release with many breaking changes to modernize our codeb
 - **Spacing and border utilities now use CSS logical properties.** `margin-top` → `margin-block-start`, `margin-right` → `margin-inline-end`, `padding-left` → `padding-inline-start`, `border-right` → `border-inline-end`, etc. Class names (`.mt-*`, `.me-*`, `.ps-*`, `.border-end`) remain the same, but the underlying CSS properties are now logical, improving RTL and writing-mode support.
 - **Text wrap additions.** Added `.text-balance` and `.text-pretty` values to the text-wrap utility.
 - **Color utility renames.** `.text-*` color utilities have been replaced by `.fg-*` (foreground) utilities. New `.fg-emphasis-*` and `.fg-contrast-*` variants. Background utilities now include `.bg-subtle-*` and `.bg-muted-*` in addition to `.bg-*`. Added `.fg-bg` and `.bg-fg` cross-reference utilities; removed `.fg-inherit` and `.bg-inherit`. Renamed `.bg-opacity-*` to `.bg-*`. Renamed `.text-reset` to `.fg-reset`.
+- **Link utilities are now part of text decoration utilities.** The v5 `link-*` utility family has been replaced by `underline-*` utilities documented under [Text decoration]([[docsref:/utilities/text-decoration]]). Update class names accordingly:
+
+<BsTable>
+| Category | Before (v5) | After (v6) |
+|---|---|---|
+| Link text opacity | `.link-opacity-*`, `.link-opacity-*-hover` | Removed (no dedicated `link-opacity-*` utility in v6) |
+| Underline offset | `.link-offset-1`, `.link-offset-2`, `.link-offset-3` | `.underline-offset-1`, `.underline-offset-2`, `.underline-offset-3` |
+| Underline color | `.link-underline-primary`, `.link-underline-secondary` | `.underline-primary`, `.underline-secondary` |
+| Underline opacity | `.link-underline-opacity-*` | `.underline-*` (10-step scale from `10` to `100`) |
+| Underline thickness | — | `.underline-thickness-1` through `.underline-thickness-5` |
+| Hover variants | `.link-offset-3-hover`, `.link-underline-opacity-75-hover` | `.hover:underline-offset-3`, `.hover:underline-70` or `.hover:underline-80` |
+</BsTable>
+
+  The helper `.link-underline` is no longer needed in v6.
+
 - **Display utilities:** added `flow-root` and `contents` options.
 - **Sizing utilities:**
   - Renamed `.mh-*`/`.mw-*` to `.max-h-*`/`.max-w-*`

diff --git a/site/src/layouts/partials/ExamplesMain.astro b/site/src/layouts/partials/ExamplesMain.astro
index 7c6ac6a3c1d684b8aba8b350e57003575bece48c..ed7cce9daeb4847c2a9b04b3e7daacf01429a929 100644 (file)
--- a/site/src/layouts/partials/ExamplesMain.astro
+++ b/site/src/layouts/partials/ExamplesMain.astro
@@ -22,7 +22,7 @@ import { getSlug } from '@libs/utils'
                   <div>
                     <h3 class="h5 mb-1">
                       <a
-                        class="d-block link-offset-1"
+                        class="d-block underline-offset-1"
                         href={`${getConfig().github_org}${example.url}/`}
                         target="_blank"
                         rel="noopener"
@@ -34,7 +34,7 @@ import { getSlug } from '@libs/utils'
                     <p class="fg-2">{example.description}</p>
                     <p>
                       <a
-                        class="icon-link small theme-secondary link-offset-1"
+                        class="icon-link small theme-secondary underline-offset-1"
                         href={`https://stackblitz.com/github/twbs${example.url}?file=${
                           example.indexPath ? example.indexPath : 'index.html'
                         }`}
@@ -56,7 +56,7 @@ import { getSlug } from '@libs/utils'
             return (
               <article class="sm:col-6 md:col-3 mb-3">
                 <a
-                  class="d-block link-offset-1"
+                  class="d-block underline-offset-1"
                   href={`/docs/${getConfig().docs_version}/examples/${getSlug(example.name)}/`}
                 >
                   <img