newest bootstrap `data-XXX` => `data-bs-XXX` fixes

src/pages/_docs/form-helpers.md

@@ -10,6 +10,6 @@ menu: docs.components.form-helpers
 Use an input helper to display additional information about a form element. The text label will appear once a user hovers over the helper. 
 
 {% capture code %}
-<span class="form-help" data-bs-toggle="popover" data-placement="top" data-content="<p>ZIP Code must be US or CDN format. You can use an extended ZIP+4 code to determine address more accurately.</p><p class='mb-0'><a href=''>USP ZIP codes lookup tools</a></p>">?</span>
+<span class="form-help" data-bs-toggle="popover" data-bs-placement="top" data-content="<p>ZIP Code must be US or CDN format. You can use an extended ZIP+4 code to determine address more accurately.</p><p class='mb-0'><a href=''>USP ZIP codes lookup tools</a></p>">?</span>
 {% endcapture %}
 {% include example.html code=code %}

src/pages/_docs/tooltips.md

@@ -11,16 +11,16 @@ bootstrap-link: components/tooltips/
 Use the default markup to create tooltips that will help users understand particular elements of your interface. You can decide where the text label is to be displayed - at the top, bottom or on either side of the element. 
 
 {% capture code %}
-<button type="button" class="btn" data-bs-toggle="tooltip" data-placement="top" title="Tooltip on top">
+<button type="button" class="btn" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">
   Tooltip on top
 </button>
-<button type="button" class="btn" data-bs-toggle="tooltip" data-placement="right" title="Tooltip on right">
+<button type="button" class="btn" data-bs-toggle="tooltip" data-bs-placement="right" title="Tooltip on right">
   Tooltip on right
 </button>
-<button type="button" class="btn" data-bs-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">
+<button type="button" class="btn" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip on bottom">
   Tooltip on bottom
 </button>
-<button type="button" class="btn" data-bs-toggle="tooltip" data-placement="left" title="Tooltip on left">
+<button type="button" class="btn" data-bs-toggle="tooltip" data-bs-placement="left" title="Tooltip on left">
   Tooltip on left
 </button>
 {% endcapture %}

src/pages/_includes/cards/comments.html

@@ -21,8 +21,8 @@
             </p>
             <div class="small">
                <span class="text-success mr-1">+{{ forloop.index | random_number: 20, 50 }}</span>
-               <a href="#" data-bs-toggle="tooltip" data-placement="top" title="Vote Up">{% include ui/icon.html icon="chevron-up" %}</a>
-               <a href="#" class="mr-1" data-bs-toggle="tooltip" data-placement="top" title="Vote Down">
+               <a href="#" data-bs-toggle="tooltip" data-bs-placement="top" title="Vote Up">{% include ui/icon.html icon="chevron-up" %}</a>
+               <a href="#" class="mr-1" data-bs-toggle="tooltip" data-bs-placement="top" title="Vote Down">
                   {% include ui/icon.html icon="chevron-down" %}
                </a>
                <span class="mr-1">·</span>

src/pages/_includes/cards/invoices.html

@@ -61,7 +61,7 @@
 
 				<td class="text-right">
 					<span class="dropdown">
-						<button class="btn dropdown-toggle align-text-top" data-boundary="viewport" data-bs-toggle="dropdown">Actions</button>
+						<button class="btn dropdown-toggle align-text-top" data-bs-boundary="viewport" data-bs-toggle="dropdown">Actions</button>
 						{% include ui/dropdown-menu.html right=true %}
 					</span>
 				</td>

src/pages/_includes/forms/form-elements-1.html

@@ -59,7 +59,7 @@
 			<input type="text" class="form-control" placeholder="Search for…">
 		</div>
 		<div class="col-auto align-self-center">
-			<span class="form-help" data-bs-toggle="popover" data-placement="top"
+			<span class="form-help" data-bs-toggle="popover" data-bs-placement="top"
 			      data-content="<p>ZIP Code must be US or CDN format. You can use an extended ZIP+4 code to determine address more accurately.</p><p class='mb-0'><a href='#'>USP ZIP codes lookup tools</a></p>"
 			      data-html="true">?</span>
 		</div>

src/pages/_includes/layout/navbar-menu.html

@@ -70,7 +70,7 @@
 
 	{% comment %}
 	<li class="nav-item d-none-navbar-vertical">
-		<a href="#" class="nav-link" data-bs-toggle="modal" data-target="#modal-customize">
+		<a href="#" class="nav-link" data-bs-toggle="modal" data-bs-target="#modal-customize">
 			<span class="nav-link-icon">{% include ui/icon.html icon="adjustments" %}</span>
 			<span class="nav-link-title">Customize</span>
 		</a>

