fixes

scss/_utilities.scss

@@ -704,12 +704,14 @@ $utilities: map.merge(
       class: text,
       values: wrap nowrap balance pretty,
     ),
+    // scss-docs-start utils-text-break
     "word-wrap": (
       property: word-wrap word-break,
       class: text,
       values: (break: break-word),
       rtl: false
     ),
+    // scss-docs-end utils-text-break
     // scss-docs-end utils-text
     // scss-docs-start utils-color
     // "color-attr": (

site/src/components/ReferenceTable.astro

@@ -1,7 +1,6 @@
 ---
 import { readFileSync } from 'node:fs';
-import { fileURLToPath } from 'node:url';
+import { join } from 'node:path';
-import { dirname, join } from 'node:path';
 
 interface ReferenceItem {
   class: string;
@@ -31,9 +30,8 @@ const referenceData = reference || data || [];
 // Parse CSS variables from _root.scss at build time
 function parseCSSVariables(): Record<string, string> {
   try {
-    const __filename = fileURLToPath(import.meta.url);
+    const projectRoot = process.cwd();
-    const __dirname = dirname(__filename);
+    const rootScssPath = join(projectRoot, 'scss/_root.scss');
-    const rootScssPath = join(__dirname, '../../../scss/_root.scss');
     const scssContent = readFileSync(rootScssPath, 'utf-8');
 
     const cssVarValues: Record<string, string> = {};

site/src/components/UtilityReferenceTable.astro

@@ -1,7 +1,6 @@
 ---
 import { readFileSync } from 'node:fs';
-import { fileURLToPath } from 'node:url';
+import { join } from 'node:path';
-import { dirname, join } from 'node:path';
 
 interface Props {
   utility: string | string[]; // The utility key(s) from the metadata (e.g., "font-size" or ["font-size", "text-size"])
@@ -19,9 +18,8 @@ const utilities = Array.isArray(utility) ? utility : [utility];
 // Parse CSS variables from _root.scss at build time
 function parseCSSVariables(): Record<string, string> {
   try {
-    const __filename = fileURLToPath(import.meta.url);
+    const projectRoot = process.cwd();
-    const __dirname = dirname(__filename);
+    const rootScssPath = join(projectRoot, 'scss/_root.scss');
-    const rootScssPath = join(__dirname, '../../../scss/_root.scss');
     const scssContent = readFileSync(rootScssPath, 'utf-8');
 
     const cssVarValues: Record<string, string> = {};
@@ -49,9 +47,8 @@ function parseCSSVariables(): Record<string, string> {
 // Load utilities metadata
 function loadUtilitiesMetadata(): any {
   try {
-    const __filename = fileURLToPath(import.meta.url);
+    const projectRoot = process.cwd();
-    const __dirname = dirname(__filename);
+    const metadataPath = join(projectRoot, 'dist/css/bootstrap-utilities.metadata.json');
-    const metadataPath = join(__dirname, '../../../dist/css/bootstrap-utilities.metadata.json');
     const metadataContent = readFileSync(metadataPath, 'utf-8');
     return JSON.parse(metadataContent);
   } catch (error) {
@@ -63,9 +60,8 @@ function loadUtilitiesMetadata(): any {
 // Parse compiled CSS to extract styles for given class selectors
 function parseCompiledCSS(classNames: string[]): Record<string, string[]> {
   try {
-    const __filename = fileURLToPath(import.meta.url);
+    const projectRoot = process.cwd();
-    const __dirname = dirname(__filename);
+    const bootstrapCssPath = join(projectRoot, 'dist/css/bootstrap.css');
-    const bootstrapCssPath = join(__dirname, '../../../dist/css/bootstrap.css');
     const cssContent = readFileSync(bootstrapCssPath, 'utf-8');
 
     const classStyles: Record<string, string[]> = {};

site/src/components/home/ComponentUtilities.astro

@@ -28,7 +28,7 @@ import Code from '@shortcodes/Code.astro'
         Apply any of our included utility classes to our components to customize their appearance, like the navigation
         example below. There are hundreds of classes available—from <a href={getVersionedDocsPath('utilities/position')}
           >positioning</a
-        > and <a href={getVersionedDocsPath('utilities/sizing')}>sizing</a> to <a
+        > and <a href={getVersionedDocsPath('utilities/width')}>sizing</a> to <a
           href={getVersionedDocsPath('utilities/colors')}>colors</a
         > and <a href={getVersionedDocsPath('utilities/shadows')}>effects</a>. Mix them with CSS variable overrides for
         even more control.

site/src/components/shortcodes/DETAILS_README.md

@@ -0,0 +1,126 @@
+# Details Component
+
+The Details component is an expandable/collapsible content component that looks similar to the Callout component but requires a click to reveal the full content. It uses the native HTML `<details>` and `<summary>` elements under the hood.
+
+## Features
+
+- **Expandable/Collapsible**: Content is hidden by default and expands when the summary is clicked
+- **Markdown Support**: Can reference external `.md` files using the `name` prop
+- **Flexible Content**: Accepts inline content via slot or named markdown files
+- **Simple Styling**: Single, unified design that works everywhere
+
+## Usage
+
+### Basic Usage with Inline Content
+
+```astro
+<Details summary="Click to expand">
+  This is the content that will be hidden until the user clicks the summary.
+</Details>
+```
+
+### With Named Content (External Markdown File)
+
+Create a markdown file in `site/src/content/details/` with a `title` in the frontmatter:
+
+```markdown
+<!-- site/src/content/details/my-example.md -->
+---
+title: Click to see more
+---
+
+**This is the content** from an external markdown file.
+
+It supports full markdown formatting including:
+- Lists
+- Links
+- **Bold** and *italic* text
+```
+
+Then use it in your component (the title from frontmatter will be used as the summary):
+
+```astro
+<Details name="my-example" />
+```
+
+You can also override the title with a custom summary:
+
+```astro
+<Details summary="Custom summary text" name="my-example" />
+```
+
+### With Markdown Formatting in Slot
+
+```astro
+<Details summary="Advanced usage">
+  You can use **markdown** formatting, including:
+
+  - Lists
+  - [Links](#)
+  - `code`
+  - And more!
+</Details>
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `summary` | `string` | *Optional* | The text displayed in the summary (always visible). If not provided, uses the `title` from the markdown frontmatter when `name` is set. |
+| `name` | `string` | `undefined` | Reference to a markdown file in `src/content/details/` |
+
+**Note:** Either `summary` must be provided, or `name` must reference a markdown file with a `title` in its frontmatter.
+
+## Creating Named Content Files
+
+1. Create a new `.md` file in `site/src/content/details/`
+2. Add a `title` in the frontmatter for the summary text
+3. Write your markdown content
+4. Reference it using the `name` prop (without the `.md` extension)
+
+Example:
+
+```bash
+# Create the file
+cat > site/src/content/details/api-notes.md << EOF
+---
+title: API Authentication Notes
+---
+
+**API Note:** This endpoint requires authentication.
+EOF
+```
+
+```astro
+<!-- Use it (title from frontmatter is used automatically) -->
+<Details name="api-notes" />
+
+<!-- Or override the title with a custom summary -->
+<Details summary="Custom summary" name="api-notes" />
+```
+
+## Styling
+
+The Details component has a simple, unified style:
+- `.bd-details` - Base class with neutral, theme-aware styling
+- Uses Bootstrap's tertiary background color
+- Automatically adapts to light and dark modes
+
+The styling is defined in `site/src/scss/_details.scss`.
+
+## Examples
+
+See the [Docs Reference](/docsref/) page for live examples of the Details component in action.
+
+## When to Use
+
+**Use Details when:**
+- Content is supplementary and doesn't need to be immediately visible
+- You want to reduce visual clutter on the page
+- Information is relevant but not critical to understanding the main content
+- You're documenting edge cases, advanced tips, or optional information
+
+**Use Callout instead when:**
+- Information must be immediately visible
+- Content is critical to user success
+- You want to draw immediate attention to important information

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

@@ -208,7 +208,7 @@ Using the grid, wrap cards in columns and rows as needed.
 
 ### Using utilities
 
-Use our handful of [available sizing utilities]([[docsref:/utilities/sizing]]) to quickly set a card’s width.
+Use our handful of [available sizing utilities]([[docsref:/utilities/width]]) to quickly set a card’s width.
 
 <Example code={`<div class="card w-75 mb-3">
     <div class="card-body">
@@ -240,7 +240,7 @@ Use custom CSS in your stylesheets or as inline styles to set a width.
 
 ## Text alignment
 
-You can quickly change the text alignment of any card—in its entirety or specific parts—with our [text align classes]([[docsref:/utilities/text#text-alignment]]).
+You can quickly change the text alignment of any card—in its entirety or specific parts—with our [text align classes]([[docsref:/utilities/text-alignment]]).
 
 <Example code={`<div class="card mb-3" style="width: 18rem;">
     <div class="card-body">

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

@@ -36,7 +36,7 @@ Generally, we recommend using a `<button>` with the `data-bs-target` attribute.
 
 ## Horizontal
 
-The collapse plugin supports horizontal collapsing. Add the `.collapse-horizontal` modifier class to transition the `width` instead of `height` and set a `width` on the immediate child element. Feel free to write your own custom Sass, use inline styles, or use our [width utilities]([[docsref:/utilities/sizing]]).
+The collapse plugin supports horizontal collapsing. Add the `.collapse-horizontal` modifier class to transition the `width` instead of `height` and set a `width` on the immediate child element. Feel free to write your own custom Sass, use inline styles, or use our [width utilities]([[docsref:/utilities/width]]).
 
 <Callout>
 Please note that while the example below has a `min-height` set to avoid excessive repaints in our docs, this is not explicitly required. **Only the `width` on the child element is required.**

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

@@ -75,7 +75,7 @@ Below is a _static_ modal example (meaning its `position` and `display` have bee
 ```
 
 <Callout>
-In the above static example, we use `<h5>`, to avoid issues with the heading hierarchy in the documentation page. Structurally, however, a modal dialog represents its own separate document/context, so the `.modal-title` should ideally be an `<h1>`. If necessary, you can use the [font size utilities]([[docsref:/utilities/text#font-size]]) to control the heading’s appearance. All the following live examples use this approach.
+In the above static example, we use `<h5>`, to avoid issues with the heading hierarchy in the documentation page. Structurally, however, a modal dialog represents its own separate document/context, so the `.modal-title` should ideally be an `<h1>`. If necessary, you can use the [font size utilities]([[docsref:/utilities/font-size]]) to control the heading’s appearance. All the following live examples use this approach.
 </Callout>
 
 ### Live demo

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

@@ -36,7 +36,7 @@ Put that all together, and you have the following examples.
 
 ### Width
 
-Bootstrap provides a handful of [utilities for setting width]([[docsref:/utilities/sizing]]). Depending on your needs, these may help with quickly configuring the width of the `.progress-bar`.
+Bootstrap provides a handful of [utilities for setting width]([[docsref:/utilities/width]]). Depending on your needs, these may help with quickly configuring the width of the `.progress-bar`.
 
 <Example code={`<div class="progress" role="progressbar" aria-label="Basic example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
     <div class="progress-bar w-75"></div>

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

@@ -62,7 +62,7 @@ Use [margin utilities][margin] like `.m-5` for easy spacing.
 
 ### Placement
 
-Use [flexbox utilities][flex], [float utilities][float], or [text alignment][text] utilities to place spinners exactly where you need them in any situation.
+Use [flexbox utilities][flex], [float utilities][float], or [text alignment][text-alignment] utilities to place spinners exactly where you need them in any situation.
 
 #### Flex
 
@@ -169,4 +169,4 @@ Used for creating the CSS animations for our spinners. Included in `scss/_spinne
 [flex]: [[docsref:/utilities/flex]]
 [float]: [[docsref:/utilities/float]]
 [margin]: [[docsref:/utilities/margin]]
-[text]:    [[docsref:/utilities/text]]
+[text-alignment]: [[docsref:/utilities/text-alignment]]

site/src/content/docs/content/figures.mdx

@@ -13,7 +13,7 @@ Use the included `.figure`, `.figure-img` and `.figure-caption` classes to provi
     <figcaption class="figure-caption">A caption for the above image.</figcaption>
   </figure>`} />
 
-Aligning the figure’s caption is easy with our [text utilities]([[docsref:/utilities/text#text-alignment]]).
+Aligning the figure’s caption is easy with our [text utilities]([[docsref:/utilities/text-alignment]]).
 
 <Example code={`<figure class="figure">
     <Placeholder width="400" height="300" class="figure-img img-fluid rounded" />

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

@@ -18,7 +18,7 @@ In addition to our [border-radius utilities]([[docsref:/utilities/border]]), you
 
 ## Aligning images
 
-Align images with the [helper float classes]([[docsref:/utilities/float]]) or [text alignment classes]([[docsref:/utilities/text#text-alignment]]). `block`-level images can be centered using [the `.mx-auto` margin utility class]([[docsref:/utilities/margin#horizontal-centering]]).
+Align images with the [helper float classes]([[docsref:/utilities/float]]) or [text alignment classes]([[docsref:/utilities/text-alignment]]). `block`-level images can be centered using [the `.mx-auto` margin utility class]([[docsref:/utilities/margin#horizontal-centering]]).
 
 <Example code={`<Placeholder width="200" height="200" class="rounded float-start" />
 <Placeholder width="200" height="200" class="rounded float-end" />`} />

site/src/content/docs/content/typography.mdx

@@ -6,7 +6,7 @@ toc: true
 
 ## Global settings
 
-Bootstrap sets basic global display, typography, and link styles. When more control is needed, check out the [textual utility classes]([[docsref:/utilities/text]]).
+Bootstrap sets basic global display, typography, and link styles. When more control is needed, check out our text utilities.
 
 - Use a [native font stack]([[docsref:/content/reboot#native-font-stack]]) that selects the best `font-family` for each OS and device.
 - For a more inclusive and accessible type scale, we use the browser’s default root `font-size` (typically 16px) so visitors can customize their browser defaults as needed.
@@ -104,7 +104,7 @@ Utility classes are available for most common text-related CSS properties.
 - [Text wrapping]([[docsref:/utilities/text-wrapping])
 - [Vertical alignment]([[docsref:/utilities/vertical-align]])
 
-Change text alignment, transform, style, weight, line-height, decoration and color with our [text utilities]([[docsref:/utilities/text]]) and [color utilities]([[docsref:/utilities/colors]]).
+Change text alignment, transform, style, weight, line-height, decoration and color with our text and [color utilities]([[docsref:/utilities/colors]]).
 
 ## Abbreviations
 

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

@@ -24,7 +24,7 @@ You can find and customize these variables for key global options in Bootstrap
 | `$enable-button-pointers`      | `true` (default) or `false`        | Add “hand” cursor to non-disabled button elements. |
 | `$enable-rfs`                  | `true` (default) or `false`        | Globally enables [RFS]([[docsref:/getting-started/rfs]]). |
 | `$enable-validation-icons`     | `true` (default) or `false`        | Enables `background-image` icons within textual inputs and some custom forms for validation states. |
-| `$enable-negative-margins`     | `true` or `false` (default)        | Enables the generation of [negative margin utilities]([[docsref:/utilities/margins#negative-margin]]). |
+| `$enable-negative-margins`     | `true` or `false` (default)        | Enables the generation of [negative margin utilities]([[docsref:/utilities/margin#negative-margin]]). |
 | `$enable-deprecation-messages` | `true` (default) or `false`        | Set to `false` to hide warnings when using any of the deprecated mixins and functions that are planned to be removed in `v6`. |
 | `$enable-smooth-scroll`        | `true` (default) or `false`        | Applies `scroll-behavior: smooth` globally, except for users asking for reduced motion through [`prefers-reduced-motion` media query]([[docsref:/getting-started/accessibility#reduced-motion]]) |
 </BsTable>

site/src/content/docs/docsref.mdx

@@ -32,12 +32,6 @@ robots: noindex,follow
   This is inline details content. It supports **markdown** formatting and will be hidden until clicked.
 </Details>
 
-<Details name="info-example" />
-
-<Details name="warning-example" />
-
-<Details name="danger-example" />
-
 ## Code example
 
 ```scss

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

@@ -85,7 +85,7 @@ Output:
 
 Use the `values` key to specify which values for the specified `property` should be used in the generated class names and rules. Can be a list or map (set in the utilities or in a Sass variable).
 
-As a list, like with [`text-decoration` utilities]([[docsref:/utilities/text#text-decoration]]):
+As a list, like with [`text-decoration` utilities]([[docsref:/utilities/text-decoration]]):
 
 ```scss
 values: none underline line-through

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

@@ -6,7 +6,6 @@ alias:
   - /docs/5.3/utilities/border-color/
 mdn: https://developer.mozilla.org/en-US/docs/Web/CSS/border-color
 utility:
-  - border-attr
   - border-color
   - border-color-subtle
   - border-opacity

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

@@ -1,63 +0,0 @@
----
-title: Sizing
-description: Easily make an element as wide or as tall with our width and height utilities.
-toc: true
-utility:
-  - width
-  - height
-  - max-width
-  - max-height
-  - min-width
-  - min-height
-  - viewport-width
-  - viewport-height
-  - min-viewport-width
-  - min-viewport-height
----
-
-## Relative to the parent
-
-Width and height utilities are generated from the utility API in `_utilities.scss`. Includes support for `25%`, `50%`, `75%`, `100%`, and `auto` by default. Modify those values as you need to generate different utilities here.
-
-<Example class="bd-example-flex" code={`<div class="w-25 p-3">Width 25%</div>
-<div class="w-50 p-3">Width 50%</div>
-<div class="w-75 p-3">Width 75%</div>
-<div class="w-100 p-3">Width 100%</div>
-<div class="w-auto p-3">Width auto</div>`} />
-
-<Example class="bd-example-flex" code={`<div style="height: 100px;">
-    <div class="h-25 d-inline-block" style="width: 120px;">Height 25%</div>
-    <div class="h-50 d-inline-block" style="width: 120px;">Height 50%</div>
-    <div class="h-75 d-inline-block" style="width: 120px;">Height 75%</div>
-    <div class="h-100 d-inline-block" style="width: 120px;">Height 100%</div>
-    <div class="h-auto d-inline-block" style="width: 120px;">Height auto</div>
-  </div>`} />
-
-You can also use `max-width: 100%;` and `max-height: 100%;` utilities as needed.
-
-<Example class="bd-example-flex" code={`<div style="width: 50%; height: 100px;">
-    <div class="max-w-100" style="width: 200%;">Max-width 100%</div>
-  </div>`} />
-
-<Example class="bd-example-flex" code={`<div style="height: 100px;">
-    <div class="max-h-100" style="width: 100px; height: 200px;">Max-height 100%</div>
-  </div>`} />
-
-## Relative to the viewport
-
-You can also use utilities to set the width and height relative to the viewport.
-
-```html
-<div class="min-vw-100">Min-width 100vw</div>
-<div class="min-vh-100">Min-height 100vh</div>
-<div class="vw-100">Width 100vw</div>
-<div class="vh-100">Height 100vh</div>
-```
-
-## CSS
-
-### Sass utilities API
-
-Sizing 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-sizing" file="scss/_utilities.scss" />

site/src/content/docs/utilities/word-break.mdx

@@ -3,7 +3,7 @@ title: Word break
 description: Prevent long strings of text from breaking your components' layout by using word break utilities.
 toc: true
 utility:
-  - text-break
+  - word-wrap
 ---
 
 Prevent long strings of text from breaking your components' layout by using `.text-break` to set `word-wrap: break-word` and `word-break: break-word`. We use `word-wrap` instead of the more common `overflow-wrap` for wider browser support, and add the deprecated `word-break: break-word` to avoid issues with flex containers.