Merge branch 'main' into main

2025-11-12 00:05:05 -05:00 · 2025-08-15 16:36:56 +05:30 · 2025-08-15 16:36:56 +05:30 · 1090033e3e
commit 1090033e3e
parent f87e201ea6 956ec2df51
22 changed files with 855 additions and 751 deletions
--- a/.github/workflows/browserstack.yml
+++ b/.github/workflows/browserstack.yml
@ -22,12 +22,12 @@ jobs:

    steps:
      - name: Clone repository
-        uses: actions/checkout@v4
+        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
        with:
          persist-credentials: false

      - name: Set up Node.js
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4.4.0
        with:
          node-version: "${{ env.NODE }}"
          cache: npm
--- a/.github/workflows/bundlewatch.yml
+++ b/.github/workflows/bundlewatch.yml
@ -20,12 +20,12 @@ jobs:

    steps:
      - name: Clone repository
-        uses: actions/checkout@v4
+        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
        with:
          persist-credentials: false

      - name: Set up Node.js
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4.4.0
        with:
          node-version: "${{ env.NODE }}"
          cache: npm
--- a/.github/workflows/calibreapp-image-actions.yml
+++ b/.github/workflows/calibreapp-image-actions.yml
@ -22,11 +22,11 @@ jobs:
      pull-requests: write
    steps:
      - name: Clone repository
-        uses: actions/checkout@v4
+        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
        with:
          persist-credentials: false

      - name: Compress Images
-        uses: calibreapp/image-actions@1.1.0
+        uses: calibreapp/image-actions@737ceeaeed61e17b8d358358a303f1b8d177b779 # v1.1.0
        with:
          githubToken: ${{ secrets.GITHUB_TOKEN }}
--- a/.github/workflows/codeql.yml
+++ b/.github/workflows/codeql.yml
@ -24,21 +24,21 @@ jobs:

    steps:
      - name: Checkout repository
-        uses: actions/checkout@v4
+        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
        with:
          persist-credentials: false

      - name: Initialize CodeQL
-        uses: github/codeql-action/init@v3
+        uses: github/codeql-action/init@76621b61decf072c1cee8dd1ce2d2a82d33c17ed # v3.29.5
        with:
          config-file: ./.github/codeql/codeql-config.yml
          languages: "javascript"
          queries: +security-and-quality

      - name: Autobuild
-        uses: github/codeql-action/autobuild@v3
+        uses: github/codeql-action/autobuild@76621b61decf072c1cee8dd1ce2d2a82d33c17ed # v3.29.5

      - name: Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@v3
+        uses: github/codeql-action/analyze@76621b61decf072c1cee8dd1ce2d2a82d33c17ed # v3.29.5
        with:
          category: "/language:javascript"
--- a/.github/workflows/cspell.yml
+++ b/.github/workflows/cspell.yml
@ -23,12 +23,12 @@ jobs:

    steps:
      - name: Clone repository
-        uses: actions/checkout@v4
+        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
        with:
          persist-credentials: false

      - name: Run cspell
-        uses: streetsidesoftware/cspell-action@v7
+        uses: streetsidesoftware/cspell-action@dcd03dc3e8a59ec2e360d0c62db517baa0b4bb6d # v7.2.0
        with:
          config: ".cspell.json"
          files: "**/*.{md,mdx}"
--- a/.github/workflows/css.yml
+++ b/.github/workflows/css.yml
@ -20,12 +20,12 @@ jobs:

    steps:
      - name: Clone repository
-        uses: actions/checkout@v4
+        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
        with:
          persist-credentials: false

      - name: Set up Node.js
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4.4.0
        with:
          node-version: "${{ env.NODE }}"
          cache: npm
--- a/.github/workflows/docs.yml
+++ b/.github/workflows/docs.yml
@ -20,12 +20,12 @@ jobs:

    steps:
      - name: Clone repository