src/pages/_includes/layout/navbar-toggler.html

-<button class="navbar-toggler" type="button" data-bs-toggle="collapse"{% if include.target %} data-target="#{{ include.target }}"{% endif %}>
+<button class="navbar-toggler" type="button" data-bs-toggle="collapse"{% if include.target %} data-bs-target="#{{ include.target }}"{% endif %}>
 	<span class="navbar-toggler-icon"></span>
 </button>
\ No newline at end of file

src/pages/_includes/parts/modals/small.html

@@ -3,6 +3,6 @@
 	<div>If you proceed, you will lose all your personal data.</div>
 </div>
 <div class="modal-footer">
-	<button type="button" class="btn btn-link link-secondary mr-auto" data-dismiss="modal">Cancel</button>
-	<button type="button" class="btn btn-danger" data-dismiss="modal">Yes, delete all my data</button>
+	<button type="button" class="btn btn-link link-secondary mr-auto" data-bs-dismiss="modal">Cancel</button>
+	<button type="button" class="btn btn-danger" data-bs-dismiss="modal">Yes, delete all my data</button>
 </div>
\ No newline at end of file

src/pages/_includes/parts/modals/team.html

@@ -19,6 +19,6 @@
 </div>
 
 <div class="modal-footer">
-	<button type="button" class="btn mr-auto" data-dismiss="modal">Close</button>
-	<button type="button" class="btn btn-primary" data-dismiss="modal">Add Team</button>
+	<button type="button" class="btn mr-auto" data-bs-dismiss="modal">Close</button>
+	<button type="button" class="btn btn-primary" data-bs-dismiss="modal">Add Team</button>
 </div>
\ No newline at end of file

src/pages/_includes/ui/alert.html

@@ -13,5 +13,5 @@
 	</div>
 	{% endif %}
 
-	{% if include.close %}<a href="#" class="btn-close" data-dismiss="alert" aria-label="close"></a>{% endif %}
+	{% if include.close %}<a href="#" class="btn-close" data-bs-dismiss="alert" aria-label="close"></a>{% endif %}
 </div>

src/pages/_includes/ui/button.html

@@ -19,7 +19,7 @@
 {% endif %}
 
 {% assign e = include.element | default: 'a' %}
-<{{ e }}{% if e == 'a' %} href="{{ href }}"{% endif %}{% if include.type %} type="{{ include.type }}"{% endif %} class="btn{% if include.height %} btn-{{ include.height }}{% endif %}{% if color %} btn-{% if include.outline %}outline-{% elsif include.ghost %}ghost-{% endif %}{{ color }}{% endif %}{% if include.disabled %} disabled{% endif %}{% if include.square %} btn-square{% endif %}{% if include.loading %} btn-loading{% endif %}{% if include.pill %} btn-pill{% endif %}{% if include['size'] %} btn-{{ include['size'] }}{% endif %}{% if include.class %} {{ include.class }}{% endif %}{% if include.block %} w-100{% endif %}{% if include.link %} btn-link{% endif %}{% if include.icon-only %} btn-icon{% endif %}"{% if include.external %} target="_blank" rel="noreferrer"{% endif %}{% if include.modal-id %} data-bs-toggle="modal" data-target="#modal-{{ include.modal-id }}"{% endif %}{% if include.icon-only %} aria-label="{{ include.text | default: "Button" }}"{% endif %}{% if include.dismiss %} data-dismiss="modal"{% endif %}>
+<{{ e }}{% if e == 'a' %} href="{{ href }}"{% endif %}{% if include.type %} type="{{ include.type }}"{% endif %} class="btn{% if include.height %} btn-{{ include.height }}{% endif %}{% if color %} btn-{% if include.outline %}outline-{% elsif include.ghost %}ghost-{% endif %}{{ color }}{% endif %}{% if include.disabled %} disabled{% endif %}{% if include.square %} btn-square{% endif %}{% if include.loading %} btn-loading{% endif %}{% if include.pill %} btn-pill{% endif %}{% if include['size'] %} btn-{{ include['size'] }}{% endif %}{% if include.class %} {{ include.class }}{% endif %}{% if include.block %} w-100{% endif %}{% if include.link %} btn-link{% endif %}{% if include.icon-only %} btn-icon{% endif %}"{% if include.external %} target="_blank" rel="noreferrer"{% endif %}{% if include.modal-id %} data-bs-toggle="modal" data-bs-target="#modal-{{ include.modal-id }}"{% endif %}{% if include.icon-only %} aria-label="{{ include.text | default: "Button" }}"{% endif %}{% if include.dismiss %} data-bs-dismiss="modal"{% endif %}>
 {% if include.spinner %}
 {% include ui/spinner.html color=false size="sm" class=spinner-class element="span" %}{% endif %}
 {% if include.icon %}{% include ui/icon.html icon=include.icon use-svg=true color=include.icon-color %}{% endif %}

