From d82ef8b43054367c14a300c6a52571334379128a Mon Sep 17 00:00:00 2001
From: nteetor <nate@haufin.ch>
Date: Sun, 5 Jun 2022 11:37:54 +0900
Subject: [PATCH] docs(*): fix and rebuild w/ latest roxygen

---
 DESCRIPTION             |   2 +-
 R/design-border.R       |   2 +-
 man/alert.Rd            | 178 +++---------
 man/background.Rd       | 149 ++--------
 man/badge.Rd            |  80 ++----
 man/border.Rd           |  53 +---
 man/buttonGroupInput.Rd | 182 ++-----------
 man/buttonInput.Rd      | 231 +++-------------
 man/card.Rd             | 584 +++++-----------------------------------
 man/checkbarInput.Rd    | 138 ++++------
 man/checkboxInput.Rd    | 378 ++++----------------------
 man/chipInput.Rd        | 428 +++++------------------------
 man/collapsePane.Rd     |   4 +-
 man/column.Rd           | 251 +++--------------
 man/d1.Rd               |  23 +-
 man/dot-style.Rd        |   8 +-
 man/dropdown.Rd         | 350 +++---------------------
 man/fileInput.Rd        |  71 +----
 man/flex.Rd             | 410 ++++------------------------
 man/float.Rd            |  69 ++---
 man/font.Rd             |  96 +------
 man/formGroup.Rd        | 129 ++-------
 man/formInput.Rd        |  99 +------
 man/listGroupInput.Rd   | 190 ++-----------
 man/margin.Rd           | 193 ++-----------
 man/menuInput.Rd        | 161 ++---------
 man/modal.Rd            | 187 ++-----------
 man/navContent.Rd       |  12 +-
 man/navInput.Rd         | 333 +++--------------------
 man/navbar.Rd           |  92 +------
 man/padding.Rd          | 193 ++-----------
 man/popover.Rd          |   4 +-
 man/radioInput.Rd       | 100 +------
 man/radiobarInput.Rd    |  35 +--
 man/rangeInput.Rd       |  44 +--
 man/reexports.Rd        |   2 +-
 man/roxygen/range.R     |  16 --
 man/selectInput.Rd      | 128 ++-------
 man/shadow.Rd           |  94 ++-----
 man/textInput.Rd        | 102 ++-----
 man/toast.Rd            |   8 +-
 41 files changed, 868 insertions(+), 4941 deletions(-)
 delete mode 100644 man/roxygen/range.R

diff --git a/DESCRIPTION b/DESCRIPTION
index a5c9229f..4c115b3a 100644
--- a/DESCRIPTION
+++ b/DESCRIPTION
@@ -24,7 +24,7 @@ BugReports: https://github.com/nteetor/yonder/issues
 Encoding: UTF-8
 LazyData: true
 Roxygen: list(markdown = TRUE)
-RoxygenNote: 7.0.2
+RoxygenNote: 7.2.0
 Depends:
     R (>= 3.2),
     shiny (>= 1.6.0)
diff --git a/R/design-border.R b/R/design-border.R
index be634c2d..68f94b64 100644
--- a/R/design-border.R
+++ b/R/design-border.R
@@ -2,7 +2,7 @@
 #'
 #' Use `border()` to add or modify tag element borders.
 #'
-#' @param tag A tag element.
+#' @inheritParams affix
 #'
 #' @eval param_color("border")
 #'
diff --git a/man/alert.Rd b/man/alert.Rd
index a39321e0..7c40c60e 100644
--- a/man/alert.Rd
+++ b/man/alert.Rd
@@ -25,64 +25,37 @@ to problems.
 
 With \code{dismissible = TRUE} you can allow the user to remove an alert. By
 default, alerts are dismissible, well suited for one-time messages or
-warnings.\if{html}{\out{<div class="r">}}\preformatted{alert(
+warnings.
+
+\if{html}{\out{<div class="sourceCode r">}}\preformatted{alert(
   .style \%>\%
     background("primary"),
   "I'm around till you say goodbye"
 )
 }\if{html}{\out{</div>}}\if{html}{\out{
-<!--html_preserve-->
-}}
-\if{html}{\out{
-<div class="r-output">
-}}
-\if{html}{\out{
 <div class="alert alert-dismissible fade show alert-primary" role="alert">
-}}
-
-
-I’m around till you say goodbye
-\if{html}{\out{<button type="button" class="close" data-dismiss="alert" aria-label="Close">}}
-\if{html}{\out{<span aria-hidden="true">}}×\if{html}{\out{</span>}} \if{html}{\out{</button>}}\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
+I'm around till you say goodbye
+<button type="button" class="close" data-dismiss="alert" aria-label="Close">
+<span aria-hidden="true">&times;</span>
+</button>
 </div>
 }}
-\if{html}{\out{
-<!--/html_preserve-->
-}}
 
 }
 
 \subsection{Static alerts}{
 
 If you do want to keep an alert or control an alert with \code{renderUI()}
-you can then use \code{dismissible = FALSE}.\if{html}{\out{<div class="r">}}\preformatted{alert(
+you can then use \code{dismissible = FALSE}.
+
+\if{html}{\out{<div class="sourceCode r">}}\preformatted{alert(
   .style \%>\%
     background("warning"),
   dismissible = FALSE,  # <-
   "I'm calling attention to something, forever."
 )
 }\if{html}{\out{</div>}}\if{html}{\out{
-<!--html_preserve-->
-}}
-\if{html}{\out{
-<div class="r-output">
-}}
-\if{html}{\out{
-<div class="alert alert-warning" role="alert">
-}}
-
-
-I’m calling attention to something, forever.\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
-<!--/html_preserve-->
+<div class="alert alert-warning" role="alert">I'm calling attention to something, forever.</div>
 }}
 
 }
@@ -90,7 +63,9 @@ I’m calling attention to something, forever.\if{html}{\out{
 \subsection{Contextual content}{
 
 Alerts include a few contextual variations. Links and headings are both
-styled differently inside an alert.\if{html}{\out{<div class="r">}}\preformatted{alert(
+styled differently inside an alert.
+
+\if{html}{\out{<div class="sourceCode r">}}\preformatted{alert(
   .style \%>\%
     background("success"),
   h5("Success!"),
@@ -98,39 +73,21 @@ styled differently inside an alert.\if{html}{\out{<div class="r">}}\preformatted
   a(href = "#", "here")
 )
 }\if{html}{\out{</div>}}\if{html}{\out{
-<!--html_preserve-->
-}}
-\if{html}{\out{
-<div class="r-output">
-}}
-\if{html}{\out{
 <div class="alert alert-dismissible fade show alert-success" role="alert">
-}}
-\if{html}{\out{
-<h5 class="alert-heading">
-}}
-
-
-Success!\if{html}{\out{
-</h5>
-}}
-
-
-Your results can be found \if{html}{\out{<a class="alert-link" href="#">}}here\if{html}{\out{</a>}}
-\if{html}{\out{<button type="button" class="close" data-dismiss="alert" aria-label="Close">}}
-\if{html}{\out{<span aria-hidden="true">}}×\if{html}{\out{</span>}} \if{html}{\out{</button>}}\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
+<h5 class="alert-heading">Success!</h5>
+Your results can be found
+<a class="alert-link" href="#">here</a>
+<button type="button" class="close" data-dismiss="alert" aria-label="Close">
+<span aria-hidden="true">&times;</span>
+</button>
 </div>
 }}
-\if{html}{\out{
-<!--/html_preserve-->
-}}
 
 
 If you want to avoid these automatic styles you can use \code{tags$a},
-\code{tags$h1}, \code{tags$h2}, etc.\if{html}{\out{<div class="r">}}\preformatted{alert(
+\code{tags$h1}, \code{tags$h2}, etc.
+
+\if{html}{\out{<div class="sourceCode r">}}\preformatted{alert(
   .style \%>\%
     background("light") \%>\%
     border("dark"),
@@ -141,51 +98,23 @@ If you want to avoid these automatic styles you can use \code{tags$a},
   a(href = "#", "Alert link")
 )
 }\if{html}{\out{</div>}}\if{html}{\out{
-<!--html_preserve-->
-}}
-\if{html}{\out{
-<div class="r-output">
-}}
-\if{html}{\out{
 <div class="alert alert-dismissible fade show alert-light border border-dark" role="alert">
-}}
-\if{html}{\out{
-<h6>
-}}
-
-
-Default heading\if{html}{\out{
-</h6>
-}}
-\if{html}{\out{
-<h6 class="alert-heading">
-}}
-
-
-Alert heading\if{html}{\out{
-</h6>
-}}
-\if{html}{\out{
+<h6>Default heading</h6>
+<h6 class="alert-heading">Alert heading</h6>
 <hr/>
-}}
-
-
-\if{html}{\out{<a href="#">}}Default link\if{html}{\out{</a>}} \if{html}{\out{<a class="alert-link" href="#">}}Alert
-link\if{html}{\out{</a>}}
-\if{html}{\out{<button type="button" class="close" data-dismiss="alert" aria-label="Close">}}
-\if{html}{\out{<span aria-hidden="true">}}×\if{html}{\out{</span>}} \if{html}{\out{</button>}}\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
+<a href="#">Default link</a>
+<a class="alert-link" href="#">Alert link</a>
+<button type="button" class="close" data-dismiss="alert" aria-label="Close">
+<span aria-hidden="true">&times;</span>
+</button>
 </div>
 }}
-\if{html}{\out{
-<!--/html_preserve-->
-}}
 
 
 Like the \code{a()} tag elements, yonder’s \code{linkInput()}s also receive
-contextual styling.\if{html}{\out{<div class="r">}}\preformatted{alert(
+contextual styling.
+
+\if{html}{\out{<div class="sourceCode r">}}\preformatted{alert(
   .style \%>\%
     background("danger"),
   h5("Problem"),
@@ -196,50 +125,15 @@ contextual styling.\if{html}{\out{<div class="r">}}\preformatted{alert(
   )
 )
 }\if{html}{\out{</div>}}\if{html}{\out{
-<!--html_preserve-->
-}}
-\if{html}{\out{
-<div class="r-output">
-}}
-\if{html}{\out{
 <div class="alert alert-dismissible fade show alert-danger" role="alert">
-}}
-\if{html}{\out{
-<h5 class="alert-heading">
-}}
-
-
-Problem\if{html}{\out{
-</h5>
-}}
-\if{html}{\out{
+<h5 class="alert-heading">Problem</h5>
 <hr/>
-}}
-\if{html}{\out{
-<button class="yonder-link btn btn-link alert-link" id="rerun">
-}}
-
-
-Click to run again\if{html}{\out{
-</button>
-}}
-\if{html}{\out{
+<button class="yonder-link btn btn-link alert-link" id="rerun">Click to run again</button>
 <button type="button" class="close" data-dismiss="alert" aria-label="Close">
-}}
-
-
-\if{html}{\out{<span aria-hidden="true">}}×\if{html}{\out{</span>}}\if{html}{\out{
+<span aria-hidden="true">&times;</span>
 </button>
-}}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
 </div>
 }}
-\if{html}{\out{
-<!--/html_preserve-->
-}}
 
 }
 }
diff --git a/man/background.Rd b/man/background.Rd
index 1a8b0ca8..d670d6a5 100644
--- a/man/background.Rd
+++ b/man/background.Rd
@@ -19,7 +19,9 @@ Use \code{background()} to modify the background color of a tag element.
 
 Input backgrounds will change differently according to the particular
 input. Changing the background of a \code{buttonGroupInput()} will change the
-background colors of the buttons in the group.\if{html}{\out{<div class="r">}}\preformatted{buttonGroupInput(
+background colors of the buttons in the group.
+
+\if{html}{\out{<div class="sourceCode r">}}\preformatted{buttonGroupInput(
   .style \%>\%
     background("info") \%>\%  # <-
     display("flex"),
@@ -28,53 +30,20 @@ background colors of the buttons in the group.\if{html}{\out{<div class="r">}}\p
   values = c("mint", "strawberry", "swirl")
 )
 }\if{html}{\out{</div>}}\if{html}{\out{
-<!--html_preserve-->
-}}
-\if{html}{\out{
-<div class="r-output">
-}}
-\if{html}{\out{
-<div id="flavors" class="yonder-button-group btn-group btn-group-info d-flex" role="group">
-}}
-\if{html}{\out{
-<button type="button" class="btn" value="mint">
-}}
-
-
-Mint\if{html}{\out{
-</button>
-}}
-\if{html}{\out{
-<button type="button" class="btn" value="strawberry">
-}}
-
-
-Strawberry\if{html}{\out{
-</button>
-}}
-\if{html}{\out{
-<button type="button" class="btn" value="swirl">
-}}
-
-
-Swirl\if{html}{\out{
-</button>
-}}
-\if{html}{\out{
+<div class="yonder-button-group btn-group btn-group-info d-flex" id="flavors" role="group">
+<button type="button" class="btn" value="mint">Mint</button>
+<button type="button" class="btn" value="strawberry">Strawberry</button>
+<button type="button" class="btn" value="swirl">Swirl</button>
 </div>
 }}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
-<!--/html_preserve-->
-}}
 
 
 Changing the background of an input is different than changing a tag
 element. More is done under the hood to apply the correct background
 styles. For example, changing the background of a radio or checkbox
-input changes the color of the selected choices.\if{html}{\out{<div class="r">}}\preformatted{radioInput(
+input changes the color of the selected choices.
+
+\if{html}{\out{<div class="sourceCode r">}}\preformatted{radioInput(
   .style \%>\%
     background("warning"),
   id = "drinks",
@@ -83,69 +52,29 @@ input changes the color of the selected choices.\if{html}{\out{<div class="r">}}
   selected = "lime"
 )
 }\if{html}{\out{</div>}}\if{html}{\out{
-<!--html_preserve-->
-}}
-\if{html}{\out{
-<div class="r-output">
-}}
-\if{html}{\out{
-<div id="drinks" class="yonder-radio bg-warning">
-}}
-\if{html}{\out{
+<div class="yonder-radio bg-warning" id="drinks">
 <div class="custom-control custom-radio">
-}}
-\if{html}{\out{
 <input class="custom-control-input" type="radio" id="radio-433-345" name="drinks" value="lime" checked autocomplete="off"/>
 <label class="custom-control-label" for="radio-433-345">Limemade</label>
-}}
-\if{html}{\out{
 </div>
-}}
-\if{html}{\out{
 <div class="custom-control custom-radio">
-}}
-\if{html}{\out{
 <input class="custom-control-input" type="radio" id="radio-665-165" name="drinks" value="lemon" autocomplete="off"/>
 <label class="custom-control-label" for="radio-665-165">Lemonade</label>
-}}
-\if{html}{\out{
 </div>
-}}
-\if{html}{\out{
 <div class="custom-control custom-radio">
-}}
-\if{html}{\out{
 <input class="custom-control-input" type="radio" id="radio-332-323" name="drinks" value="orange" autocomplete="off"/>
 <label class="custom-control-label" for="radio-332-323">Orangeade</label>
-}}
-\if{html}{\out{
-<div class="valid-feedback">
-}}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
-<div class="invalid-feedback">
-}}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
+<div class="valid-feedback"></div>
+<div class="invalid-feedback"></div>
 </div>
-}}
-\if{html}{\out{
 </div>
 }}
-\if{html}{\out{
-<!--/html_preserve-->
-}}
 
 
 If you needed to change the entire background of an input, you can wrap
-the input in a \code{div()} and modify its background.\if{html}{\out{<div class="r">}}\preformatted{div(
+the input in a \code{div()} and modify its background.
+
+\if{html}{\out{<div class="sourceCode r">}}\preformatted{div(
   .style \%>\%
     padding(2) \%>\%
     background("dark"),  # <-
@@ -160,61 +89,21 @@ the input in a \code{div()} and modify its background.\if{html}{\out{<div class=
   )
 )
 }\if{html}{\out{</div>}}\if{html}{\out{
-<!--html_preserve-->
-}}
-\if{html}{\out{
-<div class="r-output">
-}}
-\if{html}{\out{
 <div class="p-2 bg-dark">
-}}
-\if{html}{\out{
-<div id="valid" class="yonder-radio text-light bg-success">
-}}
-\if{html}{\out{
+<div class="yonder-radio text-light bg-success" id="valid">
 <div class="custom-control custom-radio">
-}}
-\if{html}{\out{
 <input class="custom-control-input" type="radio" id="radio-274-68" name="valid" value="y" autocomplete="off"/>
 <label class="custom-control-label" for="radio-274-68">Yes</label>
-}}
-\if{html}{\out{
 </div>
-}}
-\if{html}{\out{
 <div class="custom-control custom-radio">
-}}
-\if{html}{\out{
 <input class="custom-control-input" type="radio" id="radio-187-927" name="valid" value="n" checked autocomplete="off"/>
 <label class="custom-control-label" for="radio-187-927">No</label>
-}}
-\if{html}{\out{
-<div class="valid-feedback">
-}}
-\if{html}{\out{
+<div class="valid-feedback"></div>
+<div class="invalid-feedback"></div>
 </div>
-}}
-\if{html}{\out{
-<div class="invalid-feedback">
-}}
-\if{html}{\out{
 </div>
-}}
-\if{html}{\out{
 </div>
 }}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
-<!--/html_preserve-->
-}}
 
 }
 }
