Rename mh-* and mw-* to max-h/w-*, add additional width and height va… (#41687)

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

Fixes #41330, fixes #40674.

* Bump bundlewatch

.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",

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,

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