diff --git a/.github/dita-ot/favicon.svg b/.github/dita-ot/favicon.svg index 1b58a0e..a34abbd 100644 --- a/.github/dita-ot/favicon.svg +++ b/.github/dita-ot/favicon.svg @@ -1,16 +1,32 @@ - - - + + + + + + + + + + + + + + + + + + + diff --git a/.github/dita-ot/footer.xml b/.github/dita-ot/footer.xml index 48617ad..34491f4 100644 --- a/.github/dita-ot/footer.xml +++ b/.github/dita-ot/footer.xml @@ -6,37 +6,37 @@

diff --git a/.github/dita-ot/header.xml b/.github/dita-ot/header.xml index ec43ad1..a358728 100644 --- a/.github/dita-ot/header.xml +++ b/.github/dita-ot/header.xml @@ -1,432 +1,368 @@

diff --git a/.github/dita-ot/html.xml b/.github/dita-ot/html.xml index 2e6a02a..c78994a 100644 --- a/.github/dita-ot/html.xml +++ b/.github/dita-ot/html.xml @@ -29,6 +29,8 @@ + + diff --git a/.github/dita-ot/sidebar-footer.xml b/.github/dita-ot/sidebar-footer.xml index 5021e1c..4d144a7 100644 --- a/.github/dita-ot/sidebar-footer.xml +++ b/.github/dita-ot/sidebar-footer.xml @@ -1,7 +1,9 @@ -
+

- Specialization + Specialization

