From 129c1604db8345163e0294cbfae77bf56d94a348 Mon Sep 17 00:00:00 2001
From: Mark Otto <markd.otto@gmail.com>
Date: Tue, 26 Aug 2025 23:05:12 -0700
Subject: [PATCH] =?UTF-8?q?Rename=20mh-*=20and=20mw-*=20to=20max-h/w-*,=20?=
 =?UTF-8?q?add=20additional=20width=20and=20height=20va=E2=80=A6=20(#41687?=
 =?UTF-8?q?)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Rename mh-* and mw-* to max-h/w-*, add additional width and height values

Fixes #41330, fixes #40674.

* Bump bundlewatch
---
 .bundlewatch.config.json                   |  2 +-
 scss/_utilities.scss                       | 30 +++++++++++++++++++---
 site/src/content/docs/utilities/sizing.mdx |  4 +--
 3 files changed, 29 insertions(+), 7 deletions(-)

diff --git a/.bundlewatch.config.json b/.bundlewatch.config.json
index 6f680664ca..69e6ca746f 100644
--- a/.bundlewatch.config.json
+++ b/.bundlewatch.config.json
@@ -22,7 +22,7 @@
     },
     {
       "path": "./dist/css/bootstrap-utilities.min.css",
-      "maxSize": "10.75 kB"
+      "maxSize": "11.0 kB"
     },
     {
       "path": "./dist/css/bootstrap.css",
diff --git a/scss/_utilities.scss b/scss/_utilities.scss
index 0343850127..8f1039d044 100644
--- a/scss/_utilities.scss
+++ b/scss/_utilities.scss
@@ -210,14 +210,25 @@ $utilities: map-merge(
         50: 50%,
         75: 75%,
         100: 100%,
-        auto: auto
+        auto: auto,
+        min: min-content,
+        max: max-content,
+        fit: fit-content,
       )
     ),
     "max-width": (
       property: max-width,
-      class: mw,
+      class: max-w,
       values: (100: 100%)
     ),
+    "min-width": (
+      property: min-width,
+      class: min-w,
+      values: (
+        0: 0,
+        100: 100%
+      )
+    ),
     "viewport-width": (
       property: width,
       class: vw,
@@ -236,14 +247,25 @@ $utilities: map-merge(
         50: 50%,
         75: 75%,
         100: 100%,
-        auto: auto
+        auto: auto,
+        min: min-content,
+        max: max-content,
+        fit: fit-content,
       )
     ),
     "max-height": (
       property: max-height,
-      class: mh,
+      class: max-h,
       values: (100: 100%)
     ),
+    "min-height": (
+      property: min-height,
+      class: min-h,
+      values: (
+        0: 0,
+        100: 100%,
+      ),
+    ),
     "viewport-height": (
       property: height,
       class: vh,
diff --git a/site/src/content/docs/utilities/sizing.mdx b/site/src/content/docs/utilities/sizing.mdx
index 77f98d71d5..dd554f9331 100644
--- a/site/src/content/docs/utilities/sizing.mdx
+++ b/site/src/content/docs/utilities/sizing.mdx
@@ -25,11 +25,11 @@ Width and height utilities are generated from the utility API in `_utilities.scs
 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="mw-100" style="width: 200%;">Max-width 100%</div>
+    <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="mh-100" style="width: 100px; height: 200px;">Max-height 100%</div>
+    <div class="max-h-100" style="width: 100px; height: 200px;">Max-height 100%</div>
   </div>`} />
 
 ## Relative to the viewport