diff --git a/man/badge.Rd b/man/badge.Rd
index 50c2c843..40edc986 100644
--- a/man/badge.Rd
+++ b/man/badge.Rd
@@ -19,7 +19,9 @@ pass an \code{id} argument as part of \code{...}.
 \subsection{Combining badges}{
 
 Badges may be combined with other elements. They can be placed inside
-buttons.\if{html}{\out{<div class="r">}}\preformatted{buttonInput(
+buttons.
+
+\if{html}{\out{<div class="sourceCode r">}}\preformatted{buttonInput(
   .style \%>\%
     background("primary"),
   id = NULL,
@@ -27,28 +29,16 @@ buttons.\if{html}{\out{<div class="r">}}\preformatted{buttonInput(
   badge(2) \%>\% background("light")
 )
 }\if{html}{\out{</div>}}\if{html}{\out{
-<!--html_preserve-->
-}}
-\if{html}{\out{
-<div class="r-output">
-}}
-\if{html}{\out{
 <button autocomplete="off" class="yonder-button btn btn-primary" role="button" type="button">
-}}
-
-
-Counter \if{html}{\out{<span class="badge badge-light">}}2\if{html}{\out{</span>}}\if{html}{\out{
+Counter
+<span class="badge badge-light">2</span>
 </button>
 }}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
-<!--/html_preserve-->
-}}
 
 
-You can also pair badges with list groups.\if{html}{\out{<div class="r">}}\preformatted{listGroupItem <- function(...) \{
+You can also pair badges with list groups.
+
+\if{html}{\out{<div class="sourceCode r">}}\preformatted{listGroupItem <- function(...) \{
   div(...) \%>\%
     width(100) \%>\%
     display("flex") \%>\%
@@ -66,59 +56,25 @@ listGroupInput(
   )
 )
 }\if{html}{\out{</div>}}\if{html}{\out{
-<!--html_preserve-->
-}}
-\if{html}{\out{
-<div class="r-output">
-}}
-\if{html}{\out{
 <div class="yonder-list-group list-group w-50 list-group-secondary">
-}}
-
-
-\if{html}{\out{<button class="list-group-item list-group-item-action" value="&lt;div class=&quot;w-100 d-flex justify-content-between align-items-center&quot;&gt;
-Mail
-&lt;span class=&quot;badge&quot;&gt;
-&lt;i class=&quot;fas fa-envelope fa-lg&quot;&gt;&lt;/i&gt;
-&lt;/span&gt;
-&lt;/div&gt;">}}\if{html}{\out{
+<button class="list-group-item list-group-item-action" value="&lt;div class=&quot;w-100 d-flex justify-content-between align-items-center&quot;&gt;&#10;  Mail&#10;  &lt;span class=&quot;badge&quot;&gt;&#10;    &lt;i class=&quot;fas fa-envelope fa-lg&quot;&gt;&lt;/i&gt;&#10;  &lt;/span&gt;&#10;&lt;/div&gt;">
 <div class="w-100 d-flex justify-content-between align-items-center">
-}}
-
-
-Mail \if{html}{\out{<span class="badge">}} \if{html}{\out{<i class="fas fa-envelope fa-lg">}}\if{html}{\out{</i>}} \if{html}{\out{</span>}}\if{html}{\out{
+Mail
+<span class="badge">
+<i class="fas fa-envelope fa-lg"></i>
+</span>
 </div>
-}}
-\if{html}{\out{
 </button>
-}}
-
-
-\if{html}{\out{<button class="list-group-item list-group-item-action" value="&lt;div class=&quot;w-100 d-flex justify-content-between align-items-center&quot;&gt;
-Research
-&lt;span class=&quot;badge&quot;&gt;
-&lt;i class=&quot;fas fa-vial fa-lg&quot;&gt;&lt;/i&gt;
-&lt;/span&gt;
-&lt;/div&gt;">}}\if{html}{\out{
+<button class="list-group-item list-group-item-action" value="&lt;div class=&quot;w-100 d-flex justify-content-between align-items-center&quot;&gt;&#10;  Research&#10;  &lt;span class=&quot;badge&quot;&gt;&#10;    &lt;i class=&quot;fas fa-vial fa-lg&quot;&gt;&lt;/i&gt;&#10;  &lt;/span&gt;&#10;&lt;/div&gt;">
 <div class="w-100 d-flex justify-content-between align-items-center">
-}}
-
-
-Research \if{html}{\out{<span class="badge">}} \if{html}{\out{<i class="fas fa-vial fa-lg">}}\if{html}{\out{</i>}} \if{html}{\out{</span>}}\if{html}{\out{
+Research
+<span class="badge">
+<i class="fas fa-vial fa-lg"></i>
+</span>
 </div>
-}}
-\if{html}{\out{
 </button>
-}}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
 </div>
 }}
-\if{html}{\out{
-<!--/html_preserve-->
-}}
 
 }
 }
diff --git a/man/border.Rd b/man/border.Rd
index 937eef35..9afd67ac 100644
--- a/man/border.Rd
+++ b/man/border.Rd
@@ -7,6 +7,8 @@
 border(x, color = NULL, sides = "all", round = NULL)
 }
 \arguments{
+\item{x}{A tag element or \link{.style} pronoun.}
+
 \item{color}{One of \code{"primary"}, \code{"secondary"}, \code{"success"}, \code{"info"}, \code{"warning"}, \code{"danger"}, \code{"light"} or \code{"dark"} specifying the border color of the tag element, defaults to \code{NULL}.}
 
 \item{sides}{One or more of \code{"top"}, \code{"right"}, \code{"bottom"}, \code{"left"} or
@@ -16,8 +18,6 @@ border(x, color = NULL, sides = "all", round = NULL)
 \item{round}{One or more of \code{"top"}, \code{"right"}, \code{"bottom"}, \code{"left"},
 \code{"circle"}, \code{"all"}, or \code{"none"} specifying how to round the border(s) of a
 tag element, defaults to \code{NULL}, in which case the argument is ignored.}
-
-\item{tag}{A tag element.}
 }
 \description{
 Use \code{border()} to add or modify tag element borders.
@@ -25,7 +25,9 @@ Use \code{border()} to add or modify tag element borders.
 \details{
 \subsection{Cards}{
 
-Card borders and font colors.\if{html}{\out{<div class="r">}}\preformatted{card(
+Card borders and font colors.
+
+\if{html}{\out{<div class="sourceCode r">}}\preformatted{card(
   .style \%>\% 
     border("primary") \%>\% 
     font("primary"),
@@ -34,53 +36,14 @@ Card borders and font colors.\if{html}{\out{<div class="r">}}\preformatted{card(
   p("Etiam porta sem malesuada magna mollis euismod.")
 )
 }\if{html}{\out{</div>}}\if{html}{\out{
-<!--html_preserve-->
-}}
-\if{html}{\out{
-<div class="r-output">
-}}
-\if{html}{\out{
 <div class="card border border-primary text-primary">
-}}
-\if{html}{\out{
-<div class="card-header">
-}}
-
-
-Primary\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
+<div class="card-header">Primary</div>
 <div class="card-body">
-}}
-\if{html}{\out{
-<p class="card-text">
-}}
-
-
-Cras justo odio, dapibus ac facilisis in, egestas eget quam.\if{html}{\out{
-</p>
-}}
-\if{html}{\out{
-<p class="card-text">
-}}
-
-
-Etiam porta sem malesuada magna mollis euismod.\if{html}{\out{
-</p>
-}}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
+<p class="card-text">Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
+<p class="card-text">Etiam porta sem malesuada magna mollis euismod.</p>
 </div>
-}}
-\if{html}{\out{
 </div>
 }}
-\if{html}{\out{
-<!--/html_preserve-->
-}}
 
 }
 }
diff --git a/man/buttonGroupInput.Rd b/man/buttonGroupInput.Rd
index a8699d3f..0d1ccf38 100644
--- a/man/buttonGroupInput.Rd
+++ b/man/buttonGroupInput.Rd
@@ -54,202 +54,70 @@ A set of buttons with custom values.
 \details{
 \subsection{Layout options}{
 
-Button groups can be laid in two directions, horizontal or vertical.\if{html}{\out{<div class="r">}}\preformatted{buttonGroupInput(
+Button groups can be laid in two directions, horizontal or vertical.
+
+\if{html}{\out{<div class="sourceCode r">}}\preformatted{buttonGroupInput(
   .style \%>\%
     background("primary"),
   id = NULL,
   choices = c("Grape", "Raspberry", "Kiwi")
 )
 }\if{html}{\out{</div>}}\if{html}{\out{
-<!--html_preserve-->
-}}
-\if{html}{\out{
-<div class="r-output">
-}}
-\if{html}{\out{
 <div class="yonder-button-group btn-group btn-group-primary" role="group">
-}}
-\if{html}{\out{
-<button type="button" class="btn" value="Grape">
-}}
-
-
-Grape\if{html}{\out{
-</button>
-}}
-\if{html}{\out{
-<button type="button" class="btn" value="Raspberry">
-}}
-
-
-Raspberry\if{html}{\out{
-</button>
-}}
-\if{html}{\out{
-<button type="button" class="btn" value="Kiwi">
-}}
-
-
-Kiwi\if{html}{\out{
-</button>
-}}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
+<button type="button" class="btn" value="Grape">Grape</button>
+<button type="button" class="btn" value="Raspberry">Raspberry</button>
+<button type="button" class="btn" value="Kiwi">Kiwi</button>
 </div>
 }}
-\if{html}{\out{
-<!--/html_preserve-->
-}}
 
 
-Vertical button groups can help fill available space.\if{html}{\out{<div class="r">}}\preformatted{buttonGroupInput(
+Vertical button groups can help fill available space.
+
+\if{html}{\out{<div class="sourceCode r">}}\preformatted{buttonGroupInput(
   .style \%>\%
     background("primary"),
   id = NULL,
   choices = c("Cherry", "Apple", "Pear")
 )
 }\if{html}{\out{</div>}}\if{html}{\out{
-<!--html_preserve-->
-}}
-\if{html}{\out{
-<div class="r-output">
-}}
-\if{html}{\out{
 <div class="yonder-button-group btn-group btn-group-primary" role="group">
-}}
-\if{html}{\out{
-<button type="button" class="btn" value="Cherry">
-}}
-
-
-Cherry\if{html}{\out{
-</button>
-}}
-\if{html}{\out{
-<button type="button" class="btn" value="Apple">
-}}
-
-
-Apple\if{html}{\out{
-</button>
-}}
-\if{html}{\out{
-<button type="button" class="btn" value="Pear">
+<button type="button" class="btn" value="Cherry">Cherry</button>
+<button type="button" class="btn" value="Apple">Apple</button>
+<button type="button" class="btn" value="Pear">Pear</button>
+</div>
 }}
 
 
-Pear\if{html}{\out{
-</button>
-}}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
-<!--/html_preserve-->
-}}
-\if{html}{\out{<div class="r">}}\preformatted{buttonGroupInput(
+\if{html}{\out{<div class="sourceCode r">}}\preformatted{buttonGroupInput(
   id = "group1",
   choices = c("Once", "Twice", "Thrice"),
   values = c(1, 2, 3)
 )
 }\if{html}{\out{</div>}}\if{html}{\out{
-<!--html_preserve-->
-}}
-\if{html}{\out{
-<div class="r-output">
-}}
-\if{html}{\out{
-<div id="group1" class="yonder-button-group btn-group" role="group">
-}}
-\if{html}{\out{
-<button type="button" class="btn" value="1">
-}}
-
-
-Once\if{html}{\out{
-</button>
-}}
-\if{html}{\out{
-<button type="button" class="btn" value="2">
-}}
-
-
-Twice\if{html}{\out{
-</button>
-}}
-\if{html}{\out{
-<button type="button" class="btn" value="3">
-}}
-
-
-Thrice\if{html}{\out{
-</button>
-}}
-\if{html}{\out{
+<div class="yonder-button-group btn-group" id="group1" role="group">
+<button type="button" class="btn" value="1">Once</button>
+<button type="button" class="btn" value="2">Twice</button>
+<button type="button" class="btn" value="3">Thrice</button>
 </div>
 }}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
-<!--/html_preserve-->
-}}
 
 }
 
-\subsection{Styling the button group}{\if{html}{\out{<div class="r">}}\preformatted{buttonGroupInput(
+\subsection{Styling the button group}{
+
+\if{html}{\out{<div class="sourceCode r">}}\preformatted{buttonGroupInput(
   .style \%>\%
     background("primary"),
   id = "group2",
   choices = c("Button 1", "Button 2", "Button 3")
 )
 }\if{html}{\out{</div>}}\if{html}{\out{
-<!--html_preserve-->
-}}
-\if{html}{\out{
-<div class="r-output">
-}}
-\if{html}{\out{
-<div id="group2" class="yonder-button-group btn-group btn-group-primary" role="group">
-}}
-\if{html}{\out{
-<button type="button" class="btn" value="Button 1">
-}}
-
-
-Button 1\if{html}{\out{
-</button>
-}}
-\if{html}{\out{
-<button type="button" class="btn" value="Button 2">
-}}
-
-
-Button 2\if{html}{\out{
-</button>
-}}
-\if{html}{\out{
-<button type="button" class="btn" value="Button 3">
-}}
-
-
-Button 3\if{html}{\out{
-</button>
-}}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
+<div class="yonder-button-group btn-group btn-group-primary" id="group2" role="group">
+<button type="button" class="btn" value="Button 1">Button 1</button>
+<button type="button" class="btn" value="Button 2">Button 2</button>
+<button type="button" class="btn" value="Button 3">Button 3</button>
 </div>
 }}
-\if{html}{\out{
-<!--/html_preserve-->
-}}
 
 }
 }
diff --git a/man/buttonInput.Rd b/man/buttonInput.Rd
index da841820..ae6a5387 100644
--- a/man/buttonInput.Rd
+++ b/man/buttonInput.Rd
@@ -84,123 +84,64 @@ To remove a button or link input's tooltip pass an empty tooltip,
 \code{tooltip()}, to \code{updateButtonInput()} or \code{updateLinkInput()}.
 }
 
-\subsection{Getting started}{\if{html}{\out{<div class="r">}}\preformatted{buttonInput(
+\subsection{Getting started}{
+
+\if{html}{\out{<div class="sourceCode r">}}\preformatted{buttonInput(
   id = NULL,
   label = "Label"
 )
-}\if{html}{\out{</div>}}\if{html}{\out{
-<!--html_preserve-->
-}}
-\if{html}{\out{
-<div class="r-output">
-}}
-\if{html}{\out{
-<button class="yonder-button btn" type="button" role="button" autocomplete="off">
-}}
-
-
-Label\if{html}{\out{
-</button>
-}}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
-<!--/html_preserve-->
-}}
+}\if{html}{\out{</div>}}
 
+\if{html}{\out{<button class="yonder-button btn" type="button" role="button" autocomplete="off">}}Label\if{html}{\out{</button>}}
 }
 
-\subsection{Add a little color}{\if{html}{\out{<div class="r">}}\preformatted{buttonInput(
+\subsection{Add a little color}{
+
+\if{html}{\out{<div class="sourceCode r">}}\preformatted{buttonInput(
   .style \%>\%
     background("primary"),
   id = NULL,
   label = "Label"
 )
-}\if{html}{\out{</div>}}\if{html}{\out{
-<!--html_preserve-->
-}}
-\if{html}{\out{
-<div class="r-output">
-}}
-\if{html}{\out{
-<button autocomplete="off" class="yonder-button btn btn-primary" role="button" type="button">
-}}
+}\if{html}{\out{</div>}}
 
+\if{html}{\out{<button autocomplete="off" class="yonder-button btn btn-primary" role="button" type="button">}}Label\if{html}{\out{</button>}}
 
-Label\if{html}{\out{
-</button>
-}}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
-<!--/html_preserve-->
-}}
+Use the \code{width()} utility to adjust the size of a button.
 
-
-Use the \code{width()} utility to adjust the size of a button.\if{html}{\out{<div class="r">}}\preformatted{buttonInput(
+\if{html}{\out{<div class="sourceCode r">}}\preformatted{buttonInput(
   .style \%>\%
     background("danger") \%>\%
     width(75),  # <-
   id = NULL,
   label = "Label"
 )
-}\if{html}{\out{</div>}}\if{html}{\out{
-<!--html_preserve-->
-}}
-\if{html}{\out{
-<div class="r-output">
-}}
-\if{html}{\out{
-<button autocomplete="off" class="yonder-button btn btn-danger w-75" role="button" type="button">
-}}
-
-
-Label\if{html}{\out{
-</button>
-}}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
-<!--/html_preserve-->
-}}
+}\if{html}{\out{</div>}}
 
+\if{html}{\out{<button autocomplete="off" class="yonder-button btn btn-danger w-75" role="button" type="button">}}Label\if{html}{\out{</button>}}
 }
 
-\subsection{Reactive links}{\if{html}{\out{<div class="r">}}\preformatted{div(
+\subsection{Reactive links}{
+
+\if{html}{\out{<div class="sourceCode r">}}\preformatted{div(
   "Curabitur", linkInput(id = "link1", label = "vulputate"),
   "vestibulum lorem."
 )
 }\if{html}{\out{</div>}}\if{html}{\out{
-<!--html_preserve-->
-}}
-\if{html}{\out{
-<div class="r-output">
-}}
-\if{html}{\out{
 <div>
-}}
-
-
 Curabitur
-\if{html}{\out{<button class="yonder-link btn btn-link" id="link1">}}vulputate\if{html}{\out{</button>}}
-vestibulum lorem.\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
+<button class="yonder-link btn btn-link" id="link1">vulputate</button>
+vestibulum lorem.
 </div>
 }}
-\if{html}{\out{
-<!--/html_preserve-->
-}}
 
 }
 
 \subsection{Stretched buttons and links}{
 
-Use a stretched button to make an entire card clickable.\if{html}{\out{<div class="r">}}\preformatted{card(
+Use a stretched button to make an entire card clickable.
+
+\if{html}{\out{<div class="sourceCode r">}}\preformatted{card(
   .style \%>\%
     border("primary") \%>\%
     font("primary"),
@@ -218,72 +159,24 @@ Use a stretched button to make an entire card clickable.\if{html}{\out{<div clas
   )
 )
 }\if{html}{\out{</div>}}\if{html}{\out{
-<!--html_preserve-->
-}}
-\if{html}{\out{
-<div class="r-output">
-}}
-\if{html}{\out{
 <div class="card border border-primary text-primary">
-}}
-\if{html}{\out{
-<div class="card-header">
-}}
-
-
-Product summary\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
+<div class="card-header">Product summary</div>
 <div class="card-body">
-}}
-\if{html}{\out{
-<p class="card-text">
-}}
-
-
-Here is a summary\if{html}{\out{
-</p>
-}}
-\if{html}{\out{
-<p class="card-text">
-}}
-
-
-This is a second paragraph\if{html}{\out{
-</p>
-}}
-\if{html}{\out{
+<p class="card-text">Here is a summary</p>
+<p class="card-text">This is a second paragraph</p>
 </div>
-}}
-\if{html}{\out{
 <div class="card-footer">
-}}
-\if{html}{\out{
-<button autocomplete="off" class="yonder-button btn stretched-link btn-primary" id="seemore" role="button" type="button">
-}}
-
-
-See more\if{html}{\out{
-</button>
-}}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
+<button autocomplete="off" class="yonder-button btn stretched-link btn-primary" id="seemore" role="button" type="button">See more</button>
 </div>
-}}
-\if{html}{\out{
 </div>
 }}
-\if{html}{\out{
-<!--/html_preserve-->
-}}
 
 
 Notice, when you hover over the card the mouse cursor changes and the
 button appears hovered. The card is now passing clicks on to the button.
-Clicking anywhere on the card will trigger a click on the button.\if{html}{\out{<div class="r">}}\preformatted{card(
+Clicking anywhere on the card will trigger a click on the button.
+
+\if{html}{\out{<div class="sourceCode r">}}\preformatted{card(
   header = "Card with stretched button",
   p("Notice when you hover over the card, the button also detects ",
     "the hover."),
@@ -296,79 +189,35 @@ Clicking anywhere on the card will trigger a click on the button.\if{html}{\out{
   )
 )
 }\if{html}{\out{</div>}}\if{html}{\out{
-<!--html_preserve-->
-}}
-\if{html}{\out{
-<div class="r-output">
-}}
-\if{html}{\out{
 <div class="card">
-}}
-\if{html}{\out{
-<div class="card-header">
-}}
-
-
-Card with stretched button\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
+<div class="card-header">Card with stretched button</div>
 <div class="card-body">
-}}
-\if{html}{\out{
 <p class="card-text">
-}}
-
-
-Notice when you hover over the card, the button also detects the hover.\if{html}{\out{
+Notice when you hover over the card, the button also detects 
+the hover.
 </p>
-}}
-\if{html}{\out{
-<button autocomplete="off" class="yonder-button btn stretched-link btn-primary" role="button" type="button">
-}}
-
-
-Label\if{html}{\out{
-</button>
-}}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
+<button autocomplete="off" class="yonder-button btn stretched-link btn-primary" role="button" type="button">Label</button>
 </div>
-}}
-\if{html}{\out{
 </div>
 }}
-\if{html}{\out{
-<!--/html_preserve-->
-}}
 
 }
 
 \subsection{Download button}{
 
-Pair a download button input with \code{shiny::downloadHandler()}.\if{html}{\out{<div class="r">}}\preformatted{buttonInput(
+Pair a download button input with \code{shiny::downloadHandler()}.
+
+\if{html}{\out{<div class="sourceCode r">}}\preformatted{buttonInput(
   download = TRUE,  # <-
   id = NULL,
   label = "Download",
   tags$i(class = "fas fa-download")
 )
 }\if{html}{\out{</div>}}\if{html}{\out{
-<!--html_preserve-->
-}}
-\if{html}{\out{
-<div class="r-output">
-}}
-
-
-<a class=“yonder-button btn shiny-download-link” type=“button”
-role=“button” href="" _target download autocomplete=“off”> Download
-\if{html}{\out{<i class="fas fa-download">}}\if{html}{\out{</i>}} \if{html}{\out{</a>}}\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
-<!--/html_preserve-->
+<a class="yonder-button btn shiny-download-link" type="button" role="button" href="" _target download autocomplete="off">
+Download
+<i class="fas fa-download"></i>
+</a>
 }}
 
 }
diff --git a/man/card.Rd b/man/card.Rd
index dbebc1ac..10a43142 100644
--- a/man/card.Rd
+++ b/man/card.Rd
@@ -31,48 +31,27 @@ is placed around any number of cards. Additionally, grouping cards with
 \details{
 \subsection{A simple card}{
 
-Cards expand to fill the width of their parent element.\if{html}{\out{<div class="r">}}\preformatted{card(
+Cards expand to fill the width of their parent element.
+
+\if{html}{\out{<div class="sourceCode r">}}\preformatted{card(
   p("Praesent fermentum tempor tellus.")
 )
 }\if{html}{\out{</div>}}\if{html}{\out{
-<!--html_preserve-->
-}}
-\if{html}{\out{
-<div class="r-output">
-}}
-\if{html}{\out{
 <div class="card">
-}}
-\if{html}{\out{
 <div class="card-body">
-}}
-\if{html}{\out{
-<p class="card-text">
-}}
-
-
-Praesent fermentum tempor tellus.\if{html}{\out{
-</p>
-}}
-\if{html}{\out{
+<p class="card-text">Praesent fermentum tempor tellus.</p>
 </div>
-}}
-\if{html}{\out{
 </div>
 }}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
-<!--/html_preserve-->
-}}
 
 }
 
 \subsection{Contextual styles}{
 
 Cards include contextual content. Headings 1 through 5 are styled as
-main titles and heading 6 as a subtitle.\if{html}{\out{<div class="r">}}\preformatted{card(
+main titles and heading 6 as a subtitle.
+
+\if{html}{\out{<div class="sourceCode r">}}\preformatted{card(
   h5("Title"),
   h6("Subtitle"),
   p("Nullam tempus. Mauris mollis tincidunt felis."),
@@ -83,75 +62,27 @@ main titles and heading 6 as a subtitle.\if{html}{\out{<div class="r">}}\preform
   )
 )
 }\if{html}{\out{</div>}}\if{html}{\out{
-<!--html_preserve-->
-}}
-\if{html}{\out{
-<div class="r-output">
-}}
-\if{html}{\out{
 <div class="card">
-}}
-\if{html}{\out{
 <div class="card-body">
-}}
-\if{html}{\out{
-<h5 class="card-title">
-}}
-
-
-Title\if{html}{\out{
-</h5>
-}}
-\if{html}{\out{
-<h6 class="card-subtitle">
-}}
-
-
-Subtitle\if{html}{\out{
-</h6>
-}}
-\if{html}{\out{
-<p class="card-text">
-}}
-
-
-Nullam tempus. Mauris mollis tincidunt felis.\if{html}{\out{
-</p>
-}}
-\if{html}{\out{
-<p class="card-text">
-}}
-
-
-Nullam libero mauris, consequat quis, varius et, dictum id, arcu.\if{html}{\out{
-</p>
-}}
-\if{html}{\out{
+<h5 class="card-title">Title</h5>
+<h6 class="card-subtitle">Subtitle</h6>
+<p class="card-text">Nullam tempus. Mauris mollis tincidunt felis.</p>
+<p class="card-text">Nullam libero mauris, consequat quis, varius et, dictum id, arcu.</p>
 </div>
-}}
-\if{html}{\out{
 <div class="card-footer">
-}}
-
-
-\if{html}{\out{<a href="#">}}Link\if{html}{\out{</a>}} \if{html}{\out{<a href="#">}}Link\if{html}{\out{</a>}}\if{html}{\out{
+<a href="#">Link</a>
+<a href="#">Link</a>
 </div>
-}}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
 </div>
 }}
-\if{html}{\out{
-<!--/html_preserve-->
-}}
 
 }
 
 \subsection{Styling cards}{
 
-Cards can have different borders and fonts.\if{html}{\out{<div class="r">}}\preformatted{card(
+Cards can have different borders and fonts.
+
+\if{html}{\out{<div class="sourceCode r">}}\preformatted{card(
   .style \%>\%
     border("info") \%>\%
     font("info"),
@@ -160,54 +91,17 @@ Cards can have different borders and fonts.\if{html}{\out{<div class="r">}}\pref
   p("Cras placerat accumsan nulla.")
 )
 }\if{html}{\out{</div>}}\if{html}{\out{
-<!--html_preserve-->
-}}
-\if{html}{\out{
-<div class="r-output">
-}}
-\if{html}{\out{
 <div class="card border border-info text-info">
-}}
-\if{html}{\out{
-<div class="card-header">
-}}
-
-
-Donec pretium posuere tellus\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
+<div class="card-header">Donec pretium posuere tellus</div>
 <div class="card-body">
-}}
-\if{html}{\out{
-<p class="card-text">
-}}
-
-
-Donec hendrerit tempor tellus.\if{html}{\out{
-</p>
-}}
-\if{html}{\out{
-<p class="card-text">
-}}
-
-
-Cras placerat accumsan nulla.\if{html}{\out{
-</p>
-}}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
+<p class="card-text">Donec hendrerit tempor tellus.</p>
+<p class="card-text">Cras placerat accumsan nulla.</p>
 </div>
-}}
-\if{html}{\out{
 </div>
 }}
-\if{html}{\out{
-<!--/html_preserve-->
-}}
-\if{html}{\out{<div class="r">}}\preformatted{card(
+
+
+\if{html}{\out{<div class="sourceCode r">}}\preformatted{card(
   .style \%>\%
     border("danger") \%>\%
     font("danger"),
@@ -216,56 +110,19 @@ Cras placerat accumsan nulla.\if{html}{\out{
   p("Pellentesque dapibus suscipit ligula.")
 )
 }\if{html}{\out{</div>}}\if{html}{\out{
-<!--html_preserve-->
-}}
-\if{html}{\out{
-<div class="r-output">
-}}
-\if{html}{\out{
 <div class="card border border-danger text-danger">
-}}
-\if{html}{\out{
 <div class="card-body">
-}}
-\if{html}{\out{
-<p class="card-text">
-}}
-
-
-Aliquam posuere.\if{html}{\out{
-</p>
-}}
-\if{html}{\out{
-<p class="card-text">
-}}
-
-
-Phasellus neque orci, porta a, aliquet quis, semper a, massa.\if{html}{\out{
-</p>
-}}
-\if{html}{\out{
-<p class="card-text">
-}}
-
-
-Pellentesque dapibus suscipit ligula.\if{html}{\out{
-</p>
-}}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
+<p class="card-text">Aliquam posuere.</p>
+<p class="card-text">Phasellus neque orci, porta a, aliquet quis, semper a, massa.</p>
+<p class="card-text">Pellentesque dapibus suscipit ligula.</p>
 </div>
-}}
-\if{html}{\out{
 </div>
 }}
-\if{html}{\out{
-<!--/html_preserve-->
-}}
 
 
-You can also change the background.\if{html}{\out{<div class="r">}}\preformatted{card(
+You can also change the background.
+
+\if{html}{\out{<div class="sourceCode r">}}\preformatted{card(
   .style \%>\%
     background("warning"),
   header = "Phasellus lacus",
@@ -274,67 +131,23 @@ You can also change the background.\if{html}{\out{<div class="r">}}\preformatted
   footer = "Nam euismod tellus id erat."
 )
 }\if{html}{\out{</div>}}\if{html}{\out{
-<!--html_preserve-->
-}}
-\if{html}{\out{
-<div class="r-output">
-}}
-\if{html}{\out{
 <div class="card bg-warning">
-}}
-\if{html}{\out{
-<div class="card-header">
-}}
-
-
-Phasellus lacus\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
+<div class="card-header">Phasellus lacus</div>
 <div class="card-body">
-}}
-\if{html}{\out{
-<p class="card-text">
-}}
-
-
-Etiam laoreet quam sed arcu.\if{html}{\out{
-</p>
-}}
-\if{html}{\out{
-<p class="card-text">
-}}
-
-
-Etiam vel tortor sodales tellus ultricies commodo.\if{html}{\out{
-</p>
-}}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
-<div class="card-footer">
-}}
-
-
-Nam euismod tellus id erat.\if{html}{\out{
+<p class="card-text">Etiam laoreet quam sed arcu.</p>
+<p class="card-text">Etiam vel tortor sodales tellus ultricies commodo.</p>
 </div>
-}}
-\if{html}{\out{
+<div class="card-footer">Nam euismod tellus id erat.</div>
 </div>
 }}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