-        uses: actions/checkout@v4
+        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
        with:
          persist-credentials: false

      - name: Set up Node.js
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4.4.0
        with:
          node-version: "${{ env.NODE }}"
          cache: npm
@ -42,7 +42,7 @@ jobs:
        run: npm run docs-vnu

      - name: Run linkinator
-        uses: JustinBeckwith/linkinator-action@v1
+        uses: JustinBeckwith/linkinator-action@3d5ba091319fa7b0ac14703761eebb7d100e6f6d # v1.11.0
        with:
          paths: _site
          recurse: true
--- a/.github/workflows/issue-close-require.yml
+++ b/.github/workflows/issue-close-require.yml
@ -17,7 +17,7 @@ jobs:
    if: github.repository == 'twbs/bootstrap'
    steps:
      - name: awaiting reply
-        uses: actions-cool/issues-helper@v3
+        uses: actions-cool/issues-helper@50068f49b7b2b3857270ead65e2d02e4459b022c # v3.6.2
        with:
          actions: "close-issues"
          labels: "awaiting-reply"
--- a/.github/workflows/issue-labeled.yml
+++ b/.github/workflows/issue-labeled.yml
@ -18,7 +18,7 @@ jobs:
    steps:
      - name: awaiting reply
        if: github.event.label.name == 'needs-example'
-        uses: actions-cool/issues-helper@v3
+        uses: actions-cool/issues-helper@50068f49b7b2b3857270ead65e2d02e4459b022c # v3.6.2
        with:
          actions: "create-comment"
          token: ${{ secrets.GITHUB_TOKEN }}
--- a/.github/workflows/js.yml
+++ b/.github/workflows/js.yml
@ -25,12 +25,12 @@ jobs:

    steps:
      - name: Clone repository
-        uses: actions/checkout@v4
+        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
        with:
          persist-credentials: false

      - name: Set up Node.js
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4.4.0
        with:
          node-version: ${{ env.NODE }}
          cache: npm
@ -45,7 +45,7 @@ jobs:
        run: npm run js-test

      - name: Run Coveralls
-        uses: coverallsapp/github-action@v2
+        uses: coverallsapp/github-action@648a8eb78e6d50909eff900e4ec85cab4524a45b # v2.3.6
        if: ${{ !github.event.repository.fork }}
        with:
          github-token: "${{ secrets.GITHUB_TOKEN }}"
--- a/.github/workflows/lint.yml
+++ b/.github/workflows/lint.yml
@ -20,12 +20,12 @@ jobs:

    steps:
      - name: Clone repository
-        uses: actions/checkout@v4
+        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
        with:
          persist-credentials: false

      - name: Set up Node.js
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4.4.0
        with:
          node-version: "${{ env.NODE }}"
          cache: npm
--- a/.github/workflows/node-sass.yml
+++ b/.github/workflows/node-sass.yml
@ -20,12 +20,12 @@ jobs:

    steps:
      - name: Clone repository
-        uses: actions/checkout@v4
+        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
        with:
          persist-credentials: false

      - name: Set up Node.js
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4.4.0
        with:
          node-version: "${{ env.NODE }}"

--- a/.github/workflows/release-notes.yml
+++ b/.github/workflows/release-notes.yml
@ -18,6 +18,6 @@ jobs:
    runs-on: ubuntu-latest
    if: github.repository == 'twbs/bootstrap'
    steps:
-      - uses: release-drafter/release-drafter@v6
+      - uses: release-drafter/release-drafter@b1476f6e6eb133afa41ed8589daba6dc69b4d3f5 # v6.1.0
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
--- a/.github/workflows/scorecard.yml
+++ b/.github/workflows/scorecard.yml
@ -0,0 +1,78 @@
+# This workflow uses actions that are not certified by GitHub. They are provided
+# by a third-party and are governed by separate terms of service, privacy
+# policy, and support documentation.
+
+name: Scorecard supply-chain security
+on:
+  # For Branch-Protection check. Only the default branch is supported. See
+  # https://github.com/ossf/scorecard/blob/main/docs/checks.md#branch-protection
+  branch_protection_rule:
+  # To guarantee Maintained check is occasionally updated. See
+  # https://github.com/ossf/scorecard/blob/main/docs/checks.md#maintained
+  schedule:
+    - cron: '27 12 * * 2'
+  push:
+    branches: [ "main" ]
+
+# Declare default permissions as read only.
+permissions: read-all
+
+jobs:
+  analysis:
+    name: Scorecard analysis
+    runs-on: ubuntu-latest
+    # `publish_results: true` only works when run from the default branch. conditional can be removed if disabled.
+    if: github.event.repository.default_branch == github.ref_name || github.event_name == 'pull_request'
+    permissions:
+      # Needed to upload the results to code-scanning dashboard.
+      security-events: write
+      # Needed to publish results and get a badge (see publish_results below).
+      id-token: write
+      # Uncomment the permissions below if installing in a private repository.
+      # contents: read
+      # actions: read
+
+    steps:
+      - name: "Checkout code"
+        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
+        with:
+          persist-credentials: false
+
+      - name: "Run analysis"
+        uses: ossf/scorecard-action@05b42c624433fc40578a4040d5cf5e36ddca8cde # v2.4.2
+        with:
+          results_file: results.sarif
+          results_format: sarif
+          # (Optional) "write" PAT token. Uncomment the `repo_token` line below if:
+          # - you want to enable the Branch-Protection check on a *public* repository, or
+          # - you are installing Scorecard on a *private* repository
+          # To create the PAT, follow the steps in https://github.com/ossf/scorecard-action?tab=readme-ov-file#authentication-with-fine-grained-pat-optional.
+          # repo_token: ${{ secrets.SCORECARD_TOKEN }}
+
+          # Public repositories:
+          #   - Publish results to OpenSSF REST API for easy access by consumers
+          #   - Allows the repository to include the Scorecard badge.
+          #   - See https://github.com/ossf/scorecard-action#publishing-results.
+          # For private repositories:
+          #   - `publish_results` will always be set to `false`, regardless
+          #     of the value entered here.
+          publish_results: true
+
+          # (Optional) Uncomment file_mode if you have a .gitattributes with files marked export-ignore
+          # file_mode: git
+
+      # Upload the results as artifacts (optional). Commenting out will disable uploads of run results in SARIF
+      # format to the repository Actions tab.
+      - name: "Upload artifact"
+        uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4.6.2
+        with:
+          name: SARIF file
+          path: results.sarif
+          retention-days: 5
+
+      # Upload the results to GitHub's code scanning dashboard (optional).
+      # Commenting out will disable upload of results to your repo's Code Scanning dashboard
+      - name: "Upload to code-scanning"
+        uses: github/codeql-action/upload-sarif@76621b61decf072c1cee8dd1ce2d2a82d33c17ed # v3.29.5
+        with:
+          sarif_file: results.sarif
--- a/README.md
+++ b/README.md
@ -70,6 +70,7 @@ Read the [Getting started page](https://getbootstrap.com/docs/5.3/getting-starte
 [![CSS Brotli size](https://img.badgesize.io/twbs/bootstrap/main/dist/css/bootstrap.min.css?compression=brotli&label=CSS%20Brotli%20size)](https://github.com/twbs/bootstrap/blob/main/dist/css/bootstrap.min.css)
 [![JS gzip size](https://img.badgesize.io/twbs/bootstrap/main/dist/js/bootstrap.min.js?compression=gzip&label=JS%20gzip%20size)](https://github.com/twbs/bootstrap/blob/main/dist/js/bootstrap.min.js)
 [![JS Brotli size](https://img.badgesize.io/twbs/bootstrap/main/dist/js/bootstrap.min.js?compression=brotli&label=JS%20Brotli%20size)](https://github.com/twbs/bootstrap/blob/main/dist/js/bootstrap.min.js)
+![Open Source Security Foundation Scorecard](https://img.shields.io/ossf-scorecard/github.com/twbs/bootstrap)
 [![Backers on Open Collective](https://img.shields.io/opencollective/backers/bootstrap?logo=opencollective&logoColor=fff)](#backers)
 [![Sponsors on Open Collective](https://img.shields.io/opencollective/sponsors/bootstrap?logo=opencollective&logoColor=fff)](#sponsors)

--- a/build/zip-examples.mjs
+++ b/build/zip-examples.mjs
@ -11,6 +11,7 @@ import fs from 'node:fs/promises'
 import path from 'node:path'
 import { fileURLToPath } from 'node:url'
 import sh from 'shelljs'
+import { format } from 'prettier'

 const __dirname = path.dirname(fileURLToPath(import.meta.url))

@ -83,7 +84,9 @@ for (const file of staticJsFiles) {
 sh.rm(`${distFolder}/index.html`)

 // get all examples' HTML files
-for (const file of sh.find(`${distFolder}/**/*.html`)) {
+const htmlFiles = sh.find(`${distFolder}/**/*.html`)
+
+const formatPromises = htmlFiles.map(async file => {
  const fileContents = sh.cat(file)
    .toString()
    .replace(new RegExp(`"/docs/${versionShort}/`, 'g'), '"../')
@ -91,8 +94,24 @@ for (const file of sh.find(`${distFolder}/**/*.html`)) {
    .replace(/(<link href="\.\.\/[^"]*"[^>]*) integrity="[^"]*"/g, '$1')
    .replace(/<link[^>]*href="\.\.\/assets\/img\/favicons\/[^"]*"[^>]*>/g, '')
    .replace(/(<script src="\.\.\/[^"]*"[^>]*) integrity="[^"]*"/g, '$1')
-  new sh.ShellString(fileContents).to(file)
-}
+
+  let formattedHTML
+  try {
+    formattedHTML = await format(fileContents, {
+      parser: 'html',
+      filepath: file
+    })
+  } catch (error) {
+    console.error(`\nError formatting ${file}:`)
+    console.error(`Message: ${error.message}`)
+    console.error('\nSkipping formatting for this file...\n')
+    formattedHTML = fileContents
+  }
+
+  new sh.ShellString(formattedHTML).to(file)
+})
+
+await Promise.all(formatPromises)

 // create the zip file
 sh.exec(`zip -qr9 "${distFolder}.zip" "${distFolder}"`)
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -109,13 +109,13 @@
  },
  "devDependencies": {
    "@astrojs/check": "^0.9.4",
-    "@astrojs/markdown-remark": "^6.3.2",
-    "@astrojs/mdx": "^4.3.0",
+    "@astrojs/markdown-remark": "^6.3.5",
+    "@astrojs/mdx": "^4.3.3",
    "@astrojs/prism": "^3.3.0",
-    "@astrojs/sitemap": "^3.4.1",
-    "@babel/cli": "^7.28.0",
-    "@babel/core": "^7.28.0",
-    "@babel/preset-env": "^7.28.0",
+    "@astrojs/sitemap": "^3.5.0",
+    "@babel/cli": "^7.28.3",
+    "@babel/core": "^7.28.3",
+    "@babel/preset-env": "^7.28.3",
    "@docsearch/js": "^3.9.0",
    "@popperjs/core": "^2.11.8",
    "@rollup/plugin-babel": "^6.0.4",
@ -126,13 +126,13 @@
    "@types/js-yaml": "^4.0.9",
    "@types/mime": "^4.0.0",
    "@types/prismjs": "^1.26.5",
-    "astro": "^5.11.0",
+    "astro": "^5.13.0",
    "astro-auto-import": "^0.4.4",
    "autoprefixer": "^10.4.21",
    "bundlewatch": "^0.4.1",
    "clean-css-cli": "^5.6.3",
    "clipboard": "^2.0.11",
-    "cross-env": "^7.0.3",
+    "cross-env": "^10.0.0",
    "eslint": "8.57.1",
    "eslint-config-xo": "0.45.0",
    "eslint-plugin-html": "^8.1.3",
@ -146,7 +146,7 @@
    "htmlparser2": "^10.0.0",
    "image-size": "^2.0.2",
    "ip": "^2.0.1",
-    "jasmine": "^5.8.0",
+    "jasmine": "^5.9.0",
    "jquery": "^3.7.1",
    "js-yaml": "^4.1.0",
    "karma": "^6.4.4",
@ -169,18 +169,18 @@
    "rehype-autolink-headings": "^7.1.0",
    "remark": "^15.0.1",
    "remark-html": "^16.0.1",
-    "rollup": "^4.44.2",
+    "rollup": "^4.46.2",
    "rollup-plugin-istanbul": "^5.0.0",
    "rtlcss": "^4.3.0",
    "sass": "1.78.0",
    "sass-true": "^9.0.0",
    "shelljs": "^0.10.0",
-    "stylelint": "^16.21.1",
+    "stylelint": "^16.23.1",
    "stylelint-config-twbs-bootstrap": "^16.1.0",
    "terser": "^5.43.1",
    "unist-util-visit": "^5.0.0",
    "vnu-jar": "24.10.17",
-    "zod": "^3.25.76"
+    "zod": "^4.0.17"
  },
  "files": [
    "dist/{css,js}/*.{css,js,map}",
--- a/site/src/assets/examples/cheatsheet-rtl/index.astro
+++ b/site/src/assets/examples/cheatsheet-rtl/index.astro
@ -1209,8 +1209,7 @@ import Placeholder from "@shortcodes/Placeholder.astro"
        <nav class="navbar navbar-expand-lg bg-body-tertiary">
          <div class="container-fluid">
            <a class="navbar-brand" href="#">
-              <img src=${getVersionedDocsPath('/assets/brand/bootstrap-logo-white.svg')} width="38" height="30" class="d-inline-block align-top" alt="Bootstrap" loading="lazy"
-                   style="filter: invert(1) grayscale(100%) brightness(200%);">
+              <img src="${getVersionedDocsPath('/assets/brand/bootstrap-logo-white.svg')}" width="38" height="30" class="d-inline-block align-top" alt="Bootstrap" loading="lazy" style="filter: invert(1) grayscale(100%) brightness(200%);">
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="تبديل التنقل">
              <span class="navbar-toggler-icon"></span>
@ -1249,7 +1248,7 @@ import Placeholder from "@shortcodes/Placeholder.astro"
        <nav class="navbar navbar-expand-lg navbar-dark bg-primary mt-5">
          <div class="container-fluid">
            <a class="navbar-brand" href="#">
-              <img src=${getVersionedDocsPath('/assets/brand/bootstrap-logo-white.svg')} width="38" height="30" class="d-inline-block align-top" alt="Bootstrap" loading="lazy">
+              <img src="${getVersionedDocsPath('/assets/brand/bootstrap-logo-white.svg')}" width="38" height="30" class="d-inline-block align-top" alt="Bootstrap" loading="lazy">
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent2" aria-controls="navbarSupportedContent2" aria-expanded="false" aria-label="تبديل التنقل">
              <span class="navbar-toggler-icon"></span>
--- a/site/src/assets/examples/cheatsheet/index.astro
+++ b/site/src/assets/examples/cheatsheet/index.astro
@ -1187,8 +1187,7 @@ export const body_class = 'bg-body-tertiary'
          <nav class="navbar navbar-expand-lg bg-body-tertiary">
            <div class="container-fluid">
              <a class="navbar-brand" href="#">
-                <img src=${getVersionedDocsPath('/assets/brand/bootstrap-logo-white.svg')} width="38" height="30" class="d-inline-block align-top" alt="Bootstrap" loading="lazy"
-                     style="filter: invert(1) grayscale(100%) brightness(200%);">
+                <img src="${getVersionedDocsPath('/assets/brand/bootstrap-logo-white.svg')}" width="38" height="30" class="d-inline-block align-top" alt="Bootstrap" loading="lazy" style="filter: invert(1) grayscale(100%) brightness(200%);">
              </a>
              <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
@ -1227,7 +1226,7 @@ export const body_class = 'bg-body-tertiary'
          <nav class="navbar navbar-expand-lg navbar-dark bg-primary mt-5">
            <div class="container-fluid">
              <a class="navbar-brand" href="#">
-                <img src=${getVersionedDocsPath('/assets/brand/bootstrap-logo-white.svg')} width="38" height="30" class="d-inline-block align-top" alt="Bootstrap" loading="lazy">
+                <img src="${getVersionedDocsPath('/assets/brand/bootstrap-logo-white.svg')}" width="38" height="30" class="d-inline-block align-top" alt="Bootstrap" loading="lazy">
              </a>
              <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent2" aria-controls="navbarSupportedContent2" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
--- a/site/src/components/shortcodes/Code.astro
+++ b/site/src/components/shortcodes/Code.astro
@ -33,15 +33,20 @@ interface Props {
   * This takes precedence over the `code` prop.
   */
  filePath?: string
+  /**
+   * Defines if the `<Code>` component is nested inside an `<Example>` component or not.
+   * @default false
+   */
+  nestedInExample?: boolean
 }

-const { class: className, code, containerClass, fileMatch, filePath, lang } = Astro.props
+const { class: className, code, containerClass, fileMatch, filePath, lang, nestedInExample = false } = Astro.props

 let codeToDisplay = filePath
  ? fs.readFileSync(path.join(process.cwd(), filePath), 'utf8')
  : Array.isArray(code)
-  ? code.join('\n')
-  : code
+    ? code.join('\n')
+    : code

 if (filePath && fileMatch && codeToDisplay) {
  const match = codeToDisplay.match(new RegExp(fileMatch))
@ -130,19 +135,23 @@ if (filePath && fileMatch && codeToDisplay) {
  })
 </script>

-<div class:list={['bd-code-snippet', containerClass]}>
+<div class:list={[{ 'bd-code-snippet': !nestedInExample }, containerClass]}>
  {
-    Astro.slots.has('pre') ? (
-      <slot name="pre" />
-    ) : (
-      <div class="bd-clipboard">
-        <button type="button" class="btn-clipboard">
-          <svg class="bi" role="img" aria-label="Copy">
-            <use xlink:href="#clipboard" />
-          </svg>
-        </button>
-      </div>
-    )
+    nestedInExample
+      ? (<></>)
+      : Astro.slots.has('pre')
+        ? (
+          <slot name="pre" />
+        )
+        : (
+          <div class="bd-clipboard">
+            <button type="button" class="btn-clipboard">
+              <svg class="bi" role="img" aria-label="Copy">
+                <use xlink:href="#clipboard" />
+              </svg>
+            </button>
+          </div>
+        )
  }
  <div class="highlight">
    {
--- a/site/src/components/shortcodes/Example.astro
+++ b/site/src/components/shortcodes/Example.astro
@ -1,6 +1,6 @@
 ---
 import { replacePlaceholdersInHtml } from '@libs/placeholder'
-import { Prism } from '@astrojs/prism'
+import Code from '@components/shortcodes/Code.astro'

 interface Props {
  /**
@ -96,9 +96,7 @@ const simplifiedMarkup = markup
            </div>
          </div>
        )}
-        <div class="highlight">
-          <Prism code={simplifiedMarkup} lang={lang} />
-        </div>
+        <Code code={simplifiedMarkup} lang={lang} nestedInExample={true} />
      </>
    )
  }