docs: update content

Author: mrholek

Diff for: docs/assets/scss/_component-examples.scss

@@ -123,13 +123,13 @@
   .fixed-top,
   .sticky-top {
     position: static;
-    margin: calc(var(--cd-example-padding) * -1) calc(var(--cd-example-padding) * -1) var(--cd-example-padding); // stylelint-disable-line function-disallowed-list
+    margin: calc(-1 * var(--cd-example-padding)) calc(-1 * var(--cd-example-padding)) var(--cd-example-padding); // stylelint-disable-line function-disallowed-list
   }
 
   .fixed-bottom,
   .sticky-bottom {
     position: static;
-    margin: var(--cd-example-padding) calc(var(--cd-example-padding) * -1) calc(var(--cd-example-padding) * -1); // stylelint-disable-line function-disallowed-list
+    margin: var(--cd-example-padding) calc(-1 * var(--cd-example-padding)) calc(-1 * var(--cd-example-padding)); // stylelint-disable-line function-disallowed-list
 
   }
 

Diff for: docs/content/forms/checks-radios.md

@@ -21,14 +21,14 @@ Our checks use custom Bootstrap icons to indicate checked or indeterminate state
 
 {{< example >}}
 <div class="form-check">
-  <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
-  <label class="form-check-label" for="flexCheckDefault">
+  <input class="form-check-input" type="checkbox" value="" id="checkDefault">
+  <label class="form-check-label" for="checkDefault">
     Default checkbox
   </label>
 </div>
 <div class="form-check">
-  <input class="form-check-input" type="checkbox" value="" id="flexCheckChecked" checked>
-  <label class="form-check-label" for="flexCheckChecked">
+  <input class="form-check-input" type="checkbox" value="" id="checkChecked" checked>
+  <label class="form-check-label" for="checkChecked">
     Checked checkbox
   </label>
 </div>
@@ -40,8 +40,8 @@ Checkboxes can utilize the `:indeterminate` pseudo class when manually set via J
 
 {{< example class="docs-example-indeterminate">}}
 <div class="form-check">
-  <input class="form-check-input" type="checkbox" value="" id="flexCheckIndeterminate">
-  <label class="form-check-label" for="flexCheckIndeterminate">
+  <input class="form-check-input" type="checkbox" value="" id="checkIndeterminate">
+  <label class="form-check-label" for="checkIndeterminate">
     Indeterminate checkbox
   </label>
 </div>
@@ -53,14 +53,14 @@ Add the `disabled` attribute and the associated `<label>`s are automatically sty
 
 {{< example >}}
 <div class="form-check">
-  <input class="form-check-input" type="checkbox" value="" id="flexCheckDisabled" disabled>
-  <label class="form-check-label" for="flexCheckDisabled">
+  <input class="form-check-input" type="checkbox" value="" id="checkDisabled" disabled>
+  <label class="form-check-label" for="checkDisabled">
     Disabled checkbox
   </label>
 </div>
 <div class="form-check">
-  <input class="form-check-input" type="checkbox" value="" id="flexCheckCheckedDisabled" checked disabled>
-  <label class="form-check-label" for="flexCheckCheckedDisabled">
+  <input class="form-check-input" type="checkbox" value="" id="checkCheckedDisabled" checked disabled>
+  <label class="form-check-label" for="checkCheckedDisabled">
     Disabled checked checkbox
   </label>
 </div>

Diff for: docs/content/helpers/icon-link.md

@@ -1,16 +1,15 @@
 ---
 layout: docs
 title: Icon link
-description: Quickly create stylized hyperlinks with Bootstrap Icons or other icons.
+description: Quickly create stylized hyperlinks with CoreUI Icons or other icons.
 group: helpers
 toc: true
-bootstrap: true
-added: 5.3
+added: "5.3"
 ---
 
 The icon link helper component modifies our default link styles to enhance their appearance and quickly align any pairing of icon and text. Alignment is set via inline flexbox styling and a default `gap` value. We stylize the underline with a custom offset and color. Icons are automatically sized to `1em` to best match their associated text's `font-size`.
 