-<!--/html_preserve-->
-}}
 
 }
 
 \subsection{Cards with list groups}{
 
-Combine a list group with a card.\if{html}{\out{<div class="r">}}\preformatted{card(
+Combine a list group with a card.
+
+\if{html}{\out{<div class="sourceCode r">}}\preformatted{card(
   listGroupInput(
     id = NULL,
     flush = TRUE,
@@ -351,56 +164,19 @@ Combine a list group with a card.\if{html}{\out{<div class="r">}}\preformatted{c
   )
 )
 }\if{html}{\out{</div>}}\if{html}{\out{
-<!--html_preserve-->
-}}
-\if{html}{\out{
-<div class="r-output">
-}}
-\if{html}{\out{
 <div class="card">
-}}
-\if{html}{\out{
 <div class="yonder-list-group list-group list-group-flush">
-}}
-\if{html}{\out{
-<button class="list-group-item list-group-item-action" value="choice1">
-}}
-
-
-Pellentesque tristique imperdiet tortor.\if{html}{\out{
-</button>
-}}
-\if{html}{\out{
-<button class="list-group-item list-group-item-action" value="choice2">
-}}
-
-
-Lorem ipsum dolor sit amet, consectetuer adipiscing elit.\if{html}{\out{
-</button>
-}}
-\if{html}{\out{
-<button class="list-group-item list-group-item-action" value="choice3">
-}}
-
-
-Phasellus purus.\if{html}{\out{
-</button>
-}}
-\if{html}{\out{
+<button class="list-group-item list-group-item-action" value="choice1">Pellentesque tristique imperdiet tortor.</button>
+<button class="list-group-item list-group-item-action" value="choice2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</button>
+<button class="list-group-item list-group-item-action" value="choice3">Phasellus purus.</button>
 </div>
-}}
-\if{html}{\out{
 </div>
 }}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
-<!--/html_preserve-->
-}}
 
 
-You can include other elements, too.\if{html}{\out{<div class="r">}}\preformatted{card(
+You can include other elements, too.
+
+\if{html}{\out{<div class="sourceCode r">}}\preformatted{card(
   h5("Title"),
   listGroupInput(
     id = NULL,
@@ -411,85 +187,26 @@ You can include other elements, too.\if{html}{\out{<div class="r">}}\preformatte
   linkInput(id = NULL, label = "Link")
 )
 }\if{html}{\out{</div>}}\if{html}{\out{
-<!--html_preserve-->
-}}
-\if{html}{\out{
-<div class="r-output">
-}}
-\if{html}{\out{
 <div class="card">
-}}
-\if{html}{\out{
 <div class="card-body">
-}}
-\if{html}{\out{
-<h5 class="card-title">
-}}
-
-
-Title\if{html}{\out{
-</h5>
-}}
-\if{html}{\out{
+<h5 class="card-title">Title</h5>
 </div>
-}}
-\if{html}{\out{
 <div class="yonder-list-group list-group list-group-flush">
-}}
-\if{html}{\out{
-<button class="list-group-item list-group-item-action" value="Choice 1">
-}}
-
-
-Choice 1\if{html}{\out{
-</button>
-}}
-\if{html}{\out{
-<button class="list-group-item list-group-item-action" value="Choice 2">
-}}
-
-
-Choice 2\if{html}{\out{
-</button>
-}}
-\if{html}{\out{
+<button class="list-group-item list-group-item-action" value="Choice 1">Choice 1</button>
+<button class="list-group-item list-group-item-action" value="Choice 2">Choice 2</button>
 </div>
-}}
-\if{html}{\out{
 <div class="card-body">
-}}
-\if{html}{\out{
-<button class="yonder-link btn btn-link card-link">
-}}
-
-
-Link\if{html}{\out{
-</button>
-}}
-\if{html}{\out{
-<button class="yonder-link btn btn-link card-link">
-}}
-
-
-Link\if{html}{\out{
-</button>
-}}
-\if{html}{\out{
+<button class="yonder-link btn btn-link card-link">Link</button>
+<button class="yonder-link btn btn-link card-link">Link</button>
 </div>
-}}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
 </div>
 }}
-\if{html}{\out{
-<!--/html_preserve-->
-}}
 
 }
 
-\subsection{Tabbed content in cards}{\if{html}{\out{<div class="r">}}\preformatted{card(
+\subsection{Tabbed content in cards}{
+
+\if{html}{\out{<div class="sourceCode r">}}\preformatted{card(
   header = navInput(
     id = "tabs",
     choices = c("Tab 1", "Tab 2", "Tab 3"),
@@ -513,119 +230,41 @@ Link\if{html}{\out{
   )
 )
 }\if{html}{\out{</div>}}\if{html}{\out{
-<!--html_preserve-->
-}}
-\if{html}{\out{
-<div class="r-output">
-}}
-\if{html}{\out{
 <div class="card">
-}}
-\if{html}{\out{
 <div class="card-header">
-}}
-\if{html}{\out{
 <ul class="yonder-nav nav nav-tabs card-header-tabs" id="tabs">
-}}
-\if{html}{\out{
 <li class="nav-item">
-}}
-\if{html}{\out{
-<button class="nav-link btn btn-link active" value="Tab 1">
-}}
-
-
-Tab 1\if{html}{\out{
-</button>
-}}
-\if{html}{\out{
+<button class="nav-link btn btn-link active" value="Tab 1">Tab 1</button>
 </li>
-}}
-\if{html}{\out{
 <li class="nav-item">
-}}
-\if{html}{\out{
-<button class="nav-link btn btn-link" value="Tab 2">
-}}
-
-
-Tab 2\if{html}{\out{
-</button>
-}}
-\if{html}{\out{
+<button class="nav-link btn btn-link" value="Tab 2">Tab 2</button>
 </li>
-}}
-\if{html}{\out{
 <li class="nav-item">
-}}
-\if{html}{\out{
-<button class="nav-link btn btn-link" value="Tab 3">
-}}
-
-
-Tab 3\if{html}{\out{
-</button>
-}}
-\if{html}{\out{
+<button class="nav-link btn btn-link" value="Tab 3">Tab 3</button>
 </li>
-}}
-\if{html}{\out{
 </ul>
-}}
-\if{html}{\out{
 </div>
-}}
-\if{html}{\out{
 <div class="card-body">
-}}
-\if{html}{\out{
 <div class="tab-content">
-}}
-\if{html}{\out{
-<div id="Phasellus purus." class="tab-pane fade" role="tab-panel">
-}}
-
-
+<div class="tab-pane fade" role="tab-panel" id="Phasellus purus.">
 Proin neque massa, cursus ut, gravida ut, lobortis eget, lacus.
-Phasellus purus.\if{html}{\out{
+Phasellus purus.
 </div>
-}}
-\if{html}{\out{
-<div id="Donec at pede. Praesent augue." class="tab-pane fade" role="tab-panel">
-}}
-
-
-Pellentesque tristique imperdiet tortor.\if{html}{\out{
+<div class="tab-pane fade" role="tab-panel" id="Donec at pede. Praesent augue.">Pellentesque tristique imperdiet tortor.</div>
+<div class="tab-pane fade" role="tab-panel" id="Fusce suscipit, wisi nec facilisis facilisis,">
+est dui fermentum leo, quis tempor ligula erat quis odio.
+Donec hendrerit tempor tellus.
 </div>
-}}
-\if{html}{\out{
-<div id="Fusce suscipit, wisi nec facilisis facilisis," class="tab-pane fade" role="tab-panel">
-}}
-
-
-est dui fermentum leo, quis tempor ligula erat quis odio. Donec
-hendrerit tempor tellus.\if{html}{\out{
 </div>
-}}
-\if{html}{\out{
 </div>
-}}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
 </div>
 }}
-\if{html}{\out{
-<!--/html_preserve-->
-}}
 
 }
 
-\subsection{Deck of cards}{\if{html}{\out{<div class="r">}}\preformatted{deck(
+\subsection{Deck of cards}{
+
+\if{html}{\out{<div class="sourceCode r">}}\preformatted{deck(
   card(
     .style \%>\%
       background("info"),
@@ -653,117 +292,34 @@ hendrerit tempor tellus.\if{html}{\out{
   )
 )
 }\if{html}{\out{</div>}}\if{html}{\out{
-<!--html_preserve-->
-}}
-\if{html}{\out{
-<div class="r-output">
-}}
-\if{html}{\out{
 <div class="card-deck">
-}}
-\if{html}{\out{
 <div class="card bg-info" title="Nullam tristique">
-}}
-\if{html}{\out{
 <div class="card-body">
-}}
-\if{html}{\out{
-<p class="card-text">
-}}
-
-
-Fusce sagittis, libero non molestie mollis, magna orci ultrices dolor,
-at vulputate neque nulla lacinia eros.\if{html}{\out{
-</p>
-}}
-\if{html}{\out{
 <p class="card-text">
-}}
-
-
-Nunc rutrum turpis sed pede.\if{html}{\out{
+Fusce sagittis, libero non molestie mollis, magna orci ultrices 
+dolor, at vulputate neque nulla lacinia eros.
 </p>
-}}
-\if{html}{\out{
+<p class="card-text">Nunc rutrum turpis sed pede.</p>
 </div>
-}}
-\if{html}{\out{
-<div class="card-footer">
-}}
-
-
-Cras placerat accumsan nulla.\if{html}{\out{
+<div class="card-footer">Cras placerat accumsan nulla.</div>
 </div>
-}}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
 <div class="card bg-dark text-light" title="Integer placerat">
-}}
-\if{html}{\out{
 <div class="card-body">
-}}
-\if{html}{\out{
 <p class="card-text">
-}}
-
-
-Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec
-hendrerit tempor tellus.\if{html}{\out{
+Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec 
+hendrerit tempor tellus.
 </p>
-}}
-\if{html}{\out{
 </div>
-}}
-\if{html}{\out{
-<div class="card-footer">
-}}
-
-
-Cras placerat accumsan nulla.\if{html}{\out{
+<div class="card-footer">Cras placerat accumsan nulla.</div>
 </div>
-}}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
 <div class="card bg-primary" title="Phasellus neque">
-}}
-\if{html}{\out{
 <div class="card-body">
-}}
-\if{html}{\out{
-<p class="card-text">
-}}
-
-
-Donec at pede. Etiam vel neque nec dui dignissim bibendum.\if{html}{\out{
-</p>
-}}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
-<div class="card-footer">
-}}
-
-
-Cras placerat accumsan nulla.\if{html}{\out{
+<p class="card-text">Donec at pede. Etiam vel neque nec dui dignissim bibendum.</p>
 </div>
-}}
-\if{html}{\out{
+<div class="card-footer">Cras placerat accumsan nulla.</div>
 </div>
-}}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
 </div>
 }}
-\if{html}{\out{
-<!--/html_preserve-->
-}}
 
 }
 }
diff --git a/man/checkbarInput.Rd b/man/checkbarInput.Rd
index 19696921..9b3091cc 100644
--- a/man/checkbarInput.Rd
+++ b/man/checkbarInput.Rd
@@ -48,42 +48,35 @@ buttons, but with a checked or highlighted state.
 \details{
 \subsection{Getting started}{
 
-Checkbars will expand to fill the width of their parent element.\if{html}{\out{<div class="r">}}\preformatted{checkbarInput(
+Checkbars will expand to fill the width of their parent element.
+
+\if{html}{\out{<div class="sourceCode r">}}\preformatted{checkbarInput(
   .style \%>\%
     background("secondary"),
   id = NULL,
   choices = c("Choice 1", "Choice 2", "Choice 3")
 )
 }\if{html}{\out{</div>}}\if{html}{\out{
-<!--html_preserve-->
-}}
-\if{html}{\out{
-<div class="r-output">
-}}
-\if{html}{\out{
 <div class="yonder-checkbar btn-group btn-group-toggle d-flex bg-secondary" data-toggle="buttons">
-}}
-\if{html}{\out{
 <label class="btn">
-<input type="checkbox" autocomplete="off" value="Choice 1"/> Choice 1
-</label> <label class="btn">
-<input type="checkbox" autocomplete="off" value="Choice 2"/> Choice 2
-</label> <label class="btn">
-<input type="checkbox" autocomplete="off" value="Choice 3"/> Choice 3
+<input type="checkbox" autocomplete="off" value="Choice 1"/>
+Choice 1
+</label>
+<label class="btn">
+<input type="checkbox" autocomplete="off" value="Choice 2"/>
+Choice 2
+</label>
+<label class="btn">
+<input type="checkbox" autocomplete="off" value="Choice 3"/>
+Choice 3
 </label>
-}}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
 </div>
 }}
-\if{html}{\out{
-<!--/html_preserve-->
-}}
 
 
-If you want to adjust the width you can use the \code{width()} utility.\if{html}{\out{<div class="r">}}\preformatted{checkbarInput(
+If you want to adjust the width you can use the \code{width()} utility.
+
+\if{html}{\out{<div class="sourceCode r">}}\preformatted{checkbarInput(
   .style \%>\%
     background("secondary") \%>\%
     width(50),  # <-
@@ -91,74 +84,54 @@ If you want to adjust the width you can use the \code{width()} utility.\if{html}
   choices = c("Choice 1", "Choice 2", "Choice 3")
 )
 }\if{html}{\out{</div>}}\if{html}{\out{
-<!--html_preserve-->
-}}
-\if{html}{\out{
-<div class="r-output">
-}}
-\if{html}{\out{
 <div class="yonder-checkbar btn-group btn-group-toggle d-flex bg-secondary w-50" data-toggle="buttons">
-}}
-\if{html}{\out{
 <label class="btn">
-<input type="checkbox" autocomplete="off" value="Choice 1"/> Choice 1
-</label> <label class="btn">
-<input type="checkbox" autocomplete="off" value="Choice 2"/> Choice 2
-</label> <label class="btn">
-<input type="checkbox" autocomplete="off" value="Choice 3"/> Choice 3
+<input type="checkbox" autocomplete="off" value="Choice 1"/>
+Choice 1
+</label>
+<label class="btn">
+<input type="checkbox" autocomplete="off" value="Choice 2"/>
+Choice 2
+</label>
+<label class="btn">
+<input type="checkbox" autocomplete="off" value="Choice 3"/>
+Choice 3
 </label>
-}}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
 </div>
 }}
-\if{html}{\out{
-<!--/html_preserve-->
-}}
 
 }
 
 \subsection{Background color}{
 
-Like other inputs, checkbar inputs apply modified background styles\if{html}{\out{<div class="r">}}\preformatted{checkbarInput(
+Like other inputs, checkbar inputs apply modified background styles
+
+\if{html}{\out{<div class="sourceCode r">}}\preformatted{checkbarInput(
   .style \%>\%
     background("info"),
   id = NULL,
   choices = c("Choice 1", "Choice 2")
 )
 }\if{html}{\out{</div>}}\if{html}{\out{
-<!--html_preserve-->
-}}
-\if{html}{\out{
-<div class="r-output">
-}}
-\if{html}{\out{
 <div class="yonder-checkbar btn-group btn-group-toggle d-flex bg-info" data-toggle="buttons">
-}}
-\if{html}{\out{
 <label class="btn">
-<input type="checkbox" autocomplete="off" value="Choice 1"/> Choice 1
-</label> <label class="btn">
-<input type="checkbox" autocomplete="off" value="Choice 2"/> Choice 2
+<input type="checkbox" autocomplete="off" value="Choice 1"/>
+Choice 1
+</label>
+<label class="btn">
+<input type="checkbox" autocomplete="off" value="Choice 2"/>
+Choice 2
 </label>
-}}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
 </div>
 }}
-\if{html}{\out{
-<!--/html_preserve-->
-}}
 
 }
 
 \subsection{Labelling}{
 
-Use a \code{formGroup()} to add a label or help text to checkbar input.\if{html}{\out{<div class="r">}}\preformatted{formGroup(
+Use a \code{formGroup()} to add a label or help text to checkbar input.
+
+\if{html}{\out{<div class="sourceCode r">}}\preformatted{formGroup(
   label = "Label",  # <-
   checkbarInput(
     .style \%>\%
@@ -170,40 +143,21 @@ Use a \code{formGroup()} to add a label or help text to checkbar input.\if{html}
   help = "Help text about the input"
 )
 }\if{html}{\out{</div>}}\if{html}{\out{
-<!--html_preserve-->
-}}
-\if{html}{\out{
-<div class="r-output">
-}}
-\if{html}{\out{
 <div class="form-group">
-}}
-
-
-\if{html}{\out{<label>}}Label\if{html}{\out{</label>}}\if{html}{\out{
+<label>Label</label>
 <div class="yonder-checkbar btn-group btn-group-toggle d-flex border border-dark text-light" data-toggle="buttons">
-}}
-\if{html}{\out{
 <label class="btn">
-<input type="checkbox" autocomplete="off" value="Choice 1"/> Choice 1
-</label> <label class="btn">
-<input type="checkbox" autocomplete="off" value="Choice 2"/> Choice 2
+<input type="checkbox" autocomplete="off" value="Choice 1"/>
+Choice 1
+</label>
+<label class="btn">
+<input type="checkbox" autocomplete="off" value="Choice 2"/>
+Choice 2
 </label>
-}}
-\if{html}{\out{
-</div>
-}}
-
-
-\if{html}{\out{<small class="form-text text-muted">}}Help text about the input\if{html}{\out{</small>}}\if{html}{\out{
 </div>
-}}
-\if{html}{\out{
+<small class="form-text text-muted">Help text about the input</small>
 </div>
 }}
-\if{html}{\out{
-<!--/html_preserve-->
-}}
 
 }
 }
diff --git a/man/checkboxInput.Rd b/man/checkboxInput.Rd
index 92e60f65..8e41d412 100644
--- a/man/checkboxInput.Rd
+++ b/man/checkboxInput.Rd
@@ -87,277 +87,121 @@ inputs differ from checkboxes only in appearance.
 \details{
 \subsection{Getting started}{
 
-Checkbox inputs may have a single possible value.\if{html}{\out{<div class="r">}}\preformatted{checkboxInput(
+Checkbox inputs may have a single possible value.
+
+\if{html}{\out{<div class="sourceCode r">}}\preformatted{checkboxInput(
   id = NULL,
   choices = "Choice 1",
   selected = "Choice 1"
 )
 }\if{html}{\out{</div>}}\if{html}{\out{
-<!--html_preserve-->
-}}
-\if{html}{\out{
-<div class="r-output">
-}}
-\if{html}{\out{
 <div class="yonder-checkbox">
-}}
-\if{html}{\out{
 <div class="custom-control custom-checkbox">
-}}
-\if{html}{\out{
 <input class="custom-control-input" type="checkbox" id="checkbox-433-345" name="checkbox-433-345" value="Choice 1" checked autocomplete="off"/>
-<label class="custom-control-label" for="checkbox-433-345">Choice
-1</label>
-}}
-\if{html}{\out{
-<div class="valid-feedback">
-}}
-\if{html}{\out{
+<label class="custom-control-label" for="checkbox-433-345">Choice 1</label>
+<div class="valid-feedback"></div>
+<div class="invalid-feedback"></div>
 </div>
-}}
-\if{html}{\out{
-<div class="invalid-feedback">
-}}
-\if{html}{\out{
 </div>
 }}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
-<!--/html_preserve-->
-}}
 
 
-You may also specify multiple possible values.\if{html}{\out{<div class="r">}}\preformatted{checkboxInput(
+You may also specify multiple possible values.
+
+\if{html}{\out{<div class="sourceCode r">}}\preformatted{checkboxInput(
   id = NULL,
   choices = c("Choice 1", "Choice 2", "Choice 3"),
   selected = c("Choice 1", "Choice 2")
 )
 }\if{html}{\out{</div>}}\if{html}{\out{
-<!--html_preserve-->
-}}
-\if{html}{\out{
-<div class="r-output">
-}}
-\if{html}{\out{
 <div class="yonder-checkbox">
-}}
-\if{html}{\out{
 <div class="custom-control custom-checkbox">
-}}
-\if{html}{\out{
 <input class="custom-control-input" type="checkbox" id="checkbox-665-165" name="checkbox-665-165" value="Choice 1" checked autocomplete="off"/>
-<label class="custom-control-label" for="checkbox-665-165">Choice
-1</label>
-}}
-\if{html}{\out{
+<label class="custom-control-label" for="checkbox-665-165">Choice 1</label>
 </div>
-}}
-\if{html}{\out{
 <div class="custom-control custom-checkbox">
-}}
-\if{html}{\out{
 <input class="custom-control-input" type="checkbox" id="checkbox-332-323" name="checkbox-332-323" value="Choice 2" checked autocomplete="off"/>
-<label class="custom-control-label" for="checkbox-332-323">Choice
-2</label>
-}}
-\if{html}{\out{
+<label class="custom-control-label" for="checkbox-332-323">Choice 2</label>
 </div>
-}}
-\if{html}{\out{
 <div class="custom-control custom-checkbox">
-}}
-\if{html}{\out{
 <input class="custom-control-input" type="checkbox" id="checkbox-274-68" name="checkbox-274-68" value="Choice 3" autocomplete="off"/>
-<label class="custom-control-label" for="checkbox-274-68">Choice
-3</label>
-}}
-\if{html}{\out{
-<div class="valid-feedback">
-}}
-\if{html}{\out{
+<label class="custom-control-label" for="checkbox-274-68">Choice 3</label>
+<div class="valid-feedback"></div>
+<div class="invalid-feedback"></div>
 </div>
-}}
-\if{html}{\out{
-<div class="invalid-feedback">
-}}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
 </div>
 }}
-\if{html}{\out{
-<!--/html_preserve-->
-}}
 
 }
 
 \subsection{Layout}{
 
 While checkbox input choices are typically laid out vertically you can
-lay out the choices horizontally with \code{inline = TRUE}.\if{html}{\out{<div class="r">}}\preformatted{checkboxInput(
+lay out the choices horizontally with \code{inline = TRUE}.
+
+\if{html}{\out{<div class="sourceCode r">}}\preformatted{checkboxInput(
   id = NULL,
   choices = c("Choice 1", "Choice 2", "Choice 3"),
   inline = TRUE  # <-
 )
 }\if{html}{\out{</div>}}\if{html}{\out{
-<!--html_preserve-->
-}}
-\if{html}{\out{
-<div class="r-output">
-}}
-\if{html}{\out{
 <div class="yonder-checkbox">
-}}
-\if{html}{\out{
 <div class="custom-control custom-checkbox custom-control-inline">
-}}
-\if{html}{\out{
 <input class="custom-control-input" type="checkbox" id="checkbox-187-927" name="checkbox-187-927" value="Choice 1" autocomplete="off"/>
-<label class="custom-control-label" for="checkbox-187-927">Choice
-1</label>
-}}
-\if{html}{\out{
+<label class="custom-control-label" for="checkbox-187-927">Choice 1</label>
 </div>
-}}
-\if{html}{\out{
 <div class="custom-control custom-checkbox custom-control-inline">
-}}
-\if{html}{\out{
 <input class="custom-control-input" type="checkbox" id="checkbox-230-504" name="checkbox-230-504" value="Choice 2" autocomplete="off"/>
-<label class="custom-control-label" for="checkbox-230-504">Choice
-2</label>
-}}
-\if{html}{\out{
+<label class="custom-control-label" for="checkbox-230-504">Choice 2</label>
 </div>
-}}
-\if{html}{\out{
 <div class="custom-control custom-checkbox custom-control-inline">
-}}
-\if{html}{\out{
 <input class="custom-control-input" type="checkbox" id="checkbox-932-422" name="checkbox-932-422" value="Choice 3" autocomplete="off"/>
-<label class="custom-control-label" for="checkbox-932-422">Choice
-3</label>
-}}
-\if{html}{\out{
-<div class="valid-feedback">
-}}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
-<div class="invalid-feedback">
-}}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
+<label class="custom-control-label" for="checkbox-932-422">Choice 3</label>
+<div class="valid-feedback"></div>
+<div class="invalid-feedback"></div>
 </div>
-}}
-\if{html}{\out{
 </div>
 }}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
-<!--/html_preserve-->
-}}
 
 }
 
 \subsection{Switch variant}{
 
 The switch input functions identical to the checkbox input with a
-different appearance.\if{html}{\out{<div class="r">}}\preformatted{switchInput(
+different appearance.
+
+\if{html}{\out{<div class="sourceCode r">}}\preformatted{switchInput(
   id = NULL,
   choices = c("Toggle 1", "Toggle 2", "Toggle 3"),
   selected = "Toggle 2"
 )
 }\if{html}{\out{</div>}}\if{html}{\out{
-<!--html_preserve-->
-}}
-\if{html}{\out{
-<div class="r-output">
-}}
-\if{html}{\out{
 <div class="yonder-checkbox">
-}}
-\if{html}{\out{
 <div class="custom-control custom-switch">
-}}
-\if{html}{\out{
 <input class="custom-control-input" type="checkbox" id="checkbox-197-573" name="checkbox-197-573" value="Toggle 1" autocomplete="off"/>
-<label class="custom-control-label" for="checkbox-197-573">Toggle
-1</label>
-}}
-\if{html}{\out{
+<label class="custom-control-label" for="checkbox-197-573">Toggle 1</label>
 </div>
-}}
-\if{html}{\out{
 <div class="custom-control custom-switch">
-}}
-\if{html}{\out{
 <input class="custom-control-input" type="checkbox" id="checkbox-971-210" name="checkbox-971-210" value="Toggle 2" checked autocomplete="off"/>
-<label class="custom-control-label" for="checkbox-971-210">Toggle
-2</label>
-}}
-\if{html}{\out{
+<label class="custom-control-label" for="checkbox-971-210">Toggle 2</label>
 </div>
-}}
-\if{html}{\out{
 <div class="custom-control custom-switch">
-}}
-\if{html}{\out{
 <input class="custom-control-input" type="checkbox" id="checkbox-552-87" name="checkbox-552-87" value="Toggle 3" autocomplete="off"/>
-<label class="custom-control-label" for="checkbox-552-87">Toggle
-3</label>
-}}
-\if{html}{\out{
-<div class="valid-feedback">
-}}
-\if{html}{\out{
+<label class="custom-control-label" for="checkbox-552-87">Toggle 3</label>
+<div class="valid-feedback"></div>
+<div class="invalid-feedback"></div>
 </div>
-}}
-\if{html}{\out{
-<div class="invalid-feedback">
-}}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
 </div>
 }}
-\if{html}{\out{
-<!--/html_preserve-->
-}}
 
 }
 
 \subsection{Background color}{
 
 Changing the background color of a checkbox or switch input will modify
-the background color of the \emph{selected} choices.\if{html}{\out{<div class="r">}}\preformatted{checkboxInput(
+the background color of the \emph{selected} choices.
+
+\if{html}{\out{<div class="sourceCode r">}}\preformatted{checkboxInput(
   .style \%>\%
     background("warning"),
   id = NULL,
@@ -365,58 +209,22 @@ the background color of the \emph{selected} choices.\if{html}{\out{<div class="r
   selected = c("Choice 1", "Choice 2")
 )
 }\if{html}{\out{</div>}}\if{html}{\out{
-<!--html_preserve-->
-}}
-\if{html}{\out{
-<div class="r-output">
-}}
-\if{html}{\out{
 <div class="yonder-checkbox custom-control-group-warning">
-}}
-\if{html}{\out{
 <div class="custom-control custom-checkbox">
-}}
-\if{html}{\out{
 <input class="custom-control-input" type="checkbox" id="checkbox-76-608" name="checkbox-76-608" value="Choice 1" checked autocomplete="off"/>
-<label class="custom-control-label" for="checkbox-76-608">Choice
-1</label>
-}}
-\if{html}{\out{
+<label class="custom-control-label" for="checkbox-76-608">Choice 1</label>
 </div>
-}}
-\if{html}{\out{
 <div class="custom-control custom-checkbox">
-}}
-\if{html}{\out{
 <input class="custom-control-input" type="checkbox" id="checkbox-371-304" name="checkbox-371-304" value="Choice 2" checked autocomplete="off"/>
-<label class="custom-control-label" for="checkbox-371-304">Choice
-2</label>
-}}
-\if{html}{\out{
-<div class="valid-feedback">
-}}
-\if{html}{\out{
+<label class="custom-control-label" for="checkbox-371-304">Choice 2</label>
+<div class="valid-feedback"></div>
+<div class="invalid-feedback"></div>
 </div>
-}}
-\if{html}{\out{
-<div class="invalid-feedback">
-}}
-\if{html}{\out{
 </div>
 }}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
-<!--/html_preserve-->
-}}
-\if{html}{\out{<div class="r">}}\preformatted{switchInput(
+
+
+\if{html}{\out{<div class="sourceCode r">}}\preformatted{switchInput(
   .style \%>\%
     background("success"),
   id = NULL,
@@ -424,61 +232,25 @@ the background color of the \emph{selected} choices.\if{html}{\out{<div class="r
   selected = "Toggle 1"
 )
 }\if{html}{\out{</div>}}\if{html}{\out{
-<!--html_preserve-->
-}}
-\if{html}{\out{
-<div class="r-output">
-}}
-\if{html}{\out{
 <div class="yonder-checkbox custom-control-group-success">
-}}
-\if{html}{\out{
 <div class="custom-control custom-switch">
-}}
-\if{html}{\out{
 <input class="custom-control-input" type="checkbox" id="checkbox-803-708" name="checkbox-803-708" value="Toggle 1" checked autocomplete="off"/>
-<label class="custom-control-label" for="checkbox-803-708">Toggle
-1</label>
-}}
-\if{html}{\out{
+<label class="custom-control-label" for="checkbox-803-708">Toggle 1</label>
 </div>
-}}
-\if{html}{\out{
 <div class="custom-control custom-switch">
-}}
-\if{html}{\out{
 <input class="custom-control-input" type="checkbox" id="checkbox-724-573" name="checkbox-724-573" value="Toggle 2" autocomplete="off"/>
-<label class="custom-control-label" for="checkbox-724-573">Toggle
-2</label>
-}}
-\if{html}{\out{
-<div class="valid-feedback">
-}}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
-<div class="invalid-feedback">
-}}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
+<label class="custom-control-label" for="checkbox-724-573">Toggle 2</label>
+<div class="valid-feedback"></div>
+<div class="invalid-feedback"></div>
 </div>
-}}
-\if{html}{\out{
 </div>
 }}
-\if{html}{\out{
-<!--/html_preserve-->
-}}
 
 }
 
-\subsection{Labelling}{\if{html}{\out{<div class="r">}}\preformatted{formGroup(
+\subsection{Labelling}{
+
+\if{html}{\out{<div class="sourceCode r">}}\preformatted{formGroup(
   label = "Label",
   checkboxInput(
     id = NULL,
@@ -487,68 +259,24 @@ the background color of the \emph{selected} choices.\if{html}{\out{<div class="r
   help = "Help text for the input"
 )
 }\if{html}{\out{</div>}}\if{html}{\out{
-<!--html_preserve-->
-}}
-\if{html}{\out{
-<div class="r-output">
-}}
-\if{html}{\out{
 <div class="form-group">
-}}
-
-
-\if{html}{\out{<label>}}Label\if{html}{\out{</label>}}\if{html}{\out{
+<label>Label</label>
 <div class="yonder-checkbox">
-}}
-\if{html}{\out{
 <div class="custom-control custom-checkbox">
-}}
-\if{html}{\out{
 <input class="custom-control-input" type="checkbox" id="checkbox-621-340" name="checkbox-621-340" value="Choice 1" autocomplete="off"/>
-<label class="custom-control-label" for="checkbox-621-340">Choice
-1</label>
-}}
-\if{html}{\out{
+<label class="custom-control-label" for="checkbox-621-340">Choice 1</label>
 </div>
-}}
-\if{html}{\out{
 <div class="custom-control custom-checkbox">
-}}
-\if{html}{\out{
 <input class="custom-control-input" type="checkbox" id="checkbox-372-504" name="checkbox-372-504" value="Choice 2" autocomplete="off"/>
-<label class="custom-control-label" for="checkbox-372-504">Choice
-2</label>
-}}
-\if{html}{\out{
-<div class="valid-feedback">
-}}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
-<div class="invalid-feedback">
-}}
-\if{html}{\out{
+<label class="custom-control-label" for="checkbox-372-504">Choice 2</label>
+<div class="valid-feedback"></div>
+<div class="invalid-feedback"></div>
 </div>
-}}
-\if{html}{\out{
 </div>
-}}
-\if{html}{\out{
+<small class="form-text text-muted">Help text for the input</small>
 </div>
 }}
 
-
-\if{html}{\out{<small class="form-text text-muted">}}Help text for the input\if{html}{\out{</small>}}\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
-<!--/html_preserve-->
-}}
-
 }
 }
 \seealso{
diff --git a/man/chipInput.Rd b/man/chipInput.Rd
index 5f9b3d08..0b33fb65 100644
--- a/man/chipInput.Rd
+++ b/man/chipInput.Rd
@@ -81,7 +81,9 @@ specified by the \code{choices} argument. Use the \code{max} argument to limit t
 number of choices a user may select.
 }
 \details{
-\subsection{Getting started}{\if{html}{\out{<div class="r">}}\preformatted{chipInput(
+\subsection{Getting started}{
+
+\if{html}{\out{<div class="sourceCode r">}}\preformatted{chipInput(
   .style \%>\% width(50),
   id = "chips",
   choices = paste("Option number", 1:10),
@@ -89,209 +91,67 @@ number of choices a user may select.
   inline = TRUE
 )
 }\if{html}{\out{</div>}}\if{html}{\out{
-<!--html_preserve-->
-}}
-\if{html}{\out{
-<div class="r-output">
-}}
-\if{html}{\out{
 <div id="chips" class="yonder-chip btn-group dropup" data-max="-1" data-sort="stack">
-}}
-\if{html}{\out{
 <input class="form-control custom-select" data-toggle="dropdown"/>
-}}
-\if{html}{\out{
 <div class="dropdown-menu">
-}}
-\if{html}{\out{
-<button class="dropdown-item" value="1">
-}}
-
-
-Option number 1\if{html}{\out{
-</button>
-}}
-\if{html}{\out{
-<button class="dropdown-item" value="2">
-}}
-
-
-Option number 2\if{html}{\out{
-</button>
-}}
-\if{html}{\out{
-<button class="dropdown-item" value="3">
-}}
-
-
-Option number 3\if{html}{\out{
-</button>
-}}
-\if{html}{\out{
-<button class="dropdown-item" value="4">
-}}
-
-
-Option number 4\if{html}{\out{
-</button>
-}}
-\if{html}{\out{
-<button class="dropdown-item" value="5">
-}}
-
-
-Option number 5\if{html}{\out{
-</button>
-}}
-\if{html}{\out{
-<button class="dropdown-item" value="6">
-}}
-
-
-Option number 6\if{html}{\out{
-</button>
-}}
-\if{html}{\out{
-<button class="dropdown-item" value="7">
-}}
-
-
-Option number 7\if{html}{\out{
-</button>
-}}
-\if{html}{\out{
-<button class="dropdown-item" value="8">
-}}
-
-
-Option number 8\if{html}{\out{
-</button>
-}}
-\if{html}{\out{
-<button class="dropdown-item" value="9">
-}}
-
-
-Option number 9\if{html}{\out{
-</button>
-}}
-\if{html}{\out{
-<button class="dropdown-item" value="10">
-}}
-
-
-Option number 10\if{html}{\out{
-</button>
-}}
-\if{html}{\out{
+<button class="dropdown-item" value="1">Option number 1</button>
+<button class="dropdown-item" value="2">Option number 2</button>
+<button class="dropdown-item" value="3">Option number 3</button>
+<button class="dropdown-item" value="4">Option number 4</button>
+<button class="dropdown-item" value="5">Option number 5</button>
+<button class="dropdown-item" value="6">Option number 6</button>
+<button class="dropdown-item" value="7">Option number 7</button>
+<button class="dropdown-item" value="8">Option number 8</button>
+<button class="dropdown-item" value="9">Option number 9</button>
+<button class="dropdown-item" value="10">Option number 10</button>
 </div>
-}}
-\if{html}{\out{
 <div class="chips chips-inline chips-grey">
-}}
-\if{html}{\out{
 <button class="chip" value="1">
-}}
-
-
-\if{html}{\out{<span class="chip-content">}}Option number 1\if{html}{\out{</span>}}
-\if{html}{\out{<span class="chip-close">}}×\if{html}{\out{</span>}}\if{html}{\out{
+<span class="chip-content">Option number 1</span>
+<span class="chip-close">&times;</span>
 </button>
-}}
-\if{html}{\out{
 <button class="chip" value="2">
-}}
-
-
-\if{html}{\out{<span class="chip-content">}}Option number 2\if{html}{\out{</span>}}
-\if{html}{\out{<span class="chip-close">}}×\if{html}{\out{</span>}}\if{html}{\out{
+<span class="chip-content">Option number 2</span>
+<span class="chip-close">&times;</span>
 </button>
-}}
-\if{html}{\out{
 <button class="chip" value="3">
-}}
-
-
-\if{html}{\out{<span class="chip-content">}}Option number 3\if{html}{\out{</span>}}
-\if{html}{\out{<span class="chip-close">}}×\if{html}{\out{</span>}}\if{html}{\out{
+<span class="chip-content">Option number 3</span>
+<span class="chip-close">&times;</span>
 </button>
-}}
-\if{html}{\out{
 <button class="chip" value="4">
-}}
-
-
-\if{html}{\out{<span class="chip-content">}}Option number 4\if{html}{\out{</span>}}
-\if{html}{\out{<span class="chip-close">}}×\if{html}{\out{</span>}}\if{html}{\out{
+<span class="chip-content">Option number 4</span>
+<span class="chip-close">&times;</span>
 </button>
-}}
-\if{html}{\out{
 <button class="chip" value="5">
-}}
-
-
-\if{html}{\out{<span class="chip-content">}}Option number 5\if{html}{\out{</span>}}
-\if{html}{\out{<span class="chip-close">}}×\if{html}{\out{</span>}}\if{html}{\out{
+<span class="chip-content">Option number 5</span>
+<span class="chip-close">&times;</span>
 </button>
-}}
-\if{html}{\out{
 <button class="chip" value="6">
-}}
-
-
-\if{html}{\out{<span class="chip-content">}}Option number 6\if{html}{\out{</span>}}
-\if{html}{\out{<span class="chip-close">}}×\if{html}{\out{</span>}}\if{html}{\out{
+<span class="chip-content">Option number 6</span>
+<span class="chip-close">&times;</span>
 </button>
-}}
-\if{html}{\out{
 <button class="chip" value="7">
-}}
-
-
-\if{html}{\out{<span class="chip-content">}}Option number 7\if{html}{\out{</span>}}
-\if{html}{\out{<span class="chip-close">}}×\if{html}{\out{</span>}}\if{html}{\out{
+<span class="chip-content">Option number 7</span>
+<span class="chip-close">&times;</span>
 </button>
-}}
-\if{html}{\out{
 <button class="chip" value="8">
-}}
-
-
-\if{html}{\out{<span class="chip-content">}}Option number 8\if{html}{\out{</span>}}
-\if{html}{\out{<span class="chip-close">}}×\if{html}{\out{</span>}}\if{html}{\out{
+<span class="chip-content">Option number 8</span>
+<span class="chip-close">&times;</span>
 </button>
-}}
-\if{html}{\out{
 <button class="chip" value="9">
-}}
-
-
-\if{html}{\out{<span class="chip-content">}}Option number 9\if{html}{\out{</span>}}
-\if{html}{\out{<span class="chip-close">}}×\if{html}{\out{</span>}}\if{html}{\out{
+<span class="chip-content">Option number 9</span>
+<span class="chip-close">&times;</span>
 </button>
-}}
-\if{html}{\out{
 <button class="chip" value="10">
-}}
-
-
-\if{html}{\out{<span class="chip-content">}}Option number 10\if{html}{\out{</span>}}
-\if{html}{\out{<span class="chip-close">}}×\if{html}{\out{</span>}}\if{html}{\out{
+<span class="chip-content">Option number 10</span>
+<span class="chip-close">&times;</span>
 </button>
-}}
-\if{html}{\out{
 </div>
-}}
-\if{html}{\out{
 </div>
 }}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
-<!--/html_preserve-->
-}}
-\if{html}{\out{<div class="r">}}\preformatted{chipInput(
+
+
+\if{html}{\out{<div class="sourceCode r">}}\preformatted{chipInput(
   .style \%>\%
     width(50) \%>\%
     background("primary"),
@@ -306,230 +166,76 @@ Option number 10\if{html}{\out{
   fill = FALSE
 )
 }\if{html}{\out{</div>}}\if{html}{\out{
-<!--html_preserve-->
-}}
-\if{html}{\out{
-<div class="r-output">
-}}
-\if{html}{\out{
-<div id="chips" class="yonder-chip btn-group dropup" data-max="-1" data-sort="stack" data-fill="FALSE">
-}}
-\if{html}{\out{
+<div id="chips" class="yonder-chip btn-group dropup" data-max="-1" data-sort="stack" fill="FALSE">
 <input class="form-control custom-select" data-toggle="dropdown"/>
-}}
-\if{html}{\out{
 <div class="dropdown-menu">
-}}
-\if{html}{\out{
-<button class="dropdown-item" value="1">
-}}
-
-
-A rather long option, isn’t it?\if{html}{\out{
-</button>
-}}
-\if{html}{\out{
-<button class="dropdown-item" value="2">
-}}
-
-
-Shorter\if{html}{\out{
-</button>
-}}
-\if{html}{\out{
-<button class="dropdown-item" value="3">
-}}
-
-
-A middle-size option\if{html}{\out{
-</button>
-}}
-\if{html}{\out{
-<button class="dropdown-item" value="4">
-}}
-
-
-One more\if{html}{\out{
-</button>
-}}
-\if{html}{\out{
+<button class="dropdown-item" value="1">A rather long option, isn't it?</button>
+<button class="dropdown-item" value="2">Shorter</button>
+<button class="dropdown-item" value="3">A middle-size option</button>
+<button class="dropdown-item" value="4">One more</button>
 </div>
-}}
-\if{html}{\out{
 <div class="chips chips-inline chips-grey">
-}}
-\if{html}{\out{
 <button class="chip" value="1">
-}}
-
-
-\if{html}{\out{<span class="chip-content">}}A rather long option, isn’t it?\if{html}{\out{</span>}}
-\if{html}{\out{<span class="chip-close">}}×\if{html}{\out{</span>}}\if{html}{\out{
+<span class="chip-content">A rather long option, isn't it?</span>
+<span class="chip-close">&times;</span>
 </button>
-}}
-\if{html}{\out{
 <button class="chip" value="2">
-}}
-
-
-\if{html}{\out{<span class="chip-content">}}Shorter\if{html}{\out{</span>}}
-\if{html}{\out{<span class="chip-close">}}×\if{html}{\out{</span>}}\if{html}{\out{
+<span class="chip-content">Shorter</span>
+<span class="chip-close">&times;</span>
 </button>
-}}
-\if{html}{\out{
 <button class="chip" value="3">
-}}
-
-
-\if{html}{\out{<span class="chip-content">}}A middle-size option\if{html}{\out{</span>}}
-\if{html}{\out{<span class="chip-close">}}×\if{html}{\out{</span>}}\if{html}{\out{
+<span class="chip-content">A middle-size option</span>
+<span class="chip-close">&times;</span>
 </button>
-}}
-\if{html}{\out{
 <button class="chip" value="4">
-}}
-
-
-\if{html}{\out{<span class="chip-content">}}One more\if{html}{\out{</span>}}
-\if{html}{\out{<span class="chip-close">}}×\if{html}{\out{</span>}}\if{html}{\out{
+<span class="chip-content">One more</span>
+<span class="chip-close">&times;</span>
 </button>
-}}
-\if{html}{\out{
 </div>
-}}
-\if{html}{\out{
 </div>
 }}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
-<!--/html_preserve-->
-}}
-\if{html}{\out{<div class="r">}}\preformatted{chipInput(
+
+
+\if{html}{\out{<div class="sourceCode r">}}\preformatted{chipInput(
   id = "chip1",
   choices = c("Choice 1", "Choice 2", "Choice 3",
               "Choice 4", "Choice 5"),
   selected = c("Choice 3", "Choice 4")
 )
 }\if{html}{\out{</div>}}\if{html}{\out{
-<!--html_preserve-->
-}}
-\if{html}{\out{
-<div class="r-output">
-}}
-\if{html}{\out{
 <div id="chip1" class="yonder-chip btn-group dropup" data-max="-1" data-sort="stack">
-}}
-\if{html}{\out{
 <input class="form-control custom-select" data-toggle="dropdown"/>
-}}
-\if{html}{\out{
 <div class="dropdown-menu">
-}}
-\if{html}{\out{
-<button class="dropdown-item" value="Choice 1">
-}}
-
-
-Choice 1\if{html}{\out{
-</button>
-}}
-\if{html}{\out{
-<button class="dropdown-item" value="Choice 2">
-}}
-
-
-Choice 2\if{html}{\out{
-</button>
-}}
-\if{html}{\out{
-<button class="dropdown-item selected" value="Choice 3">
-}}
-
-
-Choice 3\if{html}{\out{
-</button>
-}}
-\if{html}{\out{
-<button class="dropdown-item selected" value="Choice 4">
-}}
-
-
-Choice 4\if{html}{\out{
-</button>
-}}
-\if{html}{\out{
-<button class="dropdown-item" value="Choice 5">
-}}
-
-
-Choice 5\if{html}{\out{
-</button>
-}}
-\if{html}{\out{
+<button class="dropdown-item" value="Choice 1">Choice 1</button>
+<button class="dropdown-item" value="Choice 2">Choice 2</button>
+<button class="dropdown-item selected" value="Choice 3">Choice 3</button>
+<button class="dropdown-item selected" value="Choice 4">Choice 4</button>
+<button class="dropdown-item" value="Choice 5">Choice 5</button>
 </div>
-}}
-\if{html}{\out{
 <div class="chips chips-inline chips-grey">
-}}
-\if{html}{\out{
 <button class="chip" value="Choice 1">
-}}
-
-
-\if{html}{\out{<span class="chip-content">}}Choice 1\if{html}{\out{</span>}}
-\if{html}{\out{<span class="chip-close">}}×\if{html}{\out{</span>}}\if{html}{\out{
+<span class="chip-content">Choice 1</span>
+<span class="chip-close">&times;</span>
 </button>
-}}
-\if{html}{\out{
 <button class="chip" value="Choice 2">
-}}
-
-
-\if{html}{\out{<span class="chip-content">}}Choice 2\if{html}{\out{</span>}}
-\if{html}{\out{<span class="chip-close">}}×\if{html}{\out{</span>}}\if{html}{\out{
+<span class="chip-content">Choice 2</span>
+<span class="chip-close">&times;</span>
 </button>
-}}
-\if{html}{\out{
 <button class="chip active" value="Choice 3">
-}}
-
-
-\if{html}{\out{<span class="chip-content">}}Choice 3\if{html}{\out{</span>}}
-\if{html}{\out{<span class="chip-close">}}×\if{html}{\out{</span>}}\if{html}{\out{
+<span class="chip-content">Choice 3</span>
+<span class="chip-close">&times;</span>
 </button>
-}}
-\if{html}{\out{
 <button class="chip active" value="Choice 4">
-}}
-
-
-\if{html}{\out{<span class="chip-content">}}Choice 4\if{html}{\out{</span>}}
-\if{html}{\out{<span class="chip-close">}}×\if{html}{\out{</span>}}\if{html}{\out{
+<span class="chip-content">Choice 4</span>
+<span class="chip-close">&times;</span>
 </button>
-}}
-\if{html}{\out{
 <button class="chip" value="Choice 5">
-}}
-
-
-\if{html}{\out{<span class="chip-content">}}Choice 5\if{html}{\out{</span>}}
-\if{html}{\out{<span class="chip-close">}}×\if{html}{\out{</span>}}\if{html}{\out{
+<span class="chip-content">Choice 5</span>
+<span class="chip-close">&times;</span>
 </button>
-}}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
 </div>
-}}
-\if{html}{\out{
 </div>
 }}
-\if{html}{\out{
-<!--/html_preserve-->
-}}
 
 }
 }
diff --git a/man/collapsePane.Rd b/man/collapsePane.Rd
index 50cd48e2..491756ee 100644
--- a/man/collapsePane.Rd
+++ b/man/collapsePane.Rd
@@ -40,7 +40,9 @@ collapsible pane first wrap the pane in another element and add padding to
 this new element.
 }
 \section{App with collapse}{
-\if{html}{\out{<div class="R">}}\preformatted{ui <- container(
+
+
+\if{html}{\out{<div class="sourceCode R">}}\preformatted{ui <- container(
   buttonInput(
     id = "demo",
     label = "Toggle collapse"
diff --git a/man/column.Rd b/man/column.Rd
index ab4d902b..6a113b9b 100644
--- a/man/column.Rd
+++ b/man/column.Rd
@@ -33,7 +33,9 @@ space in a row evenly amongst all columns use \code{width = "equal"}. For exampl
 and usage tips see the sections below.
 }
 \details{
-\subsection{Equal width columns}{\if{html}{\out{<div class="r">}}\preformatted{container(
+\subsection{Equal width columns}{
+
+\if{html}{\out{<div class="sourceCode r">}}\preformatted{container(
   columns(
     column(
       "Aliquam erat volutpat."
@@ -48,58 +50,23 @@ and usage tips see the sections below.
   )
 )
 }\if{html}{\out{</div>}}\if{html}{\out{
-<!--html_preserve-->
-}}
-\if{html}{\out{
-<div class="r-output">
-}}
-\if{html}{\out{
 <div class="container-fluid">
-}}
-\if{html}{\out{
 <div class="row">
-}}
-\if{html}{\out{
-<div class="col">
-}}
-
-
-Aliquam erat volutpat.\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
-<div class="col">
-}}
-
-
-Mauris mollis tincidunt felis.\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
+<div class="col">Aliquam erat volutpat.</div>
+<div class="col">Mauris mollis tincidunt felis.</div>
 <div class="col">
-}}
-
-
-Cum sociis natoque penatibus et magnis dis parturient montes, nascetur
-ridiculus mus.\if{html}{\out{
+Cum sociis natoque penatibus et magnis dis parturient montes,
+nascetur ridiculus mus.
 </div>
-}}
-\if{html}{\out{
 </div>
-}}
-\if{html}{\out{
 </div>
 }}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
-<!--/html_preserve-->
-}}
 
 }
 
-\subsection{Sidebar layout}{\if{html}{\out{<div class="r">}}\preformatted{container(
+\subsection{Sidebar layout}{
+
+\if{html}{\out{<div class="sourceCode r">}}\preformatted{container(
   columns(
     column(
       width = 4,  # <-
@@ -113,69 +80,21 @@ ridiculus mus.\if{html}{\out{
   )
 )
 }\if{html}{\out{</div>}}\if{html}{\out{
-<!--html_preserve-->
-}}
-\if{html}{\out{
-<div class="r-output">
-}}
-\if{html}{\out{
 <div class="container-fluid">
-}}
-\if{html}{\out{
 <div class="row">
-}}
-\if{html}{\out{
 <div class="col-4">
-}}
-\if{html}{\out{
 <div class="card">
-}}
-\if{html}{\out{
 <div class="card-body">
-}}
-\if{html}{\out{
-<h5 class="card-title">
-}}
-
-
-Sidebar panel\if{html}{\out{
-</h5>
-}}
-\if{html}{\out{
+<h5 class="card-title">Sidebar panel</h5>
 </div>
-}}
-\if{html}{\out{
 </div>
-}}
-\if{html}{\out{
 </div>
-}}
-\if{html}{\out{
 <div class="col">
-}}
-\if{html}{\out{
-<h5>
-}}
-
-
-Main panel\if{html}{\out{
-</h5>
-}}
-\if{html}{\out{
+<h5>Main panel</h5>
 </div>
-}}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
 </div>
-}}
-\if{html}{\out{
 </div>
 }}
-\if{html}{\out{
-<!--/html_preserve-->
-}}
 
 }
 
@@ -184,7 +103,9 @@ Main panel\if{html}{\out{
 Use the \link{responsive} \code{width} argument to make mobile
 friendly applications. On extra small screens each column spans the
 entire width of the row. On larger screens the columns will instead
-split the row width evenly.\if{html}{\out{<div class="r">}}\preformatted{container(
+split the row width evenly.
+
+\if{html}{\out{<div class="sourceCode r">}}\preformatted{container(
   columns(
     column(
       width = c(xs = 12, sm = 4),
@@ -201,60 +122,23 @@ split the row width evenly.\if{html}{\out{<div class="r">}}\preformatted{contain
   )
 )
 }\if{html}{\out{</div>}}\if{html}{\out{
-<!--html_preserve-->
-}}
-\if{html}{\out{
-<div class="r-output">
-}}
-\if{html}{\out{
 <div class="container-fluid">
-}}
-\if{html}{\out{
 <div class="row">
-}}
-\if{html}{\out{
-<div class="col-12 col-sm-4">
-}}
-
-
-Mauris ac felis vel velit tristique imperdiet.\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
-<div class="col-12 col-sm-4">
-}}
-
-
-Nam vestibulum accumsan nisl.\if{html}{\out{
+<div class="col-12 col-sm-4">Mauris ac felis vel velit tristique imperdiet.</div>
+<div class="col-12 col-sm-4">Nam vestibulum accumsan nisl.</div>
+<div class="col-12 col-sm-4">Proin neque massa, cursus ut, gravida ut, lobortis eget, lacus.</div>
 </div>
-}}
-\if{html}{\out{
-<div class="col-12 col-sm-4">
-}}
-
-
-Proin neque massa, cursus ut, gravida ut, lobortis eget, lacus.\if{html}{\out{
 </div>
 }}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
-<!--/html_preserve-->
-}}
 
 }
 
 \subsection{Automatic column sizing}{
 
 Columns may be fit to the width of their content. Other columns in this
-example will split the remaining space equally.\if{html}{\out{<div class="r">}}\preformatted{container(
+example will split the remaining space equally.
+
+\if{html}{\out{<div class="sourceCode r">}}\preformatted{container(
   columns(
     column(
       .style \%>\%
@@ -273,55 +157,24 @@ example will split the remaining space equally.\if{html}{\out{<div class="r">}}\
   )
 )
 }\if{html}{\out{</div>}}\if{html}{\out{
-<!--html_preserve-->
-}}
-\if{html}{\out{
-<div class="r-output">
-}}
-\if{html}{\out{
 <div class="container-fluid">
-}}
-\if{html}{\out{
 <div class="row">
-}}
-\if{html}{\out{
-<div class="bg-warning col">
-}}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
+<div class="bg-warning col"></div>
 <div class="col-auto">
-}}
-
-
-Cras placerat accumsan nulla. Aenean in sem ac leo mollis blandit. Nam
-euismod tellus id erat. Donec neque quam, dignissim in, mollis nec,
-sagittis eu, wisi.\if{html}{\out{
+Cras placerat accumsan nulla. Aenean in sem ac leo mollis blandit.
+Nam euismod tellus id erat.
+Donec neque quam, dignissim in, mollis nec, sagittis eu, wisi.
 </div>
-}}
-\if{html}{\out{
-<div class="bg-warning col">
-}}
-\if{html}{\out{
+<div class="bg-warning col"></div>
 </div>
-}}
-\if{html}{\out{
 </div>
 }}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
-<!--/html_preserve-->
-}}
 
 
 Without specficiying widths the space in a row is evenly split between
-columns.\if{html}{\out{<div class="r">}}\preformatted{container(
+columns.
+
+\if{html}{\out{<div class="sourceCode r">}}\preformatted{container(
   columns(
     column(),
     column(),
@@ -330,53 +183,15 @@ columns.\if{html}{\out{<div class="r">}}\preformatted{container(
   )
 )
 }\if{html}{\out{</div>}}\if{html}{\out{
-<!--html_preserve-->
-}}
-\if{html}{\out{
-<div class="r-output">
-}}
-\if{html}{\out{
 <div class="container-fluid">
-}}
-\if{html}{\out{
 <div class="row">
-}}
-\if{html}{\out{
-<div class="col">
-}}
-\if{html}{\out{
+<div class="col"></div>
+<div class="col"></div>
+<div class="col"></div>
+<div class="col"></div>
 </div>
-}}
-\if{html}{\out{
-<div class="col">
-}}
-\if{html}{\out{
 </div>
 }}
-\if{html}{\out{
-<div class="col">
-}}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
-<div class="col">
-}}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
-<!--/html_preserve-->
-}}
 
 }
 }
diff --git a/man/d1.Rd b/man/d1.Rd
index c22b3f6a..0901d2ac 100644
--- a/man/d1.Rd
+++ b/man/d1.Rd
@@ -24,26 +24,11 @@ Display headings are not meant to replace the standard HTML heading tags,
 they are a stand out alternative for eye-catching titles.
 }
 \details{
-\subsection{Getting started}{\if{html}{\out{<div class="r">}}\preformatted{d4("Display 4")
-}\if{html}{\out{</div>}}\if{html}{\out{
-<!--html_preserve-->
-}}
-\if{html}{\out{
-<div class="r-output">
-}}
-\if{html}{\out{
-<h1 class="display-4">
-}}
+\subsection{Getting started}{
 
-
-Display 4\if{html}{\out{
-</h1>
-}}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
-<!--/html_preserve-->
+\if{html}{\out{<div class="sourceCode r">}}\preformatted{d4("Display 4")
+}\if{html}{\out{</div>}}\if{html}{\out{
+<h1 class="display-4">Display 4</h1>
 }}
 
 }
diff --git a/man/dot-style.Rd b/man/dot-style.Rd
index 26465c9c..fa04408c 100644
--- a/man/dot-style.Rd
+++ b/man/dot-style.Rd
@@ -10,12 +10,16 @@
 \description{
 The \code{.style} pronoun allows you to define styles for a tag element within the
 context of the element. Prior to the introduction of the \code{.style} pronoun tag
-styles were always applied outside or after constructing a tag element.\if{html}{\out{<div class="R">}}\preformatted{card() \%>\% background("primary") \%>\% display("flex")
+styles were always applied outside or after constructing a tag element.
+
+\if{html}{\out{<div class="sourceCode R">}}\preformatted{card() \%>\% background("primary") \%>\% display("flex")
 }\if{html}{\out{</div>}}
 
 However, once the content of a tag element grows to more than a few lines,
 associating the element's styles with the element becomes increasingly
-unintuitive. In these situations, make use of the \code{.style} pronoun.\if{html}{\out{<div class="R">}}\preformatted{card(
+unintuitive. In these situations, make use of the \code{.style} pronoun.
+
+\if{html}{\out{<div class="sourceCode R">}}\preformatted{card(
   .style \%>\%
     border("primary") \%>\%
     font("primary")
diff --git a/man/dropdown.Rd b/man/dropdown.Rd
index 22e86ef2..4211ca60 100644
--- a/man/dropdown.Rd
+++ b/man/dropdown.Rd
@@ -39,128 +39,49 @@ more complex dropdown menu.
 To recreate a menut input.
 }
 
-\subsection{Dropdown with buttons}{\if{html}{\out{<div class="r">}}\preformatted{dropdown(
+\subsection{Dropdown with buttons}{
+
+\if{html}{\out{<div class="sourceCode r">}}\preformatted{dropdown(
   label = "Choices",
   buttonInput(id = "choice1", label = "Choice 1"),
   buttonInput(id = "choice2", label = "Choice 2"),
   buttonInput(id = "choice3", label = "Choice 3")
 )
 }\if{html}{\out{</div>}}\if{html}{\out{
-<!--html_preserve-->
-}}
-\if{html}{\out{
-<div class="r-output">
-}}
-\if{html}{\out{
 <div class="dropdown">
-}}
-\if{html}{\out{
-<button class="btn dropdown-toggle" type="button" data-toggle="dropdown" aria-haspop="true" aria-expanded="false">
-}}
-
-
-Choices\if{html}{\out{
-</button>
-}}
-\if{html}{\out{
+<button class="btn dropdown-toggle" type="button" data-toggle="dropdown" aria-haspop="true" aria-expanded="false">Choices</button>
 <div class="dropdown-menu">
-}}
-\if{html}{\out{
-<button autocomplete="off" class="yonder-button btn dropdown-item" id="choice1" role="button" type="button">
-}}
-
-
-Choice 1\if{html}{\out{
-</button>
-}}
-\if{html}{\out{
-<button autocomplete="off" class="yonder-button btn dropdown-item" id="choice2" role="button" type="button">
-}}
-
-
-Choice 2\if{html}{\out{
-</button>
-}}
-\if{html}{\out{
-<button autocomplete="off" class="yonder-button btn dropdown-item" id="choice3" role="button" type="button">
-}}
-
-
-Choice 3\if{html}{\out{
-</button>
-}}
-\if{html}{\out{
+<button autocomplete="off" class="yonder-button btn dropdown-item" id="choice1" role="button" type="button">Choice 1</button>
+<button autocomplete="off" class="yonder-button btn dropdown-item" id="choice2" role="button" type="button">Choice 2</button>
+<button autocomplete="off" class="yonder-button btn dropdown-item" id="choice3" role="button" type="button">Choice 3</button>
 </div>
-}}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
 </div>
 }}
-\if{html}{\out{
-<!--/html_preserve-->
-}}
 
 }
 
-\subsection{Dropdown with links}{\if{html}{\out{<div class="r">}}\preformatted{dropdown(
+\subsection{Dropdown with links}{
+
+\if{html}{\out{<div class="sourceCode r">}}\preformatted{dropdown(
   label = "Choices",
   linkInput(id = "link1", label = "Choice 1"),
   linkInput(id = "link2", label = "Choice 2")
 )
 }\if{html}{\out{</div>}}\if{html}{\out{
-<!--html_preserve-->
-}}
-\if{html}{\out{
-<div class="r-output">
-}}
-\if{html}{\out{
 <div class="dropdown">
-}}
-\if{html}{\out{
-<button class="btn dropdown-toggle" type="button" data-toggle="dropdown" aria-haspop="true" aria-expanded="false">
-}}
-
-
-Choices\if{html}{\out{
-</button>
-}}
-\if{html}{\out{
+<button class="btn dropdown-toggle" type="button" data-toggle="dropdown" aria-haspop="true" aria-expanded="false">Choices</button>
 <div class="dropdown-menu">
-}}
-\if{html}{\out{
-<button class="yonder-link btn btn-link dropdown-item" id="link1">
-}}
-
-
-Choice 1\if{html}{\out{
-</button>
-}}
-\if{html}{\out{
-<button class="yonder-link btn btn-link dropdown-item" id="link2">
-}}
-
-
-Choice 2\if{html}{\out{
-</button>
-}}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
+<button class="yonder-link btn btn-link dropdown-item" id="link1">Choice 1</button>
+<button class="yonder-link btn btn-link dropdown-item" id="link2">Choice 2</button>
 </div>
-}}
-\if{html}{\out{
 </div>
 }}
-\if{html}{\out{
-<!--/html_preserve-->
-}}
 
 }
 
-\subsection{Grouped sections}{\if{html}{\out{<div class="r">}}\preformatted{dropdown(
+\subsection{Grouped sections}{
+
+\if{html}{\out{<div class="sourceCode r">}}\preformatted{dropdown(
   label = "Sections",
   h6("Section 1"),
   buttonInput(id = "a", label = "Option A"),
@@ -171,152 +92,45 @@ Choice 2\if{html}{\out{
   buttonInput(id = "d", label = "Option D")
 )
 }\if{html}{\out{</div>}}\if{html}{\out{
-<!--html_preserve-->
-}}
-\if{html}{\out{
-<div class="r-output">
-}}
-\if{html}{\out{
 <div class="dropdown">
-}}
-\if{html}{\out{
-<button class="btn dropdown-toggle" type="button" data-toggle="dropdown" aria-haspop="true" aria-expanded="false">
-}}
-
-
-Sections\if{html}{\out{
-</button>
-}}
-\if{html}{\out{
+<button class="btn dropdown-toggle" type="button" data-toggle="dropdown" aria-haspop="true" aria-expanded="false">Sections</button>
 <div class="dropdown-menu">
-}}
-\if{html}{\out{
-<h6 class="dropdown-header">
-}}
-
-
-Section 1\if{html}{\out{
-</h6>
-}}
-\if{html}{\out{
-<button autocomplete="off" class="yonder-button btn dropdown-item" id="a" role="button" type="button">
-}}
-
-
-Option A\if{html}{\out{
-</button>
-}}
-\if{html}{\out{
-<button autocomplete="off" class="yonder-button btn dropdown-item" id="b" role="button" type="button">
-}}
-
-
-Option B\if{html}{\out{
-</button>
-}}
-\if{html}{\out{
-<div class="dropdown-divider">
-}}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
-<h6 class="dropdown-header">
-}}
-
-
-Section 2\if{html}{\out{
-</h6>
-}}
-\if{html}{\out{
-<button autocomplete="off" class="yonder-button btn dropdown-item" id="c" role="button" type="button">
-}}
-
-
-Option C\if{html}{\out{
-</button>
-}}
-\if{html}{\out{
-<button autocomplete="off" class="yonder-button btn dropdown-item" id="d" role="button" type="button">
-}}
-
-
-Option D\if{html}{\out{
-</button>
-}}
-\if{html}{\out{
+<h6 class="dropdown-header">Section 1</h6>
+<button autocomplete="off" class="yonder-button btn dropdown-item" id="a" role="button" type="button">Option A</button>
+<button autocomplete="off" class="yonder-button btn dropdown-item" id="b" role="button" type="button">Option B</button>
+<div class="dropdown-divider"></div>
+<h6 class="dropdown-header">Section 2</h6>
+<button autocomplete="off" class="yonder-button btn dropdown-item" id="c" role="button" type="button">Option C</button>
+<button autocomplete="off" class="yonder-button btn dropdown-item" id="d" role="button" type="button">Option D</button>
 </div>
-}}
-\if{html}{\out{
 </div>
 }}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
-<!--/html_preserve-->
-}}
 
 }
 
-\subsection{Direction variations}{\if{html}{\out{<div class="r">}}\preformatted{dropdown(
+\subsection{Direction variations}{
+
+\if{html}{\out{<div class="sourceCode r">}}\preformatted{dropdown(
   label = "Up!",
   direction = "up",
   buttonInput(id = "up1", label = "Choice 1"),
   buttonInput(id = "up2", label = "Choice 2")
 )
 }\if{html}{\out{</div>}}\if{html}{\out{
-<!--html_preserve-->
-}}
-\if{html}{\out{
-<div class="r-output">
-}}
-\if{html}{\out{
 <div class="dropdown dropup">
-}}
-\if{html}{\out{
-<button class="btn dropdown-toggle" type="button" data-toggle="dropdown" aria-haspop="true" aria-expanded="false">
-}}
-
-
-Up!\if{html}{\out{
-</button>
-}}
-\if{html}{\out{
+<button class="btn dropdown-toggle" type="button" data-toggle="dropdown" aria-haspop="true" aria-expanded="false">Up!</button>
 <div class="dropdown-menu">
-}}
-\if{html}{\out{
-<button autocomplete="off" class="yonder-button btn dropdown-item" id="up1" role="button" type="button">
-}}
-
-
-Choice 1\if{html}{\out{
-</button>
-}}
-\if{html}{\out{
-<button autocomplete="off" class="yonder-button btn dropdown-item" id="up2" role="button" type="button">
-}}
-
-
-Choice 2\if{html}{\out{
-</button>
-}}
-\if{html}{\out{
+<button autocomplete="off" class="yonder-button btn dropdown-item" id="up1" role="button" type="button">Choice 1</button>
+<button autocomplete="off" class="yonder-button btn dropdown-item" id="up2" role="button" type="button">Choice 2</button>
 </div>
-}}
-\if{html}{\out{
 </div>
 }}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
-<!--/html_preserve-->
-}}
 
 }
 
-\subsection{Dropdowns with forms}{\if{html}{\out{<div class="r">}}\preformatted{dropdown(
+\subsection{Dropdowns with forms}{
+
+\if{html}{\out{<div class="sourceCode r">}}\preformatted{dropdown(
   label = "Sign in",
   formInput(
     id = "login",
@@ -342,109 +156,31 @@ Choice 2\if{html}{\out{
     padding(3, 4, 3, 4)
 )
 }\if{html}{\out{</div>}}\if{html}{\out{
-<!--html_preserve-->
-}}
-\if{html}{\out{
-<div class="r-output">
-}}
-\if{html}{\out{
 <div class="dropdown">
-}}
-\if{html}{\out{
-<button class="btn dropdown-toggle" type="button" data-toggle="dropdown" aria-haspop="true" aria-expanded="false">
-}}
-
-
-Sign in\if{html}{\out{
-</button>
-}}
-\if{html}{\out{
+<button class="btn dropdown-toggle" type="button" data-toggle="dropdown" aria-haspop="true" aria-expanded="false">Sign in</button>
 <div class="dropdown-menu">
-}}
-\if{html}{\out{
 <form class="yonder-form p-3 pt-4 pr-3 pb-4" id="login">
-}}
-\if{html}{\out{
 <div class="form-group">
-}}
-
-
-\if{html}{\out{<label>}}Username / Email\if{html}{\out{</label>}}\if{html}{\out{
-<div id="user" class="yonder-textual">
-}}
-\if{html}{\out{
+<label>Username / Email</label>
+<div class="yonder-textual" id="user">
 <input class="form-control" type="email" autocomplete="off"/>
-}}
-\if{html}{\out{
-<div class="valid-feedback">
-}}
-\if{html}{\out{
+<div class="valid-feedback"></div>
+<div class="invalid-feedback"></div>
 </div>
-}}
-\if{html}{\out{
-<div class="invalid-feedback">
-}}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
 </div>
-}}
-\if{html}{\out{
 <div class="form-group">
-}}
-
-
-\if{html}{\out{<label>}}Password\if{html}{\out{</label>}}\if{html}{\out{
-<div id="pass" class="yonder-textual">
-}}
-\if{html}{\out{
+<label>Password</label>
+<div class="yonder-textual" id="pass">
 <input class="form-control" type="password" autocomplete="off"/>
-}}
-\if{html}{\out{
-<div class="valid-feedback">
-}}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
-<div class="invalid-feedback">
-}}
-\if{html}{\out{
+<div class="valid-feedback"></div>
+<div class="invalid-feedback"></div>
 </div>
-}}
-\if{html}{\out{
 </div>
-}}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
-<button class="yonder-form-submit btn btn-blue" value="signin">
-}}
-
-
-Sign in\if{html}{\out{
-</button>
-}}
-\if{html}{\out{
+<button class="yonder-form-submit btn btn-blue" value="signin">Sign in</button>
 </form>
-}}
-\if{html}{\out{
 </div>
-}}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
 </div>
 }}
-\if{html}{\out{
-<!--/html_preserve-->
-}}
 
 }
 }
diff --git a/man/fileInput.Rd b/man/fileInput.Rd
index 1e1d62e7..4e3c6bec 100644
--- a/man/fileInput.Rd
+++ b/man/fileInput.Rd
@@ -38,85 +38,36 @@ Upload files to the server.
 \details{
 \subsection{Getting started}{
 
-File inputs come with default placeholder text.\if{html}{\out{<div class="r">}}\preformatted{fileInput(
+File inputs come with default placeholder text.
+
+\if{html}{\out{<div class="sourceCode r">}}\preformatted{fileInput(
   id = NULL
 )
 }\if{html}{\out{</div>}}\if{html}{\out{
-<!--html_preserve-->
-}}
-\if{html}{\out{
-<div class="r-output">
-}}
-\if{html}{\out{
 <div class="yonder-file custom-file">
-}}
-\if{html}{\out{
 <input type="file" class="custom-file-input" multiple autocomplete="off"/>
-<label class="custom-file-label" data-browse="Browse">Choose
-file</label>
-}}
-\if{html}{\out{
-<div class="valid-feedback">
-}}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
-<div class="invalid-feedback">
-}}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
+<label class="custom-file-label" data-browse="Browse">Choose file</label>
+<div class="valid-feedback"></div>
+<div class="invalid-feedback"></div>
 </div>
 }}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
-<!--/html_preserve-->
-}}
 
 
-You can also specify different text.\if{html}{\out{<div class="r">}}\preformatted{fileInput(
+You can also specify different text.
+
+\if{html}{\out{<div class="sourceCode r">}}\preformatted{fileInput(
   id = NULL,
   placeholder = "Pick a file",
   browse = "Click"
 )
 }\if{html}{\out{</div>}}\if{html}{\out{
-<!--html_preserve-->
-}}
-\if{html}{\out{
-<div class="r-output">
-}}
-\if{html}{\out{
 <div class="yonder-file custom-file">
-}}
-\if{html}{\out{
 <input type="file" class="custom-file-input" multiple autocomplete="off"/>
 <label class="custom-file-label" data-browse="Click">Pick a file</label>
-}}
-\if{html}{\out{
-<div class="valid-feedback">
-}}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
-<div class="invalid-feedback">
-}}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
+<div class="valid-feedback"></div>
+<div class="invalid-feedback"></div>
 </div>
 }}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
-<!--/html_preserve-->
-}}
 
 }
 }
diff --git a/man/flex.Rd b/man/flex.Rd
index 2dcae3c9..eccb4c16 100644
--- a/man/flex.Rd
+++ b/man/flex.Rd
@@ -51,7 +51,9 @@ are treated as flex items.
 \subsection{Getting started}{
 
 This section needs pretty specific examples of how to use flex. I don’t
-know that people will want a tutorial on flex.\if{html}{\out{<div class="r">}}\preformatted{flex(
+know that people will want a tutorial on flex.
+
+\if{html}{\out{<div class="sourceCode r">}}\preformatted{flex(
 
 )
 }\if{html}{\out{</div>}}
@@ -62,7 +64,9 @@ know that people will want a tutorial on flex.\if{html}{\out{<div class="r">}}\p
 Many of \code{flex()}’s arguments are viewport responsive and below we will
 see how useful this can be. On small screens the flex items are placed
 vertically and can occupy the full width of the mobile device. On medium
-or larger screens the items are placed horizontally once again.\if{html}{\out{<div class="r">}}\preformatted{div(
+or larger screens the items are placed horizontally once again.
+
+\if{html}{\out{<div class="sourceCode r">}}\preformatted{div(
   .style \%>\%
     display("flex") \%>\%
     flex(
@@ -81,52 +85,19 @@ or larger screens the items are placed horizontally once again.\if{html}{\out{<d
     border()
 )
 }\if{html}{\out{</div>}}\if{html}{\out{
-<!--html_preserve-->
-}}
-\if{html}{\out{
-<div class="r-output">
-}}
-\if{html}{\out{
 <div class="d-flex flex-column flex-md-row bg-secondary border">
-}}
-\if{html}{\out{
-<div class="p-3 border">
-}}
-
-
-A flex item\if{html}{\out{
+<div class="p-3 border">A flex item</div>
+<div class="p-3 border">A flex item</div>
+<div class="p-3 border">A flex item</div>
 </div>
 }}
-\if{html}{\out{
-<div class="p-3 border">
-}}
-
-
-A flex item\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
-<div class="p-3 border">
-}}
-
-
-A flex item\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
-<!--/html_preserve-->
-}}
 
 
 \emph{Resize the browser for this example.}
 
-You can keep items as a column by specifying only \code{"column"}.\if{html}{\out{<div class="r">}}\preformatted{div(
+You can keep items as a column by specifying only \code{"column"}.
+
+\if{html}{\out{<div class="sourceCode r">}}\preformatted{div(
   .style \%>\%
     display("flex") \%>\%
     flex("column"),  # <-
@@ -141,47 +112,12 @@ You can keep items as a column by specifying only \code{"column"}.\if{html}{\out
     border()
 )
 }\if{html}{\out{</div>}}\if{html}{\out{
-<!--html_preserve-->
-}}
-\if{html}{\out{
-<div class="r-output">
-}}
-\if{html}{\out{
 <div class="d-flex flex-column">
-}}
-\if{html}{\out{
-<div class="p-3 border">
-}}
-
-
-A flex item\if{html}{\out{
+<div class="p-3 border">A flex item</div>
+<div class="p-3 border">A flex item</div>
+<div class="p-3 border">A flex item</div>
 </div>
 }}
-\if{html}{\out{
-<div class="p-3 border">
-}}
-
-
-A flex item\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
-<div class="p-3 border">
-}}
-
-
-A flex item\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
-<!--/html_preserve-->
-}}
 
 }
 
@@ -189,7 +125,9 @@ A flex item\if{html}{\out{
 
 Below is a series of examples showing how to change the horizontal
 alignment of your flex items. Let’s start by pushing items to the
-beginning of their parent container.\if{html}{\out{<div class="r">}}\preformatted{div(
+beginning of their parent container.
+
+\if{html}{\out{<div class="sourceCode r">}}\preformatted{div(
   .style \%>\%
     display("flex") \%>\%
     flex(justify = "start"),  # <-
@@ -207,58 +145,18 @@ beginning of their parent container.\if{html}{\out{<div class="r">}}\preformatte
     border()
 )
 }\if{html}{\out{</div>}}\if{html}{\out{
-<!--html_preserve-->
-}}
-\if{html}{\out{
-<div class="r-output">
-}}
-\if{html}{\out{
 <div class="d-flex justify-content-start">
-}}
-\if{html}{\out{
-<div class="p-3 border">
-}}
-
-
-A flex item\if{html}{\out{
+<div class="p-3 border">A flex item</div>
+<div class="p-3 border">A flex item</div>
+<div class="p-3 border">A flex item</div>
+<div class="p-3 border">A flex item</div>
 </div>
 }}
-\if{html}{\out{
-<div class="p-3 border">
-}}
-
 
-A flex item\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
-<div class="p-3 border">
-}}
 
+We can also push items to the \strong{end}.
 
-A flex item\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
-<div class="p-3 border">
-}}
-
-
-A flex item\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
-<!--/html_preserve-->
-}}
-
-
-We can also push items to the \strong{end}.\if{html}{\out{<div class="r">}}\preformatted{div(
+\if{html}{\out{<div class="sourceCode r">}}\preformatted{div(
   .style \%>\%
     display("flex") \%>\%
     flex(justify = "end"),  # <-
@@ -276,58 +174,18 @@ We can also push items to the \strong{end}.\if{html}{\out{<div class="r">}}\pref
     border()
 )
 }\if{html}{\out{</div>}}\if{html}{\out{
-<!--html_preserve-->
-}}
-\if{html}{\out{
-<div class="r-output">
-}}
-\if{html}{\out{
 <div class="d-flex justify-content-end">
-}}
-\if{html}{\out{
-<div class="p-3 border">
-}}
-
-
-A flex item\if{html}{\out{
+<div class="p-3 border">A flex item</div>
+<div class="p-3 border">A flex item</div>
+<div class="p-3 border">A flex item</div>
+<div class="p-3 border">A flex item</div>
 </div>
 }}
-\if{html}{\out{
-<div class="p-3 border">
-}}
-
 
-A flex item\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
-<div class="p-3 border">
-}}
 
+Without using a table layout we can \strong{center} items.
 
-A flex item\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
-<div class="p-3 border">
-}}
-
-
-A flex item\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
-<!--/html_preserve-->
-}}
-
-
-Without using a table layout we can \strong{center} items.\if{html}{\out{<div class="r">}}\preformatted{div(
+\if{html}{\out{<div class="sourceCode r">}}\preformatted{div(
   .style \%>\%
     display("flex") \%>\%
     flex(justify = "center"),  # <-
@@ -345,58 +203,18 @@ Without using a table layout we can \strong{center} items.\if{html}{\out{<div cl
     border()
 )
 }\if{html}{\out{</div>}}\if{html}{\out{
-<!--html_preserve-->
-}}
-\if{html}{\out{
-<div class="r-output">
-}}
-\if{html}{\out{
 <div class="d-flex justify-content-center">
-}}
-\if{html}{\out{
-<div class="p-3 border">
-}}
-
-
-A flex item\if{html}{\out{
+<div class="p-3 border">A flex item</div>
+<div class="p-3 border">A flex item</div>
+<div class="p-3 border">A flex item</div>
+<div class="p-3 border">A flex item</div>
 </div>
 }}
-\if{html}{\out{
-<div class="p-3 border">
-}}
-
 
-A flex item\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
-<div class="p-3 border">
-}}
 
+You can also put space \strong{between} items
 
-A flex item\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
-<div class="p-3 border">
-}}
-
-
-A flex item\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
-<!--/html_preserve-->
-}}
-
-
-You can also put space \strong{between} items\if{html}{\out{<div class="r">}}\preformatted{div(
+\if{html}{\out{<div class="sourceCode r">}}\preformatted{div(
   .style \%>\%
     display("flex") \%>\%
     flex(justify = "between"),  # <-
@@ -414,58 +232,18 @@ You can also put space \strong{between} items\if{html}{\out{<div class="r">}}\pr
     border()
 )
 }\if{html}{\out{</div>}}\if{html}{\out{
-<!--html_preserve-->
-}}
-\if{html}{\out{
-<div class="r-output">
-}}
-\if{html}{\out{
 <div class="d-flex justify-content-between">
-}}
-\if{html}{\out{
-<div class="p-3 border">
-}}
-
-
-A flex item\if{html}{\out{
+<div class="p-3 border">A flex item</div>
+<div class="p-3 border">A flex item</div>
+<div class="p-3 border">A flex item</div>
+<div class="p-3 border">A flex item</div>
 </div>
 }}
-\if{html}{\out{
-<div class="p-3 border">
-}}
-
 
-A flex item\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
-<div class="p-3 border">
-}}
 
+… or put space \strong{around} items.
 
-A flex item\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
-<div class="p-3 border">
-}}
-
-
-A flex item\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
-<!--/html_preserve-->
-}}
-
-
-… or put space \strong{around} items.\if{html}{\out{<div class="r">}}\preformatted{div(
+\if{html}{\out{<div class="sourceCode r">}}\preformatted{div(
   .style \%>\%
     display("flex") \%>\%
     flex(justify = "around"),  # <-
@@ -483,62 +261,22 @@ A flex item\if{html}{\out{
     border()
 )
 }\if{html}{\out{</div>}}\if{html}{\out{
-<!--html_preserve-->
-}}
-\if{html}{\out{
-<div class="r-output">
-}}
-\if{html}{\out{
 <div class="d-flex justify-content-around">
-}}
-\if{html}{\out{
-<div class="p-3 border">
-}}
-
-
-A flex item\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
-<div class="p-3 border">
-}}
-
-
-A flex item\if{html}{\out{
+<div class="p-3 border">A flex item</div>
+<div class="p-3 border">A flex item</div>
+<div class="p-3 border">A flex item</div>
+<div class="p-3 border">A flex item</div>
 </div>
 }}
-\if{html}{\out{
-<div class="p-3 border">
-}}
-
-
-A flex item\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
-<div class="p-3 border">
-}}
-
-
-A flex item\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
-<!--/html_preserve-->
-}}
 
 
 The \code{"between"} and \code{"around"} values come from the original CSS values
 \code{"space-between"} and \code{"space-around"}.
 \subsection{Wrap onto new lines}{
 
-Using flexbox we can also control how items wrap onto new lines.\if{html}{\out{<div class="r">}}\preformatted{div(
+Using flexbox we can also control how items wrap onto new lines.
+
+\if{html}{\out{<div class="sourceCode r">}}\preformatted{div(
   .style \%>\%
     display("flex") \%>\%
     flex(wrap = TRUE),
@@ -556,55 +294,13 @@ Using flexbox we can also control how items wrap onto new lines.\if{html}{\out{<
     border()
 )
 }\if{html}{\out{</div>}}\if{html}{\out{
-<!--html_preserve-->
-}}
-\if{html}{\out{
-<div class="r-output">
-}}
-\if{html}{\out{
 <div class="d-flex flex-wrap">
-}}
-\if{html}{\out{
-<div class="p-3 border">
-}}
-
-
-A flex item\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
-<div class="p-3 border">
-}}
-
-
-A flex item\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
-<div class="p-3 border">
-}}
-
-
-A flex item\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
-<div class="p-3 border">
-}}
-
-
-A flex item\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
+<div class="p-3 border">A flex item</div>
+<div class="p-3 border">A flex item</div>
+<div class="p-3 border">A flex item</div>
+<div class="p-3 border">A flex item</div>
 </div>
 }}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