src/pages/_includes/ui/carousel.html

 {% assign limit = include.limit | default: 5 %}
 {% assign offset = include.offset | default: 0 %}
 {% assign photos = site.data.photos | where: "horizontal", true %}
-<div id="{{ include.id }}" class="carousel slide" data-ride="carousel">
+<div id="{{ include.id }}" class="carousel slide" data-bs-ride="carousel">
    {% if include.show-indicators %}
    <ol class="carousel-indicators">
       {% for i in (1..limit) %}
-      <li data-target="#{{ include.id }}" data-slide-to="{{ forloop.index | minus: 1 }}" class="{% if forloop.first %}active{% endif %}"></li>
+      <li data-bs-target="#{{ include.id }}" data-bs-slide-to="{{ forloop.index | minus: 1 }}" class="{% if forloop.first %}active{% endif %}"></li>
       {% endfor %}
    </ol>
    {% endif %}
@@ -13,7 +13,7 @@
    <div class="carousel-inner">
       {% for photo in photos limit: limit offset: offset %}
       <div class="carousel-item{% if forloop.first %} active{% endif %}">
-         <img class="d-block w-100" alt="" src="{{ site.base }}/static/photos/{{ photo.file }}" data-holder-rendered="true">
+         <img class="d-block w-100" alt="" src="{{ site.base }}/static/photos/{{ photo.file }}">
 
          {% if include.show-captions %}
          <div class="carousel-item-background d-none d-md-block"></div>
@@ -27,11 +27,11 @@
    </div>
 
    {% if include.show-controls %}
-   <a class="carousel-control-prev" href="#{{ include.id }}" role="button" data-slide="prev">
+   <a class="carousel-control-prev" href="#{{ include.id }}" role="button" data-bs-slide="prev">
       <span class="carousel-control-prev-icon" aria-hidden="true"></span>
       <span class="visually-hidden">Previous</span>
    </a>
-   <a class="carousel-control-next" href="#{{ include.id }}" role="button" data-slide="next">
+   <a class="carousel-control-next" href="#{{ include.id }}" role="button" data-bs-slide="next">
       <span class="carousel-control-next-icon" aria-hidden="true"></span>
       <span class="visually-hidden">Next</span>
    </a>

src/pages/_includes/ui/modal/close.html

-<button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
\ No newline at end of file
+<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
\ No newline at end of file

src/pages/_includes/ui/modal/footer.html

 <div class="modal-footer">
-	<button type="button" class="btn mr-auto" data-dismiss="modal">Close</button>
-	<button type="button" class="btn btn-primary" data-dismiss="modal">Save changes</button>
+	<button type="button" class="btn mr-auto" data-bs-dismiss="modal">Close</button>
+	<button type="button" class="btn btn-primary" data-bs-dismiss="modal">Save changes</button>
 </div>
\ No newline at end of file

src/pages/_includes/ui/table.html

@@ -72,7 +72,7 @@
 				<div class="btn-list flex-nowrap">
 					{% include ui/button.html text="Edit" %}
 					<div class="dropdown">
-						<button class="btn dropdown-toggle align-text-top" data-boundary="viewport" data-bs-toggle="dropdown">
+						<button class="btn dropdown-toggle align-text-top" data-bs-boundary="viewport" data-bs-toggle="dropdown">
 							Actions
 						</button>
 						{% include ui/dropdown-menu.html right=true %}

src/pages/_includes/ui/toast.html

@@ -6,7 +6,7 @@
 		{% include ui/avatar.html person=person class="mr-2" size="xs" %}
 		<strong class="mr-auto">{{ person.full_name }}</strong>
 		<small>{{ include.date | default: '11 mins ago' }}</small>
-		<button type="button" class="ml-2 btn-close" data-dismiss="toast" aria-label="Close"></button>
+		<button type="button" class="ml-2 btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
 	</div>
 	{% endunless %}
 	<div class="toast-body">

src/scss/ui/_toasts.scss

@@ -2,6 +2,6 @@
   user-select: none;
 }
 
-.toast button[data-dismiss="toast"] {
+.toast button[data-bs-dismiss="toast"] {
   outline: none;
 }