-Icon links assume [Bootstrap Icons](https://icons.getbootstrap.com) are being used, but you can use any icon or image you like.
+Icon links assume [CoreUI Icons](https://coreui.io/icons/) are being used, but you can use any icon or image you like.
 
 {{< callout >}}
 When icons are purely decorative, they should be hidden from assistive technologies using `aria-hidden="true"`, as we've done in our examples. For icons that convey meaning, provide an appropriate text alternative by adding `role="img"` and an appropriate `aria-label="..."` to the SVGs.
@@ -22,15 +21,19 @@ Take a regular `<a>` element, add `.icon-link`, and insert an icon on either the
 
 {{< example >}}
 <a class="icon-link" href="#">
-  <svg class="bi" aria-hidden="true"><use xlink:href="#box-seam"></use></svg>
+  <svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 16 16" aria-hidden="true">  
+    <path d="M8.186 1.113a.5.5 0 0 0-.372 0L1.846 3.5l2.404.961L10.404 2l-2.218-.887zm3.564 1.426L5.596 5 8 5.961 14.154 3.5l-2.404-.961zm3.25 1.7-6.5 2.6v7.922l6.5-2.6V4.24zM7.5 14.762V6.838L1 4.239v7.923l6.5 2.6zM7.443.184a1.5 1.5 0 0 1 1.114 0l7.129 2.852A.5.5 0 0 1 16 3.5v8.662a1 1 0 0 1-.629.928l-7.185 2.874a.5.5 0 0 1-.372 0L.63 13.09a1 1 0 0 1-.63-.928V3.5a.5.5 0 0 1 .314-.464L7.443.184z"/>
+  </svg>
   Icon link
 </a>
 {{< /example >}}
 
 {{< example >}}
 <a class="icon-link" href="#">
   Icon link
-  <svg class="bi" aria-hidden="true"><use xlink:href="#arrow-right"></use></svg>
+  <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"/>
+  </svg>
 </a>
 {{< /example >}}
 
@@ -41,7 +44,9 @@ Add `.icon-link-hover` to move the icon to the right on hover.
 {{< example >}}
 <a class="icon-link icon-link-hover" href="#">
   Icon link
-  <svg class="bi" aria-hidden="true"><use xlink:href="#arrow-right"></use></svg>
+  <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"/>
+  </svg>
 </a>
 {{< /example >}}
 
@@ -57,7 +62,10 @@ Customize the hover `transform` by overriding the `--cui-icon-link-transform` CS
 
 {{< example >}}
 <a class="icon-link icon-link-hover" style="--cui-icon-link-transform: translate3d(0, -.125rem, 0);" href="#">
-  <svg class="bi" aria-hidden="true"><use xlink:href="#clipboard"></use></svg>
+  <svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 16 16" aria-hidden="true">
+    <path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z"/>
+    <path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z"/>
+  </svg>
   Icon link
 </a>
 {{< /example >}}
@@ -67,23 +75,27 @@ Customize the color by overriding the `--cui-link-*` CSS variable:
 {{< example >}}
 <a class="icon-link icon-link-hover" style="--cui-link-hover-color-rgb: 25, 135, 84;" href="#">
   Icon link
-  <svg class="bi" aria-hidden="true"><use xlink:href="#arrow-right"></use></svg>
+  <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"/>
+  </svg>
 </a>
 {{< /example >}}
 
 ### Sass variables
 
-Customize the icon link Sass variables to modify all icon link styles across your Bootstrap-powered project.
+Customize the icon link Sass variables to modify all icon link styles across your CoreUI-powered project.
 
 {{< scss-docs name="icon-link-variables" file="scss/_variables.scss" >}}
 
 ### Sass utilities API
 
-Modify icon links with any of [our link utilities]({{< docsref "/utilities/link" >}}) for modifying underline color and offset.
+Modify icon links with any of [our link utilities]({{< docsref "/utilities/link/" >}}) for modifying underline color and offset.
 
 {{< example >}}
 <a class="icon-link icon-link-hover link-success link-underline-success link-underline-opacity-25" href="#">
   Icon link
-  <svg class="bi" aria-hidden="true"><use xlink:href="#arrow-right"></use></svg>
+  <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"/>
+  </svg>
 </a>
 {{< /example >}}

Diff for: docs/content/helpers/stacks.md

@@ -11,7 +11,7 @@ added: "5.1"
 Stacks offer a shortcut for applying a number of flexbox properties to quickly and easily create layouts in Bootstrap. All credit for the concept and implementation goes to the open source [Pylon project](https://almonk.github.io/pylon/).
 
 {{< callout warning >}}
-Heads up! Support for gap utilities with flexbox was recently added to Safari, so consider verifying your intended browser support. Grid layout should have no issues. [Read more](https://caniuse.com/flexbox-gap).
+**Heads up!** Support for gap utilities with flexbox isn't available in Safari prior to 14.5, so consider verifying your intended browser support. Grid layout should have no issues. [Read more](https://caniuse.com/flexbox-gap).
 {{< /callout >}}
 
 ## Vertical

Diff for: docs/content/layout/breakpoints.md

@@ -44,7 +44,7 @@ For more information and examples on how to modify our Sass maps and variables,
 
 ## Media queries
 
-Since CoreUI for Bootstrap is developed to be mobile first, we use a handful of [media queries](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries) to create sensible breakpoints for our layouts and interfaces. These breakpoints are mostly based on minimum viewport widths and allow us to scale up elements as the viewport changes.
+Since CoreUI for Bootstrap is developed to be mobile first, we use a handful of [media queries](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries) to create sensible breakpoints for our layouts and interfaces. These breakpoints are mostly based on minimum viewport widths and allow us to scale up elements as the viewport changes.
 
 ### Min-width
 

Diff for: docs/content/layout/columns.md

@@ -224,6 +224,27 @@ There are also responsive `.order-first` and `.order-last` classes that change t
 </div>
 {{< /example >}}
 
+If you need more `.order-*` classes, you can add new ones by modifying our `$utilities` Sass map. [Read our Sass maps and loops docs]({{< docsref "/customize/sass#maps-and-loops" >}}) or [our Modify utilities docs]({{< docsref "/utilities/api#modify-utilities" >}}) for details.
+
+```scss
+$utilities: map-merge(
+  $utilities,
+  (
+    "order": map-merge(
+      map-get($utilities, "order"),
+      (
+        values: map-merge(
+          map-get(map-get($utilities, "order"), "values"),
+          (
+            6: 6, // Add a new `.order-{breakpoint}-6` utility
+            last: 7 // Change the `.order-{breakpoint}-last` utility to use the next number
+          )
+        ),
+      ),
+    ),
+  )
+);
+
 ### Offsetting columns
 
 You can offset grid columns in two ways: our responsive `.offset-` grid classes and our [margin utilities]({{< docsref "/utilities/spacing" >}}). Grid classes are sized to match columns while margins are more useful for quick layouts where the width of the offset is variable.

Diff for: docs/content/layout/css-grid.md

@@ -149,7 +149,7 @@ Similar to our default grid system, our CSS Grid allows for easy nesting of `.gr
 In practice this allows for more complex and custom layouts when compared to our default grid system.
 
 {{< example class="docs-example-cssgrid" >}}
-<div class="grid text-center" style="--cui-columns: 3;">
+<div class="grid text-center overflow-x-auto" style="--cui-columns: 3;">
   <div>
     First auto-column
     <div class="grid">

Diff for: docs/content/utilities/api.md

@@ -11,7 +11,7 @@ aliases:
 toc: true
 ---
 
-CoreUI for Bootstrap utilities are generated with our utility API and can be used to modify or extend our default set of utility classes via Sass. Our utility API is based on a series of Sass maps and functions for generating families of classes with various options. If you're unfamiliar with Sass maps, read up on the [official Sass docs](https://sass-lang.com/documentation/values/maps) to get started.
+CoreUI for Bootstrap utilities are generated with our utility API and can be used to modify or extend our default set of utility classes via Sass. Our utility API is based on a series of Sass maps and functions for generating families of classes with various options. If you're unfamiliar with Sass maps, read up on the [official Sass docs](https://sass-lang.com/documentation/values/maps/) to get started.
 
 The `$utilities` map contains all our utilities and is later merged with your custom `$utilities` map, if present. The utility map contains a keyed list of utility groups which accept the following options:
 
@@ -521,7 +521,7 @@ $utilities: map-merge(
 
 ### Remove utilities
 
-Remove any of the default utilities with the [`map-remove()` Sass function](https://sass-lang.com/documentation/modules/map#remove).
+Remove any of the default utilities with the [`map-remove()` Sass function](https://sass-lang.com/documentation/modules/map/#remove).
 
 ```scss
 @import "@coreui/coreui/scss/functions";
@@ -536,7 +536,7 @@ $utilities: map-remove($utilities, "width", "float");
 @import "@coreui/coreui/scss/utilities/api";
 ```
 
-You can also use the [`map-merge()` Sass function](https://sass-lang.com/documentation/modules/map#merge) and set the group key to `null` to remove the utility.
+You can also use the [`map-merge()` Sass function](https://sass-lang.com/documentation/modules/map/#merge) and set the group key to `null` to remove the utility.
 
 ```scss
 @import "@coreui/coreui/scss/functions";
@@ -557,7 +557,7 @@ $utilities: map-merge(
 
 ### Add, remove, modify
 
-You can add, remove, and modify many utilities all at once with the [`map-merge()` Sass function](https://sass-lang.com/documentation/modules/map#merge). Here's how you can combine the previous examples into one larger map.
+You can add, remove, and modify many utilities all at once with the [`map-merge()` Sass function](https://sass-lang.com/documentation/modules/map/#merge). Here's how you can combine the previous examples into one larger map.
 
 ```scss
 @import "@coreui/coreui/scss/functions";

Diff for: docs/content/utilities/borders.md

@@ -154,8 +154,6 @@ Add classes to an element to easily round its corners.
 {{< placeholder width="75" height="75" class="rounded-end" title="Example right rounded image" >}}
 {{< placeholder width="75" height="75" class="rounded-bottom" title="Example bottom rounded image" >}}
 {{< placeholder width="75" height="75" class="rounded-start" title="Example left rounded image" >}}
-{{< placeholder width="75" height="75" class="rounded-circle" title="Completely round image" >}}
-{{< placeholder width="150" height="75" class="rounded-pill" title="Rounded pill image" >}}
 {{< /example >}}
 
 {{< example class="docs-example-rounded-utils" >}}
@@ -168,7 +166,7 @@ Add classes to an element to easily round its corners.
 
 ### Sizes
 
-Use the scaling classes for larger or smaller rounded corners. Sizes range from `0` to `5`, and can be configured by modifying the utilities API.
+Use the scaling classes for larger or smaller rounded corners. Sizes range from `0` to `5` including `circle` and `pill`, and can be configured by modifying the utilities API.
 
 {{< example class="docs-example-rounded-utils" >}}
 {{< placeholder width="75" height="75" class="rounded-0" title="Example non-rounded image" >}}
@@ -177,6 +175,9 @@ Use the scaling classes for larger or smaller rounded corners. Sizes range from
 {{< placeholder width="75" height="75" class="rounded-3" title="Example large rounded image" >}}
 {{< placeholder width="75" height="75" class="rounded-4" title="Example larger rounded image" >}}
 {{< placeholder width="75" height="75" class="rounded-5" title="Example extra large rounded image" >}}
+{{< placeholder width="75" height="75" class="rounded-circle" title="Completely round image" >}}
+{{< placeholder width="150" height="75" class="rounded-pill" title="Rounded pill image" >}}
+
 {{< /example >}}
 
 ## Customizing

Diff for: docs/content/utilities/display.md

@@ -56,7 +56,7 @@ For faster mobile-friendly development, use responsive display classes for showi
 
 To hide elements simply use the `.d-none` class or one of the `.d-{sm,md,lg,xl,xxl}-none` classes for any responsive screen variation.
 
-To show an element only on a given interval of screen sizes you can combine one `.d-*-none` class with a `.d-*-*` class, for example `.d-none .d-md-block .d-xl-none .d-xxl-none` will hide the element for all screen sizes except on medium and large devices.
+To show an element only on a given interval of screen sizes you can combine one `.d-*-none` class with a `.d-*-*` class, for example `.d-none .d-md-block .d-xl-none` will hide the element for all screen sizes except on medium and large devices.
 
 {{< bs-table >}}
 | Screen size | Class |

Diff for: docs/content/utilities/position.md

@@ -95,7 +95,7 @@ Here are some real life examples of these classes:
 </button>
 
 <div class="position-relative py-2 px-4 text-bg-secondary border border-secondary rounded-pill">
-  Marker <svg width="1em" height="1em" viewBox="0 0 16 16" class="position-absolute top-100 start-50 translate-middle mt-1" fill="var(--cui-secondary)" xmlns="http://www.w3.org/2000/svg"><path d="M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z"/></svg>
+  Marker <svg width="1em" height="1em" viewBox="0 0 16 16" class="position-absolute top-100 start-50 translate-middle mt-1" fill="var(--cui-secondary)" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z"/></svg>
 </div>
 
 <button type="button" class="btn btn-primary position-relative">

Diff for: docs/content/utilities/spacing.md

@@ -104,11 +104,11 @@ The syntax is nearly the same as the default, positive margin utilities, but wit
 When using `display: grid` or `display: flex`, you can make use of `gap` utilities on the parent element. This can save on having to add margin utilities to individual children of a grid or flex container. Gap utilities are responsive by default, and are generated via our utilities API, based on the `$spacers` Sass map.
 
 {{< example class="docs-example-cssgrid" >}}
-<div class="grid gap-3">
-  <div class="p-2 g-col-6">Grid item 1</div>
-  <div class="p-2 g-col-6">Grid item 2</div>
-  <div class="p-2 g-col-6">Grid item 3</div>
-  <div class="p-2 g-col-6">Grid item 4</div>
+<div style="grid-template-columns: 1fr 1fr;" class="d-grid gap-3">
+  <div class="p-2">Grid item 1</div>
+  <div class="p-2">Grid item 2</div>
+  <div class="p-2">Grid item 3</div>
+  <div class="p-2">Grid item 4</div>
 </div>
 {{< /example >}}
 
@@ -119,11 +119,11 @@ Support includes responsive options for all of CoreUI's grid breakpoints, as wel
 `row-gap` sets the vertical space between children items in the specified container.
 
 {{< example class="docs-example-cssgrid" >}}
-<div class="grid gap-0 row-gap-3">
-  <div class="p-2 g-col-6">Grid item 1</div>
-  <div class="p-2 g-col-6">Grid item 2</div>
-  <div class="p-2 g-col-6">Grid item 3</div>
-  <div class="p-2 g-col-6">Grid item 4</div>
+<div style="grid-template-columns: 1fr 1fr;" class="d-grid gap-0 row-gap-3">
+  <div class="p-2">Grid item 1</div>
+  <div class="p-2">Grid item 2</div>
+  <div class="p-2">Grid item 3</div>
+  <div class="p-2">Grid item 4</div>
 </div>
 {{< /example >}}
 
@@ -132,11 +132,11 @@ Support includes responsive options for all of CoreUI's grid breakpoints, as wel
 `column-gap` sets the horizontal space between children items in the specified container.
 
 {{< example class="docs-example-cssgrid" >}}
-<div class="grid gap-0 column-gap-3">
-  <div class="p-2 g-col-6">Grid item 1</div>
-  <div class="p-2 g-col-6">Grid item 2</div>
-  <div class="p-2 g-col-6">Grid item 3</div>
-  <div class="p-2 g-col-6">Grid item 4</div>
+<div style="grid-template-columns: 1fr 1fr;" class="d-grid gap-0 column-gap-3">
+  <div class="p-2">Grid item 1</div>
+  <div class="p-2">Grid item 2</div>
+  <div class="p-2">Grid item 3</div>
+  <div class="p-2">Grid item 4</div>
 </div>
 {{< /example >}}