j1-template 2022.0.1 → 2022.0.2

data/lib/starter_web/pages/public/panels/intro_panel/_includes/attributes.asciidoc

@@ -0,0 +1,55 @@
+// ~/document_base_folder/000_includes
+//  Asciidoc attribute includes:                 attributes.asciidoc
+// -----------------------------------------------------------------------------
+
+// URLs - Internal references and/or sources on the Internet
+// -----------------------------------------------------------------------------
+tag::urls[]
+end::urls[]
+
+
+// FOOTNOTES, global asciidoc attributes (variables)
+// -----------------------------------------------------------------------------
+tag::footnotes[]
+:fn-bootstrap-v5--responsive-text:                footnote:[https://getbootstrap.com/docs/5.0/content/typography/#responsive-font-sizes[Supported with Bootstrap V5 · Responsive font sizes, window="_blank"]]
+end::footnotes[]
+
+
+
+// Tags - Asciidoc attributes used internally
+// -----------------------------------------------------------------------------
+tag::tags[]
+end::tags[]
+
+
+// Data - Data elements for Asciidoctor extensions
+// -----------------------------------------------------------------------------
+tag::data[]
+
+:data-images-standalone:                          "pages/roundtrip/100_present_images/lightbox-image-1.jpg, Golden Gate Bridge with San Francisco in distance, pages/roundtrip/100_present_images/lightbox-image-2.jpg, Forest with mountains behind"
+:data-images-group:                               "pages/roundtrip/100_present_images/lightbox-image-1.jpg, Golden Gate Bridge with San Francisco in distance, pages/roundtrip/100_present_images/lightbox-image-2.jpg, Forest with mountains behind"
+
+:data-images--themes-menu:                        "pages/roundtrip/500_themes/themes-menu-1280x800.jpg, Themes menu (Bootswatch)"
+
+:data-quicksearch-icon:                           "pages/roundtrip/600_quicksearch/quicksearch_icon-800x200.jpg, Search button (magnifier) in the quick access area"
+:data-quicksearch-input:                          "pages/roundtrip/600_quicksearch/quicksearch_input-800x200.jpg, Input bar for a QuickSearch"
+
+end::data[]
+
+
+// Images - Images from local include/images folder
+// -----------------------------------------------------------------------------
+tag::images[]
+end::images[]
+
+
+// PRODUCTS, local product information (e.g. release)
+// -----------------------------------------------------------------------------
+tag::products[]
+end::products[]
+
+
+// AUTHORS, local author information (e.g. article)
+// -----------------------------------------------------------------------------
+tag::authors[]
+end::authors[]

data/lib/starter_web/pages/public/panels/intro_panel/panel.adoc

@@ -44,8 +44,26 @@ resource_options:
             href:                       https://unsplash.com/@alex_andrews
 ---
 
-// Page content
+// Page Initializer
 // =============================================================================
+// Enable the Liquid Preprocessor
+:page-liquid:
+
+// Set (local) page attributes here
+// -----------------------------------------------------------------------------
+// :page--attr:                         <attr-value>
+:images-dir:                            {imagesdir}/pages/roundtrip/100_present_images
+
+//  Load Liquid procedures
+// -----------------------------------------------------------------------------
+{% capture load_attributes %}themes/{{site.template.name}}/procedures/global/attributes_loader.proc{%endcapture%}
+
+// Load page attributes
+// -----------------------------------------------------------------------------
+{% include {{load_attributes}} scope="all" %}
+
+// Page content
+// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 
 // Include sub-documents (if any)
 // -----------------------------------------------------------------------------
@@ -61,17 +79,47 @@ content at its best on all devices for all window sizes makes a great Web
 brilliant. J1 Template supports your Web for full responsiveness, for the
 best user experience on all modern devices.
 
-=== Bootstrap 4 Integration
+// [role="skiptranslate"]
+=== Bootstrap Integration
 
 To not sidetrack your audience by irritating user interface (UI) components,
 the J1 Template is based on Bootstrap. Bootstrap is one of the most popular
-frameworks for web development used today. J1 is based on Bootstrap V4,
+frameworks for web development used today. J1 is based on Bootstrap V5,
 the last current version to support your visitors by common navigation
 elements, data input, tables, and many other components.
 
 Bootstrap simplifies HTML programming a lot, offers excellent JS support
 for interactive components like navigation elements, cards, forms, etc.
 
+==== Themes
+
+The themes feature for J1 is in an experimental state for the template
+system. Anyway, it makes sense to present what is possible using different
+versions of Bootstrap's CSS styles for a website.
+
+Themes step in the framework to further adjust the website's appearance
+based on the core CSS rules and definitions of Bootstrap. Themes do not
+change the framework's functionality but modify rule-based, e.g., the
+color scheme, fonts, sizes, or the appearance of more complex elements like
+forms or tables. Additionally, a theme may add additional components but in
+the *sense* of Bootstrap's framework rules and philosophy.
+
+It is expected that many people will change the template for their needs. To
+create unique websites. Fundamental to do this is are CSS styles
+defined by Bootstrap.
+
+.Themes menu (Bootswatch)
+lightbox::images--themes-menu[ 1024, {data-images--themes-menu} ]
+
+Thanks to the people at link:{url-bootswatch--home}[Bootswatch, {browser-window--new}],
+a great set of already prepared Bootstrap stylesheets (20+ for BS V5) in
+various designs are available on their website. There is no need to start from
+scratch, re-define all the Bootstrap variables, and rebuild the framework files
+to create a new theme. Many different styles are available. What is already
+available at Bootswatch is at least a good base for your modifications; your
+unique design.
+
+
 [[current-technology]]
 == HTML5 · CSS3 · JS
 

data/lib/starter_web/pages/public/previewer/preview_bootstrap_theme.adoc

@@ -84,7 +84,9 @@ resource_options:
 :progress_multiple_bars:                true
 :progress_striped:                      true
 :progress_animated:                     true
-:lists:                                 true
+:list_group:                            true
+:list_group_basic:                      true
+:list_group_action:                     true
 :cards:                                 true
 :cards_simple:                          true
 :cards_image:                           false
@@ -361,25 +363,25 @@ a *ripple* effect is shown for feedback.
 
 ++++
 <div class="doc-example mb-3">
-  <button type="button" class="btn btn-primary btn-raised">Primary</button>
-  <button type="button" class="btn btn-secondary btn-raised">Secondary</button>
-  <button type="button" class="btn btn-success btn-raised">Success</button>
-  <button type="button" class="btn btn-info btn-raised">Info</button>
-  <button type="button" class="btn btn-warning btn-raised">Warning</button>
-  <button type="button" class="btn btn-danger btn-raised">Danger</button>
-  <button type="button" class="btn btn-link btn-raised">Link</button>
+  <button type="button" class="btn btn-primary">Primary</button>
+  <button type="button" class="btn btn-secondary">Secondary</button>
+  <button type="button" class="btn btn-success">Success</button>
+  <button type="button" class="btn btn-info">Info</button>
+  <button type="button" class="btn btn-warning">Warning</button>
+  <button type="button" class="btn btn-danger">Danger</button>
+  <button type="button" class="btn btn-link">Link</button>
 </div>
 ++++
 
 [source, html]
 ----
-<button type="button" class="btn btn-primary btn-raised">Primary</button>
-<button type="button" class="btn btn-secondary btn-raised">Secondary</button>
-<button type="button" class="btn btn-success btn-raised">Success</button>
-<button type="button" class="btn btn-info btn-raised">Info</button>
-<button type="button" class="btn btn-warning btn-raised">Warning</button>
-<button type="button" class="btn btn-danger btn-raised">Danger</button>
-<button type="button" class="btn btn-link btn-raised">Link</button>
+<button type="button" class="btn btn-primary">Primary</button>
+<button type="button" class="btn btn-secondary">Secondary</button>
+<button type="button" class="btn btn-success">Success</button>
+<button type="button" class="btn btn-info">Info</button>
+<button type="button" class="btn btn-warning">Warning</button>
+<button type="button" class="btn btn-danger">Danger</button>
+<button type="button" class="btn btn-link">Link</button>
 ----
 endif::[]
 
@@ -571,17 +573,17 @@ Beside the *default* size, small and large buttons are available.
 
 ++++
 <div class="doc-example mb-3">
-  <button type="button" class="btn btn-primary btn-raised btn-lg">Large button</button>
-  <button type="button" class="btn btn-primary btn-raised">Default button</button>
-  <button type="button" class="btn btn-primary btn-raised btn-sm">Small button</button>
+  <button type="button" class="btn btn-primary btn-lg">Large button</button>
+  <button type="button" class="btn btn-primary">Default button</button>
+  <button type="button" class="btn btn-primary btn-sm">Small button</button>
 </div>
 ++++
 
 [source, html]
 ----
-<button type="button" class="btn btn-primary btn-raised btn-lg">Large button</button>
-<button type="button" class="btn btn-primary btn-raised">Default button</button>
-<button type="button" class="btn btn-primary btn-raised btn-sm">Small button</button>
+<button type="button" class="btn btn-primary btn-lg">Large button</button>
+<button type="button" class="btn btn-primary">Default button</button>
+<button type="button" class="btn btn-primary btn-sm">Small button</button>
 ----
 endif::[]
 
@@ -592,13 +594,13 @@ Draw attention to a button, e.g for a *recommended* action.
 
 ++++
 <div class="doc-example mb-3">
-  <button type="button" class="btn btn-primary btn-raised pulsed-z2">Recommend</button>
+  <button type="button" class="btn btn-primary pulsed-z2">Recommend</button>
 </div>
 ++++
 
 [source, html]
 ----
-  <button type="button" class="btn btn-primary btn-raised pulsed-z2">Primary</button>
+  <button type="button" class="btn btn-primary pulsed-z2">Primary</button>
 ----
 endif::[]
 
@@ -613,8 +615,8 @@ and responsive behaviors.
 ++++
 <div class="doc-example mb-3">
   <div class="d-grid gap-2">
-    <button type="button" class="btn btn-primary btn-lg btn-raised">Block level button</button>
-    <button type="button" class="btn btn-secondary btn-raised">Block level button</button>
+    <button type="button" class="btn btn-primary btn-lg">Block level button</button>
+    <button type="button" class="btn btn-secondary">Block level button</button>
   </div>
 </div>
 ++++
@@ -622,8 +624,8 @@ and responsive behaviors.
 [source, html]
 ----
 <div class="d-grid gap-2">
-  <button type="button" class="btn btn-primary btn-lg btn-raised">Block level button</button>
-  <button type="button" class="btn btn-secondary btn-raised">Block level button</button>
+  <button type="button" class="btn btn-primary btn-lg">Block level button</button>
+  <button type="button" class="btn btn-secondary">Block level button</button>
 </div>
 ----
 endif::[]
@@ -1392,7 +1394,7 @@ link:{url-bs-docs--components-forms}[Bootstrap Docs {char-middot} Forms, {browse
         </label>
       </div>
     </div>
-    <button type="submit" class="btn btn-primary btn-raised mt-3">Submit</button>
+    <button type="submit" class="btn btn-primary mt-3">Submit</button>
   </form>
 </div>
 ++++
@@ -2199,11 +2201,20 @@ ifeval::[{progress_animated} == true]
 endif::[]
 endif::[]
 
-ifeval::[{lists} == true]
-== Lists
+ifeval::[{list_group} == true]
+== List Group
+
+mdi:bootstrap[24px, mdi-md-deep-purple]
+link:{url-bs-docs--components-badges}[Bootstrap Docs {char-middot} List group, {browser-window--new}]
+
+List groups are a flexible and powerful component for displaying a *series*
+of content within an *single* HTML element.
+
+ifeval::[{list_group_basic} == true]
+=== Basic
 
-Lists are a flexible and powerful component for displaying a series of content
-within an single HTML element.
+The most basic list group is an unordered list with simple list items. Build
+upon it with the options that follow, or with your own CSS as needed.
 
 ++++
 <div class="doc-example mb-3">
@@ -2216,6 +2227,85 @@ within an single HTML element.
   </ul>
 </div>
 ++++
+
+.Basic list group
+[source, html]
+----
+  <div>
+    <ul class="list-group">
+      <li class="list-group-item">An item</li>
+      <li class="list-group-item">A second item</li>
+      <li class="list-group-item">A third item</li>
+      <li class="list-group-item">A fourth item</li>
+      <li class="list-group-item">And a fifth one</li>
+    </ul>
+  </div>
+----
+endif::[]
+
+ifeval::[{list_group_action} == true]
+=== Actionable
+
+Use `<a>` or `<button>` elements to create *actionable* list group items with
+hover, disabled, and active states by adding `.list-group-item-action`.
+We separate these pseudo-classes to ensure list groups made of non-interactive
+elements (like `<li>` or `<div>` elements) don’t provide a click or tap
+affordance.
+
+++++
+<div class="doc-example mb-3">
+  <div class="list-group">
+    <a href="#" class="list-group-item list-group-item-action active" aria-current="true"> The current link item </a>
+    <a href="#" class="list-group-item list-group-item-action">A second link item</a>
+    <a href="#" class="list-group-item list-group-item-action">A third link item</a>
+    <a href="#" class="list-group-item list-group-item-action">A fourth link item</a>
+    <a href="#" class="list-group-item list-group-item-action disabled" tabindex="-1" aria-disabled="true">A disabled link item</a>
+  </div>
+</div>
+++++
+
+.Actionable list group
+[source, html]
+----
+  <div class="list-group">
+    <a href="#" class="list-group-item list-group-item-action active"
+      aria-current="true"> The current link item </a>
+    <a href="#" class="list-group-item list-group-item-action">
+      A second link item</a>
+    <a href="#" class="list-group-item list-group-item-action">
+      A third link item</a>
+    <a href="#" class="list-group-item list-group-item-action">
+      A fourth link item</a>
+    <a href="#" class="list-group-item list-group-item-action
+      disabled" tabindex="-1"
+      aria-disabled="true">
+      A disabled link item</a>
+  </div>
+----
+endif::[]
+
+// === Numbered
+//
+// Add the .list-group-numbered modifier class (and optionally use an
+// <ol> element) to opt into numbered list group items. Numbers are
+// generated via CSS (as opposed to a <ol>s default browser styling) for
+// better placement inside list group items and to allow for better
+// customization.
+//
+// Numbers are generated by counter-reset on the <ol>, and then styled
+// and placed with a ::before pseudo-element on the <li> with counter-increment
+// and content.
+
+// === With badges
+//
+// Add badges to any list group item to show unread counts, activity, and more
+// with the help of some utilities.
+
+// === Custom content
+//
+// Add nearly any HTML within, even for linked list groups like the one below,
+// with the help of flexbox utilities.
+
 endif::[]
 
 ifeval::[{cards} == true]
@@ -2465,7 +2555,7 @@ from the top of the page.
 <div class="ml-0">
   <!-- Button trigger modal -->
   <button type="button"
-    class="btn btn-primary btn-raised"
+    class="btn btn-primary"
     data-bs-toggle="modal"
     data-bs-target="#exampleSimpleModal">
     Launch Example
@@ -2490,8 +2580,8 @@ from the top of the page.
         <p>Modal body text goes here.</p>
       </div>
       <div class="modal-footer">
-        <button type="button" class="btn btn-primary btn-flex btn-raised mr-2">Do nothing</button>
-        <button type="button" class="btn btn-secondary btn-flex btn-raised" data-bs-dismiss="modal">Close</button>
+        <button type="button" class="btn btn-primary btn-flex mr-2">Do nothing</button>
+        <button type="button" class="btn btn-secondary btn-flex" data-bs-dismiss="modal">Close</button>
       </div>
     </div>
   </div>
@@ -2506,7 +2596,7 @@ it (the backdrop).
 <div class="ml-0">
   <!-- Button trigger modal -->
   <button type="button"
-    class="btn btn-primary btn-raised"
+    class="btn btn-primary"
     data-bs-toggle="modal"
     data-bs-target="#exampleStaticModal">
     Launch Example
@@ -2533,8 +2623,8 @@ it (the backdrop).
         <p>Modal body text goes here.</p>
       </div>
       <div class="modal-footer">
-        <button type="button" class="btn btn-primary btn-flex btn-raised mr-2">Do nothing</button>
-        <button type="button" class="btn btn-secondary btn-flex btn-raised" data-bs-dismiss="modal">Close</button>
+        <button type="button" class="btn btn-primary btn-flex mr-2">Do nothing</button>
+        <button type="button" class="btn btn-secondary btn-flex" data-bs-dismiss="modal">Close</button>
       </div>
     </div>
   </div>
@@ -2550,7 +2640,7 @@ the height.
 <div class="ml-0">
   <!-- Button trigger modal -->
   <button type="button"
-    class="btn btn-primary btn-raised"
+    class="btn btn-primary"
     data-bs-toggle="modal"
     data-bs-target="#exampleModalLong">
     Launch Example
@@ -2609,8 +2699,8 @@ the height.
         </p>
       </div>
       <div class="modal-footer">
-        <button type="button" class="btn btn-primary btn-flex btn-raised mr-2">Do nothing</button>
-        <button type="button" class="btn btn-secondary btn-flex btn-raised" data-bs-dismiss="modal">Close</button>
+        <button type="button" class="btn btn-primary btn-flex mr-2">Do nothing</button>
+        <button type="button" class="btn btn-secondary btn-flex" data-bs-dismiss="modal">Close</button>
       </div>
     </div>
   </div>
@@ -2625,7 +2715,7 @@ modal body. Try the demo and scroll the content.
 <div class="ml-0">
   <!-- Button trigger modal -->
   <button type="button"
-    class="btn btn-primary btn-raised"
+    class="btn btn-primary"
     data-bs-toggle="modal"
     data-bs-target="#exampleModalLongScrollable">
     Launch Example
@@ -2684,8 +2774,8 @@ modal body. Try the demo and scroll the content.
         </p>
       </div>
       <div class="modal-footer">
-        <button type="button" class="btn btn-primary btn-flex btn-raised mr-2">Do nothing</button>
-        <button type="button" class="btn btn-secondary btn-flex btn-raised" data-bs-dismiss="modal">Close</button>
+        <button type="button" class="btn btn-primary btn-flex mr-2">Do nothing</button>
+        <button type="button" class="btn btn-secondary btn-flex" data-bs-dismiss="modal">Close</button>
       </div>
     </div>
   </div>
@@ -2699,7 +2789,7 @@ modal body. Try the demo and scroll the content.
 <div class="ml-0">
   <!-- Button trigger modal -->
   <button type="button"
-    class="btn btn-primary btn-raised"
+    class="btn btn-primary"
     data-bs-toggle="modal" data-bs-target="#exampleModalVerticalCenter">
     Launch Example
   </button>
@@ -2725,8 +2815,8 @@ modal body. Try the demo and scroll the content.
         voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
       </div>
       <div class="modal-footer">
-        <button type="button" class="btn btn-primary btn-flex btn-raised mr-2">Do nothing</button>
-        <button type="button" class="btn btn-secondary btn-flex btn-raised" data-bs-dismiss="modal">Close</button>
+        <button type="button" class="btn btn-primary btn-flex mr-2">Do nothing</button>
+        <button type="button" class="btn btn-secondary btn-flex" data-bs-dismiss="modal">Close</button>
       </div>
     </div>
   </div>
@@ -2741,7 +2831,7 @@ closed, any tooltips and popovers within are also automatically dismissed.
 <div class="ml-0">
   <!-- Button trigger modal -->
   <button type="button"
-    class="btn btn-primary btn-raised"
+    class="btn btn-primary"
     data-bs-toggle="modal"
     data-bs-target="#exampleModalTooltip">
     Launch Example
@@ -2764,14 +2854,14 @@ closed, any tooltips and popovers within are also automatically dismissed.
       </div>
       <div class="modal-body">
         <h4 class="notoc">Popover in a modal</h4>
-        <p>This <a href="#" role="button" class="btn btn-primary btn-raised popover-test" data-bs-toggle="popover" title="Popover title" data-content="Popover body content is set in this attribute.">button</a> triggers a popover on hover or click.</p>
+        <p>This <a href="#" role="button" class="btn btn-primary popover-test" data-bs-toggle="popover" title="Popover title" data-content="Popover body content is set in this attribute.">button</a> triggers a popover on hover or click.</p>
         <hr>
         <h4 class="notoc">Tooltips in a modal</h4>
         <p><a href="#" class="tooltip-test" data-bs-toggle="tooltip" title="Tooltip">This link</a> and <a href="#" class="tooltip-test" data-bs-toggle="tooltip" title="Tooltip">that link</a> have tooltips on hover.</p>
       </div>
       <div class="modal-footer">
-        <button type="button" class="btn btn-primary btn-flex btn-raised mr-2">Do nothing</button>
-        <button type="button" class="btn btn-secondary btn-flex btn-raised" data-bs-dismiss="modal">Close</button>
+        <button type="button" class="btn btn-primary btn-flex mr-2">Do nothing</button>
+        <button type="button" class="btn btn-secondary btn-flex" data-bs-dismiss="modal">Close</button>
       </div>
     </div>
   </div>
@@ -2785,7 +2875,7 @@ closed, any tooltips and popovers within are also automatically dismissed.
 <!-- Trigger Button (modal) -->
 <div class="ml-0">
   <button type="button"
-    class="btn btn-primary btn-raised"
+    class="btn btn-primary"
     data-bs-toggle="modal"
     data-bs-target="#exampleSimpleModal">
     Launch Example
@@ -2816,11 +2906,11 @@ closed, any tooltips and popovers within are also automatically dismissed.
       </div>
       <div class="modal-footer">
         <button type="button"
-          class="btn btn-primary btn-flex btn-raised mr-2"> Do nothing
+          class="btn btn-primary btn-flex mr-2"> Do nothing
         </button>
         <button
           type="button"
-          class="btn btn-secondary btn-flex btn-raised"
+          class="btn btn-secondary btn-flex"
           data-bs-dismiss="modal"> Close
         </button>
       </div>
@@ -2848,10 +2938,10 @@ link:{url-bs-docs--components-tooltips}[Bootstrap Docs {char-middot} Tooltips, {
 <div class="doc-example mb-3">
   <div class="row d-flex justify-content-center">
     <div class="col-md-6 p-0">
-      <button type="button" class="btn btn-primary btn-raised" data-bs-toggle="tooltip" data-bs-placement="left" title="Tooltip on left">Left</button>
-      <button type="button" class="btn btn-primary btn-raised" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">Top</button>
-      <button type="button" class="btn btn-primary btn-raised" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip on bottom">Bottom</button>
-      <button type="button" class="btn btn-primary btn-raised" data-bs-toggle="tooltip" data-bs-placement="right" title="Tooltip on right">Right</button>
+      <button type="button" class="btn btn-primary" data-bs-toggle="tooltip" data-bs-placement="left" title="Tooltip on left">Left</button>
+      <button type="button" class="btn btn-primary" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">Top</button>
+      <button type="button" class="btn btn-primary" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip on bottom">Bottom</button>
+      <button type="button" class="btn btn-primary" data-bs-toggle="tooltip" data-bs-placement="right" title="Tooltip on right">Right</button>
     </div>
   </div>
 </div>
@@ -2860,22 +2950,22 @@ link:{url-bs-docs--components-tooltips}[Bootstrap Docs {char-middot} Tooltips, {
 .Examples for Tooltips
 [source, html]
 ----
-  <button type="button" class="btn btn-primary btn-raised"
+  <button type="button" class="btn btn-primary"
     data-bs-toggle="tooltip"
     data-bs-placement="top"
     title="Tooltip on top">Top
   </button>
-  <button type="button" class="btn btn-primary btn-raised"
+  <button type="button" class="btn btn-primary"
     data-bs-toggle="tooltip"
     data-bs-placement="bottom"
     title="Tooltip on bottom">Bottom
   </button>
-  <button type="button" class="btn btn-primary btn-raised"
+  <button type="button" class="btn btn-primary"
     data-bs-toggle="tooltip"
     data-bs-placement="right"
     title="Tooltip on right">Right
   </button>
-  <button type="button" class="btn btn-primary btn-raised"
+  <button type="button" class="btn btn-primary"
     data-bs-toggle="tooltip"
     data-bs-placement="left"
     title="Tooltip on left">Left
@@ -2893,10 +2983,10 @@ link:{url-bs-docs--components-popovers}[Bootstrap Docs {char-middot} Popovers, {
 <div class="doc-example mb-3">
   <div class="row d-flex justify-content-center">
     <div class="col-md-6 p-0">
-      <button type="button" class="btn btn-primary btn-raised" title="Popover Title" data-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-trigger="hover focus" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Left</button>
-      <button type="button" class="btn btn-primary btn-raised" title="Popover Title" data-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-trigger="hover focus" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Top</button>
-      <button type="button" class="btn btn-primary btn-raised" title="Popover Title" data-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-trigger="hover focus" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Bottom</button>
-      <button type="button" class="btn btn-primary btn-raised" title="Popover Title" data-container="body" data-bs-toggle="popover" data-bs-placement="right" data-bs-trigger="hover focus" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Right</button>
+      <button type="button" class="btn btn-primary" title="Popover Title" data-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-trigger="hover focus" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Left</button>
+      <button type="button" class="btn btn-primary" title="Popover Title" data-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-trigger="hover focus" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Top</button>
+      <button type="button" class="btn btn-primary" title="Popover Title" data-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-trigger="hover focus" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Bottom</button>
+      <button type="button" class="btn btn-primary" title="Popover Title" data-container="body" data-bs-toggle="popover" data-bs-placement="right" data-bs-trigger="hover focus" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Right</button>
     </div>
   </div>
 </div>
@@ -2905,7 +2995,7 @@ link:{url-bs-docs--components-popovers}[Bootstrap Docs {char-middot} Popovers, {
 .Examples for Popovers
 [source, html]
 ----
-  <button type="button" class="btn btn-primary btn-raised"
+  <button type="button" class="btn btn-primary"
     title="Popover Title"
     data-container="body"
     data-bs-toggle="popover"
@@ -2914,7 +3004,7 @@ link:{url-bs-docs--components-popovers}[Bootstrap Docs {char-middot} Popovers, {
     data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
     Top
   </button>
-  <button type="button" class="btn btn-primary btn-raised"
+  <button type="button" class="btn btn-primary"
     title="Popover Title"
     data-container="body"
     data-bs-toggle="popover"
@@ -2923,7 +3013,7 @@ link:{url-bs-docs--components-popovers}[Bootstrap Docs {char-middot} Popovers, {
     data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
     Bottom
   </button>
-  <button type="button" class="btn btn-primary btn-raised"
+  <button type="button" class="btn btn-primary"
     title="Popover Title" data-container="body"
     data-bs-toggle="popover"
     data-bs-placement="right"
@@ -2931,7 +3021,7 @@ link:{url-bs-docs--components-popovers}[Bootstrap Docs {char-middot} Popovers, {
     data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
     Right
   </button>
-  <button type="button" class="btn btn-primary btn-raised"
+  <button type="button" class="btn btn-primary"
     title="Popover Title"
     data-container="body"
     data-bs-toggle="popover"
@@ -2981,9 +3071,9 @@ endif::[]
   theme_slogans.Yeti      = 'A friendly foundation';
   theme_slogans.Zephyr    = 'Breezy and beautiful';
 
-  themeName         = user_state.theme_name;
-  theme_slogan      = theme_slogans[themeName];
-  themeNameHeadline = '<h1 id="theme_name" class="mb-0">Theme ' +themeName+ '</h1>';
+  themeName               = user_state.theme_name;
+  theme_slogan            = theme_slogans[themeName];
+  themeNameHeadline       = '<h1 id="theme_name" class="mb-0">Theme ' +themeName+ '</h1>';
 
   $('#theme').prepend(themeNameHeadline);
   $('#theme').append('<p class="tagline mb-2"><b>'  + theme_slogan + '</b></p>');

data/lib/starter_web/utilsrv/_defaults/package.json

@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "utls",
-  "version": "2022.0.1",
+  "version": "2022.0.2",
   "description": "J1 Template Utility Server",
   "homepage": "https://jekyll.one",
   "author": {

data/lib/starter_web/utilsrv/package.json

@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "utls",
-  "version": "2022.0.1",
+  "version": "2022.0.2",
   "description": "J1 Template Utility Server",
   "homepage": "https://jekyll.one",
   "author": {