Rename shortcode example parameters

site/content/docs/5.2/components/alerts.md

@@ -27,7 +27,7 @@ Alerts are available for any length of text, as well as an optional close button
 
 Click the button below to show an alert (hidden with inline styles to start), then dismiss (and destroy) it with the built-in close button.
 
-{{< example sb_js_snippet="true" >}}
+{{< example stackblitz_add_js="true" >}}
 <div id="liveAlertPlaceholder"></div>
 <button type="button" class="btn btn-primary" id="liveAlertBtn">Show live alert</button>
 {{< /example >}}

site/content/docs/5.2/components/modal.md

@@ -444,7 +444,7 @@ Have a bunch of buttons that all trigger the same modal with slightly different
 
 Below is a live demo followed by example HTML and JavaScript. For more information, [read the modal events docs](#events) for details on `relatedTarget`.
 
-{{< example sb_js_snippet="true" >}}
+{{< example stackblitz_add_js="true" >}}
 <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-whatever="@mdo">Open modal for @mdo</button>
 <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-whatever="@fat">Open modal for @fat</button>
 <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-whatever="@getbootstrap">Open modal for @getbootstrap</button>

site/content/docs/5.2/components/popovers.md

@@ -46,15 +46,15 @@ const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstra
 
 We use JavaScript similar to the snippet above to render the following live popover. Titles are set via `title` attribute and body content is set via `data-bs-content`.
 
-{{< example sb_hide="true" sb_js_snippet="true" >}}
+{{< example stackblitz="false" stackblitz_add_js="true" >}}
 <button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
 {{< /example >}}
 
 ### Four directions
 
 Four options are available: top, right, bottom, and left. Directions are mirrored when using Bootstrap in RTL. Set `data-bs-placement` to change the direction.
 
-{{< example sb_js_snippet="true" >}}
+{{< example stackblitz_add_js="true" >}}
 <button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Top popover">
   Popover on top
 </button>
@@ -87,7 +87,7 @@ You can customize the appearance of popovers using [CSS variables](#variables).
 
 {{< scss-docs name="custom-popovers" file="site/assets/scss/_component-examples.scss" >}}
 
-{{< example class="custom-popover-demo" sb_js_snippet="true" >}}
+{{< example class="custom-popover-demo" stackblitz_add_js="true" >}}
 <button type="button" class="btn btn-secondary"
         data-bs-toggle="popover" data-bs-placement="right"
         data-bs-custom-class="custom-popover"
@@ -107,7 +107,7 @@ Use the `focus` trigger to dismiss popovers on the user's next click of a differ
 For proper cross-browser and cross-platform behavior, you must use the `<a>` tag, _not_ the `<button>` tag, and you also must include a [`tabindex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) attribute.
 {{< /callout >}}
 
-{{< example sb_js_snippet="true" >}}
+{{< example stackblitz_add_js="true" >}}
 <a tabindex="0" class="btn btn-lg btn-danger" role="button" data-bs-toggle="popover" data-bs-trigger="focus" data-bs-title="Dismissible popover" data-bs-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>
 {{< /example >}}
 
@@ -123,7 +123,7 @@ Elements with the `disabled` attribute aren't interactive, meaning users cannot
 
 For disabled popover triggers, you may also prefer `data-bs-trigger="hover focus"` so that the popover appears as immediate visual feedback to your users as they may not expect to _click_ on a disabled element.
 
-{{< example sb_js_snippet="true" >}}
+{{< example stackblitz_add_js="true" >}}
 <span class="d-inline-block" tabindex="0" data-bs-toggle="popover" data-bs-trigger="hover focus" data-bs-content="Disabled popover">
   <button class="btn btn-primary" type="button" disabled>Disabled button</button>
 </span>

site/content/docs/5.2/components/toasts.md

@@ -197,7 +197,7 @@ Building on the above example, you can create different toast color schemes with
 
 Place toasts with custom CSS as you need them. The top right is often used for notifications, as is the top middle. If you're only ever going to show one toast at a time, put the positioning styles right on the `.toast`.
 
-{{< example sb_js_snippet="true" >}}
+{{< example stackblitz_add_js="true" >}}
 <form>
   <div class="mb-3">
     <label for="selectToastPlacement">Toast placement</label>

site/content/docs/5.2/components/tooltips.md

@@ -45,7 +45,7 @@ const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstra
 
 Hover over the links below to see tooltips:
 
-{{< example class="tooltip-demo" sb_js_snippet="true" >}}
+{{< example class="tooltip-demo" stackblitz_add_js="true" >}}
 <p class="muted">Placeholder text to demonstrate some <a href="#" data-bs-toggle="tooltip" data-bs-title="Default tooltip">inline links</a> with tooltips. This is now just filler, no killer. Content placed here just to mimic the presence of <a href="#" data-bs-toggle="tooltip" data-bs-title="Another tooltip">real text</a>. And all that just to give you an idea of how tooltips would look when used in real-world situations. So hopefully you've now seen how <a href="#" data-bs-toggle="tooltip" data-bs-title="Another one here too">these tooltips on links</a> can work in practice, once you use them on <a href="#" data-bs-toggle="tooltip" data-bs-title="The last tip!">your own</a> site or project.
 </p>
 {{< /example >}}
@@ -59,7 +59,7 @@ You can customize the appearance of tooltips using [CSS variables](#variables).
 {{< scss-docs name="custom-tooltip" file="site/assets/scss/_component-examples.scss" >}}
 
 
-{{< example class="tooltip-demo" sb_js_snippet="true" >}}
+{{< example class="tooltip-demo" stackblitz_add_js="true" >}}
 <button type="button" class="btn btn-secondary"
         data-bs-toggle="tooltip" data-bs-placement="top"
         data-bs-custom-class="custom-tooltip"

site/content/docs/5.2/forms/checks-radios.md

@@ -36,7 +36,7 @@ Our checks use custom Bootstrap icons to indicate checked or indeterminate state
 
 Checkboxes can utilize the `:indeterminate` pseudo class when manually set via JavaScript (there is no available HTML attribute for specifying it).
 
-{{< example class="bd-example-indeterminate" sb_js_snippet="true" >}}
+{{< example class="bd-example-indeterminate" stackblitz_add_js="true" >}}
 <div class="form-check">
   <input class="form-check-input" type="checkbox" value="" id="flexCheckIndeterminate">
   <label class="form-check-label" for="flexCheckIndeterminate">

site/layouts/shortcodes/example.html

@@ -5,17 +5,17 @@
     * id: the `div`'s id - default: ""
     * class: any extra class(es) to be added to the `div` - default: ""
     * lang: language used to display the code - default: "html"
-    * sb_hide: hide edit StackBlitz button - default `false`
-    * sb_js_snippet: add extra JS snippet to StackBlitz - default: `false`
+    * stackblitz: if edit StackBlitz button should be displayed - default `true`
+    * stackblitz_add_js: if extra JS snippet shoud le added to StackBlitz - default: `false`
     * show_markup: if the markup should be output in the HTML - default: `true`
     * show_preview: if the preview should be output in the HTML - default: `true`
 */ -}}
 
 {{- $id := .Get "id" -}}
 {{- $class := .Get "class" -}}
 {{- $lang := .Get "lang" | default "html" -}}
-{{- $sb_hide := .Get "sb_hide" | default false -}}
-{{- $sb_js_snippet := .Get "sb_js_snippet" | default false -}}
+{{- $stackblitz := .Get "stackblitz" | default true -}}
+{{- $stackblitz_add_js := .Get "stackblitz_add_js" | default false -}}
 {{- $show_markup := .Get "show_markup" | default true -}}
 {{- $show_preview := .Get "show_preview" | default true -}}
 {{- $input := .Inner -}}
@@ -32,8 +32,8 @@
       <div class="d-flex align-items-center highlight-toolbar bg-light ps-3 pe-2 py-1">
         <small class="font-monospace text-muted text-uppercase">{{- $lang -}}</small>
         <div class="d-flex ms-auto">
-          {{- if eq $sb_hide false -}}
-          <button type="button" class="btn-edit text-nowrap"{{ with $sb_js_snippet }} data-sb-js-snippet="{{ $sb_js_snippet }}"{{ end }} title="Try it on StackBlitz">
+          {{- if eq $stackblitz true -}}
+          <button type="button" class="btn-edit text-nowrap"{{ with $stackblitz_add_js }} data-sb-js-snippet="{{ $stackblitz_add_js }}"{{ end }} title="Try it on StackBlitz">
             <svg class="bi" role="img" aria-label="Try it"><use xlink:href="#lightning-charge-fill"/></svg>
           </button>
           {{- end -}}