diff --git a/.github/dita-ot/theme.css b/.github/dita-ot/theme.css index 636479f..490f2e0 100644 --- a/.github/dita-ot/theme.css +++ b/.github/dita-ot/theme.css @@ -7,26 +7,17 @@ /* ↓ Additional custom overrides ↓ */ -/* Add Bootstrap’s own documentation example highlight */ - -.bd-example { - position: relative; - padding: 1rem; - margin: 1rem -0.75rem 0; - border: solid #dee2e6 1px; -} - .custom-popover { --bs-popover-max-width: 200px; - --bs-popover-border-color: var(--bs-primary); - --bs-popover-header-bg: var(--bs-primary); + --bs-popover-border-color: var(--bs-primary-border); + --bs-popover-header-bg: var(--bs-primary-bg); --bs-popover-header-color: var(--bs-white); --bs-popover-body-padding-x: 1rem; --bs-popover-body-padding-y: 0.5rem; } .custom-tooltip { - --bs-tooltip-bg: var(--bs-primary); + --bs-tooltip-bg: var(--bs-primary-bg); } /* Make all CSS themes scrollable */ diff --git a/.gitignore b/.gitignore index bdde85b..54b99e5 100644 --- a/.gitignore +++ b/.gitignore @@ -68,4 +68,5 @@ $RECYCLE.BIN/ node_modules -out \ No newline at end of file +out +.gstack/ diff --git a/README.md b/README.md index 511bf0b..127674e 100644 --- a/README.md +++ b/README.md @@ -27,7 +27,7 @@ The plug-in includes DTD handling for the following DITA Bootstrap components: - [Icons](https://dita-bootstrap.github.io/icons.html) (``) - [Grid layout](https://dita-bootstrap.github.io/grid.html) (``, ``) - [List groups](https://dita-bootstrap.github.io/list-group.html) (``) -- [Offcanvas](https://dita-bootstrap.github.io/offcanvas.html) (``) +- [Drawer](https://dita-bootstrap.github.io/drawer.html) (``) - [Pagination](https://dita-bootstrap.github.io/pagination.html) (``) - [Popovers](https://dita-bootstrap.github.io/popovers.html) (``) - [Tabs](https://dita-bootstrap.github.io/tabs.html) (``) @@ -57,8 +57,8 @@ Most DITA Bootstrap Specializations, as well as many base DITA elements, support [Apache 2.0](LICENSE) © 2026 Jason Fox -Within the sample documentation, where necessary, the texts describing the usage of each component have been copied directly from the official [Bootstrap 5.3 documentation][3], however DITA markup is used throughout the examples describing how to implement these components correctly using DITA specializations or `outputclass`. The text is therefore a derivative of "Bootstrap 5.3 docs" by Twitter, Inc. and the Bootstrap Authors, and used under CC BY 3.0. +Within the sample documentation, where necessary, the texts describing the usage of each component have been copied directly from the official [Bootstrap 6.0 documentation][3], however DITA markup is used throughout the examples describing how to implement these components correctly using DITA specializations or `outputclass`. The text is therefore a derivative of "Bootstrap 6.0 docs" by Twitter, Inc. and the Bootstrap Authors, and used under CC BY 3.0. [1]: http://www.dita-ot.org [2]: https://dita-bootstrap.github.io/ -[3]: https://getbootstrap.com/docs/5.3 +[3]: https://getbootstrap.com/docs/6.0 diff --git a/dtd/base/bootstrapCommonElements.mod b/dtd/base/bootstrapCommonElements.mod index c76da45..eb83b65 100644 --- a/dtd/base/bootstrapCommonElements.mod +++ b/dtd/base/bootstrapCommonElements.mod @@ -9,10 +9,39 @@ - + + + + + + + + + - + + @@ -29,22 +63,23 @@ - + - - - - - - - + + + + + + + @@ -63,9 +98,8 @@ > - + @@ -40,11 +40,11 @@ - - + + - + diff --git a/dtd/base/bootstrapDomain.mod b/dtd/base/bootstrapDomain.mod index 5730455..c76c701 100644 --- a/dtd/base/bootstrapDomain.mod +++ b/dtd/base/bootstrapDomain.mod @@ -13,12 +13,11 @@ + + + + + + - + - + @@ -86,14 +113,13 @@ > - - + @@ -154,24 +179,24 @@ - - - - + + + - + @@ -191,10 +216,9 @@ @@ -233,7 +257,7 @@ %univ-atts;"> @@ -245,8 +269,8 @@ - - + + @@ -257,7 +281,7 @@ - + diff --git a/lefthook.yml b/lefthook.yml index d5e4b64..b6692ee 100644 --- a/lefthook.yml +++ b/lefthook.yml @@ -9,5 +9,5 @@ pre-commit: commands: prettier: glob: '*.{css,dita*,json,md,xml,xsl,yml}' - run: prettier --write {staged_files} + run: npx prettier --write {staged_files} stage_fixed: true diff --git a/sample/accordion.dita b/sample/accordion.dita index 636c6d3..8496b82 100644 --- a/sample/accordion.dita +++ b/sample/accordion.dita @@ -1,10 +1,10 @@ @@ -26,21 +26,21 @@ -
+
How it works

The accordion uses collapse internally to make it collapsible. To render an accordion that’s expanded, add open="yes" to expand the relevant accordion-item .

-
+
Example

Click the accordions below to expand/collapse the accordion content.

- + Accordion Item #1 @@ -140,13 +140,13 @@ </bodydiv>
-
+
Flush

Set flush="yes" to remove the default background-color, some borders, and some rounded corners to render accordions edge-to-edge with their parent container.

- + Accordion Item #1 @@ -183,11 +183,11 @@
-
+
Always open

Set open="yes" to make accordion items stay open when another item is opened.

- + Accordion Item #1 diff --git a/sample/alerts.dita b/sample/alerts.dita index 8339cfa..e8caabf 100644 --- a/sample/alerts.dita +++ b/sample/alerts.dita @@ -2,10 +2,10 @@ @@ -26,85 +26,107 @@ -
- Example -

Alerts are available for any length of text, as well as an optional close button. For proper styling, use one - of the eight required contextual classes (e.g., set outputclass to - alert-success).

+
+ Default alert +

Alerts are available for any length of text, as well as an optional close button. Alerts are designed to be + used with theme colors, but have neutral fallback colors for when no theme color is applied.

- - A simple primary alert—check it out! - A simple secondary alert—check it out! - A simple success alert—check it out! - A simple danger alert—check it out! - A simple warning alert—check it out! - A simple info alert—check it out! - A simple light alert—check it out! - A simple dark alert—check it out! + + A simple alert — check it out!
Specialization - <alert color="primary"> - A simple primary alert—check it out! + <alert> + A simple alert — check it out! +</alert> +
+
+ <xmlatt>outputclass</xmlatt> + <section outputclass="alert"> + A simple alert — check it out! +</section> +
+ + +
+ Variants +

Use any of the eight variant theme classes for color mode adaptive, contextual styling (e.g., set + theme to success).

+
+ + A simple primary alert—check it out! + A simple secondary alert—check it out! + A simple success alert—check it out! + A simple danger alert—check it out! + A simple warning alert—check it out! + A simple info alert—check it out! + A simple accent alert—check it out! + A simple inverse alert—check it out! + + +
+ Specialization + <alert theme="primary-subtle-border"> + A simple primary alert — check it out! </alert> -<alert color="secondary"> - A simple secondary alert—check it out! +<alert theme="secondary-subtle-border"> + A simple secondary alert — check it out! </alert> -<alert color="success"> - A simple success alert—check it out! +<alert theme="success-subtle-border"> + A simple success alert — check it out! </alert> -<alert color="danger"> - A simple danger alert—check it out! +<alert theme="danger-subtle-border"> + A simple danger alert — check it out! </alert> -<alert color="warning"> - A simple warning alert—check it out! +<alert theme="warning-subtle-border"> + A simple warning alert — check it out! </alert> -<alert color="info"> - A simple info alert—check it out! +<alert theme="info-subtle-border"> + A simple info alert — check it out! </alert> -<alert color="light"> - A simple light alert—check it out! +<alert theme="accent-subtle-border"> + A simple accent alert — check it out! </alert> -<alert color="dark"> - A simple dark alert—check it out! +<alert theme="inverse-subtle-border"> + A simple inverse alert — check it out! </alert>
<xmlatt>outputclass</xmlatt> - <section outputclass="alert-primary"> - A simple primary alert—check it out! + <section outputclass="alert theme-primary fg-emphasis-primary"> + A simple primary alert — check it out! </section> -<section outputclass="alert-secondary"> - A simple secondary alert—check it out! +<section outputclass="alert theme-secondary fg-emphasis-secondary"> + A simple secondary alert — check it out! </section> -<section outputclass="alert-success"> - A simple success alert—check it out! +<section outputclass="alert theme-success fg-emphasis-success"> + A simple success alert — check it out! </section> -<section outputclass="alert-danger"> - A simple danger alert—check it out! +<section outputclass="alert theme-danger fg-emphasis-danger"> + A simple danger alert — check it out! </section> -<section outputclass="alert-warning"> - A simple warning alert—check it out! +<section outputclass="alert theme-warning fg-emphasis-warning"> + A simple warning alert — check it out! </section> -<section outputclass="alert-info"> - A simple info alert—check it out! +<section outputclass="alert theme-info fg-emphasis-info"> + A simple info alert — check it out! </section> -<section outputclass="alert-light"> - A simple light alert—check it out! +<section outputclass="alert theme-accent fg-emphasis-accent"> + A simple accent alert — check it out! </section> -<section outputclass="alert-dark"> - A simple dark alert—check it out! +<section outputclass="alert theme-inverse fg-emphasis-inverse"> + A simple inverse alert — check it out! </section>
-
+
Additional content

Alerts can also contain additional HTML elements like headings, paragraphs, icons and links.

- - + + <icon outputclass="bi-emoji-smile" padding="e2"/>Well done!

Aww yeah, you successfully read this important alert message. This example text with a link is going to run a bit longer so that you can see how spacing within an alert works @@ -115,7 +137,7 @@

Specialization - <alert color="success"> + <alert theme="success-contrast" outputclass="vstack"> <title><icon outputclass="bi-emoji-smile" padding="e2"/>Well done!</title> <p> Aww yeah, you successfully read this important alert message. This example text with a @@ -129,7 +151,7 @@
<xmlatt>outputclass</xmlatt> - <section outputclass="alert alert-success"> + <section outputclass="alert theme-success theme-contrast vstack"> <title><i outputclass="bi bi-emoji-smile pe-2"/>Well done!</title> <p> Aww yeah, you successfully read this important alert message. This example text with a @@ -143,13 +165,42 @@
-
+
+ With icons +

Similarly, you can use flexbox utilities and Bootstrap Icons to create alerts with icons. Depending on your + icons and content, you may want to add more utilities or custom styles.

+
+ + +
+ An example alert with an icon +
+ + + +
+ Specialization + <alert theme="primary-subtle-border"> + <div> + <icon outputclass="bi-exclamation-triangle-fill flex-shrink-0" padding="e2"/>An example alert with an icon + </div> +</alert> +
+
+ <xmlatt>outputclass</xmlatt> + <section outputclass="alert theme-primary d-flex align-items-center"> + <ph outputclass="bi bi-exclamation-triangle-fill flex-shrink-0 pe-2"/>An example alert with an icon +</section> +
+ + +
Notes

DITA note elements are displayed as alerts according to the type attribute. With the exception type="othertype", an icon is added if type is present.

-
+ This is just a note. Notice this piece of information. This note will speed you on your way. @@ -161,7 +212,7 @@ You can't do what this note says. You may hurt yourself! This is something other than a normal note. -
+ <note type="note"> This is just a note. </note> @@ -195,54 +246,54 @@ <note type="other" othertype="Another note"> This is something other than a normal note. </note> -

The default colors can be overridden by using a color attribute or an The default colors can be overridden by using a theme attribute or an outputclass.

- - This is a primary note. - This is a secondary note. - This is light note. - This is dark note. - + + This is a high contrast primary note. + This is a high contrast secondary note. + This is a high contrast accent note. + This is a high contrast inverse note. +
Specialization - <note color="primary"> - This is a primary note. + <note theme="primary-contrast"> + This is a high contrast primary note. </note> -<note color="secondary"> - This is a secondary note. +<note theme="secondary-contrast"> + This is a high contrast secondary note. </note> -<note color="light"> - This is light note. +<note theme="accent-contrast"> + This is a high contrast accent note. </note> -<note color="dark"> - This is dark note. +<note theme="inverse-contrast"> + This is a high contrast inverse note. </note>
<xmlatt>outputclass</xmlatt> - <note type="note" outputclass="alert-primary"> - This is a primary note.</note> -<note type="note" outputclass="alert-secondary"> - This is a secondary note.</note> -<note type="note" outputclass="alert-light"> - This is light note. + <note type="note" outputclass="theme-primary theme-contrast"> + This is a high contrast primary note.</note> +<note type="note" outputclass="theme-secondary theme-contrast"> + This is a high contrast secondary note.</note> +<note type="note" outputclass="theme-accent theme-contrast"> + This is a high contrast accent note. </note> -<note type="note" outputclass="alert-dark"> - This is dark note. +<note type="note" outputclass="theme-inverse theme-contrast"> + This is a high contrast inverse note. </note>

Use an additional icon attribute or otherprops to alter the default icon.

- + This note has a search icon. This note uses a styled smile emoji. - +
Specialization diff --git a/sample/badge.dita b/sample/badge.dita index 29330c6..6e3ff4d 100644 --- a/sample/badge.dita +++ b/sample/badge.dita @@ -1,10 +1,10 @@ @@ -23,12 +23,40 @@ -
- Example -

Badges scale to match the size of the immediate parent element by using relative font sizing and - em units. As of v5, badges no longer have focus or hover styles for links.

+
+ Examples +

Badges are tiny, static display components used for adding context to other elements. They can be used as + part of navigation, buttons, and more to provide a counter or label. Badges scale to match the size of the + immediate parent element by using relative font sizing and em units.

+

Badges come in three variants: solid (default), subtle, and outline.

- + +

+ New + New + New +

+ + +
+ Specialization + <badge theme="primary">New</badge> +<badge theme="primary-subtle">New</badge> +<badge theme="primary-outline">New</badge> +
+
+ <xmlatt>outputclass</xmlatt> + <ph outputclass="badge theme-primary">New</ph> +<ph outputclass="badge badge-subtle theme-primary">New</ph> +<ph outputclass="badge badge-outline theme-primary">New</ph> +
+ + +
+ Headings +

Badges adapt to the font-size of the parent element.

+
+

Example heading New

Example heading New

@@ -46,51 +74,105 @@
<xmlatt>outputclass</xmlatt> - <title>Example Heading <ph outputclass="bg-secondary">New</ph></title> -<p>Example Text <ph outputclass="bg-secondary">New</ph></p> + <title>Example Heading <ph outputclass="badge">New</ph></title> +<p>Example Text <ph outputclass="badge">New</ph></p>
-
- Background colors -

Set a background-color with contrasting foreground color with Bootstrap’s text-bg-{color} helpers. Previously it was required to manually pair your choice of outputclass text-{color} and bg-{color} utilities for styling, which you still may use if you prefer.

+
+ Variants +

Use the contextual theme attribute to apply a semantic theme color to badges, in any of the + solid, subtle, or outline styles.

- +

- Primary - Secondary - Success - Danger - Warning - Info - Light - Dark + Primary + Secondary + Success + Danger + Warning + Info + Accent + Inverse

- +

+ Primary + Secondary + Success + Danger + Warning + Info + Accent + Inverse +

+

+ Primary + Secondary + Success + Danger + Warning + Info + Accent + Inverse +

+
Specialization - <badge>Primary</badge> -<badge color="secondary">Secondary</badge> -<badge color="success">Success</badge> -<badge color="danger">Danger</badge> -<badge color="warning">Warning</badge> -<badge color="info">Info</badge> -<badge color="light">Light</badge> -<badge color="dark">Dark</badge> + <badge theme="primary">Primary</badge> +<badge theme="secondary">Secondary</badge> +<badge theme="success">Success</badge> +<badge theme="danger">Danger</badge> +<badge theme="warning">Warning</badge> +<badge theme="info">Info</badge> +<badge theme="accent">Accent</badge> +<badge theme="inverse">Inverse</badge> + +<badge theme="primary-subtle">Primary</badge> +<badge theme="secondary-subtle">Secondary</badge> +<badge theme="success-subtle">Success</badge> +<badge theme="danger-subtle">Danger</badge> +<badge theme="warning-subtle">Warning</badge> +<badge theme="info-subtle">Info</badge> +<badge theme="accent-subtle">Accent</badge> +<badge theme="inverse-subtle">Inverse</badge> + +<badge theme="primary-outline">Primary</badge> +<badge theme="secondary-outline">Secondary</badge> +<badge theme="success-outline">Success</badge> +<badge theme="danger-outline">Danger</badge> +<badge theme="warning-outline">Warning</badge> +<badge theme="info-outline">Info</badge> +<badge theme="accent-outline">Accent</badge> +<badge theme="inverse-outline">Inverse</badge>
<xmlatt>outputclass</xmlatt> - <ph outputclass="badge text-bg-primary">Primary</ph> -<ph outputclass="badge text-bg-secondary">Secondary</ph> -<ph outputclass="badge text-bg-success">Success</ph> -<ph outputclass="badge text-bg-danger">Danger</ph> -<ph outputclass="badge text-bg-warning">Warning</ph> -<ph outputclass="badge text-bg-info">Info</ph> -<ph outputclass="badge text-bg-light">Light</ph> -<ph outputclass="badge text-bg-dark">Dark</ph> + <ph outputclass="badge theme-primary">Primary</ph> +<ph outputclass="badge theme-secondary">Secondary</ph> +<ph outputclass="badge theme-success">Success</ph> +<ph outputclass="badge theme-danger">Danger</ph> +<ph outputclass="badge theme-warning">Warning</ph> +<ph outputclass="badge theme-info">Info</ph> +<ph outputclass="badge theme-accent">Accent</ph> +<ph outputclass="badge theme-inverse">Inverse</ph> + +<ph outputclass="badge badge-subtle theme-primary">Primary</ph> +<ph outputclass="badge badge-subtle theme-secondary">Secondary</ph> +<ph outputclass="badge badge-subtle theme-success">Success</ph> +<ph outputclass="badge badge-subtle theme-danger">Danger</ph> +<ph outputclass="badge badge-subtle theme-warning">Warning</ph> +<ph outputclass="badge badge-subtle theme-info">Info</ph> +<ph outputclass="badge badge-subtle theme-accent">Accent</ph> +<ph outputclass="badge badge-subtle theme-inverse">Inverse</ph> + +<ph outputclass="badge badge-outline theme-primary">Primary</ph> +<ph outputclass="badge badge-outline theme-secondary">Secondary</ph> +<ph outputclass="badge badge-outline theme-success">Success</ph> +<ph outputclass="badge badge-outline theme-danger">Danger</ph> +<ph outputclass="badge badge-outline theme-warning">Warning</ph> +<ph outputclass="badge badge-outline theme-info">Info</ph> +<ph outputclass="badge badge-outline theme-accent">Accent</ph> +<ph outputclass="badge badge-outline theme-inverse">Inverse</ph>
diff --git a/sample/bootstrap-extension.dita b/sample/bootstrap-extension.dita index 67efbd3..a1264c3 100644 --- a/sample/bootstrap-extension.dita +++ b/sample/bootstrap-extension.dita @@ -33,7 +33,7 @@ -
+
Installing the <term>DITA Bootstrap Extension</term> plug-in

Use the dita command to add the DITA Bootstrap Extension plug-in to your DITA Open Toolkit installation:

diff --git a/sample/bootstrap-table.dita b/sample/bootstrap-table.dita index 35ff72a..b77e954 100644 --- a/sample/bootstrap-table.dita +++ b/sample/bootstrap-table.dita @@ -2,10 +2,10 @@ @@ -33,7 +33,7 @@ If you just want to style DITA tables with the standard Bootstrap table styles, you don’t need a separate plug-in. See for details on the output classes that the DITA Bootstrap plug-in supports. -
+
Installing the <term>DITA Bootstrap Table</term> plug-in

Use the dita command to add the DITA Bootstrap Table plug-in to your DITA Open Toolkit installation:

@@ -41,7 +41,7 @@ >install org.dita-bootstrap.table
-
+
Search and Filtering

Add table otherprops="search" to filter the results based on a search term.

@@ -52,7 +52,7 @@ <table otherprops="search"> ...etc </table> -
+
Pagination

Add table otherprops="pagination" to add a pagination footer to a large table.

@@ -63,7 +63,7 @@ <table otherprops="pagination"> ...etc </table> -
+
Sorting

Add table otherprops="sortable" to allow each column to be sorted dynamically.

diff --git a/sample/borders.dita b/sample/borders.dita index 97cb0a2..3606fac 100644 --- a/sample/borders.dita +++ b/sample/borders.dita @@ -2,11 +2,11 @@ @@ -32,7 +32,7 @@ Borders

Use border utilities to add or remove an element’s borders. Choose from all borders or one at a time.

- +
 border    border-top  @@ -40,30 +40,30 @@  border-bottom   border-start
- + <ph outputclass="border">...</ph> <ph outputclass="border-top">...</ph> <ph outputclass="border-end">...</ph> <ph outputclass="border-bottom">...</ph> <ph outputclass="border-start">...</ph> -
+
Border Specialization

The border and rounded attributes provide a semantic way to add borders and rounded corners.

- -
+ +
Bordered Section

This section has a border.

-
+

This div has a border and rounded corners.

- + @@ -76,15 +76,15 @@
Specialization - <section border="yes" padding="2"> + <section border="1" padding="2"> ... </section> -<div border="yes" rounded="yes" padding="2" margin="2"> +<div border="1" rounded="yes" padding="2" margin="2"> ... </div> -<carousel border="yes" rounded="yes" margin="2" width="50"> +<carousel border="1" rounded="yes" margin="2" width="50"> <carousel-item> <image href="..."/> </carousel-item> @@ -108,15 +108,16 @@ </ul>
-
+
Border Styling

The border attribute also accepts numeric values 1-5 for width. The rounded attribute supports values 0-5, circle and pill. - The bordercolor attribute can be used to set the color of the border.

+ The -border theme suffix (e.g. theme="primary-border") can be used to set + the color of the border.

- +
Width 1 Width 2 @@ -124,7 +125,7 @@ Width 4 Width 5
- +
Specialization @@ -144,21 +145,21 @@
- +
- Primary - Primary subtle - Success - Danger + Primary + Primary subtle + Success + Danger
- +
Specialization - <ph bordercolor="primary">Primary</ph> -<ph bordercolor="primary-subtle">Primary subtle</ph> -<ph bordercolor="success">Success</ph> -<ph bordercolor="danger">Danger</ph> + <ph theme="primary-border">Primary</ph> +<ph theme="primary-subtle-border">Primary subtle</ph> +<ph theme="success-border">Success</ph> +<ph theme="danger-border">Danger</ph>
<xmlatt>outputclass</xmlatt> @@ -169,25 +170,25 @@
- +
- Rounded 0 - Rounded 1 - Rounded 2 - Rounded 3 - Rounded 4 - Rounded 5 + Rounded 0 + Rounded 1 + Rounded 2 + Rounded 3 + Rounded 4 + Rounded 5
- +
Specialization - <ph border="yes" rounded="0">Rounded 0</ph> -<ph border="yes" rounded="1">Rounded 1</ph> -<ph border="yes" rounded="2">Rounded 2</ph> -<ph border="yes" rounded="3">Rounded 3</ph> -<ph border="yes" rounded="4">Rounded 4</ph> -<ph border="yes" rounded="5">Rounded 5</ph> + <ph border="1" rounded="0">Rounded 0</ph> +<ph border="1" rounded="1">Rounded 1</ph> +<ph border="1" rounded="2">Rounded 2</ph> +<ph border="1" rounded="3">Rounded 3</ph> +<ph border="1" rounded="4">Rounded 4</ph> +<ph border="1" rounded="5">Rounded 5</ph>
<xmlatt>outputclass</xmlatt> @@ -200,22 +201,22 @@
- +
- Circle - Pill + Circle + Pill
- +
Specialization - <ph border="yes" rounded="circle" bordercolor="info">Circle</ph> -<ph border="yes" rounded="pill" bordercolor="dark">Pill</ph> + <ph border="1" rounded="circle" theme="info-border">Circle</ph> +<ph border="1" rounded="pill" theme="warning-border">Pill</ph>
<xmlatt>outputclass</xmlatt> <ph outputclass="border rounded-circle border-info">Circle</ph> -<ph outputclass="border rounded-pill border-dark">Pill</ph> +<ph outputclass="border rounded-pill border-warning">Pill</ph>
@@ -224,7 +225,7 @@

For DITA elements which support the frame attribute, such as lines and codeblock, additional frame borders are automatically added as shown:

- +

// Simple C++ program to display "Hello World" @@ -252,7 +253,7 @@ and summer’s lease hath all too short a date: - + Animal Gestation @@ -279,9 +280,9 @@ and summer’s lease hath all too short a date:

- + <codeblock frame="sides">...</codeblock> -<lines frame="topbot" outputclass="bg-secondary-subtle p-3 border rounded">...</lines> +<lines frame="topbot" outputclass="...">...</lines> <table frame="all">...</table> diff --git a/sample/breadcrumb.dita b/sample/breadcrumb.dita index dcfdf47..0c13bd7 100644 --- a/sample/breadcrumb.dita +++ b/sample/breadcrumb.dita @@ -2,10 +2,10 @@ @@ -25,7 +25,7 @@ -

+
Adding breadcrumbs

Breadcrumbs are not included by default. You can add a breadcrumb component to each page by setting the parameter --args.breadcrumbs= @@ -35,7 +35,7 @@ --format= \ --args.breadcrumbs=

-
+
Dividers

Dividers are automatically added via CSS. They can be changed by setting the parameter --bootstrap.breadcrumb.divider.

diff --git a/sample/button-group.dita b/sample/button-group.dita index ec2af67..99ef9ab 100644 --- a/sample/button-group.dita +++ b/sample/button-group.dita @@ -1,10 +1,10 @@ @@ -23,98 +23,98 @@ -
+
Basic example

Wrap a series of buttons with xref outputclass="btn-*" in a div outputclass="btn-group"

- + - +
Specialization <button-group> - <button href="#">Left</button> - <button href="#">Middle</button> - <button href="#">Right</button> + <button theme="primary" href="#">Left</button> + <button theme="primary" href="#">Middle</button> + <button theme="primary" href="#">Right</button> </button-group>
<xmlatt>outputclass</xmlatt> <div outputclass="btn-group"> - <xref outputclass="btn-primary" href="#">Left</xref> - <xref outputclass="btn-primary" href="#">Middle</xref> - <xref outputclass="btn-primary" href="#">Right</xref> + <xref outputclass="btn theme-primary" href="#">Left</xref> + <xref outputclass="btn theme-primary" href="#">Middle</xref> + <xref outputclass="btn theme-primary" href="#">Right</xref> </div>
-
- Mixed styles +
+ Theme variants
- + - - - + + + - +
Specialization <button-group> - <button color="danger" href="#">Left</button> - <button color="warning" href="#">Middle</button> - <button color="success" href="#">Right</button> + <button theme="danger" href="#">Left</button> + <button theme="warning" href="#">Middle</button> + <button theme="success" href="#">Right</button> </button-group>
<xmlatt>outputclass</xmlatt> <div outputclass="btn-group"> - <xref outputclass="btn-danger" href="#">Left</xref> - <xref outputclass="btn-warning" href="#">Middle</xref> - <xref outputclass="btn-success" href="#">Right</xref> + <xref outputclass="btn theme-danger" href="#">Left</xref> + <xref outputclass="btn theme-warning" href="#">Middle</xref> + <xref outputclass="btn theme-success" href="#">Right</xref> </div>
-
- Outlined styles +
+ Style variants
- + - - - + + + - +
Specialization <button-group> - <button outline="yes" href="#">Left</button> - <button outline="yes" href="#">Middle</button> - <button outline="yes" href="#">Right</button> + <button theme="primary-outline" href="#">Left</button> + <button theme="primary-outline" href="#">Middle</button> + <button theme="primary-outline" href="#">Right</button> </button-group>
<xmlatt>outputclass</xmlatt> <div outputclass="btn-group"> - <xref outputclass="btn-outline-primary" href="#">Left</xref> - <xref outputclass="btn-outline-primary" href="#">Middle</xref> - <xref outputclass="btn-outline-primary" href="#">Right</xref> + <xref outputclass="btn-outline theme-primary" href="#">Left</xref> + <xref outputclass="btn-outline theme-primary" href="#">Middle</xref> + <xref outputclass="btn-outline theme-primary" href="#">Right</xref> </div>
-
+
Button toolbar

Combine sets of button groups into button toolbars for more complex components.

- + @@ -123,32 +123,32 @@ - - - + + + - + - +
Specialization <button-toolbar> <button-group outputclass="me-2"> - <button href="#">1</button> - <button href="#">2</button> - <button href="#">3</button> - <button href="#">4</button> + <button theme="primary" href="#">1</button> + <button theme="primary" href="#">2</button> + <button theme="primary" href="#">3</button> + <button theme="primary" href="#">4</button> </button-group> <button-group outputclass="me-2"> - <button color="secondary" href="#">5</button> - <button color="secondary" href="#">6</button> - <button color="secondary" href="#">7</button> + <button theme="secondary" href="#">5</button> + <button theme="secondary" href="#">6</button> + <button theme="secondary" href="#">7</button> </button-group> <button-group outputclass="me-2"> - <button color="info" href="#">8</button> + <button theme="info" href="#">8</button> </button-group> </button-toolbar>
@@ -156,48 +156,48 @@ <xmlatt>outputclass</xmlatt> <div outputclass="btn-toolbar"> <div outputclass="btn-group me-2"> - <xref outputclass="btn-primary" href="#">1</xref> - <xref outputclass="btn-primary" href="#">2</xref> - <xref outputclass="btn-primary" href="#">3</xref> - <xref outputclass="btn-primary" href="#">4</xref> + <xref outputclass="btn theme-primary" href="#">1</xref> + <xref outputclass="btn theme-primary" href="#">2</xref> + <xref outputclass="btn theme-primary" href="#">3</xref> + <xref outputclass="btn theme-primary" href="#">4</xref> </div> <div outputclass="btn-group me-2"> - <xref outputclass="btn-secondary" href="#">5</xref> - <xref outputclass="btn-secondary" href="#">6</xref> - <xref outputclass="btn-secondary" href="#">7</xref> + <xref outputclass="btn theme-secondary" href="#">5</xref> + <xref outputclass="btn theme-secondary" href="#">6</xref> + <xref outputclass="btn theme-secondary" href="#">7</xref> </div> <div outputclass="btn-group me-2"> - <xref outputclass="btn-info" href="#">8</xref> + <xref outputclass="btn theme-info" href="#">8</xref> </div> </div>
-
+
Vertical variation

Make a set of buttons appear vertically stacked rather than horizontally.

- + - +
Specialization <button-group vertical="yes"> - <button href="#">Top</button> - <button href="#">Middle</button> - <button href="#">Bottom</button> + <button theme="primary" href="#">Top</button> + <button theme="primary" href="#">Middle</button> + <button theme="primary" href="#">Bottom</button> </button-group>
<xmlatt>outputclass</xmlatt> <div outputclass="btn-group-vertical"> - <xref outputclass="btn-primary" href="#">Top</xref> - <xref outputclass="btn-primary" href="#">Middle</xref> - <xref outputclass="btn-primary" href="#">Bottom</xref> + <xref outputclass="btn theme-primary" href="#">Top</xref> + <xref outputclass="btn theme-primary" href="#">Middle</xref> + <xref outputclass="btn theme-primary" href="#">Bottom</xref> </div>
diff --git a/sample/buttons.dita b/sample/buttons.dita index acad795..7f34532 100644 --- a/sample/buttons.dita +++ b/sample/buttons.dita @@ -1,10 +1,10 @@ @@ -24,125 +24,396 @@ -
+
+ Base class +

Buttons have a standard btn class that sets up basic styles such as padding and content + alignment, along with fallback visual styles for basic accessibility. Change this class to another button + class to apply different visual styles for a specific button variant and theme.

+
+ + + + +
+ Specialization + <button>Base class</button> +
+
+ <xmlatt>outputclass</xmlatt> + <ph outputclass="btn">Base class</ph> +
+ + +
Example

Bootstrap includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control.

- - - - - - - - - + + + + + + + + + + + + +
+ Specialization + <button href="#" theme="primary">Primary</button> +<button href="#" theme="secondary">Secondary</button> +<button href="#" theme="success">Success</button> +<button href="#" theme="danger">Danger</button> +<button href="#" theme="warning">Warning</button> +<button href="#" theme="info">Info</button> +<button href="#" theme="accent">Accent</button> +<button href="#" theme="inverse">Inverse</button> +
+
+ <xmlatt>outputclass</xmlatt> + <xref href="#" outputclass="btn theme-primary">Primary</xref> +<xref href="#" outputclass="btn theme-secondary">Secondary</xref> +<xref href="#" outputclass="btn theme-success">Success</xref> +<xref href="#" outputclass="btn theme-danger">Danger</xref> +<xref href="#" outputclass="btn theme-warning">Warning</xref> +<xref href="#" outputclass="btn theme-info">Info</xref> +<xref href="#" outputclass="btn theme-accent">Accent</xref> +<xref href="#" outputclass="btn theme-inverse">Inverse</xref> +
+ + +
+ Variants +

Compare the solid (default), outline, subtle, and text button styles at once, combined with theme + colors.

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Specialization + <button href="#" theme="primary">Primary</button> +<button href="#" theme="primary-outline">Primary</button> +<button href="#" theme="primary-subtle">Primary</button> +<button href="#" theme="primary-text">Primary</button> +<button href="#" theme="secondary">Secondary</button> +<button href="#" theme="secondary-outline">Secondary</button> +<button href="#" theme="secondary-subtle">Secondary</button> +<button href="#" theme="secondary-text">Secondary</button> +<button href="#" theme="success">Success</button> +<button href="#" theme="success-outline">Success</button> +<button href="#" theme="success-subtle">Success</button> +<button href="#" theme="success-text">Success</button> +<button href="#" theme="danger">Danger</button> +<button href="#" theme="danger-outline">Danger</button> +<button href="#" theme="danger-subtle">Danger</button> +<button href="#" theme="danger-text">Danger</button> +<button href="#" theme="warning">Warning</button> +<button href="#" theme="warning-outline">Warning</button> +<button href="#" theme="warning-subtle">Warning</button> +<button href="#" theme="warning-text">Warning</button> +<button href="#" theme="info">Info</button> +<button href="#" theme="info-outline">Info</button> +<button href="#" theme="info-subtle">Info</button> +<button href="#" theme="info-text">Info</button> +<button href="#" theme="accent">Accent</button> +<button href="#" theme="accent-outline">Accent</button> +<button href="#" theme="accent-subtle">Accent</button> +<button href="#" theme="accent-text">Accent</button> +<button href="#" theme="inverse">Inverse</button> +<button href="#" theme="inverse-outline">Inverse</button> +<button href="#" theme="inverse-subtle">Inverse</button> +<button href="#" theme="inverse-text">Inverse</button> +
+
+ <xmlatt>outputclass</xmlatt> + <xref href="#" outputclass="btn-solid theme-primary">Primary</xref> +<xref href="#" outputclass="btn-outline theme-primary">Primary</xref> +<xref href="#" outputclass="btn-subtle theme-primary">Primary</xref> +<xref href="#" outputclass="btn-text theme-primary">Primary</xref> +<xref href="#" outputclass="btn-solid theme-secondary">Secondary</xref> +<xref href="#" outputclass="btn-outline theme-secondary">Secondary</xref> +<xref href="#" outputclass="btn-subtle theme-secondary">Secondary</xref> +<xref href="#" outputclass="btn-text theme-secondary">Secondary</xref> +<xref href="#" outputclass="btn-solid theme-success">Success</xref> +<xref href="#" outputclass="btn-outline theme-success">Success</xref> +<xref href="#" outputclass="btn-subtle theme-success">Success</xref> +<xref href="#" outputclass="btn-text theme-success">Success</xref> +<xref href="#" outputclass="btn-solid theme-danger">Danger</xref> +<xref href="#" outputclass="btn-outline theme-danger">Danger</xref> +<xref href="#" outputclass="btn-subtle theme-danger">Danger</xref> +<xref href="#" outputclass="btn-text theme-danger">Danger</xref> +<xref href="#" outputclass="btn-solid theme-warning">Warning</xref> +<xref href="#" outputclass="btn-outline theme-warning">Warning</xref> +<xref href="#" outputclass="btn-subtle theme-warning">Warning</xref> +<xref href="#" outputclass="btn-text theme-warning">Warning</xref> +<xref href="#" outputclass="btn-solid theme-info">Info</xref> +<xref href="#" outputclass="btn-outline theme-info">Info</xref> +<xref href="#" outputclass="btn-subtle theme-info">Info</xref> +<xref href="#" outputclass="btn-text theme-info">Info</xref> +<xref href="#" outputclass="btn-solid theme-accent">Accent</xref> +<xref href="#" outputclass="btn-outline theme-accent">Accent</xref> +<xref href="#" outputclass="btn-subtle theme-accent">Accent</xref> +<xref href="#" outputclass="btn-text theme-accent">Accent</xref> +<xref href="#" outputclass="btn-solid theme-inverse">Inverse</xref> +<xref href="#" outputclass="btn-outline theme-inverse">Inverse</xref> +<xref href="#" outputclass="btn-subtle theme-inverse">Inverse</xref> +<xref href="#" outputclass="btn-text theme-inverse">Inverse</xref> +
+ +
+ Styled buttons +

Add visual depth to solid buttons with gradients and shadows using the btn-styled modifier + class. This provides a more three-dimensional appearance that can be customized further with CSS + variables.

+
+ + + + + + + + + + -
- Specialization - <button href="#">Primary</button> -<button href="#" color="secondary">Secondary</button> -<button href="#" color="success">Success</button> -<button href="#" color="danger">Danger</button> -<button href="#" color="warning">Warning</button> -<button href="#" color="info">Info</button> -<button href="#" color="light">Light</button> -<button href="#" color="dark">Dark</button> -
-
- <xmlatt>outputclass</xmlatt> - <xref href="#" outputclass="btn-primary">Primary</xref> -<xref href="#" outputclass="btn-secondary">Secondary</xref> -<xref href="#" outputclass="btn-success">Success</xref> -<xref href="#" outputclass="btn-danger">Danger</xref> -<xref href="#" outputclass="btn-warning">Warning</xref> -<xref href="#" outputclass="btn-info">Info</xref> -<xref href="#" outputclass="btn-light">Light</xref> -<xref href="#" outputclass="btn-dark">Dark</xref> -
- +
+ Specialization + <button href="#" theme="primary-styled">Primary</button> +<button href="#" theme="secondary-styled">Secondary</button> +<button href="#" theme="success-styled">Success</button> +<button href="#" theme="danger-styled">Danger</button> +<button href="#" theme="warning-styled">Warning</button> +<button href="#" theme="info-styled">Info</button> +<button href="#" theme="accent-styled">Accent</button> +<button href="#" theme="inverse-styled">Inverse</button> +
+
+ <xmlatt>outputclass</xmlatt> + <xref href="#" outputclass="btn-solid btn-styled theme-primary">Primary</xref> +<xref href="#" outputclass="btn-solid btn-styled theme-secondary">Secondary</xref> +<xref href="#" outputclass="btn-solid btn-styled theme-success">Success</xref> +<xref href="#" outputclass="btn-solid btn-styled theme-danger">Danger</xref> +<xref href="#" outputclass="btn-solid btn-styled theme-warning">Warning</xref> +<xref href="#" outputclass="btn-solid btn-styled theme-info">Info</xref> +<xref href="#" outputclass="btn-solid btn-styled theme-accent">Accent</xref> +<xref href="#" outputclass="btn-solid btn-styled theme-inverse">Inverse</xref> +
+ -
+
Outline buttons

In need of a button, but not the hefty background colors they bring? Replace the default modifier classes with the outputclass and a value of btn-outline-* to remove all background images and colors on any button.

- - - - - - - - - - + + + + + + + + + +
Specialization - <button href="#" outline="yes">Primary</button> -<button href="#" color="secondary" outline="yes">Secondary</button> -<button href="#" color="success" outline="yes">Success</button> -<button href="#" color="danger" outline="yes">Danger</button> -<button href="#" color="warning" outline="yes">Warning</button> -<button href="#" color="info" outline="yes">Info</button> -<button href="#" color="light" outline="yes">Light</button> -<button href="#" color="dark" outline="yes">Dark</button> + <button href="#" theme="primary-outline">Primary</button> +<button href="#" theme="secondary-outline">Secondary</button> +<button href="#" theme="success-outline">Success</button> +<button href="#" theme="danger-outline">Danger</button> +<button href="#" theme="warning-outline">Warning</button> +<button href="#" theme="info-outline">Info</button> +<button href="#" theme="accent-outline">Accent</button> +<button href="#" theme="inverse-outline">Inverse</button>
<xmlatt>outputclass</xmlatt> - <xref href="#" outputclass="btn-outline-primary">Primary</xref> -<xref href="#" outputclass="btn-outline-secondary">Secondary</xref> -<xref href="#" outputclass="btn-outline-success">Success</xref> -<xref href="#" outputclass="btn-outline-danger">Danger</xref> -<xref href="#" outputclass="btn-outline-warning">Warning</xref> -<xref href="#" outputclass="btn-outline-info">Info</xref> -<xref href="#" outputclass="btn-outline-light">Light</xref> -<xref href="#" outputclass="btn-outline-dark">Dark</xref> + <xref href="#" outputclass="btn btn-outline theme-primary">Primary</xref> +<xref href="#" outputclass="btn-outline theme-secondary">Secondary</xref> +<xref href="#" outputclass="btn-outline theme-success">Success</xref> +<xref href="#" outputclass="btn-outline theme-danger">Danger</xref> +<xref href="#" outputclass="btn-outline theme-warning">Warning</xref> +<xref href="#" outputclass="btn-outline theme-info">Info</xref> +<xref href="#" outputclass="btn-outline theme-accent">Accent</xref> +<xref href="#" outputclass="btn-outline theme-inverse">Inverse</xref>
-
+
Sizing -

Fancy larger or smaller buttons? Use size="large" or - size="small" for additional sizes.

+

Fancy larger or smaller buttons? Use size="large", size="small", or + size="xs" for additional sizes.

- + - - + +
Specialization <button href="#" size="large">Large button</button> -<button href="#" color="secondary" size="large">Large button</button> +<button href="#" theme="secondary" size="large">Large button</button>
<xmlatt>outputclass</xmlatt> - <xref href="#" outputclass="btn-primary btn-lg">Large button</xref> -<xref href="#" outputclass="btn-secondary btn-lg">Large button</xref> + <xref href="#" outputclass="btn theme-primary btn-lg">Large button</xref> +<xref href="#" outputclass="btn theme-secondary btn-lg">Large button</xref>
- + - - + +
Specialization <button href="#" size="small">Small button</button> -<button href="#" color="secondary" size="small">Small button</button> +<button href="#" theme="secondary" size="small">Small button</button> +
+
+ <xmlatt>outputclass</xmlatt> + <xref href="#" outputclass="btn theme-primary btn-sm">Small button</xref> +<xref href="#" outputclass="btn theme-secondary btn-sm">Small button</xref> +
+ + + + + + + + +
+ Specialization + <button href="#" size="xs">Extra small button</button> +<button href="#" theme="secondary" size="xs">Extra small button</button>
<xmlatt>outputclass</xmlatt> - <xref href="#" outputclass="btn-primary btn-sm">Small button</xref> -<xref href="#" outputclass="btn-secondary btn-sm">Small button</xref> + <xref href="#" outputclass="btn theme-primary btn-xs">Extra small button</xref> +<xref href="#" outputclass="btn theme-secondary btn-xs">Extra small button</xref>
diff --git a/sample/card.dita b/sample/card.dita index 45c387e..caf0af5 100644 --- a/sample/card.dita +++ b/sample/card.dita @@ -1,10 +1,10 @@ @@ -24,30 +24,30 @@ -
+
About

A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options. If you’re familiar with Bootstrap 3, cards replace Bootstrap 4.0’s panels, wells, and thumbnails. Similar functionality to those components is available as modifier classes for cards.

-
+
Example

Cards are built with as little markup and styles as possible, but still manage to deliver a ton of control and customization. Built with flexbox, they offer easy alignment and mix well with other Bootstrap components. They have no margin by default, so use - spacing + spacing utilities as needed.

Below is an example of a basic card with mixed content and a default width. Card widths are easily customized with Bootstrap’s various sizing options.

- + Card Title @@ -71,17 +71,17 @@ <title outputclass="h5">Card Title</title> <image outputclass="card-img-top" href="..." /> <p>Some quick example text to build on the card title and make up the bulk of the card’s content.</p> - <xref outputclass="btn-primary" href="#">Go Somewhere</xref> + <xref outputclass="btn-solid theme-primary" href="#">Go Somewhere</xref> </section>
-
+
Titles, text, and links

Links are added and placed next to each other by altering the outputclass and adding card-link to an xref tag.

Subtitles are used by adding a div element.

- + Card Title
Card Subtitle
@@ -112,21 +112,17 @@ </section>
-
+
Images

The first image within a card places an image to the top of the card

- - - - - -

Some quick example text to build on the card title and make up the bulk of the card’s content.

- - - + + + +

Some quick example text to build on the card title and make up the bulk of the card’s content.

+
@@ -144,13 +140,13 @@ </section>
-
+ - + Special title treatment Featured @@ -176,26 +172,24 @@ <div outputclass="card-header">Featured</div> <title outputclass="h5">Special title treatment</title> <p>With supporting text below as a natural lead-in to additional content.</p> - <xref href="#" outputclass="btn-primary">Go somewhere</xref> + <xref href="#" outputclass="btn-solid theme-primary">Go somewhere</xref> </section>
-
+
Card Colors -

A card can be colorized by adding a color attribute. This +

A card can be colorized by adding a theme attribute. This applies a contextual background color.

- - - Card Title - + + + Success Card

Some quick example text to build on the card title and make up the bulk of the card’s content.

 - <card color="success"> - <title>Card Title</title> - <image href="..." /> + <card theme="success"> + <card-header>Card Title</card-header> <p>Some quick example text to build on the card title and make up the bulk of the card’s content.</p> <button href="#">Go Somewhere</button> </card> diff --git a/sample/carousel.dita b/sample/carousel.dita index 6a58aa5..3fe9f78 100644 --- a/sample/carousel.dita +++ b/sample/carousel.dita @@ -1,10 +1,10 @@ @@ -39,7 +39,7 @@ they’re not explicitly required. Add and customize as you see fit.

Here is an example with slides

- + @@ -51,11 +51,11 @@ - +
Specialization - <carousel> + <carousel> <carousel-item> <image href="..." /> </carousel-item> @@ -66,10 +66,10 @@ <image href="..." /> </carousel-item> </carousel> -
-
- <xmlatt>outputclass</xmlatt> - <ol outputclass="carousel"> +
+
+ <xmlatt>outputclass</xmlatt> + <ol outputclass="carousel"> <li> <image href="..." /> </li> @@ -80,14 +80,14 @@ <image href="..." /> </li> </ol> -
- +
+
Indicators

Set indicators="yes" to add indicators to the carousel, alongside the previous/next controls. The indicators let users jump directly to a particular slide.

- + @@ -99,11 +99,11 @@ - +
Specialization - <carousel indicators="yes"> + <carousel indicators="yes"> <carousel-item> <image href="..." /> </carousel-item> @@ -114,10 +114,10 @@ <image href="..." /> </carousel-item> </carousel> -
-
- <xmlatt>outputclass</xmlatt> - <ol outputclass="carousel" otherprops="indicators(true)"> +
+
+ <xmlatt>outputclass</xmlatt> + <ol outputclass="carousel" otherprops="indicators(true)"> <li> <image href="..." /> </li> @@ -128,13 +128,13 @@ <image href="..." /> </li> </ol> -
- +
+
With captions

Add captions by using fig elements

- + @@ -155,7 +155,7 @@ - +
Specialization @@ -210,13 +210,13 @@ >grid-row element to add them within a carousel. Additional structure and spacing can be added by using the grid-col element.

- + - Is it for fear to wet a widow’s eye + Is it for fear to wet a widow’s eye That thou consum’st thyself in single life? Ah, if thou issueless shalt hap to die, The world will wail thee like a makeless wife; @@ -227,7 +227,7 @@ The world will wail thee like a makeless wife; - The world will be thy widow and still weep + The world will be thy widow and still weep That thou no form of thee hast left behind, When every private widow well may keep, By children’s eyes, her husband’s shape in mind. @@ -238,7 +238,7 @@ By children’s eyes, her husband’s shape in mind. - Look what an unthrift in the world doth spend + Look what an unthrift in the world doth spend Shifts but his place, for still the world enjoys it; But beauty’s waste hath in the world an end, And, kept unused, the user so destroys it. @@ -249,7 +249,7 @@ And, kept unused, the user so destroys it. - No love toward others in that bosom sits + No love toward others in that bosom sits That on himself such murd’rous shame commits. Sonnet 9 - William Shakespeare @@ -257,7 +257,7 @@ And, kept unused, the user so destroys it. - +
Specialization @@ -322,7 +322,7 @@ And, kept unused, the user so destroys it. Multiple slides side-by-side

Add multiple image elements within each carousel-item

- + @@ -340,7 +340,7 @@ And, kept unused, the user so destroys it. - +
Specialization @@ -390,7 +390,7 @@ And, kept unused, the user so destroys it. >carousel-item and include a grid-row element for title texts.

- + @@ -398,13 +398,13 @@ And, kept unused, the user so destroys it. -

First Image

+

First Image

 -

Second Image

+

Second Image

 -

Third Image

+

Third Image

 @@ -414,13 +414,13 @@ And, kept unused, the user so destroys it. -

Fourth Image

+

Fourth Image

 -

Fifth Image

+

Fifth Image

 -

Sixth Image

+

Sixth Image

 @@ -430,58 +430,44 @@ And, kept unused, the user so destroys it. -

Seventh Image

+

Seventh Image

 -

Eighth Image

+

Eighth Image

 -

Ninth Image

+

Ninth Image

 - +
Specialization - <carousel> + <carousel fade="yes"> <carousel-item> <image href="..." /> + </carousel-item> + <carousel-item> <image href="..." /> + </carousel-item> + <carousel-item> <image href="..." /> - <grid-row deliveryTarget="html"> - <grid-col colspan="4"> - <p outputclass="text-center">...</p> - </grid-col> - <grid-col colspan="4"> - <p outputclass="text-center">...</p> - </grid-col> - <grid-col colspan="4"> - <p outputclass="text-center">...</p> - </grid-col> - </grid-row> </carousel-item> - ... </carousel>
<xmlatt>outputclass</xmlatt> - <ol outputclass="carousel"> + <ol outputclass="carousel-fade"> <li> <image href="..." /> - <image href="..." /> - <image href="..." /> </li> <li> <image href="..." /> - <image href="..." /> - <image href="..." /> </li> <li> <image href="..." /> - <image href="..." /> - <image href="..." /> </li> </ol>
@@ -493,7 +479,7 @@ And, kept unused, the user so destroys it. div outputclass="bg-body" or some custom CSS to the carousel items for proper crossfading.

- + @@ -505,11 +491,11 @@ And, kept unused, the user so destroys it. - +
Specialization - <carousel fade="yes"> + <carousel autoplay="no"> <carousel-item> <image href="..." /> </carousel-item> @@ -523,7 +509,7 @@ And, kept unused, the user so destroys it.
<xmlatt>outputclass</xmlatt> - <ol outputclass="carousel-fade"> + <ol outputclass="carousel" otherprops="autoplay(false)"> <li> <image href="..." /> </li> @@ -544,7 +530,7 @@ And, kept unused, the user so destroys it.

When autoplay="no" is set, the carousel won’t automatically start to cycle on page load. Instead, it will only start after the first user interaction.

- + @@ -556,32 +542,32 @@ And, kept unused, the user so destroys it. - +
Specialization - <carousel autoplay="no"> - <carousel-item> + <carousel> + <carousel-item interval="2000"> <image href="..." /> </carousel-item> - <carousel-item> + <carousel-item interval="1000"> <image href="..." /> </carousel-item> - <carousel-item> + <carousel-item interval="3000"> <image href="..." /> </carousel-item> </carousel>
<xmlatt>outputclass</xmlatt> - <ol outputclass="carousel" otherprops="autoplay(false)"> - <li> + <ol outputclass="carousel"> + <li otherprops="interval(2000)"> <image href="..." /> </li> - <li> + <li otherprops="interval(1000)"> <image href="..." /> </li> - <li> + <li otherprops="interval(3000)"> <image href="..." /> </li> </ol> @@ -594,7 +580,7 @@ And, kept unused, the user so destroys it. >carousel to change the amount of time to delay between automatically cycling to the next item.

- + @@ -603,19 +589,35 @@ And, kept unused, the user so destroys it. - +
Specialization otherprops="interval(2000)" - <carousel interval="2000"> - ... + <carousel touch="no"> + <carousel-item> + <image href="..." /> + </carousel-item> + <carousel-item> + <image href="..." /> + </carousel-item> + <carousel-item> + <image href="..." /> + </carousel-item> </carousel>
<xmlatt>outputclass</xmlatt> - <ol outputclass="carousel" otherprops="interval(2000)"> - ... + <ol outputclass="carousel" otherprops="touch(false)"> + <li> + <image href="..." /> + </li> + <li> + <image href="..." /> + </li> + <li> + <image href="..." /> + </li> </ol>
@@ -625,7 +627,7 @@ And, kept unused, the user so destroys it. >carousel-item to change the amount of time to delay between automatically cycling to the next item.

- + @@ -637,7 +639,7 @@ And, kept unused, the user so destroys it. - +
Specialization @@ -673,7 +675,7 @@ And, kept unused, the user so destroys it.

Carousels support swiping left/right on touchscreen devices to move between slides. Add touch="no" to disable this option.

- + @@ -685,7 +687,7 @@ And, kept unused, the user so destroys it. - +
Specialization diff --git a/sample/collapse.dita b/sample/collapse.dita index 1860f2e..f27446e 100644 --- a/sample/collapse.dita +++ b/sample/collapse.dita @@ -18,22 +18,22 @@ -
+
How it works

The collapse JavaScript plugin is used to show and hide content. Buttons or anchors are used as triggers that are mapped to specific elements you toggle. Collapsing an element will animate the height from its current value to 0. Given how CSS handles animations, you cannot use padding on a .collapse element. Instead, use the class as an independent wrapping element.

-
+
Example

Below is a collapsed example that is displayed when the button is clicked. Add props="collapse-toggle" to an xref element to associate a button to a collapse

- +

- +

@@ -46,7 +46,7 @@
Specialization <p> - <button props="collapse-toggle" href="#collapse1"> + <button theme="primary" props="collapse-toggle" href="#collapse1"> Toggle Collapse </button> </p> @@ -59,7 +59,7 @@
<xmlatt>outputclass</xmlatt> <p> - <xref outputclass="btn-primary" props="collapse-toggle" href="#collapse1"> + <xref outputclass="btn-solid theme-primary" props="collapse-toggle" href="#collapse1"> Toggle Collapse </xref> </p> @@ -70,15 +70,15 @@ </bodydiv>
-
+
Horizontal

The collapse plugin also supports horizontal collapsing. Add outputclass="collapse-horizontal" to transition the width instead of height and set an otherprops="style(width: ...) on the immediate child div element.

- +

- +

@@ -102,7 +102,7 @@
<xmlatt>outputclass</xmlatt> <p> - <xref outputclass="btn-primary" props="collapse-toggle" href="#collapse2">Toggle Width Collapse</xref> + <xref outputclass="btn-solid theme-primary" props="collapse-toggle" href="#collapse2">Toggle Width Collapse</xref> </p> <bodydiv outputclass="collapse-horizontal" id="collapse2" otherprops="style(min-height: 120px;)"> <div outputclass="card card-body" otherprops="style(width: 300px;)"> diff --git a/sample/color.dita b/sample/color.dita index 20a50ae..3cec798 100644 --- a/sample/color.dita +++ b/sample/color.dita @@ -3,7 +3,7 @@ Color Convey meaning through color with a handful of color utility classes. Includes support for - styling text and background colors via the semantic color attribute. + styling text and background colors via the semantic theme attribute. @@ -12,78 +12,78 @@ CSS outputclass - color + theme -
+
Colors

Colorize text and backgrounds with color utilities. The color attribute provides a semantic way to apply standard Bootstrap color themes.

+ >theme attribute provides a semantic way to apply standard Bootstrap color themes.

- -
.text-bg-primary
-
.text-bg-secondary
-
.text-bg-success
-
.text-bg-danger
-
.text-bg-warning
-
.text-bg-info
-
.text-bg-light
-
.text-bg-dark
- + +
.text-bg-primary
+
.text-bg-secondary
+
.text-bg-success
+
.text-bg-danger
+
.text-bg-warning
+
.text-bg-info
+
.text-bg-light
+
.text-bg-inverse
+
Specialization - <div color="primary">.text-bg-primary</div> -<div color="secondary">.text-bg-secondary</div> -<div color="success">.text-bg-success</div> -<div color="danger">.text-bg-danger</div> -<div color="warning">.text-bg-warning</div> -<div color="info">.text-bg-info</div> -<div color="light">.text-bg-light</div> -<div color="dark">.text-bg-dark</div> + <div theme="primary-contrast">bg-primary</div> +<div theme="secondary-contrast">bg-secondary</div> +<div theme="success-contrast">bg-success</div> +<div theme="danger-contrast">bg-danger</div> +<div theme="warning-contrast">bg-warning</div> +<div theme="info-contrast">bg-info</div> +<div theme="accent-contrast">bg-accent</div> +<div theme="inverse-contrast">bg-inverse</div>
<xmlatt>outputclass</xmlatt> - <div outputclass="text-bg-primary">.text-bg-primary</div> -<div outputclass="text-bg-secondary">.text-bg-secondary</div> -<div outputclass="text-bg-success">.text-bg-success</div> -<div outputclass="text-bg-danger">.text-bg-danger</div> -<div outputclass="text-bg-warning">.text-bg-warning</div> -<div outputclass="text-bg-info">.text-bg-info</div> -<div outputclass="text-bg-light">.text-bg-light</div> -<div outputclass="text-bg-dark">.text-bg-dark</div> + <div outputclass="bg-primary fg-contrast-primary">bg-primary</div> +<div outputclass="bg-secondary fg-contrast-secondary">bg-secondary</div> +<div outputclass="bg-success fg-contrast-success">bg-success</div> +<div outputclass="bg-danger fg-contrast-danger">bg-danger</div> +<div outputclass="bg-warning fg-contrast-warning">bg-warning</div> +<div outputclass="bg-info fg-contrast-info" >bg-info</div> +<div outputclass="bg-accent fg-contrast-accent">bg-accent</div> +<div outputclass="bg-inverse fg-contrast-inverse">bg-inverse</div>
-
+
Base DITA Elements

Decoration attributes can be applied to many base DITA elements to add background color and contrasting text.

- -
+ +
Section Decoration

This section has a primary color background.

-
+

This div has a success color background.

- 
+      
         This pre has a warning color background.
       

 
-      
+      
         This is a long quote with a danger color background.
       
 
-      
+      

           
@@ -92,17 +92,17 @@
             
-            
+            
               Elephant (African and Asian)
               19-22 months
             
-            
+            
               Giraffe
               15 months
             
             
               Rhinoceros
-              14-16 months
+              14-16 months
             
             
               Hippopotamus
@@ -112,7 +112,7 @@
         
       

         
             
           
           

 
-      
+      
         This is a note with a primary color theme.
       
     
@@ -120,24 +120,24 @@
     
       

         Specialization
-        <section color="primary">
+        <section theme="primary-contrast">
   <title>Section Decoration</title>
   <p>This section has a primary color background.</p>
 </section>
 
-<div color="success" padding="3">
+<div theme="success-contrast" padding="3">
   <p>This div has a success color background.</p>
 </div>
 
-<pre color="warning">
+<pre theme="warning-contrast">
   This pre has a warning color background.
 </pre>
 
-<lq color="danger" padding="1">
+<lq theme="danger-contrast" padding="1">
   This is a long quote with a danger color background.
 </lq>
 
-<table color="primary" padding="1" width="100">
+<table theme="primary" padding="1" width="100">
   <tgroup cols="2">
     <thead>
       <row>
@@ -146,15 +146,15 @@
       </row>
     </thead>
     <tbody>
-      <row color="info">
+      <row theme="info">
         ...
       </row>
-      <row color="success">
+      <row theme="success">
         ...
       </row>
       <row>
         <entry>...</entry>
-        <entry color="danger">...</entry>
+        <entry theme="danger">...</entry>
       </row>
       <row>
         ...
@@ -163,30 +163,30 @@
   </tgroup>
 </table>
 
-<note color="primary">
+<note theme="primary-contrast">
   This is a note with a primary color theme.
 </note>
       

       

         <xmlatt>outputclass</xmlatt>
-        <section outputclass="text-bg-primary">
+        <section outputclass="bg-primary fg-contrast-primary">
   <title>Section Decoration</title>
   <p>This section has a primary color background.</p>
 </section>
 
-<div outputclass="text-bg-success p-3">
+<div outputclass="bg-success fg-contrast-success p-3">
   <p>This div has a success color background.</p>
 </div>
 
-<pre outputclass="text-bg-warning">
+<pre outputclass="bg-warning fg-contrast-warning">
   This pre has a warning color background.
 </pre>
 
-<lq outputclass="text-bg-danger p-1">
+<lq outputclass="bg-danger fg-contrast-danger p-1">
   ...
 </lq>
 
-<table outputclass="table-primary p-1 w-100">
+<table outputclass="theme-primary p-1 w-100">
   <tgroup cols="2">
     <thead>
       <row>
@@ -195,15 +195,15 @@
       </row>
     </thead>
     <tbody>
-      <row outputclass="table-info">
+      <row outputclass="theme-info">
        ...
       </row>
-      <row outputclass="table-success">
+      <row outputclass="theme-success">
        ...
       </row>
       <row>
         <entry>...</entry>
-        <entry outputclass="table-danger">...</entry>
+        <entry outputclass="theme-danger">...</entry>
       </row>
       <row>
         <entry>...</entry>
@@ -213,38 +213,38 @@
   </tgroup>
 </table>
 
-<note color="primary">
+<note outputclass="theme-primary theme-contrast">
   ...
 </note>
       

     
 
-    

+    

       Specialized Elements
-      
Many specialized components also support the color attribute for consistent theming.

+      
Many specialized components also support the theme attribute for consistent theming.

     

 
-    
+    
 
-      
-      
-        Card Title
+      
+      
+        Success Card
         
Some quick example text to build on the card title and make up the bulk of the card’s content.

       
 
-      
+      
         
           Accordion Item #1
           
This is the first item's accordion body.

         
       
 
-      
+      
         
  • An item
    • 
         
  • A second item
    • 
           
 
-      
+      
         
           
         
@@ -260,26 +260,26 @@
     
       
    
         Specialization
-        <thumbnail href="..." color="warning"/>
+        <thumbnail href="..." theme="warning"/>
 
-<card color="success" width="50">
-  <title>Card Title</title>
+<card theme="success" width="50">
+  <card-header>Card Title</card-header>
   <p>Some quick example text to build on the card title and make up the bulk of the card’s content.</p>
 </card>
 
-<accordion color="info">
+<accordion theme="info">
   <accordion-item open="yes">
     <title>Accordion Item #1</title>
     <p>This is the first item's accordion body.</p>
   </accordion-item>
 </accordion>
 
-<list-group width="50" color="danger">
+<list-group width="50" theme="danger">
   <li>An item</li>
   <li>A second item</li>
 </list-group>
 
-<carousel color="dark" width="50" indicators="yes">
+<carousel theme="inverse-muted" width="50" indicators="yes">
   <carousel-item>
     <image href="..."/>
   </carousel-item>
@@ -295,43 +295,43 @@
         <xmlatt>outputclass</xmlatt>
         <img src="..." class="img-thumbnail bg-warning"/>
 
-<section outputclass="card text-bg-success w-50">
+<section outputclass="card theme-success w-50">
   ...
 </section>
 
-<bodydiv outputclass="accordion accordion-info">
+<bodydiv outputclass="accordion theme-info">
   ...
 </bodydiv>
 
-<ul outputclass="list-group list-group-item-danger w-50">
+<ul outputclass="list-group theme-danger w-50">
   ...
 </ul>
 
-<ul outputclass="carousel carousel-dark w-50">
+<ul outputclass="carousel theme-inverse theme-muted w-50">
   ...
 </ul>
       
    
         
 
-    
    
+    
    
       Text Color
       
    For text-only colorization, the outputclass attribute remains the primary method.
    
     
    
 
-    
-      
    .text-primary
    
-      
    .text-secondary
    
-      
    .text-success
    
-      
    .text-danger
    
-      
    .text-warning
    
-      
    .text-info
    
-        
-
-    <p outputclass="text-primary">.text-primary</p>
-<p outputclass="text-secondary">.text-secondary</p>
-<p outputclass="text-success">.text-success</p>
-<p outputclass="text-danger">.text-danger</p>
-<p outputclass="text-warning bg-dark">.text-warning</p>
-<p outputclass="text-info bg-dark">.text-info</p>
+    
+      
    fg-primary
    
+      
    fg-secondary
    
+      
    fg-success
    
+      
    fg-danger
    
+      
    fg-warning
    
+      
    fg-info
    
+        
+
+    <p outputclass="fg-primary">fg-primary</p>
+<p outputclass="fg-secondary">fg-secondary</p>
+<p outputclass="fg-success">fg-success</p>
+<p outputclass="fg-danger">fg-danger</p>
+<p outputclass="fg-warning">fg-warning</p>
+<p outputclass="fg-info">fg-info</p>
   
 
diff --git a/sample/component.dita b/sample/component.dita
index 9c405b4..0cf2581 100644
--- a/sample/component.dita
+++ b/sample/component.dita
@@ -2,10 +2,10 @@
 
 
 
diff --git a/sample/containers.dita b/sample/containers.dita
index dd1278a..fd9cf20 100644
--- a/sample/containers.dita
+++ b/sample/containers.dita
@@ -2,10 +2,10 @@
 
 
 
@@ -22,7 +22,7 @@
     
   
   
-    
    
+    
    
       How they work
       
    Containers are the most basic layout element in Bootstrap and are required when using the default grid system.
         Containers are used to contain, pad, and (sometimes) center the content within them. While containers can be
@@ -33,7 +33,7 @@
           , which sets a max-width at each responsive breakpoint
         
         
  • 
-          , which is width: 100% until the specified breakpoint
+          , which is width: 100% until the specified breakpoint
         
    • 
         
  • 
           , which is width: 100% at all breakpoints
@@ -93,7 +93,7 @@
           
           
             
-              
+              
             
             
               100%
@@ -106,7 +106,7 @@
           
           
             
-              
+              
             
             
               100%
@@ -121,7 +121,7 @@
           
           
             
-              
+              
             
             
               100%
@@ -138,7 +138,7 @@
           
           
             
-              
+              
             
             
               100%
@@ -157,7 +157,7 @@
           
           
             
-              
+              
             
             
               100%
@@ -202,7 +202,7 @@
         
       
     
-    The DITA Bootstrap plug-in uses the responsive  by default to fill
+    The DITA Bootstrap plug-in uses the responsive  by default to fill
       the viewport width with page content up to the extra extra large breakpoint. At 1400px or wider, content width is
       constrained to 1320px to ensure lines remain readable.
     
    To use different size, pass the desired value to the dita command via the
diff --git a/sample/dark-mode.dita b/sample/dark-mode.dita
index bb4fa4b..e4ec5fe 100644
--- a/sample/dark-mode.dita
+++ b/sample/dark-mode.dita
@@ -2,10 +2,10 @@
 
 
 
@@ -24,7 +24,7 @@
     
   
   
-    
    
+    
    
       Example
       
    To add a color mode toggler to the menu bar, add a series of button elements with the attributes data-bs-theme="light" or 
       Getting Started
       
-      
+      
     
     
   
@@ -19,7 +19,7 @@
     
       Layout
       
-      
+      
     
     
     
@@ -30,7 +30,7 @@
     
       Content
       
-      
+      
     
     
     
@@ -41,7 +41,7 @@
     
       Components
       
-      
+      
     
     
     
@@ -52,8 +52,8 @@
     
     
     
+    
     
-    
     
     
     
@@ -64,18 +64,19 @@
     
       Utilities
       
-      
+      
     
     
     
     
     
+    
   
   
     
       Extend
       
-      
+      
     
     
       
diff --git a/sample/drawer.dita b/sample/drawer.dita
new file mode 100644
index 0000000..5dac517
--- /dev/null
+++ b/sample/drawer.dita
@@ -0,0 +1,205 @@
+
+
+
+
+  Drawer
+  Build hidden sidebars into your project for navigation, shopping carts, and more with a few classes and
+    Bootstrap’s JavaScript plugin.
+  
+    
+      
+        Drawer
+        CSS
+          outputclass
+        
+        section
+        xref
+        props
+      
+    
+  
+  
+    
    
+      How it works
+      
    Drawer is a sidebar component that can be toggled via JavaScript to appear from the left, right, or bottom
+        edge of the viewport. Buttons or anchors are used as triggers that are attached to specific elements you toggle,
+        and data attributes are used to invoke Bootstrap’s JavaScript.
    
+      
      
+        
    • Drawer shares some of the same JavaScript code as modals. Conceptually, they are quite similar, but they
+          are separate plugins.
      • 
+        
    • Similarly, some source Sass variables for drawer’s styles and dimensions are inherited from the modal’s
+          variables.
      • 
+        
    • When shown, drawer includes a default backdrop that can be clicked to hide the drawer.
      • 
+        
    • Similar to modals, only one drawer can be shown at a time.
      • 
+      
    
+      
    Heads up! Given how CSS handles animations, you cannot use margin or translate in a Bootstrap drawer
+        element. Instead, use the class as an independent wrapping element.
    
+    
    
+    
    
+      Drawer components
+      
    Below is a drawer example that is displayed when the button is clicked. Add
+          props="drawer-toggle" to an xref element to associate a button to
+        a drawer
    
+    
    
+    
+            
+      
+        Drawer
+        
    Content for the drawer goes here. You can place just about any section elements here.
    
+          
+        
+    
+      
    
+        Specialization
+          <button props="drawer-toggle" href="#drawer1">
+  Click here
+</button>
+<drawer id="drawer1" position="start">
+  <title>Drawer</title>
+  <p>
+    Content for the drawer goes here. You can place just about any section elements here.
+  </p>
+</drawer>
+        
    
+         
    
+          <xmlatt>outputclass</xmlatt>
+          <xref outputclass="btn-solid theme-primary" props="drawer-toggle" href="#drawer1">
+  Click here
+</xref>
+<section outputclass="drawer-start" id="drawer1">
+  <title>Drawer</title>
+  <p>
+    Content for the drawer goes here. You can place just about any section elements here.
+  </p>
+</section>
+        
    
+          
+    
    
+      Placement
+      
    There’s no default placement for drawer components, so you must add one of the modifier outputclasses
+        below
    
+      
      
+        
    • Setting position="start" or outputclass="drawer-start" places drawer on the left of the
+          viewport (shown above)
      • 
+        
    • Setting position="end" or outputclass="drawer-end" places drawer on the right of the
+          viewport
      • 
+        
    • Setting position="bottom" or outputclass="drawer-bottom" places drawer on the bottom of
+          the viewport
      • 
+        
    • Setting position="top" or outputclass="drawer-top" places drawer on the top of
+          the viewport
      • 
+      
    
+    
    
+    
+            
+      
+        Drawer
+        
    Content for the drawer goes here. You can place just about any section elements here.
    
+          
+        
+    
+      
    
+        Specialization
+          <drawer position="end">
+  ...etc
+</drawer>
+        
    
+         
    
+          <xmlatt>outputclass</xmlatt>
+          <section outputclass="drawer-end" id="drawer2">
+  ...etc
+</section>
+        
    
+          
+    
+            
+      
+        Drawer
+        
    Content for the drawer goes here. You can place just about any section elements here.
    
+          
+        
+    
+      
    
+        Specialization
+          <drawer position="bottom">
+  ...etc
+</drawer>
+        
    
+         
    
+          <xmlatt>outputclass</xmlatt>
+          <section outputclass="drawer-bottom" id="drawer3">
+  ...etc
+</section>
+        
    
+          
+    
    
+      Responsive
+      
    Responsive drawer outputclasses hide content outside the viewport from a specified breakpoint and down. Above that breakpoint, the contents within will behave as usual. For example, outputclass="drawer-lg" hides content in a drawer below the lg breakpoint, but shows the content above the lg breakpoint.
    
+    
    
+    
+      Resize your browser to show the responsive drawer toggle.
+            
+      
+        Drawer
+        
    This is content within an outputclass="drawer-lg".
    
+          
+        
+    
    Responsive drawer classes are available across for each breakpoint.
    
+    
      
+      
    • outputclass="drawer"
      • 
+      
    • outputclass="drawer-sm"
      • 
+      
    • outputclass="drawer-md"
      • 
+      
    • outputclass="drawer-lg"
      • 
+      
    • outputclass="drawer-xl"
      • 
+      
    • outputclass="drawer-xxl"
      • 
+    
    
+    
+      
    
+        Specialization
+          <note theme="info" outputclass="d-none lg:d-block">
+  Resize your browser to show the responsive drawer toggle.
+</note>
+<button outputclass="lg:d-none" props="drawer-toggle" href="#drawer4">
+  Toggle drawer
+</button>
+<drawer outputclass="drawer-lg" id="drawer4">
+  <title>Drawer</title>
+  <p>
+    This is content within an <xmlatt>outputclass="drawer-lg"</xmlatt>.
+  </p>
+</drawer>
+        
    
+         
    
+          <xmlatt>outputclass</xmlatt>
+          <note outputclass="d-none lg:d-block">
+  Resize your browser to show the responsive drawer toggle.
+</note>
+<xref outputclass="btn-solid theme-primary lg:d-none" props="drawer-toggle" href="#drawer4">
+  Toggle drawer
+</xref>
+<section outputclass="drawer-lg" id="drawer4">
+  <title>Drawer</title>
+  <p>
+    This is content within an <xmlatt>outputclass="drawer-lg"</xmlatt>.
+  </p>
+</section>
+        
    
+          
+  
+
diff --git a/sample/extension-points.dita b/sample/extension-points.dita
index b98c5c1..496d1d8 100644
--- a/sample/extension-points.dita
+++ b/sample/extension-points.dita
@@ -2,10 +2,10 @@
 
 
 
@@ -26,7 +26,7 @@
     
   
   
-    
    
+    
    
       Extending Bootstrap
       
    Bootstrap is designed to be extensible. Additional CSS and JavaScript libraries can be added to the generated
         HTML pages to allow for new Bootstrap components and extend Bootstrap classes. Similarly, the DITA
diff --git a/sample/figures.dita b/sample/figures.dita
index 9e6eac4..75f3d51 100644
--- a/sample/figures.dita
+++ b/sample/figures.dita
@@ -6,7 +6,7 @@
    markup is used throughout the examples describing how to implement these
    components correctly using outputclass.
 
-   This work, is a derivative of "Bootstrap 5.3 docs" by Twitter, Inc.
+   This work, is a derivative of "Bootstrap 6.0 docs" by Twitter, Inc.
    and the Bootstrap Authors, and used under CC BY 3.0. See the accompanying LICENSE
    file for applicable licenses.-->
 
@@ -32,42 +32,42 @@
     
   
   
-    
    
+    
    
       Example
       
    By default figure elements are styled as shown: 
    
     
    
-    
+    
       
         A caption for the image.
         
       
-    
+    
     <fig>
   <title>A caption for the image.</title>
   <image href="..."/>
 </fig>
-    
    
+    
    
       Aligning text
       
    The figure’s caption can be aligned using the Bootstrap
         text utilities.
    
     
    
-    
+    
       
         A caption for the image.
         
       
-    
+    
     <fig>
   <title outputclass="text-end">A caption for the image.</title>
   <image href="..."/>
 </fig>
 
-    
    
+    
    
       Adding borders
       
    Use the DITA frame attribute to add
         borders to a fig.
    
     
    
-    
+    
       
         All Borders
         frame="all"
@@ -92,7 +92,7 @@
         Bottom Border Only
         frame="bottom"
       
-    
+    
     <fig frame="all">
   ...
 </fig>
diff --git a/sample/grid.dita b/sample/grid.dita
index 3b005bf..49b75ad 100644
--- a/sample/grid.dita
+++ b/sample/grid.dita
@@ -2,10 +2,10 @@
 
 
 
@@ -25,14 +25,14 @@
     
   
   
-    
    
+    
    
       Example
       
    Bootstrap’s grid system uses a series of containers, rows, and columns to layout and align content. It’s built
         with flexbox and is fully responsive. Below is an example and an in-depth explanation for how the grid system
         comes together. The grid-col element supports breakpoint and
           colspan attributes to define the column width at different screen sizes.
    
     
    
-    
+    
       
         
           
    One of three columns
    
@@ -63,25 +63,25 @@
       
    
         <xmlatt>outputclass</xmlatt>
         <bodydiv outputclass="row">
-  <bodydiv outputclass="col-sm-3">
+  <bodydiv outputclass="sm:col-3">
     <p>One of three columns</p>
   </bodydiv>
-  <bodydiv outputclass="col-sm-3">
+  <bodydiv outputclass="sm:col-3">
     <p>One of three columns</p>
   </bodydiv>
-  <bodydiv outputclass="col-sm-3">
+  <bodydiv outputclass="sm:col-3">
     <p>One of three columns</p>
   </bodydiv>
 </bodydiv>
       
    
     
-    
    
+    
    
       Equal-width
       
    For example, here are two grid layouts that apply to every device and viewport, from xs to
           xxl. Add any number of unit-less classes for each breakpoint you need and every column will
         be the same width.
    
     
    
-    
+    
       
         
           
    One of two columns
    
diff --git a/sample/icons.dita b/sample/icons.dita
index dc4c52f..b71492e 100644
--- a/sample/icons.dita
+++ b/sample/icons.dita
@@ -19,7 +19,7 @@
     
   
   
-    
    
+    
    
       Bootstrap Icons
       
    
         Bootstrap Icons is a growing
@@ -28,7 +28,7 @@
         >Link to the default Bootstrap Icons CDN set is included by default. 
    
     
    
 
-    
    
+    
    
       Example
       
    Icon fonts with classes for every icon are included in Bootstrap Icons. Include the icon web fonts in your page
         via CSS, then reference the class names as needed in your DITA (e.g., icon
@@ -36,12 +36,12 @@
       
    Use a style attribute and alter the CSS font-size and color to change the icon
         appearance.
    
     
    
-    
+    
       
    
         
         
       
    
-        
+    
     
       
    
         Specialization
@@ -55,156 +55,166 @@
         
    
           
   
    Icons placed within an xref element are colorized appropriately:
    
-  
+  
     
    
-      
+      
          Primary link
       
     
    
     
    
-      
+      
          Secondary link
       
     
    
     
    
-      
+      
          Success link
       
     
    
     
    
-      
+      
          Danger link
       
     
    
     
    
-      
+      
          Warning link
       
     
    
     
    
-      
+      
          Info link
       
     
    
     
    
-      
+      
          Light link
       
     
    
     
    
-      
+      
          Dark link
       
     
    
-      
+  
     
       
    
         Specialization
-          <xref color="primary" href="#">
+          <xref theme="primary-contrast" href="#">
   <icon outputclass="bi-link"/> Primary link
 </xref>
-<xref color="secondary" href="#">
+<xref theme="secondary-contrast" href="#">
   <icon outputclass="bi-link"/> Secondary link
 </xref>
-<xref color="success" href="#">
+<xref theme="success-contrast" href="#">
   <icon outputclass="bi-link"/> Success link
 </xref>
-<xref color="danger" href="#">
+<xref theme="danger-contrast" href="#">
   <icon outputclass="bi-link"/> Danger link
 </xref>
-<xref color="warning" href="#">
+<xref theme="warning-contrast" href="#">
   <icon outputclass="bi-link"/> Warning link
 </xref>
-<xref color="info" href="#">
+<xref theme="info-contrast" href="#">
   <icon outputclass="bi-link"/> Info link
 </xref>
-<xref color="light" href="#">
-  <icon outputclass="bi-link"/> Light link
+<xref theme="accent-contrast" href="#">
+  <icon outputclass="bi-link"/> Accent link
 </xref>
-<xref color="dark" href="#">
-  <icon outputclass="bi-link"/> Dark link
+<xref theme="inverse-contrast" href="#">
+  <icon outputclass="bi-link"/> Inverse link
 </xref>
         
    
          
    
           <xmlatt>outputclass</xmlatt>
-          <xref outputclass="link-primary" href="#">
+          <xref outputclass="link theme-primary" href="#">
   <i outputclass="bi-link"/> Primary link
 </xref>
-<xref outputclass="link-secondary" href="#">
+<xref outputclass="link theme-secondary" href="#">
   <i outputclass="bi-link"/> Secondary link
 </xref>
-<xref outputclass="link-success" href="#">
+<xref outputclass="link theme-success" href="#">
   <i outputclass="bi-link"/> Success link
 </xref>
-<xref outputclass="link-danger" href="#">
+<xref outputclass="link theme-danger" href="#">
   <i outputclass="bi-link"/> Danger link
 </xref>
-<xref outputclass="link-warning" href="#">
+<xref outputclass="link theme-warning" href="#">
   <i outputclass="bi-link"/> Warning link
 </xref>
-<xref outputclass="link-info" href="#">
+<xref outputclass="link theme-info" href="#">
   <i outputclass="bi-link"/> Info link
 </xref>
-<xref outputclass="link-light" href="#">
-  <i outputclass="bi-link"/> Light link
+<xref outputclass="link theme-accent" href="#">
+  <i outputclass="bi-link"/> Accent link
 </xref>
-<xref outputclass="link-dark" href="#">
-  <i outputclass="bi-link"/> Dark link
+<xref outputclass="link theme-inverse" href="#">
+  <i outputclass="bi-link"/> Inverse link
 </xref>
-<xref outputclass="link-body-emphasis" href="#">
-  <i outputclass="bi-link"/> Emphasis link
-</xref>
+
         
    
           
     
    Icons can also be placed within buttons as shown:
    
-    
-      
-      
-      
-      
-      
-      
-    
+    
+      
+      
+      
+      
+      
+      
+    
     
       
    
         Specialization
-          <button outputclass="btn-floating m-1" href="#">
+          <button theme="primary" outputclass="btn-icon" href="#">
   <icon outputclass="bi-arrow-down-square-fill"/>
 </button>
-<button outputclass="btn-floating m-1" href="#">
+<button theme="secondary" outputclass="btn-icon" href="#">
   <icon outputclass="bi-chat-left-quote-fill"/>
 </button>
-<button outputclass="btn-floating m-1" href="#">
+<button theme="warning" outputclass="btn-icon" href="#">
   <icon outputclass="bi-speedometer"/>
 </button>
-<button outputclass="btn-floating m-1" href="#">
+<button theme="info" outputclass="btn-icon" href="#">
   <icon outputclass="bi-camera-fill"/>
 </button>
-<button outputclass="btn-floating m-1" href="#">
+<button theme="accent" outputclass="btn-icon" href="#">
   <icon outputclass="bi-link"/>
 </button>
-<button outputclass="btn-floating m-1" href="#">
+<button theme="danger" outputclass="btn-icon" href="#">
   <icon outputclass="bi-share-fill"/>
 </button>
         
    
          
    
           <xmlatt>outputclass</xmlatt>
-          <xref outputclass="btn-primary btn-floating m-1" href="#">
+          <xref outputclass="theme-primary btn-icon" href="#">
   <i outputclass="bi-arrow-down-square-fill"/>
 </xref>
-<xref outputclass="btn-primary btn-floating m-1" href="#">
+<xref outputclass="theme-secondary btn-icon" href="#">
   <i outputclass="bi-chat-left-quote-fill"/>
 </xref>
-<xref outputclass="btn-primary btn-floating m-1" href="#">
+<xref outputclass="theme-warning btn-icon" href="#">
   <i outputclass="bi-speedometer"/>
 </xref>
-<xref outputclass="btn-primary btn-floating m-1" href="#">
+<xref outputclass="theme-info btn-icon" href="#">
   <i outputclass="bi-camera-fill"/>
 </xref>
-<xref outputclass="btn-primary btn-floating m-1" href="#">
+<xref outputclass="theme-accent btn-icon" href="#">
   <i outputclass="bi-link"/>
 </xref>
-<xref outputclass="btn-primary btn-floating m-1" href="#">
+<xref outputclass="theme-danger btn-icon" href="#">
   <i outputclass="bi-share-fill"/>
 </xref>
         
    
@@ -235,7 +245,7 @@
   </topicref>
   ...
 </chapter>
-    
    
+    
    
       Installing other icons
       
    Other icon sets such as
         Font Awesome
@@ -254,7 +264,7 @@
      --icons.include= \
      --icons.cdn.path=path/to/icon-cdn-header.xml
     
    
-    
    
+    
    
       Excluding icons
       --icons.cdn.path
       --icons.include
diff --git a/sample/images.dita b/sample/images.dita
index a2dea06..8054aa1 100644
--- a/sample/images.dita
+++ b/sample/images.dita
@@ -2,10 +2,10 @@
 
 
 
@@ -25,26 +25,26 @@
     
   
   
-    
    
+    
    
       Responsive images
       
    Images in DITA Bootstrap are made responsive with scalefit="yes". This applies
           max-width: 100%; and height: auto; to the image so that it scales with the
         parent element.
    
     
    
-    
+    
       
-    
+    
         <image scalefit="yes" href="..." />
-    
    
+    
    
       Image thumbnails
       
    In addition to Bootstrap’s
-        border-radius
+        border-radius
           utilities, you can use the specialized thumbnail element to give an image
         a rounded 1px border appearance.
    
     
    
-    
+    
       
-    
+    
     
       
    
         Specialization
@@ -55,13 +55,13 @@
         <image outputclass="img-thumbnail" href="..." />
       
    
         
-    
    
+    
    
       Separate images for dark and light mode
       
    Use the outputclass="d-auto", outputclass="d-light",
         and outputclass="d-dark" attributes on image elements
         to display different images when in dark mode.
    
     
    
-    
+    
       
         
         
       
-    
+    
     
       
    
         Specialization
@@ -96,7 +96,7 @@
 </fig>
       
    
         
-    
    
+    
    
       Support Lazy Loading
       
    Use the loading="lazy" attribute on image elements
         to wait until an image is on screen before loading.
@@ -112,14 +112,14 @@
         <image otherprops="loading(lazy)" href="..."/>
       
    
     
-    
    
+    
    
       Support HTML <xmlelement>picture</xmlelement> element
       
    Use the specialized picture element
       holding multiple image elements to display different images on
       different media. The media attribute defines the media query and/or
       type the image MIME type. The final image is the default.
    
     
    
-    
+    
       
    Change the width of the browser to view different images:
    
       
         
@@ -128,7 +128,7 @@
         
         
       
-        
+    
     
       
    
         Specialization
diff --git a/sample/index.dita b/sample/index.dita
index 09e1613..daaafb4 100644
--- a/sample/index.dita
+++ b/sample/index.dita
@@ -2,10 +2,10 @@
 
 
 
@@ -13,20 +13,20 @@
   A series of plug-ins for
     DITA Open Toolkit that extends the default
     HTML5 and PDF outputs with a
-    Bootstrap 5.3 template and
+    Bootstrap 6.0 template and
     components.
   
   
     
       
-        Bootstrap 5.3
+        Bootstrap 6.0
         DITA
         installing
       
     
   
   
-    
    
+    
    
       Installing
       
    Use the dita command to add the plug-ins to your DITA Open Toolkit installation:
    
     
    
@@ -132,7 +132,7 @@
              
       
     
-    
    
+    
    
       Using
     
    
     
@@ -161,7 +161,7 @@
           >--input=path/to/your.ditamap --format=pdf-bootstrap
         
     
-    
    
+    
    
       Bootswatch themes
       --bootstrap.theme
       
    Alternate Bootstrap themes can be downloaded directly from
@@ -181,40 +181,34 @@
             
               
                 
-                
    
-                  
-                
    
+                
               
             
             
               
                 
-                
    
-                  
-                
    
+                
                   
                 
             
               
                 
-                
    
-                  
-                
    
+                
                   
                 
           
@@ -224,40 +218,34 @@
             
               
                 
-                
    
-                  
-                
    
+                
                   
                 
             
               
                 
-                
    
-                  
-                
    
+                
                   
                 
             
               
                 
-                
    
-                  
-                
    
+                
                   
                 
           
@@ -267,40 +255,34 @@
             
               
                 
-                
    
-                  
-                
    
+                
                   
                 
             
               
                 
-                
    
-                  
-                
    
+                
                   
                 
             
               
                 
-                
    
-                  
-                
    
+                
                   
                 
           
@@ -310,40 +292,34 @@
             
               
                 
-                
    
-                  
-                
    
+                
                   
                 
             
               
                 
-                
    
-                  
-                
    
+                
                   
                 
             
               
                 
-                
    
-                  
-                
    
+                
                   
                 
           
@@ -353,40 +329,34 @@
             
               
                 
-                
    
-                  
-                
    
+                
                   
                 
             
               
                 
-                
    
-                  
-                
    
+                
                   
                 
             
               
                 
-                
    
-                  
-                
    
+                
                   
                 
           
@@ -396,40 +366,34 @@
             
               
                 
-                
    
-                  
-                
    
+                
                   
                 
             
               
                 
-                
    
-                  
-                
    
+                
                   
                 
             
               
                 
-                
    
-                  
-                
    
+                
                   
                 
           
@@ -439,40 +403,34 @@
             
               
                 
-                
    
-                  
-                
    
+                
                   
                 
             
               
                 
-                
    
-                  
-                
    
+                
                   
                 
             
               
                 
-                
    
-                  
-                
    
+                
                   
                 
           
@@ -482,40 +440,34 @@
             
               
                 
-                
    
-                  
-                
    
+                
                   
                 
             
               
                 
-                
    
-                  
-                
    
+                
                   
                 
             
               
                 
-                
    
-                  
-                
    
+                
                   
                 
           
@@ -525,14 +477,12 @@
             
               
                 
-                
    
-                  
-                
    
+                
                   
                 
           
@@ -542,7 +492,7 @@
         dita-bootstrap.github.io.
       
     
    
-    
    
+    
    
       Custom CSS
       --args.css
       --args.copycss
@@ -570,18 +520,18 @@
           scope="external"
         >dita-bootstrap.sass plug-in.
     
    
-    
    
+    
    
       Customizing headers, footers and sidebars
       --args.hdr
       --args.ftr
       
    The plug-in includes a default static navigation menu with a project name and global link placeholders.
    
       
    The default header file includes/hdr.navbar.default.xml uses the Bootstrap primary
         (blue) background color for the
-        navbar
+        navbar
           component, and provides a theme menu to toggle dark mode.  Bootstrap itself offers additional header examples.
    
@@ -604,7 +554,7 @@
           format="html"
           scope="external"
         >footer file and Bootstrap also offers additional examples. To add a footer to the generated output, pass a custom
@@ -629,15 +579,15 @@
       
    As of version 5.3.1, the plug-in provides five new --nav-toc options to style the table of contents navigation with
         either the Bootstrap
-        list
+        list
           group component,
         nav-pills, or
          collapsible menus. The following new options are available:
@@ -676,65 +626,152 @@
           scope="external"
         >dita-bootstrap.github.io/dita-bootstrap. 
     
    
-    
    
-      Common Bootstrap utility classes
-      --bootstrap.css.shortdesc
-      --bootstrap.css.codeblock
-      --bootstrap.css.topic.title
-      --bootstrap.css.section.title
+    
    
+      Bootstrap Themes
+      --bootstrap.css.accessibility.link
+      --bootstrap.theme.accessibility
+      --bootstrap.theme.body
+      --bootstrap.theme.content
+      --bootstrap.theme.footer
+      --bootstrap.theme.header
+      --bootstrap.theme.scrollspy
+      --bootstrap.theme.sidebar
+      --bootstrap.theme.topbar
+      
    Layout regions can be styled with Bootstrap theme color classes to set color and background-color pairings the chosen element using additional command line parameters. See
+         for details on how theme values are built up.
    
+      
+        
+          
+            --bootstrap.css​.accessibility​.link
+          
+          
+            Common Bootstrap CSS classes for accessibility links
+          
+        
+        
+          
+            --bootstrap.theme​.accessibility
+          
+          
+            Bootstrap theme color classes for accessibility navigation
+          
+        
+        
+          
+            --bootstrap.theme​.body
+          
+          
+            Bootstrap theme color classes for the page body.
+            Defaults to 
+          
+        
+        
+          
+            --bootstrap.theme​.content
+          
+          
+            Bootstrap theme color classes for the main content area. Defaults to 
+          
+        
+        
+          
+            --bootstrap.theme​.footer
+          
+          
+            Bootstrap theme color classes for the page footer. Defaults to 
+          
+        
+        
+          
+            --bootstrap.theme​.header
+          
+          
+            Bootstrap theme color classes for the page header. Defaults to 
+          
+        
+        
+          
+            --bootstrap.theme​.scrollspy
+          
+          
+            Bootstrap theme color classes for the scrollspy menu. Defaults to 
+          
+        
+        
+          
+            --bootstrap.theme​.sidebar
+          
+          
+            Bootstrap theme color classes for the sidebar navigation. Defaults to 
+          
+        
+        
+          
+            --bootstrap.theme​.topbar
+          
+          
+            Bootstrap theme color classes for the collapsible top header. Defaults to 
+          
+        
+      
+    
    
+    
    
+      Bootstrap component utility classes
+      --bootstrap.css.badge
+      --bootstrap.css.button
       --bootstrap.css.card
+      --bootstrap.css.card.title
+      --bootstrap.css.card.width
       --bootstrap.css.carousel
       --bootstrap.css.carousel.caption
       --bootstrap.css.carousel.indicators
-      --bootstrap.css.footer
-      --bootstrap.css.table
+      --bootstrap.css.container.size
+      --bootstrap.css.menubar.toc
+      --bootstrap.css.nav.parent
+      --bootstrap.css.pagination
+      --bootstrap.css.popover
       --bootstrap.css.tabs
       --bootstrap.css.tabs.vertical
-      --bootstrap.css.thead
+      --bootstrap.css.tooltip
       --bootstrap.css.accordion
-      --bootstrap.css.accessibility.nav
-      --bootstrap.css.accessibility.link
-      --bootstrap.css.figure
-      --bootstrap.css.figure.caption
-      --bootstrap.css.figure.image
-      --bootstrap.css.dl
-      --bootstrap.css.dt
-      --bootstrap.css.dd
-      --bootstrap.css.nav.parent
-      
    The HTML output for the following DITA elements can be annotated with common Bootstrap utility classes for
-        borders,
+      
    The HTML output for the following Bootstrap components can be annotated with common Bootstrap utility classes for
+        borders,
         background,
-        text,
-        spacing,
+        text,
+        spacing,
         etc. using additional command line parameters:
    
       
         
           
-            --bootstrap.css​.accessibility​.link
+            --bootstrap.css​.accordion
           
           
-            Common Bootstrap utility classes for accessibility links
+            Common utility classes for Bootstrap
+            accordion components
           
         
         
           
-            --bootstrap.css​.accessibility​.nav
+            --bootstrap.css​.badge
           
           
-            Common Bootstrap utility classes for accessibility navigation
+            Common utility classes for Bootstrap
+            badge components
           
         
         
           
-            --bootstrap.css​.accordion
+            --bootstrap.css​.button
           
           
             Common utility classes for Bootstrap
-            accordion components
+            button components
           
         
         
@@ -791,15 +828,6 @@
             carousel indicators
           
         
-        
-          
-            --bootstrap.css​.codeblock
-          
-          
-            Common Bootstrap utility classes for DITA
-            codeblock elements
-          
-        
         
           
             --bootstrap.css​.container​.size
@@ -813,123 +841,186 @@
         
         
           
-            --bootstrap.css​.dd
+            --bootstrap.css​.menubar​.toc
           
-          Common Bootstrap utility classes for DITA
-            dd definition description elements
+          
+            CSS class for the menu bar. Defaults to
+            
           
         
         
           
-            --bootstrap.css​.dl
+            --bootstrap.css​.nav​.parent
           
-          Common Bootstrap utility classes for DITA
-            dl definition list elements
+          
+            Common Bootstrap utility classes for ancestors of active nav-pill elements
           
         
         
           
-            --bootstrap.css​.dt
+            --bootstrap.css​.pagination
           
-          Common Bootstrap utility classes for DITA
-            dt definition term elements
+          
+            Common utility classes for Bootstrap
+            pagination components
+          
+        
+        
+          
+            --bootstrap.css​.popover
+          
+          
+            Common utility classes for Bootstrap
+            popover components
           
         
         
           
-            --bootstrap.css​.figure
+            --bootstrap.css​.tabs
           
-          Common Bootstrap utility classes for DITA
-            fig elements
+          
+            Common utility classes for Bootstrap
+            tabbed dialog components
           
         
         
           
-            --bootstrap.css​.figure​.caption
+            --bootstrap.css​.tabs​.vertical
           
           
-            Common Bootstrap utility classes for DITA
-            title elements within fig elements
+            Common utility classes for Bootstrap
+            vertical tabbed dialog components
           
         
+        
+          
+            --bootstrap.css​.tooltip
+          
+          
+            Common utility classes for Bootstrap
+            tooltip components
+          
+        
+      
+    
    
+    
    
+      DITA element utility classes
+      --bootstrap.css.shortdesc
+      --bootstrap.css.codeblock
+      --bootstrap.css.topic.title
+      --bootstrap.css.section.title
+      --bootstrap.css.table
+      --bootstrap.css.figure
+      --bootstrap.css.figure.caption
+      --bootstrap.css.figure.image
+      --bootstrap.css.dl
+      --bootstrap.css.dt
+      --bootstrap.css.dd
+      --bootstrap.css.example
+      
    The HTML output for the following DITA elements can be annotated with common Bootstrap utility classes for
+        borders,
+        background,
+        text,
+        spacing,
+        etc. using additional command line parameters:
    
+      
         
           
-            --bootstrap.css​.figure​.image
+            --bootstrap.css​.codeblock
           
           
             Common Bootstrap utility classes for DITA
-            image elements within fig elements
+            codeblock elements
+          
+        
+        
+          
+            --bootstrap.css​.dd
+          
+          Common Bootstrap utility classes for DITA
+            dd definition description elements
           
         
         
           
-            --bootstrap.css​.footer
+            --bootstrap.css​.dl
           
-          
-            Common utility classes for the HTML
-            footer element
+          Common Bootstrap utility classes for DITA
+            dl definition list elements
           
         
         
           
-            --bootstrap.css​.nav​.parent
+            --bootstrap.css​.dt
           
-          
-            Common Bootstrap utility classes for ancestors of active nav-pill elements
+          Common Bootstrap utility classes for DITA
+            dt definition term elements
           
         
         
           
-            --bootstrap.css​.pagination
+            --bootstrap.css​.example
           
           
-            Common utility classes for Bootstrap
-            pagination components
+            Common Bootstrap utility classes for DITA
+            example elements
           
         
         
           
-            --bootstrap.css​.section​.title
+            --bootstrap.css​.figure
+          
+          Common Bootstrap utility classes for DITA
+            fig elements
+          
+        
+        
+          
+            --bootstrap.css​.figure​.caption
           
           
             Common Bootstrap utility classes for DITA
-            title elements within section elements
+            title elements within fig elements
           
         
         
           
-            --bootstrap.css​.shortdesc
+            --bootstrap.css​.figure​.image
           
           
             Common Bootstrap utility classes for DITA
-            shortdesc elements
+            image elements within fig elements
           
         
         
           
-            --bootstrap.css​.table
+            --bootstrap.css​.section​.title
           
           
             Common Bootstrap utility classes for DITA
-            table elements
+            title elements within section elements
           
         
         
           
-            --bootstrap.css​.tabs
+            --bootstrap.css​.shortdesc
           
           
-            Common utility classes for Bootstrap
-            tabbed dialog components
+            Common Bootstrap utility classes for DITA
+            shortdesc elements
           
         
         
           
-            --bootstrap.css​.tabs​.vertical
+            --bootstrap.css​.table
           
           
-            Common utility classes for Bootstrap
-            vertical tabbed dialog components
+            Common Bootstrap utility classes for DITA
+            table elements
           
         
         
@@ -951,7 +1042,7 @@
         
       
     
    
-    
    
+    
    
       Bootstrap icons for DITA notes
       --bootstrap.icon.note
       --bootstrap.icon.attention
@@ -1066,7 +1157,7 @@
         
       
     
    
-    
    
+    
    
       Optional elements
       --args.breadcrumbs
       --icons.include
@@ -1108,7 +1199,7 @@
           
             Whether to include support for a
             dark mode toggler
@@ -1168,7 +1259,7 @@
     
    
       Within the sample documentation, the texts describing the usage of each component have been
         copied directly from the
-        official Bootstrap 5.3
+        official Bootstrap 6.0
         documentation, however DITA markup is used throughout the examples describing how to implement these
         components correctly using DITA specializations or the DITA outputclass attribute. This text
         is therefore a derivative of Bootstrap 5 docs by Twitter, Inc. and the Bootstrap Authors, and used
diff --git a/sample/list-group.dita b/sample/list-group.dita
index 1eb7840..6d519a3 100644
--- a/sample/list-group.dita
+++ b/sample/list-group.dita
@@ -1,10 +1,10 @@
 
 
 
@@ -26,12 +26,12 @@
     
   
   
-    
    
+    
    
       Basic example
       
    The most basic list group is an unordered list with list items and the proper classes. Build upon it with the
         options that follow, or with your own CSS as needed.
    
     
    
-    
+    
       
         
  • An item
    • 
         
  • A second item
    • 
@@ -39,7 +39,7 @@
         
  • A fourth item
    • 
         
  • And a fifth one
    • 
           
-        
+    
     
       
    
         Specialization
@@ -62,17 +62,17 @@
 </ul>
         
    
           
-    
    
+    
    
       Compacted list group
       
    Add compact="yes" to reduce the padding of list items
    
     
    
-    
+    
       
         
  • Item One
    • 
         
  • Item Two
    • 
         
  • Item Three
    • 
           
-        
+    
     
       
    
         Specialization
@@ -87,17 +87,17 @@
 </ul>
         
    
           
-    
    
+    
    
       Expanded list group
       
    Add compact="no" to increase the padding of list items
    
     
    
-    
+    
       
         
  • Item One
    • 
         
  • Item Two
    • 
         
  • Item Three
    • 
           
-        
+    
     
       
    
         Specialization
@@ -112,12 +112,12 @@
 </ul>
         
    
           
-    
    
+    
    
       Flush
       
    Add a flush="yes" to remove some borders and
         rounded corners to render list group items edge-to-edge in a parent container (e.g., cards).
    
     
    
-    
+    
       
         
  • An item
    • 
         
  • A second item
    • 
@@ -125,7 +125,7 @@
         
  • A fourth item
    • 
         
  • And a fifth one
    • 
           
-        
+    
     
       
    
         Specialization
diff --git a/sample/nav.dita b/sample/nav.dita
index 48319c1..c19825c 100644
--- a/sample/nav.dita
+++ b/sample/nav.dita
@@ -2,10 +2,10 @@
 
 
 
@@ -25,7 +25,7 @@
     
   
   
-    
    
+    
-    
+    
       
         
           
@@ -121,17 +121,17 @@
           
         
       
-    
+    
 
     
    
       
    
         The sidebar is hidden by default on mobile. To ensure that the sidebar content can be accessed, the header file must include the following toggle with data-bs-target="#bdSidebar"
-        and data-bs-toggle="offcanvas":
+        and data-bs-toggle="drawer":
       
    
       <div class="bd-navbar-toggle">
-  <button class="navbar-toggler p-2" type="button"
-    data-bs-toggle="offcanvas" data-bs-target="#bdSidebar"
+  <button class="lg:d-none p-2" type="button"
+    data-bs-toggle="drawer" data-bs-target="#bdSidebar"
     aria-controls="bdSidebar" aria-label="Toggle docs navigation">
     <i class="bi bi-list"/>
   </button>
@@ -169,7 +169,7 @@
 
 
     
    
-    
    
+    
-    
    
+    
    
       Top bar
       
    A collapsible menu placed above the main menu can be included
         by adding the --bootstrap.topbar.hdr parameter to the
@@ -204,11 +215,11 @@
           scope="external"
         >custom header.
    
     
    
-    
    
+    
    
       Dividers
       
    
         Dividers can be added to items rendered in collapsible sidebars and menus by adding the
diff --git a/sample/offcanvas.dita b/sample/offcanvas.dita
deleted file mode 100644
index 80bff11..0000000
--- a/sample/offcanvas.dita
+++ /dev/null
@@ -1,205 +0,0 @@
-
-
-
-
-  Offcanvas
-  Build hidden sidebars into your project for navigation, shopping carts, and more with a few classes and
-    Bootstrap’s JavaScript plugin.
-  
-    
-      
-        Offcanvas
-        CSS
-          outputclass
-        
-        section
-        xref
-        props
-      
-    
-  
-  
-    
    
-      How it works
-      
    Offcanvas is a sidebar component that can be toggled via JavaScript to appear from the left, right, or bottom
-        edge of the viewport. Buttons or anchors are used as triggers that are attached to specific elements you toggle,
-        and data attributes are used to invoke Bootstrap’s JavaScript.
    
-      
      
-        
    • Offcanvas shares some of the same JavaScript code as modals. Conceptually, they are quite similar, but they
-          are separate plugins.
      • 
-        
    • Similarly, some source Sass variables for offcanvas’s styles and dimensions are inherited from the modal’s
-          variables.
      • 
-        
    • When shown, offcanvas includes a default backdrop that can be clicked to hide the offcanvas.
      • 
-        
    • Similar to modals, only one offcanvas can be shown at a time.
      • 
-      
    
-      
    Heads up! Given how CSS handles animations, you cannot use margin or translate in a Bootstrap offcanvas
-        element. Instead, use the class as an independent wrapping element.
    
-    
    
-    
    
-      Offcanvas components
-      
    Below is an offcanvas example that is displayed when the button is clicked. Add
-          props="offcanvas-toggle" to an xref element to associate a button to
-        an offcanvas
    
-    
    
-    
-            
-      
-        Offcanvas
-        
    Content for the offcanvas goes here. You can place just about any section elements here.
    
-          
-        
-    
-      
    
-        Specialization
-          <button props="offcanvas-toggle" href="#offcanvas1">
-  Click here
-</button>
-<offcanvas id="offcanvas1" position="start">
-  <title>Offcanvas</title>
-  <p>
-    Content for the offcanvas goes here. You can place just about any section elements here.
-  </p>
-</offcanvas>
-        
    
-         
    
-          <xmlatt>outputclass</xmlatt>
-          <xref outputclass="btn-primary" props="offcanvas-toggle" href="#offcanvas1">
-  Click here
-</xref>
-<section outputclass="offcanvas-start" id="offcanvas1">
-  <title>Offcanvas</title>
-  <p>
-    Content for the offcanvas goes here. You can place just about any section elements here.
-  </p>
-</section>
-        
    
-          
-    
    
-      Placement
-      
    There’s no default placement for offcanvas components, so you must add one of the modifier outputclasses
-        below
    
-      
      
-        
    • Setting position="start" or outputclass="offcanvas-start" places offcanvas on the left of the
-          viewport (shown above)
      • 
-        
    • Setting position="end" or outputclass="offcanvas-end" places offcanvas on the right of the
-          viewport
      • 
-        
    • Setting position="bottom" or outputclass="offcanvas-bottom" places offcanvas on the bottom of
-          the viewport
      • 
-        
    • Setting position="top" or outputclass="offcanvas-top" places offcanvas on the top of
-          the viewport
      • 
-      
    
-    
    
-    
-            
-      
-        Offcanvas
-        
    Content for the offcanvas goes here. You can place just about any section elements here.
    
-          
-        
-    
-      
    
-        Specialization
-          <offcanvas position="end">
-  ...etc
-</offcanvas>
-        
    
-         
    
-          <xmlatt>outputclass</xmlatt>
-          <section outputclass="offcanvas-end" id="offcanvas2">
-  ...etc
-</section>
-        
    
-          
-    
-            
-      
-        Offcanvas
-        
    Content for the offcanvas goes here. You can place just about any section elements here.
    
-          
-        
-    
-      
    
-        Specialization
-          <offcanvas position="bottom">
-  ...etc
-</offcanvas>
-        
    
-         
    
-          <xmlatt>outputclass</xmlatt>
-          <section outputclass="offcanvas-bottom" id="offcanvas3">
-  ...etc
-</section>
-        
    
-          
-    
    
-      Responsive
-      
    Responsive offcanvas outputclasses hide content outside the viewport from a specified breakpoint and down. Above that breakpoint, the contents within will behave as usual. For example, outputclass="offcanvas-lg" hides content in an offcanvas below the lg breakpoint, but shows the content above the lg breakpoint.
    
-    
    
-    
-      Resize your browser to show the responsive offcanvas toggle.
-            
-      
-        Offcanvas
-        
    This is content within an outputclass="offcanvas-lg".
    
-          
-        
-    
    Responsive offcanvas classes are available across for each breakpoint.
    
-    
      
-      
    • outputclass="offcanvas"
      • 
-      
    • outputclass="offcanvas-sm"
      • 
-      
    • outputclass="offcanvas-md"
      • 
-      
    • outputclass="offcanvas-lg"
      • 
-      
    • outputclass="offcanvas-xl"
      • 
-      
    • outputclass="offcanvas-xxl"
      • 
-    
    
-    
-      
    
-        Specialization
-          <note color="info" outputclass="d-none d-lg-block">
-  Resize your browser to show the responsive offcanvas toggle.
-</note>
-<button outputclass="d-lg-none" props="offcanvas-toggle" href="#offcanvas4">
-  Toggle offcanvas
-</button>
-<offcanvas outputclass="offcanvas-lg" id="offcanvas4">
-  <title>Offcanvas</title>
-  <p>
-    This is content within an <xmlatt>outputclass="offcanvas-lg"</xmlatt>.
-  </p>
-</offcanvas>
-        
    
-         
    
-          <xmlatt>outputclass</xmlatt>
-          <note outputclass="alert-info d-none d-lg-block">
-  Resize your browser to show the responsive offcanvas toggle.
-</note>
-<xref outputclass="btn-primary d-lg-none" props="offcanvas-toggle" href="#offcanvas4">
-  Toggle offcanvas
-</xref>
-<section outputclass="offcanvas-lg" id="offcanvas4">
-  <title>Offcanvas</title>
-  <p>
-    This is content within an <xmlatt>outputclass="offcanvas-lg"</xmlatt>.
-  </p>
-</section>
-        
    
-          
-  
-
diff --git a/sample/offline.dita b/sample/offline.dita
index b5e68b3..a09584d 100644
--- a/sample/offline.dita
+++ b/sample/offline.dita
@@ -2,10 +2,10 @@
 
 
 
@@ -30,7 +30,7 @@
     >This offline approach deliberately avoids the use of online CDNs and minimises the opportunity for browsers to
       cache files, and therefore is not recommended for production of documents placed online.
 
-    
    
+    
    
       Procedure
       
      
         
    1. 
@@ -87,7 +87,7 @@
             Sample <filepath>offline-bootstrap.css</filepath> file
             @charset "UTF-8";
 /*!
- * Bootstrap v5.3.0 (https://getbootstrap.com/)
+ * Bootstrap v6.0.0 (https://getbootstrap.com/)
  * Copyright 2011-2023 The Bootstrap Authors
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
  */
@@ -130,7 +130,7 @@
         
      2. 
       
    
     
    
-    
    
+    
    
       Results
       
    The plug-in directory has the following layout and files:
    
       com.example.bootstrap-offline
@@ -141,7 +141,7 @@
 └── process_offline.xml
     
    
 
-    
    
+    
    
       What to do next
       
      
         
    1. Run dita
diff --git a/sample/pagination.dita b/sample/pagination.dita
index f808baf..f0dc3b7 100644
--- a/sample/pagination.dita
+++ b/sample/pagination.dita
@@ -1,10 +1,10 @@
 
 
 
@@ -35,7 +35,7 @@
     
   
   
-    
+    
       
         Page navigation example
         
        
@@ -85,12 +85,198 @@
 </section>
         
    
       
-    
    
+    
    
+      Variants
+      
    Add a theme attribute to a pagination list to apply a semantic theme color across the
+        component, including hover, focus, and the active page item.
    
+    
    
+    
+      
+        Page navigation example
+        
      
+          
    1. Previous
      2. 
+          
    2. 1
      3. 
+          
    3. 2
      4. 
+          
    4. 3
      5. 
+          
    5. Next
      6. 
+        
    
+          
+      
+        Page navigation example
+        
      
+          
    1. Previous
      2. 
+          
    2. 1
      3. 
+          
    3. 2
      4. 
+          
    4. 3
      5. 
+          
    5. Next
      6. 
+        
    
+          
+      
+        Page navigation example
+        
      
+          
    1. Previous
      2. 
+          
    2. 1
      3. 
+          
    3. 2
      4. 
+          
    4. 3
      5. 
+          
    5. Next
      6. 
+        
    
+          
+      
+        Page navigation example
+        
      
+          
    1. Previous
      2. 
+          
    2. 1
      3. 
+          
    3. 2
      4. 
+          
    4. 3
      5. 
+          
    5. Next
      6. 
+        
    
+          
+      
+        Page navigation example
+        
      
+          
    1. Previous
      2. 
+          
    2. 1
      3. 
+          
    3. 2
      4. 
+          
    4. 3
      5. 
+          
    5. Next
      6. 
+        
    
+          
+      
+        Page navigation example
+        
      
+          
    1. Previous
      2. 
+          
    2. 1
      3. 
+          
    3. 2
      4. 
+          
    4. 3
      5. 
+          
    5. Next
      6. 
+        
    
+          
+      
+        Page navigation example
+        
      
+          
    1. Previous
      2. 
+          
    2. 1
      3. 
+          
    3. 2
      4. 
+          
    4. 3
      5. 
+          
    5. Next
      6. 
+        
    
+          
+      
+        Page navigation example
+        
      
+          
    1. Previous
      2. 
+          
    2. 1
      3. 
+          
    3. 2
      4. 
+          
    4. 3
      5. 
+          
    5. Next
      6. 
+        
    
+          
+        
+    
+      
    
+        Specialization
+        <pagination theme="primary">
+  <title>Page navigation example</title>
+  <ol>
+    <li><xref href="#">Previous</xref></li>
+    <li><xref href="#">1</xref></li>
+    <li><xref href="#">2</xref></li>
+    <li><xref href="#">3</xref></li>
+    <li><xref href="#">Next</xref></li>
+  </ol>
+</pagination>
+<pagination theme="secondary">
+  <title>Page navigation example</title>
+  <ol>...</ol>
+</pagination>
+<pagination theme="success">
+  <title>Page navigation example</title>
+  <ol>...</ol>
+</pagination>
+<pagination theme="danger">
+  <title>Page navigation example</title>
+  <ol>...</ol>
+</pagination>
+<pagination theme="warning">
+  <title>Page navigation example</title>
+  <ol>...</ol>
+</pagination>
+<pagination theme="info">
+  <title>Page navigation example</title>
+  <ol>...</ol>
+</pagination>
+<pagination theme="accent">
+  <title>Page navigation example</title>
+  <ol>...</ol>
+</pagination>
+<pagination theme="inverse">
+  <title>Page navigation example</title>
+  <ol>...</ol>
+</pagination>
+      
    
+      
    
+        <xmlatt>outputclass</xmlatt>
+        <section>
+  <title>Page navigation example</title>
+  <ol outputclass="pagination theme-primary">
+    <li><xref href="#">Previous</xref></li>
+    <li><xref href="#">1</xref></li>
+    <li><xref href="#">2</xref></li>
+    <li><xref href="#">3</xref></li>
+    <li><xref href="#">Next</xref></li>
+  </ol>
+</section>
+<section>
+  <title>Page navigation example</title>
+  <ol outputclass="pagination theme-secondary">
+    ...
+  </ol>
+</section>
+<section>
+  <title>Page navigation example</title>
+  <ol outputclass="pagination theme-success">
+    ...
+  </ol>
+</section>
+<section>
+  <title>Page navigation example</title>
+  <ol outputclass="pagination theme-danger">
+    ...
+  </ol>
+</section>
+<section>
+  <title>Page navigation example</title>
+  <ol outputclass="pagination theme-warning">
+    ...
+  </ol>
+</section>
+<section>
+  <title>Page navigation example</title>
+  <ol outputclass="pagination theme-info">
+    ...
+  </ol>
+</section>
+<section>
+  <title>Page navigation example</title>
+  <ol outputclass="pagination theme-accent">
+    ...
+  </ol>
+</section>
+<section>
+  <title>Page navigation example</title>
+  <ol outputclass="pagination theme-inverse">
+    ...
+  </ol>
+</section>
+      
    
+        
+
+    
    
       Sizing
       
    Fancy larger or smaller pagination? Use size="large" or
           size="small" for additional sizes.
    
     
    
-    
+    
       
         Page navigation example
         
      
@@ -140,7 +326,7 @@
 </section>
         
    
       
-    
+    
       
         Page navigation example
         
      
@@ -190,18 +376,18 @@
 </section>
         
    
       
-    
    
+    
    
       Alignment
       
    Change the alignment of pagination component by appending Bootstrap
         flexbox utility classes
         to the outputclass
       
    
     
    
-    
+    
       
         Page navigation example
         
      
@@ -251,7 +437,7 @@
 </section>
         
    
       
-    
+    
       
         Page navigation example
         
      
diff --git a/sample/popovers.dita b/sample/popovers.dita
index 08fea9a..384f6ca 100644
--- a/sample/popovers.dita
+++ b/sample/popovers.dita
@@ -1,10 +1,10 @@
 
 
 
@@ -28,7 +28,7 @@
     
   
   
-    
      
+    
      
       Overview
       
      Things to know when using the tooltip plugin:
      
       
        
@@ -46,20 +46,20 @@
       
      
     
      
 
-    
      
+    
      
       Examples
       
      Keep reading to see how popovers work with some examples.
      
     
      
 
-    
-      
+    
+      
         Popover title
         And here’s some amazing content. It’s very engaging. Right? Click to toggle popover 
-    
+    
     
       
      
         Specialization
-           <popover outputclass="btn-lg btn-danger">
+           <popover outputclass="btn-lg btn-solid" theme="danger-contrast">
   <data name="title">Popover title</data>
   <desc>And here’s some amazing content. It’s very engaging. Right?</desc>
   Click to toggle popover
@@ -67,7 +67,7 @@
         
      
          
      
           <xmlatt>outputclass</xmlatt>
-           <xref href="#" outputclass="btn-lg btn-danger popover-top">
+           <xref href="#" outputclass="btn-lg btn-solid theme-danger popover-top">
   <data name="title">Popover title</data>
   <desc>And here’s some amazing content. It’s very engaging. Right?</desc>
   Click to toggle popover
@@ -75,7 +75,7 @@
         
      
             
 
-    
      
+    
      
       Four directions
       
      Four options are available: top, right, bottom, and
           left aligned. Directions are mirrored when using Bootstrap in RTL. To enable popovers, add
@@ -83,57 +83,57 @@
         >popover element use the position attribute. The direction of the
         popover is appended to the output-class or taken from the attribute.
      
     
      
-    
-      
+    
+      
         Top popover Popover on top 
-      
+      
         Right Popover Popover on right 
-      
+      
         Bottom popover Popover on bottom 
-      
+      
         Left popover Popover on left 
-    
+    
     
       
      
         Specialization
-          <popover outputclass="btn-secondary" position="top">
+          <popover outputclass="btn-solid" theme="secondary-contrast" position="top">
   <desc>Top popover</desc>
   Popover on top
 </popover>
-<popover outputclass="btn-secondary" position="right">
+<popover outputclass="btn-solid" theme="secondary-contrast" position="right">
   <desc>Right Popover</desc>
   Popover on right
 </popover>
-<popover outputclass="btn-secondary" position="bottom">
+<popover outputclass="btn-solid" theme="secondary-contrast" position="bottom">
   <desc>Bottom popover</desc>
   Popover on bottom
 </popover>
-<popover outputclass="btn-secondary" position="left">
+<popover outputclass="btn-solid" theme="secondary-contrast" position="left">
   <desc>Left popover</desc>
   Popover on left
 </popover>
         
      
          
      
           <xmlatt>outputclass</xmlatt>
-          <xref href="#" outputclass="btn-secondary popover-top">
+          <xref href="#" outputclass="btn-solid theme-secondary popover-top">
   <desc>Top popover</desc>
   Popover on top
 </xref>
-<xref href="#" outputclass="btn-secondary popover-right">
+<xref href="#" outputclass="btn-solid theme-secondary popover-right">
   <desc>Right Popover</desc>
   Popover on right
 </xref>
-<xref href="#" outputclass="btn-secondary popover-bottom">
+<xref href="#" outputclass="btn-solid theme-secondary popover-bottom">
   <desc>Bottom popover</desc>
   Popover on bottom
 </xref>
-<xref href="#" outputclass="btn-secondary popover-left">
+<xref href="#" outputclass="btn-solid theme-secondary popover-left">
   <desc>Left popover</desc>
   Popover on left
 </xref>
         
      
             
-    
      
+    
      
       Custom popovers
       
      You can customize the appearance of popovers using CSS variables.
         We set a custom class with 
     
      
-    
-        
+    
+        
           Popover title
           custom-popover
           And here’s some amazing content. It’s very engaging. Right?Custom popover
-    
+    
     
       
      
         Specialization
-          <popover outputclass="btn-lg btn-danger">
+          <popover outputclass="btn-lg btn-solid" theme="danger-contrast">
   <data name="title">Popover title</data>
   <data name="class">custom-popover</data>
   <desc>And here’s some amazing content. It’s very engaging. Right?</desc>
@@ -166,7 +166,7 @@
         
      
          
      
           <xmlatt>outputclass</xmlatt>
-          <xref href="#" outputclass="btn-lg btn-danger popover-top">
+          <xref href="#" outputclass="btn-lg btn-solid theme-danger popover-top">
   <data name="title">Popover title</data>
   <data name="class">custom-popover</data>
   <desc>And here’s some amazing content. It’s very engaging. Right?</desc>
diff --git a/sample/rtl.dita b/sample/rtl.dita
index 28c9a99..b922dbe 100644
--- a/sample/rtl.dita
+++ b/sample/rtl.dita
@@ -1,10 +1,10 @@
 
 
 
@@ -23,7 +23,7 @@
     
   
   
-    
      
+    
      
       Loading the Right-to-Left stylesheet
       
      By default the Bootstrap plugin loads standard left-to-right CSS. To enable support for right-to-left
         languages, DITA-OT must load the RTL version of the Bootstrap CSS. This is done automatically if the
@@ -34,7 +34,7 @@
      --format= \
      --bidi.include=
     
      
-    
      
+    
      
       Using LTR and RTL languages in the same topic
       
      The overall layout is always defined by the --defaultLanguage parameter.
      
       
      To render an article as RTL across the page, set the topic xml:lang=".." to an RTL
@@ -43,14 +43,14 @@
       
      Additionally, within any topic, setting the dir attribute on any DITA
         element thereafter will cause the layout to be recalculated for the enclosed block only.
      
     
      
-    
+    
       
         
           
             عنوان البطاقة
             
             
      بعض الأمثلة السريعة للنص الذي سيتم بناؤه على عنوان البطاقة وتشكيل الجزء الأكبر من محتوى البطاقة.
      
-            
+            
                 
               
             
@@ -64,7 +64,7 @@
       <title>عنوان البطاقة</title>
       <image href="..." />
       <p>بعض الأمثلة السريعة للنص الذي سيتم بناؤه على عنوان البطاقة وتشكيل الجزء الأكبر من محتوى البطاقة.</p>
-      <button href="#">اذهب لمكان ما</button>
+      <button href="#" theme="primary">اذهب لمكان ما</button>
     </card>
   </grid-col>
 </grid-row>
@@ -77,7 +77,7 @@
       <title outputclass="h5">عنوان البطاقة</title>
       <image outputclass="card-img-top" href="..." />
       <p>بعض الأمثلة السريعة للنص الذي سيتم بناؤه على عنوان البطاقة وتشكيل الجزء الأكبر من محتوى البطاقة.</p>
-      <xref href="#" outputclass="btn-primary">اذهب لمكان ما</xref>
+      <xref href="#" outputclass="btn-solid theme-primary">اذهب لمكان ما</xref>
     </section>
   </bodydiv>
 </bodydiv>
diff --git a/sample/sass.dita b/sample/sass.dita
index 2ff2a11..d8076db 100644
--- a/sample/sass.dita
+++ b/sample/sass.dita
@@ -2,10 +2,10 @@
 
 
 
@@ -27,7 +27,7 @@
   
     
      This approach allows you to modify additional aspects of Bootstrap’s default presentation, beyond what you can do
       with CSS alone.
      
-    
      
+    
      
       Installing
       
      Use the dita command to add the required plug-ins to your DITA Open Toolkit
         installation:
      
@@ -40,7 +40,7 @@
         successfully. To download and install a copy, follow the instructions for your operating system on the
         download page.
     
      
-    
      
+    
      
       Generating a CSS theme from Sass
       
      To generate a CSS theme from your custom Sass source files, follow the instructions in the
         dita-bootstrap.sass/sass/index.html file in a web browser.
      
     
      
-    
      
+    
      
       Using the generated theme
       
      To use a pregenerated Sass theme as CSS in the HTML Bootstrap output, run the 
         transformation and pass the bootstrap.sass parameter to the dita
diff --git a/sample/scrollspy.dita b/sample/scrollspy.dita
index 3469001..9c491c9 100644
--- a/sample/scrollspy.dita
+++ b/sample/scrollspy.dita
@@ -2,7 +2,7 @@
 
 
 
@@ -109,9 +109,9 @@
       
      
         Omit the id to ignore a section, or wrap the section in a bodydiv element. Any offcanvas components are ignored automatically.
+        >drawer components are ignored automatically.
       
      
       <bodydiv>
   <section id="section-1">
diff --git a/sample/search-box.dita b/sample/search-box.dita
index b1da45f..e63eb87 100644
--- a/sample/search-box.dita
+++ b/sample/search-box.dita
@@ -2,10 +2,10 @@
 
 
 
@@ -28,7 +28,7 @@
       
     
 
-    
      
+    
      
       Adding a search function
       
      Search boxes are not included by default. You must first install another plug-in
         which indexes the full DITA text. Since multiple search engines exist, search is
@@ -43,7 +43,7 @@
        search to other search engines.
      
     
      
 
-    
      
+    
      
       Installing the <term>DITA Bootstrap Lunr Search</term> plug-in
       
      Use the dita command to add the DITA Bootstrap Lunr Search
        plug-in to your DITA Open Toolkit installation:
      
@@ -70,7 +70,7 @@
         
      
     
      
 
-    
      
+    
      
       Using
       
      To run, use the  transformation and pass the --args.hdr parameter to the dita
@@ -81,7 +81,7 @@
   --args.hdr=path/to/your-header.xml
     
      
 
-    
      
+    
      
       Sample header navigation bars
       
      To add a search box to the menu bar, add a form class="search-box" element
       with an input type="search" as shown here.
      
diff --git a/sample/shadows.dita b/sample/shadows.dita
index 8b64787..d3bf3df 100644
--- a/sample/shadows.dita
+++ b/sample/shadows.dita
@@ -17,7 +17,7 @@
     
   
   
-    
      
+    
      
       Shadow Utilities
       
      Bootstrap provides utilities for adding depth with text-bg colors and box-shadows. The shadow
         attribute can be set to yes, sm, lg or
@@ -26,63 +26,63 @@
         automatically added to prevent the shadow from being clipped by the parent container.
      
     
      
 
-    
-      
      No shadow
      
-      
      Small shadow
      
-      
      Regular shadow
      
-      
      Larger shadow
      
-          
+    
+      
      No shadow
      
+      
      Small shadow
      
+      
      Regular shadow
      
+      
      Larger shadow
      
+          
 
     
       
      
         Specialization
-        <div shadow="none" margin="3" padding="3" color="light">No shadow</div>
-<div shadow="sm" margin="3" padding="3" color="light">Small shadow</div>
-<div shadow="yes" margin="3" padding="3" color="light">Regular shadow</div>
-<div shadow="lg" margin="3" padding="3" color="light">Larger shadow</div>
+        <div shadow="none" margin="3" padding="3" border="1">No shadow</div>
+<div shadow="sm" margin="3" padding="3" border="1">Small shadow</div>
+<div shadow="yes" margin="3" padding="3" border="1">Regular shadow</div>
+<div shadow="lg" margin="3" padding="3" border="1">Larger shadow</div>
       
      
       
      
         <xmlatt>outputclass</xmlatt>
-        <div outputclass="shadow-none m-3 p-3 text-bg-light">No shadow</div>
-<div outputclass="shadow-sm m-3 p-3 text-bg-light">Small shadow</div>
-<div outputclass="shadow m-3 p-3 text-bg-light">Regular shadow</div>
-<div outputclass="shadow-lg m-3 p-3 text-bg-light">Larger shadow</div>
+        <div outputclass="shadow-none m-3 p-3 border">No shadow</div>
+<div outputclass="shadow-sm m-3 p-3 border">Small shadow</div>
+<div outputclass="shadow m-3 p-3 border">Regular shadow</div>
+<div outputclass="shadow-lg m-3 p-3 border">Larger shadow</div>
       
      
           
 
-    
      
+    
      
       Applied Shadow
       
      Shadows can be applied to complex elements as follow:
      
     
      
 
-    
-      
+    
+      
         Shadowed Card
         
      This card has a large shadow.
      
             
-      Alert with small shadow
+      Alert with small shadow
           
 
     
       
      
         Specialization
-        <card shadow="lg" margin="3" color="light">
+        <card shadow="lg" margin="3" theme="accent-contrast">
   <title>Shadowed Card</title>
   <p>This card has a large shadow.</p>
 </card>
 
-<alert shadow="sm" color="light">Alert with small shadow</alert>
+<alert shadow="sm" theme="accent-contrast">Alert with small shadow</alert>
       
      
       
      
         <xmlatt>outputclass</xmlatt>
-        <section outputclass="card shadow-lg m-3 text-bg-light">
+        <section outputclass="card shadow-lg m-3 bg-subtle-accent">
   <div outputclass="card-body">
     <div outputclass="card-title h5">Shadowed Card</div>
     <p outputclass="card-text">This card has a large shadow.</p>
   </div>
 </section>
 
-<div outputclass="alert alert-light shadow-sm">Alert with small shadow</div>
+<div outputclass="alert theme-accent m-3 shadow-sm">Alert with small shadow</div>
       
      
           
   
diff --git a/sample/spacing.dita b/sample/spacing.dita
index 51c3ec2..e3d24a6 100644
--- a/sample/spacing.dita
+++ b/sample/spacing.dita
@@ -20,98 +20,98 @@
     
   
   
-    
      
+    
      
       Margin
       
      The margin attribute controls the distance between elements, supporting values from 0 to 5 and auto.
      
     
      
 
-    
-      
      Margin 0
      
-      
      Margin 1
      
-      
      Margin 2
      
-      
      Margin 3
      
-      
      Margin 4
      
-      
      Margin 5
      
-      
      Margin Auto
      
-          
+    
+      
      Margin 0
      
+      
      Margin 1
      
+      
      Margin 2
      
+      
      Margin 3
      
+      
      Margin 4
      
+      
      Margin 5
      
+      
      Margin Auto
      
+          
 
     
       
      
         Specialization
-        <div color="primary" margin="0" padding="2">Margin 0</div>
-<div color="secondary" margin="1" padding="2">Margin 1</div>
-<div color="success" margin="2" padding="2">Margin 2</div>
-<div color="danger" margin="3" padding="2">Margin 3</div>
-<div color="warning" margin="4" padding="2">Margin 4</div>
-<div color="info" margin="5" padding="2">Margin 5</div>
-<div color="light" margin="auto" padding="2" width="50">Margin Auto</div>
+        <div theme="primary-contrast" margin="0" padding="2">Margin 0</div>
+<div theme="secondary-contrast" margin="1" padding="2">Margin 1</div>
+<div theme="success-contrast" margin="2" padding="2">Margin 2</div>
+<div theme="danger-contrast" margin="3" padding="2">Margin 3</div>
+<div theme="warning-contrast" margin="4" padding="2">Margin 4</div>
+<div theme="info-contrast" margin="5" padding="2">Margin 5</div>
+<div theme="accent-contrast" margin="auto" padding="2" width="50">Margin Auto</div>
       
      
       
      
         <xmlatt>outputclass</xmlatt>
-        <div outputclass="text-bg-primary m-0 p-2">Margin 0</div>
-<div outputclass="text-bg-secondary m-1 p-2">Margin 1</div>
-<div outputclass="text-bg-success m-2 p-2">Margin 2</div>
-<div outputclass="text-bg-danger m-3 p-2">Margin 3</div>
-<div outputclass="text-bg-warning m-4 p-2">Margin 4</div>
-<div outputclass="text-bg-info m-5 p-2">Margin 5</div>
-<div outputclass="text-bg-light m-auto p-2 w-50">Margin Auto</div>
+        <div outputclass="theme-primary theme-contrast m-0 p-2">Margin 0</div>
+<div outputclass="theme-secondary theme-contrast m-1 p-2">Margin 1</div>
+<div outputclass="theme-success theme-contrast m-2 p-2">Margin 2</div>
+<div outputclass="theme-danger theme-contrast m-3 p-2">Margin 3</div>
+<div outputclass="theme-warning theme-contrast m-4 p-2">Margin 4</div>
+<div outputclass="theme-info theme-contrast m-5 p-2">Margin 5</div>
+<div outputclass="theme-accent theme-contrast m-auto p-2 w-50">Margin Auto</div>
       
      
           
 
-    
      
+    
      
       Padding
       
      The padding attribute controls the internal spacing of an element, supporting values from 0 to 5.
      
     
      
 
-    
-      
      Padding 0
      
-      
      
+      
      Padding 0
      
+      
      Padding 1
      
-      
      Padding 2
      
-      
      Padding 3
      
-      
      Padding 4
      
-      
      Padding 5
      
-    
+    
 
     
       
      
         Specialization
-        <div color="primary" padding="0">Padding 0</div>
-<div color="secondary" padding="1" margin="1">Padding 1</div>
-<div color="success" padding="2" margin="1">Padding 2</div>
-<div color="danger" padding="3" margin="1">Padding 3</div>
-<div color="warning" padding="4" margin="1">Padding 4</div>
-<div color="info" padding="5" margin="1">Padding 5</div>
+        <div theme="primary-contrast" padding="0">Padding 0</div>
+<div theme="secondary-contrast" padding="1" margin="1">Padding 1</div>
+<div theme="success-contrast" padding="2" margin="1">Padding 2</div>
+<div theme="danger-contrast" padding="3" margin="1">Padding 3</div>
+<div theme="warning-contrast" padding="4" margin="1">Padding 4</div>
+<div theme="info-contrast" padding="5" margin="1">Padding 5</div>
       
      
       
      
         <xmlatt>outputclass</xmlatt>
-        <div outputclass="text-bg-primary p-0">Padding 0</div>
-<div outputclass="text-bg-secondary p-1 m-1">Padding 1</div>
-<div outputclass="text-bg-success p-2 m-1">Padding 2</div>
-<div outputclass="text-bg-danger p-3 m-1">Padding 3</div>
-<div outputclass="text-bg-warning p-4 m-1">Padding 4</div>
-<div outputclass="text-bg-info p-5 m-1">Padding 5</div>
+        <div outputclass="theme-primary theme-contrast p-0">Padding 0</div>
+<div outputclass="theme-secondary theme-contrast p-1 m-1">Padding 1</div>
+<div outputclass="theme-success theme-contrast p-2 m-1">Padding 2</div>
+<div outputclass="theme-danger theme-contrast p-3 m-1">Padding 3</div>
+<div outputclass="theme-warning theme-contrast p-4 m-1">Padding 4</div>
+<div outputclass="theme-info theme-contrast p-5 m-1">Padding 5</div>
       
      
           
 
-    
      
+    
      
       Directional Spacing
       
      The margin and padding attributes also support directional spacing using a prefix:
      
@@ -126,33 +126,30 @@
       
      Multiple values can be specified as a space-separated list.
      
     
      
 
-    
-      
      Margin Top 5, Bottom 0
      
-      
      Margin Horizontal 3
      
-      
      
+      
      Margin Top 5, Bottom 0
      
+      
      Margin Horizontal 3
      
+      
      Padding Vertical 5
      
+      
      Padding Vertical 5
      
-      
      Padding Start 3, End 1
      
-    
+    
 
     
       
      
         Specialization
-        <div color="primary" margin="t5 b0">Margin Top 5, Bottom 0</div>
-<div color="secondary" margin="x3">Margin Horizontal 3</div>
-<div color="success" padding="y5">Padding Vertical 5</div>
-<div color="danger" padding="s3 e1">Padding Start 3, End 1</div>
+        <div theme="primary-contrast" margin="t5 b0">Margin Top 5, Bottom 0</div>
+<div theme="secondary-contrast" margin="x3">Margin Horizontal 3</div>
+<div theme="success-contrast" padding="y5">Padding Vertical 5</div>
+<div theme="danger-contrast" padding="s3 e1">Padding Start 3, End 1</div>
       
      
       
      
         <xmlatt>outputclass</xmlatt>
-        <div outputclass="text-bg-primary mt-5 mb-0">Margin Top 5, Bottom 0</div>
-<div outputclass="text-bg-secondary mx-3">Margin Horizontal 3</div>
-<div outputclass="text-bg-success py-5">Padding Vertical 5</div>
-<div outputclass="text-bg-danger ps-3 pe-1">Padding Start 3, End 1</div>
+        <div outputclass="bg-primary mt-5 mb-0">Margin Top 5, Bottom 0</div>
+<div outputclass="bg-secondary mx-3">Margin Horizontal 3</div>
+<div outputclass="bg-success py-5">Padding Vertical 5</div>
+<div outputclass="bg-danger ps-3 pe-1">Padding Start 3, End 1</div>
       
      
           
   
diff --git a/sample/tables.dita b/sample/tables.dita
index b9351da..5240eac 100644
--- a/sample/tables.dita
+++ b/sample/tables.dita
@@ -2,10 +2,10 @@
 
 
 
@@ -25,7 +25,7 @@
     
   
   
-    
      
+    
      
       Overview
       
      Due to the widespread use of table elements across third-party widgets like calendars
         and date pickers, Bootstrap’s tables are opt-in. Extend with optional modifier output classes or custom styles.
@@ -34,7 +34,7 @@
       
      Using the most basic table markup, here’s how the default DITA Bootstrap .table-based tables
         look in Bootstrap.
      
     
      
-    
+    
       
           
@@ -65,7 +65,7 @@
           
         
      
         
       
      
-          
+    
 
     
       
      
@@ -106,12 +106,12 @@
 </table>
       
      
           
-    
      
+    
      
       Variants
       
      Use contextual classes to color tables, table rows or individual cells.
      
     
      
-    
-      
+    
+      
      
           
@@ -120,17 +120,17 @@
             
-            
+            
               Elephant (African and Asian)
               19-22 months
             
-            
+            
               Giraffe
               15 months
             
             
               Rhinoceros
-              14-16 months
+              14-16 months
             
             
               Hippopotamus
@@ -139,12 +139,12 @@
           
      
         
             
           
           
         
       
      
-          
+    
 
     
       
      
         Specialization
-        <table color="primary" padding="1" width="100">
+        <table theme="primary" padding="1" width="100">
   <tgroup cols="2">
     <thead>
       <row>
@@ -153,17 +153,17 @@
       </row>
     </thead>
     <tbody>
-      <row color="info">
+      <row theme="info">
         <entry>Elephant (African and Asian)</entry>
         <entry>19-22 months</entry>
       </row>
-      <row color="success">
+      <row theme="success">
         <entry>Giraffe</entry>
         <entry>15 months</entry>
       </row>
       <row>
         <entry>Rhinoceros</entry>
-        <entry color="danger">14-16 months</entry>
+        <entry theme="danger">14-16 months</entry>
       </row>
       <row>
         <entry>Hippopotamus</entry>
@@ -175,7 +175,7 @@
       
      
       
      
         <xmlatt>outputclass</xmlatt>
-        <table outputclass="table-primary p-1 w-100">
+        <table outputclass="theme-primary p-1 w-100">
   <tgroup cols="2">
     <thead>
       <row>
@@ -184,17 +184,17 @@
       </row>
     </thead>
     <tbody>
-      <row outputclass="table-info">
+      <row outputclass="theme-info">
         <entry>Elephant (African and Asian)</entry>
         <entry>19-22 months</entry>
       </row>
-      <row outputclass="table-success">
+      <row outputclass="theme-success">
         <entry>Giraffe</entry>
         <entry>15 months</entry>
       </row>
       <row>
         <entry>Rhinoceros</entry>
-        <entry outputclass="table-danger">14-16 months</entry>
+        <entry outputclass="theme-danger">14-16 months</entry>
       </row>
       <row>
         <entry>Hippopotamus</entry>
@@ -205,12 +205,12 @@
 </table>
       
      
           
-    
      
+    
      
       Striped rows
       
      Use striped="yes" to add zebra-striping to any table row
         within the tbody.
      
     
      
-    
+    
       
           
@@ -241,7 +241,7 @@
           
         
      
         
       
      
-          
+    
     
       
      
         Specialization
@@ -256,12 +256,12 @@
 </table>
       
      
           
-    
      
+    
      
       Striped columns
       
      Use striped-columns="yes" to add zebra-striping to any table column
         within the tbody.
      
     
      
-    
+    
       
           
@@ -292,7 +292,7 @@
           
         
      
         
       
      
-          
+    
     
       
      
         Specialization
@@ -307,12 +307,12 @@
 </table>
       
      
           
-    
      
+    
      
       Bordered tables
       
      Add rowsep="1" and colsep="1" for borders on all sides of the table and cells.
      
     
      
-    
+    
       
           
@@ -343,7 +343,7 @@
           
         
      
         
       
      
-          
+    
     
       
      
         Specialization
@@ -358,11 +358,11 @@
 </table>
       
      
           
-    
      
+    
      
       Tables without borders
       
      Add rowsep="0" and colsep="0" for a table without borders.
      
     
      
-    
+    
       
           
@@ -393,7 +393,7 @@
           
         
      
         
       
      
-          
+    
     
       
      
         Specialization
@@ -408,12 +408,12 @@
 </table>
       
      
           
-    
      
+    
      
       Small tables
       
      Add compact="yes" to make any table more compact by cutting all cell padding in half.
      
     
      
-    
+    
       
           
@@ -444,7 +444,7 @@
           
         
      
         
       
      
-          
+    
     
       
      
         Specialization
@@ -459,12 +459,12 @@
 </table>
       
      
           
-    
      
+    
      
       Table group dividers
       
      Add a thicker border, darker between table groups—thead and tbody, with divider="yes" on the table.
      
     
      
-    
+    
       
           
@@ -495,7 +495,7 @@
           
         
      
         
       
      
-          
+    
     
       
      
         Specialization
@@ -513,7 +513,7 @@
 </tbody>
       
      
           
-    
      
+    
      
       Vertical alignment
       
      Table cells of thead are always vertical aligned to the bottom. Table cells in table and are aligned to the top by default. Use the valign attribute to re-align where needed.
      
     
      
-    
+    
       
           
@@ -564,7 +564,7 @@
           
         
      
         
       
      
-          
+    
     
       
      
         Specialization
@@ -625,18 +625,18 @@
 </table>
       
      
           
-    
      
+    
      
       Table head
-      
      Similar to tables and dark tables, use the modifier color="light" or
-          color="dark" to make thead elements appear light or dark
+      
      Similar to tables and dark tables, use the modifier theme="accent" or
+          theme="inverse" to make thead elements appear light or dark
         gray.
      
     
      
-    
+    
       
           
           
-          
+          
               Animal
               Gestation
@@ -662,13 +662,13 @@
           
         
       
      
         
             
      
-          
+    
     
       
      
         Specialization
         <table>
   <tgroup>
-    <thead color="light">
+    <thead theme="secondary">
       ...etc
     </thead>
   </tgroup>
@@ -678,19 +678,19 @@
         <xmlatt>outputclass</xmlatt>
         <table>
   <tgroup>
-    <thead outputclass="table-light">
+    <thead outputclass="theme-secondary">
       ...etc
     </thead>
   </tgroup>
 </table>
       
      
           
-    
+    
       
           
           
-          
+          
               Animal
               Gestation
@@ -716,13 +716,13 @@
           
         
       
      
         
             
      
-          
+    
     
       
      
         Specialization
         <table>
   <tgroup>
-    <thead color="dark">
+    <thead theme="inverse">
       ...etc
     </thead>
   </tgroup>
@@ -732,7 +732,7 @@
         <xmlatt>outputclass</xmlatt>
         <table>
   <tgroup>
-    <thead outputclass="table-dark">
+    <thead outputclass="theme-inverse">
       ...etc
     </thead>
   </tgroup>
diff --git a/sample/tabs.dita b/sample/tabs.dita
index 4aeedc5..00801de 100644
--- a/sample/tabs.dita
+++ b/sample/tabs.dita
@@ -1,10 +1,10 @@
 
 
 
@@ -25,13 +25,13 @@
     
   
   
-    
      
+    
      
       Basic example
       
      The following example shows a simple tabbed dialog using a tabbed-dialog
           style="tabs" element containing a series of section elements
       
      
     
      
-    
+    
       
         
      
           Home
@@ -97,7 +97,7 @@
       
     
      The tabs plugin also works with pills using style="pills"
     
      
-    
+    
       
         
      
           Home
@@ -163,7 +163,7 @@
       
     
      And with vertical pills using style="vertical-pills"
     
      
-    
+    
       
         
      
           Home
diff --git a/sample/theme.dita b/sample/theme.dita
new file mode 100644
index 0000000..193c441
--- /dev/null
+++ b/sample/theme.dita
@@ -0,0 +1,531 @@
+
+
+
+
+  Theme
+  Combine one of three theme utilities with the Bootstrap theme color classes to set
+    color and background-color pairings on any element, just like component variants.
+  
+    
+      
+        Theme
+        Color
+        Background
+        CSS
+          outputclass
+        
+      
+    
+  
+  
+
+    
      
+      Overview
+      
      Take any of Bootstrap theme color classes and add theme-contrast,
+        theme-subtle, or theme-muted to set a predefined
+        color and background-color pairing. Then optionally add theme-border
+        to set a predefined border color.
      
+    
      
+
+    
      
+      Contrast
+      
      Contrast pairs the bg theme token with the contrast text color for maximum
+        readability with theme-contrast. This is ideal for high-emphasis
+        elements with solid backgrounds.
      
+    
      
+    
+      
      
+        
      primary-contrast
      
+        
      accent-contrast
      
+        
      success-contrast
      
+        
      danger-contrast
      
+        
      warning-contrast
      
+        
      info-contrast
      
+        
      inverse-contrast
      
+        
      secondary-contrast
      
+      
      
+          
+    
+      
      
+        Specialization
+        <div theme="primary-contrast" padding="2">primary-contrast</div>
+<div theme="accent-contrast" padding="2">accent-contrast</div>
+<div theme="success-contrast" padding="2">success-contrast</div>
+<div theme="danger-contrast" padding="2">danger-contrast</div>
+<div theme="warning-contrast" padding="2">warning-contrast</div>
+<div theme="info-contrast" padding="2">info-contrast</div>
+<div theme="inverse-contrast" padding="2">inverse-contrast</div>
+<div theme="secondary-contrast" padding="2">secondary-contrast</div>
+      
      
+      
      
+        <xmlatt>outputclass</xmlatt>
+        <div outputclass="p-2 theme-primary theme-contrast">primary-contrast</div>
+<div outputclass="p-2 theme-accent theme-contrast">accent-contrast</div>
+<div outputclass="p-2 theme-success theme-contrast">success-contrast</div>
+<div outputclass="p-2 theme-danger theme-contrast">danger-contrast</div>
+<div outputclass="p-2 theme-warning theme-contrast">warning-contrast</div>
+<div outputclass="p-2 theme-info theme-contrast">info-contrast</div>
+<div outputclass="p-2 theme-inverse theme-contrast">inverse-contrast</div>
+<div outputclass="p-2 theme-secondary theme-contrast">secondary-contrast</div>
+      
      
+          
+
+    
      Nested links inherit the contrast foreground so they stay legible on the solid background:
      
+    
+      
      
+        
      Theme Primary with a
+          nested link inside.
      
+        
      Theme Accent with a
+          nested link inside.
      
+        
      Theme Success with a
+          nested link inside.
      
+        
      Theme Danger with a
+          nested link inside.
      
+        
      Theme Warning with a
+          nested link inside.
      
+        
      Theme Info with a
+          nested link inside.
      
+        
      Theme Inverse with a
+          nested link inside.
      
+        
      Theme Secondary with a
+          nested link inside.
      
+      
      
+          
+    
+      
      
+        Specialization
+        <div theme="primary-contrast" padding="3">Theme Primary with a
+  <xref href="#">nested link</xref> inside.</div>
+      
      
+      
      
+        <xmlatt>outputclass</xmlatt>
+        <div outputclass="p-3 theme-primary theme-contrast">Theme Primary with a
+  <xref href="#">nested link</xref> inside.</div>
+      
      
+          
+
+    
      
+      Subtle
+      
      Subtle pairs the bg-subtle theme token with the text text color for a
+        lower-contrast, more subtle appearance. This combination will automatically
+        adjust to the current color mode.
      
+    
      
+    
+      
      
+        
      primary-subtle
      
+        
      accent-subtle
      
+        
      success-subtle
      
+        
      danger-subtle
      
+        
      warning-subtle
      
+        
      info-subtle
      
+        
      inverse-subtle
      
+        
      secondary-subtle
      
+      
      
+          
+    
+      
      
+        Specialization
+        <div theme="primary-subtle" padding="2">primary-subtle</div>
+<div theme="accent-subtle" padding="2">accent-subtle</div>
+<div theme="success-subtle" padding="2">success-subtle</div>
+<div theme="danger-subtle" padding="2">danger-subtle</div>
+<div theme="warning-subtle" padding="2">warning-subtle</div>
+<div theme="info-subtle" padding="2">info-subtle</div>
+<div theme="inverse-subtle" padding="2">inverse-subtle</div>
+<div theme="secondary-subtle" padding="2">secondary-subtle</div>
+      
      
+      
      
+        <xmlatt>outputclass</xmlatt>
+        <div outputclass="p-2 theme-primary theme-subtle">primary-subtle</div>
+<div outputclass="p-2 theme-accent theme-subtle">accent-subtle</div>
+<div outputclass="p-2 theme-success theme-subtle">success-subtle</div>
+<div outputclass="p-2 theme-danger theme-subtle">danger-subtle</div>
+<div outputclass="p-2 theme-warning theme-subtle">warning-subtle</div>
+<div outputclass="p-2 theme-info theme-subtle">info-subtle</div>
+<div outputclass="p-2 theme-inverse theme-subtle">inverse-subtle</div>
+<div outputclass="p-2 theme-secondary theme-subtle">secondary-subtle</div>
+      
      
+          
+
+    
      And with borders:
      
+    
+      
      
+        
      primary-subtle-border
      
+        
      accent-subtle-border
      
+        
      success-subtle-border
      
+        
      danger-subtle-border
      
+        
      warning-subtle-border
      
+        
      info-subtle-border
      
+        
      inverse-subtle-border
      
+        
      secondary-subtle-border
      
+      
      
+          
+    
+      
      
+        Specialization
+        <div theme="primary-subtle-border" padding="2">primary-subtle-border</div>
+<div theme="accent-subtle-border" padding="2">accent-subtle-border</div>
+<div theme="success-subtle-border" padding="2">success-subtle-border</div>
+<div theme="danger-subtle-border" padding="2">danger-subtle-border</div>
+<div theme="warning-subtle-border" padding="2">warning-subtle-border</div>
+<div theme="info-subtle-border" padding="2">info-subtle-border</div>
+<div theme="inverse-subtle-border" padding="2">inverse-subtle-border</div>
+<div theme="secondary-subtle-border" padding="2">secondary-subtle-border</div>
+      
      
+      
      
+        <xmlatt>outputclass</xmlatt>
+        <div outputclass="p-2 theme-primary theme-subtle theme-border">primary-subtle-border</div>
+<div outputclass="p-2 theme-accent theme-subtle theme-border">accent-subtle-border</div>
+<div outputclass="p-2 theme-success theme-subtle theme-border">success-subtle-border</div>
+<div outputclass="p-2 theme-danger theme-subtle theme-border">danger-subtle-border</div>
+<div outputclass="p-2 theme-warning theme-subtle theme-border">warning-subtle-border</div>
+<div outputclass="p-2 theme-info theme-subtle theme-border">info-subtle-border</div>
+<div outputclass="p-2 theme-inverse theme-subtle theme-border">inverse-subtle-border</div>
+<div outputclass="p-2 theme-secondary theme-subtle theme-border">secondary-subtle-border</div>
+      
      
+          
+
+    
      Nested links inherit the subtle foreground so they stay legible on the subtle background:
      
+    
+      
      
+        
      Theme Primary with a
+          nested link inside.
      
+        
      Theme Accent with a
+          nested link inside.
      
+        
      Theme Success with a
+          nested link inside.
      
+        
      Theme Danger with a
+          nested link inside.
      
+        
      Theme Warning with a
+          nested link inside.
      
+        
      Theme Info with a
+          nested link inside.
      
+        
      Theme Inverse with a
+          nested link inside.
      
+        
      Theme Secondary with a
+          nested link inside.
      
+      
      
+          
+    
+      
      
+        Specialization
+        <div theme="primary-subtle" padding="3">Theme Primary with a
+  <xref href="#">nested link</xref> inside.</div>
+      
      
+      
      
+        <xmlatt>outputclass</xmlatt>
+        <div outputclass="p-3 theme-primary theme-subtle">Theme Primary with a
+  <xref href="#">nested link</xref> inside.</div>
+      
      
+          
+
+    
      
+      Muted
+      
      Muted pairs the bg-muted theme token with the text-emphasis text color for a
+        lower-contrast, more muted appearance. Like subtle, this combination will
+        automatically adjust to the current color mode.
      
+    
      
+    
+      
      
+        
      primary-muted
      
+        
      accent-muted
      
+        
      success-muted
      
+        
      danger-muted
      
+        
      warning-muted
      
+        
      info-muted
      
+        
      inverse-muted
      
+        
      secondary-muted
      
+      
      
+          
+    
+      
      
+        Specialization
+        <div theme="primary-muted" padding="2">primary-muted</div>
+<div theme="accent-muted" padding="2">accent-muted</div>
+<div theme="success-muted" padding="2">success-muted</div>
+<div theme="danger-muted" padding="2">danger-muted</div>
+<div theme="warning-muted" padding="2">warning-muted</div>
+<div theme="info-muted" padding="2">info-muted</div>
+<div theme="inverse-muted" padding="2">inverse-muted</div>
+<div theme="secondary-muted" padding="2">secondary-muted</div>
+      
      
+      
      
+        <xmlatt>outputclass</xmlatt>
+        <div outputclass="p-2 theme-primary theme-muted">primary-muted</div>
+<div outputclass="p-2 theme-accent theme-muted">accent-muted</div>
+<div outputclass="p-2 theme-success theme-muted">success-muted</div>
+<div outputclass="p-2 theme-danger theme-muted">danger-muted</div>
+<div outputclass="p-2 theme-warning theme-muted">warning-muted</div>
+<div outputclass="p-2 theme-info theme-muted">info-muted</div>
+<div outputclass="p-2 theme-inverse theme-muted">inverse-muted</div>
+<div outputclass="p-2 theme-secondary theme-muted">secondary-muted</div>
+      
      
+          
+
+    
      Nested links inherit the muted foreground so they stay legible on the muted background:
      
+    
+      
      
+        
      Theme Primary with a
+          nested link inside.
      
+        
      Theme Accent with a
+          nested link inside.
      
+        
      Theme Success with a
+          nested link inside.
      
+        
      Theme Danger with a
+          nested link inside.
      
+        
      Theme Warning with a
+          nested link inside.
      
+        
      Theme Info with a
+          nested link inside.
      
+        
      Theme Inverse with a
+          nested link inside.
      
+        
      Theme Secondary with a
+          nested link inside.
      
+      
      
+          
+    
+      
      
+        Specialization
+        <div theme="primary-muted" padding="3">Theme Primary with a
+  <xref href="#">nested link</xref> inside.</div>
+      
      
+      
      
+        <xmlatt>outputclass</xmlatt>
+        <div outputclass="p-3 theme-primary theme-muted">Theme Primary with a
+  <xref href="#">nested link</xref> inside.</div>
+      
      
+          
+
+    
      
+      Comparison
+      
      Here's a side-by-side comparison of all three styles for each theme color,
+        including nested links:
      
+    
      
+    
+      
      
+        
      Primary with a
+          link
      
+        
      Primary with a
+          link
      
+        
      Primary with a
+          link
      
+      
      
+      
      
+        
      Accent with a
+          link
      
+        
      Accent with a
+          link
      
+        
      Accent with a
+          link
      
+      
      
+      
      
+        
      Success with a
+          link
      
+        
      Success with a
+          link
      
+        
      Success with a
+          link
      
+      
      
+      
      
+        
      Danger with a
+          link
      
+        
      Danger with a
+          link
      
+        
      Danger with a
+          link
      
+      
      
+      
      
+        
      Warning with a
+          link
      
+        
      Warning with a
+          link
      
+        
      Warning with a
+          link
      
+      
      
+      
      
+        
      Info with a
+          link
      
+        
      Info with a
+          link
      
+        
      Info with a
+          link
      
+      
      
+      
      
+        
      Inverse with a
+          link
      
+        
      Inverse with a
+          link
      
+        
      Inverse with a
+          link
      
+      
      
+      
      
+        
      Secondary with a
+          link
      
+        
      Secondary with a
+          link
      
+        
      Secondary with a
+          link
      
+      
      
+          
+    
+      
      
+        Specialization
+        <div outputclass="d-flex gap-2" margin="b2">
+  <div theme="primary-contrast" padding="3" rounded="yes" outputclass="flex-fill text-center">Primary with a
+    <xref href="#">link</xref></div>
+  <div theme="primary-subtle" padding="3" rounded="yes" outputclass="flex-fill text-center">Primary with a
+    <xref href="#">link</xref></div>
+  <div theme="primary-muted" padding="3" rounded="yes" outputclass="flex-fill text-center">Primary with a
+    <xref href="#">link</xref></div>
+</div>
+      
      
+      
      
+        <xmlatt>outputclass</xmlatt>
+        <div outputclass="d-flex gap-2 mb-2">
+  <div outputclass="theme-primary theme-contrast p-3 flex-fill text-center rounded">Primary with a
+    <xref href="#">link</xref></div>
+  <div outputclass="theme-primary theme-subtle p-3 flex-fill text-center rounded">Primary with a
+    <xref href="#">link</xref></div>
+  <div outputclass="theme-primary theme-muted p-3 flex-fill text-center rounded">Primary with a
+    <xref href="#">link</xref></div>
+</div>
+      
      
+          
+
+    
      
+      With components
+      
      Theme utilities work great with components that support theming. Use theme
+        style classes on individual elements.
      
+    
      
+    
+      
      
+        Solid badge
+        Outline badge
+        Subtle badge
+      
      
+      
      
+        Solid badge
+        Outline badge
+        Subtle badge
+      
      
+          
+    
+      
      
+        Specialization
+        <div outputclass="d-flex gap-2 mb-3">
+  <badge theme="primary">Solid badge</badge>
+  <badge theme="primary-outline">Outline badge</badge>
+  <badge theme="primary-subtle">Subtle badge</badge>
+</div>
+      
      
+      
      
+        <xmlatt>outputclass</xmlatt>
+        <div outputclass="theme-primary">
+  <div outputclass="d-flex gap-2 mb-3">
+    <ph outputclass="badge theme-contrast">Contrast badge</ph>
+    <ph outputclass="badge theme-subtle">Subtle badge</ph>
+    <ph outputclass="badge theme-muted">Muted badge</ph>
+  </div>
+</div>
+      
      
+          
+
+    
      You can also mix theme colors within the same container by applying different
+      theme-{color} classes to child elements:
      
+    
+      
      
+        
      Success
      
+        
      Warning
      
+        
      Danger
      
+      
      
+          
+    
+      
      
+        Specialization
+        <div outputclass="d-flex gap-2">
+  <div theme="success-contrast" padding="3" rounded="yes">Success</div>
+  <div theme="warning-contrast" padding="3" rounded="yes">Warning</div>
+  <div theme="danger-contrast" padding="3" rounded="yes">Danger</div>
+</div>
+      
      
+      
      
+        <xmlatt>outputclass</xmlatt>
+        <div outputclass="d-flex gap-2">
+  <div outputclass="theme-success theme-contrast p-3 rounded">Success</div>
+  <div outputclass="theme-warning theme-contrast p-3 rounded">Warning</div>
+  <div outputclass="theme-danger theme-contrast p-3 rounded">Danger</div>
+</div>
+      
      
+          
+
+    
      
+      How theme values are built up
+      
      Every theme value used throughout this documentation, whether on an individual
+        element's theme attribute (or the base plugin's outputclass), or on one of the --bootstrap.theme.*
+        command line parameters below, is a hyphenated compound of one of the 8 Bootstrap
+        theme colors:
      
+      
        
+        
      • accent
        • 
+        
      • danger
        • 
+        
      • info
        • 
+        
      • inverse
        • 
+        
      • primary
        • 
+        
      • secondary
        • 
+        
      • success
        • 
+        
      • warning
        • 
+      
      
+      
      With a suffix indicating the theme style
      
+      
        
+        
      • -contrast pairs the solid background with the contrast text color
        • 
+        
      • -subtle pairs the low-contrast background with matching text
        • 
+        
      • -muted pairs the low-contrast background with muted text
        • 
+        
      • -border sets a predefined border color on its own
        • 
+        
      • -subtle-border combines -subtle and -border
        • 
+      
      
+      
      The following command line parameters optionally consume a theme value to style layout regions:
      
+      
+        
+          --bootstrap.theme.header
+          Page header theme. Defaults to 
+        
+        
+          --bootstrap.theme.footer
+          Page footer theme. Defaults to 
+        
+        
+          --bootstrap.theme.sidebar
+           theme. Defaults to 
+        
+        
+          --bootstrap.theme.topbar
+           theme. Defaults to 
+        
+        
+          --bootstrap.theme.content
+          Main content area theme. Defaults to 
+        
+        
+          --bootstrap.theme.scrollspy
+           menu theme. Defaults to 
+        
+        
+          --bootstrap.theme.body
+          Page body. Defaults to
+            
+        
+      
+    
      
+
+  
+      
diff --git a/sample/tooltips.dita b/sample/tooltips.dita
index 3a9cffd..ba8d426 100644
--- a/sample/tooltips.dita
+++ b/sample/tooltips.dita
@@ -1,10 +1,10 @@
 
 
 
@@ -26,7 +26,7 @@
     
   
   
-    
      
+    
      
       Overview
       
      Things to know when using the tooltip plugin:
      
       
        
@@ -43,12 +43,12 @@
       
      
     
      
 
-    
      
+    
      
       Examples
       
      Hover over the links below to see tooltips:
      
     
      
 
-    
+    
       
      Placeholder text to demonstrate some
          inline links Default tooltip with tooltips. This is
         now just filler, no killer. Content placed here just to mimic the presence of
@@ -57,7 +57,31 @@
          these tooltips on linksAnother one here too can
         work in practice, once you use them on
          your ownThe last tip! site or project.
      
-          
+    
+    
+      
      
+        Specialization
+        <p>Placeholder text to demonstrate some
+  <tooltip> inline links <desc>Default tooltip</desc></tooltip> with tooltips. This is
+  now just filler, no killer. Content placed here just to mimic the presence of
+  <tooltip> real text<desc>Another tooltip</desc></tooltip>. And all that just to give
+  you an idea of how tooltips would look when used in real-world situations. So hopefully you've now seen how
+  <tooltip> these tooltips on links<desc>Another one here too</desc></tooltip> can
+  work in practice, once you use them on
+  <tooltip> your own<desc>The last tip!</desc></tooltip> site or project.</p>
+      
      
+      
      
+        <xmlatt>outputclass</xmlatt>
+        <p>Placeholder text to demonstrate some
+  <xref href="#" outputclass="tooltip-top"> inline links <desc>Default tooltip</desc></xref> with tooltips. This is
+  now just filler, no killer. Content placed here just to mimic the presence of
+  <xref href="#" outputclass="tooltip-top"> real text<desc>Another tooltip</desc></xref>. And all that just to give
+  you an idea of how tooltips would look when used in real-world situations. So hopefully you've now seen how
+  <xref href="#" outputclass="tooltip-top"> these tooltips on links<desc>Another one here too</desc></xref> can
+  work in practice, once you use them on
+  <xref href="#" outputclass="tooltip-top"> your own<desc>The last tip!</desc></xref> site or project.</p>
+      
      
+          
 
     
      To enable tooltips, add output-class="tooltip-*" to the enclosing
       xref. For the tooltip element use the output-class or taken from the attribute.
      
     
      Hover over the buttons below to see the four tooltips directions: top, right,
         bottom, and left. Directions are mirrored when using Bootstrap in RTL.
      
-    
-      
+    
+      
         Tooltip on top Tooltip on top 
-      
+      
         Tooltip on right Tooltip on right 
-      
+      
         Tooltip on bottom Tooltip on bottom 
-      
+      
         Tooltip on left Tooltip on left 
-    
+    
     
       
      
         Specialization
-          <tooltip outputclass="btn-secondary" position="top">
+          <tooltip outputclass="btn-solid" theme="secondary-contrast" position="top">
   <desc>Tooltip on top</desc>
   Tooltip on top
 </tooltip>
-<tooltip outputclass="btn-secondary" position="right">
+<tooltip outputclass="btn-solid" theme="secondary-contrast" position="right">
   <desc>Tooltip on right</desc>
   Tooltip on right
 </tooltip>
-<tooltip outputclass="btn-secondary" position="bottom">
+<tooltip outputclass="btn-solid" theme="secondary-contrast" position="bottom">
   <desc>Tooltip on bottom</desc>
   Tooltip on bottom
 </tooltip>
-<tooltip outputclass="btn-secondary" position="left">
+<tooltip outputclass="btn-solid" theme="secondary-contrast" position="left">
   <desc>Tooltip on left</desc>
   Tooltip on left
 </tooltip>
       
      
       
      
         <xmlatt>outputclass</xmlatt>
-        <xref href="#" outputclass="btn-secondary tooltip-top">
+        <xref href="#" outputclass="btn-solid theme-secondary tooltip-top">
   <desc>Tooltip on top</desc>
   Tooltip on top
 </xref>
-<xref href="#" outputclass="btn-secondary tooltip-right">
+<xref href="#" outputclass="btn-solid theme-secondary tooltip-right">
   <desc>Tooltip on right</desc>
   Tooltip on right
 </xref>
-<xref href="#" outputclass="btn-secondary tooltip-bottom">
+<xref href="#" outputclass="btn-solid theme-secondary tooltip-bottom">
   <desc>Tooltip on bottom</desc>
   Tooltip on bottom
 </xref>
-<xref href="#" outputclass="btn-secondary tooltip-left">
+<xref href="#" outputclass="btn-solid theme-secondary tooltip-left">
   <desc>Tooltip on left</desc>
   Tooltip on left
 </xref>
@@ -117,29 +141,29 @@
       
       
      Custom HTML can be added to tooltips using additional DITA elements within the desc
       
      
-    
-      
+    
+      
         Tooltip
           with
           DITA elements Tooltip with embedded DITA 
-    
+    
     
       
      
         Specialization
-          <tooltip outputclass="btn-secondary">
-  <desc><b>Tooltip</b> <u>with&lt;/u> <b>DITA</b> elements</desc>
-  Tooltip with embedded DITA
+          <tooltip outputclass="btn-solid" theme="secondary-contrast">
+<desc><b>Tooltip</b> <u>with&lt;/u> <b>DITA</b> elements</desc>
+Tooltip with embedded DITA
 </tooltip>
         
      
          
      
           <xmlatt>outputclass</xmlatt>
-          <xref href="#" outputclass="btn-secondary tooltip-top">
-  <desc><b>Tooltip</b> <u>with&lt;/u> <b>DITA</b> elements</desc>
-  Tooltip with embedded DITA
+          <xref href="#" outputclass="btn-solid theme-secondary tooltip-top">
+<desc><b>Tooltip</b> <u>with&lt;/u> <b>DITA</b> elements</desc>
+Tooltip with embedded DITA
 </xref>
         
      
             
-    
      
+    
      
       Custom tooltips
       
      You can customize the appearance of tooltips using CSS variables. We set a custom class with <data name="class">custom-tooltip<data>  to scope our custom appearance and use it to override a local CSS variable.
      
@@ -147,17 +171,17 @@
     .custom-tooltip {
   --bs-tooltip-bg: var(--bs-primary);
 }
-    
-      
+    
+      
         custom-tooltip
         This top tooltip is themed via CSS variables.
         Custom tooltip
       
-    
+    
     
       
      
         Specialization
-          <tooltip outputclass="btn-secondary">
+          <tooltip outputclass="btn-solid" theme="secondary-contrast">
   <data name="class">custom-tooltip</data>
   <desc>This top tooltip is themed via CSS variables.</desc>
   Custom tooltip
@@ -165,7 +189,7 @@
         
      
          
      
           <xmlatt>outputclass</xmlatt>
-          <xref href="#" outputclass="btn-secondary tooltip-top">
+          <xref href="#" outputclass="btn-solid theme-secondary tooltip-top">
   <data name="class">custom-tooltip</data>
   <desc>This top tooltip is themed via CSS variables.</desc>
   Custom tooltip
diff --git a/sample/typography.dita b/sample/typography.dita
index 4fc5fbf..8da3f46 100644
--- a/sample/typography.dita
+++ b/sample/typography.dita
@@ -2,7 +2,7 @@
 
 
 
@@ -23,73 +23,74 @@
     
   
   
-    
      
+    
      
       Headings
       
      All HTML headings, h1 through h6, are available.
           outputclass="h1" through outputclass="h6" are also available, for when you
         want to match the font styling of a heading but cannot use the associated HTML element.
      
     
      
-    
+    
       
      h1. Bootstrap heading
      
       
      h2. Bootstrap heading
      
       
      h3. Bootstrap heading
      
       
      h4. Bootstrap heading
      
       
      h5. Bootstrap heading
      
       
      h6. Bootstrap heading
      
-          
+    
     <title outputclass="h1">h1. Bootstrap heading</title>
 <title outputclass="h2">h2. Bootstrap heading</title>
 <title outputclass="h3">h3. Bootstrap heading</title>
 <title outputclass="h4">h4. Bootstrap heading</title>
 <title outputclass="h5">h5. Bootstrap heading</title>
 <title outputclass="h6">h6. Bootstrap heading</title>
-    
      
+    
      
       Customizing headings
       
      Annotate a ph with an outputclass to recreate the small secondary
         heading text from Bootstrap 3.
      
     
      
-    
+    
       
      Fancy display heading with faded secondary text
      
-          
+    
     <title>Fancy display heading <ph outputclass="small text-body-secondary">with faded secondary text</ph></title>
-    
      
+    ><title>Fancy display heading <ph outputclass="small fs-md fg-secondary">with faded secondary text</ph></title>
+    
      
       Display headings
       
      Traditional heading elements are designed to work best in the meat of your page content. When you need a
         heading to stand out, consider using a display heading — a larger, slightly more opinionated heading style.
      
     
      
-    
-      
      Display 1
      
-      
      Display 2
      
-      
      Display 3
      
-      
      Display 4
      
-      
      Display 5
      
-      
      Display 6
      
-          
-    <title outputclass="display-1">Display 1</title>
-<title outputclass="display-2">Display 2</title>
-<title outputclass="display-3">Display 3</title>
-<title outputclass="display-4">Display 4</title>
-<title outputclass="display-5">Display 5</title>
-<title outputclass="display-6">Display 6</title>
-    
      
+    
+      
      Display 1
      
+      
      Display 2
      
+      
      Display 3
      
+      
      Display 4
      
+      
      Display 5
      
+      
      Display 6
      
+          
+    <title outputclass="fw-light fs-6xl">Display 1</title>
+<title outputclass="fw-light fs-5xl">Display 2</title>
+<title outputclass="fw-light fs-4xl">Display 3</title>
+<title outputclass="fw-light fs-3xl">Display 4</title>
+<title outputclass="fw-light fs-2xl">Display 5</title>
+<title outputclass="fw-light fs-xl">Display 6</title>
+    
      
       Lead
-      
      Make a paragraph stand out by adding outputclass="lead" — this is automatically added to
+      
      Make a paragraph stand out by adding outputclass="fw-light fs-lg" — this is automatically added to
           shortdesc elements.
      
     
      
-    
-      
      This is a lead paragraph. It stands out from regular paragraphs.
      
-          
-    <p outputclass="lead">
+    
+      
      This is a lead paragraph. It stands out from regular paragraphs.
      
+          
+    <p outputclass="fw-light fs-lg">
   This is a lead paragraph. It stands out from regular paragraphs.
 </p>
-    
      
+    
      
       Inline text elements
       
      Styling for common inline HTML5 elements.
      
     
      
-    
+    
       
      You can use outputclass="mark" to highlight text.
      
       
      This line of text is meant to be treated as deleted text.
      
       
      This line of text will render as underlined.
      
@@ -97,7 +98,7 @@
         print.
      
       
      This line rendered as bold text.
      
       
      This line rendered as italicized text.
      
-          
+    
     <p>You can use <xmlatt>outputclass="mark"</xmlatt> to <ph outputclass="mark">highlight</ph> text.</p>
 <p><line-through>This line of text is meant to be treated as deleted
@@ -107,27 +108,27 @@
   is meant to be treated as fine print.</p>
 <p><b>This line rendered as bold text.</b></p>
 <p><i>This line rendered as italicized text.</i></p>
-    
      
+    
      
       Text utilities
       
      Change text alignment, transform, style, weight, line-height, decoration and color with Bootstrap’s
         text and color utilities.
      
     
      
 
-    
      
+    
      
       Abbreviations
       
      Stylized implementation of HTML’s abbr element for abbreviations and acronyms to show
         the expanded version on hover. Abbreviations have a default underline and gain a help cursor to provide
         additional context on hover and to users of assistive technologies. 
      
       
      Add outputclass="initialism" to an abbreviation for a slightly smaller font-size.
      
     
      
-    
+    
       
      
         attr
       
      
       
      
         HTML
       
      
-          
+    
     <p>
   <ph outputclass="abbreviation" otherprops="title(attribute)">attr</ph>
 </p>
@@ -135,20 +136,20 @@
   <ph outputclass="initialism" otherprops="title(HyperText Markup Language)">HTML</ph>
 </p>
   
-    
      
+    
      
       Blockquotes
       
      For quoting blocks of content from another source within your document, use the DITA
           lq element, it is styled automatically.
      
     
      
-    
+    
       
         
      A well-known quote, contained in a blockquote element.
      
             
-          
+    
     <lq>
   <p>A well-known quote, contained in a blockquote element.</p>
 </lq>
-    
      
+    
      
       Naming a source
       
      The HTML spec requires that blockquote attribution be placed outside the rendered HTML
           blockquote element. When providing attribution, wrap your the DITA
@@ -156,47 +157,47 @@
           fig. Be sure to wrap the name of the source work in the cite
         as well.
      
     
      
-    
+    
       
         Someone famous in <cite>Source Title</cite>
         
           
      A well-known quote, contained in a blockquote element.
      
               
             
-          
+    
     <fig>
   <title>Someone famous in <cite>Source Title</cite></title>
   <lq >
     <p>A well-known quote, contained in a blockquote element.</p>
   </lq>
 </fig>
-    
      
+    
      
       Alignment
       
      Use text utilities such as outputclass="text-center" as needed to change the alignment of your
         blockquote.
      
     
      
-    
+    
       
         Someone famous in <cite>Source Title</cite>
         
           
      A well-known quote, contained in a blockquote element.
      
               
             
-          
+    
     <fig outputclass="text-center">
   <title>Someone famous in <cite>Source Title</cite></title>
   <lq>
     <p>A well-known quote, contained in a blockquote element.</p>
   </lq>
 </fig>
-    
+    
       
         Someone famous in <cite>Source Title</cite>
         
           
      A well-known quote, contained in a blockquote element.
      
               
             
-          
+    
     <fig outputclass="text-end">
   <title>Someone famous in <cite>Source Title</cite></title>
   <lq>
@@ -204,16 +205,16 @@
   </lq>
 </fig>
 
-    
      
+    
      
       Lists
     
      
-    
      
+    
      
       Unstyled
       
      Remove the default list-style and left margin on list items (immediate children only). This only applies to
         immediate children list items, meaning you will need to add the outputclass="list-unstyled" for
         any nested lists as well.
      
     
      
-    
+    
       
        
         
      • This is a list.
        • 
         
      • It appears completely unstyled.
        • 
@@ -228,7 +229,7 @@
         
         
      • This may still come in handy in some situations.
        • 
       
      
-          
+    
     <ul outputclass="list-unstyled">
   <li>This is a list.</li>
   <li>It appears completely unstyled.</li>
@@ -243,30 +244,30 @@
   </li>
   <li>This may still come in handy in some situations.</li>
 </ul>
-    
      
+    
      
       Inline
       
      Remove a list’s bullets and apply some light margin using the
         outputclass="list-inline" attribute.
       
      
     
      
-    
+    
       
        
         
      • This is a list item.
        • 
         
      • And another one.
        • 
         
      • But they're displayed inline.
        • 
       
      
-          
+    
     <ul outputclass="list-inline">
   <li>This is a list item.</li>
   <li>And another one.</li>
   <li>But they're displayed inline.</li>
 </ul>
-    
      
+    
      
       Description list alignment
       
      Terms and descriptions align horizontally using Bootstrap’s grid system of predefined classes. For longer
         terms, text is truncated with an ellipsis.
      
     
      
-    
+    
       
      
         
           
      Description lists
      
@@ -299,7 +300,7 @@
           
               
       
      
-          
+    
         <dl>
   <dlentry>
     <dt>Description lists</dt>
@@ -333,14 +334,14 @@
     </dd>
   </dlentry>
 </dl>
-    
      
+    
      
       Description list column width
       
      Definitions lists use the twelve column system defined by the Bootstrap grid. By default each dt spreads over 3 column widths and each dd spreads over 9 column widths. Alter default width of terms by adding colspan
      
     
      
-    
+    
       
      
         
           
      Description lists
      
@@ -354,7 +355,7 @@
           
               
       
      
-          
+    
     
       
      
         Specialization