v6: More utilities API, docs, tests (#42381)

* Utilities API and class improvements

* Expand utility API test coverage

* Update utilities API and border-radius docs

* Fix bundlewatch

* Introduce `@mixin generate-utilities-loop()`

* Add text wrapping utilities in Sass utilities API in the docs

* Copy updates, links, callout for postcss prefix, fix a border-radius

* inline warning

* error over warn

* Fix bundlewatch

* more copy edits

* fix layout and headings

* lint

---------

Co-authored-by: Julien Déramond <juderamond@gmail.com>

Author: mdo

.bundlewatch.config.json

@@ -18,19 +18,19 @@
     },
     {
       "path": "./dist/css/bootstrap-utilities.css",
-      "maxSize": "17.75 kB"
+      "maxSize": "18.0 kB"
     },
     {
       "path": "./dist/css/bootstrap-utilities.min.css",
       "maxSize": "16.75 kB"
     },
     {
       "path": "./dist/css/bootstrap.css",
-      "maxSize": "48.25 kB"
+      "maxSize": "48.5 kB"
     },
     {
       "path": "./dist/css/bootstrap.min.css",
-      "maxSize": "45.0 kB"
+      "maxSize": "45.25 kB"
     },
     {
       "path": "./dist/js/bootstrap.bundle.js",

scss/_utilities.scss

@@ -128,12 +128,12 @@ $utilities: map.merge(
       values: $position-values
     ),
     "start": (
-      property: left,
+      property: inset-inline-start,
       class: start,
       values: $position-values
     ),
     "end": (
-      property: right,
+      property: inset-inline-end,
       class: end,
       values: $position-values
     ),
@@ -188,13 +188,15 @@ $utilities: map.merge(
       )
     ),
     "border-y": (
+      class: border-y,
       property: border-block,
       values: (
         null: var(--border-width) var(--border-style) var(--border-color),
         0: 0,
       )
     ),
     "border-x": (
+      class: border-x,
       property: border-inline,
       values: (
         null: var(--border-width) var(--border-style) var(--border-color),
@@ -375,8 +377,8 @@ $utilities: map.merge(
       responsive: true,
       property: justify-self,
       values: (
-        start: flex-start,
-        end: flex-end,
+        start: start,
+        end: end,
         center: center,
       )
     ),
@@ -687,19 +689,13 @@ $utilities: map.merge(
       values: lowercase uppercase capitalize
     ),
     // scss-docs-end utils-text-transform
-    // "white-space": (
-    //   property: white-space,
-    //   class: text,
-    //   values: (
-    //     wrap: normal,
-    //     nowrap: nowrap,
-    //   )
-    // ),
+    // scss-docs-start utils-text-wrap
     "text-wrap": (
-      property: white-space,
+      property: text-wrap,
       class: text,
       values: wrap nowrap balance pretty,
     ),
+    // scss-docs-end utils-text-wrap
     // scss-docs-start utils-text-break
     "word-wrap": (
       property: word-wrap word-break,
@@ -709,12 +705,6 @@ $utilities: map.merge(
     // scss-docs-end utils-text-break
     // scss-docs-end utils-text
     // scss-docs-start utils-color
-    // "color-attr": (
-    //   selector: "attr-includes",
-    //   class: "fg-",
-    //   property: color,
-    //   values: var(--fg),
-    // ),
     "fg": (
       property: (
         "--fg": null,
@@ -870,7 +860,10 @@ $utilities: map.merge(
     // scss-docs-end utils-interaction
     // scss-docs-start utils-border-radius
     "border-radius": (
-      property: border-radius,
+      property: (
+        "--rounded-size": null,
+        "border-radius": var(--rounded-size)
+      ),
       class: rounded,
       values: map.merge(
         $radii,
@@ -881,49 +874,61 @@ $utilities: map.merge(
         )
       )
     ),
+    "rounded-size": (
+      property: --rounded-size,
+      class: rounded-size,
+      values: map.merge(
+        $radii,
+        (
+          null: map.get($radii, 5),
+          circle: 50%,
+          pill: var(--radius-pill)
+        )
+      )
+    ),
     "rounded-top": (
       property: border-start-start-radius border-start-end-radius,
       class: rounded-top,
       values: map.merge(
         $radii,
         (
-          null: map.get($radii, 5),
+          null: var(--rounded-size, var(--radius-5)),
           circle: 50%,
           pill: var(--radius-pill)
         )
       )
     ),
     "rounded-end": (
-      property: border-end-end-radius border-end-start-radius,
+      property: border-start-end-radius border-end-end-radius,
       class: rounded-end,
       values: map.merge(
         $radii,
         (
-          null: map.get($radii, 5),
+          null: var(--rounded-size, var(--radius-5)),
           circle: 50%,
           pill: var(--radius-pill)
         )
       )
     ),
     "rounded-bottom": (
-      property: border-end-end-radius border-end-start-radius,
+      property: border-end-start-radius border-end-end-radius,
       class: rounded-bottom,
       values: map.merge(
         $radii,
         (
-          null: map.get($radii, 5),
+          null: var(--rounded-size, var(--radius-5)),
           circle: 50%,
           pill: var(--radius-pill)
         )
       )
     ),
     "rounded-start": (
-      property: border-start-start-radius border-start-end-radius,
+      property: border-start-start-radius border-end-start-radius,
       class: rounded-start,
       values: map.merge(
         $radii,
         (
-          null: map.get($radii, 5),
+          null: var(--rounded-size, var(--radius-5)),
           circle: 50%,
           pill: var(--radius-pill)
         )