-<!--/html_preserve-->
-}}
 
 }
 
diff --git a/man/float.Rd b/man/float.Rd
index dae180e8..fdd7999c 100644
--- a/man/float.Rd
+++ b/man/float.Rd
@@ -18,7 +18,9 @@ element. A newspaper layout is a classic example where an image is floated
 with text wrapped around.
 }
 \details{
-\subsection{Getting started}{\if{html}{\out{<div class="r">}}\preformatted{div(
+\subsection{Getting started}{
+
+\if{html}{\out{<div class="sourceCode r">}}\preformatted{div(
   .style \%>\%
     padding(2),
   alert(
@@ -43,69 +45,30 @@ with text wrapped around.
     "amet risus.")
 )
 }\if{html}{\out{</div>}}\if{html}{\out{
-<!--html_preserve-->
-}}
-\if{html}{\out{
-<div class="r-output">
-}}
-\if{html}{\out{
 <div class="p-2">
-}}
-\if{html}{\out{
-<div class="alert m-3 alert-warning float-left" role="alert">
-}}
-
-
-This just in!\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
+<div class="alert m-3 alert-warning float-left" role="alert">This just in!</div>
 <p>
-}}
-
-
-Fusce commodo. Nullam tempus. Nunc rutrum turpis sed pede. Phasellus
-lacus. Cras placerat accumsan nulla. Fusce sagittis, libero non molestie
-mollis, magna orci ultrices dolor, at vulputate neque nulla lacinia
-eros.\if{html}{\out{
+Fusce commodo. Nullam tempus. Nunc rutrum turpis sed pede.
+Phasellus lacus.  Cras placerat accumsan nulla.
+Fusce sagittis, libero non molestie mollis, 
+magna orci ultrices dolor, at vulputate neque nulla lacinia eros.
 </p>
-}}
-\if{html}{\out{
 <p>
-}}
-
-
-Nulla facilisis, risus a rhoncus fermentum, tellus tellus lacinia purus,
-et dictum nunc justo sit amet elit.\if{html}{\out{
+Nulla facilisis, risus a rhoncus fermentum, tellus tellus
+lacinia purus, et dictum nunc justo sit amet elit.
 </p>
-}}
-\if{html}{\out{
 <p>
-}}
-
-
-Proin neque massa, cursus ut, gravida ut, lobortis eget, lacus. Aliquam
-posuere. Sed id ligula quis est convallis tempor.\if{html}{\out{
+Proin neque massa, cursus ut, gravida ut, lobortis eget, lacus.
+Aliquam posuere.
+Sed id ligula quis est convallis tempor.
 </p>
-}}
-\if{html}{\out{
 <p>
-}}
-
-
-Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh,
-ut fermentum massa justo sit amet risus.\if{html}{\out{
+Fusce dapibus, tellus ac cursus commodo, 
+tortor mauris condimentum nibh, ut fermentum massa justo sit
+amet risus.
 </p>
-}}
-\if{html}{\out{
 </div>
 }}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
-<!--/html_preserve-->
-}}
 
 }
 }
