feat(utilities)!: close the utility gaps and name the sizing and underline families after their properties

.bundlewatch.config.json

@@ -18,19 +18,19 @@
     },
     {
       "path": "./dist/css/coreui-utilities.css",
-      "maxSize": "19.5 kB"
+      "maxSize": "20 kB"
     },
     {
       "path": "./dist/css/coreui-utilities.min.css",
-      "maxSize": "17.75 kB"
+      "maxSize": "18.5 kB"
     },
     {
       "path": "./dist/css/coreui.css",
       "maxSize": "71 kB"
     },
     {
       "path": "./dist/css/coreui.min.css",
-      "maxSize": "65.5 kB"
+      "maxSize": "66.25 kB"
     },
     {
       "path": "./dist/js/coreui.bundle.js",

build/class-api-removals.json

@@ -147,19 +147,22 @@
   "link-dark": "The theme classes colour a link now: Reboot resolves a link's colour from --cui-theme-fg, which every .theme-* class sets, so <a class=\"theme-primary\"> replaces <a class=\"link-primary\">. The theme slot is a tone picked for text rather than the raw brand colour - it darkens on a light background and lightens on a dark one, where .link-* gave the same colour in both. Pair it with .link-underline for the underline, which now defaults to currentColor. For .link-body-emphasis use .text-body-emphasis.",
   "link-info": "The theme classes colour a link now: Reboot resolves a link's colour from --cui-theme-fg, which every .theme-* class sets, so <a class=\"theme-primary\"> replaces <a class=\"link-primary\">. The theme slot is a tone picked for text rather than the raw brand colour - it darkens on a light background and lightens on a dark one, where .link-* gave the same colour in both. Pair it with .link-underline for the underline, which now defaults to currentColor. For .link-body-emphasis use .text-body-emphasis.",
   "link-light": "The theme classes colour a link now: Reboot resolves a link's colour from --cui-theme-fg, which every .theme-* class sets, so <a class=\"theme-primary\"> replaces <a class=\"link-primary\">. The theme slot is a tone picked for text rather than the raw brand colour - it darkens on a light background and lightens on a dark one, where .link-* gave the same colour in both. Pair it with .link-underline for the underline, which now defaults to currentColor. For .link-body-emphasis use .text-body-emphasis.",
+  "link-offset-*": "Renamed to .underline-offset-* in v6, keeping the same scale and the -hover variants. The class sets text-underline-offset on any element, not only a link, and it now sits next to .underline-thickness-* which already carried that name: .link-offset-2-hover becomes .underline-offset-2-hover.",
   "link-primary": "The theme classes colour a link now: Reboot resolves a link's colour from --cui-theme-fg, which every .theme-* class sets, so <a class=\"theme-primary\"> replaces <a class=\"link-primary\">. The theme slot is a tone picked for text rather than the raw brand colour - it darkens on a light background and lightens on a dark one, where .link-* gave the same colour in both. Pair it with .link-underline for the underline, which now defaults to currentColor. For .link-body-emphasis use .text-body-emphasis.",
   "link-secondary": "The theme classes colour a link now: Reboot resolves a link's colour from --cui-theme-fg, which every .theme-* class sets, so <a class=\"theme-primary\"> replaces <a class=\"link-primary\">. The theme slot is a tone picked for text rather than the raw brand colour - it darkens on a light background and lightens on a dark one, where .link-* gave the same colour in both. Pair it with .link-underline for the underline, which now defaults to currentColor. For .link-body-emphasis use .text-body-emphasis.",
   "link-success": "The theme classes colour a link now: Reboot resolves a link's colour from --cui-theme-fg, which every .theme-* class sets, so <a class=\"theme-primary\"> replaces <a class=\"link-primary\">. The theme slot is a tone picked for text rather than the raw brand colour - it darkens on a light background and lightens on a dark one, where .link-* gave the same colour in both. Pair it with .link-underline for the underline, which now defaults to currentColor. For .link-body-emphasis use .text-body-emphasis.",
-  "link-underline-dark": "Removed in v6 with the `dark` theme colour. Rename it to the `-inverse` variant: `inverse` resolves to gray-900 in light mode and gray-100 in dark, so it stands against the page in both schemes instead of staying near-black on a near-black one.",
-  "link-underline-light": "Removed in v6 with the `light` theme colour. Rename it to the `-secondary` variant, which is the light neutral now (gray-100 in light mode, gray-600 in dark). Where the class was painting a plain panel rather than naming a colour, use .bg-4 or .bg-3.",
+  "link-underline": "Renamed to .underline in v6, with the colour variants following it (.link-underline-danger becomes .underline-danger). The class sets text-decoration-color on any element, not only a link, and it now sits next to .underline-offset-* and .underline-thickness-*.",
+  "link-underline-*": "Renamed to .underline-* in v6: .link-underline-danger becomes .underline-danger, and the opacity steps become .underline-opacity-* (.link-underline-opacity-50-hover becomes .underline-opacity-50-hover). The class sets text-decoration-color on any element, not only a link, and it now sits next to .underline-offset-* and .underline-thickness-*. The `dark` and `light` variants have no renamed form — those theme colours are gone in v6: use .underline-inverse for `dark` (gray-900 in light mode, gray-100 in dark, so it stands against the page in both) and .underline-secondary for `light` (the light neutral now).",
   "link-warning": "The theme classes colour a link now: Reboot resolves a link's colour from --cui-theme-fg, which every .theme-* class sets, so <a class=\"theme-primary\"> replaces <a class=\"link-primary\">. The theme slot is a tone picked for text rather than the raw brand colour - it darkens on a light background and lightens on a dark one, where .link-* gave the same colour in both. Pair it with .link-underline for the underline, which now defaults to currentColor. For .link-body-emphasis use .text-body-emphasis.",
   "list-group-item-dark": "Removed in v6 with the `dark` theme colour. Rename it to the `-inverse` variant: `inverse` resolves to gray-900 in light mode and gray-100 in dark, so it stands against the page in both schemes instead of staying near-black on a near-black one.",
   "list-group-item-light": "Removed in v6 with the `light` theme colour. Rename it to the `-secondary` variant, which is the light neutral now (gray-100 in light mode, gray-600 in dark). Where the class was painting a plain panel rather than naming a colour, use .bg-4 or .bg-3.",
+  "mh-100": "Renamed to .max-h-100 in v6. The abbreviation clashed with the new .min-h-* family — .mh next to .min-h reads as two conventions on one axis, so both ends spell the property out now: .max-h-100, .min-h-0, .min-h-100.",
   "modal-backdrop": "The backdrop is the native ::backdrop pseudo-element now - no element is inserted into the DOM. Style it through the --cui-modal-backdrop-bg / --cui-modal-backdrop-opacity tokens on .modal.",
   "modal-content": "Modal renders on the native <dialog> element now: the positioning shell and the content box are the single <dialog class=\"modal\"> element, so the wrapper layers are gone. Size and fullscreen modifiers sit on the dialog itself. Legacy v5 markup is auto-upgraded at runtime (with a console warning) until v7 - see \"Modal and Offcanvas on the native dialog\" in the migration guide.",
   "modal-dialog": "Modal renders on the native <dialog> element now: the positioning shell and the content box are the single <dialog class=\"modal\"> element, so the wrapper layers are gone. Size and fullscreen modifiers sit on the dialog itself. Legacy v5 markup is auto-upgraded at runtime (with a console warning) until v7 - see \"Modal and Offcanvas on the native dialog\" in the migration guide.",
   "modal-dialog-centered": "The browser centers a native modal <dialog> in the viewport, so centering needs no class - it is the default and only behavior.",
   "modal-dialog-scrollable": "Renamed to .modal-scrollable, placed on the <dialog class=\"modal\"> itself now that the wrapper layers are gone.",
+  "mw-100": "Renamed to .max-w-100 in v6. The abbreviation clashed with the new .min-w-* family — .mw next to .min-w reads as two conventions on one axis, so both ends spell the property out now: .max-w-100, .min-w-0, .min-w-100.",
   "offcanvas-backdrop": "The backdrop is the native ::backdrop pseudo-element now - no element is inserted into the DOM. Style it through the --cui-offcanvas-backdrop-bg / --cui-offcanvas-backdrop-opacity tokens on .offcanvas.",
   "pointer-event": "Touch is handled natively by the scroll viewport now - drag, swipe and momentum come from the browser, so the touch-action override class has nothing to do.",
   "progress-group": "Removed in v6 — a CoreUI-only addition that utilities already cover. It was a flex row with a 100px label column, a header row and a 2px gap between bars. Use .hstack / .vstack with a gap-* utility and put the label column's width in a style; see \"Grouping bars\" on the Progress page.",

docs/src/content/docs/content/reboot.mdx

@@ -53,7 +53,7 @@ The `<html>` and `<body>` elements are updated to provide better page-wide defau
 
 ## Links
 
-Links take `--cui-link-color` and switch to `--cui-link-hover-color` on hover. Inside anything that sets a theme, both follow it: the link reads `--cui-theme-fg` and hovers to `--cui-theme-fg-emphasis`, so a link on a colored surface stays part of that surface. The underline sits `.2em` below the text through `--cui-link-underline-offset` (Sass knob: `$link-underline-offset`), clearing descenders; the [`.link-offset-*` utilities](/utilities/link/#underline-offset) adjust it per link, and setting the token to `auto` restores the browser default.
+Links take `--cui-link-color` and switch to `--cui-link-hover-color` on hover. Inside anything that sets a theme, both follow it: the link reads `--cui-theme-fg` and hovers to `--cui-theme-fg-emphasis`, so a link on a colored surface stays part of that surface. The underline sits `.2em` below the text through `--cui-link-underline-offset` (Sass knob: `$link-underline-offset`), clearing descenders; the [`.underline-offset-*` utilities](/utilities/link/#underline-offset) adjust it per link, and setting the token to `auto` restores the browser default.
 
 Placeholder links — an `<a>` with neither `href` nor a class — keep the surrounding text color and get no underline, so an anchor waiting for its URL doesn't read as a working link.
 

docs/src/content/docs/helpers/icon-link.mdx

@@ -81,7 +81,7 @@ Customize the icon link Sass variables to modify all icon link styles across you
 
 Modify icon links with any of [our link utilities](/utilities/link/) for modifying underline color and offset.
 
-<Example code={`<a class="icon-link icon-link-hover theme-success link-underline-success link-underline-opacity-25" href="#">
+<Example code={`<a class="icon-link icon-link-hover theme-success underline-success underline-opacity-25" href="#">
     Icon link
     <svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 16 16" aria-hidden="true">
       <path d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z"/>

docs/src/content/docs/migration/v6.mdx

@@ -1599,7 +1599,7 @@ Multi Select's option indicators moved with it — they render as a decorative
 - **The underline sits `.2em` below the text.** `<a>` reads the new
   `--cui-link-underline-offset` token (knob: `$link-underline-offset`), so
   underlines clear descenders instead of cutting through them. The
-  `.link-offset-*` utilities and `.icon-link` still override it per element;
+  `.underline-offset-*` utilities and `.icon-link` still override it per element;
   set the token to `auto` for the old browser default.
 - **`accent-color: var(--cui-primary)` on `:root`.** Native controls we don't
   restyle — a bare checkbox, radio, range or `<progress>` — follow the brand
@@ -2050,19 +2050,19 @@ Multi Select's option indicators moved with it — they render as a decorative
 
   ```html
   <!-- v5 -->
-  <a href="#" class="link-primary link-underline-opacity-25">Primary link</a>
+  <a href="#" class="link-primary underline-opacity-25">Primary link</a>
 
   <!-- v6 -->
-  <a href="#" class="theme-primary link-underline link-underline-opacity-25">Primary link</a>
+  <a href="#" class="theme-primary underline underline-opacity-25">Primary link</a>
   ```
 
   Two things change beyond the class name. The theme slot is a **tone picked for
   text** rather than the raw brand colour — it darkens on a light background and
   lightens on a dark one, where `.link-*` gave the same colour in both, so the
   link is more readable in dark mode and slightly different in light. And the
-  underline needs `.link-underline` to carry it; its colour now defaults to
+  underline needs `.underline` to carry it; its colour now defaults to
   `currentColor`, so it follows the theme unless you name one with
-  `.link-underline-{color}`.
+  `.underline-{color}`.
 
   `.link-body-emphasis` becomes `.text-body-emphasis`.
 
@@ -2875,7 +2875,7 @@ now, and the two neutrals swap ends of the gray scale between schemes.
 - **Every `-light` and `-dark` class is gone.** Rename `-dark` to `-inverse` and
   `-light` to `-secondary` across `alert`, `bg`, `border` (and its per-side
   variants), `btn`, `btn-ghost`, `btn-outline`, `btn-subtle`, `callout`, `chip`,
-  `focus-ring`, `link-underline`, `list-group-item`, `shadow`, `table`, `text`,
+  `focus-ring`, `underline`, `list-group-item`, `shadow`, `table`, `text`,
   `text-bg` and `theme`, plus the `-subtle` and `-emphasis` families. The
   colour-scheme opt-ins keep their names: `.navbar-dark`, `.dropdown-menu-dark`,
   `.carousel-dark` and `.sidebar-dark` are unaffected, as is `.fw-light`.
@@ -3075,7 +3075,7 @@ and still compose. What changes is where the translucency expression lives:
   ignored the opacity knob every other colour utility honoured.
 - Every custom property a utility assigns is registered
   `@property { inherits: false }`, which now covers `--cui-bg`, `--cui-text`,
-  `--cui-border` and `--cui-link-underline` as well — so a colour set on a
+  `--cui-border` and `--cui-underline` as well — so a colour set on a
   container cannot leak into a descendant that only carries an opacity class.
 
 `at-property: false` still opts a utility out of that registration, for the one
@@ -3215,7 +3215,7 @@ Five names are now registered with
 `inherits: false`, so each utility is scoped to the element it is applied to:
 `--cui-text-opacity`, `--cui-bg-opacity`,
 `--cui-border-opacity`, `--cui-link-opacity`,
-`--cui-link-underline-opacity`. Upstream v6 does the same.
+`--cui-underline-opacity`. Upstream v6 does the same.
 
 - **If you relied on the leak** — one `.link-opacity-*` on a wrapper fading a
   whole block of links — put the utility on each element, or set the custom
@@ -3665,3 +3665,46 @@ Prefer the `.d-sidebar-narrow*` names in new markup.
   support the media feature gets no transition at all. Rules that force
   `transition: none` stay outside the query — they disable motion on purpose,
   so they have to reach every reader.
+- **The sizing utilities spell the property out: `.mw-100` → `.max-w-100`,
+  `.mh-100` → `.max-h-100`.** The abbreviations were the only ones on that axis:
+  the floor classes are `.min-vw-100`, `.min-vh-100`, `.min-dvw-100`, and the
+  new `.min-w-*` / `.min-h-*` join them, so `.mw` sitting next to `.min-w` read
+  as two conventions for one property. Both ends are now written the same way.
+- **`.link-offset-*` is `.underline-offset-*`.** Same three steps, same
+  `-hover` variants — `.link-offset-2-hover` becomes
+  `.underline-offset-2-hover`. The class sets `text-underline-offset` on any
+  element, not just a link, and `.underline-thickness-*` next to it already
+  carried the property-based name.
+- **New utilities:** `.border-x` / `.border-y` (and their `-0` forms) set the
+  `border-inline` / `border-block` shorthands, so a facing pair of borders takes
+  one class instead of two; `.min-w-{0|100}` and `.min-h-{0|100}` set a floor —
+  `.min-w-0` is what releases the `min-width: auto` on a flex child so a
+  `.text-truncate` sibling can actually truncate; `.animation-{shake|pop}` ship
+  their keyframes with them, prefixed so they cannot be redefined by a bare
+  `shake` or `pop` of your own, and stand down under
+  `prefers-reduced-motion: reduce`; `.color-scheme-{light|dark}` sets CSS
+  `color-scheme`, which is what the browser reads to paint form controls and
+  scrollbars — it changes no colours of its own.
+- **`.link-underline-*` is `.underline-*`.** `.link-underline-danger` becomes
+  `.underline-danger`, and the opacity steps become `.underline-opacity-*`
+  (`.link-underline-opacity-50-hover` → `.underline-opacity-50-hover`). Like
+  `.underline-offset-*`, the class sets a `text-decoration-*` property on any
+  element rather than only on a link, and it now sits beside
+  `.underline-thickness-*`, which already carried that name. **We keep the
+  `-opacity-` segment** where upstream folds opacity into the colour class as
+  `.underline-50` — every other opacity family here reads
+  `.bg-opacity-*` / `.text-opacity-*` / `.link-opacity-*`, and one family
+  spelling it differently is what this pass is removing.
+- **New `.rounded-size-*`.** It writes the radius into `--cui-rounded-size`
+  without setting `border-radius` itself, and the unprefixed corner classes
+  (`.rounded`, `.rounded-top`, `.rounded-end`, `.rounded-bottom`,
+  `.rounded-start`) now read that token, so one size class drives whichever
+  corners you round. With no `.rounded-size-*` in scope they fall back to
+  `--cui-border-radius`, so existing markup renders unchanged; the numbered
+  classes (`.rounded-3`, `.rounded-top-3`) set their own value and ignore it.
+- **The derived colour utilities compose with their opacity classes.**
+  `.bg-*-subtle`, `.bg-*-muted`, `.border-*-subtle` and `.text-*-emphasis` each
+  wrote the property directly, so `.bg-opacity-50` on a `.bg-primary-subtle`
+  did nothing while the same class on `.bg-primary` worked. They now declare
+  `--cui-bg` / `--cui-border` / `--cui-text` and resolve through the same
+  `color-mix()` as the base families. Nothing changes at full opacity.

docs/src/content/docs/utilities/border-radius.mdx

@@ -2,7 +2,7 @@
 title: "Bootstrap 6 Border Radius"
 name: "Border radius"
 description: "Round the corners of an element with our border-radius utilities, from a subtle radius to a full pill."
-utility: "rounded"
+utility: ["rounded-size", "rounded"]
 ---
 
 ## Examples
@@ -34,6 +34,18 @@ Use the scaling classes for larger or smaller rounded corners. Sizes range from
   <svg class="docs-placeholder-img rounded-circle" width="75" height="75" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Completely round image" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Completely round image</title><rect width="100%" height="100%" fill="#868e96"></rect><text x="50%" y="50%" fill="#dee2e6" dy=".3em"></text></svg>
   <svg class="docs-placeholder-img rounded-pill" width="150" height="75" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Rounded pill image" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Rounded pill image</title><rect width="100%" height="100%" fill="#868e96"></rect><text x="50%" y="50%" fill="#dee2e6" dy=".3em"></text></svg>`} />
 
+## Setting the size without applying it
+
+<AddedIn version="6.0.0" /> `.rounded-size-*` writes the radius into `--cui-rounded-size` without setting `border-radius` itself. The unprefixed corner classes — `.rounded`, `.rounded-top`, `.rounded-end`, `.rounded-bottom`, `.rounded-start` — read that token, so one size class drives whichever corners you round.
+
+<Example class="docs-example-rounded-utils" html={`<div class="rounded-size-5 d-flex gap-3">
+    <div class="rounded-top bg-3 p-4">Top</div>
+    <div class="rounded-start bg-3 p-4">Start</div>
+    <div class="rounded bg-3 p-4">All</div>
+  </div>`} />
+
+Without a `.rounded-size-*` in scope the corner classes fall back to `--cui-border-radius`, so existing markup is unaffected. Numbered classes such as `.rounded-3` and `.rounded-top-3` set their own value and ignore the token.
+
 ## Customizing
 
 ### CSS variables