diff --git a/man/font.Rd b/man/font.Rd
index 1156307e..272d35dd 100644
--- a/man/font.Rd
+++ b/man/font.Rd
@@ -42,7 +42,9 @@ affecting color, weight, case, or alignment.
 The font utility is used to change text colors, font weights, and more.
 }
 
-\subsection{Changing text color}{\if{html}{\out{<div class="r">}}\preformatted{card(
+\subsection{Changing text color}{
+
+\if{html}{\out{<div class="sourceCode r">}}\preformatted{card(
   .style \%>\%
     font("primary") \%>\%
     border("primary"),
@@ -53,112 +55,42 @@ The font utility is used to change text colors, font weights, and more.
   p("Aliquam posuere.")
 )
 }\if{html}{\out{</div>}}\if{html}{\out{
-<!--html_preserve-->
-}}
-\if{html}{\out{
-<div class="r-output">
-}}
-\if{html}{\out{
 <div class="card text-primary border border-primary">
-}}
-\if{html}{\out{
 <div class="card-header">
-}}
-\if{html}{\out{
-<h3>
-}}
-
-
-Header\if{html}{\out{
-</h3>
-}}
-\if{html}{\out{
+<h3>Header</h3>
 </div>
-}}
-\if{html}{\out{
 <div class="card-body">
-}}
-\if{html}{\out{
 <p class="card-text">
-}}
-
-
-Nullam tristique diam non turpis. Pellentesque dapibus suscipit ligula.
-Nullam eu ante vel est convallis dignissim.\if{html}{\out{
-</p>
-}}
-\if{html}{\out{
-<p class="card-text">
-}}
-
-
-Aliquam posuere.\if{html}{\out{
+Nullam tristique diam non turpis.
+Pellentesque dapibus suscipit ligula.
+Nullam eu ante vel est convallis dignissim.
 </p>
-}}
-\if{html}{\out{
+<p class="card-text">Aliquam posuere.</p>
 </div>
-}}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
 </div>
 }}
-\if{html}{\out{
-<!--/html_preserve-->
-}}
 
 }
 
-\subsection{Changing font weight}{\if{html}{\out{<div class="r">}}\preformatted{p(
+\subsection{Changing font weight}{
+
+\if{html}{\out{<div class="sourceCode r">}}\preformatted{p(
   .style \%>\%
     font(weight = "bold"),
   "Curabitur lacinia pulvinar nibh."
 )
 }\if{html}{\out{</div>}}\if{html}{\out{
-<!--html_preserve-->
-}}
-\if{html}{\out{
-<div class="r-output">
-}}
-\if{html}{\out{
-<p class="font-weight-bold">
+<p class="font-weight-bold">Curabitur lacinia pulvinar nibh.</p>
 }}
 
 
-Curabitur lacinia pulvinar nibh.\if{html}{\out{
-</p>
-}}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
-<!--/html_preserve-->
-}}
-\if{html}{\out{<div class="r">}}\preformatted{p(
+\if{html}{\out{<div class="sourceCode r">}}\preformatted{p(
   .style \%>\%
     font(weight = "light"),
   "Proin quam nisl, tincidunt et."
 )
 }\if{html}{\out{</div>}}\if{html}{\out{
-<!--html_preserve-->
-}}
-\if{html}{\out{
-<div class="r-output">
-}}
-\if{html}{\out{
-<p class="font-weight-light">
-}}
-
-
-Proin quam nisl, tincidunt et.\if{html}{\out{
-</p>
-}}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
-<!--/html_preserve-->
+<p class="font-weight-light">Proin quam nisl, tincidunt et.</p>
 }}
 
 }
diff --git a/man/formGroup.Rd b/man/formGroup.Rd
index cbf18ce2..d96768e6 100644
--- a/man/formGroup.Rd
+++ b/man/formGroup.Rd
@@ -38,7 +38,9 @@ develop shiny applications for devices and screens of varying sizes.
 
 Use responsive arguments to adjust form layouts based on viewport size.
 Be sure to adjust the size of your browser window between large and
-small.\if{html}{\out{<div class="r">}}\preformatted{card(
+small.
+
+\if{html}{\out{<div class="sourceCode r">}}\preformatted{card(
   .style \%>\%
     background("secondary") \%>\%
     margin(3),
@@ -73,138 +75,41 @@ small.\if{html}{\out{<div class="r">}}\preformatted{card(
   )
 )
 }\if{html}{\out{</div>}}\if{html}{\out{
-<!--html_preserve-->
-}}
-\if{html}{\out{
-<div class="r-output">
-}}
-\if{html}{\out{
 <div class="card bg-secondary m-3">
-}}
-\if{html}{\out{
 <div class="card-body">
-}}
-\if{html}{\out{
 <div class="form-row">
-}}
-\if{html}{\out{
 <div class="form-group col-md-6">
-}}
-
-
-\if{html}{\out{<label>}}Username\if{html}{\out{</label>}}\if{html}{\out{
-<div id="user" class="yonder-textual">
-}}
-\if{html}{\out{
+<label>Username</label>
+<div class="yonder-textual" id="user">
 <input class="form-control" type="text" autocomplete="off"/>
-}}
-\if{html}{\out{
-<div class="valid-feedback">
-}}
-\if{html}{\out{
+<div class="valid-feedback"></div>
+<div class="invalid-feedback"></div>
 </div>
-}}
-\if{html}{\out{
-<div class="invalid-feedback">
-}}
-\if{html}{\out{
 </div>
-}}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
 <div class="form-group col-md-6">
-}}
-
-
-\if{html}{\out{<label>}}Password\if{html}{\out{</label>}}\if{html}{\out{
-<div id="pass" class="yonder-textual">
-}}
-\if{html}{\out{
+<label>Password</label>
+<div class="yonder-textual" id="pass">
 <input class="form-control" type="password" autocomplete="off"/>
-}}
-\if{html}{\out{
-<div class="valid-feedback">
-}}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
-<div class="invalid-feedback">
-}}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
+<div class="valid-feedback"></div>
+<div class="invalid-feedback"></div>
 </div>
-}}
-\if{html}{\out{
 </div>
-}}
-\if{html}{\out{
 </div>
-}}
-\if{html}{\out{
 <div class="form-group">
-}}
-
-
-\if{html}{\out{<label>}}Username\if{html}{\out{</label>}}\if{html}{\out{
-<div id="username" class="yonder-group-text input-group">
-}}
-\if{html}{\out{
+<label>Username</label>
+<div class="yonder-group-text input-group" id="username">
 <div class="input-group-prepend">
-}}
-
-
-\if{html}{\out{<span class="input-group-text">}}@\if{html}{\out{</span>}}\if{html}{\out{
+<span class="input-group-text">@</span>
 </div>
-}}
-\if{html}{\out{
 <input type="text" class="form-control" autocomplete="off"/>
-}}
-\if{html}{\out{
-<div class="valid-feedback">
-}}
-\if{html}{\out{
+<div class="valid-feedback"></div>
+<div class="invalid-feedback"></div>
 </div>
-}}
-\if{html}{\out{
-<div class="invalid-feedback">
-}}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
-<button autocomplete="off" class="yonder-button btn btn-primary" id="go" role="button" type="button">
-}}
-
-
-Go!\if{html}{\out{
-</button>
-}}
-\if{html}{\out{
 </div>
-}}
-\if{html}{\out{
+<button autocomplete="off" class="yonder-button btn btn-primary" id="go" role="button" type="button">Go!</button>
 </div>
-}}
-\if{html}{\out{
 </div>
 }}
-\if{html}{\out{
-<!--/html_preserve-->
-}}
 
 }
 }
diff --git a/man/formInput.Rd b/man/formInput.Rd
index 8f45fe0f..58cf941a 100644
--- a/man/formInput.Rd
+++ b/man/formInput.Rd
@@ -52,7 +52,9 @@ will \emph{never} update if a form submit button is not included in \code{...} p
 to \code{formInput()}.
 }
 \details{
-\subsection{Getting started}{\if{html}{\out{<div class="r">}}\preformatted{card(
+\subsection{Getting started}{
+
+\if{html}{\out{<div class="sourceCode r">}}\preformatted{card(
   .style \%>\%
     border("info") \%>\%
     width(50),
@@ -74,117 +76,44 @@ to \code{formInput()}.
   )
 )
 }\if{html}{\out{</div>}}\if{html}{\out{
-<!--html_preserve-->
-}}
-\if{html}{\out{
-<div class="r-output">
-}}
-\if{html}{\out{
 <div class="card border border-info w-50">
-}}
-\if{html}{\out{
-<div class="card-header">
-}}
-
-
-Please pick a flavor\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
+<div class="card-header">Please pick a flavor</div>
 <div class="card-body">
-}}
-\if{html}{\out{
 <form class="yonder-form" id="form1">
-}}
-\if{html}{\out{
 <div class="form-group">
-}}
-
-
-\if{html}{\out{<label>}}Ice creams\if{html}{\out{</label>}}\if{html}{\out{
-<div id="flavor" class="yonder-radio">
-}}
-\if{html}{\out{
+<label>Ice creams</label>
+<div class="yonder-radio" id="flavor">
 <div class="custom-control custom-radio">
-}}
-\if{html}{\out{
 <input class="custom-control-input" type="radio" id="radio-433-345" name="flavor" value="Mint" checked autocomplete="off"/>
 <label class="custom-control-label" for="radio-433-345">Mint</label>
-}}
-\if{html}{\out{
 </div>
-}}
-\if{html}{\out{
 <div class="custom-control custom-radio">
-}}
-\if{html}{\out{
 <input class="custom-control-input" type="radio" id="radio-665-165" name="flavor" value="Moose tracks" autocomplete="off"/>
-<label class="custom-control-label" for="radio-665-165">Moose
-tracks</label>
-}}
-\if{html}{\out{
+<label class="custom-control-label" for="radio-665-165">Moose tracks</label>
 </div>
-}}
-\if{html}{\out{
 <div class="custom-control custom-radio">
-}}
-\if{html}{\out{
 <input class="custom-control-input" type="radio" id="radio-332-323" name="flavor" value="Marble" autocomplete="off"/>
 <label class="custom-control-label" for="radio-332-323">Marble</label>
-}}
-\if{html}{\out{
-<div class="valid-feedback">
-}}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
-<div class="invalid-feedback">
-}}
-\if{html}{\out{
+<div class="valid-feedback"></div>
+<div class="invalid-feedback"></div>
 </div>
-}}
-\if{html}{\out{
 </div>
-}}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
 </div>
-}}
-\if{html}{\out{
-<button class="yonder-form-submit btn btn-blue bg-info" value="choice">
-}}
-
-
-Make choice\if{html}{\out{
-</button>
-}}
-\if{html}{\out{
+<button class="yonder-form-submit btn btn-blue bg-info" value="choice">Make choice</button>
 </form>
-}}
-\if{html}{\out{
 </div>
-}}
-\if{html}{\out{
 </div>
 }}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
-<!--/html_preserve-->
-}}
 
 }
 
 \subsection{Inline forms}{
 
 When \code{inline} is \code{TRUE} you may want to adjust the right margin of each
-child element for viewports larger than mobile, \code{margin(right = c(sm = 2))}, see \code{\link[=margin]{margin()}}. You only need to apply extra space
-for larger viewports because inline forms do not take effect on small
-viewports.
+child element for viewports larger than mobile,
+\code{margin(right = c(sm = 2))}, see \code{\link[=margin]{margin()}}. You only need
+to apply extra space for larger viewports because inline forms do not
+take effect on small viewports.
 }
 }
 \seealso{
diff --git a/man/listGroupInput.Rd b/man/listGroupInput.Rd
index 88b4f563..051709a3 100644
--- a/man/listGroupInput.Rd
+++ b/man/listGroupInput.Rd
@@ -66,72 +66,27 @@ list. However, list group items may include highly variable content.
 \details{
 \subsection{Getting started}{
 
-Action lists.\if{html}{\out{<div class="r">}}\preformatted{listGroupInput(
+Action lists.
+
+\if{html}{\out{<div class="sourceCode r">}}\preformatted{listGroupInput(
   id = "list1",
   choices = paste("Item", 1:5)
 )
 }\if{html}{\out{</div>}}\if{html}{\out{
-<!--html_preserve-->
-}}
-\if{html}{\out{
-<div class="r-output">
-}}
-\if{html}{\out{
-<div id="list1" class="yonder-list-group list-group">
-}}
-\if{html}{\out{
-<button class="list-group-item list-group-item-action" value="Item 1">
-}}
-
-
-Item 1\if{html}{\out{
-</button>
-}}
-\if{html}{\out{
-<button class="list-group-item list-group-item-action" value="Item 2">
-}}
-
-
-Item 2\if{html}{\out{
-</button>
-}}
-\if{html}{\out{
-<button class="list-group-item list-group-item-action" value="Item 3">
-}}
-
-
-Item 3\if{html}{\out{
-</button>
-}}
-\if{html}{\out{
-<button class="list-group-item list-group-item-action" value="Item 4">
-}}
-
-
-Item 4\if{html}{\out{
-</button>
-}}
-\if{html}{\out{
-<button class="list-group-item list-group-item-action" value="Item 5">
-}}
-
-
-Item 5\if{html}{\out{
-</button>
-}}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
+<div class="yonder-list-group list-group" id="list1">
+<button class="list-group-item list-group-item-action" value="Item 1">Item 1</button>
+<button class="list-group-item list-group-item-action" value="Item 2">Item 2</button>
+<button class="list-group-item list-group-item-action" value="Item 3">Item 3</button>
+<button class="list-group-item list-group-item-action" value="Item 4">Item 4</button>
+<button class="list-group-item list-group-item-action" value="Item 5">Item 5</button>
 </div>
 }}
-\if{html}{\out{
-<!--/html_preserve-->
-}}
 
 }
 
-\subsection{Combining lists with other elements}{\if{html}{\out{<div class="r">}}\preformatted{card(
+\subsection{Combining lists with other elements}{
+
+\if{html}{\out{<div class="sourceCode r">}}\preformatted{card(
   header = h6("Card header"),
   listGroupInput(
     id = NULL,
@@ -143,133 +98,36 @@ Item 5\if{html}{\out{
   )
 )
 }\if{html}{\out{</div>}}\if{html}{\out{
-<!--html_preserve-->
-}}
-\if{html}{\out{
-<div class="r-output">
-}}
-\if{html}{\out{
 <div class="card">
-}}
-\if{html}{\out{
 <div class="card-header">
-}}
-\if{html}{\out{
-<h6>
-}}
-
-
-Card header\if{html}{\out{
-</h6>
-}}
-\if{html}{\out{
+<h6>Card header</h6>
 </div>
-}}
-\if{html}{\out{
 <div class="yonder-list-group list-group list-group-flush">
-}}
-\if{html}{\out{
-<button class="list-group-item list-group-item-action" value="Item 1">
-}}
-
-
-Item 1\if{html}{\out{
-</button>
-}}
-\if{html}{\out{
-<button class="list-group-item list-group-item-action" value="Item 2">
-}}
-
-
-Item 2\if{html}{\out{
-</button>
-}}
-\if{html}{\out{
-<button class="list-group-item list-group-item-action" value="Item 3">
-}}
-
-
-Item 3\if{html}{\out{
-</button>
-}}
-\if{html}{\out{
-<button class="list-group-item list-group-item-action" value="Item 4">
-}}
-
-
-Item 4\if{html}{\out{
-</button>
-}}
-\if{html}{\out{
-<button class="list-group-item list-group-item-action" value="Item 5">
-}}
-
-
-Item 5\if{html}{\out{
-</button>
-}}
-\if{html}{\out{
+<button class="list-group-item list-group-item-action" value="Item 1">Item 1</button>
+<button class="list-group-item list-group-item-action" value="Item 2">Item 2</button>
+<button class="list-group-item list-group-item-action" value="Item 3">Item 3</button>
+<button class="list-group-item list-group-item-action" value="Item 4">Item 4</button>
+<button class="list-group-item list-group-item-action" value="Item 5">Item 5</button>
 </div>
-}}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
 </div>
 }}
-\if{html}{\out{
-<!--/html_preserve-->
-}}
 
 }
 
-\subsection{Horizontal list groups}{\if{html}{\out{<div class="r">}}\preformatted{listGroupInput(
+\subsection{Horizontal list groups}{
+
+\if{html}{\out{<div class="sourceCode r">}}\preformatted{listGroupInput(
   layout = "horizontal",
   id = NULL,
   choices = c("Item 1", "Item 2", "Item 3")
 )
 }\if{html}{\out{</div>}}\if{html}{\out{
-<!--html_preserve-->
-}}
-\if{html}{\out{
-<div class="r-output">
-}}
-\if{html}{\out{
 <div class="yonder-list-group list-group list-group-horizontal">
-}}
-\if{html}{\out{
-<button class="list-group-item list-group-item-action" value="Item 1">
-}}
-
-
-Item 1\if{html}{\out{
-</button>
-}}
-\if{html}{\out{
-<button class="list-group-item list-group-item-action" value="Item 2">
-}}
-
-
-Item 2\if{html}{\out{
-</button>
-}}
-\if{html}{\out{
-<button class="list-group-item list-group-item-action" value="Item 3">
-}}
-
-
-Item 3\if{html}{\out{
-</button>
-}}
-\if{html}{\out{
+<button class="list-group-item list-group-item-action" value="Item 1">Item 1</button>
+<button class="list-group-item list-group-item-action" value="Item 2">Item 2</button>
+<button class="list-group-item list-group-item-action" value="Item 3">Item 3</button>
 </div>
 }}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
-<!--/html_preserve-->
-}}
 
 }
 }
diff --git a/man/margin.Rd b/man/margin.Rd
index 4884684a..21d281d9 100644
--- a/man/margin.Rd
+++ b/man/margin.Rd
@@ -25,7 +25,9 @@ ignored.
 
 In most modern browsers you want to horizontally center a tag element
 using the flex layout. Alternatively, you can horizontally center an
-element using \code{margin(.., right = "auto", left = "auto")}.\if{html}{\out{<div class="r">}}\preformatted{div(
+element using \code{margin(.., right = "auto", left = "auto")}.
+
+\if{html}{\out{<div class="sourceCode r">}}\preformatted{div(
   .style \%>\%
     margin(t = 2, r = "auto", b = 2, l = "auto") \%>\%  # <-
     padding(3) \%>\%
@@ -33,24 +35,7 @@ element using \code{margin(.., right = "auto", left = "auto")}.\if{html}{\out{<d
   "Nam a sapien. Integer placerat tristique nisl."
 )
 }\if{html}{\out{</div>}}\if{html}{\out{
-<!--html_preserve-->
-}}
-\if{html}{\out{
-<div class="r-output">
-}}
-\if{html}{\out{
-<div class="mt-2 mr-auto mb-2 ml-auto p-3 bg-info">
-}}
-
-
-Nam a sapien. Integer placerat tristique nisl.\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
-<!--/html_preserve-->
+<div class="mt-2 mr-auto mb-2 ml-auto p-3 bg-info">Nam a sapien. Integer placerat tristique nisl.</div>
 }}
 
 }
@@ -61,7 +46,9 @@ Inline form elements automatically use the flex layout providing you a
 means of creating condensed sets of inputs. However, you may need to
 adjust the spacing of the form’s child elements.
 
-Here is an inline form \strong{without} any additional spacing applied.\if{html}{\out{<div class="r">}}\preformatted{formInput(
+Here is an inline form \strong{without} any additional spacing applied.
+
+\if{html}{\out{<div class="sourceCode r">}}\preformatted{formInput(
   id = NULL,
   inline = TRUE,
   textInput(
@@ -80,92 +67,31 @@ Here is an inline form \strong{without} any additional spacing applied.\if{html}
   formSubmit("Login", "login")
 )
 }\if{html}{\out{</div>}}\if{html}{\out{
-<!--html_preserve-->
-}}
-\if{html}{\out{
-<div class="r-output">
-}}
-\if{html}{\out{
 <form class="yonder-form form-inline">
-}}
-\if{html}{\out{
-<div id="name" class="yonder-textual">
-}}
-\if{html}{\out{
+<div class="yonder-textual" id="name">
 <input class="form-control" type="text" placeholder="Full name" autocomplete="off"/>
-}}
-\if{html}{\out{
-<div class="valid-feedback">
-}}
-\if{html}{\out{
+<div class="valid-feedback"></div>
+<div class="invalid-feedback"></div>
 </div>
-}}
-\if{html}{\out{
-<div class="invalid-feedback">
-}}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
-<div id="username" class="yonder-group-text input-group">
-}}
-\if{html}{\out{
+<div class="yonder-group-text input-group" id="username">
 <div class="input-group-prepend">
-}}
-
-
-\if{html}{\out{<span class="input-group-text">}}@@\if{html}{\out{</span>}}\if{html}{\out{
+<span class="input-group-text">@@</span>
 </div>
-}}
-\if{html}{\out{
 <input type="text" class="form-control" placeholder="Username" autocomplete="off"/>
-}}
-\if{html}{\out{
-<div class="valid-feedback">
-}}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
-<div class="invalid-feedback">
-}}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
-<div id="remember" class="yonder-checkbox" data-choice="Remember me">
-}}
-\if{html}{\out{
+<div class="valid-feedback"></div>
+<div class="invalid-feedback"></div>
 </div>
-}}
-\if{html}{\out{
-<button class="yonder-form-submit btn btn-blue" value="login">
-}}
-
-
-Login\if{html}{\out{
-</button>
-}}
-\if{html}{\out{
+<div class="yonder-checkbox" id="remember" choice="Remember me"></div>
+<button class="yonder-form-submit btn btn-blue" value="login">Login</button>
 </form>
 }}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
-<!--/html_preserve-->
-}}
 
 
 Without any adjustments the layout is not great. But, \strong{with} some
 styling we can make this form sparkle. Notice we are also adjusting the
-default submit button added to the form input.\if{html}{\out{<div class="r">}}\preformatted{formInput(
+default submit button added to the form input.
+
+\if{html}{\out{<div class="sourceCode r">}}\preformatted{formInput(
   id = NULL,
   inline = TRUE,
   textInput(
@@ -195,87 +121,24 @@ default submit button added to the form input.\if{html}{\out{<div class="r">}}\p
   )
 )
 }\if{html}{\out{</div>}}\if{html}{\out{
-<!--html_preserve-->
-}}
-\if{html}{\out{
-<div class="r-output">
-}}
-\if{html}{\out{
 <form class="yonder-form form-inline">
-}}
-\if{html}{\out{
-<div id="name" class="yonder-textual mr-sm-2 mb-2">
-}}
-\if{html}{\out{
+<div class="yonder-textual mr-sm-2 mb-2" id="name">
 <input class="form-control" type="text" placeholder="Full name" autocomplete="off"/>
-}}
-\if{html}{\out{
-<div class="valid-feedback">
-}}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
-<div class="invalid-feedback">
-}}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
+<div class="valid-feedback"></div>
+<div class="invalid-feedback"></div>
 </div>
-}}
-\if{html}{\out{
-<div id="username" class="yonder-group-text input-group mr-sm-2 mb-2">
-}}
-\if{html}{\out{
+<div class="yonder-group-text input-group mr-sm-2 mb-2" id="username">
 <div class="input-group-prepend">
-}}
-
-
-\if{html}{\out{<span class="input-group-text">}}@@\if{html}{\out{</span>}}\if{html}{\out{
+<span class="input-group-text">@@</span>
 </div>
-}}
-\if{html}{\out{
 <input type="text" class="form-control" placeholder="Username" autocomplete="off"/>
-}}
-\if{html}{\out{
-<div class="valid-feedback">
-}}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
-<div class="invalid-feedback">
-}}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
-<div id="remember" class="yonder-checkbox mr-sm-2 mb-2" data-choice="Remember me">
-}}
-\if{html}{\out{
+<div class="valid-feedback"></div>
+<div class="invalid-feedback"></div>
 </div>
-}}
-\if{html}{\out{
-<button class="yonder-form-submit btn btn-blue mb-2" value="login">
-}}
-
-
-Login\if{html}{\out{
-</button>
-}}
-\if{html}{\out{
+<div choice="Remember me" class="yonder-checkbox mr-sm-2 mb-2" id="remember"></div>
+<button class="yonder-form-submit btn btn-blue mb-2" value="login">Login</button>
 </form>
 }}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
-<!--/html_preserve-->
-}}
 
 }
 }
diff --git a/man/menuInput.Rd b/man/menuInput.Rd
index 50595ba9..435cc279 100644
--- a/man/menuInput.Rd
+++ b/man/menuInput.Rd
@@ -67,7 +67,9 @@ reactive inputs or within a \code{\link[=navInput]{navInput()}}. For building cu
 dropdown elements please see \code{\link[=dropdown]{dropdown()}}.
 }
 \details{
-\subsection{Getting Started}{\if{html}{\out{<div class="r">}}\preformatted{menuInput(
+\subsection{Getting Started}{
+
+\if{html}{\out{<div class="sourceCode r">}}\preformatted{menuInput(
   id = "menu1",
   label = "Menu",
   choices = c(
@@ -77,63 +79,19 @@ dropdown elements please see \code{\link[=dropdown]{dropdown()}}.
   )
 )
 }\if{html}{\out{</div>}}\if{html}{\out{
-<!--html_preserve-->
-}}
-\if{html}{\out{
-<div class="r-output">
-}}
-\if{html}{\out{
-<div id="menu1" class="yonder-menu dropdown">
-}}
-\if{html}{\out{
-<button class="btn dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-}}
-
-
-Menu\if{html}{\out{
-</button>
-}}
-\if{html}{\out{
+<div class="yonder-menu dropdown" id="menu1">
+<button class="btn dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Menu</button>
 <div class="dropdown-menu">
-}}
-\if{html}{\out{
-<button class="dropdown-item" type="button" value="Choice 1">
-}}
-
-
-Choice 1\if{html}{\out{
-</button>
-}}
-\if{html}{\out{
-<button class="dropdown-item" type="button" value="Choice 2">
-}}
-
-
-Choice 2\if{html}{\out{
-</button>
-}}
-\if{html}{\out{
-<button class="dropdown-item" type="button" value="Choice 3">
-}}
-
-
-Choice 3\if{html}{\out{
-</button>
-}}
-\if{html}{\out{
+<button class="dropdown-item" type="button" value="Choice 1">Choice 1</button>
+<button class="dropdown-item" type="button" value="Choice 2">Choice 2</button>
+<button class="dropdown-item" type="button" value="Choice 3">Choice 3</button>
 </div>
-}}
-\if{html}{\out{
 </div>
 }}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
-<!--/html_preserve-->
-}}
 
-\subsection{Use in navigation}{\if{html}{\out{<div class="r">}}\preformatted{navInput(
+\subsection{Use in navigation}{
+
+\if{html}{\out{<div class="sourceCode r">}}\preformatted{navInput(
   id = "nav1",
   choices = list(
     "Tab 1",
@@ -152,109 +110,26 @@ Choice 3\if{html}{\out{
   values = paste0("tab", 1:4)
 )
 }\if{html}{\out{</div>}}\if{html}{\out{
-<!--html_preserve-->
-}}
-\if{html}{\out{
-<div class="r-output">
-}}
-\if{html}{\out{
 <ul class="yonder-nav nav" id="nav1">
-}}
-\if{html}{\out{
 <li class="nav-item">
-}}
-\if{html}{\out{
-<button class="nav-link btn btn-link active" value="tab1">
-}}
-
-
-Tab 1\if{html}{\out{
-</button>
-}}
-\if{html}{\out{
+<button class="nav-link btn btn-link active" value="tab1">Tab 1</button>
 </li>
-}}
-\if{html}{\out{
 <li class="yonder-menu dropdown nav-item" id="navOptions">
-}}
-\if{html}{\out{
-<button class="btn dropdown-toggle nav-link btn-link" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" value="tab2">
-}}
-
-
-Tab 2\if{html}{\out{
-</button>
-}}
-\if{html}{\out{
+<button class="btn dropdown-toggle nav-link btn-link" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" value="tab2">Tab 2</button>
 <div class="dropdown-menu">
-}}
-\if{html}{\out{
-<button class="dropdown-item" type="button" value="Option 1">
-}}
-
-
-Option 1\if{html}{\out{
-</button>
-}}
-\if{html}{\out{
-<button class="dropdown-item" type="button" value="Option 2">
-}}
-
-
-Option 2\if{html}{\out{
-</button>
-}}
-\if{html}{\out{
-<button class="dropdown-item" type="button" value="Option 3">
-}}
-
-
-Option 3\if{html}{\out{
-</button>
-}}
-\if{html}{\out{
+<button class="dropdown-item" type="button" value="Option 1">Option 1</button>
+<button class="dropdown-item" type="button" value="Option 2">Option 2</button>
+<button class="dropdown-item" type="button" value="Option 3">Option 3</button>
 </div>
-}}
-\if{html}{\out{
 </li>
-}}
-\if{html}{\out{
 <li class="nav-item">
-}}
-\if{html}{\out{
-<button class="nav-link btn btn-link" value="tab3">
-}}
-
-
-Tab 3\if{html}{\out{
-</button>
-}}
-\if{html}{\out{
+<button class="nav-link btn btn-link" value="tab3">Tab 3</button>
 </li>
-}}
-\if{html}{\out{
 <li class="nav-item">
-}}
-\if{html}{\out{
-<button class="nav-link btn btn-link" value="tab4">
-}}
-
-
-Tab 4\if{html}{\out{
-</button>
-}}
-\if{html}{\out{
+<button class="nav-link btn btn-link" value="tab4">Tab 4</button>
 </li>
-}}
-\if{html}{\out{
 </ul>
 }}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
-<!--/html_preserve-->
-}}
 
 }
 
diff --git a/man/modal.Rd b/man/modal.Rd
index ad99d42a..d2d18e87 100644
--- a/man/modal.Rd
+++ b/man/modal.Rd
@@ -57,101 +57,38 @@ closed. Additionally, when \code{id} is not \code{NULL} observers and reactives
 watch for the modal's close event.
 }
 \details{
-\subsection{Getting started}{\if{html}{\out{<div class="r">}}\preformatted{modal(
+\subsection{Getting started}{
+
+\if{html}{\out{<div class="sourceCode r">}}\preformatted{modal(
   id = "modal1",
   header = h5("Header"),
   p("Cras placerat accumsan nulla.")
 )
 }\if{html}{\out{</div>}}\if{html}{\out{
-<!--html_preserve-->
-}}
-\if{html}{\out{
-<div class="r-output">
-}}
-\if{html}{\out{
-<div id="modal1" class="yonder-modal modal fade" tabindex="-1" role="dialog">
-}}
-\if{html}{\out{
+<div class="yonder-modal modal fade" id="modal1" tabindex="-1" role="dialog">
 <div class="modal-dialog" role="document">
-}}
-\if{html}{\out{
 <div class="modal-content">
-}}
-\if{html}{\out{
 <div class="modal-header">
-}}
-\if{html}{\out{
-<h5 class="modal-title">
-}}
-
-
-Header\if{html}{\out{
-</h5>
-}}
-\if{html}{\out{
+<h5 class="modal-title">Header</h5>
 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-}}
-
-
-\if{html}{\out{<span aria-hidden="true">}}×\if{html}{\out{</span>}}\if{html}{\out{
+<span aria-hidden="true">&times;</span>
 </button>
-}}
-\if{html}{\out{
 </div>
-}}
-\if{html}{\out{
 <div class="modal-body">
-}}
-\if{html}{\out{
-<p>
-}}
-
-
-Cras placerat accumsan nulla.\if{html}{\out{
-</p>
-}}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
+<p>Cras placerat accumsan nulla.</p>
 </div>
-}}
-\if{html}{\out{
 </div>
-}}
-\if{html}{\out{
 </div>
-}}
-\if{html}{\out{
 </div>
 }}
-\if{html}{\out{
-<!--/html_preserve-->
-}}
-\if{html}{\out{
-<!--html_preserve-->
-}}
-\if{html}{\out{
-<div class="r-output">
-}}
-\if{html}{\out{
-<button data-toggle="modal" data-target="#modal1">
-}}
-
 
-Open modal\if{html}{\out{
-</button>
-}}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
-<!--/html_preserve-->
-}}
 
+\if{html}{\out{<button data-toggle="modal" data-target="#modal1">}}Open modal\if{html}{\out{</button>}}
 }
 
-\subsection{Modals with containers}{\if{html}{\out{<div class="r">}}\preformatted{modal(
+\subsection{Modals with containers}{
+
+\if{html}{\out{<div class="sourceCode r">}}\preformatted{modal(
   id = "modal2",
   size = "lg",
   header = h5("More complex"),
@@ -167,120 +104,34 @@ Open modal\if{html}{\out{
   )
 )
 }\if{html}{\out{</div>}}\if{html}{\out{
-<!--html_preserve-->
-}}
-\if{html}{\out{
-<div class="r-output">
-}}
-\if{html}{\out{
-<div id="modal2" class="yonder-modal modal fade" tabindex="-1" role="dialog">
-}}
-\if{html}{\out{
+<div class="yonder-modal modal fade" id="modal2" tabindex="-1" role="dialog">
 <div class="modal-dialog modal-lg" role="document">
-}}
-\if{html}{\out{
 <div class="modal-content">
-}}
-\if{html}{\out{
 <div class="modal-header">
-}}
-\if{html}{\out{
-<h5 class="modal-title">
-}}
-
-
-More complex\if{html}{\out{
-</h5>
-}}
-\if{html}{\out{
+<h5 class="modal-title">More complex</h5>
 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-}}
-
-
-\if{html}{\out{<span aria-hidden="true">}}×\if{html}{\out{</span>}}\if{html}{\out{
+<span aria-hidden="true">&times;</span>
 </button>
-}}
-\if{html}{\out{
 </div>
-}}
-\if{html}{\out{
 <div class="modal-body">
-}}
-\if{html}{\out{
 <div class="container-fluid">
-}}
-\if{html}{\out{
 <div class="row">
-}}
-\if{html}{\out{
-<div class="col">
-}}
-
-
-Cras placerat accumsan nulla.\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
-<div class="col">
-}}
-
-
-Curabitur lacinia pulvinar nibh.\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
+<div class="col">Cras placerat accumsan nulla.</div>
+<div class="col">Curabitur lacinia pulvinar nibh.</div>
 <div class="col">
-}}
-
-
-Aliquam posuere. Praesent fermentum tempor tellus.\if{html}{\out{
+Aliquam posuere.
+Praesent fermentum tempor tellus.
 </div>
-}}
-\if{html}{\out{
 </div>
-}}
-\if{html}{\out{
 </div>
-}}
-\if{html}{\out{
 </div>
-}}
-\if{html}{\out{
 </div>
-}}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
 </div>
-}}
-\if{html}{\out{
 </div>
 }}
-\if{html}{\out{
-<!--/html_preserve-->
-}}
-\if{html}{\out{
-<!--html_preserve-->
-}}
-\if{html}{\out{
-<div class="r-output">
-}}
-\if{html}{\out{
-<button data-toggle="modal" data-target="#modal2">
-}}
-
 
-Open modal\if{html}{\out{
-</button>
-}}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
-<!--/html_preserve-->
-}}
 
+\if{html}{\out{<button data-toggle="modal" data-target="#modal2">}}Open modal\if{html}{\out{</button>}}
 }
 }
 \seealso{
diff --git a/man/navContent.Rd b/man/navContent.Rd
index 5ba486d9..82a7bef7 100644
--- a/man/navContent.Rd
+++ b/man/navContent.Rd
@@ -40,7 +40,9 @@ when you do not have a new pane to show, but want to hide the current active
 pane.
 }
 \section{App with pills}{
-\if{html}{\out{<div class="R">}}\preformatted{ui <- container(
+
+
+\if{html}{\out{<div class="sourceCode R">}}\preformatted{ui <- container(
   navInput(
     id = "tabs",
     choices = paste("Tab", 1:3),
@@ -85,7 +87,9 @@ shinyApp(ui, server)
 }
 
 \section{App with dropdown}{
-\if{html}{\out{<div class="R">}}\preformatted{ui <- container(
+
+
+\if{html}{\out{<div class="sourceCode R">}}\preformatted{ui <- container(
   navInput(
     id = "tabs",
     choices = list(
@@ -139,7 +143,9 @@ shinyApp(ui, server)
 }
 
 \section{App with multiple sets of panes}{
-\if{html}{\out{<div class="R">}}\preformatted{ui <- container(
+
+
+\if{html}{\out{<div class="sourceCode R">}}\preformatted{ui <- container(
   navInput(
     id = "tabs",
     choices = paste("Tab", 1:3),
diff --git a/man/navInput.Rd b/man/navInput.Rd
index c58f1ef6..832667bd 100644
--- a/man/navInput.Rd
+++ b/man/navInput.Rd
@@ -65,7 +65,9 @@ of a nav input is \code{NULL} or a singleton character string. The value of any
 menus in the nav input must be retrieved with its own reactive id.
 }
 \details{
-\subsection{Nav styled as tabs}{\if{html}{\out{<div class="r">}}\preformatted{navInput(
+\subsection{Nav styled as tabs}{
+
+\if{html}{\out{<div class="sourceCode r">}}\preformatted{navInput(
   id = "tabs1",
   choices = c(
     "Tab 1",
@@ -76,138 +78,48 @@ menus in the nav input must be retrieved with its own reactive id.
   appearance = "tabs"
 )
 }\if{html}{\out{</div>}}\if{html}{\out{
-<!--html_preserve-->
-}}
-\if{html}{\out{
-<div class="r-output">
-}}
-\if{html}{\out{
 <ul class="yonder-nav nav nav-tabs" id="tabs1">
-}}
-\if{html}{\out{
 <li class="nav-item">
-}}
-\if{html}{\out{
-<button class="nav-link btn btn-link active" value="Tab 1">
-}}
-
-
-Tab 1\if{html}{\out{
-</button>
-}}
-\if{html}{\out{
+<button class="nav-link btn btn-link active" value="Tab 1">Tab 1</button>
 </li>
-}}
-\if{html}{\out{
 <li class="nav-item">
-}}
-\if{html}{\out{
-<button class="nav-link btn btn-link" value="Tab 2">
-}}
-
-
-Tab 2\if{html}{\out{
-</button>
-}}
-\if{html}{\out{
+<button class="nav-link btn btn-link" value="Tab 2">Tab 2</button>
 </li>
-}}
-\if{html}{\out{
 <li class="nav-item">
-}}
-\if{html}{\out{
-<button class="nav-link btn btn-link" value="Tab 3">
-}}
-
-
-Tab 3\if{html}{\out{
-</button>
-}}
-\if{html}{\out{
+<button class="nav-link btn btn-link" value="Tab 3">Tab 3</button>
 </li>
-}}
-\if{html}{\out{
 </ul>
 }}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
-<!--/html_preserve-->
-}}
 
 }
 
-\subsection{Nav styled as pills}{\if{html}{\out{<div class="r">}}\preformatted{navInput(
+\subsection{Nav styled as pills}{
+
+\if{html}{\out{<div class="sourceCode r">}}\preformatted{navInput(
   id = "tabs2",
   choices = paste("Tab", 1:3),
   selected = "Tab 1",
   appearance = "pills"
 )
 }\if{html}{\out{</div>}}\if{html}{\out{
-<!--html_preserve-->
-}}
-\if{html}{\out{
-<div class="r-output">
-}}
-\if{html}{\out{
 <ul class="yonder-nav nav nav-pills" id="tabs2">
-}}
-\if{html}{\out{
 <li class="nav-item">
-}}
-\if{html}{\out{
-<button class="nav-link btn btn-link active" value="Tab 1">
-}}
-
-
-Tab 1\if{html}{\out{
-</button>
-}}
-\if{html}{\out{
+<button class="nav-link btn btn-link active" value="Tab 1">Tab 1</button>
 </li>
-}}
-\if{html}{\out{
 <li class="nav-item">
-}}
-\if{html}{\out{
-<button class="nav-link btn btn-link" value="Tab 2">
-}}
-
-
-Tab 2\if{html}{\out{
-</button>
-}}
-\if{html}{\out{
+<button class="nav-link btn btn-link" value="Tab 2">Tab 2</button>
 </li>
-}}
-\if{html}{\out{
 <li class="nav-item">
-}}
-\if{html}{\out{
-<button class="nav-link btn btn-link" value="Tab 3">
-}}
-
-
-Tab 3\if{html}{\out{
-</button>
-}}
-\if{html}{\out{
+<button class="nav-link btn btn-link" value="Tab 3">Tab 3</button>
 </li>
-}}
-\if{html}{\out{
 </ul>
 }}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
-<!--/html_preserve-->
-}}
 
 }
 
-\subsection{Nav with dropdown}{\if{html}{\out{<div class="r">}}\preformatted{navInput(
+\subsection{Nav with dropdown}{
+
+\if{html}{\out{<div class="sourceCode r">}}\preformatted{navInput(
   id = "tabs3",
   choices = list(
     "Tab 1",
@@ -224,91 +136,28 @@ Tab 3\if{html}{\out{
   values = c("tab1", "tab2", "tab3")
 )
 }\if{html}{\out{</div>}}\if{html}{\out{
-<!--html_preserve-->
-}}
-\if{html}{\out{
-<div class="r-output">
-}}
-\if{html}{\out{
 <ul class="yonder-nav nav" id="tabs3">
-}}
-\if{html}{\out{
 <li class="nav-item">
-}}
-\if{html}{\out{
-<button class="nav-link btn btn-link active" value="tab1">
-}}
-
-
-Tab 1\if{html}{\out{
-</button>
-}}
-\if{html}{\out{
+<button class="nav-link btn btn-link active" value="tab1">Tab 1</button>
 </li>
-}}
-\if{html}{\out{
 <li class="yonder-menu dropdown nav-item" id="menu1">
-}}
-\if{html}{\out{
-<button class="btn dropdown-toggle nav-link btn-link" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" value="tab2">
-}}
-
-
-Tab 2\if{html}{\out{
-</button>
-}}
-\if{html}{\out{
+<button class="btn dropdown-toggle nav-link btn-link" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" value="tab2">Tab 2</button>
 <div class="dropdown-menu">
-}}
-\if{html}{\out{
-<button class="dropdown-item" type="button" value="Action">
-}}
-
-
-Action\if{html}{\out{
-</button>
-}}
-\if{html}{\out{
-<button class="dropdown-item" type="button" value="Another action">
-}}
-
-
-Another action\if{html}{\out{
-</button>
-}}
-\if{html}{\out{
+<button class="dropdown-item" type="button" value="Action">Action</button>
+<button class="dropdown-item" type="button" value="Another action">Another action</button>
 </div>
-}}
-\if{html}{\out{
 </li>
-}}
-\if{html}{\out{
 <li class="nav-item">
-}}
-\if{html}{\out{
-<button class="nav-link btn btn-link" value="tab3">
-}}
-
-
-Tab 2\if{html}{\out{
-</button>
-}}
-\if{html}{\out{
+<button class="nav-link btn btn-link" value="tab3">Tab 2</button>
 </li>
-}}
-\if{html}{\out{
 </ul>
 }}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
-<!--/html_preserve-->
-}}
 
 }
 
-\subsection{Full width nav input}{\if{html}{\out{<div class="r">}}\preformatted{navInput(
+\subsection{Full width nav input}{
+
+\if{html}{\out{<div class="sourceCode r">}}\preformatted{navInput(
   id = "tabs4",
   choices = paste("Tab", 1:5),
   values = paste0("tab", 1:5),
@@ -316,162 +165,48 @@ Tab 2\if{html}{\out{
   fill = TRUE
 )
 }\if{html}{\out{</div>}}\if{html}{\out{
-<!--html_preserve-->
-}}
-\if{html}{\out{
-<div class="r-output">
-}}
-\if{html}{\out{
 <ul class="yonder-nav nav nav-fill nav-pills" id="tabs4">
-}}
-\if{html}{\out{
 <li class="nav-item">
-}}
-\if{html}{\out{
-<button class="nav-link btn btn-link active" value="tab1">
-}}
-
-
-Tab 1\if{html}{\out{
-</button>
-}}
-\if{html}{\out{
+<button class="nav-link btn btn-link active" value="tab1">Tab 1</button>
 </li>
-}}
-\if{html}{\out{
 <li class="nav-item">
-}}
-\if{html}{\out{
-<button class="nav-link btn btn-link" value="tab2">
-}}
-
-
-Tab 2\if{html}{\out{
-</button>
-}}
-\if{html}{\out{
+<button class="nav-link btn btn-link" value="tab2">Tab 2</button>
 </li>
-}}
-\if{html}{\out{
 <li class="nav-item">
-}}
-\if{html}{\out{
-<button class="nav-link btn btn-link" value="tab3">
-}}
-
-
-Tab 3\if{html}{\out{
-</button>
-}}
-\if{html}{\out{
+<button class="nav-link btn btn-link" value="tab3">Tab 3</button>
 </li>
-}}
-\if{html}{\out{
 <li class="nav-item">
-}}
-\if{html}{\out{
-<button class="nav-link btn btn-link" value="tab4">
-}}
-
-
-Tab 4\if{html}{\out{
-</button>
-}}
-\if{html}{\out{
+<button class="nav-link btn btn-link" value="tab4">Tab 4</button>
 </li>
-}}
-\if{html}{\out{
 <li class="nav-item">
-}}
-\if{html}{\out{
-<button class="nav-link btn btn-link" value="tab5">
-}}
-
-
-Tab 5\if{html}{\out{
-</button>
-}}
-\if{html}{\out{
+<button class="nav-link btn btn-link" value="tab5">Tab 5</button>
 </li>
-}}
-\if{html}{\out{
 </ul>
 }}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
-<!--/html_preserve-->
-}}
 
 }
 
-\subsection{Centering a nav input}{\if{html}{\out{<div class="r">}}\preformatted{navInput(
+\subsection{Centering a nav input}{
+
+\if{html}{\out{<div class="sourceCode r">}}\preformatted{navInput(
   .style \%>\%
     flex(justify = "center"),
   id = NULL,
   choices = c("Tab 1", "Tab 2", "Tab 3")
 )
 }\if{html}{\out{</div>}}\if{html}{\out{
-<!--html_preserve-->
-}}
-\if{html}{\out{
-<div class="r-output">
-}}
-\if{html}{\out{
 <ul class="yonder-nav nav justify-content-center">
-}}
-\if{html}{\out{
 <li class="nav-item">
-}}
-\if{html}{\out{
-<button class="nav-link btn btn-link active" value="Tab 1">
-}}
-
-
-Tab 1\if{html}{\out{
-</button>
-}}
-\if{html}{\out{
+<button class="nav-link btn btn-link active" value="Tab 1">Tab 1</button>
 </li>
-}}
-\if{html}{\out{
 <li class="nav-item">
-}}
-\if{html}{\out{
-<button class="nav-link btn btn-link" value="Tab 2">
-}}
-
-
-Tab 2\if{html}{\out{
-</button>
-}}
-\if{html}{\out{
+<button class="nav-link btn btn-link" value="Tab 2">Tab 2</button>
 </li>
-}}
-\if{html}{\out{
 <li class="nav-item">
-}}
-\if{html}{\out{
-<button class="nav-link btn btn-link" value="Tab 3">
-}}
-
-
-Tab 3\if{html}{\out{
-</button>
-}}
-\if{html}{\out{
+<button class="nav-link btn btn-link" value="Tab 3">Tab 3</button>
 </li>
-}}
-\if{html}{\out{
 </ul>
 }}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
-<!--/html_preserve-->
-}}
 
 }
 }
diff --git a/man/navbar.Rd b/man/navbar.Rd
index eb4c2e1e..5b9d04be 100644
--- a/man/navbar.Rd
+++ b/man/navbar.Rd
@@ -26,7 +26,9 @@ device. A button is automatically added to toggle between the collapsed and
 expanded states.
 }
 \details{
-\subsection{Navbar with tabs}{\if{html}{\out{<div class="r">}}\preformatted{div(
+\subsection{Navbar with tabs}{
+
+\if{html}{\out{<div class="sourceCode r">}}\preformatted{div(
   navbar(
     brand = "Navbar",
     navInput(
@@ -58,101 +60,31 @@ expanded states.
   )
 )
 }\if{html}{\out{</div>}}\if{html}{\out{
-<!--html_preserve-->
-}}
-\if{html}{\out{
-<div class="r-output">
-}}
-\if{html}{\out{
 <div>
-}}
-\if{html}{\out{
 <nav class="navbar navbar-expand navbar-light">
-}}
-
-
-\if{html}{\out{<a class="navbar-brand" href="#">}}Navbar\if{html}{\out{</a>}}
-\if{html}{\out{<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#nav-content-433-345" aria-controls="nav-content-433-345" aria-expanded="false" aria-label="Toggle navigation">}}
-\if{html}{\out{<span class="navbar-toggler-icon">}}\if{html}{\out{</span>}} \if{html}{\out{</button>}}\if{html}{\out{
-<div id="nav-content-433-345" class="collapse navbar-collapse">
-}}
-\if{html}{\out{
+<a class="navbar-brand" href="#">Navbar</a>
+<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#nav-content-433-345" aria-controls="nav-content-433-345" aria-expanded="false" aria-label="Toggle navigation">
+<span class="navbar-toggler-icon"></span>
+</button>
+<div class="collapse navbar-collapse" id="nav-content-433-345">
 <ul class="yonder-nav nav navbar-nav mr-auto">
-}}
-\if{html}{\out{
 <li class="nav-item">
-}}
-\if{html}{\out{
-<button class="nav-link btn btn-link active" value="Home">
-}}
-
-
-Home\if{html}{\out{
-</button>
-}}
-\if{html}{\out{
+<button class="nav-link btn btn-link active" value="Home">Home</button>
 </li>
-}}
-\if{html}{\out{
 <li class="nav-item">
-}}
-\if{html}{\out{
-<button class="nav-link btn btn-link" value="About">
-}}
-
-
-About\if{html}{\out{
-</button>
-}}
-\if{html}{\out{
+<button class="nav-link btn btn-link" value="About">About</button>
 </li>
-}}
-\if{html}{\out{
 <li class="nav-item">
-}}
-\if{html}{\out{
-<button class="nav-link btn btn-link" value="Our process">
-}}
-
-
-Our process\if{html}{\out{
-</button>
-}}
-\if{html}{\out{
+<button class="nav-link btn btn-link" value="Our process">Our process</button>
 </li>
-}}
-\if{html}{\out{
 </ul>
-}}
-\if{html}{\out{
 </div>
-}}
-\if{html}{\out{
 </nav>
-}}
-\if{html}{\out{
 <div class="container-fluid">
-}}
-\if{html}{\out{
-<p>
-}}
-
-
-. . .\if{html}{\out{
-</p>
-}}
-\if{html}{\out{
+<p>. . .</p>
 </div>
-}}
-\if{html}{\out{
 </div>
 }}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
-<!--/html_preserve-->
-}}
 
 }
 }
diff --git a/man/padding.Rd b/man/padding.Rd
index e55ef351..ce815f9d 100644
--- a/man/padding.Rd
+++ b/man/padding.Rd
@@ -24,7 +24,9 @@ they are ignored.
 
 In most modern browsers you want to horizontally center a tag element
 using the flex layout. Alternatively, you can horizontally center an
-element using \code{margin(.., right = "auto", left = "auto")}.\if{html}{\out{<div class="r">}}\preformatted{div(
+element using \code{margin(.., right = "auto", left = "auto")}.
+
+\if{html}{\out{<div class="sourceCode r">}}\preformatted{div(
   .style \%>\%
     margin(t = 2, r = "auto", b = 2, l = "auto") \%>\%  # <-
     padding(3) \%>\%
@@ -32,24 +34,7 @@ element using \code{margin(.., right = "auto", left = "auto")}.\if{html}{\out{<d
   "Nam a sapien. Integer placerat tristique nisl."
 )
 }\if{html}{\out{</div>}}\if{html}{\out{
-<!--html_preserve-->
-}}
-\if{html}{\out{
-<div class="r-output">
-}}
-\if{html}{\out{
-<div class="mt-2 mr-auto mb-2 ml-auto p-3 bg-info">
-}}
-
-
-Nam a sapien. Integer placerat tristique nisl.\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
-<!--/html_preserve-->
+<div class="mt-2 mr-auto mb-2 ml-auto p-3 bg-info">Nam a sapien. Integer placerat tristique nisl.</div>
 }}
 
 }
@@ -60,7 +45,9 @@ Inline form elements automatically use the flex layout providing you a
 means of creating condensed sets of inputs. However, you may need to
 adjust the spacing of the form’s child elements.
 
-Here is an inline form \strong{without} any additional spacing applied.\if{html}{\out{<div class="r">}}\preformatted{formInput(
+Here is an inline form \strong{without} any additional spacing applied.
+
+\if{html}{\out{<div class="sourceCode r">}}\preformatted{formInput(
   id = NULL,
   inline = TRUE,
   textInput(
@@ -79,92 +66,31 @@ Here is an inline form \strong{without} any additional spacing applied.\if{html}
   formSubmit("Login", "login")
 )
 }\if{html}{\out{</div>}}\if{html}{\out{
-<!--html_preserve-->
-}}
-\if{html}{\out{
-<div class="r-output">
-}}
-\if{html}{\out{
 <form class="yonder-form form-inline">
-}}
-\if{html}{\out{
-<div id="name" class="yonder-textual">
-}}
-\if{html}{\out{
+<div class="yonder-textual" id="name">
 <input class="form-control" type="text" placeholder="Full name" autocomplete="off"/>
-}}
-\if{html}{\out{
-<div class="valid-feedback">
-}}
-\if{html}{\out{
+<div class="valid-feedback"></div>
+<div class="invalid-feedback"></div>
 </div>
-}}
-\if{html}{\out{
-<div class="invalid-feedback">
-}}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
-<div id="username" class="yonder-group-text input-group">
-}}
-\if{html}{\out{
+<div class="yonder-group-text input-group" id="username">
 <div class="input-group-prepend">
-}}
-
-
-\if{html}{\out{<span class="input-group-text">}}@@\if{html}{\out{</span>}}\if{html}{\out{
+<span class="input-group-text">@@</span>
 </div>
-}}
-\if{html}{\out{
 <input type="text" class="form-control" placeholder="Username" autocomplete="off"/>
-}}
-\if{html}{\out{
-<div class="valid-feedback">
-}}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
-<div class="invalid-feedback">
-}}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
-<div id="remember" class="yonder-checkbox" data-choice="Remember me">
-}}
-\if{html}{\out{
+<div class="valid-feedback"></div>
+<div class="invalid-feedback"></div>
 </div>
-}}
-\if{html}{\out{
-<button class="yonder-form-submit btn btn-blue" value="login">
-}}
-
-
-Login\if{html}{\out{
-</button>
-}}
-\if{html}{\out{
+<div class="yonder-checkbox" id="remember" choice="Remember me"></div>
+<button class="yonder-form-submit btn btn-blue" value="login">Login</button>
 </form>
 }}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
-<!--/html_preserve-->
-}}
 
 
 Without any adjustments the layout is not great. But, \strong{with} some
 styling we can make this form sparkle. Notice we are also adjusting the
-default submit button added to the form input.\if{html}{\out{<div class="r">}}\preformatted{formInput(
+default submit button added to the form input.
+
+\if{html}{\out{<div class="sourceCode r">}}\preformatted{formInput(
   id = NULL,
   inline = TRUE,
   textInput(
@@ -194,87 +120,24 @@ default submit button added to the form input.\if{html}{\out{<div class="r">}}\p
   )
 )
 }\if{html}{\out{</div>}}\if{html}{\out{
-<!--html_preserve-->
-}}
-\if{html}{\out{
-<div class="r-output">
-}}
-\if{html}{\out{
 <form class="yonder-form form-inline">
-}}
-\if{html}{\out{
-<div id="name" class="yonder-textual mr-sm-2 mb-2">
-}}
-\if{html}{\out{
+<div class="yonder-textual mr-sm-2 mb-2" id="name">
 <input class="form-control" type="text" placeholder="Full name" autocomplete="off"/>
-}}
-\if{html}{\out{
-<div class="valid-feedback">
-}}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
-<div class="invalid-feedback">
-}}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
+<div class="valid-feedback"></div>
+<div class="invalid-feedback"></div>
 </div>
-}}
-\if{html}{\out{
-<div id="username" class="yonder-group-text input-group mr-sm-2 mb-2">
-}}
-\if{html}{\out{
+<div class="yonder-group-text input-group mr-sm-2 mb-2" id="username">
 <div class="input-group-prepend">
-}}
-
-
-\if{html}{\out{<span class="input-group-text">}}@@\if{html}{\out{</span>}}\if{html}{\out{
+<span class="input-group-text">@@</span>
 </div>
-}}
-\if{html}{\out{
 <input type="text" class="form-control" placeholder="Username" autocomplete="off"/>
-}}
-\if{html}{\out{
-<div class="valid-feedback">
-}}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
-<div class="invalid-feedback">
-}}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
-<div id="remember" class="yonder-checkbox mr-sm-2 mb-2" data-choice="Remember me">
-}}
-\if{html}{\out{
+<div class="valid-feedback"></div>
+<div class="invalid-feedback"></div>
 </div>
-}}
-\if{html}{\out{
-<button class="yonder-form-submit btn btn-blue mb-2" value="login">
-}}
-
-
-Login\if{html}{\out{
-</button>
-}}
-\if{html}{\out{
+<div choice="Remember me" class="yonder-checkbox mr-sm-2 mb-2" id="remember"></div>
+<button class="yonder-form-submit btn btn-blue mb-2" value="login">Login</button>
 </form>
 }}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
-<!--/html_preserve-->
-}}
 
 }
 }
diff --git a/man/popover.Rd b/man/popover.Rd
index d88a11ed..bccb1fe7 100644
--- a/man/popover.Rd
+++ b/man/popover.Rd
@@ -48,7 +48,9 @@ element with an HTML id. Popovers are great for explaining inputs and giving
 hints to the users. Popovers are hidden with \code{closePopover()}.
 }
 \section{Example application}{
-\if{html}{\out{<div class="R">}}\preformatted{ui <- container(
+
+
+\if{html}{\out{<div class="sourceCode R">}}\preformatted{ui <- container(
   buttonInput("showHelp", "Help!"),
   div(
     id = "textBlock1",
diff --git a/man/radioInput.Rd b/man/radioInput.Rd
index 1b858e7e..f4b2e6aa 100644
--- a/man/radioInput.Rd
+++ b/man/radioInput.Rd
@@ -68,74 +68,36 @@ A stylized radio input. A reactive input with multiple choices where only one
 choice and value at most may be selected.
 }
 \details{
-\subsection{Getting started}{\if{html}{\out{<div class="r">}}\preformatted{radioInput(
+\subsection{Getting started}{
+
+\if{html}{\out{<div class="sourceCode r">}}\preformatted{radioInput(
   id = NULL,
   choices = c("Choice 1", "Choice 2", "Choice 3")
 )
 }\if{html}{\out{</div>}}\if{html}{\out{
-<!--html_preserve-->
-}}
-\if{html}{\out{
-<div class="r-output">
-}}
-\if{html}{\out{
 <div class="yonder-radio">
-}}
-\if{html}{\out{
 <div class="custom-control custom-radio">
-}}
-\if{html}{\out{
 <input class="custom-control-input" type="radio" id="radio-433-345" value="Choice 1" checked autocomplete="off"/>
 <label class="custom-control-label" for="radio-433-345">Choice 1</label>
-}}
-\if{html}{\out{
 </div>
-}}
-\if{html}{\out{
 <div class="custom-control custom-radio">
-}}
-\if{html}{\out{
 <input class="custom-control-input" type="radio" id="radio-665-165" value="Choice 2" autocomplete="off"/>
 <label class="custom-control-label" for="radio-665-165">Choice 2</label>
-}}
-\if{html}{\out{
 </div>
-}}
-\if{html}{\out{
 <div class="custom-control custom-radio">
-}}
-\if{html}{\out{
 <input class="custom-control-input" type="radio" id="radio-332-323" value="Choice 3" autocomplete="off"/>
 <label class="custom-control-label" for="radio-332-323">Choice 3</label>
-}}
-\if{html}{\out{
-<div class="valid-feedback">
-}}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
-<div class="invalid-feedback">
-}}
-\if{html}{\out{
+<div class="valid-feedback"></div>
+<div class="invalid-feedback"></div>
 </div>
-}}
-\if{html}{\out{
 </div>
 }}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
-<!--/html_preserve-->
-}}
 
 }
 
-\subsection{Inline input}{\if{html}{\out{<div class="r">}}\preformatted{radioInput(
+\subsection{Inline input}{
+
+\if{html}{\out{<div class="sourceCode r">}}\preformatted{radioInput(
   id = NULL,
   choices = c(
     "Choice 1",
@@ -145,65 +107,23 @@ choice and value at most may be selected.
   inline = TRUE  # <-
 )
 }\if{html}{\out{</div>}}\if{html}{\out{
-<!--html_preserve-->
-}}
-\if{html}{\out{
-<div class="r-output">
-}}
-\if{html}{\out{
 <div class="yonder-radio">
-}}
-\if{html}{\out{
 <div class="custom-control custom-radio custom-control-inline">
-}}
-\if{html}{\out{
 <input class="custom-control-input" type="radio" id="radio-274-68" value="Choice 1" checked autocomplete="off"/>
 <label class="custom-control-label" for="radio-274-68">Choice 1</label>
-}}
-\if{html}{\out{
 </div>
-}}
-\if{html}{\out{
 <div class="custom-control custom-radio custom-control-inline">
-}}
-\if{html}{\out{
 <input class="custom-control-input" type="radio" id="radio-187-927" value="Choice 2" autocomplete="off"/>
 <label class="custom-control-label" for="radio-187-927">Choice 2</label>
-}}
-\if{html}{\out{
 </div>
-}}
-\if{html}{\out{
 <div class="custom-control custom-radio custom-control-inline">
-}}
-\if{html}{\out{
 <input class="custom-control-input" type="radio" id="radio-230-504" value="Choice 3" autocomplete="off"/>
 <label class="custom-control-label" for="radio-230-504">Choice 3</label>
-}}
-\if{html}{\out{
-<div class="valid-feedback">
-}}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
-<div class="invalid-feedback">
-}}
-\if{html}{\out{
+<div class="valid-feedback"></div>
+<div class="invalid-feedback"></div>
 </div>
-}}
-\if{html}{\out{
 </div>
 }}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
-<!--/html_preserve-->
-}}
 
 }
 }
diff --git a/man/radiobarInput.Rd b/man/radiobarInput.Rd
index 607e2afc..b95827b8 100644
--- a/man/radiobarInput.Rd
+++ b/man/radiobarInput.Rd
@@ -47,39 +47,30 @@ group, but with a checked or highlighted stated. Additionally, only one value
 at most may be selected at any given time.
 }
 \details{
-\subsection{Getting started}{\if{html}{\out{<div class="r">}}\preformatted{radiobarInput(
+\subsection{Getting started}{
+
+\if{html}{\out{<div class="sourceCode r">}}\preformatted{radiobarInput(
   .style \%>\%
     background("secondary"),
   id = NULL,
   choices = c("Choice 1", "Choice 2", "Choice 3")
 )
 }\if{html}{\out{</div>}}\if{html}{\out{
-<!--html_preserve-->
-}}
-\if{html}{\out{
-<div class="r-output">
-}}
-\if{html}{\out{
 <div class="yonder-radiobar btn-group btn-group-toggle d-flex bg-secondary" data-toggle="buttons">
-}}
-\if{html}{\out{
 <label class="btn active">
-<input type="radio" value="Choice 1" checked autocomplete="off"/> Choice
-1 </label> <label class="btn">
-<input type="radio" value="Choice 2" autocomplete="off"/> Choice 2
-</label> <label class="btn">
-<input type="radio" value="Choice 3" autocomplete="off"/> Choice 3
+<input type="radio" value="Choice 1" checked autocomplete="off"/>
+Choice 1
+</label>
+<label class="btn">
+<input type="radio" value="Choice 2" autocomplete="off"/>
+Choice 2
+</label>
+<label class="btn">
+<input type="radio" value="Choice 3" autocomplete="off"/>
+Choice 3
 </label>
-}}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
 </div>
 }}
-\if{html}{\out{
-<!--/html_preserve-->
-}}
 
 }
 }
diff --git a/man/rangeInput.Rd b/man/rangeInput.Rd
index 17d795d8..3492ebe8 100644
--- a/man/rangeInput.Rd
+++ b/man/rangeInput.Rd
@@ -54,53 +54,25 @@ HTML standards.
 
 \subsection{Getting started}{
 
-Select from a range of numeric values.\if{html}{\out{<div class="r">}}\preformatted{rangeInput(id = "range1")
+Select from a range of numeric values.
+
+\if{html}{\out{<div class="sourceCode r">}}\preformatted{rangeInput(id = "range1")
 }\if{html}{\out{</div>}}\if{html}{\out{
-<!--html_preserve-->
-}}
-\if{html}{\out{
-<div class="r-output">
-}}
-\if{html}{\out{
-<div id="range1" class="yonder-range">
-}}
-\if{html}{\out{
+<div class="yonder-range" id="range1">
 <input class="custom-range" type="range" step="1" min="0" max="100" value="0" autocomplete="off"/>
-}}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
 </div>
 }}
-\if{html}{\out{
-<!--/html_preserve-->
-}}
 
 }
 
-\subsection{Custom step}{\if{html}{\out{<div class="r">}}\preformatted{rangeInput(id = "range2", step = 10)
+\subsection{Custom step}{
+
+\if{html}{\out{<div class="sourceCode r">}}\preformatted{rangeInput(id = "range2", step = 10)
 }\if{html}{\out{</div>}}\if{html}{\out{
-<!--html_preserve-->
-}}
-\if{html}{\out{
-<div class="r-output">
-}}
-\if{html}{\out{
-<div id="range2" class="yonder-range">
-}}
-\if{html}{\out{
+<div class="yonder-range" id="range2">
 <input class="custom-range" type="range" step="10" min="0" max="100" value="0" autocomplete="off"/>
-}}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
 </div>
 }}
-\if{html}{\out{
-<!--/html_preserve-->
-}}
 
 }
 }
diff --git a/man/reexports.Rd b/man/reexports.Rd
index fefae039..d02102e9 100644
--- a/man/reexports.Rd
+++ b/man/reexports.Rd
@@ -11,6 +11,6 @@ These objects are imported from other packages. Follow the links
 below to see their documentation.
 
 \describe{
-  \item{magrittr}{\code{\link[magrittr]{\%>\%}}}
+  \item{magrittr}{\code{\link[magrittr:pipe]{\%>\%}}}
 }}
 
diff --git a/man/roxygen/range.R b/man/roxygen/range.R
deleted file mode 100644
index d55baaa7..00000000
--- a/man/roxygen/range.R
+++ /dev/null
@@ -1,16 +0,0 @@
-```{r, child = "_setup.Rmd"}
-```
-
-## Getting started
-
-Select from a range of numeric values.
-
-```{r}
-rangeInput(id = "range1")
-```
-
-## Custom step
-
-```{r}
-rangeInput(id = "range2", step = 10)
-```
diff --git a/man/selectInput.Rd b/man/selectInput.Rd
index e19e408d..a9b63a83 100644
--- a/man/selectInput.Rd
+++ b/man/selectInput.Rd
@@ -116,135 +116,55 @@ to change the reactivity or value of the input, see Details for more
 information.
 }
 \details{
-\subsection{Getting started}{\if{html}{\out{<div class="r">}}\preformatted{selectInput(
+\subsection{Getting started}{
+
+\if{html}{\out{<div class="sourceCode r">}}\preformatted{selectInput(
   id = "select1",
   choices = c("Choice 1", "Choice 2", "Choice 3"),
   values = as.character(c(1, 2, 3))
 )
 }\if{html}{\out{</div>}}\if{html}{\out{
-<!--html_preserve-->
-}}
-\if{html}{\out{
-<div class="r-output">
-}}
-\if{html}{\out{
-<div id="select1" class="yonder-select">
-}}
-\if{html}{\out{
+<div class="yonder-select" id="select1">
 <input type="text" class="form-control custom-select" data-toggle="dropdown" data-boundary="window" placeholder="Choice 1"/>
-}}
-\if{html}{\out{
 <div class="dropdown-menu">
-}}
-\if{html}{\out{
-<button class="dropdown-item active" value="1">
-}}
-
-
-Choice 1\if{html}{\out{
-</button>
-}}
-\if{html}{\out{
-<button class="dropdown-item" value="2">
-}}
-
-
-Choice 2\if{html}{\out{
-</button>
-}}
-\if{html}{\out{
-<button class="dropdown-item" value="3">
-}}
-
-
-Choice 3\if{html}{\out{
-</button>
-}}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
-<div class="valid-feedback">
-}}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
-<div class="invalid-feedback">
-}}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
+<button class="dropdown-item active" value="1">Choice 1</button>
+<button class="dropdown-item" value="2">Choice 2</button>
+<button class="dropdown-item" value="3">Choice 3</button>
 </div>
-}}
-\if{html}{\out{
+<div class="valid-feedback"></div>
+<div class="invalid-feedback"></div>
 </div>
 }}
-\if{html}{\out{
-<!--/html_preserve-->
-}}
 
 }
 
-\subsection{Group select input}{\if{html}{\out{<div class="r">}}\preformatted{groupSelectInput(
+\subsection{Group select input}{
+
+\if{html}{\out{<div class="sourceCode r">}}\preformatted{groupSelectInput(
   id = "select2",
   choices = as.character(1:5),
   left = "$",
   right = ".00"
 )
 }\if{html}{\out{</div>}}\if{html}{\out{
-<!--html_preserve-->
-}}
-\if{html}{\out{
-<div class="r-output">
-}}
-\if{html}{\out{
-<div id="select2" class="yonder-group-select input-group">
-}}
-\if{html}{\out{
+<div class="yonder-group-select input-group" id="select2">
 <div class="input-group-prepend">
-}}
-
-
-\if{html}{\out{<span class="input-group-text">}}$\if{html}{\out{</span>}}\if{html}{\out{
+<span class="input-group-text">$</span>
 </div>
-}}
-
-
-\if{html}{\out{<select class="custom-select">}} \if{html}{\out{<option selected value="1">}}1\if{html}{\out{</option>}}\if{html}{\out{
-<option value="2">2</option> <option value="3">3</option>
-<option value="4">4</option> <option value="5">5</option> </select>
-}}
-\if{html}{\out{
+<select class="custom-select">
+<option selected value="1">1</option>
+<option value="2">2</option>
+<option value="3">3</option>
+<option value="4">4</option>
+<option value="5">5</option>
+</select>
 <div class="input-group-append">
-}}
-
-
-\if{html}{\out{<span class="input-group-text">}}.00\if{html}{\out{</span>}}\if{html}{\out{
+<span class="input-group-text">.00</span>
 </div>
-}}
-\if{html}{\out{
-<div class="valid-feedback">
-}}
-\if{html}{\out{
+<div class="valid-feedback"></div>
+<div class="invalid-feedback"></div>
 </div>
 }}
-\if{html}{\out{
-<div class="invalid-feedback">
-}}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
-<!--/html_preserve-->
-}}
 
 }
 }
diff --git a/man/shadow.Rd b/man/shadow.Rd
index 4b858705..1aa70ea2 100644
--- a/man/shadow.Rd
+++ b/man/shadow.Rd
@@ -18,7 +18,9 @@ elements include a shadow to help distinguish them. Use \code{"none"} to remove
 element's shadow.
 }
 \details{
-\subsection{Getting started}{\if{html}{\out{<div class="r">}}\preformatted{div(
+\subsection{Getting started}{
+
+\if{html}{\out{<div class="sourceCode r">}}\preformatted{div(
   navbar(
     .style \%>\%
       background("dark") \%>\%
@@ -32,53 +34,28 @@ element's shadow.
     "venenatis vestibulum.")
 )
 }\if{html}{\out{</div>}}\if{html}{\out{
-<!--html_preserve-->
-}}
-\if{html}{\out{
-<div class="r-output">
-}}
-\if{html}{\out{
 <div>
-}}
-\if{html}{\out{
 <nav class="navbar navbar-expand navbar-light bg-dark text-light mb-3">
-}}
-
-
-\if{html}{\out{<a class="navbar-brand" href="#">}}Navbar\if{html}{\out{</a>}}
-\if{html}{\out{<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#nav-content-433-345" aria-controls="nav-content-433-345" aria-expanded="false" aria-label="Toggle navigation">}}
-\if{html}{\out{<span class="navbar-toggler-icon">}}\if{html}{\out{</span>}} \if{html}{\out{</button>}}\if{html}{\out{
-<div id="nav-content-433-345" class="collapse navbar-collapse">
-}}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
+<a class="navbar-brand" href="#">Navbar</a>
+<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#nav-content-433-345" aria-controls="nav-content-433-345" aria-expanded="false" aria-label="Toggle navigation">
+<span class="navbar-toggler-icon"></span>
+</button>
+<div class="collapse navbar-collapse" id="nav-content-433-345"></div>
 </nav>
-}}
-\if{html}{\out{
 <p>
-}}
-
-
-Cras mattis consectetur purus sit amet fermentum. Donec sed odio dui.
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu leo
-quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.\if{html}{\out{
+Cras mattis consectetur purus sit amet fermentum. Donec sed 
+odio dui. Lorem ipsum dolor sit amet, consectetur adipiscing 
+elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam 
+venenatis vestibulum.
 </p>
-}}
-\if{html}{\out{
 </div>
 }}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
-<!--/html_preserve-->
-}}
 
 }
 
-\subsection{Shadow sizes}{\if{html}{\out{<div class="r">}}\preformatted{div(
+\subsection{Shadow sizes}{
+
+\if{html}{\out{<div class="sourceCode r">}}\preformatted{div(
   buttonInput(
     .style \%>\%
       margin(2) \%>\%
@@ -102,47 +79,12 @@ quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.\if{html}{\out{
   )
 )
 }\if{html}{\out{</div>}}\if{html}{\out{
-<!--html_preserve-->
-}}
-\if{html}{\out{
-<div class="r-output">
-}}
-\if{html}{\out{
 <div>
-}}
-\if{html}{\out{
-<button autocomplete="off" class="yonder-button btn m-2 shadow-sm" role="button" type="button">
-}}
-
-
-Small\if{html}{\out{
-</button>
-}}
-\if{html}{\out{
-<button autocomplete="off" class="yonder-button btn m-2 shadow" role="button" type="button">
-}}
-
-
-Medium\if{html}{\out{
-</button>
-}}
-\if{html}{\out{
-<button autocomplete="off" class="yonder-button btn m-2 shadow-lg" role="button" type="button">
-}}
-
-
-Large\if{html}{\out{
-</button>
-}}
-\if{html}{\out{
+<button autocomplete="off" class="yonder-button btn m-2 shadow-sm" role="button" type="button">Small</button>
+<button autocomplete="off" class="yonder-button btn m-2 shadow" role="button" type="button">Medium</button>
+<button autocomplete="off" class="yonder-button btn m-2 shadow-lg" role="button" type="button">Large</button>
 </div>
 }}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
-<!--/html_preserve-->
-}}
 
 }
 }
diff --git a/man/textInput.Rd b/man/textInput.Rd
index 0e99601f..bd09e892 100644
--- a/man/textInput.Rd
+++ b/man/textInput.Rd
@@ -90,33 +90,7 @@ indicating how the input's value is invalid, defaults to \code{NULL}.}
 
 \item{session}{A reactive context, defaults to \code{\link[=getDefaultReactiveDomain]{getDefaultReactiveDomain()}}.}
 
-\item{left}{A character vector specifying static addons or
-\code{\link[=buttonInput]{buttonInput()}} or \code{\link[=dropdown]{dropdown()}} elements specifying dynamic addons. Addons
-affect the reactive value of the group input, see the Details section below
-for more information.
-
-\strong{\code{left} is character or \code{right} is character}
-
-If \code{left} or \code{right} are character vectors, then the group input functions
-like a text input. The value will update and trigger a reactive event when
-the text box is modified. The group input's reactive value is the
-concatenation of the static addons specified by \code{left} or \code{right} and the
-value of the text input.
-
-\strong{\code{left} is button or \code{right} is button}
-
-The button does not change the value of the group input. However, the input
-no longer triggers event when the text box is updated. Instead the value is
-updated when a button is clicked. Static addons are still applied to the
-group input value.
-
-\strong{\code{left} is a dropdown or \code{right} is a dropdown}
-
-The value of the group input does chance depending on the clicked dropdown
-menu item. The value of the input group is the concatenation of the
-dropdown input value, the value of the text input, and any static addons.}
-
-\item{right}{A character vector specifying static addons or
+\item{left, right}{A character vector specifying static addons or
 \code{\link[=buttonInput]{buttonInput()}} or \code{\link[=dropdown]{dropdown()}} elements specifying dynamic addons. Addons
 affect the reactive value of the group input, see the Details section below
 for more information.
@@ -152,90 +126,44 @@ input.
 the step amount. Use \code{updateTextInput()} to update a number input.
 }
 \details{
-\subsection{Getting started}{\if{html}{\out{<div class="r">}}\preformatted{textInput(
+\subsection{Getting started}{
+
+\if{html}{\out{<div class="sourceCode r">}}\preformatted{textInput(
   id = NULL,
   placeholder = "Placeholder ..."
 )
 }\if{html}{\out{</div>}}\if{html}{\out{
-<!--html_preserve-->
-}}
-\if{html}{\out{
-<div class="r-output">
-}}
-\if{html}{\out{
 <div class="yonder-textual">
-}}
-\if{html}{\out{
 <input class="form-control" type="text" placeholder="Placeholder ..." autocomplete="off"/>
-}}
-\if{html}{\out{
-<div class="valid-feedback">
-}}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
-<div class="invalid-feedback">
-}}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
+<div class="valid-feedback"></div>
+<div class="invalid-feedback"></div>
 </div>
 }}
-\if{html}{\out{
-<!--/html_preserve-->
-}}
-\if{html}{\out{<div class="r">}}\preformatted{numberInput(
+
+
+\if{html}{\out{<div class="sourceCode r">}}\preformatted{numberInput(
   id = NULL,
   placeholder = "Number"
 )
 }\if{html}{\out{</div>}}\if{html}{\out{
-<!--html_preserve-->
-}}
-\if{html}{\out{
-<div class="r-output">
-}}
-\if{html}{\out{
 <div class="yonder-textual">
-}}
-\if{html}{\out{
 <input class="form-control" type="number" placeholder="Number" autocomplete="off" step="1"/>
-}}
-\if{html}{\out{
-<div class="valid-feedback">
-}}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
-<div class="invalid-feedback">
-}}
-\if{html}{\out{
+<div class="valid-feedback"></div>
+<div class="invalid-feedback"></div>
 </div>
 }}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
-</div>
-}}
-\if{html}{\out{
-<!--/html_preserve-->
-}}
 
 }
 
-\subsection{Specify \code{min}, \code{max}, and \code{step}}{\preformatted{numberInput(
+\subsection{Specify \code{min}, \code{max}, and \code{step}}{
+
+\if{html}{\out{<div class="sourceCode">}}\preformatted{numberInput(
   id = NULL,
   min = 1,
   max = 10,
   step = 2
 )
-}
+}\if{html}{\out{</div>}}
 }
 }
 \seealso{
diff --git a/man/toast.Rd b/man/toast.Rd
index 24448e5d..7b9fe4ca 100644
--- a/man/toast.Rd
+++ b/man/toast.Rd
@@ -45,7 +45,9 @@ the \code{toast()} function. Display toasts with \code{showToast()} and remove a
 active toasts with \code{closeToast()}.
 }
 \section{Showing notifications}{
-\if{html}{\out{<div class="R">}}\preformatted{ui <- container(
+
+
+\if{html}{\out{<div class="sourceCode R">}}\preformatted{ui <- container(
   buttonInput(
     id = "show",
     label = "Show notification"
@@ -78,7 +80,9 @@ shinyApp(ui, server)
 
 
 When a notification is not automatically closed you may want to know
-when the notification is manually closed.\if{html}{\out{<div class="R">}}\preformatted{ui <- container(
+when the notification is manually closed.
+
+\if{html}{\out{<div class="sourceCode R">}}\preformatted{ui <- container(
   buttonInput(
     id = "show",
     label = "Show notification"